The difference between a Mobile First Design and a Responsive Web Design?

A Mobile First Design Guide

April 2010

The Mobile First Design strategy says when you design a website, you start sketching and prototyping on the smallest screen first and work your way up to larger screens.

May 2010

With a Responsive Web Design (RWD), strategy, mobile websites are always an afterthought in the design process!


Recent trends affecting all Mobile Navigation Menus

Thumb Zone Area of 1st Smartphone
2007

When the first iPhone was released in 2007, placing a small Navigation Menu on the top of the page that took very little space on the small screen was acceptable because, individuals were still able to use their thumbs to navigate a mobile web site.

2017

In 2017, Phablets (Smartphones with a screen size of 5.5 inches - 7 inches) accounted for 40% of all Smartphones shipped in 2017.

 2019

Phablets will become the most popular Smartphone type by 2019 and, are expected to account for 59% of global shipments by 2021!

When website visitors use "Large Screen Smartphones" and the Mobile Navigation Menu is positioned on the top of the screen, the Menu is not in an optimal thumb zone area for ONE HANDED USE!

How to design an Ambidextrous, Thumb Zone Friendly Mobile Navigation Menu

Factors affecting all Mobile Navigation Menus

Designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu may appear to be a daunting task 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 when Smartphone users hold their devices with One Hand, they use different thumbs for navigation:

The first step is to identify the Optimal Thumb Zone Area on a Large Smartphone Screen!

✅ Use a web online tool to draw your Optimal Thumb Zone Area On Your Smartphone Screen!

Draw your OPTIMAL THUMB ZONE Area on your Smartphone screen

Features of my Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu

👍 It uses a HTML5 and CSS3 ONLY "Full Screen Overlay Scrolling Menu".

👍 Is positioned at the bottom of the Smartphone screen.

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

👍 All Menu Categories and Links are "Centered" and optimized for "ONE HANDED" use with either the Left Hand or Right Hand.

This makes it an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
Draw your OPTIMAL THUMB ZONE Area on your Smartphone screenThe 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!

👍 The Navigation Menu is very versatile and can also be used as an Ambidextrous, Thumb Zone Friendly, Mobile Mega Menu.

👍 Website visitors will experience the same Navigation User Experience (UX) on any size screens!

Configure Web Pages To Function Like A Mobile Web APP

If your contact information is stored on a Smartphone Contact App, in order for clients to reach you, they have to:

  1. Open the Smartphone Contact App.
  2. Search and select your contact information.
  3. Contact you or, click your web site link.

You are familiar with the ADD A BOOK MARK 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 ONE TOUCH to the Icon on the Home Screen, you now have access all of the contact information and website!

👍 If you already have a website and you ever considered having a Mobile Web App, this is a very efficient solution without the need of a Web App Manifest, and Service Workers!

A Simple Mobile Web App Setup

👍 Make these simple changes to EVERY WEB PAGE on your web site!

  1. Implement Apple Touch Icons on every web page.
  2. Add a unique name="apple-mobile-web-app-title" content="AppTitle" meta tag to every web page.
  3. Android devices do not use this meta tag so, change the web page title to match the AppTitle on every web page.

Avoid Using Content Management System Software

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!

Every single JavasScript that is used on your website, has to be:

  1. Downloaded over the network (Cellular or Internet)
  2. Parsed.
  3. Compiled.
  4. Executed.

If you are designing for Mobile First, you need to take into consideration that not all mobile devices are created equal!

👍 This is why the ONLY JavaScript used by this website is for Google Analytics!

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

CSS3 Check List For Configuring Web Pages For Speed

✅ 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!

Graphics Check List For Configuring Web Pages For Speed

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 Check List For Configuring Web Pages For Speed

✅ 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

✅ Implement GZIP compression.

✅ Implement browser caching.

✅ Use HTTP Vary:Accept-Encoding header.

Set Very High Expectations And Performace Goals!

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

✅ Test your web pages and web server performance using Lighthouse's Web Page Speed Test.

Every one of my web pages receives a PERFECT SCORE OF 100 on Performance, Accessibilty and SEO categories!

Ask Yourself These Questions

RaulGonzalez.com Apple Touch ICon

❓ If you have an existing web site, does it meet these high expectations?

❓ If you are planning to design a new web site or redesign an existing web site, should the web site design meet these high expectations?

✅ This is why Mobile First is the only design strategy that will work in 2019 and beyond!

Would love to hear your comments, opinions, and thoughts on the topic of Mobile First and Responsive Web Design (RWD) strategies. Looking forward to your responses!

🔝