If you are involved in web design, web development, or digital marketing, you know that websites have to be built for mobile viewing. Users today have several mobile devices and an equal number of expectations about how they want to view their content. According to a Gallup poll, 81% of smartphone users say they keep their devices near them almost all of the time during waking hours. Given that 41% of us check our devices multiple times per hour, that yields quite a few interactions each day. When it comes to building for mobile, designers and developers have a few choices. They can work with the flexible responsive design or the customizable adaptive design. How do you know which to choose? Here’s a primer.
Responsive Web Design
As its name implies, responsive web design responds to the size of the browser with the goal of creating an optimized experience for the viewer, regardless of which device is being used and what size it is. Responsive design takes into consideration that, in addition to handheld devices, people are also viewing content on large desktop monitors, so content and images have to resize accordingly. Responsive design is intended to be everything to all devices through the use of fluid grids and media queries. Fluid grids are designed with proportional widths and heights so that they can expand and contract, if you will, based on the display type and size of the user’s screen. The CSS3 media queries act as the messenger to gather data about the user so that CSS styles can be applied based on the device. Responsive design is considered a client-side approach since it sends all of the information to the browser, which is then tasked with automatically resizing the website to each device.
There are many known benefits to responsive design, and developers and designers are the winners here for a number of reasons. First, responsive design websites work using only one template, so they are quicker and easier to build and maintain. Second, popular CMSs such as Drupal, WordPress, and Joomla have responsive design themes which is a bonus for developers who are less experienced. Finally, responsive design allows those who are building the site to work with familiar tools such as HTML and CSS, so there is little or no learning curve. The one noted downside to responsive design is that loading times suffer, because all of the information is sent to the browser, regardless of if it’s needed.
Responsive design was introduced in 2010 on the premise of turning away from a “device-specific experience,” though it looks like we may be headed that way with adaptive design. Adaptive design is touted as the next wave in optimizing for mobile, but it may not be as familiar to the masses. When comparing adaptive to responsive, one of the key differences is that responsive design is built using one template that is fluid and responds to the size of the screen. Adaptive design is built using several templates that represent the most common screen sizes, and they are snapped into place at defined points. Those templates are then housed on the server and sent as appropriate for the device. This means that users get a site that is more or less custom built for their devices. Some critics say that adaptive design is complex and that it requires more work, because developers have to create multiple templates for each possible screen size. However, those separate templates allow for more flexibility and they give developers an opportunity to personalize the user experience. Another benefit to adaptive design is that, since each template is held in the server and only the template that is needed is sent, loading times are faster than with responsive design.
Adaptive or Responsive?
So, which one should you use? Well, it depends. As you can see adaptive design requires a commitment of more time and resources across the board. However, the result is a website that is flexible, highly customizable, and has faster loading times. Responsive design, on the other hand, is very popular with a wide community of support, and it’s easy to learn and access through popular CMSs. The management and maintenance of a responsive site does not require a big time commitment, and all of your users will have the same viewing experience. As with all projects, the decision really comes down to understanding what your organization wants and needs from its website and what type of experience your users expect.
Please contact us if you are interested in a web strategy, responsive or adaptive web design, web development, or data integration project requiring our web designers and web engineers.