Evolution of Web

Beginning of World Wide Web

At CERN, a Swiss nuclear research center, a British physicist Tim Berners-Lee proposed to create a global hypertext project and eventually created the world's first web browser, called WorldWideWeb. The web was originally conceived and developed to meet the demand for automated information-sharing between scientists in universities and institutes around the world.

Berners-Lee explains:
"Creating the web was really an act of desperation, because the situation without it was very difficult when I was working at CERN later. Most of the technology involved in the web, like the hypertext, like the internet, multi-font text objects, had all been designed already. I just had to put them together. It was a step of generalising, going to a higher level of abstraction, thinking about all the documentation systems out there as being possibly part of a larger imaginary documentation system."

World Wide Web was capable of displaying basic style sheets, browsing newsgroups, spellchecking, and downloading and opening any file type supported by the NeXT system. It also had editing capabilities which allowed the simultaneous editing and linking of many pages in different windows. The browser was invented in 1989 but announced and became available to the general public in August 1991.

The first website (1991)

On August 6, 1991, he launched the world’s first web page with the help of his team. Hosted on a NeXT computer at the CERN, this was a simple page containing information about the World Wide Web and how to create web pages. These were text-only pages, devoid of any of the visual elements we associate with modern web pages.

HTML and Web 1.0

Document describing HTML codes(1991)

Websites at this time were made using private access to Hypertext Markup Language (HTML). Tim Berners-Lee actually published a document called “HTML Tags” later in 1991, which included the first 18 known HTML codes used to build a website.

One of the first picture uploaded on the web (1992)

In 1992, pop parody group Les Horribles Cernettes became the subjects of the very first photo on the internet. When Berners-Lee rolled out an update of his browser that could support photos, his team tested it out of this image taken of the band backstage by an IT developer.

The first banner ad on the web (1994)

In October 1994, the AT&T Telecommunications Company placed the first web banner in Internet history on the HotWired magazine website. The first web banner in the world was 476x56 px and contained only the phrase "Have You Ever Clicked Your Mouse Right Here?". Clicking on the banner led to a virtual tour of world galleries and museums.

In 1996, Microsoft released its first competitive browser, which was complete with its own features and HTML tags. It was also the first browser to support style sheets, which at the time was seen as an obscure authoring technique and is today an important aspect of web design. The HTML markup for tables was originally intended for displaying tabular data. However designers quickly realized the potential of using HTML tables for creating the complex, multi-column layouts that were otherwise not possible. At this time, as design and good aesthetics seemed to take precedence over good mark-up structure, and little attention was paid to semantics and web accessibility. HTML sites were limited in their design options, even more so with earlier versions of HTML. To create complex designs, many web designers had to use complicated table structures or even use blank GIF images to stop empty table cells from collapsing.

Invention of JavaScript, Flash and CSS

Brendan Eich of Netscape designed the first version of an object-oriented JavaScript that became widely used to create interactive websites. JavaScript later become the basis for other programming languages, such as ActionScript used in Macromedia Flash.

JavaScript helped designers overcome the limitations of static HTML by allowing them to bring some motion to the web. This gave birth to the "pop-up" window. The problem is that it has to load on top of the existing page, which causes sites to load slower. Many of the early functions of JavaScript were later able to be accomplished through CSS. Today, JavaScript is still going strong, most notably with the front-end version known as JQuery.

Space Jam Official Website, using Flash (1996)

