RWD: It’s Not Desktop vs Mobile

My recent article, Should Users Have the Option to Switch Off Responsive Design?, prompted passionate debate on SitePoint. The premise: responsive websites could offer a toggle switch so mobile users can switch to the desktop view should they prefer it.

I suggested such a solution shouldn’t be necessary. I was in the minority.

Several comments revealed that Responsive Web Design is badly implemented and mobile layouts are often an afterthought. Many take the simpler route of removing useful content rather than re-factoring it. Some respondents even stated RWD would be dead within a few years.

The technology behind Responsive Web Design — media queries — is fundamentally sound. However, we’re still learning to use the techniques and I can understand the difficulties designers face. A single, static Photoshop mock-up has never been a true representation of a website and now we’re designing for an unlimited number of resolutions.

As developers, we’re also obsessed with the gadgets we own. For example, if you’re using a 17″ laptop and an iPhone, you’ll make sure it works on those devices first and potentially miss a range of mobile, tablet, desktop, television and console resolutions. And that’s before you consider the general trend for larger phones and smaller laptops.

Restricted View

Part of the problem stems from the restricted view that designs are either “mobile” or “desktop”. In RWD, this translates to a media query such as: show the mobile design until the browser width exceeds 900 pixels then switch to a desktop layout. When used badly, the process:

  • avoids any consideration of the enormous range of devices
  • assumes the mobile layout is a simplified or scaled-down alternative to the desktop
  • removes useful content, and
  • enforces unsuitable fixed-width templates.

It need not be that way. Good responsive web design should never be a “choice”. The site should be presented in the most optimal way for the horizontal and vertical resolution available. It’s fluid and there are thousands of possibilities — not just two. This raises an important point:

A single toggle switch can never represent all the options.

SitePoint has a technical audience. You understand RWD and like to configure systems according to your personal preference. However, by providing an RWD toggle switch, are we simply bypassing layout problems rather than fixing them?

Admittedly, you will never keep all users happy all the time, but RWD remains a cost-effective option for many sites. Assuming you use it well.

