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 that 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.
When designing a website with a Mobile First design strategy, you have to focus on different areas.
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.
👍 The 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.
Implement Mobile Accessibility Features
My Mobile First Website Design exploits all Mobile Accessibility Features such as:
✅ Email Forms that verify a valid contact email address domain name and blocks receiving emails from countries outside of the US to cut down on SPAM emails.
👍 I use the SAME WEB PAGE LAYOUT AND MENU NAVIGATION that can scale from a small Smartphone screen to a Large Screen TV without using CSS3 Media Queries and is compatible with web browsers running BOTH CURRENT AND OLDER VERSIONS of Apple, Android an Windows operating systems.
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).
✅ AVOID USING JavaScript AT ALL COST! The ONLY JavaScript that I use on this website is for Google Analytics!
✅ Addy Osmani, a Manager at Google has published an articled titled The Cost Of JavaScript that all Web developers need to read, understand and follow when developing websites.
Use appropriate size images for the device being used
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.
✅ 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!
