A Mobile First Design Guide 2010
Luke Wroblewski gave his
first presentation about using a Mobile First strategy for designing websites on April 5th, 2010.
Mobile First Design strategy says when you design a website, you start sketching and prototyping on the smallest screen first and work your way up to larger screens. 2010
Ethan Marcotte introduced the concept of
Responsive Web Design (RWD) in an article that was published on May 25th, 2010.
Responsive Web Design (RWD) strategy, mobile websites are always an afterthought in the design process. Trends Affecting Mobile Navigation Menu 2007
When the first iPhone was released in 2007, it had a 3.5 inch screen.
Placing a navigation Menu on the top of the page that took very little space on the small screen was acceptable because, individuals were still able to use their thumbs to navigate a mobile web site.
In 2017, Phablets
(Smartphones with a screen size of 5.5 inches - 7 inches) accounted for 40% of all Smartphones shipped in 2017.
When using a Large Screen Smartphone and the Navigation Menu is positioned on the Top Of The Screen,
THIS IS NOT AN OPTIMAL THUMB ZONE AREA ON THE SCREEN! It's time for a different Mobile Navigation Menu Design! Design an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
Designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu is extremely difficult because the
THUMB ZONE AREA CHANGES depending on: The size of your hand The size of your Smartphone screen. Which hand you use when holding your Smartphone with ONE HAND.
research on mobile interaction and behavior shows that Smartphone users touch their phone's screens and hold their devices in different ways: One Handed - 49% Right Thumb on the screen - 67% Left Thumb on the screen - 33% Cradled - 36% Two Handed - 15% The first step is to identify the Optimal Thumb Zone Area on a Large Smartphone Screen! ✅ Use a web online tool to DRAW 🖍 Your Optimal Thumb Zone Area On Your Smartphone Screen! Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu Features 👍 It uses a HTML5 and CSS3 ONLY "Full Screen Overlay Scrolling Menu". 👍 It is both Transparent and Opaque to alert the user to Scroll Down to continue viewing additional Content, Menu Categories or Web Page Links that can not be displayed on the screen. 👍 The Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu: Is positioned at the bottom of the Smartphone screen. All Menu Categories and Links are "Centered". Is Optimized for "ONE HANDED" use with either the Left Hand or Right Hand. 👍 Follows the "unofficial web design" Three Click Rule. This rule recommends that web site visitors should be able to find any information with no more than three mouse clicks or touch actions! 👍 The Navigation Menu is very versatile and can also be used as an Ambidextrous, Thumb Zone Friendly, Mobile Mega Menu. Configure Web Pages To Function Like A Mobile Web APP
You are familiar with the
ADD A BOOK MARK OR ADD TO FAVORITES feature on all web browsers. It creates a link on your web browser of: The web page URL. The Title of the web page. This allows you to visit this web page at a future time.
ADD TO HOME SCREEN Mobile Feature used by the Android and IOS Mobile Operating systems has similar features: Creates a link of the web page URL. Adds a Custom Icon of your Business Logo. Adds a 12 Character Custom App Title Name. Stores the Web Page Link on your Smartphone Home Screen. This allows the web page to function like a Mobile Web APP! 👍 With JUST ONE TOUCH To The Custom Icon on your mobile device Home Screen, you can now access any web page: Without opening your mobile device Web Browser. Searching in different folders to find the booked marked web page. Searching Contacts to find a web page. A Simple Mobile Web App Set-Up 👍 Make these simple changes to EVERY WEB PAGE on your web site! Implement Apple Touch Icons on every web page. Add a unique name="apple-mobile-web-app-title" content="AppTitle" meta tag to every web page. Android devices do not use this meta tag so, change the web page title to match the AppTitle on every web page. Should You Design Web Content for the Apple ⌚ Watch? September 2018
Apple introduced the ability to display web content with the Series 4 Watch in 2018.
Series 3 watches are also able to take advantage of this feature as long as the watchOS operating system is upgraded!
No Other Smartwatch Is Able To Display Web Content!
Displaying any web content on the small screen requires configuration changes to the navigation menu, web page layout and, font size because the web page width is reduced by 50%!
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 web site 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 Check List For Configuring Web Pages For Speed ✅ 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! 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. Set Very High Expectations And Performace Goals! ✅ Test your web pages and web server performance from 25 different locations around the world! ✅ Test your web pages and web server performance using GTMetrix. ✅ Test your web pages and web server performance using Google's Page Speed Insights. ✅ Every one of my web pages receives a score of 100 on Google's Page Speed Insights Reports! Ask Yourself These Questions ❓ If you have an existing web site, does it meet these high expectations? ❓ If you are planning to design a new web site or redesign an existing web site, should the web site design meet these high expectations? ✅ This is why Mobile First is the only design strategy that will work in 2019 and beyond!
Would love to
hear your comments, opinions, and thoughts on the topic of Mobile First and Responsive Web Design (RWD) strategies. Looking forward to your responses!