HRWD – Hybrid Responsive Web Design

As the amount of web capable devices grows, a one size fits all website will no longer suffice. Responsive web design seems to be the most popular solution to achieving device agnostic web design, but there are issues we still need to resolve when creating a responsive website.

Many great minds have dissected and critiqued responsive web design, and it’s merits as a solution to creating sites for the mobile web. I’ve tried to compile a general list of issues/concerns people have had about responsive web design. As we continue to experiment and find ways to adapt to the growing landscape of the web, it’s important to communicate with one another and review our processes and techniques. What is true today, may change tomorrow.

Issue with Responsive Web Design

Back in in August 2010, Jason Grigsby published an article, CSS Media Query for Mobile is Fool’s Gold.

Some of the main points from the article are:

  • Media queries add more code to create the “mobile” version of the site
  • Media queries ignore the mobile context
  • Media queries do not optimize HTML or JavaScript
Jason also brought up many good points about images:
  • How letting the browser scale images is a bad idea
  • Full size images = unnecessarily large files to download
  • Using media queries to deliver different images doesn’t work

Jason concludes that he believes responsive design still rocks, though it’s important to understand that media queries are not a silver bullet when creating a mobile site.

James Pearce, another expert in the realm of mobile replied to this article,

+1 for context… the most important point. If there’s a media query that will turn an airline’s desktop site (flight booking, credit card promotions, photos of reclining seats, chairman’s statements etc) into its corresponding mobile site (flight time checker, on-line check-in, QR-code boarding pass etc), then I would love to see it.

James later wrote another article about issues related to responsive web design titled, Not a mobile web, merely a 320px-wide one in which he discusses issues with responsive web design.

  • Media queries only affect the styling once the markup and other resources have reached the browser
  • Media queries are not supported by most of the world’s web browsers.

The main issue James gets into is how responsive web design, as it’s currently being done, is not suitable to handle context. It also does little to handle performance optimization. James goes on to say that “…it’s quite likely that they [the mobile user] really deserve different content and services altogether – or, at least, a differently prioritized version of the default desktop experience.

While it’s true, mobile users may want different content or services altogether. Studies have also shown that users love content, no matter what device they are on. To help determine if a separate mobile site is necessary, one should research their user base. Look at your site statistics and analytics. This will give you the information you need to decided if you can offer a differently prioritized version of your desktop site, or if you need to create a custom experience tailored specially for individual user groups, be it a native app or web app. Though if you do decide to go with separate mobile site, I believe the concepts from responsive web design; fluid grids, fluid images, and media queries will still be beneficial to your separate mobile site/web app.

A word on context

Context is a funny thing, and everyone has their opinion on what the mobile web is, and thus, what mobile context is. One of this best articles I’ve come across on this topic is by Jason Rhodes entitled, More Responsive Design, Please.

Stephanie Rieger also has some great thoughts on mobile context. The Trouble With Context and Mobile User Don’t Do That

Almost a year later after Grigsby published his article regarding concerns with media queries, there was another article published on Web Design Shock about issues with responsive web design titled, 11 Reasons Why Responsive Design Isn’t That Cool!

Form these three articles we can see there are some common issues people have with how responsive web design has been done so far.

  • Media queries ignore the mobile context
  • Media queries add more code to create the “mobile” version of the site
  • CSS media query is a bad choice for multiple devices
  • Media queries do not optimize HTML or JavaScript or remove unnecessary code
  • Mobile needs are different from desktop needs
  • Issues with handling images on varying devices

It’s time we to try and solve these issues

I agree with points raised. I believe each new technique that comes out needs to be reviewed and critiqued. This is how we move the web forward. Along with offering critique and reviewing our processes, we need to seek solutions.

The first part of the puzzle is solved by thinking Mobile First

