loading...

History of web design

ziizium profile image Habdul Hazeez ・8 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Sort of an abridged version and by no means the complete history of web design.

History is a funny thing, sometimes it repeats it self and at times it doesn't. This post is about the history of web design, where it all started, where its been and its possible future.

This can seem like an uphill task to achieve in a single post, but we'll do our best to point out some of the important events that have shaped the field of web design causing a chain reactions that's still in effect till this day.

The history will be given in a timeline nature, just so you know how and when an event occurred and everything that happened afterwards. "Events" in this sense is not only referring to a big software invention but it can also be a blog post or a user comment in response to a particular blog post.

The field of web design is quiet an interesting one, and every single day there are people out there doing innovative works. From the specification, standards, blog posts and everything in between.

Let's go back in time and find how it all began.


The timeline are listed below :

1990 - 1994

In the year 1990, Sir Tim Berners-Lee created the first web browser called the WorldWideWeb which worked on NeXTStep operating system. The browser was later renamed Nexus.

In 1991 Tim Berners-Lee along with Henrik Frystyk Nielsen and Nicola Pellow designed the Line Mode Browser.

Around the same time Time Berners-Lee launched the first website and also compiled the index of websites called the WWW Virtual Library.

Later that year he designed the first version of HTML influenced by the SGML universal markup language.

The year 1992 saw the creation of the violaWWW browser by Pei-Yuan Wei at UC Berkley.

In July one of the first images was published to the web by Silvano de Gennaro at CERN.

In the year 1993, Marc Adreessen and Eric Bina programmed the Mosaic web browser. Mosaic is considered the first web browser with a Graphical User Interface (GUI).

In 1994 some important innovations were created and some are still around till this day:

  • The robots.txt standard
  • The first HTML Validator
  • Tim Berners-Lee founded W3C

[Back to timeline]

1995 - 1999

This era included innovations that are still around till this day.

Opera software introduced the opera browser which uses a technology called Multiple document interface that allowed users to open several web pages within the browser.

The term "User Experience" first appeared in a presentation by Donald Norman of NN Group.

Brendan Eich wrote the Mocha programming language in just 10 days.

In June of 1995, the first version of PHP was designed by Rasmus Lerdorf. The term PHP originally stood for Personal Home Page. Today the name is a recursive acronym for PHP: Hypertext Preprocessor.

Wordpress is created in PHP, the first version of Facebook was written in PHP and the online encyclopedia Wikipedia runs on PHP.

August 1995 Microsoft released Internet Explorer 1.0 for Windows 95.

FrontPage a WYSIWYG editor was developed by Vermeer Technologies.

The HTML specification was released in November 1995 and in December 1995 Mocha was renamed JavaScript and in 1996 Microsoft released JScript and ASP 1.0 (Active Server Pages).

In December 1997 CSS attained a Candidate Recommendation from the W3C and Macromedia released Macromedia Flash 1.0.

At the start of 1997, W3C issued a Recommendation status for HTML 3.2. In April of the same year the Web Accessibility Initiative (WAI) officially launched its activity.

In the months that followed, the world saw the following come into lime light:

  • Netscape Communicator 4.0
  • Internet Explorer 4.0
  • DHMTL
  • DreamWeaver 1.0
  • W3C HTML Validator
  • HTML 4.0

1998 saw the birth of A List Apart by Jeffrey Zeldman and Brian Platz, in February of the same year, Netscape released the source code of the Netscape Communicator 5.0 web browser, which serve as the foundation for the open source project called Mozilla.

In March 1998, Andrew Johnstone launched Design is Kinky which was one of the first design community websites. The following month Macromedia released a tool for web designers called Macromedia Fireworks.

Between May and July of 1998 the web witnessed the following:

  • W3C issued official Recommendation for CSS 2 specification
  • DMOZ
  • Adobe ImageReady 1.0

In October Michael Schmidt and Toke Nygaard, launched a community website for designers, called Kaliber10000 (K10k).

In Early 1999 Adobe released Adobe Photoshop 5.5, Favicon was standardized by W3C and Microsoft released Internet Explorer 5.0.

In April 1999 the term "Web2.0" was first introduced in an article entitled Fragmented Future by Darcy DiNucci. The following month W3C, in co-operation with the WAI issued the first recommendation for a set of Web Content Accessibility Guidelines (WCAG 1.0).

In November of the same year, 2Advanced studios was founded by Eric Jordan, Tony Novak and John Carrol. The studio was renowned for its design using Flash technology.

Towards the end of the year, Jakob Nielsen published Designing Web Usability: The Practice of Simplicity. The book became one of the basic handbooks in the field of web usability and the emerging field of user experience design (UX).

[Back to timeline]

2000 - 2004

The early 2000 saw W3C issued official Recommendation for the XHTML 1.0 specification and saw the rise of websites created using Macromedia Flash.

Zeev Suraski and Andi Gutmans completely rewrote the interpreter used in PHP and created version PHP 4.0 based on the open source Zend engine.

In early August of the same year Devian Art made its debut thanks to Scott Jarkoff, Matthew Stephens and Angelo Sotira. Soon after Macromedia Flash 5.0 and ActionScript 1.0 were launched by Macromedia in the same month.

