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:
OPTIMIZING THE NAVIGATION MENU
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 to 7 inches (i.e. IPHONE 7 PLUS, Samsung Note, etc). A large screen Smartphone creates a unique challenge for how the user interacts with the website. Let's explore this challenge:
Try holding a large Smartphone using just ONE HAND. Do you use a similar grip as pictured on the top of the page?
Can your thumb finger reach the top of the Smartphone screen? PROBABLY NOT!
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) for a large Smartphone when trying to hold it with just ONE HAND!
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 design that I have implemented, addresses this challenge by:
Using a CSS3, Floating, and Full Screen Overlay MENU button that takes very little space on the Smartphone screen.
The Menu button is:
Positioned on the RIGHT SIDE of the screen. Why the right side? About 90 percent of the population is right handed.
Aligned vertically in THE MIDDLE OF THE SCREEN FOR OPTIMAL THUMB ZONE access. This allows users to use EITHER THE LEFT HAND OR RIGHT HAND THUMB FINGER to easily interact with the MENU navigation when holding the Smartphone with just ONE HAND.
SCROLLABLE as the user views the content of the web page in either "Portrait" or "Landscape" mode. This reduces scrolling when the visitor wants to view other web pages in your website.
OPTIMIZING 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).
Optimize the Apache web server by enabling compression, leveraging browser caching and specifying a "Vary:Accept-Encoding" header.
Images can take a very large percent of the total size of the web page and must be compressed. 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. 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 width and 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 and determine page size.
Quirk Tools allows you to see your web page screen layout on different devices sizes.
PingDom allows you to quickly analyze the web page load speed and size by content type (i.e. HTML, Images), number of network requests. It also provides you suggestions for improvement. Preview the report.
OPTIMIZING 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.
The Navigation MENU User Interface (UI) is:
Optimized for ANY SIZE Smartphone.
Optimized for FINGERS, THUMBS AND TOUCH
Takes very little space on the screen thus, focusing on the content of each web page.
Delivering a consistent Navigation User Interface (UI) ACROSS ALL DEVICES.
Both the web page main section and footer layout adjust to the screen size width of the device. You can choose different color backgrounds, rounded corners, square corners, borders and, any other styling that you want.
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 WEBSITE DESIGN DELIVERS A CONSISTENT USER INTERFACE (UI) LAYOUT ACROSS ALL DEVICES!
Call me at 972-372-4237 or send me an email with your feedback and 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.