Menu

UIEtips: Where Are Mobile First Responsive Web Designs?

Headshot for Jared Spool
by Jared Spool

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.

Published here on September 11, 2012.