The Web back in these days

flexible by default

Responsive Web Design

short intro to the history

Responsive layout ingredients

responsive layout
  • Flexible layouts
  • Flexible media
  • Media queries


Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web.
– Jeremy Keith

Developing backend systems seems easier

  • you have one server
  • you have one database
  • you have one coding language
  • developing bullet proof modern frontends is difficult

What do we know about "the users web"?

Nowadays we don't know how and where the user visits our website

  • we don't know the screen size
  • we don't know the browser capabilities
  • we don't know the connection speed

Current workflow

The common process in web projects

waterfall workflow

Changing design for client needs

Changing design for client needs

Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight
– Andy Clarke

Photoshop looks good,
websites can't look that good!

Mobile first

Mobile first

  • start to design for small screens
  • concentrate on the important things
  • try to reduce site navigation
  • important content first

Content first

The web development workflow I follow is Coffee First.
– Drew McLellan

Content first

Content first

Responsive content priority: The smaller the device, the greater need to show the most important content - top to bottom


  • Users can read your content differently, think of

  • RSS
  • Readability, Instapaper
  • SEO?!

Steven Hay's workflow

Content first

Steven Hay's workflow

  1. Content inventory
  2. Content reference wireframes
  3. Design in text (structured content)
  4. Linear design
  5. Breakpoint graph
  6. Design for various breakpoints
  7. HTML design prototype
  8. Present prototype screenshots
  9. Present prototype after revision
  10. Document for production
It's impossible to predict all the complications of a responsive design up front. We need a more fluid workflow!
– Andy Clarke

Style Tiles

Style Tiles

Present clients with interface choices without making the investment in multiple photoshop mockups

Style Tiles
Style Tiles

Designing in the Browser

  • take advantage of HTML5/CSS3
  • Prototyping in browser can be faster
  • Changes can be done faster
  • if you do not want to design in the browser, decide in browser

Adobe Edge Reflow

Adobe Edge Reflow Logo

Adobe Edge Reflow

Adobe newest baby (sneak preview)

Adobe Edge

You can't mockup performance in Photoshop


There's no correlation between the size of the screen and the amount of bandwidth available to it.
– Ethan Marcotte


A potential consideration

  • small screens + touch (mostly smartphones)
  • large screens + touch (mostly tablets)
  • large screens + keyboard/mouse (mostly desktops/laptops)
  • desktop with UMTS stick » mobile?

Common Breakpoints

don't mix up CSS pixels and device pixel (Video)

  • 320 pixels - smartphone portrait
  • 480 pixels - smartphone landscape
  • 768 pixels - a tablet in landscape
  • 1024 pixels - some tablets, notebooks, desktop monitors
  • 1200 pixels - widescreen display monitors
  • missing some?

  • 360 pixels - Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)
  • 600 pixels - small tablets (7") in portrait
  • 1600 pixels - large monitors, TV?
  • 603 pixels - huh, Nexus 7 device width is more than 600px (portrait)
  • 568 pixels - haha, iPhone 5 in landscape

Future Breakpoints

What's next?

  • ??? pixels - Kindle Fire HD, iPad Mini?, ...
  • Blogpost from Luke Wroblewski "This Week In Mobile..." (7. September 2012)
  • Let the content choose your breakpoints!

Finding Breakpoints

Adobe Edge
Adobe Edge


Real device testing is important

  • consider early device testing
  • not only testing the design, test the feeling too
  • remote testing and debugging with Adobe Edge Inspect
  • Open Device Lab

  • started from Jeremy Keith in Brighton
  • list of Open Device Labs

Frameworks and Resources

Frameworks and Resources

Trends are poison. It's such a shame that Responsive design is often degraded to being a “Web design trend”. It isn't. It's a new mindset.
– Vitaly Friedman

Thank You!


Contact me via