2.0 Culture

Web 2.0 Design

… in a nutshell   

please use the MUCH EASIER TO READ HTML version (proof of concept itself) at:
http://www.vipedio.com/roman/blog/20culture_full.html

 

Preface:
Please, whenever I am refering to Web2.0/Ajax – I am NOT talking about the technology itself. Apparently I wasn’t able to find a proper term for that very popular design scheme appearing quite often lately in TechCrunch entries or similar reviews. It’s due to the fact that most of these “web applications” are using Ajax technology and benefit from the interconnection of web services (Web 2.0) – so that’s why I tend to call them “Web2.0/Ajax”. I think I’ll name it ”2.0Culture” for now. Right. So let’s stick to that.

In order to get attention to your brand-new 2.0Culture backed website, you need to bring up some decent “up-to-date” design with it. No, I am not talking about CSS instead of tables or suchlike. I am talking about simplicity combined with big fonts, shiny shaders and very, very strange brand names. Despite the fact that you need to do your homework learning about tags, clouds and plenty more of these catchy words – you can still be a great “new wave” designer – without being a pro 2.0Culture technology geek.

Right, let’s get it started while it’s hot.

First of all, check out these sites for a basic overview. Try to identify the major similarities between the various concepts. All of them seem to origin from the very same developer. Even though there’s no guideline (except this one here, wooho!) on that kind of design – it seems that the Bay Area is handing around some secret guide for that particular design scheme. Look here:

https://gtalkr.com/
http://www.flock.com/
http://instantdomainsearch.com/
http://www.silverorange.com/
http://www.read.io/
http://www.noodly.com/
http://instantdomainsearch.com/

As you might notice, these designs are pretty similar. But wait, the 2.0Culture has much more to show than that. This is just a small excerpt and we are going to put a particular focus on that kind of design for this article. There are millions of other sites, looking totally different while still being recognized as a “hmm, this looks like 2.0Culture” design. If you want to learn about the technology behind it, use our SanFran friend, Google.

Major MUST-DO’s:

• Rounded Shapes
• Shades
• Sans Serif
• Pastell v2.0
• Footers
• Buttons
• Font-Size: Oversized
• Descriptive HTML (XML style)

Major DO NOT’s:

• Java Applets (Script is fine though)
• Animated GIFs (the blinky ones)
• 100% Flash Websites
• Visible tables

Right, let’s get our feet wet and start right off with:

Rounded Shapes

Ok, this sort of break-boring-html-rules trend seems to have got quite a must-have nowadays. Frankly, I also prefer rounded shapes over tight rectangles. Same with women, I guess. Nevertheless, some 2.0Culture providers do still stick to the rectangle design schemes. No problem at all, have a look at writeboard.com – their editor is a rectangled interface. Nice as well. To try a “psychological” approach to this difference, I might point out these facts:

• Rounded shapes look more inventive, younger, flexible and experimental
• Rectangles do impress with professionality, big-business, trustworthy

So, this is my personal interpretation. Flames welcome. But take your time and think about it yourself. Check out some different designs and make your decision on what’s happening “inside yourself” while looking at them. I guess a decent interconnection between professionality and a fresh young breeze of inventive Bay Area mushrooms might be our perfect fit for this project. How do we achieve that? Simple: Combine. We got 2 solutions:

• Use a rectangled website container and rounded shapes for interface boxes like content divs and navigation.

• Use a rounded-shape website container and keep the content divs and navigation very straight.

It’s up to you what you prefer for your project. I do indeed like both. Though I got to say that using the second approach might be a bit easier to implement for the average web designer. You can do a simple Photoshop design for that purpose. Might take you some 15 minutes to get it done. To be honest, I think the trend is going towards a non-bordered website including lots of rounded shapes (which is the first approach then). So get ready to step up a gear and dig some more CSS guides.

I have put together a list of websites that go into detail on how to implement a rounded-shape design:

http://www.alistapart.com/articles/mountaintop/
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
http://web-20-workgroup1-swicki.eurekster.com/rounded+corners/

So get some coffee or tea and open up the virtual books. This might take you some 30 minutes to an hour if you are new on that. But it’s worth the effort. Think of browser compatibility, it’s a tough one.

Shades

Don’t overdo with shades, but think of using them. It’s not obvious for a web designer to think of them, but users feel the difference having them around on a website. It’s not about trying to make a 3D look, but more about pushing the plain, flat designed boxes into a new dimension of visual recognizeability (is this a word?). Mostly used as a nice background for a top heading or around content boxes. Examples do the talking here:

• https://gtalkr.com/ (heavy use)
• http://www.writeboard.com

Sans Serif (Arial, Helvetica, …)

I had to update this part of the guide due to heavy complaints about only refering to the Arial font, while Helvetica and other sans-serif fonts just do perfect as well (or better!). It’s that particular font style that’s been around for ages now. I remember a time when it was absolutely out and “nerdy” to use Arial for anything you wrote. Simply because geeks tried to seperate themselves from the every day Word Processor user, who were choosing Arial as most easily readable, besides Times New Roman. And now, wohoo, major come back. Literally Arial (and Helvetica, and similar…) has become a rule for simple, yet great looking web design. Font-Size 8 to 10 was a cool thing to do recently. Now we talking about sizes 14 and up. Not kidding. If someone asked me to design a webpage for impaired visitors I would most likely set up a 2.0Culture website. Even though it was not very popular to stick to “easy navigation and readable content” in recent days, things have changed big time by today. No more Font-Size 8 100% Flash – Please wait while pre-loading 1% – websites. I welcome that. Webdesign tends to become easy with that approach. Assuming CSS3 is really going to make things easier, of course. Remember to mark all your content with relevant terms like “headings”, “lists”, “links”, “paragraphs”. More on that further down then. Just a quick summary of this Arial rule:

