Web Design’s Awkward Teen Phase
Remember the days of dial up? Reaching top speeds of 56kb/s. When you couldn’t be on the Internet and on the phone at the same time. Does this nostalgic tone sound familiar? Oh how times have changed. As the youngest person in the studio I probably can’t even say exactly what’s changed (being only 5 years older than Speedwell itself est.1997). The following takes a trip down nostalgia lane, looking at web designs’ awkward teen moments and how they have evolved over the years.
Websites have come a long way since the early beginnings. In the ’90s – early ’00s the Internet was not yet affordable/accessible for everyone, which meant there wasn’t a great push for brands to be on the web. Technology of the era played a significant role in the way websites functioned and looked. Back then web designs weren’t very pretty and were text heavy, mainly due to the slowness of the internet speed. When viewing archived sites (using the Way Back Machine at http://web.archive.org), you’ll notice the content areas are very small compared to modern websites. This is the result of the CRT monitor resolutions used at the time, which averaged 1024×768 or smaller. Left sidebar navigations and animating .gifs were popular during the early phases of websites.
2004 saw the shift to Web 2.0. Web Design from Scratch lists the most common design characteristics found in this movement, many of which are still present.
Today we are able to access the web practically anywhere, at any time on a million different devices. We’re seeing a growing shift with how people view websites. It’s becoming more popular for people to view websites on portable devices such as smartphones and tablets than desktops, which means there’s a high demand for websites to be optimised for a wide range of browser sizes on a diverse range of devices. Responsive Web Design provides a solution that allows websites to render according to the browser of the user’s device they’re viewing the website on. You can read more in-depth information about the topic of Responsive Design on Lachlan’s blog.
The remainder of this blog looks at some popular brands and the evolution of their website design since 1997 through to today. Note the contrasting difference with the older designs having fewer images, minimal designs and use the left hand side navigation bar.
The earliest archive of the Yellow Pages directory from 1997 includes a splash page with an animating .gif in the centre of a white page. Clicking this goes through to the homepage. You’ll see the page is quite minimal with a yellow sidebar where the search bar sits within. The rest of the pages are mono-colour images that link to other websites. The best feature of the page would be the rotating banner letting visitors know they can Call N’ Win.
The 2005 design was used for quite some time. The search bars in the middle of the page is instantly noticeable, however the navigation underneath the white search area gets lost amongst a heavy amount of yellow.
The Yellow Pages website recently got a redesign and is now fully responsive. The primary search bars appear at the top, with the addition of a secondary search feature that allows users to scroll through different types of business categories. Users can now get results without leaving the homepage. Yellow Pages has apps available for both Android and iOS.
Back in 1997, the Qantas website provided information on flight schedules, arrivals, departures and contact info. The header and buttons consisted of images, with the content set in the middle of the page inside a narrow column. The text font is Times New Roman, which is sitting on a not so appealing medium blue.
Today the design of the website is very clean, flat, with information clearly laid out. Users can plan a holiday without navigating away from the homepage. Under the navigation, the content section includes rotating banners with a booking tool for different types of booking options. The website is not responsive but Qantas have a mobile version of the site. The mobile site’s menu links to the most commonly used areas of the website. The mobile site doesn’t reflect the current flat, clean design of the desktop as it still uses gradients. There are apps available for Android, iOS and Windows.
Current - Desktop
Current - Mobile
Much like the Yellow Pages website, Apple’s website from 1997 includes a left side navigation menu. Content on the site is mostly text with minimal graphics. The website from 2001 starts to look more exciting with a top tab navigation using the jelly gloss look. This reflects the style of OS X Cheetah that was later released in 2001. It also introduces smaller feature images below a large hero graphic panel.
Apple upgraded the navigation in 2007 to reflect the look of the newly released OS X Leopard. The homepage design hasn’t changed much since then. The navigation has received an upgrade since, and the hero graphics stretch larger but they don’t stretch full width (which is the current design trend). The iPhone 5C and 5S product information pages utilise the whole browser window with images taking up the full height. It also features subtle parallax scrolling and large typography, all of which are web design trends that became prominent in 2013.
Interestingly, Apple’s website is not responsive when viewed on portable devices. The website just resizes to the width of the device’s browser. There is an app for the Apple Store, however it’s only available on iPhones.
Want to see what your favourite sites once looked like? web.archive.org have over 391 billion web pages archived that’s worth having a look at.