Does Your WordPress Site Need to be Responsive?

Let’s talk about responsive design and your WordPress sites. More and more consumers are using mobile devices to consume content, browse social media, and make purchases, and websites need to keep up with the new devices visitors are using. There are over 2.1 billion mobile broadband subscriptions globally, and 45% of American adults have smartphones (Source). Those numbers will continue to balloon, so this will be the year for you to evaluate a responsive design for your site.

Responsive design is a web development technique that allows your site to dynamically resize in order to display beautifully across whatever resolution of device, tablet, or smartphone that your visitors use. If you’ve ever had to pinch and zoom a site so you could read it on your smartphone, you’ll know how big a difference quality responsive design makes. Put simply, a responsive site is one you’ll visit more than once.

The Responsive Challenge

In years past, site owners had to choose between responsive design versus a mobile app, and the question still lingers a bit: “Should we go with responsive design or a native app?” It’s a fair question. We’ve seen so many changes in the mobile technology over the past several years that it’s hard to keep up with all the lingo.

A few years ago, the internet was buzzing about smartphone “apps” (they were mostly iPhone apps). Today, while some apps still have their place, native apps have fallen out of vogue in favor of responsive sites because device fragmentation has accellerated. There are hundreds of mobile devices, each with different sized screens, so it’s not really cost-effective to build apps for them all. Today, if you want your app to be effectively delivered to 80% of mobile devices, you’ll need to support 156 devices. That’s a lot of different apps.

Apple makes this simple by controlling device resolution. But take a look at the current state of Android fragmentation to get a sense of how many potential different configurations a website needs to respond and adapt to. As Android’s market share continues to dominate iOS, we can expect to see this fragmentation get worse unless Android establishes guidelines.

Fragmentation is exactly where responsive design comes in. Without responsive site design, your customer experience can vary wildly by device. This is how wide a range of experiences your customers / audience might have for your content on the Android platform alone.

Mobile Apps vs. Responsive Sites

Choosing an App versus a responsive site comes down to site purpose. Most websites are going to be just fine with responsive design that can adapt to devices. A mobile app comes into play when your users want very specific functionality on their mobile device that is different than the full site would provide. Your bank likely offers a mobile app so you can quickly check your balance in line at Starbucks. Facebook and Twitter also adjust their functionality in their apps to fit the use of mobile.

Only if your users need a specific set of functions from their phones, distinct from what they need from your main website, a native app is something to consider.

What is responsive design?

Let’s cover how responsive design will apply to your WordPress site. Responsive design is a way of organizing the content on your website so that it can dynamically respond to the size of the screen it appears on. This means the user experience is just as good on a smartphone as it would be on a laptop.

To achieve this excellent experience across devices, designers will create fluid content grids and code flexibility into images via the CSS of a site in order to re-arrange the HTML in direct response to the size and resolution of a screen. If you want a great example, click over to Mashable.com.

No, go ahead, I can wait. Open Mashable.com in a new window (assuming you’re not already on a mobile device). Once you’re there, resize your browser window to make it smaller and smaller and watch how the website rearranges itself accordingly.

As you shrink the window, the pictures and content blocks race around to fit into the smaller and smaller window according to fluid grids that the designer created. At its smallest, you’re left with what Mashable’s site would look like on an iPhone. It’s beautiful, and easy to read. Embiggen the window again, and they respond by racing back to their “desktop” configuration.

The site rearranges itself because there are CSS media queries that apply different rules to the page, depending on the size of the device (in this case, the browser window) that is viewing the site. The HTML remains the same, it’s simply rearranged by the CSS. CSS rules can be applied to rearrange everything on the site, including serving various image sizes according to the device’s resolution. This is really cool when you want to do things like serve retina-enhanced images to iOS devices specifically.

Why?

Watching the site rearrange itself, you can see how consuming the content from your tablet or smartphone is more pleasant than if you had to manually make the site zoom so you could read things. When the design of a site responds to you rather than you having to pinch and zoom in order to read, you spend more time on-site, consume more content, and are more likely to return.

In a world where “attention” means “dollars,” the better you can optimize your site for ease of use and optimal customer experience, the better your traffic will be.

Performance Considerations for Responsive Sites

A responsive design will affect the overall performance of your site. Loading lots of CSS and various sizes of images in order to respond to device sizes can be expensive from a backend processing perspective. As part of evaluating responsive design, it’s important to prioritize performance as a feature. Users still expect a mobile site to be a bit slower, but they won’t be forgiving if they try to bring up your site to show a friend or their date, and they have to wait more than a few seconds.

From a technical perspective, when delivering your site to a mobile device that’s using cellular data handicaps you as much as .5s from the get-go. For example, to fetch 40KB on 4G takes 700ms under optimal conditions. Network latency and situational variations will only add to your load time as well. You can’t control cellular network variables, so it’s critical that you build your responsive site with performance as a feature from the start.

Make sure you’ve done the following to ensure your site is optimized for mobile.

• Optimize your images: Automatically detect the screen size of the device to create, cache, and deliver the right image size.
• Reduce your HTTP requests: Minimize the amount of CSS and JavaScript you need to use, and then cache everything else.
• Conditionally Load Assets: Large social media buttons, images, and the like are great for a larger device, but won’t affect the user experience for smaller ones. Plan your design to only load what is absolutely necessary.
• Lazy Loading: If you can get away with loading certain assets, JavaScript in particular, after the most important page elements, do it. By the time your users have consumed the content they wanted in the first place, those other assets will have loaded.

Does your WordPress Site Need to be Responsive?

More and more, the default answer to this question is going to be yes it does, particularly with the wide availability of responsive WordPress themes. If your site is up for a re-design, or is in the process of being designed, it’s important to offer your users a quality experience on whatever device they happen to be on.

WIth that in mind, I’ll wrap up with some questions to ask yourself and your team to evaluate whether your WordPress should be designed responsively.

1. What’s the use case for your site? Will mobile consumption be important? Chances are, the answer to this is “yes, and increasingly so with each year.” There will be exceptions, but not many.
2. Who are your users? The more technical they are, the more cutting-edge, the more likely they will expect a responsive site for every brand they associate with.
3. Do you have the budget? This is a big one. A responsive site is a bit more expensive to build initially, but it’s cheaper to build a single responsive site than plan on building two separate versions of your site, and then managing the upkeep for both.
4. Are you ready to learn a new type of design? Responsive design introduces a lot of new concepts and ways of understanding digital content. it will be important to work with a design team that can not only design something beautiful, but educate you along the way.

Happy Designing!