Mobile-first design

Have you checked what your website looks like on a smart phone? Or a tablet?

More than 60% of visitors to your website will be viewing it on a mobile phone, so it is important to make sure that it looks great on a mobile device.

Configuring your website to display on mobile, desktop, and tablet screens is called responsive design.

Most modern web tools have the option to configure your website for viewing on a smart phone and a desktop, but they don’t usually have an option for tablets. For that, you need extra styling.

Wix has a button right on the editor’s toolbar which allows you to switch to mobile view. It is still a good idea to check what your page looks like on an actual mobile device.

WordPress blocks and templates are configured to work equally well on any screen size. There are specific settings for the navigation block (button design, menu background, and so on).

You can also check what your website looks like on many mobile devices in the developer tools in your browser, using the device mode button.

Mobile-first design

Mobile-first design is where the page is designed and developed for mobile devices first. This makes sense because the majority of visitors will be accessing your website on a mobile device, and because if the design works on a mobile screen, it will also work on larger screens, provided you use modern flexible layout.

The principles of mobile-first design are as follows:

1. Content optimization – less is more. Make sure that all the information on the page is relevant to the user’s needs.
2. Progressive enhancement – design for the smallest screens first, then develop the design and layout for larger devices.
3. Responsive layout – use fluid grids, columns, and stacks. This is where WordPress blocks really come into their own, because they are configured to work on mobile, tablet, and desktop.
4. Touch-friendly UI – make sure that buttons and links can be pressed with a finger or thumb, and are spaced far enough apart that visitors don’t accidentally press something else. The default settings on WordPress are for large, touch-friendly buttons.

(Source: How to implement mobile first design – BrowserStack)