Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Build credibility and trust, reduce bounce rates, and improve conversion rates.
Use tools like Google Analytics to determine which devices to prioritize your site for.
- Log in to Google Analytics and navigate to Reports > Audience > Mobile > Overview to get a better idea of how users are accessing your site (mobile, desktop, or tablet).
- Navigate to Mobile > Devices to see the most common devices used to access your site, the operating systems, screen sizes, and screen resolutions that you should prioritize.
For example, if your website is packed with images and content, and you notice that most users only visit for a few seconds, you might discover that they browse on a mobile device with a small screen. In this case, you should tailor your website’s layout for the devices most commonly used to access it.
Use a plugin like Simple Mobile URL Redirect to create mobile redirects that automatically send mobile users to your mobile site if you don’t use the same design for all devices.
You can also add a JavaScript snippet to your code or ask your web developer to set up redirects for you if you’re not technically inclined.
Include a link to the desktop version of your site if you offer limited features on your mobile site.
- Linking to the desktop version naturally infers to users that the mobile version only provides access to the site’s main features and offers them an easy way to access the site’s full features.
- Use the phrase Desktop Version rather than Full Version, as the latter may imply that the mobile version is limited and inferior.
Ask your web developer to change all page elements dimensions from pixels to percentages of the page size or viewport to ensure they’re easily adaptable across different devices.
Use simple forms that contain only the essential information you need from users.
- Forms with too many mandatory fields are likely to be abandoned by mobile users.
- Group the input fields whenever possible. For example, Last Name and First Name fields can be condensed into a single Name field.
- Use short and concise error messages. For example, use Invalid Zip Code instead of, Please enter a valid Zip Code.
- Use functions like autocomplete to pre-fill as much information as possible, while keeping the option to edit. For example, a Billing Address field could be pre-filled using the address a user entered into the Shipping Address field.
Use large font sizes that can be easily read on mobile devices.
Synchronize data between devices to allow logged-in users to continue tasks on different devices.
For example, if a logged-in user adds a product to their shopping cart on their phone, they should be able to see it in their cart when they log in on their laptop. This function is built into most CMS platforms, but ask your web developer to check or implement it for you if you use a different platform or aren’t sure how to check.
Add microcopy to header icons for commonly used paths to improve menu clarity and make it easier for users to navigate your site.
For example, J.Crew added microcopy to each header icon in their navigation menu to make it easier for users to access common paths.
Use viewport meta tags to ensure images adjust correctly when screen orientation is changed.
Add the following code between the and elements of your page’s HTML code to instruct it to match the width of the device screen and maintain a 1:1 pixel ratio to keep page width constant regardless of device and screen orientation:
``
Use tools like Mobile-Friendly Test or Mobiletest.me to test mobile versions of your site.
- Enter your mobile URL into Google’s Mobile-Friendly Test for a simple report on whether your site is easy to use on a mobile device and helpful hints on what to fix.
- Enter your mobile URL into Mobiletest.me and select the device and operating system for a complete view of your website on any mobile device, allowing you to fix any issues, such as website layout or form issues, before going live.
Last edited by @hesh_fekry 2023-11-14T15:40:31Z