On October 13th, the book Don’t Make Me Think was published by Steve Krug. The book deals with web usability and the interdisciplinary field of HCI.

The beginning of 2001 saw the debut of Wikipedia thanks to Jimmy Wales and Larry Sanger.

Between August and September of the same year the world got to see IE6 and SVG 1.0.

In the last month of 2001, Razorfish digital agency designed a website for Audi which was partially responsive thanks to screen resolution detection's using JavaScript.

In April 2002, Tantek Γ‡elik came up with the called Box Model Hack while working on Internet Explorer 5 for Mac. The application of this hack makes it possible to change the DOCTYPE declaration, which allows web developers to define which CSS Box Model will be used in Internet Explorer (IE).

June of 2002 saw the birth of Mozilla 1.0 browser based on the Gecko Rendering engine and in September of the same year, RSS was introduced to the world.

In 2003 Dave Shea launched a community gallery of websites called CSS Zen Garden and Jeffrey Zeldman published Designing with Web Standards.

Weeks after Zeldman publication, web developers Matt Mullenweg and Mike Little created the first version of the open source content management system called WordPress. Today Wordpress is the largest blogging platform.

After Apple introduced its web browser Safari 1.0 in June 2003, the world saw the following technology in the second half of that year:

  • MySpace
  • Delicious
  • Macromedia Flash MX 2004 and ActionScript 2.0

In March of 2004, Dave Shea published an article entitled CSS Sprite: Image Slicing Kiss of Death. In the article Dave described a technique called CSS Sprites which allows a website to load faster because it only uploads one image, reducing the number of HTTP requests.

On November 9th 2004 Mozilla Corporation released Firefox 1.0.

[Back to timeline]

2005 - 2009

John Resig announced the creation of the jQuery JavaScript library at BarCamp NYC in 2006.

In August 2006, Sven Lennartz and Vitaly Friedman created Smashing Magazine.

October of 2006 saw the birth of Syntactically Awesome Style Sheets (Sass) thanks to Hampton Catlin and Natalie Weizenbaum.

On July 4th 2007, Chris coyier launched the now popular CSS-tricks. The following month, Scott Belsky founded the Behance platform, which allows designers, photographers, and artists from different fields to present their creative work in the form of online portfolios. As of January 2020, Behance is owned by Adobe.

Are using CSS Grid in production now? Well it dates back to September 5th 2007 when W3C released the first proposal of the CSS Grid specification.

Google released the beta version of Chrome browser for Windows on September 2nd 2008. In December 2008, the first stable version of Google Chrome 1.0 was released. At the time of publication of this article, Google chrome is the most used browser.

Web Content Accessibility Guidelines (WCAG 2.0) received an official recommendation from W3C in early December of 2008.

In March of 2009 Yandex introduced the BEM naming convention.

Between June and December of 2009 we had the following:

[Back to timeline]

2010 - 2014

In April 2010, Mozilla, Opera and Microsoft submitted a proposal for the specification of a new Web Open Font Format (WOFF) to the W3C.

Google launched their open source web font library now called Google Fonts containing nearly 900 font families that users can use on their websites for free.

May 25th 2010 is probably one of the important dates in modern web design when Ethan Marcotte published an article entitled Responsive Web Design.

Bohemian Coding released the vector graphics editor Sketch 1.0 around September of the same year. Sketch has grown in popularity over the years and its only available for macOS.

At the end of January 2011, TJ Holowaychuk created a CSS preprocessor name Stylus 0.0.1 based on Less and Sass.

The month of August saw the birth of the Bootstrap framework.
Towards the end of the first half of 2012, Media Queries received the official Recommendation status from W3C.

Bootstrap 3 was released on August 19th 2013 by a team of developers from GitHub.

The following year (2014) material design became a thing after its introduction at the Google I/O conference.

On October 28th W3C adopted the final recommendation for the HTML5 markup language.

[Back to timeline]

2015 - present

EcmaScript 6 (ES6) was released by TC39 in 2015. HTML5 became widely adopted.

CSS3 animations and transitions were introduced this year, allowing fluid and responsive buttons and menus.

2016 saw the rise of minimal design allowing web designers to use basic elements.

ES7 was also released with minimal additions to the JavaScript language most especially the exponential operator.

In late 2019, Web Assembly became one of the core technology of the web alongside HTML, CSS and JavaScript.

[Back to timeline]


Next, we'll take a look at Site Layouts.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide
 

I don't know exactly when, but there was a short period during which Mocha was known as LiveScript before becoming JavaScript (with all the confusion with Java that continues to this day).

There is now a language named LiveScript that compiles to JavaScript.

 

Is there any real reason why HTML default styling, i.e. User Agent Stylesheet, is not better, or made more beautiful? -- quora.com/Why-does-default-HTML-wi...

 

There was no code engaged with web improvement now. JavaScript in the program didn't exist. CGI didn't exist. Just HTML pages. That is it! It was a straightforward time, however uncommonly hard to get even an essential server fully operational and serving your code from web design services. We've truly made some amazing progress since this time.