UIEtips: Where Are Mobile First Responsive Web Designs?

Jared Spool

September 11th, 2012

In today’s UIEtips, we turn again to mobile design expert, Jason Grigsby. Jason looks at responsive web design and flips the process around to address some of the concerns raised about media queries.

For those unfamiliar with the phrase, Mobile First RWD takes the concepts that Ethan Marcotte taught in his A List Apart article on Responsive Web Design and flips the process around to address some of the concerns I raised about media queries.

Instead of starting with a desktop site, you start with the mobile site and then progressively enhance to devices with larger screens. As a bonus, you benefit from the advantages of Mobile First design that Luke Wroblewski espouses.

In practical terms, I think a Mobile First RWD approach requires addressing some of the following challenges:

  • The need to start over and design for the smaller, more limited devices first
  • Ability to replace images with higher resolution images as the size or dpi of the screen increases
  • Ability to test for screen size and capabilities
  • Ability to add more javascript as capabilities and/or screen real estate increases
  • Ability to add more markup as capabilities and/or screen real estate increases
  • Ability to modify the layout as screen real estate increases
  • Decision about how to handle doctype and other markup if you’re going to support older phones that primarily support XHTML-MP

This list was just a starting point for exploration. I wanted to review how other developers are approaching Mobile First RWD in an attempt to find techniques that I might not be aware of and to see how they are thinking about these problems.

Read the full article, Where Are Mobile First Responsive Web Designs.

Learn More from Jason

Jason is presenting our next virtual seminars this Thursday, September 13. Jason will show you how to start practicing mobile-first responsive web design by reordering your CSS, assets, and images. He’ll also show you how to handle retina-display images and which tools to use for mastering mobile first. Learn more about his webinar, Mobile-first Responsive Design.

How have you changed your designs to consider mobile first? Give us your thoughts below.

2 Responses to “UIEtips: Where Are Mobile First Responsive Web Designs?”

  1. Bark Golgafrincham Says:

    People continue to misunderstand RWD as it relates to web applications as opposed to brochure and newspaper sites. RWD is not just about content sizing — RWD is going to be about abstraction, code management, and using the right methodologies.

    See here for more —

  2. Brad Greenwald Says:

    I currently work at space150 where we built http://www.buffalowildwings.com as a mobile first experience.

    We used techniques such as CSS inline SVG, server-side detection for mobile assets, and Javascript which builds & destroys various interactive page features. We built the mobile experience at 768 pixels and lower to accommodate a wide range of Android devices. The average page size is around 1mb, while a couple pages are 2mb or greater. We have content entered through a CMS, it’s not easy to get optimized images uploaded through the CMS after the content entry process leaves are hands.

    In areas such as slideshows, the time investment to create mobile-first versions of images become too taxing on the project, resulting in an under-utilization of our server-side mobile detection program.

    Building sites in this fashion has resulted in the creation of scripts which our developers are occasionally making public on github. I do agree mobile-first frameworks seem to be in their infancy at this time.

    Thought I’d share,
    Brad Greenwald

Add a Comment