• Use a base font size for your website. And make all other fonts relative to that one (e.g. font-size: 115%). This allows users to get foxy with their mouse wheel to rotate through font-sizes – while your website still looks cool.

• Do ALWAYS define your font-relevant settings inside a CSS file.

• As usual: ONE FONT PER WEBPAGE is totally fine, trust me.

• Never use more than 3 different font-sizes.

Pastell v2.0

This has been known for quite a long time now. The only addition to that is a combination of pastell colors with 100% Green, Blue or Red. Keep your website backgrounds and interface elements in Gray, White or some very light pastell colors. And now, you might be able to use a 100% Green header bar. Or (please, notice the OR, not AND) use a red navigation with white links. Go ahead and Make your download links sky-blue. It’s going to rule. But again, look around and get some first impression on how this looks at professional 2.0Culturals. This should get your started pretty quick. Just don’t overdo, that’s why you should really mind the “OR”. I think you’ll find your way through.
Check out freaky Skype on that: http://www.skype.com

Footers

It has become a must have. Footers. Most users don’t even notice them. You might have never clicked on one as well. But still, they need to be there to make a site look professional. Without them, everyone assumes you run a personal website. Believe or not, try and see yourself. Oh yes, and please, don’t ever think of making your footer stick to the bottom of the screen, behaving totally unimpressed of scrolling. That’s a no no. That’s too much geek, I’m afraid. There are two major sorts of footers, you need to decide yourself, which one is more suitable for your particular design. I have prepared two links with those two major implementations for you:

• http://www.friendster.com/
• http://del.icio.us/

The difference:
Friendster: A centered approach, containing well aligned elements.
Del.icio.us: Gray horizontal line, left(or right)-aligned links underneath.

Buttons

Within the major trend of moving from a home-computer application interface to a hosted worldwide web based application design, also lies the origin of recent sightings of button-like navigational elements. No, I am not talking about those -go to hell- Java applet buttons. Brrr, freezing. I am talking about “image buttons”. Either rounded or stricly rectangle shaped. And mostly quite large ones as well. The number one usage of these buttons is the must-have: DOWNLOAD button. When used in site navigation, the buttons appear to be a bit smaller. And don’t forget to use Arial for captioning, I told you.
Proof-of-concept:

• http://toolbar.google.com/
• http://www.mozilla.com/firefox/
• http://www.yousendit.com/
• http://clipmarks.com/

Font-Size: Oversized

Mhm. Right. Huge fonts. A no no no back in the days of Frontpage heros and free webspace fans a la “Look ma, I got a website!”. But times do change. Johnny Cash is dead and big fonts are back. I wish it was the other way round, but let’s get ourselves updated to 2.0 and accept oversized fonts. No big deal with that, simply remember to set up all your font settings inside your CSS file and define a base font and size, while using relative sizes after that. That’s common procedure. If you are totally uncomfortable with that, I might point you to a 2.0Culture compatible work-around:

• Use large headings, make them stand out
• Use medium sub-headings as a fade from large headings to normal content.
• Use normal sized content.
• Avoid long blocks of text then, this is crucial.
• Try to seperate your content into medium boxes

See here: http://clipmarks.com/ or http://www.banshee-project.org/Main_Page

And for everyone comfortable with fancy oversized design:

• http://extend.flock.com/details/flashgot
• http://www.flickr.com/
• http://www.noodly.com/

Descriptive HTML (XML style)

Last but never least – boring rules. Stop! Not this time. This is a must must must. Leave them out and allow your website to drown in browser-compatibility wars. I hate the term, but it’s a best-fit here: KISS. Yes, keep it small and simple. If you try to get one of those very, VERY old webdesign books, teaching you on how to implement “a href” and paragraphs, lists, headings – take it serious. I remember when I read through those articles back then, thinking that this might be ok for “University professor webdesign” but not for cool – i am a geek – design issues. How wrong I was. Retro style is hot again. Not because it looks cool, but much more because it’s perfectly descriptive. Ok, in order to understand this, you might need to have done some first steps in XML to get an idea. As Jeff Bezos put it recently: Web 2.0 is making the web more readable for computers. That’s the actual reason behind. Consideration of APIs for your website HAVE TO be connected to that descriptive approach. Just imagine you were using a Web 2.0 API while having to adjust your overall design to that particular content. Uhw, ugly. Simple Web 2.0 content is made out of lists, paragraphs, HEADINGS (very important) and non-javascript links. Very simple, isn’t it. Another benefit of using this approach is a better integration into search engines. Check out SEO forums and you’ll find truth. Google loves basic websites. You are a Google hero if your website starts with simple H1-like headings. Try yourself. Don’t overdo with tables or similar. Keep it simple if you want to have 2.0Culture.

View sources of:

• http://www.noodly.com/
• http://del.icio.us/help/ (very illustrative)

Great so far. I will not go into any details concerning the DONTs here. You might be able to figure it out yourself. Feel free to ask any questions you might have by e-mail: software@mittermayr.com

Roman

blog.mittermayr.com (link-credits: tc0.net)
software@mittermayr.com