Because of the mass adoption of mobile technology around the world, most users visit websites on smartphones and tablets rather than desktop and laptop computers. This means that web developers now have to ensure they cater to the mobile user more than ever before. These users expect web pages to load up quickly and efficiently while offering just as much information as they would receive on larger screens.
Developers can use several approaches when attempting to cater to their mobile visitors, but the most common is Responsive Web Design and Adaptive Web Design. Both give mobile viewers a better user experience, but which is the best for your website? This article will take a look at both approaches, let you know how each works, and ultimately, give you the information needed to make up your own mind.
Responsive Web Design (RWD)
The most popular approach is to use responsive website design. HTML5 technology within web browsers automatically detects the size of the browser window being used to view a webpage and makes changes according to that information. Try adjusting the size of your browser on certain websites, and you will see how this technology automatically alters how the content is displayed. It essentially comes up with the best fit possible for the device trying to access the content. Using a fluid layout, the technology simply moves, resizes, and rearranges the content on a page so that it fits the screen of the user’s device. Many major websites use this technology, including CNN and Starbucks.
Adaptive Web Design (AWD)
Adaptive Web Design is another approach commonly used. Rather than letting the web browsers detect and decide the best arrangement of the content on a screen, adaptive web design uses pre-determined and designed fixed layout sizes. Generally, there will be a different website design for six of the most common screen sizes. Most devices use 320, 480, 760, 960, 1200, or 1600 pixels when displaying a web page. Designers will design each page themselves so that when a particular screen size connects, the website knows which version of the page to display. Two popular websites that have embraced this technology are Amazon and About. com.
Which is the Best Approach for you?
Each approach carries pros and cons, but many of you might prefer the more convenient responsive web design. There is less work on your end and you do not have to design many versions of each web page. Responsive web design lets the technology within web browsers handle all the work.
Plus, Google has come out in the past and claimed that responsive web design is their preference. To back up this claim, the search engine typically ranks websites that use RWD, higher than those that use AWD.
The biggest con to using responsive web design is that the pages may be heavier in terms of file size. Using AWD, you can fine-tune each page to suit each device. You could remove certain images and other content to ensure faster load times. Of course, you could still mitigate this issue when using RWD. Just use a mobile-first focus and create an effective website in the first place. Design your website to feature fewer images and other media, and your mobile viewers should not experience too many issues.
If you have the time, the adaptive approach certainly has its benefits. You can create perfectly optimised web pages for each screen size that might view the website. It also allows you to analyse the types of devices that visit and determine that you get more viewers at some sizes than you do at others. In some cases, you might find that it is worthless to continue developing new pages for devices of certain sizes – to save you time and money.
The problem is, the biggest benefit of AWD is also the biggest disadvantage. You essentially need a new page for each of the layouts. This can create a lot of work, especially if you have a large website with dozens of pages. If money is no object, of course, and you want to tailor the best user experience possible, AWD is certainly worth considering!
The Takeaway
The approach you use will come down to your own needs, but you will certainly have to use one of them if you want to cater to your mobile visitors. If we had to choose one approach, it would have to be a responsive website design, and that is mainly because of its convenience and the all-in-one solution it provides. There is no messing about with layouts, and you just let the browser technology get on with it. Plus, all major browsers support HTML5 technology, so there will never be an issue whereby certain viewers have a poor user experience.