Coming soon: 7 Ways to Improve Your Responsive Web Design Approach

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://theheatexchange.wordpress.com/ H.E.A.T.

    Maybe helpful to understanding RWD is by first defining the boundaries. What are the size limits of any web page? What is the smallest viewport size? What is the widest?

    Though it may seem simple, I can’t help but to think about the large screen displays in cities like New York and Las Vegas. Since the design is suppose to be device independent, should there even be limits?

    I would guess there would need to be limits within the constraints of current technology. Not necessarily current device technology, but the technology enabling RWD (media queries, CSS, etc.).

    Once the ideal is established and publicized, maybe it would be easier to know how far you are deviating from the true path instead of wondering if you are on the right path at all.

    Would it be feasible to get the brains of the design community together to collect up all the tecnology enabling RWD and decide, by consensus, the ideal scenario for a proper RWD application?

  • http://tulsawebresults.com Kevan

    If there’s only one breakpoint at 900px, then predictions of the end of RWD have some credence.

    Setting multiple breakpoints and creating unique views is more difficult but also allows for more possibilities in pleasing design.

    If all of the content is still available, and the design for a chosen size was given as much consideration as the other views, there would be no need for a switch to see the desktop view. All views would be equally pleasing and accessible.

    This will not make RWD easier or less expensive, but will make each view on each viewport size a unique experience.

    • http://www.optimalworks.net/ Craig Buckler

      I think the main problem is that designers are still obsessed with resolutions and fixed-width templates. Visit any developer forum and someone will be asking questions about typical screen sizes. If you’re using a flexible layout with RWD breakpoints you don’t need to worry about resolutions.

      • Roman

        “If you’re using a flexible layout with RWD breakpoints you don’t need to worry about resolutions.”

        Sitepoint.com demonstrates the opposite. When I increase the font size (for comfortable reading) while viewing the site on my 17 inch monitor, text lines become too long for comfortable reading, and the left sidebar (with the social buttons) becomes partially hidden. Resolution should be considered!

  • Jonny

    Is it necessary to define this particular difference between mobile and desktop as 2 separate groups of devices? It seems like a dated concept to me. We all know that that the boundaries are more blurred than ever so we should really be looking at how users are going to interact with the sites we design

    • http://www.optimalworks.net/ Craig Buckler

      That’s exactly my point. RWD can’t determine what is or isn’t a mobile device and, really, it doesn’t matter – it’s about ensuring a design works reasonably well in all resolutions.

      • Christian

        It could if there was a media query that detected if the device was mobile but people have ignored my suggestion when I have brought this up. Even then it may still not be a perfect solution.

      • http://www.optimalworks.net/ Craig Buckler

        What’s a mobile device? My 17″ laptop is mobile. What you really need to know is: what bandwidth do I have? That could range from 100GB to none. And how can a browser determine it without attempting to download huge files every time it starts?

  • http://theheatexchange.wordpress.com/ H.E.A.T.

    Again, this is one of those topics where discussion supercedes implementation.

    I have visited a few sites run by folks whom are considered notables in the web design community. One in particular, A List Apart, has underwent a design change. In an obvious effort to support mobile, the site now breaks terribly on the desktop.

    RWD must not be such an obvious or easy technique to implement with current technology if those considered the best and the brightest (by some) can’t get it right. RWD should not affect usability, accessibility, and desktop use, right?

    Sitepoint is still using what appears to be a fixed layout. For an article-based site, I would think implementing RWD with the combined brain power of those posting articles would be easy. Though I am constantly reading from those who agree or support RWD, I am not seeing many sites using it, or using it without forsaking accessibility and usability.

    Smashing Magazine appears to have a good fluid design amongst the article-based sites. Still, for sites like Facebook, Youtube, or Twitter, how well could RWD be implemented without sacrificing usability and accessibility?

    • Jonathan Haslett

      >”A List Apart, has underwent a design change. In an obvious effort to support mobile, the site now breaks terribly on the desktop.”

      Seems to work fine for me. Perhaps your problem is the change in site structure where the homepage is not the blog anymore but rather the latest “issue”. Remember they started as a mailing list. Maybe that metaphore works, maybe it doesn’t, I’m glad someone else is innovating and trying new things to find out so that I don’t have to.

      >”RWD must not be such an obvious or easy technique to implement with current technology if those considered the best and the brightest (by some) can’t get it right.”

      It’s not obvious, it requires a complete rethink for established front end devs and best practices are being established and replaced on what seems like a daily basis. It’s not easy either, it’s a lot of work, up to several times as much work as building a similar fixed width site. Especially if you target a large range of resolutions with multiple breakpoints and are focused on maintaining accessibility.

      >”RWD should not affect usability, accessibility, and desktop use, right?”

      Yep, correct. Although the million dollar queston is what counts as a desktop?

      Is this a “desktop”? http://www.asus.com/us/AllinOne_PCs/ET2300INTI

      Is this a “desktop”? http://incredibletogether.asus.com/vivobook.html

      Is this a “desktop”? http://www.asus.com/us/Tablets_Mobile/ASUS_VivoTab/

      All these are intel based Windows 8 devices with touch input. In portrait mode that last one has a lower width res than an iPad in portrait and a lower width res and an iPhone in portrait. The second last one has the same resolution although probably will only be used in landscape.

      My point is that you can’t just say mobile this and desktop that because the lines are more and more blurred everyday.

      Usability is by definition “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.”

      Considering this definition, a website should know their “context of use” (resolutions, input types, platforms, whatever) and measure the usability of their site against this rather than applying the same users, goals and context to every website.

      > “Sitepoint is still using what appears to be a fixed layout. For an article-based site, I would think implementing RWD with the combined brain power of those posting articles would be easy.”

      You assume that the next time sitepoint does a major redesign that they’ll identify RWD as the right solution to meet the needs of their business and their users. They probably will make their next redesign responsive however if they do it properly it would be a deliberate decision.

      Also, contributors aren’t sitting there all day coding away on the sitepoint website. The team responsible will likely do a major refresh every couple years each of which could take six months from initial planning to launch.

      > “Still, for sites like Facebook, Youtube, or Twitter, how well could RWD be implemented without sacrificing usability and accessibility?”

      Not well, and in case you haven’t noticed they’ve chosen not to. They’ve definded contexts for multiple separate versions of their site/service so that each one can provide a usable experience.

      • Robert

        Easy.
        Take the screen width in pixels and the dpi/ppi from the device specs. Divide the pixels by the dpi and you have the screen width in inches. Repeat for the height.

        For example iPhone 5 : 640 × 1136 pixels at 326 dpi,
        Width : 640 / 326 = 1.96 inch.
        Height : 1136 / 326 = 3.48 inch.
        Diagonal : square root ((1.96 x 1.96) + (3.48 x 3.48)) = 3.99 inch (4 inch)

        So it’s more accurate to use pre-calculated tables of dpi to determine your media queries.
        Either based on dpi only, a combination of dpi and screen width, or even dpi. screen width and orientation.
        Example table : http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density and here

        Some examples :
        @media screen and (min-resolution: 160dpi) { Smart phone with regular type display }
        @media screen and (min-resolution: 320dpi) { Smart phone with Retina type display }
        @media screen and (min-resolution: 220dpi) { Notebook with Retina type display }
        @media screen and (max-resolution: 110dpi) { Desktop screen }

        And just for fun :
        @media screen and (resolution: 326dpi) and (device-width: 640px) and (orientation: portrait) { i’mPhoney 5 in portrait mode }
        @media screen and (resolution: 326dpi) and (device-width: 1136px) and (orientation: landscape) { i’mPhoney 5 in portrait mode }

        You could also use dpcm/ppcm instead of dpi/ppi.

        Do your own calculations, because these were just quickly done.

  • Robert

    This paragraph is so true :

    As developers, we’re also obsessed with the gadgets we own. For example, if you’re using a 17″ laptop and an iPhone, you’ll make sure it works on those devices first and potentially miss a range of mobile, tablet, desktop, television and console resolutions. And that’s before you consider the general trend for larger phones and smaller laptops.

    You’re always a few steps behind. And not even the richest (companies or individuals) have all the devices and the time to test on them.
    I always visit this site when I run out of devices (happens daily) : https://quirktools.com/screenfly/
    It still doesn’t cover all possibilities of course.
    So RWD for me is still partially a gamble. But which worked out great so far.

    Maybe it’s better to start formatting content itself differently, instead of the layout.
    Although I believe that devices with small screen sizes need (holographic) projection. Although for certain type of content that might be embarrassing. ;)

  • Skweekah

    Mobile devices these days present content at widths comparable to desktops of only a few years back. It’s probably not a big deal as much as it was when the best that an iphone could do was 320×480px. It’s currently 1136 x 640px. The Galaxy S4 is putting out even high screen dimensions. Should we really be that concerned about RWD?

    • Robert

      The problem with these ultra high resolutions on 4-5 inch screens is that they are not very useful to fit in more information **at once**. The physical dimension of mobile screens is always going to be a stumble block.
      If it were comfortable to view/read a webpage in full view (zoomed) at 1136x640px on a 4-5 inch screen, we wouldn’t have to resort to RWD to make it comfortable to view/read.

      Retina displays (other brand names included) are very nice to look at, but they won’t show much more information **at once** than a mobile device with a screen resolution half the width and half the height in pixels :
      The pixels were made smaller, but the screen size increased only marginally, end result is much more pixels to make the screen display smoother text and images.
      But because the pixels are much smaller, the end result which is displayed is also much smaller. Result you have only 25% of your 4-5 inch screen filled with a 568x320px image. So x2 image sizes were introduced. Which should actually be named x4, because the images are 4 times as large (Width x2, and Height x2 = Image x4).
      But because x2 uses 4 times the number of pixels to display the exact same image/information, you will see only as much as on a device with a lower resolution : 1136x640px / 2 = 568x320px, which is approximately 480x320px. The only difference being the eye candy of x2.
      This is exactly the same on notebooks with Retina (and other ueber high-res) displays.
      Text is not much better, unless you have 20/20 vision.

      And the same designers/developers expressing their concern about mobile device bandwidth as part of their RWD efforts, create an additional set of Retina sized images and calling it “optimizing” for x2. >:-/

  • Shreyo

    This screen war and responsive web designing concept came into light because of BYOD (Build Your Own Devices). At some point designers and developers are stuck while designing for multi-resolution screens. But there is another serious issue in rwd is the ability to quick rendering of the responsive website. Read more about the RESS here (infographics) – http://ondeweb.in/responsive-website-design-rwd-vs-responsive-design-server-side-components-ress/

    • http://www.optimalworks.net/ Craig Buckler

      Designers have been designing for multi-resolution screens since day one. Unfortunately, at some point, the trend moved to fixed-width designs primarily because it was easier.

      RESS (Responsive Design Server Side Components) really means a separate mobile site. You detect the device then forward to a site which is specifically optimized for mobile. The issues that infographic doesn’t highlight:

      1. It’s difficult to identify what a mobile device is or isn’t. That solution depends on browser sniffing which is more flawed than analyzing the resolution.

      2. Building a separate mobile site is considerably more expensive than RWD.

      However, I do agree that applying RWD to a 1.3MB web page in an effort to support mobile is almost pointless. It’s like sticking go-faster stripes on a snail.

  • http://www.nine10.ca/ Richard Podsada

    I came to this conclusion while cutting my first responsive design. We were redeveloping our agency website which was already cut for the desktop. I was banging my head on a wall trying to figure out how to style the site to common breakpoints for devices… Until I realized that was the completely wrong way to approach it. What I realized is that RWD is design-centric not device-centric. The devices and resolutions don’t matter – the only breakpoints that you need are the ones your design needs to stay coherent. The rest is handled by fluidity in between. Once I realized this I zoomed through cutting the site and never looked back. So if you’re beating your head on a wall like I was, forget about the devices. Simply make everything fluid and set your breakpoints at places where your own design doesn’t work. They may be at wierd resolutions (eg 625 and 515px) – that’s OK, because as long as your design works at ANY resolution, you know it will display correctly on any device. I think too many people are thinking ‘adaptive’ or A/B or some mix of the two when starting. Instead, think single-column of text circa 1990’s (where many sites were ‘responsive’ out of the box) with a few new CSS friends to help you when the design breaks.

  • http://www.popsb.com/banks/ Santa Barbara Professional web design

    Hi.
    This screen war and responsive web designing concept came into light because of BYOD (Build Your Own Devices).I completely agree with commentators totally nice
    Very interesting article that you’ve posted. It’s been a while since I posted in my G+ account.Found the views to be quite informative and intriguing. Thanks for sharing.