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 strategy 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 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 25, 2010 

Ethan Marcotte introduced the concept of Responsive Web Design (RWD) in an article that was published on May 25, 2010.

This design methodology allowed developers to use a new web browser feature called CSS3 Media Queries that is able to display the content of web pages designed for desktop monitors on the small screen of Smartphone devices!

With a Responsive Web Design (RWD) strategy, mobile websites are always an afterthought in the design process. Instead, focus on the Mobile user needs first and design for the devices that they are using the most (i.e, Smartphones with large screens).

Trends Affecting Mobile Navigation Menu

Thumb Zone Area of 1st Smartphone

 

 2007 

When the first iPhone was released in 2007, it had a 3.5 inch screen.

Placing a 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.

When using a Large Screen Smartphone and the Navigation Menu is positioned on the Top Of The Screen, THIS IS NOT AN OPTIMAL THUMB ZONE AREA ON THE SCREEN!

Draw your OPTIMAL THUMB ZONE Area on your Smartphone screen

 It's time for a different Mobile Navigation Menu Design! 

Design an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu

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

  1. The size of your hand
  2. The size of your Smartphone screen.
  3. Which hand you use when holding your Smartphone with ONE HAND.

Furthermore, 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%

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

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

👍 My Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu:

  1. Is positioned at the bottom of the Smartphone screen.
  2. All Menu Categories and Links are "Centered".
  3. Is Optimized for "ONE HANDED" use with either the Left Hand or Right Hand.
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.

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

Configure Web Pages To Function Like A Mobile Web APP

You are 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 ONE TOUCH to the Icon on the Home Screen, you now have access to my web site!

👍 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 booked marked web page.
  3. Searching Contacts to find a web page.



 A Simple Mobile Web App Set-Up 

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

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

Should You Design Web Content for the Apple ⌚ Watch?

Why Should You Design Web Content For The Apple Watch?

Apple introduced the ability to display web content with the Series 4 Watch in 2018. Series 3 watches are also able to take advantage of this feature as long as the watchOS operating system is upgraded!

 No Other Smartwatch Is Able To Display Web Content! 

Displaying any web content on the small screen requires configuration changes to the web page layout and font size because the web page width is reduced by 50%.

 Apple Watch Owners Do Not Surf The Web On Their Devices! 

✅ There is no Safari Web Browser App in the watchOS operating system.

✅ watchOS integrates Apple's WebKit web layout engine.

✅ It uses Safari's Reader Mode to display web pages.

✅ Web content is supported ONLY in the Apple Watch Messages and Mail App when someone shares a web page link and the user chooses to open the link on their Apple Watch.

Avoid Using Content Management System 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!

✅ Follow Google's suggestions for the use of JavaScript!

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

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!

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

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




 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

 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!

🔝