Image Placeholder

Purpose

A growing number of users search the internet using a mobile device, so ensuring a responsive and well-optimized mobile view is more important than ever. Google also prioritizes mobile-friendly websites in rankings and can improve overall visibility. 

Application

Employees reviewing or cleaning up a website before sending it to the client or launching it should review this page.

1. How to Check Mobile and Tablet Fixes

Besides using your phone or the company tablet, you can also use your browser to view the website on various types of mobile and tablet services. 

On Google Chrome
To view the website in various modes, right-click and select Inspect.

Image Placeholder

On Firefox
To view the website in various modes, right-click and select Inspect.

Image Placeholder

2. What to Check for on Mobile & Tablet View 

  • Ensure the revolution slider is at the proper height and all the elements are visible on-load and are stacking properly.
  • All headers and background images show the correct part of the photo or graphic. We do not want the images to be zoomed in or cutting off important parts of the image.
  • The spacing should be consistent between the sections. Look for big spaces taking up the screen space, elements that are touching, or elements overlapping each other that should not be.
  • For consistency, all elements in a section should have the same alignment (left, center, right).
  • Header text should not be smaller than the paragraph text. Check for any words touching each other, whether side-by-side or above and below. 
  • Paragraph text should be a minimum of 15px for readability.
  • The slide-out menu should match the branding of the rest of the website and include the call-to-action buttons from the desktop menu.
  • Check the main call-to-action buttons on more complicated designs to ensure they are clickable and not overlapped by an element.