Blog: Mobile Web Design

Adaptive Web Design vs. Responsive Web Design

Posted by in Mobile Web Design on Wednesday, March 27, 2013

Mobile Web Design

It's official: the Age of Mobile has arrived. Last year, 58% of smartphone users engaged in multiple online sessions per day on their mobile devices. With so many people using their smartphones to access mobile content repeatedly throughout the day, businesses no longer have the luxury of asking "if" they should implement a mobile website.

Instead, the question becomes "how" to implement a mobile website, and the best way to do so successfully. There are two main strategies when it comes to mobile website development: adaptive web design and responsive web design.

While there are some who view these terms interchangeably, in reality they are quite different from one another, each having its own pros and cons. In this post, we'll explore the basics of good mobile web design, and how adaptive web design and responsive web design handle these fundamental requirements.

The Goals of Effective Mobile Web Design

It goes without saying that effective mobile website design is user friendly, but what do we mean by that? At its most basic, effective mobile design must accomplish three broad goals:

  1. Informational: It must provide the visitor with the expected information.
  2. Navigational: It must provide the user with expected options.
  3. Usability: It must provide the user with expected functionality.

The ways in which to accomplish these goals may vary, but the desired end result is always the same – an easy-to-use site that gives the visitor the right information and the ability to take meaningful action once the information is found.

The Responsive Web Design Approach
Responsive web design is so named because it "responds" to the browser the website visitor is using. By defining various breakpoints in browser size, the layout will change to suit the available space. Responsive web design is best-suited to informational pages, and is often used when website owners need a fast way to make their site mobile. 

The Adaptive Web Design Approach
By contrast, adaptive web design requires the use of server-side technology and is a bit more complex. The adaptive website will detect the user's device, and present different versions of the site based on the type of device being used – for example, a cellphone versus a laptop computer. 
This approach requires a greater investment of resources, but provides additional benefits over responsive design such as:

  1. A faster experience with loading optimized for the device
  2. Better functionality integration, such as use of touchscreen gestures and common apps such as mapping or click-to-call.

For adaptive web design to be most effective, developers need to conduct careful planning around the needs and expectations of users who are browsing the site from different devices, and create sites that address these needs directly.

Which to Choose?

While both responsive design and adaptive design provide a better mobile experience to users, adaptive web design offers a tighter integration between user expectations and available functionality. If the resources are available for adaptive web design, it is our recommendation that companies take the time and effort to create mobile-specific versions of their website.

For those businesses with large sites that have extensive amounts of content, or businesses that cannot afford to invest heavily in web development, responsive web design offers a viable means to give website visitors a satisfactory mobile browsing experience

If you need help deciding between adaptive web design and responsive web design for your own site, get in touch. We have experts waiting to discuss ways to help your business tap into the mobile marketplace.

Source: Our Mobile Planet – Google

Need a new mobile-ready site ready for 2017?

Contact one of our friendly professionals to review your needs. We'll help you improve the quality of your mobile website right now and keep it running smoothly in the years to come.