Beyond Squishy: The Principles of Adaptive Design

Brad Frost – Brad Frost Web

Generic Trademarks (Kleenex, Corn Flakes) on the web are AJAX & HTML this lead the way for responsive web design, which includes fluid grids, flexible media and media queries.

Adaptive web design is a larger container for responsive web design. It just happens to be the term that caught on.

Principles of Adaptive Design
Ubiquity – The web is not just a computer any more, it includes many many more ways to access now. What will it be in the future? Cars? Refrigerators? Watches? Printers? TV’s We have to reach a LOT of devices. “This isn’t a bug, but an opportunity.” Adaptive isn’t just “web light”. Mobile users should be able to access everything their counterparts on a full browser can. Just give people what they want regardless of how they access.

Content Parity – Does content parity trump all? The typical “mobile context” is on the go – quick access. There is on the go, but it doesn’t include everything. Just make quality relevant content accessible on whatever platform it’s being viewed on.

Ubiquity – Your design needs to work across the entire design continuum, not just certain browser sizes, or phone sizes.

Performance – 70% of mobile users expect their site to open as fast or faster than regular browsers. If your site doesn’t load in 5 seconds, they’re gone. Performance is invisible, so it’s a hard thing to root out. It lives underneath and it’s hard to measure. Performance should be a design feature. Mobitest.akamai.com will help test mobile performance.

Enhancement – Responsive design is NOT one size fits all. Don’t go mobile last, but go mobile first and then grow. Build the experience up from mobile. It’s not about building for the lowest common denominator but starting and building up from there. Be careful with a single (javascript) point of failure. Don’t over-engineer things… simple is better. There is a difference between support and optimization (you can’t test on absolutely everything out there).

Future Friendly – Things are going to change. There is no such thing as future proof. Just be future friendly. People have a low tolerance for BS. Focus before your customers do it for you. People will find ways around a bad experience (Instapaper, Flipboard, ad-blocker). On the web, the more backward compatible you are the more forward compatible you’re likely to be.

How to

• Get to the meat – don’t waste time on huge headers.
• Navigation: It should be like a good friend – there when you need it, but out of the way other time. A menu button to get nav out of the way is good
• Search Form: Prioritize search to provide a way to get around.
• Product Info: put it up front and get people to it.
• Carousels: Make sure you actually need one. Cycle through like items, make sure things are related and make sense.
• Product Form: make sure the phone pulls up the right keyboard
• Share Buttons: They are big (a lot to load)
• Find Nearby: It is geared to a mobile user, so may not be necessary for desktop users.
• Auxiliary Content: Make sure content is prioritized and bring in content when needed.

Scanability & Performance
We are always scrolling through a single content type. Don’t make your users scroll through EVERYTHING. Collapse content so it isn’t everything and the kitchen sink.

This stuff is hard. It is always changing, but we need to do it. We need to be aware of landscape.
“If you’re finished changing, you’re finished” – Ben Franklin