A Mobile First Design Guide Design An Ambidextrous, Thumb Zone Friendly, Mobile Menu
If you are using a desktop or laptop to browse a web site, you probably are connected to the internet with a High Speed connection. When you visit a web site 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, 5G).
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 Embedding CSS Rules to reduce the number of Network Requests. Use PHP require ("css3_styling.inc"); to include and reuse the CSS rules instead of external style sheets! 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 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 ✅ 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. 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! Set a goal to achieve a Page Speed Score of 100 on Google's PageSpeed Insight Report ✅ All of my web pages Score 100 on Google's PageSpeed Insight Report! Configure your Web Pages to function like a Mobile Web APP You are probably familiar with the ADD A BOOKMARK OR ADD TO FAVORITES feature on all web browsers. It creates a link on your web browser of: The 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 14 Character Web Page Name. Adds a Custom Icon of your Business Logo. Stores the Web Page Link on your Smartphone Home Screen. This allows the web page to function like a Mobile 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 bookedmarked web page. Searching Contacts to find a web page. ⚠ Although the Add To Home Screen mobile feature is available on ALL MOBILE DEVICES, IT IS DEPENDENT on the Web Browser provided by the Operating System! Apple - Safari is the only browser that can exploit the Add to Home Screen feature. Android - Chrome is the only browser that can exploit the Add to Home Screen feature. Windows - Microsoft Edge or Internet Explorer are the only browsers that can exploit the Add to Home Screen feature. 3rd Party Browsers - Firefox, Opera Mini, TOR etc CAN NOT TAKE ADVANTAGE of the Add to Home Screen feature. Some Web Pages Do Not Exploit The Add To Home Screen Mobile Feature ⚠ Some web pages DO NOT INCLUDE AN APPLE TOUCH CUSTOM ICON AND A WEB PAGE NAME to be used in the Home Screen on every web page. This Icon appears like any Icon that any APP uses. ✅ Take a look at my business logo (6 faces depicting multiple skills) and the Icon on the Home Screen pictured below. It Is The Same Logo! Add To Home Screen Mobile Accessibility Feature Test To see if your mobile web site is configured properly, try adding any page of your web site to your Smartphone or Tablet Home Screen.
DO NOT KNOW how to do this, click here so that you learn how to add a mobile web site page to your Smartphone or Tablet Home Screen. ❓ If your test DID NOT SHOW a Custom Icon of your business logo: ❓ If your test DID NOT SHOW A 14 CHARACTER WEB PAGE NAME that makes your mobile web site look like a Mobile APP? It is using the TITLE of your web page! You need to ADD the name="apple-mobile-web-app-title" content="14 Character Web Page Name" meta tag to the web page! ❓ Do you have a Business Logo on your Business Cards? Why do you NOT HAVE the same logo as an Icon on your web pages? 👍 Configuring an ICON and 14 CHARACTER WEB PAGE NAME to every web page is a very simple change that BUILDS YOUR BRAND!