Responsive-web-design-tools Quora

Responsive Web Design Checklist for 2020

As smartphones and mobile devices continue to remain as the most widely-used platforms to access the internet, businesses pay extra attention to ensure that users get a seamless experience while accessing their websites on these devices. Google introduced the Mobile Page Speed Update in 2018 and you need to note that website load speed is now considered as one of the chief ranking factors for mobile search results. Responsive web design has emerged as a standard and today, most web design companies are creating responsive websites. It is by embracing a responsive web design that businesses can make sure that their websites look good and remain functional across all devices.

Leon William Hacker Noon profile picture

@ leon-william
Leon William

Digital Marketing Specialist at MAP Systems

As smartphones and mobile devices continue to remain as the most widely-used platforms to access the internet, businesses pay extra attention to ensure that users get a seamless experience while accessing their websites on these devices. However, not all websites are mobile-friendly, which means that most of the features of those websites would remain dysfunctional if they are accessed on mobile devices. And this boils down to the fact that visitors would not be able to optimally experience the benefits that your website is designed to offer and this will lead to reduced levels of user engagement and decreased sales.

Did you know that more than 50 percent of search queries across the world come from mobile devices? Based on this trend, Google introduced the Mobile Page Speed Update in 2018 and you need to note that website load speed is now considered as one of the chief ranking factors for mobile search results. So if you are still waiting to transform your website into its mobile-compatible version, which is also referred to as responsive web design, chances are that you are losing your business.

So before we proceed to discuss about the checklist, let us describe what responsive web design typically means.

What is responsive web design? And why do you need it?

We use diverse smart devices that come in diverse shapes and sizes. A smart device may be as small your watch or as big as your large screen TVs. People across the world are using various types of smart devices to access we pages. So businesses should ensure that their websites look good and are easy to use regardless of the type of the smart device that is used to access them.

It is by embracing a responsive web design that businesses can make sure that their websites look good and remain completely functional across all devices. Responsive websites can easily get adjusted to the specifications of all smart devices and the web design remains equally appealing and functional across any device.

A comprehensive checklist to design responsive websites

There's a possibility that you are already using a responsive website if you have redesigned your website in the past few years or if you have got an entirely new website. Responsive web design has emerged as a standard and today, most web design companies are creating responsive websites. However, your responsibility extends beyond just ensuring that your website is mobile-friendly. You would need to test your website from time to time to keep it updated and to check for responsiveness.

If you have a WordPress website, the following checklist may come out handy during the testing process:

Test your website on multiple browsers and devices

Get access to mobile as well as web traffic data from Google Analytics. This way, you will get to know what devices and mobile browsers have been used by visitors to access your website.

Get the device-browser combinations updated at regular time intervals

Use the data that you collected from Google Analytics to replace old device-browser combinations with new ones that would work more optimally.

Check if important content remains visible across all devices

You must make sure that the content that you consider to be most impactful and relevant should remain properly visible across all platforms. The content that is less-important may be chosen to be kept 'out-of-sight' on small mobile devices.

Make sure that you organize the content on the basis of importance

You must decide on the order of content in such a way that the most important sections of the content appear before the relatively less-important sections on small devices.

Check the website loading speed

Note the time that your website takes to load on different devices, browsers, and internet speeds. You may get large resources compressed so that they can be appropriately viewed on smaller devices. You can try boosting website performance by using caching.

Conduct a thorough visual testing of your website

A perfect alignment should exist among the images, texts, and controls. Make sure that the content does not overflow the edges of the screen. Ideally, the content should scroll down and get displayed professionally across all devices.

Evaluate if the typography would be appropriate for all devices

The typography should remain compatible with all existing platforms. In other words, the content should remain readable across all devices. Additionally, the style, font, and colors should remain consistent.

Re-evaluate device fonts

You must select fonts after evaluating their applicability across multiple operating systems and devices. You should define the default fonts of the device in your website's style-sheet.

Check if your website allows for smooth navigation

The navigation elements should never overlap the screen's edges. Use the hamburger menu icon to use hidden navigation. A visitor should be able to navigate through the website using swipe movements.

Review the website popups

You need to check whether the browser window popups and the inline popups are responsive as well.

Examine the levels of interactivity

Multiple devices, such as mouse, keyboard, styluses, and even fingertips are used to interact with devices. You must check if your controls are responsive to finger taps.

Get your website optimized for small mobile devices

When you are in the process of getting your website redesigned, you must consider getting it optimized for small mobile devices at first and then you may consider making the design more compatible with larger display options.

What you may need to note is that a number of factors such as browsers' rendering engines and device capabilities including GPU, display resolution, and graphics API have a major role to play in determining how end-users would perceive your website. That's the reason why you may want to test your website on mobile devices so that you find the inconsistencies before others identify them.

How to test for consistency of the design assets

Your brand should be noted for its consistency in design across all media platforms and formats. For example, the moment we hear "Coca-Cola", "Apple", "Pepsi", or "Nike", we can immediately visualize the logos of these brands. And this is the power of strong, memorable, consistent designs. Your design assets should look consistent across all platforms even after scaling or re-sizing. You should make sure that icons, colors, and typography remain consistent in diverse platforms. Practice care while testing:

