Hello 👋
I am Raul Gonzalez, a Mobile First web developer in Dallas, TX.
Are you aware that globally, 68.1% of all web site visits in 2020 came from mobile devices an increase from 63.3% in 2019. Desktops drove 28.9% of visits, while 3.1% of visitors came from tablets.
✔ Check out the latest Mobile vs. Desktop Web Traffic Statistics and Trends.
👍The Mobile First web design is a strategy that starts with analyzing the layout and requirements of the smallest screen first. It focuses on identifying and exploiting every possible mobile and wearable web feature and, optimizing web pages for speed!
To familiarize yourself with my design features and objectives, you can:
1Scroll Down the page.
2Click or Tap any of the links in the Table of Contents.
These Are My Mobile First Web Design Features And Objectives
👍Achieve a web page Time to Interactive goal of under 1 second on every web page.
👍Provide the absolute best Mobile User Experience (UX) to visitors that exploits all mobile and wearable features by using:
1A Single Column web page layout that can be viewed on any size screen.
2An Ambidextrous, Thumb Zone Friendly Mobile Navigation Menu that provides visitors a consistent browsing user experience on any size screen.
Smartphones with a display larger than 6.5 inches are no longer the exception. Developers should make it a priority to stop using the "Hamburger" navigation menu and instead design for One-Handed use!
👍Avoid using JavaScript and Content Management System (CMS) software because they impact a web page Time to Interactive!
👍Exploit the benefits of using a Digital Business Card that:
1Can be added to any website so that it can be hosted under your own domain name.
2The web page is interactive in under 1 second.
3You can view the web content of the Digital Business Card on the small screen of an Apple ⌚ Watch, initiate a phone call, visit my website Home Page and, exploit other neat features!
👍Configure web pages to use Open Graph Protocol graphics to drive more Social Media traffic to my website.
Avoid Using JavaScript
JavaScript is the most expensive resource used when loading a web page!
The web browser has to perform the following actions for every JavaScript code that is used on your web page and this severely impacts a web page Time to Interactive!
1Download the code over the network (Cellular or Internet)
2Parse the code
3Compile the code
4Execute the code
✔ Encourage you to watch a video by Addy Osmani titled The Cost of JavaScript.
There are valid reasons for using JavaScript however, AVOID USING IT when the functionality needed can be implemented by using other web technologies!
My website does not use any JavaScript! All Animations are done using CSS3.
The dominant costs of processing JavaScript is download and CPU execution time. These functions do not take advantage of multi-core processing!
😮 You are going to be very surprised when you compare the difference between Android and IOS Single-Core score GeekBench 5 benchmarks.
✔ Compare the Single-Core score of Apple's iPhone 12 Pro Max to Samsung's Galaxy S21 5G and Galaxy Z Fold2 5G.
Avoid Using Content Management System (CMS) Software
1JavaScript is used extensively in all Content Management System (CMS) Software and this severely impacts a web page Time to Interactive!
| JavaScript Bytes by CMS |
|---|
| Drupal |
| Magento |
| Wordpress |
| Page Loading Speed by CMS |
| Drupal |
| Magento |
| Wordpress |
2Websites that use CMS platforms are common hacking targets!
👍This website HAS NEVER BEEN HACKED after been redesigned more than a dozen times during the last 20 plus years!
😡 Hackers from all over the world visit my website assuming that it uses CMS software. They execute automated scripts trying to identify vulnerabilities that consistently generate over 1,500 Error 404 Events on a monthly basis!
My website does not use any Content Management System (CMS) Software!
Configure Web Pages To Function Like A Mobile Web App
Native apps are downloaded from an app store (such as Apple’s App Store or Google Play) and, are developed for a specific operating system.
Mobile Web apps are not real applications; they are websites that behave and look like native apps and run under the control of the web browser (Safari or Chrome).
Reference the Safari Web Content Guide for Configuring Web Applications and follow the instructions:
1Configure a "Webpage Icon for Web Clip" meta tag 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.
2Configure a "Launch Icon Title" by adding the apple-mobile-web-app-title meta tag to every web page.
3Android devices do not use the apple-mobile-web-app-title meta tag! Instead, change the web page HTML title to match the meta tag content="?????????" on every web page.
👍This HTML ONLY CONFIGURATION allows mobile visitors to:
1Create a "Bookmark" of the Digital Business Card by exploiting the web browser Add to Home Screen feature.
2Have ONE TAP ACCESS to my contact information and website content without having to search the Contacts App or opening a web browser.
Configure Web Pages To Use Open Graph Protocol
Open Graph Protocol has been around since 2010 and it tells social media sites like Facebook, Twitter, Pinterest, LinkedIn and Text Messaging Apps what information to display when anyone receives a link to your web page! 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 Metadata Properties to drive more Social Media traffic.
You have no control how your visitors share links to your website on Social Media sites! You can test your web pages to find out if they are configured for Open Graph Protocol.
Exploit Digital Business Card Features
For hundreds of years, paper business card have represented your company's brand. Not only did it convey important personal contact information such as name, title, address, and phone number, but oftentimes it was also the first exposure to the overall image of the business.
If you answered yes then, why are you still using a "Business Tool" that can never adapt, compete and exploit Digital Technology? Do you think you can run a business without using tools like Computers, Email, Smartphones, Social Media and other software that exploit digital technology?
A Digital Business Card is a small web page that contains the same information. Like traditional paper Business Cards, Digital Business Cards can be shared with anyone. There are no space constraints and you can add as much or as little information to your digital card as you like. You are conveying a unique image and message to prospective clients that is different from your competition!
👍My Digital Business Card can be added as an "Add On Feature" so that they are hosted under your own website domain name!
Instead of exchanging a traditional paper Business Card, use your Smartphone Messages App to share the Digital Business Card that can be viewed on any size screen!
👍How much do you spend on an annual basis for traditional paper business cards? You are eliminating or reducing business operating expenses associated with ordering traditional paper Business Cards for you and your staff.
👍When mobile visitors create a "Bookmark" of the Digital Business Card web page by exploiting the Add to Home Screen web browser feature, the web page will function like a Mobile Web App and users now have ONE TAP ACCESS to my contact information and web content without having to search the Contacts App or opening a web browser!
👍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 share your Digital Business Card with friends, neighbors, and their business associates!
Never assume that the person receiving a link to a Digital Business Card knows how exploit every Smartphone or Apple Watch feature!
👍The How to Guide links provide prospective clients detail instructions on how to exploit different Digital Business Card 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!
✔ TAP the link to display the Digital Business Card.
✔ TAP the phone number link to initiate a phone call.
✔ TAP the website URL link to view my website Home Page.
✔ TAP the Address Link to obtain driving, transit, or walking directions.
Why Consider A Mobile First Web Design?
I have been a web developer for over 20 years, and have tried may different web design methodologies and software. In my opinion, the Mobile First Web Design strategy is the best option for the foreseeable future. See what others are also saying.
If you are a business owner, have a website and would like an analysis of your current design or want to implement some of the features that I use, feel free to contact me.
Would love to hear your comments, opinions and thoughts on this topic!