Click on image to Draw your Personal Thumb Zone area on your Smartphone screen

How Technology Changed Web Design Over Time

August 6, 1991

The first website was launched by Cern on August 6, 1991.

Tim Berners-Lee created this website and is still active for historical purposes.

All 1st Generation websites were designed to be viewed on Desktop Monitors.

First Smartphone Devices Are Released

June 29th, 2007

Apple released the 1st Generation iPhone to the public on June 29th, 2007.

October 20th, 2008

The first Android Smartphone was the HTC Dream and it was released October 20th, 2008.

November 8th, 2010

It took Microsoft over 3 years to release the first Windows Smartphone to the public on November 8th, 2010.

There Were Issues After The Release Of The First Smartphone Devices

⚠  Although every 1st generation Smartphone had a web browser, the telecommunication infrastructure was very slow using second generation 2G cellular networks that delivered a theoretical speed of 50 kilobytes per second.

⚠  Because all the existing websites were designed to be viewed on Desktop monitors, the web pages WERE NOT READABLE on the small screens of these 1st generation Smartphone devices.

⚠  Mobile visitors had to use their fingers to "PINCH IN AND OUT" in order to view the content of existing websites and click on navigation links!

✅ Try viewing Tim Berners-Lee website on your Smartphone and experience the difficulty of reading and navigating this website that was designed to be viewed on Desktop Monitors!

Website Developers Are Under Pressure To Come Up With A Solution For The "Smartphone Phenomenon"

2008 - 2010

The concept of a Mobile Website became popular during this time period.

May 25th, 2010

Ethan Marcotte introduces the concept of Responsive Web Design (RWD) in an article that was published on May 25, 2010.

The Responsive Web Design (RWD) Objectives

✅  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 smaller screen of Smartphone devices!

✅  Website visitors will experience DIFFERENT web page layouts for Desktop and Mobile devices.

Website visitors will experience different web page layouts for Desktop and mobile devices
✅  The Desktop and Mobile Navigation User Interface (UI) will be DIFFERENT!

Website visitors will experience different web page layouts for Desktop and mobile devices
⚠ Some of these website designs do not exploit all Mobile Accessibility Features!.

A Website Design Focused On The Mobile User Experience (UX)

April 5th, 2010

Luke Wroblewski gave his first presentation about using a Mobile First methodology for designing websites on April 5th, 2010.

He published a book titled Mobile First on October 18th, 2011.

He is a top rated speaker that has given 367 presentations and workshops to companies and conferences around the world.

The Mobile First design focuses on the Mobile User Experience (UX)

Difference Between Responsive Web Design (RWD) And Mobile First Web Design

Website visitors will experience different web page layouts for Desktop and mobile devices

Features Of My Mobile First Web Design

👍  My Mobile First Design DOES NOT ❌ USE any Content Management System (CMS) software!

👍  The AMBIDEXTROUS Mobile Navigation Menu is positioned at the Bottom of the Screen and provides OPTIMAL THUMB ZONE ACCESS to both the LEFT and RIGHT HAND THUMB FINGERS.

A Thumb Friendly Ambidextrous Mobile Navigation Menu designed for OPTIMAL THUMB ZONE Access on ANY SIZE Smartphone screen
✅ Experience a Mobile Menu with 35 Categories and 293 Page links!

👍  The Web Page Layout and AMBIDEXTROUS Mobile Navigation Menu delivers a Mobile APP like User Experience (UX) on different size screen devices!
Click on image to Draw your Personal Thumb Zone area on your Smartphone screen👍  Use a CUSTOM ERROR 404 PAGE that is able to advertise my website content and services!

👍  The web server and web pages are OPTIMIZED FOR SPEED allowing: 👍  Exploit ALL Mobile Accessibility Features such as:
  1. Use a Digital Business Card that allows website visitor to:
    • Create New Contact on their 📱 Smartphone
    • Add My Digital Business Card to their 📱 Smartphone Home Screen
    • Share My Digital Business Card with their 📱 Smartphone email, text messaging and social media Apps
    • Has a layout that is both READABLE AND RESPONSIVE on the small screen of an Apple Watch ⌚.
  2. Back to Top 📱 Smartphone Feature.
  3. Click-to-Call 📱 Smartphone Feature.
  4. Add to Home Screen 📱 Smartphone Feature.
  5. Linking a business address to Google's Voice Activated Driving Directions.

Call To Action And Social Media

✅ Do you know what is required to build a website using a Mobile First Design?

Back To 🔝 Of Page

Share with FacebookShare with LinkedInShare with Twitter

Speed 📉 Profile