This design methodology allowed developers to use a new web browser feature called CSS3 Media Queries that is able to display the content of web pages designed for desktop monitors on the small screen of Smartphone devices!
With a Responsive Web Design (RWD) strategy, mobile websites are always an afterthought in the design process. Instead, focus on the Mobile user needs first and design for the devices that they are using the most (i.e, Smartphones with large screens).
Trends Affecting Mobile Navigation Menu
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.
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.
Optimize Web Page Layout
👍 My Mobile First Design allows visitors to experience the same web page layout and Navigation Menu User Experience (UX) on different size screen devices.
Should You Design Web Content for the Apple ⌚ Watch?
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 web page layout and font size because the web page width is reduced by 50%.
Apple Watch Owners Do Not Surf The Web On Their Devices!
✅ There is no Safari Web Browser App in the watchOS operating system.
✅ watchOS integrates Apple's WebKit web layout engine.
✅ It uses Safari's Reader Mode to display web pages.
✅ Web content is supported ONLY in the Apple Watch Messages and Mail App when someone shares a web page link and the user chooses to open the link on their Apple Watch.
Avoid Using Content Management System Software
This site DOES NOT 👆 USE ANY Content Management System (CMS) Software!
Optimize Web Pages for Speed
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).
Set goal to achieve a Page Speed Score of 100 on Google's Page Speed Insight Report
✅ All of my web pages Score 100 on Google's Page Speed Insight Report!
CSS3 Check List For Configuring Web Pages For Speed
✅ 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!
Graphics Check List For Configuring Web Pages For Speed
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