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

The most important task to focus on is to design an Ambidextrous, Thumb Zone Friendly, Mobile Menu. This task is extremely 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

👍  The Navigation Menu is very versatile and can be used as a Mobile Mega Menu that can be deployed on different size screen devices.

Experience a Thumb Zone Friendly Mobile Mega Menu
✅ Check out my Thumb Zone Friendly, Ambidextrous, Mobile Mega Menu

👍  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.

The Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu optimized for One Handed use
Visitors 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!

By design, all Content Management System Software uses JavaScript extensively

Byte Per Byte JavaScript is the most expensive resource that we use on a Smartphone when loading a web page!

✅  You need to understand and follow Google's suggestions for the use of JavaScript!




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!

Set a goal to achieve a Page Speed Score of 100 on Google's PageSpeed Insight Report

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



Configure your Web Pages to function like a Mobile Web APP

You are probably familiar with the ADD A BOOKMARK OR ADD TO FAVORITES feature on all web browsers. It creates a link on your web browser of: The ADD TO HOME SCREEN Mobile Feature used by the Android and IOS Mobile Operating systems has similar features:👍  With JUST ONE TOUCH To The Custom Icon on your mobile device Home Screen, you can now access any web page:
  1. Without opening your mobile device Web Browser.
  2. Searching in different folders to find the bookedmarked web page.
  3. Searching Contacts to find a web page.
⚠  Although the Add To Home Screen mobile feature is available on ALL MOBILE DEVICES, IT IS DEPENDENT on the Web Browser provided by the Operating System!

Some Web Pages Do Not Exploit The Add To Home Screen Mobile Feature

⚠  Some web pages DO NOT INCLUDE AN APPLE TOUCH CUSTOM ICON AND A WEB PAGE NAME to be used in the Home Screen on every web page. This Icon appears like any Icon that any APP uses.

✅  Take a look at my business logo (6 faces depicting multiple skills) and the Icon on the Home Screen pictured below.

Apple Touch Icon used by raulgonzalez.comWith ONE TOUCH to the Icon on the Home Screen, you now have access to my web site!

 It Is The Same Logo! 

Add To Home Screen Mobile Accessibility Feature Test

To see if your mobile web site is configured properly, try adding any page of your web site to your Smartphone or Tablet Home Screen.

If you DO NOT KNOW how to do this, click here so that you learn how to add a mobile web site page to your Smartphone or Tablet Home Screen.

❓  If your test DID NOT SHOW a Custom Icon of your business logo:

❓  If your test DID NOT SHOW A 14 CHARACTER WEB PAGE NAME that makes your mobile web site look like a Mobile APP?

❓  Do you have a Business Logo on your Business Cards?

👍  Configuring an ICON and 14 CHARACTER WEB PAGE NAME to every web page is a very simple change that BUILDS YOUR BRAND!

🔝