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) is thought of as all the tasks focused on optimization of a product for an effective and enjoyable use. User Interface (UI) is how the website visitors interact and view your website!

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


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 Interface (UI) experience!

The latest Smartphone trend that affects the User Interface (UI) 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:
  1. Try holding a large Smartphone using just ONE HAND.
  2. Can your thumb finger reach the top of the Smartphone screen? PROBABLY NOT!
  3. Why is this important? When the Menu interface is located on the top of the page, it DOES NOT have an optimal THUMB User Interface (UI) when holding it with just ONE HAND!
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.

User Interface (UI) research recommends that considering the THUMB ZONE is a very important factor when designing the Navigation Menu User Interface (UI) of a mobile website. Steven Hobber's research on How Do Users Really Hold Mobile Devices and Designing for Larger Phones also provide great insight on this topic.

The Mobile First Menu interface that I have implemented has been optimized for optimal THUMB ZONE access when holding the Smartphone with just ONE HAND and has the following features:
  1. It uses Full Screen Overlay MENU button that uses VERY LITTLE SPACE on the screen.
  2. The Menu is aligned vertically in THE MIDDLE OF THE SCREEN.
  3. By default the Menu is positioned on the RIGHT SIDE of the screen. Why the right side? About 90 percent of the population is right handed.
  4. For visitors that use the LEFT hand when holding the Smartphone with just ONE HAND, they have the option to change the website settings to display the Menu on the LEFT side of the screen.
  5. The MENU is SCROLLABLE as the user views the content of the web page in either "Portrait" or "Landscape" mode. This ELIMINATES the need to scroll to the top of the page when the visitor wants to explore other web pages in your website.
  6. The MENU is also TRANSPARENT in order to help improve the readability of the web page.
  7. This MENU interface delivers a consistent Navigation User Interface (UI) ACROSS ALL DEVICES.

Configure the web server for speed by: OPTIMIZING WEB PAGE 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 using 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: 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.
  1. Quirk Tools allows you to view your web page screen layout on different screen sizes.
  2. 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. Preview the report.


Encourage you to follow me on Twitter and 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 share some ideas with you to address your concerns, issues, and questions!

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

Back to 🔝

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