From Tables to Responsive Layouts

Having worked in the web design industry for over 17 years, I have seen many ways to build websites from the front-end developer’s perspective. When I first started back in 1997, we used “tables” to position elements on web pages, even though tables were really meant to display simple data in a table format. The code for tables is very bulky, and based on today’s SEO standards, tables are not a good choice compared to a CSS (Cascading Style Sheets) layout.

However, the practice of using tables was ideal at the time. It worked with most browsers, and everything was more or less pixel-perfect. One downside, though, was a lot of images were used for spacing, resulting in your page actually having many tiny transparent images. You wouldn’t see these with your eye, but in the back end you would see them all over. This was bad due to the number of http requests needed to load all of those images, which slowed up load times.

As time went on, new tricks had to be invented to improve a large range of problems and poor practices in table design. One of the biggest cons for table layouts was making general changes site-wide. CSS was available but was mostly used for fonts, and to make matters worse, the majority of browsers didn’t support CSS, which could basically break your website.

A committee called the W3C was formed in 1994 to change the direction of web development for the better. Protocols set by this committee have allowed browsers like Internet Explorer, Firefox and Chrome to use CSS effectively, and when updates or new versions of browsers are released, they also abide by the W3C protocols.

With the use of mobile and tablet devices skyrocketing and mobile devices surpassing desktop browsers for Internet surfing, front-end developers must now create websites to work in all browsers, platforms (like Windows/MAC), and now mobile/tablet devices. It is a difficult task, but with the ability to use CSS in creating pages, a new technique has come into play called responsive design.

Responsive design allows us to create a website that will display nicely and give you a great website viewing experience on all devices. This has the major advantage of requiring us to maintain only the main files instead of creating a completely different website just for mobile devices. Depending on the site, there are times where you may want to do a separate site just for mobile, but overall, responsive design has taken off. In my opinion, the comfort of knowing your website will look good on everything from a huge flat screen monitor down to an iPhone makes responsive design the best way to go.

Today, tables are still used to display data, but they are used in e-mail newsletters as well. We are hoping in time that will change, but for now, most of the big e-mail companies like Gmail have a lot of strict rules which force us to use tables.

It is amazing to see where we have come from 1997 to today. Who knows what the next big thing will be? But back when tables were heavily used for constructing websites, we couldn’t do a tiny fraction of what we can do now with CSS.