Web Design History Timeline

Explore the timeline of milestones in the history of web design from 1990 to the present.

2009 February 9th

Facebook “like” button

The internet social networking site Facebook introduced its “like button” feature for the first time. Clicking the button with a thumb up icon indicates a user’s positive reaction to the content of the web page on which the button is located. In 2011, Google introduced a similar button to mark one’s favorite content called the +1 button for its Google+ social network.

Facebook introduced “like” button

2009 March

BEM

In 2005, a team of developers of the Russian search engine Yandex began working on a new methodology that allowed for unambiguous naming of classes in CSS. In 2009, the new CSS naming convention was called BEM, standing for Block, Element, Modifier.

The history of BEM

2009 June

Less 1.0

Alexis Sellier designed a CSS preprocessor called Less 1.0, a dynamic styling language for cascading styles. The Less language was influenced by the existing Sass preprocessor. Less adds variables, mixins, arithmetic calculations, nesting rules and functions to the CSS syntax.

Lesscss.org website in 2009

2009 June 3rd

Microsoft Bing

With the aim of changing the search-engine market, Microsoft Corporation released Bing (formerly MSN Search, Windows Live Search and later Live Search), a “decision engine” created to satisfy initial queries while also presenting more retrieved information than its contemporaries. Its search results included the user’s previous searches and related searches from other users. At its peak, Bing became one of the largest search engines in the United States, second only to Google.

Bing website in 2009

2009 July 8th

Dribbble.com

Dan Cederholm and Rich Thornett founded the Dribbble design community portal. Graphic designers, illustrators, web designers, typographers, and other related creative professionals can share their work on Dribbble in 400×300 px. Dribbble is currently the largest community website for designers.

Dribbble.com website in 2009

2009 July 23rd

CSS Flexible Box Layout

W3C issued the first proposal of the CSS Flexible box layout (Flexbox) specification. Flexbox introduces a new way of creating web layout, an easier alignment of elements and a better distribution of space with respect to the device’s display resolution. Flexbox features are currently supported in most major browsers.

CSS Flexible Box Layout working draft 2009

2009 September 9th

Typekit

Small Batch launched a cloud library of web fonts called Typekit. Typekit works on a subscription basis and offers an extensive font library that developers can place on a website using the @font-face CSS rule. In October 2011, Typekit was purchased by Adobe Systems.

Typekit website in 2010

2009 September 23rd

The CSS Awards

A prestigious gallery of highly creative and innovative CSS-based websites in terms of design was launched under the name CSS Awards. The portal gives awards in several categories based on the vote of the community of visitors and a panel of judges. On February 24, 2011, the portal was named Awwwards, and as of 2014, it holds regular conferences.

The CSS Awards website in 2009

2010 March 6th

Pinterest

Ben Silbermann, Paul Sciarra and Evan Sharp launched the first prototype of Pinterest, a social network that allows users to share photos, create collections of images and organize them by topics such as interests, hobbies, events and more. In October 2016, the social network Pinterest used more than 150 million active users per month.

Pinterest early website in 2010

2010 April 8th

WOFF 1.0

Mozilla Foundation, Opera Software and Microsoft submitted a proposal for the specification of a new Web Open Font Format (WOFF) to the W3C. The WOFF fonts are currently supported by all major browsers.

WOFF 1.0 specification from 2010

2010 April 29th

Steve Jobs and his Thoughts on Flash

Steve Jobs penned a controversial open letter titled “Thoughts on Flash” while he was CEO of Apple, criticizing Adobe Flash and outlining why it would not be permitted on Apple’s iOS hardware. Jobs’ reasons included poor security, high energy consumption, a lack of touch support, and a claim that Flash was effectively a closed system. Adobe CEO Shantanu Narayen described the letter as an attack. Publications initially had varied responses to the letter, though tended to agree retrospectively that Jobs was right.

Steve Jobs and his Thoughts on Flash in 2010

2010 May 19th

Google Web Fonts

Google launched an open source web font library, Google Web Fonts (now called Google Fonts). Fonts are hosted on Google’s servers, and the library now has nearly 900 font families that users can use on their websites for free.

Google Web Fonts website in 2010

2010 May 25th

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 CSS3 module media queries.

Responsive Web Design by Ethan Marcotte

2010 September 7th

Sketch 1.0

The Dutch company Bohemian Coding released the vector graphics editor Sketch 1.0. Sketch is designed for MacOS only and has gained a lot of popularity among the web design community over the recent years.

Bohemian Coding and Sketch 1.0

2010 October 6th

Instagram

Kevin Systrom and Mike Krieger published an Instagram app for sharing photos and short videos in the App Store. The app gained a lot of popularity among users within a few months and in December of the same year, more than 1 million users were using it. In April 2012, Instagram was acquired by Facebook for approximately $1 billion. In February 2013, the number of active monthly Instagram users reached the 100 million milestone.

