Mobile First Design

May 31, 2019

Starter Website

Our websites are designed for desktops and mobile websites in mind. Most people view your website on a mobile device now a days. Mobile First Design is a way to design your website so that it gives the best user experience both on a mobile device, which includes table and phone anything less than a 13″ screen, and also a desktop or laptop. 

Google also has realized that most people visit your websites on a phone or tablet device.. Google gives your page more points for a more mobile friendly website. Search engines tend to provide good UX nearly as much as you do. You have a better chance to rank especially when searching for local businesses.

What is a Mobile Friendly Website?

When you talk about developing mobile friendly websites you have to decide what you mean. It used to mean developing two websites and then having JavaScript or some kind of programming on the back-end to load the correct version of the website depending on the size of the screen. This was good at the time because you could be sure that the correct version of the website would display properly. But it also meant that you had to double your work, and develop essentially two websites. This is not very convenient, but in the late 1990’s we did not know any better.

The better way is to design the one website with a responsive design. This means that one website will look good on a mobile device such as a phone or tablet device. The pictures will look good and the menus will be touch friendly. When you sit with your website designer make sure you decide what the minimum screen size is that you want the website to be viewed on.

Mobile First = Content First

When your website looks good on a mobile device then it also will be focused on the content, which is what Google is looking for. Mobile design has the most limitations, screen size and bandwidth which forces you to prioritize on your content because you are stripping away the stuff that doesn’t matter. Content focused websites also provide your visitor with the information that your user want and it is also user focused.

Mobile First Design Procedures

  1. Content Inventory: A content inventory is a document containing all the elements you want to include on your website. A good source is from Maadmob. They have a good spreadsheet template that is easy to fill out.
  2. Visual Hierarchy: Prioritize the elements in the content inventory and determine how to display the most important elements prominently.
  3. Design with the smallest breakpoints and then scale up: Build the mobile wireframe first, then use that as the model for larger breakpoints.
  4. Enlarge touch targets: This is very important. Fingers are much wider than pixel-precise mouse cursors, and so ned larger elements on which to tap. At the time of this writing, Apple recommends 44 pixels square for touch targets.
  5. Avoid large graphics: Landscape photos and complex graphics don’t display well on a small screen.
  6. Test with a real device: Emulators are great at the beginning but before you take the site live nothing is as good as a real device. If you don’t have many devices of different sizes then get family and friends to help you test the website and provide you feedback on what works and what doesn’t work.
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on print

Stay in Touch

Stay Up-To-Date with all of my news and tips about WordPress, Technology and Business