Example of an Ambidextrous Mobile Navigation Menu that delivers the same User Experience (UX) on ANY SIZE screen device

A Mobile First Website Design Guide

What Is A Mobile First Website Design Methodology And Why Should You Care?

The Mobile First Website Design Methodology is focused on the Mobile User Experience (UX) and addresses the following areas of website design:

✅ The READABILITY of web page content on small screens.

✅ A Website Menu Navigation that has a THUMB ZONE FRIENDLY Ambidextrous Mobile User Experience (UX) and has a CONSISTENT User Interface (UI) on all devices.

✅ A CONSISTENT Web Page Layout User Experience (UX) that can scale from the small screen of a Mobile device, to Large Screen TVs.

✅ Reduces the inputs from users by exploiting the ACCESSABILTY FEATURES of Mobile Devices.

✅ Optimizes the Web Pages and Web Server FOR SPEED.

Implement a THUMB ZONE Friendly Mobile Navigation Menu

Implementing a Mobile Navigation Menu with a Thumb Friendly Ambidextrous Mobile Experience is the MOST CRITICAL AND DIFFICULT area to master.

Josh Clarke's research on How We Hold Our Gadgets shows that the Smartphone screen THUMB ZONE area changes depending on:

✅ The size of your hand.

✅ The size of your Smartphone screen.

✅ Which hand is being used to hold the device using just ONE HAND.
✅ Design a Menu with a Thumb Zone Friendly User Experience (UX)

👍 The Thumb Friendly Ambidextrous Mobile Navigation Menu of this website is positioned at the Bottom of the Screen and provides OPTIMAL THUMB ZONE ACCESS to both the LEFT and RIGHT Hand THUMB FINGERS. A Thumb Friendly Ambidextrous Mobile Navigation Menu designed for OPTIMAL THUMB ZONE Access on ANY SIZE Smartphone screen
✅ Experience a Mobile Menu with 35 Categories and 293 Page links!

Implement Mobile Accessibility Features

My Mobile First Website Design exploits all Mobile Accessibility Features such as:

✅ Back to Top

✅ Click-to-Call

✅ Add to Home Screen

✅ Digital Business Card.

✅ Email Forms that verify a valid contact email address domain name and blocks receiving emails from countries outside of the US to cut down on SPAM emails.

✅ Linking your business address to Google's Voice Activated Driving Directions.

Optimize Web Page Layout

👍 I use the SAME WEB PAGE LAYOUT AND MENU NAVIGATION that can scale from a small Smartphone screen to a Large Screen TV WITHOUT USING CSS3 Media Queries and is compatible with web browsers running BOTH CURRENT AND OLDER VERSIONS of Apple, Android an Windows operating systems.

Example of an Ambidextrous Mobile Navigation Menu that delivers the same User Experience (UX) on ANY SIZE screen deviceExample of an Ambidextrous Mobile Navigation Menu that delivers the same https://www.raulgonzalez.com/thumbzone.php on ANY SIZE screen device

Optimize Web Pages for Speed

If you are using a desktop or laptop to visit a website, you probably are connected to the internet with a High Speed connection. When you visit a website 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).

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 

HTML

✅ Use HTML Unicode Characters 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!

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!

JavaScript

🚩 JAVASCRIPT IS THE MOST EXPENSIVE COMPONENT OF YOUR WEB PAGE AND AVOID IT AS MUCH AS POSSIBLE!
✅ Understand and follow Google's suggestions for the use of JavaScript!

✅ The ONLY JavaScript that I use on my website is for Google Analytics!

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

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!

👍 THE RESULTS IS A SUPER FAST WEB PAGE THAT LOADS IN LESS THAN 1/2 SECOND and exploits Google's Major Change to it's Mobile Ranking Algorithm!

Call to Action and Social Media

Picture of Raul Gonzalez, a Mobile First Website Developer in Dallas, Texas

Would love to hear your thoughts and comments so, feel free to call 📱, or send me an email 📧.

✅ Follow me on Twitter to keep up to date with my Mobile News 📰 Postings!


Back to 🔝 of Page

Share with FacebookShare with Google+Share with LinkedInShare with Twitter

Speed 📉 Profile
★ ★ ★ ★ ★