Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. “Look! The site is squishy!”
While creating flexible layouts is important, there’s a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web’s ubiquity and move it in a future-friendly direction.
Presenters
- Brad Frost, Mobile Web Strategist & Front End Designer (Brad Frost Web)
Resources
- This is responsive
- Responsive web design tutorial
- Mobile-first responsive web design
- Anatomy of a mobile-first responsive web design
- Future-friendly manifesto
- Testing mobile performance
- Shared Count social widgets
- Notes from other blogs: Techory
- #adaptive
Notes
Responsive web design coined by ethan marcotte (a list apart). Involves fluid grids (%-based width), flexible media (images stored/scaled), and media queries (select layout based on conditions). This is all part of a broader design strategy: adaptive design.
- Ubiquity
- The web is meant to be consumed on multiple devices, in multiple locations, on multiple screens, and beyond. In addition, there’s more devices, more spaces, more interfaces that haven’t been imagined yet. Adaptive design reinforces the ubiquity of the web. “Diversity isn’t a bug, it’s an opportunity.” (Rieger) We have to stop thinking about the web on mobile devices as the “less than web.”
- One web. Thematic consistency. Give people what they want. In order to do this, we need to achieve “content parity.”
- Flexibility
- “Accept the ebb and flow of things”. There are few if any non-flowing breakpoints as the screen size becomes more of a continuum. Designing media queries into set buckets (used to identify devices) locks you into inflexibility in that continuum.
- Performance
- Performance is invisible. You can’t prototype it. But expectations for mobile performance is as fast or faster than desktop sites. The performance of mobile is critical. This is a huge problem with current responsive design because a small screen has to download the content for all screens. Average sizes of web pages are growing, and that impacts mobile (sometimes prevents mobile access).
- What about “performance as an essential design feature”?
- Enhancement
- Too much for RWD is about creating a one-size-fits-all , but we really need to keep talking about progressive enhancement, mobile-first, future-friendly design and implementation. Strong foundations make strong products. Keith: “Not about building for the LCD, it’s about starting there.”
- There’s a difference between support and optimization. Supporting every possible device in the matrix is impossible, so you will be optimizing for certain ones. But that’s ok, think about expectations and meet them, that’s it.
- Future friendly
- “Acknowledge and embrace unpredictability.” For example, some sort of crazy shit like GOOGLE FREAKIN’ GLASS.
- Focus the design around the most important thing on the page for the visitor. First. We can’t be all things to all people, we should help people focus (otherwise people will find a way to circumvent or leave).
- Invest in clean and semantically sound APIs as an investment in your content, preparing it to go anywhere “because it’s going to go everywhere.”
Random comments
- Ask questions for small enhancements related to mobile contexts instead of designing around that
Aggressive enhancement. Conditionally loading the content and giving access to secondary content upon request. This improves performance but also builds on scanning habits. - A lot of mobile rwd just takes the columns grid and stacks on top of each other, but that destroys chunked scanning. Use progressive disclosure.