A Mobile First Design Guide

What Is A Mobile First Design?

April 5th, 2010

Luke Wroblewski gave his first presentation about using a Mobile First methodology for designing websites on April 5th, 2010.

He published a book titled Mobile First on October 18th, 2011.

He is a top rated speaker that has given 367 presentations and workshops to companies and conferences around the world.

The Mobile First Design focuses on the Mobile User Experience (UX)

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.

✅ Draw 🖍
Your Optimal Thumb Zone Area On Your Smartphone Screen!

👍 The Thumb Friendly Ambidextrous Mobile Navigation Menu of this website is positioned at the Bottom of the Screen and provides OPTIMAL THUMB ZONE ACCESS to both the LEFT and RIGHT Hand THUMB FINGERS.

A Thumb Friendly Ambidextrous Mobile Navigation Menu designed for OPTIMAL THUMB ZONE Access on ANY SIZE Smartphone screen

✅ Experience a Mobile Menu with 35 Categories and 293 Page links!

Use Subliminal Messages To Reduce The Bounce Rate

Everyone has used a Post It or Sticky Note as a Reminder to take some kind of action at some point in time!

👍 Throughout all of my web pages, I use a Reminder Note that is very similar to a Post It or Sticky Note to send a Subliminal Message to my visitors.

👍 My Reminder Note is not an image and is displayed with Cascading Style Sheets (CSS3)!

The ✅ Check Mark symbol is usually associated with having completed an action or task.

My website has several Landing Pages and in order to decrease my Bounce Rate, you will see:

A question trying to get the visitor's attention.
A Reminder Note with a Subliminal Message to click on a link and visit another web page to answer the question.

See Example Below

Can You Answer These Trivia Questions About Web Design?

❓ When was the FIRST WEBSITE launched?

❓ What was the NAME of the developer that created the FIRST WEBSITE?

✅ Find the answers to the Web Trivia Questions
👇
HERE

When visitors respond to the Subliminal Message, they will click or touch a link to visit another page and I have succeeded in:

Reducing my website Bounce Rate. 👏
Increasing my Google Analytics Web Page Count. 👏

👍 All web pages have at least one Reminder Note!

Optimize Web Page Layout

👍 My Mobile First Design DOES NOT ❌ USE any Content Management System (CMS) software!

👍 The Web Page Layout and AMBIDEXTROUS Mobile Navigation Menu delivers a Mobile APP like User Experience (UX) on different size screen devices!

Click on image to Draw your Personal Thumb Zone area on your Smartphone screen

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

Anything that you can do to reduce the Total Page Size (HTML, CSS, Images, JavaScript, etc) and the NUMBER OF NETWORK REQUESTS, WILL HELP THE WEB PAGE LOAD FASTER!

Check list for configuring web pages for speed

CSS3

✅ Verify that there are No CSS3 Errors on the CSS3 component of the web page!

✅ Minify CSS3 code of the web page to reduce the Total Page Size!

✅ Consider Inlining CSS Scripts to reduce the number of Network Requests. Use PHP
require ("css3_styling.inc"); to include and reuse the CSS3 definitions instead of using links!

Graphics

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!

✅ If there are several images that are used in every web page, strongly encourage to use CSS Sprites to reduce the number of network requests to the server.

HTML

✅ Use HTML Character Entities instead of small images whenever possible.

✅ Verify that there are No HTML Errors on the web page!

✅ Minify HTML code of the web page to reduce the Total Page Size!

JavaScript

⚠ BYTE-PER-BYTE JAVASCRIPT IS THE MOST EXPENSIVE RESOURCE THAT WE USE ON A SMARTPHONE WHEN LOADING A WEB PAGE. I AVOID USING IT UNLESS IT IS ABSOLUTELY NECESSARY!

✅ Understand and follow Google's suggestions for the use of JavaScript!

✅ THE ONLY JAVASCRIPT THAT I USE ON THIS WEBSITE IS FOR GOOGLE ANALYTICS!

✅ All validation of Form Input Fields is done with PHP on the web server.

Optimize your Web Server for Speed

Check list 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

✅ Test your web page and web server performance locally using GTMetrix.

✅ Test your web page and web server performance from 25 different locations around the world!

Exploit All Mobile Accessibility Features

Use a Digital Business Card that allows website visitor to:
- Create New Contact on their 📱 Smartphone
- Add My Digital Business Card to their 📱 Smartphone Home Screen
- Share My Digital Business Card with their 📱 Smartphone email, text messaging and social media Apps
- Has a layout that is both READABLE AND RESPONSIVE on the small screen of an Apple Watch ⌚.
Use the Back to Top 📱 Mobile Accessibility Feature.
Use the Click-to-Call 📱 Mobile Accessibility Feature.
Use the Add to Home Screen 📱 Mobile Accessibility Feature.
Linking a business address to Google's Voice Activated Driving Directions.

Call to Action and Social Media

✅ Contact me to discuss a Custom Digital Business Card for your business!

Back To 🔝 Of Page

Speed 📉 Profile
★★★★★