Click to call Raul Gonzalez, a Mobile First website designer and developer located in Dallas, Texas. Example of an Ambidextrous Mobile Navigation Menu that delivers the same User Experience (UX) on ANY SIZE screen device

A Mobile First Website Design Tutorial!

What is a Mobile First website design and why should you care?

With a Mobile First website design strategy, you start by optimizing the navigation menu interface and web page layout on a Smartphone screen. Once that analysis is completed, you then focus on how the web page layout looks on devices with larger screens such as tablets, laptops, desktops, large screen TVs and Projectors.

User Experience (UX) encompasses all aspects of the end-user's interaction with a company, its products, services and website.

When designing a website with a Mobile First design strategy, you have to focus on different areas.

Implement a THUMB ZONE Friendly Mobile Navigation Menu

Implementing a Mobile Navigation Menu with a Thumb Friendly 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.

Website designers and developers CANNOT CONTROL the size of your hand, your Smartphone screen size and, how you hold your Smartphone

👍 Website designers and developers CAN ONLY design and implement a Mobile Navigation Menu with a THUMB ZONE Friendly Mobile User Experience (UX)!

Do you know your personal THUMB ZONE area on your Smartphone screen?

👍 Use a web based interactive tool to draw and view your Optimal personal THUMB ZONE area on your Smartphone screen!

The Mobile Navigation Menu has the following features

👍 The Ambidextrous Navigation Menu of this website is positioned at the Bottom of the Screen and also delivers the same User Experience (UX) across different screen size devices! Example of an Ambidextrous Mobile Navigation Menu that delivers the same User Experience (UX) on ANY SIZE screen device Example of an Ambidextrous Mobile Navigation Menu that delivers the same User Experience (UX) on ANY SIZE screen device

👍 When holding the Smartphone with ONE HAND, it provides OPTIMAL THUMB ZONE ACCESS to both the LEFT and RIGHT hand THUMB FINGERS on ANY SIZE Smartphone screen! An Ambidextrous Mobile Navigation Menu designed for OPTIMAL THUMB ZONE access on ANY SIZE Smartphone screen

Optimize Web Page Layout

✅ I use a single web page layout that can scale from a small Smartphone screen to a large screen TV without CSS3 Media Queries.

✅ Is compatible with older web browsers that run under the Microsoft Windows 7 operating system.

✅ I use Quirk Tools to view the web page screen layout on different screen sizes.

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

Checklist for configuring web pages for speed

✅ Use HTML Unicode Characters instead of small images whenever possible.

✅ Avoid using Javascript as much as possible. The ONLY Javascript that I use on this website is for Google Analytics!

✅ Minimize all HTML, CSS3, and Javascript code.

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!

✅ Use CSS Sprites to reduce the number of requests of Social Media Icon images.

✅ Compress ALL Images.

Anything that you can do reduce the transfer size (i.e. bites sent from web server to the device), will help your web page load faster

Optimize your Web Server for Speed

Checklist 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

👍 GTMetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

👍 Test your web page and web server performance from 14 different locations around the world.

Call to Action and Social Media

Picture of Raul Gonzalez

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

👍 Check out and follow my Twitter Profile so that you can read and be notified of my latest news article postings!

Back to 🔝 of page

Share with Facebook Share with Google Share with Linkedin Share with Twitter