Mobile Responsive Design: Demystified

mobile-design

Mobile Responsive Design: Demystified

As of 2014, mobile users account for over 50% of all traffic on the web. That means it’s not something you can continue to ignore.

Mobile design has been on the minds of bloggers of late, even more so within the last 12 months when mobile traffic finally surpassed desktop traffic, and that percentage will only keep growing. This change in how people consume information on the web means that we have to rethink how we present that information. A website that accounts of users accessing your site on myriad different screen sizes will ensure that they all have the best experience possible.

jellytoast-blog

What is Responsive Design?

Responsive design is just that: it is design that responds to your user. In this case it refers to the size of the screen on which the website is being viewed, responsive design will adapt itself to whatever that size may be.

From Wikipedia: Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Basically, responsive websites will resize, shrink, stretch, and rearrange itself to perfectly fit the screen on which it is being viewed, from a giant desktop monitor to the smallest mobile phone. Your users will be able to read and navigate your website without any pinching, zooming, or panning. Text will be readable and images big and beautiful and navigational menus easily accessible on mobile devices.

Some mobile/responsive themes have a few set breakpoints that alter the layout (at the main sizes for iPad/iPhone screens, for example). The problem with this technique is that as new devices continue to be released and updated, those specific resolutions are always changing. What was a practical breakpoint two years ago is irrelevant now that there are iPhone 6 and iPhone 6+’s out there viewing your website.

responsive-diagram

Instead, we take a fluid approach as you can see in the example above, making your website shift and shrink and flow to fit the screen on which it is being viewed, no matter how big or how small that may be.

Examples of mobile responsive designs »


Responsive Design vs a Separate Mobile Site/Theme

Way back in 2010, the way most sites handled this new surge of mobile traffic was to create an entire mobile site. Browser detection would determine whether you saw the main desktop version of the site or the more limited mobile version. If you’ve ever seen a http://m.whateversite.com in your browser, that’s what you’re seeing: a completely separate version of a website designed just for mobile users. These mobile sites made decisions for users as far as what content they  may want to see, and hid the rest that was deemed unnecessary. For obvious reasons this way of handling mobile users is no longer standard practice.

There are a number of mobile plugins or mobile themes available today you may have heard of (examples include WPTouch as well as the mobile ad themes from PadSquad, AdThrive, etc.) These are separate themes entirely: triggered when your site is accessed on a mobile device, they overwrite whatever custom theme you have in place. So while it is not a completely separate mobile site, it is essentially an entirely different theme that is loaded for mobile users. As a result you will lose much of the color/personality/special features that you have in place with your custom design.

Additionally mobile-only sites/themes will likely change the content that is displayed. Maybe they’ll only show your recent posts on your homepage, and not the custom categorical sections or featured post area that you have on your desktop site. Most likely they’ll hide your sidebar entirely, which means that information (such as your personal bio or archive links) will no longer be accessible on a mobile device. This is one area where mobile responsive design is far superior: it never hides any content (unless you want to, of course), instead, it simply rearranges it so that your main content is front and center within the limited real estate of the mobile device, but the rest of the content is still accessible should your reader want to access it. Mobile users want to see the same content as desktop users, and there’s no reason not to show it to them.

That said, if ad revenue is your #1 consideration, a mobile ad solution may be your best bet, in which paying for a custom responsive design would be redundant since the ad theme would essentially overwrite any responsive design that was in place. Some of our clients still choose to have a responsive design created, however, so it’s ready and waiting should they ever decide to deactivate the mobile ad theme (otherwise, we’d need to convert your non-responsive design to a responsive one, which is more costly/time-consuming than if we did it from the get-go).

Usability & SEO Benefits

The benefits to a good responsive design are numerous, but mainly it’s about improving user experience for your readers on mobile devices. They no longer have to pinch and zoom to read your content, or pan around and try repeatedly to click on a tiny navigation link to find what they are looking for. A mobile friendly site will resolve all these issues, making your website easier to use and navigate on small screens. Your readers will thank you.

