How you can benefit from the 2.0Culture

  

check out the HTML version (for easier reading) at:
http://www.vipedio.com/roman/blog/20benefit_full.html

 

As a follow up to yesterdays, quite well recognized article (towards a 1000 diggs at digg.com so far), I would like focus on the benefits for each of us that may or may not come with the aforementioned 2.0Culture. This is going to be split into a users and a designers point of view. So there’s a benefit in it for every type of reader. Great.

Designer’s benefit

It’s not always about money when we talk about gaining a benefit out of something. But wait, sure, money DOES play a role as well. So I’ll focus on both sides of the bill. First of all, as I have received a lot of feedback on my last article, I am happy to see that most people were able to figure out the actual reason for writing it. It was meant to show you how you can benefit from the ongoing 2.0Culture hype, without actually doing any Web 2.0 or Ajax at all. I very welcome the upcoming trend to focus on simpler design and clean layouts, but I also welcome the mass hype that comes wrapped up with the words Web 2.0 and Ajax. It’s no secret invention that was discovered over night somewhere in SanFran, not at all. It’s been around for ages now, but some dudes were clever (stupid) enough to keep calling everything Web 2.0 and praising Ajax to be the next geek’s Jesus Christ. Even though you can clearly define Web 2.0 and Ajax, you can still rock Digg easily by putting those words into your topic. Believe it or not, I’ve done a proof of concept, just yesterday. It worked.

So, to get to the point: How can you, as a web designer, software developer or service provider benefit from this hype? It’s never been easier than today. No venture capitalists, no Google spin-off, nothing like that is required. It only needs a twist of 2.0Culture mixed up with your useable content. Ok, to get this lined up, let’s invent a proof of concept. Anyone reading this is free to turn this project into a real one. Keep me posted on that.

Our project
Let’s say we want to provide a service to our visitors. Hmm, right, I got an idea: We will provide a neat “What is this file for?” database. So, basically a website including a big search box where you can enter a filename, just like “arp.exe” and then click a “What is it?” which is going to bring up a small list of results. These results include some 1-liners of information about the file itself, i.e. “This file is used by Microsoft Windows for ARP requests. It’s included with the default installation. Not harmful.”. This might be colored as well, so a RED background means this file is highly dangerous, a GREEN one means it is safe. Multiple results might be found for one file, so file sizes might be interesting as well. Still, not much of information to store. A simple table might do just well for that. Also, you need to think of a way to allow users adding their information about various files. So this is not a big thing as well. Remember: KEEP IT SMALL AND SIMPLE. And make it look 2.0Culture. Big fonts, big buttons, you got the idea. Read the 2.0Culture Design guide for further information.
Let’s call it “WhatIsThisFile.com” (still available!). That’s a rememberable name, as “Filr.com” was already given away Anyway. So we got a name, we got a project outline. Let’s do a time estimate:

• Design: 30-60 minutes
• Domain registration and webspace setup: 60 minutes max
• Programming: 2-5 hours
• Putting everything together: 2 hours

Overall est. max time: 11 hours max = 1 Sunday. Great. Just a perfect project to do our first step into 2.0Culture waters. Alright, some of you might be motivated enough to set this thing up now. Let’s assume we got everything already finished and setup at “WhatIsThisFile.com”. Right, now we need to add a very, VERY important thing to make this a number one hit. We need to add those two things:

• An API
• Ajax powered query routines

Concerning the API: This sounds much more complex than it actually is. You do not even need to provide SOAP and such things, it is totally fine to have a .php (or aspx) file, available to do some queries from outside with it. The returned data should be XML or simple CSV text. Call me an idiot, but I do prefer CSV for this case. It’s easier to implement. (This is going to spam my comments section again, oh god). Anyway, let’s just cope with that for now. So, we got a file called “api.php” located at “WhatIsThisFile.com/api.php”. Anyone can now use your service by simply executing your script from their web servers like this: “http://WhatIsThisFile.com/api.php?q=arg.exe”. Right, piece of cake. Ok, the Ajax part is up to you. It is in fact a bit too boring, writing a complete 1.2.3 tutorial for this. I guess you are clever enough to get this sorted out yourself. Do some Google for Ajax, this should get you started within some 30 minutes.

Perfect, so we got this thing set up. It is waiting for it’s users.

Ok, to be perfectly honest, you would have to spend another day or two on adding the most popular filenames yourself. It’s the boring part of the work, but hey, it is your actual content. So don’t try to run away from that task. Grab a pack of beer (or coffee) and a handful of friends and get it done in a day. Still, a piece of cake. Some of you should focus on trojans, virus and adware related filenames, while others should pretty much summarize most of Windows’ -Visible in Task Manager- files. That’s what most people will try to look up in your database. If “svchost.exe” is a virus or a standard, not harmful Windows file.

Ok, so now comes the magic. Literally every web designer is able to make it this far. There are no tough pitfalls in that project, so I think it’s an easy one to set up. But how do you get that huge amount of visitors on your website? I had 0 readers at my blog two days ago. Today, I have 14.000+ still counting at a rate of 1 to 10 per minute. Despite my design guide, I haven’t even got a great looking blog. But I have hooked this design guide that I wrote onto the number one hyped words: Web 2.0 and Ajax. People seem to go crazy with that. I mean, check out digg.com, TechCrunch, del.icio.us/popular. You’ll find these terms just about everywhere! That’s your chance. Right, great services and products will get popular easily and quick, you say. Bad ones don’t (without investing millions). That’s very true. But having your project hooked onto a hype makes it hell easier for people to like it. And what’s much more important to remember is: More users bring in more comments on your project. More ideas and suggestions. So that you can benefit from that and collaborate with your user base in order to take your project a step further, altogether. Oh great, isn’t that what we all want? A Wikipedia heart in every one of us. I love it.

