The internet has become an inseparable part of the current generation’s lives. Each and every second of our lives, we are given the opportunity to learn new things and to know the newest updates about whatever it is happening all around the world. We sometimes also marvel on how a website can look so pretty and posh or how it can integrate high-tech features all in one click. Animation can be a part of it, in which if used in the correct way, it can bring much more life and personality to the websites which are just ordinary and plain. For that reason, check out the timeline of evolution of animation in web design included below:
The 19th Century
Web design was pretty much a very strange and abstract concept in the 19th century. However, animation had made its early development through the invention of tools which were used to play movies on a screen. Scientist Thomas Edison invented something which is called a Kinetoscope in New York, and in another part of the world, Lois Lumiere invented the cinematograph. Together with his brother Auguste Lumiere, Lois Lumiere later created the first motion picture in history. The aforesaid first motion picture was presented in the year of 1895 in Paris, and it was dubbed as the birth of film and animation.
The 20th Century
Animation had made several breakthroughs in the 20th century although for web design itself it was really still a beginning. One of the landmark events that took place in the 20th century was the birth of Disney cartoons. In 1927, Disney created a popular animation series with its main rabbit character named Oswald although its distribution rights were taken over by Universal. Three years later in the year of 1930, The Warner Bros. Cartoon made its debut with its first movie which was originally a spinoff of Disney’s Mickey Mouse. From thereupon, the 20th century’s animation history consisted of mostly Warner Bros and Disney cartoon movies although later on there is a solid competition as well coming from the MGM studio.
Web design was nowhere to be found at least until the end of the 20th century around the year of 1989 where a few monochrome pixels made up the very early concept of computer design. At that time, the designs were mostly made up of only symbols and tabulations, and it was pretty much the dark ages of web design. Web design was brought to life in the year of 1995. In 1995, browsers were capable to display images although it was only in form of tables already existing in HTML, but that was definitely a start. Using table was very nearly the most common method for web designing during the aforesaid years, since it was considered as a method to conveniently present things vertically in pixels or grids. This gave rise to what was known as slicing designs where designers would create a complete fancy layout but developers would divide it into smaller pieces to make the designs work.
The CSS, or Cascading Style Sheets, was seen as a more flexible method to structure a design viewed from a technical standpoint. CSS basically separates a content from its presentation, making the formatting and look to be taken care of in CSS although requiring the content to be dealt with in HTML. CSS did not really flourish until years later when the majority of browsers supported it completely despite the fact that it was known to be buggy. Despite this fact, CSS provides a great relief for designers because it is not really a coding language but it uses a rather declarative communication. As a result, to be a web designer, one does not need to know how to code as long as he/she understands how CSS does work. CSS remains popular as a method to make animations for a website because it is relatively lightweight compared to using JQuery which can really slow the website’s loading speed as well as performance. CSS is recommended for making animations that will appear nice on all types of devices without the need of making it heavy.
The 21st Century
Even so, nowadays web-designing takes on a whole new challenge that is to become mobile-friendly. A website can work perfectly just fine when viewed on a computer but it can be faulty once when viewed from a mobile device. Web designers need to understand well how devices can display the same layouts differently, especially when it comes to tiny mobile phone where there is a content-parity issue as well. Access speed can also be an issue, because when too many loading contents are put in a website, it will cause the internet quota to run out rather quickly.
One of the methods undergone by many web designers and basically tech savvy people was to improve the concept of column grids. In 2007, the grids and frameworks mechanism were enhanced in such a way that it became a 960 grid system with a twelve column division to allow easy web designing especially for mobile phone use. They also thought about creating a standard for commonly used elements such as buttons, forms and navigations which can be packed together in a convenient manner for reusing. For this purpose and because website and apps become increasingly integral in nature, frameworks like Bootstrap and Foundation became really popular.
In 2010, web-designing turned to a whole new different direction because people seem to prefer a very plain and simple design with more focus placed to the content’s website. This includes using exquisite photography and typography in which simple visual elements (or also known as the Flat design) are also an important part of the designing process. It was all about sophistication in simplicity. As for the newest updates on evolution on web designs, new units like the viewport height and viewport width were introduced in CSS in 2014 to provide greater flexibility with regards to elements positioning. CSS also now provides the Flexbox concept which allows creating and modifying a layout to be really simple when it used to require typing up a lot of codes into the computer.