Instagram website in 2011

2010 October 21st

Flat design and Windows Phone 7

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.

Flat design and Windows Phone 7

2011 January 31st

Stylus 0.0.1, by TJ Holowaychuk

TJ Holowaychuk created a dynamic styling language for cascading styles, Stylus 0.0.1. The CSS preprocessor Stylus syntax was based on the existing Sass and Less preprocessors.

Stylus-lang.com website in 2015

2011 August 19th

Bootstrap 1

Web developers Mark Otto and Jacob Thornton of Twitter began creating the CSS framework Bootstrap in mid-2011. The framework was originally developed to help maintain the HTML/CSS and JavaScript code consistency in Twitter applications. In August 2011, Bootstrap 1 was released as an open source tool and is currently one of the most popular CSS frameworks among web designers. In January 2012, Bootstrap 2 was released, supporting a responsive web layout.

Bootstrap, from Twitter website in 2011

2012 June 18th

CodePen.io

Developers Chris Coyier, Tim Sabat, and Alex Vazquez founded CodePen to give developers and designers of any skill level the option to edit front-end languages in a browser-based code editor, visualizing results in real-time. Users would create “pens,” snippets of code that could be shared with other users. Frameworks, libraries, and UI patterns were organized into topics where users could browse and request specific resources.

CodePen.io website in 2012

2012 June 19th

Media Queries

W3C issued an official recommendation for Media Queries specification. The CSS3 Media Queries module allows for adaptable web page rendering based on various factors such as screen resolution or size. Media Queries are one of the basic techniques used in designing responsive sites.

Media Queries recommendation 2012

2012 October 1st

TypeScript 0.8

TypeScript is a free, open source programming language created by Microsoft in response to complex JavaScript code. A demand for custom tools that would make developing components within JavaScript easier to write led to this specific superset of JavaScript that allows optional static typing.

TypeScript 0.8 in 2012

2013 May 29th

React

Software engineer Jordan Walke from Facebook announced the creation of the React javascript library (sometimes referred to as React.js or ReactJS) at the JSConf US conference. The open-source React library is designed to make it easier to create user interfaces and UI components for web applications. React can also be used to create single-page or mobile applications. The development and maintenance of the React web framework is currently handled by Facebook along with a large community of independent developers.

React official website in 2013

2013 August 19th

Bootstrap 3

A team of developers from GitHub published the CSS framework Boostrap 3. The new Bootstrap version consistently applied a responsive web layout and mobile-first access. The layout of templates and components was redesigned in flat design style.

Bootstrap 3 website in 2013

2014 June 25th

Material Design

Google introduced a new graphic style called Material Design at the Google I/O conference. Since 2015, Google has redesigned most of its applications and services using the consistent visual style of Material Design. According to Google’s definition, Material Design is a “visual language that synthesizes the classic principles of good design with the innovation and the possibility of technology and science.”

Google Material Design website in 2014

2014 October 28th

HTML5

W3C adopted the final recommendation for the HTML5 markup language. The HTML5 version has brought an improved browser multimedia playback support, new semantic tags that better define page structure, offline application support, and the <canvas> tag that can interpret vector graphics with an option to insert images.

HTML5 recommendation 2014

2015 March 30th

Microsoft Edge

Microsoft released the first version of the Microsoft Edge web browser for Windows 10. Microsoft Edge was subsequently included as a default browser on Windows 10 Mobile and Xbox One operating systems, definitively replacing the older Internet Explorer 11 and Internet Explorer Mobile browsers. On December 6, 2018, Microsoft announced that Edge will no longer use its own EdgeHTML rendering engine and will be based on Chromium, Google’s open source rendering engine.

Microsoft Edge

2016 September 27th

Figma

Dylan Field and Evan Wallace, two computer science students from Brown University, began working on Figma in 2011, with the goal of creating a design tool that allowed real-time collaboration in the same file. A free, invite-only preview of Figma was introduced in December of 2015 before its public release the following year. Figma was the first design tool to combine native application functionality and browser-based accessibility.

Figma GUI in 2016

2017 June 25th

Adobe announced termination of Flash

Adobe Systems announced that it would cease support for Flash in 2020 and would no longer issue additional security updates for Adobe Flash Player. In the field of web multimedia and interactivity, Flash became gradually replaced by HTML5, WebGL, or WebAssembly technology.

Adobe announced termination of Flash

2022 September 15th

Adobe to acquire Figma

Adobe announced the tentative acquisition of Figma, the first design tool that combined native application functionality and browser-based accessibility, for approximately $20 billion USD.

Adobe to acquire Figma in 2022