In his presentation at An Event Apart in Washington DC 2012 Brad Frost talked about the principles behind adaptive Web design and shared a number of techniques for creating responsive pages. Here's my notes from his talk on Beyond Media Queries: An Anatomy of an Adaptive Web Experience.
- Generic trademarks started out as specific products that came to define general products over time. On the Web we’re used to this transition: Ajax, HTML5, and responsive Web design but it makes many Web designers cringe –we love semantics. Allowing these terms to turn into buzzwords, isn’t necessarily bad for our industry.
- Responsive design is one tool in a broader adaptive design toolkit. Adaptive layouts are just the tip of the iceberg. They are not an end-all solution but since the term responsive Web design has taken off, it might was well be a generic trademark for multi-device Web design principles.
Principles of Adaptive design
- Principles of adaptive design: ubiquity, flexibility, performance, enhancement, future-friendly.
- The Web is not a desktop browser. It’s on TVs, game consoles, smartphones, and more. This is really just the beginning –we’ll see lots more devices in the future.
- The power of the Web is its ubiquity. No other platform has as much reach. The inclusive nature of the Web requires us to preserve it and keep it open.
- Diversity is not a bug, it’s an opportunity to take the Web to new places, to reach more people.
- Give people what they want regardless of how they access the Web. Call it what you want (content parity, etc.) but make sure people can access your content and services.
- Just because a site is responsive, doesn’t mean it gives people what they want. Multi-device design is hard.
- Flexibility: embrace the squishiness of the Web. Use fluid layouts and images.
- 71% of people expect mobile sites to load as fast or faster than desktop sites.
- 74% will abandon if a site takes more than 4 second to load. You have 5 seconds of someone’s time.
- Yet the average Web page size is over 1MB and growing. 86% of responsive web designs send the same content to mobile devices.
- Obama’s responsive Web site can’t be viewed on Blackberries because it is too large (over 3MB). This is an accessibility issue.
- Performance is a hidden consideration. We need to elevate it to the level of design. You can’t mock-up performance in Photoshop.
- Our users care about performance, we need to care more.
- Progressive enhancement is your friend.
- Instead of mobile last, build mobile first. This will give you a very solid foundation on which to stand and enhance for more capable devices.
- Not even the best technologists in the World know what digital products will be in the future. We need to embrace unpredictability.
- Today’s landscape is boot camp for tomorrow’s insanity.
Applying The Principles
- Get to the content first. Logos and navigation are not why people come to Web pages. Navigation should be like a good friend. It should be there when you need it but give you space to do what you want.
- The toggle technique for site menus can keep focus on core content while still giving you access to navigation when you need it.
- How do you manage large navigation menus? You can allow people to navigate using search and not require 4-5 layers of navigation to find things.
- Carousels: make sure you need one, only load what you need, be explicit with navigation, give hints that other content exists, and treat touch as an enhancement.
- To load Twitter, Facebook, and Google social media buttons you need 19 http requests and 200KB. That’s more than a full Web page. Instead just link to sharing pages or use progressive enhancement to add more functionality.
- Simply ask questions to uncover mobile use cases: why would someone use this on a phone? How can I enhance this for mobile or tablet users?
- Auxiliary content: you can enhance pages with additional content like related links, etc. when screen size increases. Create HTML fragments that can be loaded with Ajax or linked to when Javascript is off.
- Loading in additional content allows small screens to be more performant and larger screens to take advantage of additional space.
- We scroll on mobile: when we go back in time, dive deep into content, or make your way through lists. We’re always scrolling through a singular content type.
- With responsive Web design, we tend to fold a number of different content types into a single column. But that means lots of different content types in our scroll path. How do users know what’s on the page? They have to scroll and sift through a bunch of stuff. Auxiliary content loading can divide up content types more clearly.
- Footer navigation gives people a way to continue moving forward after they read content instead of leaving them hanging.
- Back to top links allow people to make their way back up a long set of content quickly and easily. Shortcuts to the top of pages are included in some browsers but not all so add your own to Web pages.
- Multi-device Web design is not easy. It’s a big task. Its up to us to make experiences that don’t suck on the Web.
- This isn’t religion -it’s Web design. Disagreements happen and implementations change but keep learning.
- When you’re finished changing, you’re finished.