In 1996, Flash (originally known as FutureSplash) was developed. At the time, the Flash content development tool was relatively simple compared to now, using basic layout and drawing tools, a limited precursor to ActionScript, and a timeline, but it enabled web designers to go beyond the point of HTML, animated GIFs and JavaScript. However, because Flash required a plug-in, many web developers avoided using it for fear of limiting their market share due to lack of compatibility. Instead, designers reverted to gif animations (if they didn't forego using motion graphics altogether) and JavaScript for widgets. But the benefits of Flash made it popular enough among specific target markets to eventually work its way to the vast majority of browsers, and powerful enough to be used to develop entire sites.

CSS was introduced in December 1996 by the W3C to support presentation and layout. This allowed HTML code to be semantic rather than both semantic and presentational, and improved web accessibility, see tableless web design.

Early Websites with JS and CSS (1994 ~ 1997)

Search Engines

ALIWEB, the first web search engine (1993)

Two years after the launch of the World Wide Web, we got introduced to ALIWEB, Archie Like Indexing for the WEB. It is considered to be the first Web search engine. They opened for business in November 1993 providing users with helpful links to the web's best content. In just two years, you start to see how design is coming to life. The goal of ALIWEB was to help users find helpful information, so it utilized a new form of organization - color. A yellow background separated the categories and made it easier for users to quickly identify what they were looking for.

File Edit View Favorite Tools Help

Google, the most frequently-used search engine (1998)

A pair of Ph.D. students from Stanford University, Larry Page and Sergey Brin, created the Google search engine. Google originally started as a research project whose aim was to find relevant search results using a mathematical algorithm. The algorithm, later called PageRank, analyzed relationships between individual webpages based on their cross-references, thus assessing their importance. The name Google is a deliberate misspelling of the word googol, which refers to a very high number - 1 followed by a hundred zeros.

Despite the history of search engines spanning almost 10 years by the late 90s, it wasn't until 1997 that SEO (Search Engine Optimization) started to come into fruition. This had a major impact on how businesses would design their website. Search engines like Google and AskJeeves were using robots to crawl sites. People started to figure out how they'd convince them robots to place their site on the first page, and SEO was born.

Blogging and Web 2.0

Blog, in full Web log or Weblog, is an online journal where an individual, group, or corporation presents a record of activities, thoughts, or beliefs. Many blogs provide a forum to allow visitors to leave comments and interact with the publisher. “To blog” is the act of composing material for a blog. Materials are largely written, but pictures, audio, and videos are important elements of many blogs. The “blogosphere” is the online universe of blogs.

The World Wide Web and the idea of a blog appeared at the same time. Tim Berners-Lee, often described as the Web's inventor, created the first “blog” in 1992 to outline and render visible the ongoing development of the Web and the software necessary to navigate this new space.

In December 1997, Jorn Barger, an early online presence, coined the term web log to describe his Web site RobotWisdom.com. In early 1999 another individual with considerable online experience, Peter Merholz, began to employ the term blog on his site Peterme.com. While the history of the term is pretty well settled, the same cannot be said of the identity of the first blogger. Depending on the definition of a blog, Berners-Lee may not qualify as the first blogger.

File Edit View Favorite Tools Help

Blogger, the oldest blogging tool (1999)

Pyra Labs launched one of the oldest blogging tools at Blogger.com. The new blogging platform gained a large community of users in the subsequent years. In February 2003, Blogger.com was bought by Google.

The early 2000s were a period of growth for blogs. In 1999, according to a list compiled by Jesse James Garrett, there were 23 blogs on the internet. By the middle of 2006, there were 50 million blogs according to Technorati's State of the Blogosphere report. To say that blogs experienced exponential growth is a bit of an understatement. Within two years, WordPress had introduced plug-ins for further customization and themes that would allow users to change the appearance of their site without altering the content.

Wordpress

File Edit View Favorite Tools Help
Address

http://www.wordpress.com

WordPress, currently the most popular blogging system (2003)

In 2003, WordPress burst onto the scene. Created by Matt Mullenweg and Mike Little, the blogging software was an extension of an earlier project called Cafelog. Upon the first release, users were limited to creating simple, static blog posts with very little visual personalization. WordPress is currently the most popular content management system, and more than 30% of websites are using it worldwide.

File Edit View Favorite Tools Help

MySpace social network (2003)

Tom Anderson and Chris DeWolfe founded the MySpace social network. Its concept was inspired by the then popular social network called Friendster. MySpace popularity skyrocketed, and by February 2004, the network had acquired one million users. Between 2004 and 2010, MySpace was one of the largest social networks worldwide. While MySpace is primarily remembered as the first big social media network, it also brought coding into the mainstream. The platform gave users the ability to customize their layout or 'wall' through simple HTML programming. The result was a 'more-is-more' aesthetic, filled with glittery graphics, image-heavy layouts, and blocks of texts. While most websites now look much more refined, it's hard to deny that MySpace taught us about expressing yourself through DIY design.

MySpace Blog Layouts (2003 - 2009)

Web 2.0 refers to worldwide websites which highlight user-generated content, usability, and interoperability for end users. Web 2.0 is also called the participative social web. It does not refer to a modification to any technical specification, but to modify the way Web pages are designed and used. The transition is beneficial but it does not seem that when the changes occur. Interaction and collaboration with each other are allowed by Web 2.0 in a social media dialogue as the creator of user-generated content in a virtual community. The development of technology has allowed users to share their thoughts and opinions with others, which has created new ways of organizing and connecting to other people and promoted a greater degree of collaboration.

File Edit View Favorite Tools Help

Facebook (2004)

While Facebook originally launched in 2004 alongside MySpace, it was reserved only for college students and you had to have an .edu email address to even get access. In 2006, Facebook went public and altogether changed social media and how the public used the Internet. While MySpace allowed users to custom code their pages, Facebook opted not to give their users this ability. It led to a simple, consistent look throughout the network. Facebook focuses their design around their brand. Everything about their network said something about Facebook. Their users connected with their brand and quickly became evangelists of the site.

Mobile Devices

First iPhone introduced in 2007

Mobile devices and smart phones have changed the way people use and think about the web. In 2007, most sites were not "mobile-friendly" by any standard. Furthermore, using the web on a mobile device was often frustrating. With the launch of the first iPhone, making websites accessible on mobile phones became a priority for the first time. 960-grid systems and 12-column division rose in popularity in design to address the demand for browsing on mobile. While responsive scrolling and mobile-first navigation were still a few years away, the mobile era gave way to 'flat' design. This is when traces of depth and 3D effects have been removed, to make visual elements translate more easily to the smaller screen. More than a decade later, grid-based layouts and flat design are still common techniques in web design - for both desktop and mobile.

Windows Phone 7 and flat design (2010)

In 2010, Microsoft launched Windows Phone 7, a mobile phone whose user interface was created using flat design. The new visual style received positive feedback, and Microsoft used flat design elements in the design of the Windows 8 graphics interface. Flat design has also gained considerable popularity among web designers and has become one of the major visual trends in web design after 2010 along with skeuomorphism and material design styles.

Responsive Design

With the wider adoption of CSS, developers had to spend a lot more time on things like layout, design, and typography. But one thing they didn't have to worry much about was adapting to different screen sizes. At the time, most people's monitors were either 640x480, 800x600, or 1024x768. Still, developers found a few different ways to work with these monitor or browser window sizes, which eventually lead to responsive web design as we know it today.

An example of liquid layout

Liquid layouts, first coined and popularized by Glenn Davis, were revolutionary at the time, and can be considered one of the first major methods of responsive web design. While fixed-width layouts might break if your monitor wasn't the same resolution as the one the site was designed on, liquid layouts were much more flexible, and could adapt to different monitor resolutions or browser sizes.

facebook.com

m.facebook.com

One clever way that developers came up with to handle all these new devices was to create a version of a site just for mobile and make it available on a subdomain. Mobile subdomains, sometimes called m-dots or m subdomains, are just that - a mobile specific version of a site that's hosted on a subdomain, typically m. If you sign in to both applications and look at them side-by-side, they look pretty similar. But under the hood, they're really two separate applications - the mobile version is quite a bit lighter, and is optimized to work on smaller screens and on most mobile browsers. But there are some downsides as well. Going with mobile subdomains means that developers have to maintain two, sometimes very different, websites instead of just one.

Responsive web design

Web designer Ethan Marcotte published an article entitled Responsive Web Design in the online magazine A List Apart. The author describes a new way of styling HTML documents which allows for an optimization of website content display with regard to resolution or display size. Basic responsive web design techniques include fluid grid, flexible images, and CSS module media queries.

This technology allows designers and developers to create build websites that automatically adjust and scale to any size, regardless of what device you are browsing on. Fast forward to now and responsive design is no longer a trend, but a necessity. In order to appear credible and professional and give users a pleasant browsing experience, designers must optimize their website for all devices.

Modern Web Design

Web design awards

Over the last ten years, HTML, responsive design and CSS have continued to reign supreme. However, there is no longer a one-size-fits-all definition of what a 'good' website design looks like. The profession of web design and development has exploded and with it, attracted people from many different generations, cultures and walks of life. This has given rise to many different aesthetics and styles—some even taking inspiration from earlier iterations of web design. However, if there is one defining aesthetic of the last decade of web design, it is the minimalist look. There have been an undeniable move away from crowded layouts, busy color schemes and text-heavy websites. Instead, modern web designers tend to keep their color palettes and layouts simple, relying on typography, illustration and other visual elements to make an impact.

So what is ahead? How will the next decade contribute to the history of web design?

Accessibility is likely to gain ground. The World Wide Web is a free resource, and we are apt to think that everyone has equal access. But what about the hearing or visually impaired? Do we always include captioning in our videos? Do we utilize descriptive video for site navigation? This is not even the tip of the iceberg, but it illustrates the point.

Access to technology has come incredibly far, but we have not yet arrived. Future web design needs to take user experience to the next level and provide exceptional web experiences for all. Micro-personalization is also predicted to gain momentum (see Path Factory example above) as we continue to leverage artificial intelligence to deliver exceptional customized user experiences.