A necessity of modern website design is understanding how to deal with the ever-increasing number of visitors viewing your website on a mobile device. But, unlike a desktop computer where you can count on at least a minimum screen size, mobile devices come in all shapes and sizes from 5”-7” phones and phablets, and the 7”, 10”, and larger tablets. Assuming you don’t want to ignore half of your audience, making your websites “mobile friendly” is a necessity. Luckily, there are two design philosophies supported by both desktop and mobile browsers that developers may use to make this happen—adaptive and responsive design.
Adaptive Website Design
Adaptive design involves coding website layouts for multiple screen resolutions. With adaptive design, the browser will identify the device’s screen size and display the design that matches that device. This technique has several advantages.
- You have detail-level control over each specific layout; so a site running on 480 pixel displays will always appear the same.
- You have the ability to craft each size of your website, so you may reorganize or remove content in order to make it fit on each device. For example, the desktop version could have a large, high-resolution background image, large font, and a navigation side bar. The phone version could have a solid color background, a smaller font, and the navigation under a mobile popup menu.
- You can re-write or modify the content (text, images, media, etc.), adapting the content to each device/size. For example, a mobile version of your e-commerce website may not have the entire biography of your staff, but only a summary sentence of each member.
Responsive Website Design
Responsive design develops a website that adapts its layout for each viewer’s screen resolution.
- The browser will use the device’s screen size and—following the rules coded on the website—will re-sort and resize content on the website to fit on the device’s screen.
- With responsive design the website’s layout will move, resize, show, and hide elements based on the screen size. You don’t have as much control over where content will display, but the instructions should guarantee that it will fit the screen’s resolution. The various content elements/blocks will flex and move to keep the content on the screen (or remove some content items, if necessary.)
- Responsive website design has the advantage of a single version of the code to power the website, and should largely accommodate new sizes and screens.
In spite of its advantages, responsive website design can be more difficult to develop because you have one global version of the website code that will be interpreted on the different platforms, based on the screen size. This generally means you have much more testing to perform in order to ensure that something looks and works well on an iPhone 5, a Galaxy Tab tablet, a Nexus 6P, a 12” laptop, a 22” desktop monitor, etc. And since you have a single version of the web site, the page content is the same across all of the devices. While you may hide and reorganize the content (e.g. remove an animation and move a side bar below the content on a phone version), all of the content is still downloaded and a part of the page.
Adaptive and responsive website design both use the HTML 5 and CSS 3 web standards. And, from the customer’s perspective (and their browser), it doesn’t matter how the content is delivered. A website designed and coded using adaptive design can be made to appear just as well as a site designed using responsive, and visa versa.
While these days we usually develop responsive websites, it's best to consider the options. If you’d like to explore whether adaptive or responsive website design is best for your purposes, please don’t hesitate to contact us. We’ve been designing and redesigning websites for two decades and would be happy to offer you some advice.