Fonts: There are certain fonts that would look clumsy or uneven when they are scaled up or down and this would typically vary from one browser to the other and from one device to the other. For example, Mac OS can scale font-weight in a consistent manner, which Windows fails to perform. Notably, fonts might appear a bit 'slimmer' on Safari compared to what they might appear on Chrome. Therefore, you must test fonts to evaluate them on the basis of the above-mentioned parameters before you use them.

Media files: You need to make sure that multiple versions of of images would remain compatible with different browsers, device resolution, and view-port. Use Chrome Developer tools to test if the images would adversely affect website performance or SEO. Check under slow-network conditions. Identify if there are color consistencies.

Code: While Bootstrap and other frameworks would allow you to build websites, you have to admit that there would always be a feature that cannot be aligned properly or that might break with a resizing approach. This can be attributed to the faults of browser vendors that do not apply one single mechanism for generating web pages.

Here's a small checklist for you to support you in the code- testing process:

Check if certain browsers support a particular JS, CSS, or HTML property.
You may consider using ESLint and CSSLint to write CSS and JavaScript that would be compatible across major browsers.
You may consider following Normalize.css to note down the basic rules to incorporate default styles that vary from one browser to the other. You need to look for visual discrepancies manually after you complete straightening out the code. Here's what you should pay special attention to:

Layout: Check if the overall layout would appropriately match different sizes of the viewport.

Spacing: The elements should not run over each other.

Alignment: Make sure that the dynamic elements are aligned in an appropriate manner.

Height: The height of elements typically remains unaffected in responsive designs; however, you may still want to define the height of elements relative to the viewport on mobile devices.

Width: Make sure that the width of each of the elements remains compatible with the viewport.

Conditional Rendering: Check if you are able to adjust the elements on the basis of viewport size. Make sure that the elements can be easily made to appear, hide, or to get re-sized.

Conditional Scroll: Make sure that the sign-up button and the input fields lie just behind the keyboard on mobile screens.

Readability of Text: Your fonts should scale properly and they should have the appropriate size and adequate levels of clarity so that they can be viewed easily from multiple viewport. Eliminate pixelation issues.

Horizontal Scroll: Look for long links or sentences. They may unnecessarily create horizontal scroll on small-sized screens. Test text legibility on various viewport and browsers.

Responsive Images: The images should continue to fit within their allotted spaces. Use images that are expandable. Get your JS and CSS image files optimized; minimize or compress them as per requirement.

Icon-Positioning: If you have icon-font combos, you must make sure to position them correctly on browsers and viewport.

Tools that would come in handy to test the efficacy of a responsive web design

While there are several tools that would allow you to test website responsiveness, we are listing the three most widely used tools:

Mobile-Friendly: This is Google's tool that not only supports search engine optimization, but would also generate an analysis for website responsiveness. All you need to do is to type the page URL and you will get to know if the page is compatible on mobile platforms. As easy as that!

Am I Responsive? : This tool will let you know how your website would appear on common devices. Just enter your website's URL on the platform and you will get to see how your website appears on laptops, tablets, mobile phones, and desktops.

Responsive Design Checker : This tool would prove to be very useful if you want to test for website responsiveness across a number of devices. This tool has some degree of similarity with the Am I Responsive tool, but this comes equipped with additional screen resolution options. This tool would also allow you to test your page on Google Pixel phones as well as on Amazon Kindle.

Best Responsive web design examples

Website responsiveness is the key to ensuring constant website traffic and an increased probability of sales. We have listed three best examples of responsive web design, which would allow you to find some inspiration and adopt a design that suits your business the most.

DropBox

The call-to-action and the Dropbox hero sections adjust very well with varying screen sizes. There's an arrow below the hero area and it gets displayed only on larger screens. You will not find this arrow if you are viewing Dropbox on smaller devices. This is simply because of the fact that users would scroll down naturally to move to the next section of content.

Treehouse

Treehouse's website has a highly responsive navigation menu design. With screen-size, the navigation menu items change their sizes accordingly. For smaller screens, the navigation menu items remain concealed behind the hamburger icon button at the header.

Dribble

The design of this website adapts well to the user's screen size. As the screen size becomes smaller and smaller, the number of columns in the design grid keeps decreasing to ensure compatibility with the screen-size.

So? What have you decided?

More than 8.5 billion mobile devices are being actively used across the world, which means that your website must have a mobile-friendly design so that your website registers unhindered traffic. According to ComScore, around 80 percent of internet users use smartphones and according to SocPub, 57 percent of users say that they won't go for businesses that don't have mobile-friendly websites.

What you should note is that responsive web design is a step-by-step process and it needs to be updated on a periodic basis depending on latest technological developments and change in consumer behavior. You need to test your website for responsiveness on new devices, browsers, and operating systems. If you are getting a brand new website designed, you may consider referring to responsive WordPress themes.

So have you recently tested your website for responsiveness? What processes did you undertake? Do let us know.