It’s important to build a mobile-friendly website to ensure accessibility and usability for the growing number of users accessing the internet primarily through mobile devices. Considering a mobile-friendly layout when building a website is crucial for several reasons, as seen below.

1. User experience (UX): More and more people are accessing the internet via mobile devices such as smartphones and tablets. A mobile-friendly layout ensures that users can easily navigate and interact with your website regardless of the device they are using. This enhances the overall user experience, leading to higher engagement and conversion.

2. Search engine optimization (SEO): Search engines like Google prioritize mobile-friendly websites in their search results. Websites that are not optimized for mobile devices may rank lower in search engine results pages (SERPs), resulting in reduced visibility and traffic.

3. Accessibility: A mobile-friendly layout improves accessibility for users with disabilities who rely on mobile devices or assistive technologies to access the web. By ensuring that the website is compatible with different screen sizes and input methods, you make it easier for all users to consume the content.

How to Access Mobile view on Desktop

To view a website on a desktop as a mobile view, you can use the Developer Tools built into most modern web browsers such as Google Chrome, Firefox, Safari, or Edge.

Watch the video below to view how to switch a desktop view to a mobile view in Firefox.

Mobile Specific Settings

In this section, we will explore the essential mobile-specific settings available in WordPress, allowing you to optimize your website’s performance and user experience across various mobile devices.

Video in Jumbotron

Best practice if a video is added to the Jumbotron block is to always set a “Background Image.”

The background image can display very differently on mobile, so be sure to preview it before saving.

If the Desktop image isn’t well suited to the mobile screen size, the “Mobile Background Image” option is available.

View these steps in the video below:

Photo Gallery Block

When the photo gallery block (with a grid gallery layout) has 4 images and displayed on mobile, 3 of the images are in line, but there is one photo that is solo, causing the flow of the website to become choppy.

Best practice to avoid this from happening is to have separate gallery blocks for mobile and desktop and then selecting to hide the relevant blocks.

For example, to display the gallery block (with a grid gallery layout) on desktop only with 4 images, this will require settings selections of 4 columns and the “Hide on Handhelds” button selected.

View how to do this in the gif below:

To display the gallery block (with a grid gallery layout) on mobile only, use only 3 images which will thus require settings selections of 3 columns and the “Hide on desktop” button selected.

Checkered Image and Text

Alternating image and text of multicolumn rows does not translate to the same format on mobile. The columns are stacked on mobile, which means the left-most content is put on top. When the multicolumn rows are set up in a specific way, layout issues can occur like placing the image blocks together in the mobile view, which now gives the user a wall of images before they get additional context.

To avoid this from happening, navigate to the Row Options on the row that needs to be flipped. Then, select the “Reverse the order of the columns. Only applies to mobile devices.” option and preview the changes to make sure it’s correct.

Platform Specific Element Settings

At every level in page building (Row, Column, Block) you can find options to make the element platform-specific ie the “Hide on Desktop” (shows on mobile only) and “Hide on handhelds” (shows on Desktop Only) buttons.

Only use these tools when necessary and make sure to leave a note of what you hid and label the row to define where it will show (Example Row Label: “About Us Desktop only – Multicolumn Row”)!

You can find other blocks that may need additional attention for a mobile friendly layout in the help page linked here.