A responsive site is a website that will adjust an element’s width, height, and layout depending on the screen size of a device. These elements could be font-size, image size, and even the page layout.
Take for instance this website, the desktop view would look like the following:
In comparison, this is the mobile view:
Notice the following changes:
- The menu has changed from a full Navigation Inline to 3-dots.
- Font size is different
- The layout is adjusted from a wider to a longer view; sometimes two side-by-side images in a desktop view will change into a top-down layout.
To most people, that is the definition of a responsive website. Hands dusted, box checked, and work done. But far from it…
1. Loading Time
Loading time, in my humble opinion, is by far the most neglected aspect of a website. Most sites have responsive layouts but there is no consideration given to the fact that a mobile device has a lot slower and unstable bandwidth compared to a desktop computer, plugged into a Local Area Network.
Let me illustrate using Google Page Speed Insights:
Notice the website takes 0.8 seconds to load on a desktop. In contrast, it takes a lot longer to load on a mobile device.
Here are some suggestions on how to improve load time:
- Use the appropriate image size. Optimize the image specifically for web use.
- Remove unnecessary CSS code. Use only the CSS required for the page, not for the entire website.
2. Significantly Smaller Estate
Most modern smartphones have a viewport width of about 480px (plus-minus a bit). A desktop monitor is a significantly larger viewport but for ease of reading, the content is typically limited to 1200px (as it is not comfortable for the eye to scroll across greater width).
So we are dealing with a viewport width difference of about 2.5 times. To put it into a rough perspective, a sentence that appears as one line on a desktop will be shown as two and a half lines on a mobile device. If your paragraph has 4 lines, it will be shown as 10 lines on the mobile device.
The significance is in the amount of scrolling. Will the visitor read if it is too long? Is your important content positioned at the bottom of a page?
There is an ongoing debate about long-form vs. short-form content. Regardless of the arguments, it is important to remember that the attention span is generally regarded as getting shorter. Yes, some content needs to be in long-form (i.e. plenty of scrolling) and some must be in short-form. Be intentional over the amount of content.
3. Mobile Interface
Many responsive websites fail to realize that the mouse hover action does not exist on a mobile device.
If you are on a desktop, use the mouse to hover over the box. It will flip:
This is a common desktop user interaction but not so on a mobile device. The hover over does not exist on a touch screen. You have to tap over it. A flip box, like the above, is commonly missed.
So you really need to choose your interface elements carefully. Visitors will not spend time to explore all your UX interface elements.
Keep your responsive website simple. This is a mobile device with reduced real estate, smaller bandwidth and different user interface.