Froont, a San Francisco company that makes tools for web designers, used 9 GIF animations to show the development of web design over the past 25 years. If you want to know why CSS is so important and why Flash is gradually being phased out, these animations might give you a glimpse.

The monochrome era of web design, around 1989. Think of Lynx and other Unix-based web browsers, which could only deliver words one by one over the network from one terminal to another. There was no graphical user interface, just a string of letters and a blinking cursor.

The beginning of the modern era, around 1995. The first browsers, such as Mosaic, allowed designers to display images on websites, but the only way was to drop these webpage elements into unsightly table layouts. Because precise positioning was really difficult, designers had to figure out very clearly how to write code with tables nested in tables, and then nested in tables again, in order to display content correctly.

Fortunately, JavaScript appeared, providing great convenience for designers. Flash made it easier for us to design dynamic websites: for example, pop-up windows and dynamically changing the order of content on the page. But compared to native HTML, JavaScript was very slow.

Although Flash was once all the rage, it has now been almost killed off by HTML5. But in 1996, it represented a new height in web design: it allowed designers to bring pages to life in their own way. This was also the golden age of Froont fly-out pages, opening animations, and so on. However, Flash consumed a lot of computer processing resources, making it a particularly unfriendly technology, especially for mobile devices such as laptops and smartphones.

CSS, first released in 1998, solved many early web design problems. By separating the visual aesthetics of a website from webpage content, designers could finally create or customize web pages according to their own ideas. Although the earliest CSS versions were not very flexible, CSS has now become the most important web technology that designers need to master.

The arrival of the iPhone in 2007 brought a brand-new challenge to designers: how to design web pages on the smaller screen of a smartphone? Initially, designers thought of using a grid system that could divide a webpage into several columns based on the size of the device's screen.

In 2010, Ethan Marcotte came up with another solution to the problem of how to display web pages on mobile devices: responsive design.

After responsive design, a flat design that stripped away flashy effects and emphasized content also emerged. This design simplified visual elements and created a web experience by highlighting beautiful typography, and it looked great on any device.

What about the future? Froont says better web design is still under research and development. In the future, designers will no longer need to worry about browser compatibility issues, and tools suitable for any device will be readily available. Technology will no longer be a limitation on design; designers can focus on solving UI and UX problems instead of wasting time troubleshooting.

Original source:The History Of Web Design Explained In 9 GIFs
Translation source:http://www.codeceo.com/article/9-gif-web-design-history.html
Translator:Code Farmer– Xiao Feng