If you have not picked up Luke Wroblewski’s book, Mobile First, I highly recommend it. Going mobile first with our responsive websites allows us to solve some of the issues people have raised about responsive web design.
  • Media queries ignore the mobile context
    By starting a project with a mobile first mindset, we are now focusing on mobile from the beginning, thus acknowledging mobile context and the needs of mobile users. This also allows us new potential for interactions between us and our users, based on new capabilities. It also helps us prepare for the growing market of varying mobile devices.
  • Media queries add more code to create the “mobile” version of the site
    By building our site for mobile devices first, we can progressively enhance our base version of the site by conditionally loading in assets/resources for other more capable devices as opposed to trying to scale down our desktop sites to be more suitable for mobiles. This type of thinking is tricky though, and requires us to really re-examine a lot of our common practices that we have become accustom to. I believe the many benefits of going mobile first out weigh the trouble involved in rethinking the mobile web.
  • CSS media queries are a bad choice for multiple devices
    This issue stems from the idea of starting with a desktop site and using media queries to scale down to a mobile layout. This results in mobile devices that don’t support media queries getting the desktop styles. Though by going mobile first with our media queries, we can easily create styles for devices that don’t understand media queries, and then use media queries to progressively enhance our layout.
Bryan Rieger, puts this nicely,
The absence of a media query is in fact, the first media query“.
-Rethinking the Mobile Web

The second part of the puzzle is Adaptation

When it comes to adaptation, Bryan and Stephanie Rieger are leading the charge on what works and what doesn’t. I would highly reccomend looking through Stephanie’s slides on Pragmatic Responsive Design and Bryan’s slides on Adaptation: Why Responsive Design Actually Begins On The Server
Server side adaptation allows us:
  • Optimize the pay-load from the server to the user, for example, add or remove markup / scripts / styles for different device groups
  • The ability to alternate content appropriate for context
Client side adaptation allows us:
  • Ability to test for capabilities – Feature Detection – Modernizr
  • Ability to modify the layout as screen real estate increases - Media Queries – Responsive Web Design – JavaScript solutions

What tool do we use for server side adaptation?

In Riegers’ slides, they suggest using a device database to handle the server side logic for websites adaptation. Device Atlas, and WURFL are great resources as well as Handset Detection. However, each of these options come with a price, literally. If you go with the cloud version of Device Atlas, it’s $399/year per website or $3,990/year for 50 websites. Their enterprise prices are not listed, I don’t even want to know what those cost. WURFL has recently updated their licensing terms. If you plan to use WURFL on a commercial project, you need to buy a license. Handset Detection seems to be the most reasonably priced solution at $13/month for 100,000 detections. They also have a free option with 10,000 detections per month.

What other options do we have?

Categorizr - A modern device detection script

Categorizr is modern device detection script I wrote to help handle simple device profiling. You can read more about Categorizr here. The concept is that by basing device detection on the idea of mobile first, detection not only becomes easier, it’s also more accurate. If your curious how Categorizr handles user agents, you can view test results here from over 11,000 user agents, most of them are from the WURFL database or check your own device and see what category it falls into.

So now we have all the tools, what is hybrid responsive web design?

Hybrid responsive web design is not a new concept, and there is more than one way someone could create a hybrid responsive website. Though the general idea behind HRWD is that it pairs the concepts of responsive web design with the concepts of server side device detection. It builds on top of the concepts we know are true for responsive web design, and adds concepts from traditional mobile device detection.

After looking through Riegers’ slides from last year’s Breaking Development conference and reading Luke Wroblewski’s post, RESS: Responsive Design + Server Side Components, I really started to get interested in experimenting with this concept. Yiibu.com and The Filament Group’s website are two sites that also really got me thinking in this direction. The first step required an accurate way to handle device detection. The way device detection has traditionally been done was flawed in my mind, as it was not very future friendly, though this is the nature of the beast when you get into user agent sniffing. I wanted to find a solution that would be free for anyone who wanted to use it, and would provide accurate results and this is what led me to develop Categorizr. With Categorizr, you can group devices into specific categories and handle various adaptations from one device group to another on the server. I’ve found though, that mobile devices are where most of the server-side adaptation is needed. Adaptation for tablets and smartTVs can mainly be based on the desktop version and handled client side.

