When building a new website, there is much to consider when planning out the design and user experience, as you may have read from our blog last week on “User Experience: Developing a Top-notch Practice & Process.” Aside from the user experience, one of the key things to consider when building the site’s interface is whether the site will be responsive, adaptive, or have a standalone mobile version separate from a desktop version. Each option has its pros and cons, and I will go through the positives and negatives of each approach.
Responsive Web Design
A responsive site utilizes Responsive Web Design (RWD), which means that both the site design and development should be reactive with the user’s environment and behavior. No matter what device, screen size, and purpose, the site should be designed and developed to respond and adjust. Responsive design is now the base choice for website design and is even the preferred format for most search engines.
Today, most modern sites use responsive design for its ease of development and its ability to respond to all environments the user may present. Each component of a site would be able to resize or change based on the size of the screen. It also may be useful to hide some components at lower screen sizes for a better experience.
One of the problems that may occur when developing a responsive site is optimizing images. Images are only scaled-down on responsive sites, so loading large images may create a slower load time for users. This can be worked around by using different-sized images for breakpoints.
If you want a more app-like experience for mobile, you will have to take into account any functionality that may be broken from changing the layout between mobile and desktop. While the development of responsive sites is less difficult overall, a pitfall is the amount of effort it may take to create a layout that fits all possible environments.
Adaptive Site Design
An adaptive site is designed and developed to conform its styles to specific viewports (screen sizes). Using CSS media queries, adaptive sites have styles set for different breakpoints, typically defined by analytics on the devices and screens. Some common breakpoints used are:
- 320px or 480px for mobile devices
- 768px for tablets
- 1024px for smaller screen likes laptops
- 1200px for desktops
- 1200px+ for large screens
At each of these breakpoints, site elements will be designed differently to be able to display properly for common devices.
This approach works well because of the level of control over the site’s layout based on what device is being used. In comparison to responsive site design, adaptive falls short when it comes to the ability to define each layout supported. This means that devices that don’t fit the adaptive design breakpoints will likely not display as intended. Adaptive design also assumes that each layout will contain different HTML and CSS, so it requires maintenance breakpoints.
Mobile-Only Standalone Site Structure
You may have seen this technique used on sites that utilize a subdomain, like m.example.com. Users on mobile devices will be redirected to the subdomain so they can view the mobile version of the site. The desktop version would be the URL without the subdomain. This technique was used often before responsive web design was created.
This is a very useful site structure if you want to have more control over what users see on mobile. With this design, you can customize the mobile experience and design elements (separate from desktop) like videos, images, and even navigation specifically for mobile devices. This method also allows for faster load times.
Although a mobile-only site has its advantages, it should be used carefully since SEO issues could arise from the content being drastically different on the mobile and desktop versions. Another con is the issue of maintaining both the desktop domain and the mobile subdomain. This could bring up consistency issues for a brand.
So, What Do We Recommend?
Overall, we recommend and develop the use of responsive web design in most use cases since it requires maintaining a single site that is built to handle most environments and screen sizes compared to adaptive and mobile standalone sites.
For more information or questions on how your brand could benefit from responsive web design, contact us today. We will have one of our talented Web Developers or User Experience Architects get in touch!
