Hello 👋 and welcome
My Mobile First web design exploits Apple Watch, and mobile web features that are usually not found on most websites and web pages are interactive in under 1 second!To familiarize yourself with my Mobile First web design features, you can either:
1Scroll Down the page
2Click or Tap any of the links in the Table of Contents
Table of ContentsThese Are My Mobile First Web Design Features And Goals
👍Avoid using JavaScript and Content Management System (CMS) software.
👍Achieve a Time to Interactive goal of under 1 second when using Google's Lighthouse speed test.
👍Provide the absolute best Mobile User Experience (UX) to web site visitors that exploits all mobile and wearable features.
👍The Ambidextrous, Thumb Zone Friendly Mobile Navigation Menu provides web site visitors a consistent browsing user experience that can scale up to any size tablet, laptop, desktop, and Smart TV screen!
👍Exploit the benefits and features of using a Digital Business Card and take advantage of unique Apple ⌚ Watch web content features!
👍Allow mobile visitors ONE TAP ACCESS to my web site by configuring web pages to function like a Mobile Web App.
👍Configure web pages to use Open Graph Protocol graphics to drive more Social Media traffic to my website.
Mobile vs. Desktop Trends
✔ Check out the latest Desktop vs. Mobile vs. Tablet Market Share
✔ Check out the latest Mobile vs. Desktop Traffic Statistics.
Mobile First Web Design vs. Responsive Web Design (RWD)
April 2010
Luke Wroblewski gave his first presentation about using a Mobile First Design methodology on April 5th, 2010.
By focusing on exploiting all mobile and wearable features at the start of the web design process, your website will deliver a Mobile User Experience (UX) (page layout, speed, and navigation menu) to visitors that can scale up to any size screen!
May 2010
Ethan Marcotte published an article about using a Responsive Web Design (RWD) methodology on May 25th, 2010.
With this methodology, the mobile analysis was only focused on reformatting a desktop page layout to fit in the small Smartphone screen!
Do You Know The Cost Of Using JavaScript?
JavaScript is the most expensive resource used when loading a web page!
Every JavaScript piece of code that is used on your web page needs to be:
1Downloaded over the network (Cellular or Internet)
2Parsed
3Compiled
4Executed
Not all Smartphones have the same processing power to perform these functions!You are going to be very surprised when you compare IOS versus Android Single Core and Multi Core GeekBench 5 Benchmark scores:
✔ Check out the GeekBench 5 IOS Benchmarks
✔ Check out the GeekBench 5 Android Benchmarks
Recommend that you read the following articles and watch a video✔ Read an article from Tim Kadlec titled The Cost of JavaScript Frameworks.
✔ Read an article from Houssein Djirdeh titled How much JavaScript do we use?
✔ Watch a video by Addy Osmani titled The Cost of JavaScript and follow his recommendations!
The only time you should use JavaScript is when the functionality you need cannot be implemented by using other web technologies!
?How many seconds does it take for your web pages to be interactive?
✔ Run a speed test on every one of your web pages and determine if the functionality of each specific JavaScript code can be accomplished by using CSS3 or if it is needed.
My website does not use any JavaScript. All Animations are done using CSS3.
Avoid Using Content Management System (CMS) Software
My website does not use any Content Management System (CMS) Software.
1Websites that use any Content Management System (CMS) Software have a higher risk of being hacked!
2Review these website hacking statistics and determine if your website is at risk.
3JavaScript is used extensively in all Content Management System (CMS) Software and this severely impacts a web page Time to Interactive!
✔ Check out all the web technologies used in my website!
Configure Web Pages To Function Like A Mobile Web App
When mobile website visitors create a "Bookmark" of a web page on any Smartphone Home screen, you are allowing them ONE TAP ACCESS to your web content!
1Implement Apple Touch Icons on every web page. This involves creating several small images of your business logo and updating every web page so that the business logo is referenced on every page.
2 Add a unique meta name="apple-mobile-web-app-title" content="?????????" Meta tag to every web page.
3 Android devices do not use this Meta tag so, change the web page title to match the content="?????????" name on every web page.
?Can this configuration provide your website visitors a Mobile User Experience (UX)?
This simple HTML ONLY web page configuration exploits the mobile web browser features and mitigates the cost of developing a Mobile Web App!
Exploit Digital Business Card Features
Do you still use traditional paper business cards? If you answered yes then, why are you still using a "Business Tool" that can never adapt, compete and exploit Digital Technology?
Instead of exchanging a traditional paper Business Card, use your Smartphone Messages App to share the Digital Business Card!
When you use a Digital Business Card, you can take advantage of the following benefits and features:
👍You are eliminating or reducing business operating expenses associated with ordering traditional paper Business Cards for you and your staff. How much do you spend on an annual basis for traditional paper business cards?
👍The Digital Business Card web page can be added as an "Add On Feature" to any website and will be hosted under your own website domain name!
👍When mobile website visitors exploit the Add to Home Screen web browser feature, the Digital Business Card will function like a Mobile Web App and you will have ONE TAP ACCESS to my contact and website information from your Smartphone Home Screen without having to search the Smartphone Contacts App!
👍Your Digital Business Card can use either a "Traditional Business Logo" or your picture which has a "Social Media" look for Apple Touch Icons.
👍You are always ready to share your Digital Business Card with a potential client even if you do not have your Smartphone with you!. Any website visitor can also share your Digital Business Card with friends, neighbors, and their business associates!
👍You are conveying a unique message to a prospective client that is different from your competition!
Apple Watch
Web Features
Apple Watch Series 3, 4, 5, 6 and SE models are the only devices that support limited viewing of web content on your wrist!
When a person that wears an Apple Watch receives a text message with a link to my Digital Business Card, they have the option to:
✔ TAP the Open Graph Protocol Image Link within the "Messages App" to display the Digital Business Card webpage on the small screen of an Apple Watch!
👍Apple Watch users have the option to TAP web page links such as:
✔ CALL any of the phone numbers listed.
✔ GET driving, transit, or walking directions to your business if an address was provided.
Configure Web Pages To Use Open Graph Protocol Graphics
Most businesses already have a Social Media Presence however, the vast majority of web developers fail to configure each web page with Open Graph Protocol graphics to drive more Social Media traffic. The Open Graph Protocol has been around since 2010 and it tells social media networks like Facebook, Twitter, Pinterest, LinkedIn and Text Messaging Apps what graphic information to display when anyone receives a link to a web page!
If your business has a Social Media presence, are your web pages configured to use Open Graph Protocol Graphics to drive more traffic to your website?
✔ Click here to view the Open Graph Protocol Graphics and meta tags used in this web page.
Should You Consider A Mobile First Web Design?
Should you consider a Mobile First web design if you are developing or redesigning a website?
Would love to hear your comments, opinions and thoughts on this topic!