Responsive Design

Personal Notes from An Event Apart, Boston, 2015
Speaker: Brad Frost @brad_frost

The Ever Shifting Landscape

For the past 25 years, we’ve been developing for desktop screens. Now, the web universe has exploded. But even with the vast proliferation of devices, we haven’t seen anything yet. More people have access to mobile devices than running water and toothbrushes.

68% of Americans access the web via mobile.  (Feb, 2014) Over half of emails are opened via mobile. The most popular browser on the planet is Facebook’s mobile browser.

What can we do? We can sit on our hands and do nothing, we can make an app that may or may not be seen by anyone or we can design responsively and create a size-agnostic tool that works with everything.

85% of mobile users expect site to load as fast as desktop site. You have less than 5 seconds to get things to keep a user.

Responsive Components

  • Fluid Grids
  • Flexible Media (max-width: 100%; height: auto)
  • Media Queries

Principles of Adaptive Design

These five principles are a good checklist in the responsive design process.

  • Ubiquity – Mobile users will do anything and everything desktop users will do.
  • Flexibility –
  • Performance – Set a performance budget and work to achieve that. Size and time load goals.
  • Enhancement – Make a good core experience and build out from there.
  • Future Friendly – The lighter we are the easier it will be to change and adapt in the future.

Media Query Considerations

  • Treat layout as an enhancement by writing mobile-first media queries.
  • Let content determine breakpoints.
  • User major and minor breakpoints.
  • Don’t overdo it.

Build sites in such a way as to avoid having the user have to scroll through a lot of disparate content.

Conditional Loading

How to make work in a CMS? Third party things…load those later.

It’s alright for different users to get a different experience as long as functionality remains accessible. For example: loading reviews or serving up a link for reviews.

Touch Considerations

  • Don’t rely on hover states and expose crucial information.
  • Find ways to enhance for touch devices.
  • Be mindful of ergonomics. How do people hold their devices?

Navigation

  • Top nav or do nothing approach
  • Priority plus approach – BBC site and the guardian.

Responsive Images

  • SRCSET – review and start using. It helps the browser decide what to use.
  • Picture Element allows for art direction. Tells the browser: Do this only!

Research Brad Frost Adaptive Maps to enhance user experience.

Footnotes