mobile-analytics

Important points of a good responsive website

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:

Desktop view

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.

Mobile view

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.
  • Remove unnecessary JavaScript code. If there are JavaScript animations, consider removing it for a mobile view.

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:

Mouse over to flip

Yay... It flipped!!

Learn More

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.

Conclusion

Keep your responsive website simple. This is a mobile device with reduced real estate, smaller bandwidth and different user interface.

Summary
Article Name
Important points of a good responsive website
Description
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. But even more important and often neglected are the issues of Loading Time, Smaller Estate, and using appropriate Mobile Interface.
Author
Publisher Name
Mustard Tree Technologies
Publisher Logo

Get future articles in your Inbox

Sign up to get email updates of our latest technical insights.