615-538-7573 info@vertical-web.com

For some of us, it’s hard to imagine our lives without the internet. Websites guide us through our day-to-day, providing the information we need and the entertainment we crave. But this hasn’t always been the case, and the art of web design has evolved tremendously over the past decade. Let’s take a basic look at where we came from, where we are now, and how we got there over the past ten years.

 

A little history..

The first versions of HTML (HyperText Markup Language) were very basic, allowing for simple Times New Roman text with little variation in spacing and structure. Headings, paragraphs, and links were about as far as it went for primitive sites that simply displayed information. In fact, a copy of the first website published by Tim Berners-Lee in 1992 still exists and is a shocking example of how far we’ve come. The website’s existed to explain the purpose of the World Wide Web—“a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” Check it out!

As time went on, HTML broadened its horizons (if only by a little) to include images and tables that were used to add simple formatting to pages, such as multiple columns and more aesthetic spacing. This might date you, but another widely used tool at the time was the ‘spacer gif’, used to control white space for desired formatting. Then everything started to change…for the better.

 

Style and Design

Although it had been around since the mid-nineties, Flash grew more and more popular, allowing designers to create animated and interactive content. The web design world was beginning to break through the static text and started thinking more about interactive elements to make the web more interesting. But the growing popularity and browser support of CSS (cascading style sheets) changed the game.

By eliminating table-based designed, not only did clean up the coding of the website, but it also clearly separated the style of the website from it’s content. CSS was advantageous for other reasons, as well. Page response times were faster, document sizes were smaller, and you could change the entire look and feel of the website more easily without having to even touch the content. This concept took off and began to evolve with more advanced versions, lending to the stylistic elements we see today. But as technology kept evolving so did the way we interact with the web, and yet another major frontier for web design was upon us.

 

Responsive Web Design

As the devices for which we explored the internet began to vary in size, web designers had to wrap their head around the fact that their websites were no longer just being viewed on a standard PC screen. Laptops, iPads, and smart phones were growing in popularity, and web designers had to think about their design in terms of varying viewports (the screens where we are viewing the web). Ranging anywhere from 400 to 1000 pixels on standard devices, these viewports drastically change the user’s experience if designers are building in the context of only one device. In a study conducted by comScore and Nielsen, they found that nearly 40% of time spent online is now from mobile devices. This was and is a huge shift that is only expected to increase over time. So what did web designers do to adapt?

In 2010, Ethan Marcotte wrote an article entitled “Responsive Web Design” for A List Apart where he coined the phrase and expounded on its meaning and implications. He spoke of the aforementioned shift in mobile usage and solutions to combat this issue. Comparing web design to architecture, he spoke of actual physical spaces adapting to their occupants and creating an experience for the inhabitants saying that,

 

“This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.” –Ethan Marcotte

 

Although fluid grid structures and flexible images were getting the job done in most ways, but an important element was missing: CSS media queries. They allow for our design to actually take the physical characteristics of the device into consideration for a truly adaptable experience for the user.

Responsive Web Design is now a guiding force for the industry, and it is improving and encouraging growth every day. Look how far we’ve come! RWD is no longer just a trend. We experience it on a daily basis and it is shaping the way we interact with the digital world around us.