In addition to the user-based reasons to make your site mobile friendly, in April of 2015, Google announced it will begin using mobile-friendliness as a ranking factor. While it may be a small consideration in your overall search ranking, it’s still an important one. You can test to see if your site is mobile friendly using Google’s mobile testing tool. Sites deemed mobile-friendly will display a subtle “mobile-friendly” tag on search queries performed on a mobile device (desktop search will remain unchanged).

Gimme Some Oven - example of responsive blog design.

With Regards to Ads/Ad Revenue

The biggest concern most bloggers have when switching to a mobile design is whether or not they’ll lose ad revenue. And the short answer is, it depends. If you have a large percentage of mobile traffic to your website, switching to a more mobile-friendly design will make your users want to come back and read more, and could therefore increase your traffic overall.

Since responsive design, by nature, shifts and rearranges content to fit, some people may see a decline in ad revenue, especially if you’re with an ad network that relies on viewability metrics to determine payout (viewability measures what percentage of ads were actually viewable when served. So if an ad is quickly scrolled out of sight before it has time to load, that impression will not count as a viewable one.) Because most responsive designs shift the site’s sidebar down below the main content, the ads that were prominently visible in your sidebar will be less so lower on the page. There are ways around this, such as inserting a special mobile-only ad that displays higher within the content, which is definitely possible and certainly an option we can discuss.

For ads not subject to viewability measures, your ads will still load the same as they would on desktop views, in which case a pageview is a pageview and you should get paid for it no matter what size the screen is. The only exception here are 728×90 leaderboard ads, which are too wide to display on small screens, and resizing and/or cutting them off is against most ad networks’ terms. Instead we want to either simply hide this size of ad, or replace it with a more usable 300×250 ad to display in the same spot on mobile devices.

The short of it is, is that mobile advertising is still in flux, no one quite knows how best to handle it yet. So at the moment there are no hard and fast rules for monetizing mobile, but we do expect this area to continue to grow and change as better practices for monetizing mobile are developed. We will update this article as needed should big changes occur, and, as always, we do our best to keep on top of new developments to update our own coding practices accordingly.

Costs

A mobile responsive design typically increases the cost of a design project by about 50-60%. So a site that would have cost $1,500 to develop normally, would cost $2,100 to develop as a responsive design. This added cost is a result of the extra time required for coding and in-depth testing across numerous devices/screen-sizes. The more complex the design (for example designs with featured sliders, magazine-style sections, or complex footers) will take more time to develop into a responsive design that looks good and functions across a wide array of devices.

Considerations

When deciding whether or not you’d like to go ahead with a mobile responsive design, I always recommend doing so if your budget allows. Even if you plan to use a mobile ad theme at the moment, if you ever change your mind and decide to remove it, you’ll have a perfect mobile responsive design ready and waiting underneath.

We always tell our clients that even our non-responsive designs are perfectly functional on mobile devices. Nothing breaks, everything is functional, we don’t use any flash elements that wouldn’t load properly on Apple devices. A non-responsive site essentially looks like a mini version of the desktop site on your phone (see below, right). It just requires a bit more pinching/zooming in order to read and navigate the site. So while, yes, we recommend a responsive design to accommodate the growing number of mobile users who will be visiting your site, do know that it’s not the end of the world if it simply isn’t in your budget right now.

(Example of responsive design [LEFT] and non-responsive design [RIGHT])
(Example of responsive design [LEFT] and non-responsive design [RIGHT])

Mobile Responsive Design Examples

Please feel free to peruse the ‘responsive’ category within our portfolio for examples of responsive designs. We will do our best to keep this list updated with new responsive sites as well as removing ones who have switched to 3rd party mobile themes. You can view these sites on your desktop and mobile devices to see the differences, or, if you are limited to just a desktop computer, try dragging your browser window larger and smaller and see how the elements size and shift.

Like what you see? Work with us »