What is the difference between a Mobile First Design and a Responsive Web Design?

A Mobile First Design Guide

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)


Design An Ambidextrous, Thumb Zone Friendly, Mobile Menu

Designing an Ambidextrous, Thumb Zone Friendly, Mobile Menu is difficult because the THUMB ZONE AREA CHANGES depending on:

✅  The size of your hand.

✅  The size of your Smartphone screen.

✅  Which hand you use when holding your Smartphone with 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%


Features Of My Ambidextrous, Thumb Zone Friendly, Mobile Menu

👍  Uses a HTML5 and CSS3 "Full Screen Overlay" Scrolling Mobile Navigation Menu.

👍  It is both Transparent and Opaque to alert the user to Scroll Down to continue viewing additional Content, Menu Categories or Web Page Links that can not be displayed on the screen.

The Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu optimized for One Handed use
👍  The Ambidextrous, Thumb Zone Friendly, Mobile Menu is positioned at the bottom of the screen, all Menu Categories and Links are "Centered" and optimized for "ONE HANDED" use.

The Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu optimized for One Handed use

👍  Follows the"unofficial web design" Three Click Rule. This rule recommends that web site visitors should be able to find any information with no more than three mouse clicks or touch actions!



Optimize Web Page Layout

👍  My Mobile First Design allows visitors to experience the same web page layout and Navigation Menu User Experience (UX) on different size screen devices. Visitors will experience the same User Experience (UX) on different size screen devicesVisitors will experience the same User Experience (UX) on different size screen devices

Avoid Using Content Management System Software

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

All Content Management System (CMS) Software Uses Lots Of JavaScript!

Byte Per Byte JavaScript is the most expensive resource that we use on a Smartphone when loading a web page!
✅ 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 on the web server.



Optimize Web Pages for Speed

If you are using a desktop or laptop to browse 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 5G).

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!

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!

✅ All of my web pages
Score 100
on Google's PageSpeed Insight Report!

🔝