In the past few years the number of mobile device users going online has increased dramatically. This new change in web demographics has made it imperative to make one’s website cross-device compatible. The majority of websites on the web are at least viewable on mobile devices; however, the interface is rarely mobile optimized and often makes navigating web content frustrating, if not impossible for mobile users. To handle this new demographic of devices, two design philosophies began to emerge: Responsive Design and Adaptive Design.
In the beginning, there were mobile sites
In the beginning, mobile devices were often handled by creating a completely separate mobile website usually hosted on a subdomain. The web browser would identify if the user was on a mobile device and would bounce them to the mobile site. However this approach was really only workable for static sites as keeping two separate sites up to date with the same web content is a waste of time for any business.
To make the mobile site solution more scalable, developers used this same 'mobile site' approach, and instead of a separate website they started building separate mobile themes. The mobile theme would take the same content used for the desktop view, but would present it in a completely different, mobile optimized manner. There are two downfalls to this approach: 1. The drastic difference in the mobile theme vs the desktop theme can become confusing for users, as nothing matches the interface they are used to. Also, these mobile theme sometimes hide a lot of the content and pages from the full site, and again can cause user frustration trying to find a page that they have viewed on their desktop, but can not find on mobile. 2. The cost of building a completely separate mobile theme definitely outweighs its benefits. Developers have to create two completely separate themes with little to no re-usable components. Again this is not a scalable, cost-effective solution for handling mobile devices.
Responsive Web Design (RWD), a leap forward
With the advent of CSS Media Queries, which allows developers to customize the CSS based on browser width, mobile themes were quickly viewed as a thing of the past. Responsive websites are built with a flexible layout which responds to a user's device width. This keeps the user experience consistent, while allowing the designer to adapt various pieces of the site depending on the viewable area. The fluidity of a well-built responsive site allows for it to adapt to any device width, the downfall is that the mobile device still needs to load all of the assets of the full desktop site even though the images are scaled down and much of the content and backgrounds are hidden from the user.
Adaptive Web Design (AWD), cut out the bloat
Adaptive design leverages server-side sniffing to serve different html/css/images based on the user's device size. Adaptive sites rely on pre-defined screen sizes and tends to be less flexible than responsive sites, however each breakpoint can be very specifically designed which tends to be less sloppy than many Responsive themes. Being able to cater the site assets depending upon the device also allows for much smaller page sizes, and thus much quicker load times.
Adaptively responsive, the best of both worlds
As with any web technology, it is usually a blend of approaches that leads to the best outcome. By leveraging the server-side asset handling of Adaptive design with the fluid layout of a well built Responsive theme, you can create a beautiful solution that scales across all device-widths while still keeping the page size low. However you approach your mobile build, the focus should still be to provide a consistent intuitive experience for users no matter what device they are on.
