TECH NOTE: Evolution to Mobile Friendly web Site Design

There have been incredible changes in the World Wide Web since we started developing sites in 1999. In the old days, everyone used desktop personal computers to surf the web. Today, smart phones and pad devices are in widespread use, and have a larger market share than desktops. Even though these mobile devices have much smaller screen sizes than PCs, users expect a quality experience visiting a web site.

Today, sites must be designed for a larger spectrum of devices than in the past. The designs today reflect the evolution of the standards developed for the World Wide Web. These standards include HTML^* and CSS^.** (see definitions below). They also reflect the degree to which web browsers support these standards.

We classify the design of web sites by generations. As shown in the table below, the major feature for each generation is how the page structure is incorporated in the web page design.

Web sites Categorized by Generation

Generation	Design	Dates	Features
1	Table Layout	1998 - 2008	Tables used for page structure; CSS rules for styling
2	CSS Layout	2007 - 2014	First generation of CSS Layouts for pages
3	Responsive CSS Layout	2014 - Present	Second generation of CSS Layouts (mobile device friendly)

An important point to mention is that older generation sites are still supported by today's browsers. The big question is how an older site is rendered on mobile devices. Even though a Generation 2 site is rendered great on a PC with a larger screen, it may not scale properly to fit a mobile device's smaller screen. Generation 3 web sites are built specifically to support a variety of screen sizes from PCs down to smart phones.

Recommendations

Generation 1 Web Sites
Etherjazz has very vew of these web sites still online, and we have already been in contact with these clients about updating their sites.

Generation 2 Web Sites
Generation 2 site owners should seriously consider updating their sites to a Generation 3 design to make them mobile device friendly.

How a site is converted to Generation 3

The methodology to convert a site includes these steps:

The pages and structure of the current site are documented.
The page layouts and screen dimensions on the current site are documented.
Special features in the current site are identified. These are assessed as to how these they will be handled in a Gen 3 site.
Temporary hosting is set up for development and testing of the new Gen 3 web site.
A comp design (scaled graphic) is developed to show how the new site will appear.
Template pages are built for each page layout type in the new site.
Content is copied from each page in the old site to a page in the new site.
Special features are added using mobile-friendly versions.
Each page is previewed and tested.
Following approval by the client, the new site is moved online.
The site is resubmitted to the search engines.

How Much Does a Generation 3 Conversion Cost?

A conversion typically costs between 50% and 75% of the original development cost. For a detailed estimate, please contact us.

Footnotes

^* HTML (Hypertext Markup Language) is the standard markup language for documents designed to be displayed in a web browser. HTML standards are continually evolving.

^** CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS standards are also continually evolving.

Posted: June 2019