Click to call Raul Gonzalez, a Mobile First website designer and developer located in Dallas, Texas. Check out my 6 Min video! The THUMB ZONE of an IPHONE 8 PLUS

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 Navigation Menu

The Navigation Menu is the MOST CRITICAL AND DIFFICULT area to optimize.

User Experience (UX) research shows that:

✅ 49% of the time, we hold a Smartphone using just ONE HAND.
✅ The THUMB has a limited range of motion when you hold your Smartphone using just ONE HAND.
The Smartphone screen THUMB ZONE area changes depending on:
✅ The size of the hand.
✅ The size of your Smartphone screen.
✅ Which hand is being used to hold the device using just ONE HAND.

Do you know your personal THUMB ZONE area?

Click here to view your personal Smartphone screen THUMB ZONE area.

Website designers cannot control how you hold your Smartphone.

They can only design a Navigation Menu with a THUMB ZONE Friendly User Experience (UX)!

A Mobile First Navigation Menu that has the following features

✅ It uses an AMBIDEXTROUS Mobile Navigation Menu User Experience (UX).
✅ As a result of the popularity of Bezel-Free Large Screen Smartphone devices, the Navigation Menu is positioned at the bottom of the page.
✅ When you hold a large Smartphone with ONE HAND, it provides optimal THUMB ZONE ACCESS to both the LEFT and RIGHT hand THUMB FINGER.
✅ This Mobile First Navigation Menu also delivers the same User Experience (UX) across different screen size devices!

Optimize Web Page Layout

✅ My Mobile First Website Design will display the SAME WEB PAGE LAYOUT User Experience (UX) across different screen size devices!

✅ This web page layout is compatible with older web browsers that run under the Microsoft Windows 7 operating system.

✅ The header of the web pages has images that are centered. It displays different size images based on the screen size of the device.

✅ Both the web page main section and footer layout adjust to the screen size width of the device. You can choose different color backgrounds, gradient colors, rounded corners, square corners, borders and, any other styling that you want.

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

✅ 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 and CSS3 definitions.

✅ Compress ALL Images.

✅ Use the HTML Picture Tag to display the appropriate size images.

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. I try to show only one optimized image per page and this helps improve the page load speed!

There are two tools that I use regularly to test how the images are displayed on different screen sizes, and improve web page speed.

✅ Quirk Tools allows you to view your web page screen layout on different screen sizes.

✅ GTMetrix allows you to quickly analyze the web page load speed, size by content type (i.e. HTML, Images), and total number of network requests. It also provides you suggestions for improvement.
👍 Check out the GTMetrix Benchmark Performace Report!


Page Speed Score
A (100%) 👍
Page Load Time
.499 Milliseconds 👍
Total Page Size
43.3 Kilobytes 👍
# Network Requests
10 Requests 👍


Optimize your Web Server for Speed

Configure the web server for speed by:

✅ Implement GZIP compression.

✅ Implement browser caching.

✅ Use HTTP Vary:Accept-Encoding header.

Call to Action and Social Media

I tweet regularly about news articles that I come across related to these topics:

✅ How businesses can benefit from Mobile Technology.

✅ Mobile internet growth.

✅ Mobile web design trends.

✅ Search Engine trends, usage and statistics.

✅ Smartphone trends, usage and statistics.
👍 Encourage you to follow me on Twitter so that you can keep up with the latest news 📰


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

✅ If you found the information on this web page helpful, please consider adding this page to your 📱 Home Screen.

Back to 🔝 of page

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