The day of websites not formatting correctly on mobile devices is over. The majority of reader’s access websites on mobile devices. If today’s layouts don’t work perfectly on mobile the website will lose traffic and readership. For this reason many designers are designing websites for mobile first. In other words, a website would be designed for mobile screens before being designed for desktop screens. This keeps mobile in the forefront rather than being tacked on last or forgotten completely.

The design methods of the olden days of web design (last year) was to design a layout or a theme and test it in a few browsers. Once the designer was satisfied that it worked on the popular browsers the website would go live. The problem is the designer didn’t always test it on mobile, so it wouldn’t always get optimized for small screens. Many sites weren’t even responsive until a year or so ago.

Whether you design on mobile and scale to desktop, or design on desktop and scale to mobile, the website must work perfectly on both. My advice is to use a theme that’s mobile-ready and test on as many devices as you can. Divi is a great chioce. As Zurb demonstrates, creating a site for mobile and scaling up to desktop is better than creating for desktop and scaling down to mobile.

For more stats on mobile usage see the article Mobile Marketing Statistics compilation from Smart Insights.

How to Test for Mobile Optimization

My preferred tool is Google Chrome Tools. If you’re using Chrome, right click anywhere on a website and select Inspect. This will open the tools. The will open a tool box either on the right or on the bottom portion of the screen. Select Toggle Device Toolbar if it’s not already showing in the left portion or at the top.

The webpage you’re viewing will show in a simulated mobile device. Choose a device to test in both portrait and landscape mode. Be sure to test as many devices as you can.

Once you’re satisfied with how your website looks in the simulated mobile devices, load the website on as many actual devices as you can.

Another tool I like is Am I Responsive. Enter your URL and it will show your website on multiple screen sizes and you can scroll through them.

Let’s Discuss

• Do you build for mobile first?
• Do you prefer to scale up to desktop or scale down to mobile?
• What are your favorite tools for developing and testing for mobile?

Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already. 

Featured image by NeONBRAND