An
Unconventional
Web Design

Not based on or conforming to what is generally done, or believed in

These are my Mobile First Design Objectives

My Mobile First Design exploit mobile and wearable web features without impacting performance!

1When using Google's PageSpeed Insights Report which uses the Lighthouse tool for improving the quality of web pages, achieve a Time to Interactive goal of under 1 Second in the Mobile and Desktop categories!

✔ Check out the web technology used in this website!

2Design a Mobile User Experience (UX) that:

✔ Follows the KISS Design Principle.

✔ Uses an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu and a Mobile Web App page layout that can scale up to any size screen.

3Allow customers, prospective clients and visitors ONE TAP access to my web site! When any web page is added to any Smartphone "Home Screen", it will function like a Mobile Web App.

Tap 👆 Image to visit my Digital Business Card. With ONE TAP to the Apple Touch Icon on the Smartphone Home Screen, you get access to my Digital Business Card and web site!

4Configure web pages to use Open Graph Protocol graphics to drive more Social Media traffic to my web site.

5Do not use any JavaScript or Content Management System (CMS) software.

6When my Digital Business Card is shared with a person that wears an Apple Watch, users can exploit any of the Apple ⌚ Watch features!

No other Digital Business Card in the marketplace exploits as many Apple Watch, Digital, Messaging, Mobile, Open Graph Protocol and Social Media features!

Mobile First 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.

“Mobile First”, as the name suggests, means that we start the web site design from a mobile device which has more restrictions, then expand its features to create a tablet or desktop version!

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 is always an afterthought and unique mobile features such as "Add to Home Screen" and "Open Graph Protocol" graphics are rarely considered or implemented.

Nov 2016

Mobile internet traffic surpassed desktop traffic for the first time.

✔ Check out the latest Mobile vs. Desktop trends!

2021

Some individuals think that Mobile First is the ONLY web design strategy that will work in 2019 and beyond!

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!

Tap 👆 Image to visit my Digital Business Card. With ONE TAP to the Apple Touch Icon on the Smartphone Home Screen, you get access to my Digital Business Card and web site!
These 3 simple web page configuration changes, allow mobile visitors a Mobile Web App User Experience (UX)!

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.

2Add a unique meta name="apple-mobile-web-app-title" content="?????????" Meta tag to every web page.

3Android devices do not use this Meta tag so, change the web page title to match the content="?????????" name on every web page.

Configure web pages to use Open Graph Protocol graphics to drive more Social Media traffic to your web site

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!

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.

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 vs. 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!

This site DOES
NOT  👆   USE any JavaScript. All Animations are done using CSS3!

Avoid using Content Management System (CMS) software

Here are just a few reasons

1JavaScript is used extensively in all Content Management System (CMS) Software and this severly impacts a web page Time to Interactive.

2Web sites that use Content Management System (CMS) Software have a higher risk of being hacked!

3Every one of my web pages achieve a Time to Interactive goal of under 1 Second in the Mobile and Desktop categories when using Google's PageSpeed Insights Report!

This site DOES
NOT   👆   USE
any Content Management System (CMS) Software

✔ Check out all the web technologies used in my website.

Check lists for configuring web pages for speed

HTML Check List

✔ Every one of my web pages achieves a "Time to Interactive" goal of 1 second.

✔ 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!




CSS3 Check List

✔ Consider Inline CSS scripts to reduce HTTP requests.

✔ 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!




Image Graphics Check List

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 Element 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.




Web Server Check List

✔ Implement GZIP compression.

✔ Implement browser caching.

✔ Use HTTP Vary:Accept-Encoding header.

Should you consider a Mobile 1st Design?

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


Top of Page