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:
Smartphones: They include iPhones, Android phones, Windows Phone 7, Blackberry, and any phone with a browser capable of accessing websites and displaying them in the same way as a desktop browser would. These are the phones we will be targeting in this book.
Feature phones: These are the phones, which include some advanced features, in addition to making phone calls, but do not have the advanced capabilities of smartphones and do not include a fully-featured browser. We will not be targeting them in this book, except for in Chapter 1, Using Plugins to Make Your Site Mobile-friendly, with mobile plugins.
Mobile devices: Mobile devices, as referred to in this book, include smartphones and small personal devices running a mobile operating system, for example, the iPod Touch, but not tablets.
Tablets: These are the devices with a larger display than mobile devices, but they use a mobile operating system. These include the iPad, Samsung Galaxy Tab, Blackberry Playbook, and Kindle Fire. We will focus on the iPad in this book, as it is by far the most widely used tablet device.
The distinction between smartphones and feature phones is blurred, but you can find more information at http://en.wikipedia.org/wiki/Feature_phone.
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.
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.
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:
Be familiar with using WordPress to develop websites, including working with the WordPress admin, installing themes and plugins, and editing theme files
Have a good understanding of HTML and CSS, and be able to write both
Have experience of uploading and downloading files using FTP, cPanel, or your preferred method
Have some familiarity with PHP—you do not need to be able to write PHP but it helps if you have come across it before
Skills that you do not need and will learn from this book include the following:
Using CSS for responsive design—creating a fluid layout and defining media queries
Writing custom PHP—we will learn some examples of this but won’t cover PHP in a lot of detail
Harnessing APIs for mobile development—the book will introduce you to some APIs, explain what they do, and show some of them in action.
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
1. Action 1
2. Action 2
3. Action 3
Instructions often need some extra explanation so that they make sense, so they are followed with:
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:
These are short multiple choice questions intended to help you test your own understanding.
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:
/* main layout */
body {
margin: 20px auto;
width: 940px;
padding: 10px;
}
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.
Note
Tips and tricks appear like this.
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.
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.
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.
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 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.
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.