In the past, all users would view web content through traditional desktops; these fixed pages had no need to modify themselves for varying screen resolutions. Now that smartphones and tablets are widely used, it is essential for developers to design sites which are compatible with mobile devices. With the current range of technologies offering so many different screen resolutions; websites have to accommodate, so that users can clearly interact with a page. Similar to most professions, web developers have created common practices that are used in the industry. Two of these practices are known as responsive and adaptive design.

Adaptive web design is the process of creating a webpage; so that several different templates are created by the developer and the closest resolution match will be used for that screen.

Responsive web design is the process of creating a web page so that it will adjust to the smallest screens, the largest screens and all screen resolutions in between.

Adaptive design

Adaptive design uses multiple layouts to display content across devices. These layouts are placed as several different templates, which are set for certain screen resolutions. A simple design could have three templates; to cover desktop, tablet and mobile users. These three templates can be designed so that different content is shown on each device. Any screen resolution in between these templates will adjust to the most suitable. Although adaptive designs are very good for a resolution which matches that of the template, they can struggle to adjust to a resolution which falls in between.

Adaptive design works best on screens which the site is specifically made for. The main problem developers’ face is that with so many different screen resolutions available on today’s market, it’s not practical to create templates for all; this is where responsive design is needed.

Responsive design

The basic concept of responsive design is that it is not practical for web developers to create a template for every resolution available, there are just too many. A responsive site uses a single layout; although it does not offer the same control as an adaptive design would over a single layout, it requires much less work to implement and maintain.

Web pages are built from grids which are formed from rows and columns. Fluid grids are the name given to a grid which is coded to respond various resolutions; flexible images also follow suit.
Media queries allow a site to inspect the physical characteristics of the device in use; such as device width, height, resolution, orientation and aspect ratio. By using fluid grids, flexible images and media queries throughout a web page, a responsive design can be achieved.

 

What to choose?

“If the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach” – Ethan Marcotte, “Responsive Web Design”

When building and designing a webpage take into consideration what your target audience’s needs. Google Analytics gives a great insight into the devices your audience are using; this data can then be used to build your site around. For example, if your site has a large audience which uses a wide variety of devices, then a robust responsive design will accommodate most of their needs.