Issues HRWD solves

  • Media queries do not optimize HTML or JavaScript or remove unnecessary code
    This is a problem many people have had with responsive web design. Media queries are a client side technology based for styling, thus they cannot remove unnecessary code, optimize HTML or JavaScript. To do this, we need to do it on the server side. With Categorizr, you can detect what type of device the user is on, and give them only the markup / scripts / styles they need.
  • Mobile needs are different from desktop needs
    To quote James Pearce again, “…it’s quite likely that they [the mobile user] really deserve … a differently prioritized version of the default desktop experience.We can use Categorizr to dectect the type of device the user is on, be it mobile, tablet, desktop, or smartTV. From there we can handle priority changes on the server, whether that means shifting around markup, or loading different content/resources altogher, before sending it down to the user.
  • Issues with handling images on varying devices
    This is something I would not recommend using Categorizr for. While it does a great job of figuring out what type of device your on, it won’t get you specifics. Since there is a lot of variety in mobile screen sizes, I would recommend looking at Sencha.io Src or Adaptive Images. Currently there is discussion going on about creating a new HTML element to handle images for varying devices based on media query logic.
  • More code, more to update
    I honestly don’t understand the reasoning behind this issue. To me, you either don’t do anything and stick with your desktop websites, blissfully ignorant to the changing market, or you adapt. Hybrid responsive web design with Categorizr is actually fairly simple. If you want to support multiple devices, there is going to be more code. Though I’ll explain how we can support a wide array of devices, while still maintaining a code-base that is easy to manage and update.

Issues that still need to be solved.

Hybrid Responsive Web Design does not solve all the issues. There are still many issues we will need to tackle as the web evolves on to more devices. We are all in this together, and for us to move forward, we need to review our processes, offer critique, and help push each other to find solutions. I’m hope you’ll offer your feedback and critique on this approach so we can continue to move the web forward.

One of the biggest issues that still remains relates to content management systems. Our craft is evolving, we need the tools we use to evolve also. Though, this a topic I’ll save to tackle another day.

Mobile First HRWD Development

So, you’ve read this far. Take a break, relax, I know that was a lot to digest. I’m planning on writing up a more detailed walkthrough of mobile first HRWD development and was considering leaving this concept for another post, though while I have your attention, I figured I’d breifly cover some concepts of a mobile first hybrid responsive web design development. Try saying that ten times fast.

First, we’ll be starting our project with a mobile first mindset. As I’ve mentioned, this helps solve a lot of issues when creating a responsive site. There are 4 areas I want to quickly go over; the Sever-Side Component, how to handle HTML, how to handle  CSS, how to handle JavaSript, and how to handle images.

Server-Side Component

In this example I’ll be explaining how to use Categorizr to handle our server side adaptation. Catgorizr is PHP based and fairly easy to use, even if you have no programming knowledge. To alter various parts of your site, be it your CSS, JavaScript, page components, or other markup, all you need is a simple PHP if statement.

<?php if (mobile()) { ?>
<h1>This heading will only show up if the device is categorized as mobile device</h1>
<?php } ?>
<?php if (!desktop()) { ?>
<h1>This heading will only show up if the device is not categorized as desktop device</h1>
<?php } ?>

With this, we can keep all of our markup for each device category together in one file. This makes maintenance of a hybrid responsive website rather easy. This works great if your mobile site will be similar to your desktop site and you just want to re-prioritize your mobile site. However, if your mobile site is going to be quite a bit different than your desktop site, I would suggest using Categorizr Redirect and creating a separate mobile site.

HTML

The HTML you craft will vary from project to project. Sketching and prototyping will be your best friends as you move back and forth between design and development. For tablets and smartTVs, I would suggest using the same HTML markup as your desktop site and letting media queries handle layout changes. If you need to add specific CSS, JavaScript, or other elements solely to your tablet or smartTV version of your page, you can simply write an if statement.

<?php if (tablet()) { ?>
<h1>This heading will only show up if the device is categorized as tablet device</h1>
<?php } ?>

Be sure to be considerate of users who want to change what there device is categorized as. Add a link to your page so if users are on your mobile site, and want to view the desktop version, they can. To do this with Categorizr, all you need to do is create an anchor link and set the href value to a PHP GET variable with view set to what you want it to be. Below is an example of a link you would add to your mobile site to switch users to being categorized as a desktop.

<a href="?view=desktop">View Desktop Site</a>

When a user clicks on this link, it will reload the page, then Categorizr will pick up that the user now wants to be categorized as a desktop device. Categorizr stores this in a session so the user can move from page to page and still be recognized as a desktop device.

CSS

With CSS, we’ll first create styles for basic devices such as feature phones, legacy phones, and other devices that do not understand media queries. In this file I usually add my HTML reset, basic formatting for typography, link styles, and any other basic styles needed for these devices. I’ll usually name this stylesheet base.css though you can name it however you please.

Next, we’ll create a stylesheet for mobile devices. I name this file mobile-styles.css. In this file, we’ll set up our media queries for mobile devices. These will cascade off of the styles set in the base.css file.

