Download
Introduction
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
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.
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:
+ 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.
