The world first website was published in 1990. Comparing to today’s website, It’s really impressive to see how far we have come. In this post, we will travel back in time to see each step of web design evolution in the past 30 years. Let’s check it out!
This is when the world first website was published. There were nothing much except a few texts and links. However, at that time the available public web browser was not graphical but text only call “line-mode” browser. So here is what the website looked like.
The first image was posted on online. It was edited with Photoshop (Yes! We already have Photoshop in 1992!) before uploaded to the internet.
Mosaic, the world first public graphical browser was available. Many companies started to create their own website. This was when the landing page, design was introduced. And the first one who did this was MTV website. Here was their landing page.
One of the world most famous and popular browser “Netscape” was launched. Introduced easy access of the internet to the public. Including graphical features like animated GIF image, text formatting and table.
W3C was also founded this year to create common standard for web development.
CSS1 was introduced and adopted during these period. Before that, all styles were coded inline into the HTML.
CSS is the first step to separate content and presentation and has become the foundation of today’s web design and development.
Uses of table to format the content had become a standard. Rounded corner image was a very popular trend due to border radius was not available until 10 years later.
Flash 5 and ActionScript 1.0 were introduced. This was the beginning of animated content and flash game.
Also the first draft of CSS3 specification was published during this year.
SVG format was introduced. This is the first vector image format for the website that can be written in XML.
First version of WordPress was created this year. Marked the beginning of dynamic content and blogging era instead of static HTML page.
Use of CSS Sprite was introduced. Grouping together smaller images into one, then use background position to select which image to show to reduce the number of HTML request and size. This allows web designer to put more graphic content on the page.
The first CSS pre-processor, Sass was created this year. Extending CSS features and allow web designer to create more complex effect.
CSS Grid layout was introduced. Marked the end of table and floating div layout era (But it takes several years later for web browser to fully support this)
CSS Flex box concept was introduced to allow web designer to create flexible layout without worrying about alignment and spacing (Again, flex was integrated into browser several years later)
A Minimal web design concept was also first introduced around this year.
The birth of Responsive Design. Instead of creating a separate mobile site, the same content could be used in different layouts depending on screen size.
Google Font was launched this year. Encouraging typography concept to be used in web design.
With influence of Windows 8, a metro or flat design was popular.
Bootstrap CSS framework was also release this year, increasing web design and development speed dramatically.
Media queries was introduced in this year. Offering CSS ability to track the screen size which is the core of responsive design. This is also when the parallax scrolling concept was first seen.
CSS 3D transform was starting to become popular this year too.
HTML5 became widely adopted and YouTube decided to drop flash player and use HTML5 player instead.
CSS3 animation and transition were introduced this year, allowing fluid and responsive buttons and menus (and the birth of CSS burger menu hype)
The rise of Minimal design. Lots of web designers tend to drop everything down to only basic elements. Mobile first and thumb friendly design were also widely adopted this year.
2017 – Present
Due to maturity of design tools, We started to see lots of various design techniques to impress us. Asymmetrical design, broken grid layout, animated background using video or webGL. Also Minimal design is still strong (See video below)
You can watch the collection of websites during 1990-2019 in this video.
And that’s the past 30 years. From just text website to stunning realtime 3D rendering. It’s exciting to wait and see what’s coming in the next 10 or 20 years. And if you want to see more development tips and tutorials, please subscribe to our channel for weekly videos 🙂
https://www.businessinsider.com/flashback-this-is-what-the-first-website-ever-looked-like-2011-6 http://line-mode.cern.ch/ http://info.cern.ch/hypertext/WWW/TheProject.html https://www.webdesignmuseum.org https://web.archive.org/ https://www.w3.org/ http://oldweb.today/ https://www.nrg.be/archived/ http://www.gamesgames.com/game/cat-vs-dog https://tantek.com/CSS/Examples/boxmodelhack.html https://www.smamarketing.net/blog/the-history-of-website-design