CssMySite

Web design trends have evolved over the years as html and other web languages matured, servers got faster and web browsers became standards compliant.

I started this site as a way to learn Kohana, show off my CSS skills, play around with JQuery and brush up on my Photoshop skills.

Doing a "history of web design" gave me the perfect opportunity to design many different looks.

All the different trends use the same html code. Only the CSS, images and some javascript is swapped out.

If there are any trends I have missed, send me an email or leave a comment here.

Not Internet per se but I have fond memories of the 3270 terminal from when I started working at IBM in 1989.

• The primitive IM - TELL.
• Checking to see if your manager was logged onto the system.
• Sending PROFS notes.
• Ascii art.

        ,.,
       ((())
      (|o_o|)
      ()\=/()
      ()\_/()
      
         ,.,
       (~ ~)
      q:0 0:p
       ((_))
        'u'
  
      ,oOOOo,
      o(""")o
      o|* *|o
      C((_))C
        '='
  
         ,
     ,.'` `'.,
      |:o o:|
       \(_)/
  
         ,
       ,iIi,
      (((()))
      ))o_o((
       '\=/'
      
      
  

• The green glow emanating from the resident guru's office who insisted on working with the lights off and who would sometimes talk to you while cutting his toenails.
• Big hair

Okay...so it wasn't all good and we were all anxiously awaiting our 386 machines with OS/2 so we could connect to the token ring and surf the real Internet.

In the beginning the Internet was primarily used by researchers in universities. Enamored by this new form of communication, the university culture took to emails like ducks to water. The low cost and nearly instantaneous sharing of ideas, knowledge, and skills made collaborative work much easier.

The term "Internet" originated in December 1974 in an RFC document describing a single global TCP/IP network.

In 1985, the United States' National Science Foundation commissioned the construction of a university 56 kilobit/second network backbone using computers. In 1988, the network was opened to commercial interests.

The slow computers of the age necessitated few if any graphics were used in web pages. The main focus was to distribute information without thought to how the websites looked.

In 1996, Microsoft released FrontPage 1.0. One of the first distributed web authoring tools, it let the users save their work directly to the HTTP server (if the server had the FrontPage extensions installed, of course.) This let authors work remotely instead of having to be connected to the LAN containing the physical storage.

Needless ot say, FrontPage became the darling of the early web. Its WYSIWYG editor let anybody — regardless of web knowledge, design ability or taste — publish websites.

Now the FrontPage web pages are like the old chain-smoking, whiskey-drinking, gaudy great-aunt who stays too long and talks too loud. She's fun to be around for about three minutes but after that she gets rather tiresome.

FrontPage produced an ugly mess of non-standard HTML sprinkled with IE specific tags. As you clicked save, you could almost hear Frontpage yell, "<BLINK> <MARQUEE> <O:P> Suck on that Netscape Navigator!"

As web developers wanted more control over their code, WYSIWYG editors became passe and now the hallmark of a "real" developer is hand-coded html.

After companies decided that teal backgrounds with blinking, scrolling purple text did not quite represent them the way they intended, the Business trend was born and it was all-business.

Dark corporate headers. White backgrounds. Black text.

Very few images were used. Usually just the logo and the obligatory photos of a good-looking, diverse group of people* staring intently into a computer monitor.

The text was filled with corporate-speak such as: mission statement, synergy, six-sigma, think outside the box, client-centered, rollout, best-in-class, commoditize, empower, facilitate, paradigm shift, push the envelope, proactive and deliverables.

For example:

CssMySite's Mission Statement

We capture the synergy of six-sigma to think outside the box in a client-centered way as we rollout best-in-class solutions that commoditize, empower and facilitate the paradigm shift to push the envelope and enable us to be proactive in our deliverables.

This trend was blah, characterless, drab, dry, mundane, stodgy, trite, unexciting, and uninteresting. Thank goodness it is (mostly) over.

The Real Web 2.0

The term Web 2.0 was coined in early 2004 by O'Reilly and MediaLive International. They noted that even after the burst of the dot-com bubble, new websites and applications were popping up rapidly. Most of the successful companies used the web as a platform and provided web services with dynamic content derived from the users of the website. Web 1.0 was defined as sites that contain static content provided by one source.

Some example Web 2.0 applications are:

• MySpace
• Twitter
• Wikipedia
• Bittorrent
• eBay
• Blogging

The world of Web 2.0 is also the world of what Dan Gillmor calls "we, the media," a world in which "the former audience", not a few people in a back room, decides what's important.1

Web 2.0 as a Design Trend

Somehow Web 2.0 became synonymous with the design trend of shiny buttons, reflections, and huge font. Web designers used it as a marketing buzzword to woo their clients. Who wants to be stuck in Web 1.0? Web 2.0 became a bandwagon and everybody jumped on it.

Come on people, as far as design trends go, I think it is time to move on. This trend is the Hillary Duff and Hannah Montana of web design. My 12 year old daughter loves Web 2.0 sites...nuff said.

1O'Reilly News

Textured sites are a designer's dream. They get to pull out all their tricks and fancy Photoshop brushes. When done well, the sites are beautiful where the sum of the parts equals more than the whole. Like a symphony performed by a professional orchestra.

When they are done poorly, they are a hot mess. Think three-man band of five year olds — all banging pots and hooting kazoos.

Most textured sites have drop shadows dropping every which direction, an overabundance of patterns that don't match and make the eyes cross, and teeny tiny text in fixed size boxes that break when the font size is increased.

I once had a boss who never met a drop shadow he didn't like. Our websites all "popped off the page" and were quite visually disturbing. I asked him, "How many suns are on your planet?" but he didn't seem to think drop-shadow-reality should be a concern. I do.

Please join me in my "Save Our Perspective!" campaign.

Like everything in web development, flash has its place. But like almost everything in web development, it is overused.

Clients love flash. It gives them the "Wow!" they are looking for in a website. Unfortunately, flash is usually thrown in to be flashy without any thought to how it relates to the website, how long it takes to load, or SEO considerations.

I once had a boss show me the new flash for our website. It had over 60 seconds of a golf putt circling before sinking in the hole. When I expressed my confusion on how that related to web development, I was told I didn't understand because I was not the target audience. Okay...whatever.

People come to websites for information. They don't want to wait for flash to load or to have to download the newest flash plug-in. Most people don't like the distraction of moving animations when they are trying to scan a website.

First came dark,then came dark and glowy. The dark backgrounds and light text were a welcome change from the cotton candy colors of Web 2.0. "Stunning" is the word most used to describe well-done dark websites. They have a sophisticated feel that screams, "I am an artist and a damn good one!"

Grunge started as the de facto web design for skateboard punks and garage bands. Gritty or dirty backgrounds, subdued colors, rough textures, torn edges and graffiti-like text define the grunge look.

Like every web trend, grunge has its place. When used for the right website, it evokes a raw, edgy, urban feeling. When used for "Grandma's Homemade Cookies" there is a definite disconnect.