Born out of the need to ensure that websites look great and work well on a wide variety of devices, platforms and browsers, responsive web design has been hailed as the next trend for building websites.
One of the biggest claims about responsive design is that it can save considerable amounts of time. But, it also has many complexities that marketers need to be aware of. Let’s take a look at whether you’re really able to save time with responsive design and benefit, or if its challenges don’t really simplify the complexity of getting your content across multiple platforms and devices.
Responsive Web Design Is More Complex Than You Think
Responsive Web Design (RWD) is an approach to website creation that makes it possible to build one main site that will work on many different channels regardless of the device (smartphones, tablets, laptops, etc.), platform or browser.
For my own definition, I like thinking of RWD as having two paths: responsive “code” design and responsive “creative” design. One makes RWD possible – with a single code base. The other gives the code the visual layout and assets to create it.
The timesaving idea behind RWD, and often a misconception, is that you only have to design your site once and it will detect a visitor’s screen size and orientation and change the layout to fit that screen.
But, it is a mistake to think of RWD as a “design once” tactic where the text and images simply expand or minimize to fit screens. Compared to their desktop counterparts, mobile and tablet sites have unique UI requirements. RWD takes into account not only the size of a screen but also, more importantly, how the user expects to interact on each platform. For example, replacing swipes for clicks for navigation, or the amount of copy you expect users to read, must be accounted for.
So, it’s important to note that RWD doesn’t replace the need to plan your information hierarchy and creative layout. It is very essential that your designer considers the user experience and creates a UX document for every channel to survey the content and streamline its delivery.
Responsive Design Can Save Time and Money, But within Reason
However, with the right planning, RWD can allow for some efficiency because a designer will not have to create all new content for every channel you want to reach. Instead, they simply need to adjust the amount and layout of the visual content they’ve initially created. From a responsive “code” design perspective, programming and deploying stand-alone code for multiple channels is not required. Efficiency is gained because one “set” of code can account for the additional channels, allowing for a single code change to migrate across every channel.
By using one code set on the back end, analytics can also be a bit more seamless as they have one set of metrics for all users on all devices. If you choose to not go the RWD route, then you’ll have to design and code separately for three channels (micro, mobile, tablet) and take extra care to keep the analytics consistent across all environments.
After taking a deeper dive into the challenges and opportunities of RWD, we still feel that the pros outweigh the cons, but it’s important to remember that smart web design is always about the end product and great content. Here are some tips to maximize RWD to its full potential while not sacrificing your layout or content:
- Plan your breakpoints: A breakpoint is the stage where media queries are used to make changes to your layout based on screen size. A good rule is to plan for the smallest mobile screen and make your content look good. Move up in size until the content starts to look compromised and then adjust the layout to look good again. Keep moving up the chain.
- Don’t hide too much content: Being mobile does not mean you need to sacrifice great content – your mobile users are expecting the best. Really think through what meaningful content they should be able to access, and don’t just hide the content to adjust to the smaller screen. Plan for that screen accordingly and make sure you’re still giving your user a great experience.
- Don’t just use the desktop view for mobile screens: Leaving all your content from your site on the mobile version is too much. Load times will take longer, making for a poor user experience. It’s a fine balance, but don’t feel the need to put it all out there as it gives your mobile users too much stuff to wade through.
I believe RWD represents a significant and worthwhile shift in the way we design and build sites for the omnichannel web. And it can provide a consistent and integrated user experience that brands want and users expect.