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?
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
- 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.
- Visual Hierarchy: Prioritize the elements in the content inventory and determine how to display the most important elements prominently.
- Design with the smallest breakpoints and then scale up: Build the mobile wireframe first, then use that as the model for larger breakpoints.
- 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.
- Avoid large graphics: Landscape photos and complex graphics don’t display well on a small screen.
- 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.