Ok, so how do we get famous without living around the Bay area? Hmm, frankly, this is not too tough as well. First of all, summarize your idea into a small set of lines, make it sound like a great invention, but remember to keep EVERY SORT OF SALES PITCH OUT of it. I do not like sales pitch, so you don’t. Well ok, I made this article topic sound like you can earn a million dollars by simply reading it. Sorry for that

Ok, we have our summary, we have our project ready, we need to fire up the promotion engine now. First place to go: digg.com. Get your article posted there. Get your friends to check it out and digg you if they like it. Spread the word in newsgroups (DO NOT SPAM) and if you have blog, get the news published. Ask for ideas and suggestions. Let people share their ideas with you. Visit slashdot.org and submit your article. This usually don’t works but give it a try anyway. Depends on your project and idea if people pick it up there. Check out some of the number one blogs in the IT sector and contact the authors personally by e-mail. Do not spam their comments section, this is not nice and not welcome. Let them know about your idea and that you would be happy to have it covered in their blog. Suggest to provide a backlink from your site as well. This might also work for 2 out of 10 blogs (depending on your idea again).

Now, that we have done our basic promotional actions, we need to wait. Well, not really. Waiting is stopping. Stopping is not what we want right now as we are just about to get it going. What’s more to do? Have your friends (those that helped you doing the boring work) help you with the promotion, not to say – the marketing – of your project. Spider around all blogs, forums and boards. And always remember to post it where it’s relevant. If you spam around, people will notice it. This is like signing hell’s guestbook. Once branded, always branded.

Good, allow some time to get the word going. Just do always emphase the words “Web 2.0” and “Ajax” with every published article. And, check out my blog at http://blog.mittermayr.com – where I published some information on press releases (you can do this for free!). See here: http://mittermayr.blogspot.com/2006/02/magic-press.html

That’s going to rock your page. Trust me. And if you have forgotten to include some decent web statistic analysis program, god, you won’t stay online longer than a couple of days. Analysis is gold. Check where your users are coming from (keyword: Referrals) and how long they reside on your page. Try to find any problems that users might encounter with your website. Have a “How are we doing”-sort of section. Best for this is a blog, of course. Keep your users updated on what you are planning in the near future and let them comment on it. That’s all you ever need. A loyal user base is what platin is to gold.

And if you really worry about the costs of your project, a small line of Adsense links at the very bottom of your page will do the rest. Do consider a “Donate” section as well. If people like your project, this is going to generate a greater income than Adsense will. More on Adsense and why it might not work perfectly at an IT related website in my other blog (blog.mittermayr.com) soon.

Just always remember the basic, yet most important rules:

• Do not spam
• Do not try to screw things like digg.com or Blogs
• Do not fake
• Users decide about your success
• Design is crucial (see previous article)
• Say Web2.0 and Ajax
• Keep up the free spirit and avoid any connection to money making

Phew, whole lot of information in here. But it is going to work. Every one of you is free to grab the domain name and get that thing started. I might do it as well – just in case nobody cares to do so. Let me know how it is going with it then. I promise to cover it at this blog. A friend of mine is now also working at a typical 2.0Culture project. As soon as he is done, I will post a follow-up, comparing the project with the guides and it’s success.

Users’ benefit

Ok right, how do you as a user benefit from this hype? Just try to get a brief look at digg.com or TechCrunch.com to see the latest projects popping out of the mushroom heaven. You will notice quite a lot of extremely useful utilities. And I call them “utilities” for a particular reason. In our perfect world, we have our virtual office consisting of various tools put together individually suited to your needs. Imagine your are a project manager in the IT industry. You will likely need a todo list, a calendar and web e-mail. All these things are already out there, waiting for you. Make sure to check out Google for terms like “widgets”, “gadgets” combined with Web 2.0 and Ajax. This definitely gets you busy for a whole afternoon. And it might take another year or two for everything to get into perfection. But most likely these things are going to be subscription services, offering a fully online administrated virtual office. I know (to prevent some comments right away), things like this already exist out there. But they are still not at their perfection.

So everything you do to get into all those gadgets, widgets, ajax, Web 2.0, bla bla, scene – will allow you to act, think and use these technologies ahead of time.

So as I said before: Grab it while it’s hot. Only at Naked IT.

Roman Mittermayr

For IT matters: http://mittermayr.wordpress.com
For Business matters: http://blog.mittermayr.com

feel free to flame and send suggestions to:
software@mittermayr.com

Just a quick follow up:
I must admit, I was quite a bit unprecise saying Arial is the only font for this 2.0Culture design. I was quite wrong with it, to be honest. I appreciate all the comments on that and I fully agree with them. But I think we can say, you should prefer using non-Serif fonts over Times-New-Roman styles. Flames welcome again, but I am (sorry) still a Windows person and therefore had Arial in mind at first. But you are obviously right. Helvetica and suchlike do their job just as well or even better.

More on how YOU can benefit from the 2.0Culture later on this day, here, at Naked IT. Be sure to subscribe to the feed as updates might be irregular.

Thanks for all the comments. I had about 10.000 people dropping by over the night, it’s amazing. From 0 to 10.000 in 8 hours. Not bad for a start.

So be prepared for more. Scroll down for the 2.0Culture design guide that you are now obviously looking for.

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