39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
The chances are that more of your WordPress website visitors are using mobiles, or more clients are demanding responsive or mobile sites. If you can use WordPress to build mobile-friendly sites you can win more business from clients and more traffic for your site.
"WordPress Mobile Web Development Beginner's Guide" will benefit you whether you've dabbled in WordPress or worked with it for years. It will help you identify which approach to mobile is most appropriate for your site (responsive, mobile, or web app) and learn how to make each one work, demonstrating a variety of techniques from the simple to the more complex, working through clear practical examples and applying these to your own website.
Start by quickly making a WordPress site mobile-friendly, using off the shelf plugins and responsive themes, choosing the best ones for you and customising them. This leads into responsive theme design, with advice on layout, images and navigation. Finally, learn how to build a web app in WordPress, making use of plugins, APIs and custom code.
If you need to hit the ground running with mobile WordPress development, then this book is for you. With practical examples and exercises from the beginning, it will help you build your first mobile WordPress site without having to learn aspects of WordPress or mobile development that aren't relevant. It will also help you understand which approaches work and why, so you can apply this knowledge to future projects.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 323
Veröffentlichungsjahr: 2012
Ähnliche
Table of Contents
WordPress Mobile Web Development Beginner's Guide
WordPress Mobile Web Development Beginner's Guide
Copyright © 2012 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: August 2012
Production Reference: 1170812
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84951-572-6
www.packtpub.com
Cover Image by Faiz Fattohi (<[email protected]>)
Credits
Author
Rachel McCollin
Reviewers
Evangelos Evangelou
Steve Graham
Todd Halfpenny
Acquisition Editor
Kartikey Pandey
Lead Technical Editor
Unnati Shah
Technical Editors
Devdutt Kulkarni
Rati Pillai
Prashant Salvi
Project Coordinator
Sai Gamare
Proofreader
Linda Morris
Indexer
Monica Ajmera Mehta
Production Coordinators
Aparna Bhagat
Nitesh Thakur
Cover Work
Aparna Bhagat
Nitesh Thakur
About the Author
Rachel McCollin is a WordPress Developer specializing in responsive and mobile web design. She first learned to code as a teenager when her parents bought her a computer with very few good games available she learned BASIC so that she could write her own code.
After gaining a degree in Psychology, she worked in e-learning, moving to web design after editing the Labour Party's general election website in 2001.
Rachel now runs Compass Design, a web design agency based in Birmingham, England, but with clients across the UK and internationally. The agency was established in 2010 and quickly began specializing in building WordPress themes and sites, with a slant towards responsive themes. Compass Design now prides itself on making all of the new sites it develops mobile-friendly. Rachel tweets about WordPress, mobile development, and many other things that catch her eye. You can follow her on twitter at @rachelmccollin.
I've learned most of what I know about web design, and WordPress development in particular, from the web design community. I'd like to thank all of the WordPress developers and designers, who have inspired and taught me, in particular the organizing team for WordCamp UK, without whom I would have never got the chance to discuss my ideas on mobile WordPress development with an audience.
A number of friends and colleagues have provided support, feedback, and advice—they include Andy Cobley, Tracey Dixon, Kriss Fearon, Todd Halfpenny, Sue Davis, Karen Bugg, Gary Jones, and Isaac Keyet at Automattic. My colleague Nivi Morales has taken up a lot of the slack in terms of client work while I've been writing this book, and given me invaluable moral support. And last, but not least, I have to thank my husband Pete, who doesn't let the fact that talk of WordPress and mobile websites makes his eyes glaze over, get in the way of his unwavering support for me in running my business and writing this book.
About the Reviewers
Evangelos Evangelou currently lives in Cyprus and is the Creative Director of PricklyPear Media.
Evangelos was born in the UK to Cypriot refugee parents from Kyrenia. His parents came to the UK in the mid-80s where they had their own catering business.
In 2005, Evangelos completed an honors B.Sc. degree in Web & Multimedia from the University of Central Lancashire. His studies were later finalized with an M.A. in Animation. Soon after his degree, Evangelos moved to Cyprus where he worked for SpiderNet (now PrimeTel—currently the largest ISP on the island) creating and building professional websites.
During his time of employment, he worked on several large-scale websites, including three of Cyprus' biggest websites such as Cyprus Airways, PhileNews, and the University of Cyprus. Soon after, PricklyPear Media Ltd. was created.
Now, Evangelos spends much of his time with personal clients and template production with Vorel Media, founded by Evangelos Evangelou and his good friend Bryan Vorel.
Evangelos has experience in WordPress, SEO, HTML, CSS, JavaScript, and template production. He is also a strong forum member on SitePoint, and was recently given a 'mentor' badge. On that note, Evangelos loves what he does and loves life!
Acknowledgement
I'd like to thank Packt Publishing, who gave me this opportunity in reviewing such a great book. I would also like to thank SitePoint for being such a great place for web designers.
My personal life is also very important, this acknowledgment goes to my loving parents, who made sure I was happy and had everything, achieving the unimaginable for their children (as in their mind we're still kids). I'd like to thank my four brothers for the support that they gave while reviewing this book, which would have been impossible without their constant re-enforcement.
Apart from my family, I'd like to thank everybody who helped PricklyPear Media in making it what it is today; this includes my past employers and co-workers. I look forward to Packt Publishing publishing more amazing books.
Steve Graham is an Entrepreneur and Web Developer specializing in WordPress websites. As a co-owner of Internet Mentor (http://internet-mentor.co.uk/meet-the-team/), he aims to ensure that all of his clients derive measurable and sustainable direct results that drive business growth.
Steve focuses on enabling clients, whether this is in relation to their business websites and social media activities, or in a broader sense through his other great passion of delivering presentation and leadership skills.
Todd Halfpenny has been working as a Software Designer for mobile telecoms operators for over 10 years and has an innate love for anything, and everything, related to mobile technology.
For the past four years, he has also worked on many WordPress projects, both personal and client based. Through these projects, he has developed tons of WordPress plugins, and among those listed in the WordPress.org plugin repository are the highly popular Widgets on Pages and Responsive TwentyTen.
His journey with mobile technology has also led him to develop a few Android applications including Asssist, which was the first Dribbble client for the platform.
Todd can be found online at http://toddhalfpenny.com and on Twitter at @toddhalfpenny.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
WordPress is fast becoming the world’s most popular website for Content Management System (CMS)—it now powers 22 percent of new domains in the USA. WordPress has a comparatively quick learning curve and with the use of plugins and custom code, can be made to run just about any website, no matter how complex is the functionality needed.
As more and more of us use devices such as smartphones and tablets to browse the Web instead of a desktop computer, the need for websites to be fast and user-friendly on those devices is getting more important. Mobile development is very hot in web design circles right now, with constant advances in techniques such as a responsive design and mobile-first content strategy ensuring that websites not only look good on mobile devices, but also give users the content and the experience they want.
If you’re one among the millions of people who own or manage a WordPress site, you’re probably already thinking about making it mobile-friendly. If you’re a WordPress developer, you may have been asked to develop a mobile-friendly site by a client, or possibly you’re considering it for your own site.
As we will see in this book, there are a number of ways to do this, ranging from the quick and dirty to the complex and potentially beautiful. By using a plugin, you can quickly make your site easier to read and interact with on mobile devices, or you can go further, harnessing the combined power of PHP, CSS, and relevant APIs to create a web app—a website that looks and behaves like a native app.
This book will take you through the process of making a self-hosted WordPress site (as opposed to a wordpress.com site) mobile-friendly. We will be working with the site for Carborelli’s, a fictitious ice cream parlor using its website to advertise its store and sell ice cream online. You’ll learn a variety of ways to make this site look and perform better on mobile devices, and we’ll work up to mobile e-commerce and finally, using WordPress to create a web app for Carborelli’s.
This book focuses on mobile development, so it’s worth identifying exactly what we mean when referring to different devices. The following are the definitions of some of the devices we will be using:
The distinction between smartphones and feature phones is blurred, but you can find more information at http://en.wikipedia.org/wiki/Feature_phone.
What this book covers
Chapter 1, Using Plugins to Make Your Site Mobile-friendly, will introduce you to some plugins you can use to quickly make your content more accessible to people visiting the site on mobiles. It will help you choose the right plugin for your site and show you how to configure some of the most useful ones that are available right now.
Chapter 2, Using Responsive Themes, will introduce you to themes, which have a built-in mobile-friendly stylesheet. It will help you identify some of the best ones, figure out if that’s the best approach for your site, and configure and tweak those themes.
Chapter 3, Setting up Media Queries, is where we will start to work with CSS for the responsive design. You’ll learn how to add media queries to your theme’s stylesheet to identify when visitors are viewing the site on a mobile device.
Chapter 4, Adjusting the Layout, deals with the most fundamental aspect of responsive design. Here, we’ll explore ways to adjust the layout of the site so that it looks better on mobiles, including tweaking settings for headers, sidebars, and footers.
Chapter 5, Working with Text and Navigation, will introduce you to the most effective ways to deliver text to mobiles. We’ll make sure the text in our content reads well on small screens and explore the use of ems instead of pixels to aid with, responsive design.
Chapter 6, Optimizing Images and Video, will take you through different approaches to optimize images and media. We’ll look at ways to not only make images appear smaller, but also to make sure smaller files are being delivered to mobile devices, saving on load times and data use. We’ll also examine ways to deliver video and other media to mobiles.
Chapter 7, Sending Different Content to Different Devices, will take you through setting up the Carborelli’s site so that its navigation differs on mobile devices and makes it easier for visitors to get to what they need quickly, as the visitors to your site may want quick access to different information depending on what kind of device they’re using.
Chapter 8, Creating a Web App Interface, covers the use of CSS to make the mobile version of your site appear like a native app. We’ll make changes to the Carborelli’s home page, and navigation in particular, to create a really memorable mobile site.
Chapter 9, Adding Web App Functionality, will lead you further into the realm of web apps. You’ll learn about plugins and APIs that harness the functionality of the mobile device and give the user a more app-like experience. We’ll also start to explore mobile commerce by working on the e-commerce section of Carborelli’s site.
Chapter 10, Testing and Updating your Mobile Site, will take you through the pros and cons of testing on actual mobile devices, different methods to emulate mobile devices in a desktop browser, and how to update and edit our site using a mobile device. A mobile-friendly site needs to work in a variety of browsers on a large array of mobile devices. You’ll learn how to simulate some of these devices without actually owning them, and which devices it’s useful to own or borrow to simulate the full user experience, particularly to test web apps.
What you need for this book
This book uses a fictitious site to apply learning as we go along. However, you will get more from it if you are also working with your own site (although this is not essential). Ideally, you will have an existing desktop site built using WordPress and administrator access to it.
More details of what you will need are included in Chapter 1, Using plugins to make your site mobile-friendly.
Who this book is for
This book is aimed at people with some experience of WordPress but who are new to mobile development. It deals with self-hosted WordPress sites, and not sites hosted on wordpress.com.
To get the most from this book, you should:
Skills that you do not need and will learn from this book include the following:
Conventions
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
Time for action—heading
Instructions often need some extra explanation so that they make sense, so they are followed with:
What just happened?
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
Pop quiz—heading
These are short multiple choice questions intended to help you test your own understanding.
Have a go hero—heading
These set practical challenges and give you ideas for experimenting with what you have learned.
You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: “This section consists of styling for #main div, which contains the content and the sidebar, for each of #content, #primary, and #secondary, with #primary and #secondary being sidebars, or in the WordPress terminology, widget areas:”
A block of code is set as follows:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: “On the Mobile Switcher screen, select the responsive theme from the Mobile theme drop-down list”.
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Using Plugins to Make Your Site Mobile-friendly
Imagine you're the designer or administrator of an existing website and your client or manager tells you the site needs to be mobile-friendly, in a hurry. There's a limited budget and no time, so what do you do?
The answer, as with many WordPress challenges, could be a plugin.
When I first set up a mobile website for a client in 2010, there were only about half a dozen plugins that would help achieve this. Now, if you search for the termmobilein the WordPress plugin repository athttp://wordpress.org/extend/plugins/, you will get 466 results, about 10 percent of which are plugins which will help make an existing desktop site mobile-friendly. They do it in different ways, but in this chapter, we will look at some that make your site mobile-friendly in the quickest possible time.
Note
WordPress uses plugins to add extra functionality to a site, which isn't a part of the core WordPress installation. Plugins exist for a huge array of tasks, from backing up your site to adding full e-commerce functionality. To find out more about plugins, see http://wordpress.org/extend/plugins/ and http://codex.wordpress.org/Plugins.
In this chapter we shall:
So let's get on with it!
Before we start
Before completing the exercises in this chapter, you will need a few things ready as follows:
Plugins or responsive design—what to choose
When making our site mobile-friendly, we have two main options :
We will look at the responsive design in more detail later in this book. But, as using a plugin is the quickest and easiest way to make our site mobile-friendly, that's where we'll start.
How do mobile plugins work?
The dozens of plugins that help us create mobile sites, do different jobs. The main kinds of plugins you will come across are as follows:
The preceding are the plugins we will be focusing on in this chapter.
The plugins we will work with in this chapter are all free and available in the WordPress plugin repository (http://wordpress.org/extend/plugins/). There are premium plugins available (and premium versions of some of the free plugins), but here we will be sticking with the free ones.
In this chapter, we will see how each plugin renders the Carborelli's site on a mobile device. On a desktop, this is how the site looks:
We will experiment with some plugins, which can quickly and easily make the site mobile friendly, while keeping as much functionality, content, and design as possible. If you have your own desktop site that you're making mobile-friendly, you can try the same plugins out on that, too.
Identifying the right plugin for our site
Before installing a plugin, there are some things about the site we will need to consider, including the devices we expect visitors to be using, the way the site works, and its content.
Time for action—identifying how your site should work on mobiles
If you're planning on making your own mobile-friendly site, grab a paper and pen, and make a note of your answers to the following questions:
When we come to looking at some individual plugins, we will identify how each of them addresses the questions you've just answered.
What just happened?
You now have some criteria you can use while choosing the best plugin for your site.
In the case of the Carborelli's site, our criteria are as follows:
The Carborelli's site, when tested using Google speed test (https://developers.google.com/pagespeed/) scores a fairly respectable 75 out of 100. Ideally, a mobile plugin should speed the site up, so give a higher score.
We will come back to these criteria shortly while looking at some plugins.
Plugins that will make our site mobile
Now that we've identified how we need our mobile site to work, let's have a look at some of the plugins available and how they might match up to our criteria. Once we've done that, we'll have a go at installing and configuring two of the most popular mobile plugins.
Note that this list is taken from the plugins available in the WordPress plugin repository at http://codex.wordpress.org/Plugins in June 2012. As plugins are added to the repository and sometimes removed, the list may change over time.
Plugin
Link
Features
Pros
Cons
WPtouch
http://wordpress.org/extend/plugins/wptouch/
