Raul Learn How To Design Websites That Are Interactive In Under 1 Second

Hello 👋   and welcome!

I am a Mobile First web developer that explores concepts, designs and ideas that are innovative, unconventional and not based or limited by industry traditions!

To learn why you should design fast websites that are interactive in under 1 second, you can either:

✔ Scroll Down the page

✔ Click or Tap any of the links in the Table of Contents

Table of Contents
Facts And Trends That Should Influence Your Website Design
These Are My Mobile First Web Design Features and Objectives
Exploit The Benefits And Features Of Using A Digital Business Card
Configure WebPages To Behave Like A Mobile Web App
Configure WebPages To Use Open Graph Protocol
Avoid Using JavaScript
Avoid Using Content Management System (CMS) Software
Should You Consider A Mobile First Web Design Strategy?

1Learn which countries have the fastest and slowest Internet Speeds.

2Are you aware that globally, 68.1% of all website 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.

3The Pew Research Center published a study on June 2021 and determined that 15% of US adults are Mobile-Only internet users. These users do not have access to a high speed internet connection at home and rely solely on their Smartphone.

4It is estimated that by 2025, nearly three quarters of the world's mobile users are expected to be Mobile-Only internet users.

These Are My Mobile First Web Design Features and Objectives

👍Every webpage achieves a Time to Interactive goal of under 1 second in both the Mobile and Desktop categories of Google's Page Speed Insights report.

👍The web server is also optimized for speed by exploiting HTTP/3 and LiteSpeed Turbo software from www.a2hosting.com.

👍I use a Single Column webpage layout similar to what users experience on Mobile Apps that adapts to any size screen.

👍Developed an "Unconventional" Ambidextrous, Thumb Zone Friendly Navigation Menu that provides visitors a consistent website navigation user experience (UX) on any size screen and can also be used as a Mobile Mega Menu.

👍Exploits the benefits and features of using a Digital Business Card that can be added as an "Add On Feature" to any website so that they are hosted under your own website domain name.

👍As far as I know, it is the Only Digital Business Card that exploits limited viewing of web content on select Apple Watch devices!

My Digital Business Card being displayed on any Smartphone and selected Apple Watch devices!

👍Every webpage is configured to behave like a Mobile Web App allowing mobile users to have ONE TAP ACCESS to my contact information and website content without having to first search the Contacts App or opening a web browser!

A HTML ONLY configuration that makes the Add to Home Screen web browser feature function like a Mobile Web App

👍Every webpage is configured to use Open Graph Protocol graphics to drive more Social Media traffic to my website.

The software you use on your website has a SIGNIFICANT IMPACT on your ability to deliver the absolute fastest Mobile User Experience (UX) to your visitors!

👍Avoids the use of JavaScript and Content Management System (CMS) software because they severely impact how fast the webpages are Interactive!

Exploit The Benefits And Features Of Using A Digital Business Card

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?

For hundreds of years, paper business card have represented your company's brand. When you exchange a traditional paper business card, you are not providing just your personal contact information such as name, title, address, email and phone number and website name. You are providing the first exposure to the overall image of the business!

What Is A Digital Business Card?

A Digital Business Card is a small webpage that contains the same information as traditional paper Business Cards. There are no space constraints and you can add as much or as little information to your digital card as you like.

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!


What Are The Benefits and Features Of Using A Digital Business Card?

👍By using Digital Business Cards, 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?

👍When you use a Digital Business Card, your are conveying a different image and message to prospective clients that is different from your competition!

👍The Digital Business Card can be added as an "Add On Feature" to any website so that they are hosted under your own website domain name.

👍The Digital Business Card can use either a "Traditional Business Logo" or your picture which has a "Social Media" look for Apple Touch Icons.

👍The Features links provide prospective clients detail instructions on how to exploit different Digital Business Card features.

👍When mobile visitors create a "Bookmark" of the Digital Business Card webpage by exploiting the Add to Home Screen web browser feature, the webpage 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!

👍Have you ever been in a situation where someone asked you for a Business Card but, you did not have any with you? You are always ready to share your Digital Business Card with a potential client even if you do not have your Smartphone with you! Anyone can share your Digital Business Card with friends, neighbors, and their business associates!

How To Exploit The Apple Watch Web Content Features Of The Digital Business Card?

Only Apple Watch devices running WatchOS 5 or higher can exploit limited viewing of web content on your wrist!