Lastly, we’ll create another stylesheet that will handle our layouts for tablets, desktops, and smartTVs. I typically name this file main-styles.css. Again, this stylesheet will cascade off base.css, as well as mobile-styles.css

In development, I like to keep the files separate, though on your production site, I would concatenate them into one file. Then conditionally load them based on what device category comes to your site.

If mobile, load mobile.css.
mobile.css = base.css + mobile-styles.css 

Use this for feature phones / smartphones / and other mobile devices.

If not mobile, load main.css
main.css = base.css + mobile-styles.css + main-styles.css

Use this for tablets / desktops / smartTVs

By concatenating the stylesheets, you’ll only serve 1 CSS file which will help keep your website fast.

JavaScript

The JavaScript you use on your site will vary from site to site, however one file I would encourage you to include on your sites is Modernizr. Categorizr is great at what it does, though it only gets us some of the information we typically want to know. By pairing Categorizr with Modernizr, you can accurately detect device types, and their capabilities.

Just as we did with the stylesheets, I would recommend concatenating your JavaScript where applicapable. The HTML5 Boiler Plate has a good example of file strutures for JS.

Images

As I mentioned earlier, I would recommend using Sencha.io Src or Adaptive Images as a solution to providing images for varying devices.These are the best solutions I’ve seen so far for creating responsive images. Matt Wilcox, the developer behind Adaptive Images and Jason Grigsby are both members of the W3C Responsive Images Community Group. I’m excited to see what solution this community group comes up with as a native way to handle responsive images.

Other Components

There are many other components one could add to a HRWD development, such as appropriately caching files, gzipping files, using HTML5 AppCache, minifying files along with many other techniques. This is a topic I’ll go into more detail another day.

Is this the silver bullet we’ve been waiting for?

Nope. It’s one possible technique you can add to your toolbox. Hybrid responsive web design does not aim to create solutions for the mobile web, the desktop web, the tablet web, the smartTV web. It aims to create solutions for the responsive web. Each project should be evaluated to see which techniques will be the most benefical, not only to your clients, but also to their users.

  • Ralph

    Great article and why am I the only one that says that?

    I’ve developed a few responsive websites and I also came to the conclusion that it’s not (yet) a bulletproof ‘one site fits all ‘.concept. Tablets these days have the same screen resolutions as laptops & desktop monitors, so with CSS media queries they will also get the full blown desktop version. I’ve downloaded Categorizr and experimenting with it in my redesign and so far I really like it. No display: none anymore for me to hide stuff and I can really focus now on scripts to support touch and swipe gestures on touch screen devices.

    Thanks for contributing to our web development community with Categorizr and I guess I’m developing now my first ‘mobile first hybrid responsive web design’ website :)

  • Ralph

    oh.. and I see you’ll have to fix the img {width: 100%} in your CSS for the comment section.

  • David Kartuzinski

    Hi. I have been putting together a “base” framework for me and the other programmers/coders in my company to use. I have been scratching my eyes out trying to accomodate for all the “gotchas!” in responsive web design. We primarily work with WordPress and so what we are doing is wordpress based.

    Have you finished the plugin for WordPress? Do you have a how to on using this with WordPress in the meantime? I am not an very experienced coder and anything like this would be helpful.

    So far, without testing, I see that Categorizr would be most helpful in situations where you want to replace out entire blocks of code in the html. Perhaps this is what it is designed to do! I was looking for a solution like this.

    Thanks for your work on this. I believe I found your article after reading something that Ethan Marcotte was quoted as recommending this as a solution.

    -DK

  • http://www.insum.com awesome insum

    Can we do a responsive web design while still distributing the apps in native marketplace using phonegap for example?

    Let me know
    Tx
    Satya

    • Brett

      I’m not familiar enough with PhoneGap to answer this confidently but it is an interesting concept. I’d encourage you to check out PhoneGap and see if they have any documentation or forums you could look around at.

  • http://sdwebdesign.de Steffen

    I´m working on a realicing responsive web design solutions, that fits my needs. Your post is a helpfull step for me. Thank you for your great list of helpfull thoughts about responsice web design.

  • http://optimiseonline.com.au Calum Maxwell

    Is this still the case, I realise this is an old article but have they resolved the seo issues / media queries for responsive web design? Optimise Online