Adaptive Web Design Examples & Business Benefits
January 3, 2012
Adaptive web design is all the rage in the web design world. But what exactly does it mean and, more importantly, how can it help your business?
Having a mobile version of your website is an essential business tool these days. Crafting a tailored experience for each device is a common practice, but it makes keeping up with all the latest devices an everyday struggle. One design for the iPhone, another for the iPad, another for Android users. Oh, and what about the Blackberry? We can’t forget that. The process can be exhaustive and can quickly amount to a pretty large overhead for your business.
By 2015 more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices. Source Furthermore, worldwide mobile data traffic is predicted to increase 26-fold. Is your business ready? Source
What is Adaptive Web Design?
Kayla Knight at Smashing Magazine describes it well in her wonderful article on adaptive web design:
Adaptive website design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. As a user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Smashing Magazine author Kayla Knight
This is the main goal of adaptive web design: to provide a great experience to all audiences from one centralized place, your website.
Adaptive Website Design in Action
As we adjust the resolution of this website the content shifts and adjusts to accommodate the screen size. This approach allows you to provide the most valuable information to users with a small screen resolution (mobile users).
Business Benefits
An adaptive website design approach will allow your web team to focus time optimizing your company’s website instead of developing custom applications for each new device or app marketplace. By focusing on the resolution instead of the device we can craft a great experience for all audiences that has many business advantages:
- Mobile viewers have a higher conversion rate and lower bounce rate when using an optimized website
- No need to manage and build multiple sites for multiple devices means less time spent on development
- No need to build a costly web app for iPhones, iPads, Android, etc.
- Better brand and experience consistency
- Adaptability for other devices down the road
- Less development means less overhead, and more cost savings
If you’re not optimizing for mobile users today than your business is falling behind. Whether you’re considering a simple redesign or entire mobile overhaul to your website I highly suggest discussing a adaptive web design approach with your agency or in-house team.
Questions For Your Agency or In-house Team
1. Are you currently using any adaptive web design tactics in your web development process?
Ask for examples, if they are done correctly it should be easy (and exciting) for the agency to show them off to you. A few examples that you can check out yourself include:
2. Do you use any HTML5 frameworks for rapid development?
Over the past year many frameworks have appeared around the web that make adaptive web design much easier, faster and robust for developers. If your agency or in-house team is using on of them them then they’re most likely worth their salt. A few good options include the HTML5 Boilerplate, 52 Framework and Gravity.
3. Do you use a responsive video player to ensure that our product tours and/or videos will be easily accessible on mobile devices?
MediaElement.js and VideoJS are two great options if your plan to host your own video. If you’re planning to outsource your video hosting then you shouldn’t have a problem. Free video sites like YouTube, Vimeo and Viddler have the option to use an HTML5 player with Flash support as a fallback. Just make sure your developer is using the HTML5 version of the video player.
In Conclusion
Mobile web design is important for any web-based business or application. Using an adaptive web design approach has many business advantages and should be considered a goal for many companies in 2012. If you have any questions please don’t hesitate to post a comment, I look forward to any feedback.
Other Great Adaptive Web Design Resources
- Responsive Website Design: What It Is and How To Use It
- Responsive Website Design: A Book by A List Apart
- SitePoint Podcast #111: Responsive Website Design with Jeremy Keith
- Responsive Website Design Techniques, Tools and Design Strategies
- What The Heck Is
Responsive Website Design? - Media Queries
- Responsive Website Design Elements Tool
- Responsive Website Design FAQ’s
- 5 Gorgeous Examples of Responsive Website Design
- Why Responsive Website Design is The Future