When the Apple Watch Messages App notifies the user of a message containing a link to my Digital Business Card, the user has the option to

✔ TAP the link on their Apple Watch Messages App to display the Digital Business Card webpage on the small screen on the user's Apple ⌚ Watch.

My Digital Business Card displayed on the small screen of an Apple ⌚ Watch

✔ Scroll Down the page.

✔ TAP the Digital Business Card Address Link to obtain driving, transit, or walking direction notifications on the user's Apple ⌚ Watch.

To exploit this feature, the Apple Watch Map App settings needs to be configured to receive TURN ALERTS and SHOW NAVIGATION Transit Notifications on the user's Apple ⌚ Watch.


Apple Watch Map App Settings to receive driving notifications on the small screen of an Apple ⌚ Watch

✔ TAP the Digital Business Card Phone Number Link to initiate a phone call from the user's Apple ⌚ Watch.

Configure WebPages To Behave Like A Mobile Web App

This HTML ONLY CONFIGURATION allows mobile visitors ONE TAP ACCESS to my contact information and website content without having to search the Contacts App or opening a web browser.

Reference the Safari Web Content Guide for Configuring Web Applications and:

1Configure a "Webpage Icon for Web Clip" meta tag on every webpage.

2Configure a "Launch Icon Title" meta tag on every webpage

3Change the webpage Title to match the "Launch Icon Title" because Android Smartphones do not use the apple-mobile-web-app-title meta tag.

Configure WebPages To Use Open Graph Protocol

You have no control how your visitors share links to your website on Social Media sites! You can test your webpages to find out if they are configured for 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 webpage! Most businesses already have a Social Media Presence however, the vast majority of web developers fail to configure each webpage with Open Graph Protocol Metadata Properties to drive more Social Media traffic.

Avoid Using JavaScript

JavaScript is the most expensive resource used when loading a webpage!

The web browser has to perform the following actions for every JavaScript code that is used on your webpage and this severely impacts a webpage Time to Interactive!

1Download the code over the network (Cellular or Internet)

2Parse the code

3Compile the code

4Execute the code

Not all Smartphones, Tablets and Computers have the same CPU processing power to process JavaScript requests!

You are going to be very surprised when you review the Android and IOS GeekBench 5 Single Core CPU scores that process all JavaScript requests.

✔ Compare the GeekBench 5 Single Core CPU Scores of these Andriod and IOS Devices.

Andriod Devices
Samsung Galaxy Tab S7
Samsung Galaxy S21 5G
Samsung Galaxy S21 Ultra 5G
Samsung Galaxy Note20 Ultra 5G
Samsung Galaxy Z Fold2 5G
IOS Devices
iPad Pro M1
iPhone 12 Pro Max
iPhone 11 Pro Max
iPhone XS Max
iPhone 8 Plus

Google CONTROLS ONLY the operating system on Android devices. Each smartphone manufacturer can select different CPU processors and speed!

Apple CONTROLS BOTH the hardware and operating system on all of their devices. This is why all Apple products (Smartphones, Tablets, Laptops and Computers) will always have faster CPU scores than Google and Microsoft devices!


✔  Encourage you to watch a video by Addy Osmani titled The Cost of JavaScript.

✔  Evaluate every single JavaScript code on your website and determine if:

1Can you improve your webpage Time to Interactive if the JavaScript code is not absolutely necessary?

2Can the functionality of the JavaScript code be implemented by using other web technologies?

My website DOES NOT USE JavaScript! Animations are done using CSS3

Avoid Using Content Management System (CMS) Software

1JavaScript is used extensively in all Content Management System (CMS) Software and this severely impacts a webpage Time to Interactive!

✔  Encourage you review these performance metrics gathered by httparchive.org.

Page Loading Speed by CMS
Drupal
Magento
Wordpress
JavaScript Bytes by CMS
Drupal
Magento
Wordpress

2Websites that use CMS software are common hacking targets!

My website DOES NOT USE ANY Content Management System (CMS) Software!

Should You 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 and other experts feel the same way.

Does your current website provide a Mobile User Experience (UX) that exploits all mobile and wearable web features and, is optimized for speed?

If you would like a FREE DETAIL ANALYSIS of your website or need help implementing some of the features that I use, feel free to contact me.

Would love to hear your comments, opinions and thoughts on this topic!

Top of Page