Evolution of Web site design over time
By comparing the websites of a few years ago and modern websites, we can discern an evolution in design that is interesting to interpret. This could help to guess already what will be the sites of tomorrow ...
Yesterday...
The sites were designed as documents that are put online. But also, a site had to offer some gadgets which show that the webmaster is not a newcomer and he has mastered the art of designing a site.
Counter of visits
All webmasters want to have a counter on their homepage. Some sites offered JavaScript counters obtained through a link on the site, its database recording the visits.
Example to the right, a screenshot of the first site of Mark Zuckerberg, the founder of Facebook, with its inevitable counter of visits. It is still hosted on Angelfire.com.
A counter in PHP is still available on this site.
Guest book
A self-respecting site should have a guest book. So the visitors could show they had passed on the site.
Eventually they were offered to click on a list to options to say what they liked on the site.
Animated GIFs
The animated gifs were supposed to embellish the pages, but all these things moving around were annoying and let us rather to take the door ...
Homepage
The home page of sites contained in large letter the word "Enter" or "Home". Because it is a pleasure to see that the visitor is greeted upon his arrival at the site and we wish him good morning.
Once he had clicked the word "Enter", and not before, he arrived at the site summary.
Button on my site
A good way to publicize your site: propose some pretty buttons. Other webmasters will place it on their own site to show they appreciate yours.
They were sometimes required for the services of the site so that we could see home pages with lots of buttons that took longer to load than the contents of the page!
Lot of colors
The more there were colors, and the more a webmaster was proud of his site ... The ideal was to use the colors of the national flag, it added a note of nationalism that put the visitor at ease, showed him that he was among friends!
| Title in big letters | |
| Menu in buttons | |
| Footer with lot of links | |
The layout: table and frameset
The easiest way to organize components of a page seemed to use a table.
A set of frames was the alternative the most often used at the time. Sure, it's quite practical to introduce the chapters of a textbook, but it does not take into account search engines and visitors arriving directly on the chapters where they have no connection to the rest of the site.
Lot of links at the bottom
The footer of sites of the previous decade, was like that ...
What is hypertext actually? Is it not a means by clicking on a word or phrase to obtain more information to complement and go beyond the text of the page?
Today
And then we went to Web 2.0: the social web, MySql databases, content management systems, dynamic sites with Ajax and mashup.
Social Buttons
The counter of visits that we could start with one hundred thousand visits and increment of ten to each visit has become a very pathetic tool, especially since modern browsers come with extensions providing a wealth of statistical information to determine the popularity of a page or a site.
And now social sites offer buttons that count down the number of clicks or tweets.
Images and videos
It's easy to find royalty free pictures and illustrate stories today. The increasing capabilities of hostings and increase in bandwidth have made the Web multimedia.
Unlike animated gif used to decorate the page and which were more annoying than anything else, which is why they have disappeared (except in commercials), videos are themselves the information ...
CSS Layout
Tables and frames for the layout of a site have been made obsolete by the optimization for search engines.
Style sheets allow you to separate presentation from content entirely, which makes content more accessible to the engines and allows the webmaster to globally change the presentation by just changing the CSS file.
But we can go even further with a PHP template.
Template vs. frames
A template in PHP can be used for a static site or a CMS. In fact it is possible to reuse a template for Wordpress under GPL on a static site.
A PHP template looks like this:
<?php $title="";
include("header.php");
include("sidebar.php");
?>
<div>
// content
</div>
<?php include("footer.php"); ?>
Just change the header.php, sidebar.php and footer.php files to update the entire site.
Modern footer
The block of links is replaced by Twitter, Stumbleupon and other social sites buttons. This asks the user to help publicize the page, the roles have changed!
Tomorrow...
The evolution of site design is like described in Web 2.0: this is no longer documents we put online, but instead dynamic pages that are made specifically for the Internet and are using all the tools of advanced design.
Then came CSS 3 and HTML 5. The first adds special effects, the adaptation of the site to the device, a page is different on a mobile and a desktop computer.
The second is designed for Web applications, with more comprehensive forms and Canvas incorporating vector graphics in content.
WebGL, uses 3D hardware resources for 3D applications.
What can we expect to an even more distant future?
- CSS 4.
Style sheets become programmable. - HTML 6.
After web applications, interfaces and materials: control by gestures, accelerometer, GPS, the language of web pages should talk about electronics. - Wordpress 9.0.
A final version of CMS that automatically write articles based on some information. - Augmented reality will be added to pages: while the user consults the pages, services installed on his computer or his environment will interact with the content ...
See also How not to make an interface.