Responsive Web Design Resources

responsive web designJonathan Kurten, Cully Larson and I presented a talk about responsive web design today at the Madison Ave. Collective. This is a list of resources for the talk.

Why Support Mobile?

Statistics and articles about usage.

What is Responsive Design?

Design

Navigation

Accessibility

  • W3C Web Accessibility Initiative – The mission of the WAI is to lead the Web to its full potential to be accessible, enabling people with disabilities to participate equally on the Web. This site explains what accessibility means and what must be considered when designing and building an accessible website. Tons of resources.
  • Accessibility is not what you think – Accessibility isn’t just about the visually impaired. When you design for mobile, think about challenges everyone will have reading small or low-contrast text in difficult lighting situations, and about big fingers on small tap targets.
  • WebAIM – Non-profit organization offers training, testing and on-line resources to assist in designing and developing accessible websites.
  • Color Contrast Analyzer for Chrome – This Chrome extension enables you to analyze text color contrast problems on a web page according to the WCAG 2 color contrast requirements.
  • Tenon.io – Free service to test a web page for accessibility. They also offer software for testing sites in development plus recommendations for fixing problems that are uncovered.

Design Tools

Responsive Frameworks

Performance

Images

Examples

We were most interested in navigation options.

  • ESPN Sports Programming – uses a hamburger for list of sports, even in wide-screen browser. In phone size there is a two-line hamburger at the top of the page for main topics (Home, Schedule, Programming, …), with the three-line hamburger below for the sports list.
  • Y7K – digital agency. In phone size they hide the menu in the footer, under their “Y” icon.
  • Fubiz – fine art photography site. When the hamburger is clicked, a site navigation screen replaces the current page view. Also note the gallery slider on the home page that shows one full image and pieces of the previous and next images.
  • Smashing Magazine – has more breakpoints than any other sites we looked at. Pay attention to how the secondary navigation migrates from the sidebar to the top of the content area and back again as the viewport shrinks.
  • President of Russia – deep site for the Kremlin has slide-out menus on the left side of the screen for all media sizes.
  • Spotify News
  • Stuff & Nonsense – fun with monkeys.
  • Bloomberg Business

Podcasts

Credits

  • big – open-source presentation software for geeks with no patience for Powerpoint.