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

A Mobile First Design Guide

2010

Luke Wroblewski gave his first presentation about using a Mobile First strategy for designing websites on April 5th, 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.

2010

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

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

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.

 2019 

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

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!

 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

Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu Features

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

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

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

Should You Design Web Content for the Apple ⌚ Watch?

 September 2018 

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!


Why Should You Design Web Content For The Apple Watch?

 No Other Smartwatch Is Able To Display Web Content! 

Displaying any web content on the small screen requires configuration changes to the navigation menu, 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.

Optimize Web Page Layout and Navigation User Experience (UX)

👍 Website visitors will experience the same web page layout and Navigation User Experience (UX) on different size screen devices!

Avoid Using Content Management System Software

 All Content Management System Software uses JavaScript 

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!

👍 I DO NOT  👆  USE ANY Javascript on this website!

Optimize Web Pages for Speed

 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.

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

✅ Test your web pages and web server performance using Google's Page Speed Insights.

✅ Every one of my web pages receives a score of 100 on Google's Page Speed Insights Reports!

 Ask Yourself These Questions 

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

🔝