Responsive web design is one of those terms you often hear about now and then, but seldom stop to explore. However, as the need to make responsive websites becomes ever more apparent, it’s something every website will need to consider sooner or later.
What is responsive web design?
Simply put, responsive web design occurs when a website is designed to dynamically adapt its content to any screen size or browser window, including both scale and ratio, without having to reload the page.
In other words, if a page can be rendered correctly on any device or screen size without manual input from the user (such as reloading, scrolling or zooming in/out), then it can be considered responsive. When it comes to specific technologies, HTML5 and CSS3 media queries are important tools for ensuring responsiveness from a single website.
Speaking of technology, it’s important to note that responsive web design uses the same stylesheet (an important web language) rather than serving different stylesheets for various devices. This latter approach is adaptive web design (sending the user to specifically adapted sub-domains within the same website) and, as you’ll see later, is quickly becoming disadvantageous in today’s world.
Why is it important to make a website responsive?
A multitude of devices. With one responsive stylesheet, you can cater to new devices and screen sizes instantly. Without responsive web design, you would have to manually design, build, and cater to every possible device out there.
Changing screen sizes. Many people will often rotate their phone to view content. Likewise, people often change the size of their browsers based on other activities they might be doing. A responsive website can adapt to these changes, which keeps users happy!
Consistency between devices. By having the same content load on every possible device, your website is as consistent as possible. This is important for users who may try to use your business or service across different devices.
However, there’s also one more factor to consider, which is worth discussing in a little more detail...
Mobile-First Indexing - a key driver to make websites responsive
Traditionally, when it comes to Search Engine Optimization, websites have relied on the strength and quality of their desktop versions to survive on search engines. This is often what leads to poor quality mobile sites, as they were being ‘indexed’ by Google based on the larger, more refined desktop version.
However, this is changing - websites now need to reflect the same content and quality experience on their mobile and desktop sites.
In March 2017, Google first announced its Mobile-First Index, which has been consistently rolled out to more and more websites. By September this year (2020), Google has stated all websites will be crawled and ranked via their mobile-first index.
A responsive website resolves this by ensuring that, no matter what device or browser Google’s indexing process might use, your website loads content dynamically and to proportion.
Benefits of Making Websites Responsive
So, other than mobile-first indexing, why should you create website responsive designs as the default? Well, there are a number of key advantages to utilizing the responsive approach, all of which help your business achieve its goals, whether through cost-efficiency or user-friendly factors.
A Consistent Experience Across Devices
As we’ve already mentioned, people often view your website on numerous devices. If you make your website responsive, they’ll have this same familiarity and intuitive feeling, regardless of the device used.
Flexible and Future Proof
On a similar note, if you make a website responsive designs with flexible layouts and breakpoints, you’re effectively catering for any new devices that hit the market. You don’t need to reconfigure or modify the website when the next iPhone hits the market, for example.
Improved SEO
Mobile-first indexing will be the new standard for how search engines crawl and rate websites. If your business model relies on SEO and organic traffic, then adapting to this change is a must. A responsive website will always load content correctly, which enables search engines like Google to crawl all of your content more easily.
Improved Analytics
Unlike an adaptive design, a responsive web design ensures every user sees the same website and goes to the same URLs. From an analytical point of view, this means you can look at user data overall, while still also being able to breakdown users via the device, if necessary.
Easier To Maintain
If you create responsive websites, you will also need to provide ongoing support for them, such as updating content or even adding new pages. Fortunately, because the website is loading the same content dynamically, this makes responsive designs much easier to maintain and provide ongoing support for. Tasks don’t need to be duplicated for different devices, screens, or ratios.
Cost-Effective
Thanks to many of the above benefits, a responsive web design saves time by ensuring tasks don’t need to be duplicated. Because content is loaded dynamically, there’s effectively only one design at work, which means only one team is needed.
Drawbacks of Making Websites Responsive
Of course, no option is ever perfect. While there are numerous advantages to responsive website design, there are many downsides that we need to keep in mind - and even mitigate, when we can.
Backward Compatibility Limits
To get the most out of responsive design, most websites use a singular HTML5 structure, as well as CSS3 media queries. Because these are relatively new technologies, many older browsers are unable to support them. In these cases, the website or page can be rendered incorrectly.
However, this is an issue that is becoming less and less important, as these older browsers (be it web or mobile) are gradually dropping out of use.
Slow Loading On Mobile
Compared to a dedicated mobile site, responsive design takes longer. Similarly, a responsive design can also load longer than a traditional website if you have excessive amounts of components to load and resize.
Slow loading time can lead to unhappy users, bounce rates, and other customer abandonment issues. Loading times are also something Google recommends improving, so it could also impact your SEO potential as well.
To solve this, you need to be smart in your design choices. From file types and sizes to simply designing your pages with mobile in mind first (as opposed to desktop), you can counter a lot of these factors.
Device-specific limitations
When designing for any and all devices, there are a lot of hardware and input limitations, other than just the screen. For example, most devices don’t have a keyboard, so a user-friendly approach will minimize the need for one. Likewise, desktops don’t have GPS, touch screen controls, or any of the other features a smartphone might take for granted.
These are, thankfully, issues that can often be resolved with some smart decision making. Use clear buttons rather than text links where possible - and don’t scale them down too much. These large, visual buttons are much easier to use on a touchscreen than small text links.
Good practices for responsive web design
If you want to make website responsive designs, it helps to have a refined, focused approach. Here are the most critical factors to effective responsive design.
Flexible Layouts
It goes without saying that a smaller screen simply can’t display the same amount of content as a larger screen. As such, a core principle of any responsive web design needs to be a flexible layout that shifts the order of elements to ensure it fits onto the screen without shrinking everything down to unreadable sizes.
Typically, this is done by using percentage-based parameters. For example, content that would be displayed side by side will be displayed in several rows, if necessary, to avoid breaking these percentage changes (which would make the content too small to read or view easily). This is most often done by moving content from left-to-right to top-to-bottom (WordPress, for example, typically does this), but more specific designs can prioritize the most important factors if needed.
We often achieve this with breakpoints. These points can tell the website to be loaded differently based on the screen size or dimensions. For example, when a certain threshold (the breakpoint) is reached, the website will load content in more or fewer columns, depending on the breakpoint. With an adaptive CSS, this is easy enough to achieve and ensures that screens of various size groups are loaded correctly. If we know a certain width can handle one or two columns at best, the breakpoint is how we ensure it.
For example, if we look at the TransferWise website - specifically, the home page - we can see that the conversion form, which appears on the right of the desktop site, stays above the fold (the first screen) on both tablets and mobile devices. The website is dynamically loading the content to each screen, including flexible layouts, but this one section is prioritized due to its importance.
Switching between devices or screen sizes, we can also see various breakpoints and the flexible layout working together to respond to these changes.
Responsive Units
As part of the flexible layout, responsive units are also necessary to make the website responsive designs. These are components that can scale as needed - including by changing their ratios.
This can be important for numerous reasons. For example, large images on a desktop are often wrongly sized for tablets or mobile screens. A responsive unit will shrink and crop the image accordingly.
Furthermore, we can also ensure these components are relative to each other when needed. If two components need to be side by side, we can use percentages to ensure they both fit on the screen equally, rather than relying on their default size (which would require the user to scroll or zoom).
If that wasn’t enough, we can also add maximum and minimum values, to ensure no particular component is stretched or squished too much. This ensures everything stays visible and viewable - there are no freak, niche cases where an image or element is stretched too wide, for example.
Dynamic Navigation
Desktop and mobile devices browse websites very differently. The former has a lot of screen-space to play around with, so it can rely on a traditional menu, while the latter’s smaller size leads to the creation of the ‘hamburger menu’ that’s so common today.
While some sites have simply switched to the drop-down hamburger menu for all variants, you can still create responsive website designs that do both. As we’ve already covered, we have dynamic layouts and units that respond to the size of the screen. This time, we swap out the navigation based on these parameters as well.
If you want to see this in action, IBM has a great example. Due to the organization’s size and scale, its menu has a lot of different pages and sections to explore - naturally, too much to fit the traditional menu on a mobile device. So, when we switch devices, their website recognizes the smaller screen and swaps to a hamburger menu instantly!
Bitmaps or Vectors?
From a frontend point of view, the right image type can really help make website responsive designs work. Specifically, we need to know when to use bitmaps or vectors.
Bitmaps are a form of raster graphic and the most common image types. JPEGs, GIFs, and PNGs are all rasters, for example. In rasters, the colors are mapped onto a grid or data structure. In other words, each bit is individually mapped (hence the name, bitmap). This keeps the file size relatively small (larger images have larger file sizes, naturally), but means that these images can’t scale up relatively well.
Vectors, on the other hand, don’t use bitmapping. By using graphics and equations, they convert the image into calculations that work at any scale. This ensures the image’s quality is retained but comes at the cost of larger file size.
Websites traditionally use bitmaps to save on loading and, for the most part, this is still true. Many elements don’t change size that much, such as buttons, icons, and other features, and bitmaps are useful here. For animations or more splashy graphics, a vector may be more useful. Knowing how to deploy each, while still keeping performance optimal, it is important to make website responsive projects user-friendly.
TL;DR Should You Create A Responsive Website?
Responsive websites are increasingly becoming the norm - and for good reason! Whether it’s meeting Google’s mobile-first index, ensuring customers have a smooth experience across all devices or even streamlined your website so that one source meets all device and screen requirements, there is a clear need to make responsive websites in today’s business world.
