5 Traits of a Truly Responsive Website

Mobile phone with colorful squares
The importance of mobile devices to a website's success cannot be ignored.

Do you have a “responsive website”? This is a site with a layout that changes based on a visitor’s device and screen size. Responsive web design is now an industry best practice. It is recommended by Google and found on millions of sites across the Web. There is, however, a big difference between having a website that simply “fits” on different screen sizes and having a site that is truly responsive.

I routinely see companies redesign their website and push out a press release extoling the virtues of their new mobile-friendly design. When I visit those sites, what I often find is a layout that does indeed scale and change to fit on different screens, but that is as far as they take the idea of responsiveness. This is not enough.  A truly responsive website does more than just scale to fit a smaller or bigger screen. On these sites, you will also find the following important traits.

1. Optimized Performance

No one likes to wait for a website to load, and when someone is using a mobile device with a connection that may be less than ideal, the need for a site to load quickly is even more important.

So how do you optimize your site’s performance? If you are starting with a new site as part of a redesign, then you should make it a point to create a performance budget as part of that project. If you are working with an existing site and are not starting from scratch, the first step is to test your site’s performance to see where you stand today.

Once you have a baseline of where your site stands performance-wise, you can begin to make the necessary improvements to increase download speed. A great place to start is probably with your site’s images. Too-big images are the #1 culprit when it comes to slow loading sites, so optimizing your images for web delivery can really help your site from a performance standpoint.

The reality is that improved website performance and fast download speeds are a benefit that all visitors will appreciate. After all, no one has ever complained that a site loaded “too fast”, but if a site takes too long to load, it will absolutely turn people away whether it responsively “fits” on their screen or not.

2. Smart Content Hierarchy

When a website is displayed on a large screen, you are able to lay content out in a variety of ways because of the substantial screen real estate available. You can often fit important messages and images, news updates, event information, and site navigation all on the screen at once. This allows a visitor to easily and quickly scan the content of the entire page and decide what is important to them.

This scenario changes pretty dramatically when you take that site design and transform it for small screen devices, like a cell phone. Suddenly you are working with a fraction of the screen real estate you had before. This means you need to decide what will appear first on the site, what will follow it, etc. Instead of everything being seen at once, you likely only have the space to show one or two things (one of which is likely navigation). This means that decisions of hierarchy need to be made. Unfortunately, what often determines what comes first on the screen, and then second, etc. is the way the page itself is coded. It is easiest, when building a responsive site, to display whatever is first in the code first on the screen, followed by the second item in code and so forth.  Unfortunately, what may be most important on one device may not be as critical on another. A truly responsive site understands that the hierarchy of content should change depending on different situations and it should be smart about what it displays where.

Improvements in CSS layout techniques, including CSS Grid Layout, Flexbox, and more, allow web designers and developers more options when it comes to intelligently laying out content, instead of being hamstrung by the exact order of content areas in the HTML code. Taking advantage of these new layout techniques will become even more important as the device landscape, and the needs of our site’s users, continues to evolve.

3. Experiences That Take Into Account a Device’s Strengths and Weaknesses

Staying on the topic of devices – each device that someone can use to visit your site has both strengths and weaknesses that are inherent to that platform. A great responsive site understands the capabilities and limitations of different devices and uses them to create customized experiences that are best suited to whatever device a visitor may be using at that moment.

For example, a cell phone includes a number of features that you would not find in a traditional desktop computer. GPS is one example of a mobile-centric feature (yes, you can get general location information on desktops as well, but device GPS is much more accurate).  Your site may use GPS information to smartly send a person very detailed and specific step-by-step direction information or special offers based on exactly where they are at that moment.

Another example of this principal in practice would be a site that understands what kind of screen display you are using and sends images that are best suited to that display. If you have a screen with a high pixel density, you may decide to send higher quality images to that screen. These same images would be pointless on a less capable screen, however, and the extra quality would be lost while the extra file size would be downloaded for no actual reason.

Really great responsive sites consider the entire user experience and work to tailor that experience based not only a device type or size of its screen, but other important aspects of the hardware as well.

4. Content With Context

Initially, responsive web design received its name because of the idea of a site’s layout responding to different screen sizes, but you can respond to so much more than just screen size. Building on the previous example of using a device’s strengths and weaknesses, you could use those, as well as other data like the date and time, to really customize a website experience.

Imagine a website for a large trade show event. While a responsive website will change the layout of the pages of the site to scale with different screens, you could also use the date to determine what content is most important to display.  If it is the period of time before the event, you likely want to prominently display registration information. If, however, the event is actually happening at that moment, registration may not be the most important content. Instead, you may decidethat the day’s schedule of events is more critical since it is more relevant to that user’s immediate needs.

Taking things a steps further, you could tap into a device’s GPS to determine where they actually are at the trade show. You could give them interactive content based on their location, showing them nearby booths or sessions about to get started.

5. Accessibility

The final example we will look at for how a site can truly respond to a visitor’s needs is to think about website accessibility. Websites should be able to be used by as many people as possible, including those with a disability. Your website should be able to be used by someone who needs a screen reader or other assisted software to access its content. In this way, your site is responding to their needs because you have ensured that the experience, while different for disabled visitors, is still appropriate.

By responding to as many data points as possible, and not just screen size, a website can be so much more than just “mobile friendly.” It can become a truly responsive experience in every sense of the phrase.