The basic aspects of adaptive design are obviously important, and over the last few years they’ve helped the Web community better cope with the great number of web-enabled devices. But those three ingredients are just the tip of the iceberg.
I would separate five guiding principles of adaptive design:
- Ubiquity
- Flexibility
- Performance
- Enhancement
- Future-Friendly
Ubiquity
- Achieve content parity across devices, and avoid the myth of the mobile context.
- Understand the difference between “support” and “optimization”.
- Be considerate and inclusive as much as humanly possible.
Flexibility
There ain’t no going back to the fixed-width days of yore. In order to create effective designs for our multi-device age, we must embrace the web’s intrinsic fluidity.
We pack all elements into delicate user interface. Search for the best forms of navigation, interaction patterns and styles to enhance usability and make exploring process pleasant. Produce emotional customer response.
- Create device-agnostic interfaces that aim to look and function beautifully everywhere on the resolution spectrum.
- Let content determine breakpoints instead of using today’s popular device dimensions.
- Don’t just create myopic buckets (“phone”, “tablet”, and “desktop”). Rather consider the entire resolution spectrum and all the devices–both present and future–that will access your experience.
- Use tools that encourage flexibility
Performance
The first few years of our responsive age were spent getting our heads around the mechanics of media queries and other techniques. All the while the size of average Web page–responsive or not–skyrocketed in size. So it’s been a welcome change to see more folks care about performance and tackle the performance-related issues of the multi-device Web.
- Treat performance as design and help your organization prioritize performance.
- Set performance budgets and stick to them.
- Embrace conditional loading, as this crucial technique helps us deliver highly-performant and fully-featured experiences to our users.
- Get into the browser sooner and test early and often. Performance is invisible, so testing is essential to help us catch performance-hurting decisions.
Enhancement
Responsive web design does not need to stop at making squishy layouts. This isn’t a one-size-fits-all solution. Responsive design is very much an extension of progressive enhancement, so don’t get hung up thinking that media queries are the only tool in your toolbox.
- Recognize that the Web is a continuum, not a platform.
- Use feature detection to capitalize on device/browser capabilities so that we can support more devices while still optimizing for the the best of the best
- Recognize that many interface patterns (From social widgets to images to maps to lightboxes) require more than simple translation in order to work well across all screens
Future Friendly
No one knows what the Web and device landscape is going to look like in a couple years, but there’s a damn good chance the gadgets sitting underneath Christmas trees a few years from now will have access to the Web.
- The key aspect of future-friendly thinking is to acknowledge and embrace unpredictability.
- Think in a future-friendly way by focusing on what really matters, creating portable data, and getting your content ready to go anywhere.
- Be present friendly. As Josh Clark says, “When it comes to the Web, the more backward-compatible you are, the more forward-compatible you’re likely to be.”
Guiding Principles
I like these principles. For me, they serve as a sort of checklist for any strategic, design, or development decision. If decisions go against one or more of these principles, we need to have a conversation.
If your website doesn’t look good and work on people’s phones, it spoils the first impression on a customer and they almost never come back to check it out on desktop. We create responsive websites, ensuring usability across various appliances. They look and work awesome on PC, as well as on different mobile devices. So the additional version of web site is not required.
