A responsive website is one that conforms to the device or screen it is viewed on.
In other words, if you view the site on a mobile device or tablet, it will automatically adjust to that screen size, wrapping around the edges so you don’t have to scroll right/left, squint or zoom in closer to view the contents of the page more easily.
At the same time, when the same web page is viewed on a larger screen, such as a desktop device, it will again adjust to accommodate that specific size.
But just because a website adjusts to different screen sizes doesn’t make it responsive. In fact, there are other types of layouts – fluid and adaptive, in particular – which do just that, but aren’t responsive designs. So, how can you tell them apart?
Difference between a Fluid Website and a Responsive Website
Unlike a responsive web design, the overall width of a fluid website is primarily set by percentage, relative to the screen size. Therefore, when you view the page on a mobile device, the width adjusts to accommodate that space.
Although responsive websites are also built on a fluid layout, they make use of breakpoints, which shift things around to accommodate the size of your device.
Unlike fluid websites, responsive websites use special CSS settings, called media queries, to target these breakpoints and make the page flexible. Fluid websites, on the other hand, do not utilize media queries.
Difference between an Adaptive Website and a Responsive Website
Adaptive websites are sometimes built on a fluid layout, using percentages, but they may be built on a fixed layout with a set width, as well. Like responsive web layouts, they target different screen sizes with media queries.
However, unlike responsive web layouts, they are usually designed to work with predefined screen sizes. Therefore, if a new screen size comes into play, the layout may not confirm to the new size if there are no predefined settings in place.
Adaptive websites are also not as flexible as responsive websites because the settings are predefined. In order for the settings to be applied, the page must first detect the device and size, and then deliver the correct setting for that device.
Separate website pages are often created for the same site in adaptive design: one to handle smart phones, another to handle tablets, and another to handle larger devices. So, in the long-run, you create variations of the same website to cater to different devices.
You can follow two approaches when designing a responsive website – the mobile-first approach or the desktop-first approach.
In the mobile-first approach, the website is designed for mobile devices first, and then we work our way up in size, to tablets, desktops and so on. In the desktop-first approach, the site is designed for desktop devices first, and then we work our way down in size.
Why Are Responsive Websites Important?
Responsive websites are designed with the user in mind. They use breakpoints and media queries to target those screen sizes, so the page adjusts to fit that particular size when a breakpoint is reached.
With a large number of users now viewing content on their smart phones, it’s more important than ever to cater to their needs.
A Responsive Layout is not for Everyone
With that said, not all websites should be turned into responsive layouts. Some examples include:
- Websites with readers who primarily view the site on a desktop device. You can determine this amount by checking your web statistics. If 10% or more of your customers/readers use smaller devices, then a responsive layout may be a good idea. However, if 91% or more use desktop devices, then a responsive layout not be feasible for your business at this point in time.
- Websites with heavy graphics or Flash. Heavy media files, graphics or Flash take longer to load, which can be a deterrent for your readers, who are already on the go and are most likely, seeking fast-loading content.
- Websites where most of your content won’t work when it’s scaled down. This may include pages, such as template websites, where the user has to click on a thumbnail to view a larger version of the page or test functionality.
- Websites that need to be built quickly and on a low budget. Because of the amount of coding that’s involved, a responsive layout often takes much longer to design. And as such, it costs more. In fact, a responsive website may take twice/thrice as long to build than its non-responsive counterpart, and it can cost twice/thrice as much as well.
Responsive Site Considerations
A responsive site, not only considers the size of the main content of a page, but other elements on the page as well, including but not limited to:
- The font size, making text smaller or larger to fit the particular device.
- The image size, ensuring that it’s not too large or small, but relative to the device size.
- The aspect ratio and device aspect ratio, ensuring that the width of your video or image is proportional to its height.
Food for Thought
Responsive sites are relatively new and have only been around for a few years. With screen sizes and options changing for smart phones, etc., responsive web design will continue to evolve to meet those needs, and developers will continue to find ways to improve existing processes.