Every mobile user has been there—trying to look up a piece of information only to be confronted with terrible usability (a tiny page, minuscule font, or graphics that never load). As smartphones and tablets become more mainstream, users and businesses alike stand to benefit from websites that translate well to mobile. To make websites user-friendly across multiple devices, designers generally employ one of two methods: adaptive web design or responsive web design. When redesigning your website to be “mobile friendly,” knowing the differences between these approaches will speed up the conversation between you and your design team.
Adapting for a better mobile experience
- Touch interactions
- Larger button size (large enough for fingertips)
- Smaller screen size (so a user doesn’t need to expand or scroll horizontally)
- Smaller resolution graphics (graphics take up data and load time)
Separate mobile sites and feature-by-feature tweaks worked well until Android-enabled devices entered the market with a greater range of screen sizes, resolutions and features. With so much variation, a single mobile site is no longer enough. In addition, variation in screen size is not limited to mobile devices; computer screen size creates the same site design difficulties (for instance, compare a netbook to a widescreen monitor).
Beyond the phone: The device agnostic approach
Responsive design aims to create a single, scalable site that looks good on many devices. This site will reorganize itself to prioritize the most important elements and fit whatever screen size it is being viewed upon.
Try looking at a responsive site such as Smashing Magazine on your browser, or plug it into a site like Responsinator to see what responsive design looks like on various screen sizes.
What is the main difference between responsive and adaptive design?
Both approaches look to improve web browsing experiences on mobile devices. However, adaptive design fixes features one-by-one, while responsive design involves creating a scalable website that attempts to solve all mobile (and screen size) issues at once. Often (but not always) this makes responsive design the larger project. Technically, responsive design is a subset or type of adaptive design.
Which one is right for you?
While responsive design is the trending approach, it isn’t always the right one to take. It tends to take more money, time and work to apply to a site. Sometimes adaptive design is the more realistic immediate option to help improve a site (feature by feature), while still planning for a long-term responsive approach. Try creating a user experience map to see what features are most important to your customers, and which approach fits best for you.