Click on image to Draw your Personal Thumb Zone area on your Smartphone screen

A Mobile First Design Guide

 What Is A Mobile First Design? 


April 5th, 2010

Luke Wroblewski gave his first presentation about using a Mobile First methodology for designing websites on April 5th, 2010.

He is a top rated speaker that has given 367 presentations and workshops to companies and conferences around the world.

His latest book titled Mobile First was published on October 18th, 2011.

The Mobile First Design focuses on the Mobile User Experience (UX)

Implement an Ambidextrous Thumb Zone Friendly Mobile Navigation Menu

Implementing a Mobile Navigation Menu with a Thumb Friendly Mobile Experience is the most critical and difficult area to master because the Smartphone screen Thumb Zone area changes depending on:

✅  The size of your hand.

✅  The size of your Smartphone screen.

✅  Which hand is being used to hold the device using just ONE HAND.

Research on mobile interaction and behavior shows that Smartphone users touch their phone's screens and hold their devices in different ways:
  1. One Handed - 49%
    • Right Thumb on the screen - 67%
    • Left Thumb on the screen - 33%
  2. Cradled - 36%
  3. Two Handed - 15%
👍  This is why my Ambidextrous Mobile Navigation Menu is optimized for "One Handed" use and, it is positioned at the bottom of the screen!

A Thumb Friendly Ambidextrous Mobile Navigation Menu designed for OPTIMAL THUMB ZONE Access on ANY SIZE Smartphone screen

Optimize Web Page Layout

This site DOES
NOT 👆  USE ANY Content Management System (CMS) Software


👍  Users will experience the same web page layout and Navigation User Experience (UX) on different size screen devices.
Click on image to Draw your Personal Thumb Zone area on your Smartphone screen

Optimize Web Pages for Speed

If you are using a desktop or laptop to visit a web site, you probably are connected to the internet with a High Speed connection. When you visit a web site with a Smartphone, you have to take into consideration the cell phone reception and speed of the cell phone carrier network (i.e. 3G, 4G, 4G LTE).

Anything that you can do to reduce the Total Page Size (HTML, CSS, Images, JavaScript, etc) and the number of network requests, will help the web page load faster!

 Check list for configuring web pages for speed 

CSS3

✅  Verify that there are No CSS3 Errors on the CSS3 component of the web page!

✅ Minify CSS3 code of the web page to reduce the Total Page Size!

✅  Consider Embedding CSS Rules to reduce the number of Network Requests. Use PHP
require ("css3_styling.inc"); to include and reuse the CSS rules instead of external style sheets!

Graphics

Images take a very large percent of the web page size and need to be optimized by choosing the correct image size for the device and compression. An image should be used to grab the web site visitor's attention and convey the desired message. External links within the web page can be used to further explain and validate the desired message that you are trying to convey and are not loaded when the page is originally displayed.

✅  Use the HTML 5 Picture Tag to display the appropriate size images for different screen size devices!

✅  If there are several images that are used in every web page, strongly encourage to use CSS Sprites to reduce the number of network requests to the server.

HTML

✅  Use HTML Character Entities instead of small images whenever possible.

✅  Verify that there are No HTML Errors on the web page!

✅ Minify HTML code of the web page to reduce the Total Page Size!

JavaScript

⚠ BYTE-PER-BYTE JAVASCRIPT IS THE MOST EXPENSIVE RESOURCE THAT WE USE ON A SMARTPHONE WHEN LOADING A WEB PAGE. I AVOID USING IT UNLESS IT IS ABSOLUTELY NECESSARY!
✅ Understand and follow Google's suggestions for the use of JavaScript!

✅  The only Javascript that I use is for Google Analytics!

✅  All validation of Form Input Fields is done with PHP on the web server.

Optimize your Web Server for Speed

 Check list for configuring web server for speed 


✅  Implement GZIP compression.

✅  Implement browser caching.

✅  Use HTTP Vary:Accept-Encoding header.

Run a LOCAL and GLOBAL speed test on your web pages and web server

✅  Test your web page and web server performance locally using GTMetrix.

✅  Test your web page and web server performance from 25 different locations around the world!

👍  By configuring your web server and web pages for speed you are allowing:

Exploit All Mobile Accessibility Features

  1. Use of a Digital Business Card that allows web site visitor to:
    • Create a new contact on their 📱 Contacts App without manually typing the contact information.
    • Add my Digital Business Card to their 📱 Smartphone Home Screen.
    • Share my Digital Business Card with their 📱 Smartphone email, text messaging and social media Apps.
    • Recipients of a text message that have an Apple ⌚ Watch, can tap a web site link within a text message to view the content of my Digital Business Card that has been optimized for the small screen!
  2. Back to Top 📱 mobile Feature.
  3. Click-to-Call 📱 mobile Feature.
  4. Add to Home Screen 📱 mobile Feature.
  5. Linking a business address to Google's Voice Activated Driving Directions.

Should you consider a Digital Business Card?

✅ Learn how having a Digital Business Card can help build your business!


Back To 🔝 Of Page