Click to call Raul Gonzalez, a Mobile First Website Designer and PHP Developer in Dallas, TX A Mobile First website design example and tutorial!

A Mobile First website design example and 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 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.

Designing a website with a Mobile First design strategy involves focusing on the following areas:

Optimize Navigation Menu for Thumb Zone Access on a Large Smartphone

The Navigation Menu is the MOST CRITICAL AND DIFFICULT area to optimize. My goal is to take into consideration FINGERS, THUMBS AND TOUCH for a consistent User Experience (UX)!

The latest Smartphone trend that affects the User Experience (UX) of a website is the popularity of large screen devices that are usually referred to as Phablets. These large Smartphone devices all have screen sizes between 5 1/2 to 8 inches. A large screen Smartphone creates a unique challenge for how the user interacts with the website.

Let's explore this challenge

✅ User Experience (UX) research indicates that we hold a Smartphone using just ONE HAND about 50% of the time. This usually happens when we are simultaneously performing other tasks such as carrying bags, steadying ourselves when in transit, climbing stairs, opening doors, holding babies, and so on.

✅ Considering the THUMB ZONE area of the Smartphone screen is a very important factor when designing the Navigation Menu User Experience (UX) of a mobile website. Steven Hobber's research on How Do Users Really Hold Mobile Devices and Designing for Larger Phones provide great insight on this topic.

✅ A very large percentage of mobile websites position the Navigation Menu either on the TOP LEFT or TOP RIGHT of the web page. A small percentage of mobile websites have chosen to use a scrolling menu but, the Navigation Menu is still located on the top of the screen!

Try holding a Smartphone using just ONE HAND.

✅ Can your thumb finger reach the top of the Smartphone screen? PROBABLY NOT!

✅ If you are holding the Smartphone with your right hand, can your thumb finger reach across to the top left of the Smartphone screen? PROBABLY NOT!

✅ If you are holding the Smartphone with your left hand, can your thumb finger reach across to the top right of the Smartphone screen? PROBABLY NOT!

❎ When the Navigation Menu is located on the top of the page, IT IS NOT POSITIONED in an optimal THUMB ZONE area of the screen!

In a Designmodo article titled 10 Web Design Trends to Try in 2017, Carrie Cousins discusses how the Navigation Menu DOES NOT need to be placed at the top of the page.

The Mobile First Navigation Menu uses the following features

✅ It uses the FIRST AMBIDEXTROUS Mobile Menu Navigation User Experience (UX). The Menu can be displayed on the LEFT or RIGHT side of the Smartphone screen by changing the website settings.

✅ When you hold a large Smartphone with ONE HAND, it provides optimal THUMB ZONE ACCESS to both the LEFT and RIGHT hand THUMB FINGER.

The CSS3 ONLY Full Screen Overlay Menu Button is designed to:

✅ Use the absolute minimum amount of space on the Smartphone screen by aligning the text vertically instead of horizontally.

✅ Is both TRANSPARENT and SCROLLABLE making it easily recognizable from the web page content and allows visitors to explore other web pages in the website without additional scrolling.

✅ It does not impact the readability of the web page content.

✅ It allows the web page content to be displayed using the full height of the Smartphone screen.

This Mobile First Navigation Menu delivers a consistent User Experience (UX) across all devices!

Optimize Web Server for Speed

Configure the web server for speed by:

✅ Enabling GZIP compression.

✅ Leveraging browser caching.

✅ Using HTTP Vary:Accept-Encoding header.

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

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!

When a web page gets displayed on a Smartphone or Tablet in 'Portrait' viewing mode, I have a goal to use:

✅ Different size images based on the width of the screen.

✅ 50 percent of the top of the screen to show the logo and images.

✅ 50 percent of the bottom of the screen to show the web page header and top of the web page.

There are two tools that I use regularly to test how the images are displayed on different screen sizes, determine web page size and total number of requests.

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

✅ PingDom 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.

Optimize Web Page Layout

This Mobile First web page layout has the following features:

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

The web page design uses Mobile Features such as:

✅ Back to Top

✅ Click-to-Call

✅ Add to Home Screen and a Digital Business Card.

✅ Email Forms that verify a valid visitor's email address domain name to cut down on SPAM emails.

✅ REAL TIME EMAIL AND SMS SERVER ALERTS when suspicious activity and or malicious intent is detected from a website visitor!

This Mobile First web page design delivers a consistent page layout across all devices!
✅ Take advantage of my 👍 FREE service to AUDIT your website!

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

Call me at 972-372-4237 or, send me an email with your existing or new website design project! My initial consultation is FREE and I can address any concerns, issues, and questions that you may have. Feel free to also follow me on Twitter.

Back to 🔝 of page

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