How did the look of the internet changed over the years
In this article we will dive deep into the history of the internet.
From 1991 till 2018 we have come a long way.
1991 — the creation of the World Wide Web
On August 6, 1991, the Usenet newsgroup alt.hypertext publicly announced the launch of the network. The first CERN website was launched in November 1992, it was completely text, hyperlinks were highlighted in blue. The first color monitors had a resolution of 640x480, they supported 16 colours.
WorldWideWeb was used to browse the web, later renamed Nexus, the first Internet browser.
HTML
At the beginning of the development of the Internet, HTML was the only means of developing websites. His options were limited. The sites were simple: they looked like text documents, hyperlinked to each other.
In 1992, the Lynx text browser appeared.
1993 — new browsers, first search engine, and image support
Two years after the launch of WWW, the first Aliweb search engine (Archie Like Indexing for Web) appeared. It was a directory of sites, divided by topics. Aliweb experimented with the design: to attract the attention of users, the important elements of the page stood out in different colours.
The structure of the sites was created using tables that allowed to align elements vertically. The tables helped to expand the possibilities of the text: a navigation system appeared, the sites were arranged in several columns.
In 1993, there was support for images that could be divided into parts and inserted into a table. The “body” of the site began to be separated from the side navigation (the first column of the table), the first images appeared, and the web design began to go in the direction of wider layouts.
A modern browser, Mosaic, appeared, which displayed images on a web page along with text and also loaded the page in HTML format.
According to MIT Research researcher Matthew Gray, by the end of 1993, there were 623 sites on the Internet. The first landing pages appeared — their prototype was the launched MTV site.
1994 — use of banners on sites
Online marketing appeared in the early years of the creation of the Internet: many sites were full of advertising in the nineties. Hotwire distinguished itself, which is now renamed to Wired — the designers added a small banner ad to the header of the site in 1994.
The design is complicated. For example, on the main Hotwire page, there was little text, but more design elements to attract users.
Website developers tried to attract readers with bright advertisements, similar to modern banners, and flashy colors. Colored 3D buttons appeared.
In 1993, they created the World Wide Web Consortium (W3C), which developed the basic standards of web pages. Optimized sites began to load faster and at a higher screen resolution.
The Netscape browser appeared, which supported on-the-fly page loading. Because of the capabilities of Netscape, developers posted a recommendation on “Better to look through Netscape” on sites.
In mid-1994 there were 2,738 sites, according to Matthew Gray’s statistics. At the end of 1994 — more than 10 thousand sites.
In 1994, the research project Opera Browser 1.0 was launched.
JavaScript appeared, designers began to use scripts, animations, and movement of elements. The technology was part of the Netscape 2.0B3 browser.
A popup window has appeared. It was loaded on top of existing pages, which is why sites worked and were loading slower. Many JavaScript functions were later implemented using CSS.
1995 — PHP, Ruby, Shockwave, Internet Explorer 1
In 1995, monitors with a resolution of 800x600 and support for 256 colors appeared. Times New Roman and Courier fonts, simple animation and interactive web applications Macromedia Shockwave appeared on the Internet. Later, Macromedia will buy Adobe.
PHP programming language was developed. PHP was originally a personal home page creation tool (Personal Home Page), today it is a programming language for creating dynamic websites.
In 1995, PHP created simple dynamic applications — web forms and guest books.
Microsoft released Internet Explorer 1 and Internet Explorer 2, which could not compete with Netscape 3. By 1996, about 90% of Internet users used Netscape Navigator as a browser.
1996 — Internet Explorer 3, Flash
In 1996, the number of Internet users increased to 36 million people.
A sample of the quality site in 1996 is considered to be the CNN site.
Microsoft released Internet Explorer 3.0, which supported multimedia, Java inserts, Internet mail, and ActiveX controls.
Internet Explorer 3 overtook Netscape in popularity and became the leader in the browser market before Google Chrome.
Flash — the era of web animation
Flash completely changed the way web pages are designed. For the first time, designers were able to create any objects, add animations and create more attractive websites. In this case, only one tool was used — the final page compressed all the information into one executable file. Sites have become a combination of tabular style and flash-elements that change color and size.
The main problem was that not every user had a flash plug-in installed, in addition, flash-sites loaded longer and worked more slowly.
Flash brought in web design animation inserts and overlay pages. Despite the fact that Flash is still used, it has lost its position in the market due to the high demands on the computing power of devices. For example, Apple abandoned Flash when the iPhone was released, which affected the popularity of the technology.
In the design, more and more attention was paid to the navigation menus: the designers used dark backgrounds and 3D buttons for the pages.
1998 — the birth of Google
In 1998, the Internet began to resemble what users see today.
Google Beta appeared on September 4, 1998. Google changed the idea of a directory of links — instead of choosing from the reference list, the company decided to do a minimalistic search. Simplicity and fast speed of work led Google to succeed.
CSS
After creating Flash, CSS appeared — cascading style sheets.
The more users appeared on the Internet, the slower it became. The speed of opening pages of sites has become a big problem. The idea behind CSS is simple — to separate content and appearance. The content of the page was in HTML, and its style — background color or text size — was indicated in the CSS style sheet.
This development has simplified control over a single appearance of sites, regardless of their content.
Browsers in 1998 did not immediately begin to support styles, so CSS technology could cease to exist, but the active support from the developers helped it to survive.
In 2000, Microsoft Internet Explorer 5 became the first browser to start supporting CSS 1 at 99%.
Cascading style sheets are still used today and are one of the important aspects of web design. In the period from 1998 to 2000, design focused on menu and navigation, and the content became more rational. There was less text on the screen, but more mini pages. Gradients were applied.
2000 — Internet economy
In 1999 appeared online payment system PayPal. But it became widespread in 2000 and gave birth to a new way of doing business.
The site has become a necessity — all new companies tried to create a beautiful and fast site for their clients. The content of the pages of the site was simplified: instead of bright colors, calmer, more contrast was used.
The concept of a “grid” of the site appeared, which simplified the organization of elements for designers for the convenience of users. The screen resolution increased to 1024x768, but 56% of Internet users around the world still used 800x600 screens.
In 2001, Internet Explorer 6 appeared.
2003 — blogs
Designers used flash and splash screens and integrated animated content. Increased connection speed, which opened up opportunities for improving the design.
Until 2000, IT specialists with technical education almost completely engaged in the development and design of websites. In 2003, WordPress was released — a content management system based on PHP and MySQL, which simplified the creation of personal pages for Internet users.
WordPress used the template system and the architecture on the plugins, which allowed to customize the design and functionality of the site.
WordPress has changed the approach to the development of sites. In May 2003, WordPress was installed on 2000 blogs, and in January 2015, more than 23.3% of the 10 million sites used this CMS.
Designers began to use 16 million colors instead of 256 shades. A drop-down navigation menu appeared, and the 3D buttons began to disappear from sites. Users began to switch to a resolution of 1024x768.
2004 — MySpace and Firefox
The MySpace social network has become a place where users can create their own profiles and communicate with other people via the Internet. To edit profiles, the social network suggested using HTML. The first web designers could learn how to design HTML layouts using the MySpace platform.
In 2004, the open source Firefox 1.0 browser appeared. He competed for Internet Explorer.
2005 — YouTube
Video content came to the fore and the first video hosting site appeared — YouTube. The sites began to integrate video as part of the overall content of the site. In 2006, the service will buy Google.
2006 — a public version of Facebook
Facebook first appeared in 2004, but was only available to college students — registration was confirmed by .edu email.
In 2006, Facebook opened registration for everyone. Unlike MySpace, Zuckerberg’s design did not allow editing the page code. Facebook has concentrated on simple and concise website design and has developed a corporate color style that is easily recognized on the Internet.
Stock photos and skeuomorphism are widespread. The design began to use textures that are similar to real objects — trees, fabric, metal.
In the 2000s, the concept of Web 2.0 appeared. Sites began to use interactive content that changes without refreshing the page, and web applications.
The design began to focus on publishing content, rather than selling — the active development of social networks attracted users and motivated to share content. Video content is being further developed.
2007 — Mobile Revolution
In 2007, most sites did not have a mobile version. To improve user interaction with sites, it was necessary to develop a new approach to mobile design. Developers began to ask themselves questions: should the site be reduced in size, should there be standards for mobile devices, how not to lose data speed up the site loading?
The answer came in the form of the 960 Grid System: Bootstrap and the Foundation became the basis of the new mobile web.
June 29, 2007, came to the first iPhone. Most of the users at that time were surfing the Internet using simple browsers and considered the sites on their phones unnecessary and useless.
The first full-fledged mobile browser Safari has appeared on the iPhone.
Static site designs have become less popular — designers are beginning to draw mobile versions. Web pages were divided into two: one static, the other mobile. The user saw the page, depending on from which device he opens the site.
2008 — Google Chrome, Mobile Internet and HTML5
In 2008, access to the Internet from mobile devices was ahead of access from computers — websites needed a mobile version for smartphones. Websites started converting to a vertical format, and navigation became minimalistic and represented only the main parts of the site.
Appeared Google Chrome, which has become the most popular browser due to speed, design, and minimalism.
The first version of the HTML5 technology, which will replace Flash.
2009 — socialization of images
Yahoo has launched the Flickr service, which allows you to upload and share photos on the Internet. Flickr was the first site using shared tags.
The idea was that if the user could put tags on any photos uploaded to the service, the result would be a ready classification of images.
2010 — the birth of responsive design
As the use of the mobile Internet increases, the development of the mobile version of the site has become an important task for the designer. In 2010, web designer Ethan Marcott set himself the task of bringing the design of the mobile web to the desktop.
Instead of developing a separate site for smartphones, Marcott suggested using the same content, but in different layouts designed for different screen sizes. So the idea of adaptive design appeared.
From a technical point of view, developers still used HTML and CSS. The main advantage of adaptability was content parity — on all devices users received the same site. Designers abandoned skeuomorphism and gradients in favor of flat layouts with simple elements and typography.
The browser market is divided between Chrome, Internet Explorer, Safari, Firefox, and Opera. Google updated the browser more often than others: between 2010 and 2014, more than 30 Chrome updates appeared.
2012 — flat design, Metro UI
In 2012, Microsoft introduced the language Metro Design (later renamed Modern Design), which was based on a flat design. It was used in Windows Phone, Windows 8 and Zune and became a source of inspiration, a model for many companies.
For example, the design of the Zune player focused on large lowercase typography, silhouette logos, and monochrome fonts.
Pastel colours, sharp edges, grid shape, and neat typography prevailed in Modern Design, which was updated in 2017 and became known as Fluent Design.
Designers chose a minimalistic look of sites, more informative and aesthetic.
The 2014–2018 year — Material Design, Parallax, typography
In 2014, Google published its design vision — Material Design. Google suggests using shadows and motion and depth concepts to create UX-oriented projects. The company has developed ideas for flat design, adopting mobile applications and mobile versions of sites in a new corporate style.
Material Design is inspired by the physical world and its textures, including the way light and shadows, are reflected.
Another element of Metro and Material Design is animation. They gained popularity in 2016 and are used to attract the attention of users and help in navigating the site.
Designers add to the side effects of mitigation, smooth transitions and animation in navigation to provide comfortable user interaction with the interface.
Parallax
In 2015, the Parallax effect becomes popular: when scrolling the foreground, the front object, rather than the background, move. This turns web design into one big animated picture.
Microsoft closes Internet Explorer. It is being replaced by Microsoft Edge. Also in 2015, Yandex introduced Yandex. Browser.
n 2018, the trends have not changed: designers continue to develop the ideas of flat design, typography, and animation. One of the significant design changes that came from 2017 is asymmetry and “broken” layouts.
The evolution of CSS has helped make interactive sites: images and texts can overlap each other, dynamic fonts have appeared, which increase or decrease when the cursor hovers.
The color schemes are bright and saturated. Modern devices allow you to display colours without distortion, and non-standard palette helps to attract visitors.
The sites began to apply the effect of particles — small image animations that increase the attractiveness of the page without losing performance. This is a JS script that creates motion as a natural part of the background.
Another element of the modern site is typography. The resolution of the screens of modern devices allows designers to develop their own fonts that look clear, without blurring or serifs.
Typography creates contrasting headings and improves site navigation.
The general trend of the sites in 2018: bright colours, bold gradient, and integrated animation. The rig-or of the flat style proposed in 2012 is gradually evolving into a bright, lively and adaptive interface, equally suitable for mobile devices and computers.
