Jonathan 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.
- Responsive Web Design Infographic – a quick look at usage trends.
- Mobile Marketing Statistics 2015
- Google’s mobile-friendly test – how does your site rank?
What is Responsive Design?
- What You Need to Know About Responsive Web Design – infographic gives a quick overview of what, how and why.
Design
- Designing with developers in mind: guides, grids, and frameworks – ensure the best experience for web developers and the client as well.
- 5 ways to bridge the designer-developer gap on responsive web projects – strategies for effective design project management and communication with developers.
- Size Tap Targets Appropriately – tips from Google on making life easy for fat fingers.
- This is Responsive – patterns and resources for creating responsive web experiences.
Navigation
- The Hamburger Menu Doesn’t Work – argues that hidden menu items are invisible to many users, and that the hamburger isn’t a sufficient solution. See also reactions at Reddit, Y Combinator, and Designer News.
- Supporting Mobile Navigation in Spite of a Hamburger Menu – Nielsen Norman Group (NN/g) explains why websites that use the hamburger or three-line menu need to support navigation activities throughout the site, in case users don’t locate or use the main site navigation.
- Mobile Faceted Search with a Tray: New and Improved Design Pattern – a way to present filters and filtered search results on mobile, from NN/g.
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
- Sketch
- Device Preview for Adobe Photoshop CC – see also this tutorial and the help page.
- LiveView – Zambetti’s tool to mirror Photoshop to phone
- Analytics-driven responsive web design planning
- Responsinator
Responsive Frameworks
- Bootstrap – aka “Twitter Bootstrap,” the most widely used responsive framework.
- Zurb Foundation – also a favorite of many developers.
- Skeleton – light footprint for efficient code.
- Responsive CSS Framework Comparison – first written in 2012 to compare Foundation and Bootstrap; in December 2014, added Skeleton.
- What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design – a good introduction to the concept and the variety of frameworks. A bit dated (Feb 2013) so some of these frameworks are no longer supported or recommended.
Performance
- Responsive Design Is Not Enough, We Need Responsive Performance – addressing performance issues and testing results on older, slower networks and devices.
- Site speed: case studies, tips and tools for improving your conversion rate – according to Econsultancy, 47% of people expect a site to load in two seconds or less; 40% of people will leave if it takes more than three seconds to load.
- The Average Internet Connection Speed in Every State in America – see also this List of countries by Internet connection speeds.
- StatCounter Global Stats – shows statistics of usage by platform, monitor size, location.
- Google PageSpeed Tools – test your site speed and get tips from Google on how to make it more zippy.
Images
- Responsive Images in Practice
- Retina Images – Github project to serve different images based on the device being used by the viewer.
- The ultimate guide to SVG
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
- Responsive Web Design – interviews with teams building complex responsive websites.
- Boagworld – Paul Boag of Headscape offers advice and interviews digital design experts. See in particular these relatively short episodes: 10 things to consider when building a responsive site and 10 ways to improve your mobile experience. The lead-in to the longer interviews rambles a bit; if you’re in a hurry, skip to the beginning of the interview.
- The Big Web Show – Jeffrey Zeldman interviews more experts. Of particular interest are two episodes about working with responsive images: episode 112 and episode 118.
Credits
- big – open-source presentation software for geeks with no patience for Powerpoint.
