Identifying the best approach for your site
Before starting, it’s a good idea to think about your website, its content and functionality, and consider what the best approach might be.
First let’s look at the options available to us.
Options for developing a mobile site
There are five main options for developing a mobile site as follows:
- Using a mobile plugin: This gives us a mobile-friendly site with the minimum of effort, but doesn’t give us much scope to incorporate our own design into the mobile site, as we saw in the previous chapter. Many mobile plugins also don’t target tablet devices.
- Using an off-the-shelf responsive theme: There are a number of free responsive themes available in the WordPress plugin repository. In this chapter we’ll look at some of them and see how we can tweak them so that our mobile site is more consistent with our desktop site.
- Using an off-the-shelf responsive theme for mobile devices and our existing desktop theme for desktop computers: We achieve this by using a theme switcher. The advantage here is that we can quickly install a free responsive theme, tweak it to look how we want, and don’t lose the benefits of our existing desktop theme for desktop visitors. We’ll learn how to do this later in this chapter.
- Making our own theme responsive: We do this by adding a fluid layout and media queries to the desktop theme we’re already using. We’ll learn how to do this in Chapter 3, Setting up Media Queries; Chapter 4, Adjusting the Layout; Chapter 5, Working with Text and Navigation; Chapter 6, Optimizing Images and Video; and Chapter 7, Sending Different Content to Different Devices.
- Building our own mobile theme and using a switcher to activate it on mobile devices: This is a useful approach when we want our mobile and desktop sites to look different or contain very different content. We’ll learn how to do this in Chapter 8, Creating a Web Application Interface and Chapter 9, Adding Web App Functionality.
Identifying the best approach for our site
Ok, so let’s consider the site we’re working on. Here we will look at the Carborelli’s site, but you may also want to think about the site you’re working on.
Ask yourself the following questions:
- Does my site incorporate branding, colors, or media that I can’t display using a mobile plugin? Am I happy with this or do I want to display those things?
- Do I have an existing desktop theme, which I want to retain for the desktop?
- Is my site likely to be visited by people using iPads and other tablet devices as well as mobiles?
- Do I want the site to look as consistent as possible across all devices?
- Does my site have content that should only be displayed to desktop or mobile users? This might include navigation, widgets, or a different home page.
When we consider these questions for the Carborelli's site, the responses are as follows:
- The site includes a logo and some bespoke custom fonts. It also includes widgets that aren’t displayed by a lot of the mobile plugins. The site does have a bespoke design, which we would like to retain some elements of across desktop and mobile devices.
- There is an existing theme, but for the sake of speed we are prepared to experiment with some off-the-shelf themes instead.
- There is a small chance of people using iPads to visit the site, so it would be nice to have a design that takes this into consideration, but this isn’t essential.
- A lot of people will be visiting the Carborelli’s site on mobiles, so we want the site to look good. The design needs to be consistent with the desktop site and shouldn’t be very different on mobiles.
- We need to display all of the same content to mobile and desktop visitors, including widgets. We may adjust our navigation for mobiles later on, but for now, we’ll stick to the same navigation menus on all devices.
The answers to these questions indicate that the Carborelli’s site needs a responsive theme, as it needs to look consistent across all devices. This is what we will be focusing on in this chapter. However if you’re happy for your theme to look different on mobiles and want to keep your desktop theme, a separate theme for mobiles may be the best approach, so we’ll have a look at that after identifying some of the best responsive themes.