Feature
Post

Category
Webapps

Why MySpace Won The Social Networking War

OurSpace

I started learning about web development when I was about 8 years old, already experiencing the web at age 6. Since I was very young I was used to playing with the familiar screen of white text with a black background known as DOS. I always tried to find ways to put my own stuff on that magical screen. I strived to have something different from the infamous “C:\>” prompt that was once my gateway to a world of cheap educational games or whatever my dad would let me do with it back then. I loved hacking away. I loved seeing my work up there. It’s why I love what I do and why I try to learn more about it every day.

As a web developer, like many others, I wonder how MySpace, which followed no rules of web development whatsoever was able to scream to the top of the emerging social networking world and become the phenomenon it is today. I’ve read a lot of blog posts and articles and heard a bunch of podcasts and commentary but not a single source of MySpace dominance opinions comes from the perspective that needs to be seen from, the target.

MySpace

AOL had it in their hands.

We had a major hint to what social networking needed, and it came from our friends at AOL. It was a simple (and crappy) feature that opened a world of wonder into the lives of others that made AOL Instant Messenger such a popular choice for messaging. It was profiles.

I’m sure the guys on the AIM team didn’t think it would become such a hit and not many people realized it was such a hit either, but teenagers across the country would work extremely hard on making their AIM profile the best of the best. Sub profile websites were among the most popular of websites back then. People could extend their AIM profiles in that same window with links, polls, quizzes, and more. Most importantly, users were able to customize the colors and text to favor their needs.

Where does this behavior come from? Well, have you ever walked into a teenager’s room? When you live with your parents, when you live without a car, and when you live in a house with the customs of your parents, you feel a need to make that one part of the house that you know is yours, well, yours. I look around my room this instant and see nothing on the walls (or on the floor) influenced by anything around the house. It’s all me. Walk into any teenager’s room and chances are that everything you see was placed there specifically by the person who sleeps there every night.

There’s a new home for everyone in the information age and that’s the internet. We know this. We teenagers love it. It’s the one place where our parents can’t change what we have in it and it’s the one place we spend most of our time in nowadays. It’s the new room.

The home we’ve been waiting for.

Every other social networking attempt out there was good. They did it “right.” They were consistent, they were organized, the UI was clean, it was friendly, and it sat there all nice and pretty. Ever walked into a teenager’s room and felt that way? Walk into my room and the first thing you’ll do is trip over my school uniform pants. At that point you’ll look up and you’ll see a Pink Floyd poster followed by a stack of DVDs consisting of a box set of 24 Season One and other action and thriller movies I enjoy. Before MySpace, you could not express yourself the way teenagers express themselves in their room. Friendster and MSN Spaces gave us rooms, but they were more like prison cells. They were ours, we kept our stuff there, and it was unique. But a shadow of strict regulations by constant guard watch and restricted access prevented it from expressing us. MySpace allowed this, but MySpace is not to credit.

MySpace was a prison too. Problem was that security was terrible. People were sneaking in posters, paint, lava lamps, and telephones. And MySpace has only one group to thank: The MySpace layout sites. In a sort-of recent interview, Tom Anderson, President of MySpace, says that a great management team is to thank for MySpace’s rapid growth. I say nay. It was rather the terrible ColdFusion coding skills of the original MySpace team that allowed for so many hacks to be made that people began making their MySpace’s there. Finally there was the freedom we wanted, but at a cost.

During MySpace’s early months, and still even now, MySpace was constantly hacked where Cross-Site Scripting was to blame. People would insert malicious JavaScript code or malicious Flash files in hopes of hacking MySpace accounts or MySpace itself. Now MySpace filters out a lot of the bad code and MySpace is today what it always has been. A terribly coded site with the worst team of programmers who have built the slowest site I have ever used who finally made a website (accidentally) right: ours.

Our personal social war.

There’s also one very important aspect to this social networking thingamajig you guys like ever so much. It’s not just about the networking. It’s a competition. Teens don’t customize their cars to feel more comfortable when walking to the car. Teens don’t decorate their room just to have some sense of achievement. They do it to show off. A fixed up car will make you look like a car expert, an amazing website will make you look like a star website developer, and a frequently visited MySpace with a high friend count will make your social status boom.

In a time and age where social status is everything for teens, some of our kind feel that MySpace is the only way to really make yourself feel like you mean something in your group. A high friend count will show how much people like you or how desperate you are to make people think people like you. The teenage years are crazy times and MySpace seems to have hit the spot (with the help of some third parties of course) for helping us express ourselves the way we want to. Consistency works but creativity prevails. Businesses need consistency, people need creativity. No matter how terrible a MySpace may look, it doesn’t matter at all. The MySpace represents the owner and that’s the type of real estate people are looking for on the web.

It’s a different time and age. The world is smaller. Content creation is easier than ever before and it’s booming. The end-users are now the creators and the controllers. You must accommodate this or you will fail.

Feature
Post

Category
General

You Call Yourself A Designer

So you consider yourself a web designer? Good for you. How long have you been designing, what skills do you posses, do you have a portfolio? These are the questions any employer will ask before choosing you out of an unlimited supply of design talent. Is there any way to stand out?

Know What You’re Good At

When searching for a potential client or browsing through job openings at forums and freelance sites around the net, know your skill set before you attempt to apply for the job. I see it all the time, when someone is looking for a designer, they receive a ton of replies, but more than half of the people replying lack decent design skills. Money talks, and it can take you over into thinking you can handle a project that is way out of your league, especially if you are just beginning. Don’t go around saying you’re experienced when you really have the slightest idea of how to get things done.

Learn on your own time

Trying to take on client work, meet deadlines, and learn new techniques at the same time is challenging. Start slow – don’t attempt to jump right into the work force if you have yet to gain the experience needed to meet many of today’s “new” requirements for design, including valid xhtml / css coding.

Instead of spending countless time looking for work you could have, get in Photoshop and get practicing. Put together a bunch of premade templates, where you have the ability to tweak and improve your designing skills, and still maybe able to make a few extra bucks by selling the templates off. Only when you have what you believe is the right amount of experience should you attempt to please the hard to please client market.

Show Some Professionalism

An average forum thread with someone looking for a designer looks like this:

I’m in need of a web 2.0 design, looking for people to pm me with examples of work and price quote. Thanks

First, anyone with reasonable intelligence will want to get directly in touch with the person and get a much larger background about the potential project, otherwise, ignore the project completely. If the employer can’t even explain the project, chances are, you don’t want to work for them.

Next, there’s the PM issue. This gets on my nerves every time I see it, because of how people that our “designers” act about it. If a potential client asks you to contact them, then do it! They’re your potential client, and if you want to work for them, put some damn effort into it! You’ll see replies in forum threads with the designers bidding for the project telling the employer to get in touch with them if they’re interested. Not only does that lack professionalism, but it shows a disinterest in actually doing any work for the client.

So, am I a designer or not?

Real designers show professionalism, understand the business model, and treat every potential client as if they already were a client. Anyone can open up photoshop, paint, etc, and put together a random image. That doesn’t mean you know enough to consider yourself a designer. If you’re serious about web design, do some reading, keep practicing and improving your skills, and then find some clients – not the other way around.

Feature
Post

Category
Code

Ajax on Rails – Prototype vs JQuery

When you unpack your shiny new version of Rails and generate your first Ajax link, you are using the Prototype library. It’s beautiful to use. It adds many Rails-like constructs into the JavaScript language, e.g. the each method to iterate a closure over an array. Sexy stuff.

But the following effect (open for demo) isn’t done using Prototype:

It was done in a few lines of Javascript using the jQuery library [1].

$(".tick").hover(function() {
$(this).removeClass("tick-off").addClass("tick-on").announceButton(this)
}, function() {
$(this).removeClass("tick-on").addClass("tick-off");
});

Prototype provides a comprehensive library of base classes, such as Element and Hash, where as jQuery is fundamentally different. It provides just one entity – the jQuery object. This is created using the familiar $ function and represents a collection of DOM nodes, rather than just one.

The jQuery object is then extended and extended and extended with all the functionality you need – scriptaculous-like effects, Ajax calls, prototype-like manipulations, etc. JQuery plugins

Yehuda Katz – author of autoDB – the dynamic admin console for Rails apps – has his feet deep in jQuery land as well. He manages the Visual JQuery documentation, and recently wrote an article comparing the philosophies of Prototype and JQuery, to help people understand how they are different.

The core problem for Rails developers who might like to try out jQuery is that it eventually conflicts with the prototype library when you start to use Rail’s “in-built” helpers for prototype.

But perhaps you do not need to use these helpers, as an increasing number of jQuery plugins start to provide more and more elegant client-side functionality. For example, an InPlaceEditor extension, and many others.

Want something truly pretty developed using jQuery – how about the planets revolving around the sun?

Work is also underway to integrate jQuery into Rails, including its own set of helpers, code named JQuails.

Many Rails developers might not be familiar with the abilities of alternative Javascript libraries as they get prototype/scriptaculous embedded for free. Yet it would be wise for all developers to be aware and competent in multiple frameworks, so that the best tools for each job can be selected. There is certainly some momentum behind jQuery in the wider development community. To Rails developers I say, Keep a Look Out!

[1] The Hover Demo Script was written as pure Javascript to make it easy to download. Firstly it disables the static image (for RSS feed and non-JS environments), and then creates the DIVs for the effect. The hover effect is then setup by applying the hover function to all elements of the class tick. The two functions we pass it perform the CSS class manipulation that gives the effect. Note the use of chain calls that make the syntax so attractive.

Note also that we’ve added a custom function to the jQuery object – announceButton. It assumes that only one button is active at a time, uses this[0] to determine which one it is. The function then returns the jQuery object (stored as this) to allow the standard method chaining to continue.

Feature
Post

Category
General

Crazyegg Opens Its Doors

After months of being in beta, Crazyegg has opened its door to the public. With it comes a new pricing scheme, with a free option remaining. We’ll follow up our Crazyegg Preview with a new review later today. Stay tuned!

Crazyegg

Feature
Post

Category
Design

Constructing the Perfect Logo

Logos are the keys to success – the starting point for branding of any kind. But how can you put one together that stands out, and creates an original remember-able icon for your site? Today, we’re breaking down some of the best rated logos on Colin and David’s Logopond, and focusing on what makes them great. We’ll also take a look at more larger, well known logos, and see what has made them work.

What is a logo?

First, what exactly is a logo? Let’s take a look at an official definition from dictionary.com:

lo·go (n) – A name, symbol, or trademark designed for easy and definite recognition, especially one borne on a single printing plate or piece of type.

Ah I see, so a logo is something (can be anything) used to represent someone or something. Pretty obvious huh? We seen logos all around us, store after store, billboard after billboard, and even person after person. We all have our own branding, that distinguishes us from anyone else.

When creating logos on the web, you’re looking for that same effect. You want to stand out, and have something that makes it easier for everyone to remember “oh yeah, that’s this site”. Let’s get into how we do that.

Get Your Ideas on Paper

The best place to start logo designs, particular if there going to include some kind of symbol, is with a piece of paper and a pencil. Here, you can let your ideas flow, and sketch up anything that comes to mind. Even if you yourself don’t plan on designing it, sketches can really help logo designers by giving them definitive directions to head off in.

Let’s use our logo’s example. While a horrible one because of how simple and basic it is, I did put a lot of thought into it when we first began constructing Devlounge in late 2005.

Logo Sketches (Very Rough & Quick)

We wanted something simple, especially because, at the time, the logo was the least of our concerns. For the most part, we had thought the logo would be text and text only, until we put together the simple box with a letter in it. It worked for us, so we have left it as it for now, but we do want to start fresh soon. You can see some of the rough (very rough) sketches above.

Details Matter

Even some of the smallest details matter when creating logos. It’s not always the big things that can leave effect, but minuet details.

Let’s first look at our logo again. In the image below, you’ll see a comparison of our current logo, and a quickly mocked up version which added just a few small details: A light to dark red gradient, reflection, and 1 pixel border around the “D”. Looks a lot better, doesn’t it?

DL Logo Comp

Many times, logos also have hidden details you may not see right away. In text, they can be cutout shapes or images, which adds a symbol but doesn’t make it all too obvious. There there are symbols would actually represent something else. Take a look at the Wecreatethings synergy logo below. I looked at this so many times, and all I ever saw was what figure 1 below shows – a cool looking symbol representing synergy.

Wecreatethings Logo

But last night as I was half asleep and looking at it again, I noticed something. The logo was actually made up of text, a CC and DB, the initials of the two people behind WCT (Fig. 2). I thought it was ingenious, and I could not believe how long it took me to notice.

Feature
Post

Category
General

9rules Welcomes Devlounge

Nearly three months to the day Devlounge was submitted into the 9rules Round 4 Madness, Scrivs has officially welcomed Devlounge into the family. A lot has changed in the three months between May and today, including the redesign of Devlounge, more content, and most recently, a whole new group of contributors. Things are looking good. On the downside, May 17th was not only a good day when the 9r submissions opened, but it also marked the last few weeks of the school year. Now, as we get personally inducted into 9rules, I await the looming return to school in the coming weeks. I guess it all became full circle. A nice way to end the summer.

If you’re visiting for the first time, let me point out some of our favorite articles so far:

The Redesign Process – Just how DL2 was built, from the ground up.

Improving Content – Our very first piece that got Devlounge started, and it wasn’t even written by us! Find out what special guest put this one together to get things moving for DL.

Paying for Content: Worth It? – An article that takes a look at the problems with paying for content.

A Sneak Preview at CE – An inside look at crazyegg before it launches, with a wider preview coming in the next few weeks as CE ads final features before launch.

Feature
Post

Category
General

Microsoft Launches Blogging Tool

Yesterday, Microsoft released the first free beta of Windows Live Writer, a fully-featured desktop blogging tool. This first release looks very good, but I myself have yet to give it a shot. I had planned on reviewing it, but after checking my buddy Paul’s site, he had a long review like I expected he would. Take a look as it covers mostly everything WLW has to offer in its first public beta.

Feature
Post

Category
Homepage News

Many new introductions

In just two days, the Devlounge staff team has nearly doubled! We’ve managed to yield in five new contributors, each with extended knowledge in some of the fields we have yet to do much talking about here on Devlounge – PHP & Ruby and AJAX & Javascript. Each of them are looking forward to contributing some killer content you won’t find anywhere else. We are happy to have them aboard. Please welcome Satish, Rick, Nic, Matt, and Dibya. We’re really reaching out with our global author set as well :)

To check out their homepages, visit the Authors Index.

Feature
Post

Category
General

Css Gallery Sillyness

I’m thinking about opening my own css gallery in the coming weeks – this one will be brand new, with some features you won’t see anywhere else: thumbnails, voting, and commenting – oh my! I even plan on showcasing the same sites that every other css gallery is showing, maybe even at the same time!

A word to the wise, css galleries are over.

The (Lack of) Need for Galleries

Each day, new CSS Galleries pop up all over the net. They get submitted to digg, score a fair to high amount of diggs, and instantly have more feedreaders than Devlounge. How is this possible? CSS Galleries appeal to many because it’s free site promotion. To the webmaster, it’s an opportunity to get thousands upon thousands of site owners to submit their sites, and stack up traffic in a very short period of time, without much effort.

But with such a surge in the creation of css galleries, is there a need for any more? Certainly, people think so, because they continue to pop up all over the place, with promises of being so much different than all the others.

Centralizing Submissions

The need for CSS Galleries also was derailed with the launch of none other than Css-galleries.com, a site using rss to showcase sites featured at 20 popular galleries. 20 galleries all on one site! Why subscribe to any other one again? (I can only imagine the feedreaders on CG, since I see individual css gallery sites with hundreds.) CG was a killer idea, and an absolute must alternative to visiting every single site to check if your site was showcased or not.

CSS Galleries

Standing Out in an Overcrowded Field

Still convinced that you can start a css gallery than will blow people away? It is extremely hard, but consider a few of these keys if you believe your gallery will lead you to greatness.

  • Be original! When 20+ other galleries are all showcasing the same design within a few days of each other, that’s nothing but major overkill. Keep your visitors wanting to come back by featuring sites no one else has.
  • Narrow down your selections to one topic. I came across a css gallery a few weeks back that showcased only horizontal scrolling sites. I thought that was a great idea, because it wouldn’t lead to the same old repetitive showcased designs found on every other site. Create your own random niche, and find sites that fit into it. Uniqueness matters people.
  • More Features – Commenting and voting is boring, because every gallery offers it now, and still, not many people take advantage of it. Come up with something new, like daily head to head battles between the days showcased sites, where the highest voted site wins S.O.T.D or something like that.
  • Update frequently … or, infrequently. Having fresh content is important, but at the same time, sometimes leaving a while before adding new submissions keeps people coming back. Look at Stylegala. Even with a new owner, the frequency of accepted submissions remains very low, but yet, I doubt the traffic has dropped much. Of course, SG has other features to get people returning, but it’s main purpose – being a design gallery – has really taken the backseat.

My Favorites

Some of my favorite galleries are Tom.ma, which is a “screenblog”, which serves its purpose. Simple, effective, and to the point. No extra goodness, just thumbnails and larger image screenshots.

Others include cssremix, and of course, cssgalleries to put them all together.

CSS Remix

Feature
Post

Category
Interviews

The Three from New Orleans

For the first time we’re putting together a multi-person interview with three talented and upcoming designers from New Orleans. We’ll discuss design, the degrees of separation project, and personal ventures, as well as how life has changed in the past year. Let’s introduce you to Robyn, Erik, and Ken.

Devlounge: How’s it going everyone? We typically ask for some background as our first question, so mind giving us the 411, and how you’re connected to New Orleans?

Robyn: I am Robyn, 23. I really like when people make those batman jokes about my name. I moved to New Orleans at the beginning of 2004 to finish up my schooling at Loyola. That place is rad. I finally finished about a week ago, since that hurricane thing ate my fall semester. Now I am working at a new ad group in Lafayette, about 2 hrs west of New Orleans. Oh, and I kind of hate title case.

Erik Photo

Ken: Doing pretty good man. I’m born and raised here in New Orleans (Uptown), but I’m in the process of moving.

Erik: Doing very well. Trying to not pass out from the heat! Born and raised in Louisiana, moved to various parts of the state and came to New Orleans a few years ago with my freelance operation. Between living in different neighborhoods in nola, you end up meeting a pretty solid group of people in your community, and form a really great circle of friends.

I tend to go out of my way to help friends, dropping my own wishes – and it’s great to see people doing the same, and return the same. The south tends to rock like that. As far as my connection to nola? I’m definitely an optimistic cheerleader for the city. Currently trying to get up and comers in the art community together and get their work out of nola.

Food aficionado and listener of problems over beers. I celebrate what the city has to offer.

Erik's Work Samples

DL: DL: The Degrees of Separation project launched prior to the Hurricane Katrina disaster, and has since become of “joining point” for New Orleans design. Was each of you involved before Katrina struck, or did the events inspire you to get involved?

Robyn: I had some stuff ready to roll pre kat. The project kind of changed after that, so I just submitted new comps. Of course after that you are going to be moved to react, dOs was a good vehicle. Plus it’s samia, you have to do it.

Ken: Actually Samia contacted me during the second issue which came out after Katrina struck. Since I’d done a bit of traveling during the evacuation I was pretty excited about getting involved with the project. But personally I wasn’t interested in doing any Katrina related pieces because the idea itself was getting watered down (or at least on it’s way). It was like the 911 campaigns, movie, etc; did it come out to soon or too late?

Erik: Many of the people were but names before the storm. I had heard of the project, but had not gotten involved because of the juggling of so many other client projects. Through my involvement with constance, is how I met many people in the network in DoS. Many of the people had left the city, whereas I had returned. Samia Saleem had asked me to participate in her project and I happily accepted. We connected on many levels of design and process – so that in itself was a kick starter to for my involvement. Right now is a trying time for everyone. So many things were inspiring before the storm, and even moreso in postK life. The beauty, decay and the fight of the New Orleanian inspires and impacts everyones work here.

Robyn

DL: DL: The whole New Orleans design community really seemed to come together in the wake of Katrina. I seemed to stumble upon so many New Orleans designers and inspired art, it amazed me. Then came the emergence of Dirty Coast. How did you think the design community and particularly the N.O design community responded to the situation?

Robyn: There was a pretty tight knit design community before the storm. It is just that the spotlight was finally on us. Not knowing where everyone was spawned all of these project’s, it sort of gave me a sense of home and assured me that as soon we could get back, everything would be fine, as far as that aspect of life. And now it is really cool to see how the designer’s reaction has changed. At first we all seemed to dwell in the destruction of the city. I think we all just got tired of bitching and are now concentrating on what made/makes our city so great.

Robyn's Work Samples

Ken: I remember seeing the Hurricane Poster Project and a few other things. I thought it was funny because there were more designers from other cities submitting pieces than designers from here. It’s great that people responded and took time to look at the crisis and true culture of New Orleans that was at stake (many people view this as just a party town). But more importantly I think the weakness was how New Orleans was the focal point and people forgot about all the other cities that were totally flattened (Gulfport, Biloxi, etc).

Erik: Community in business and art is a fickle thing here. There is a community indeed of people wanting to help one another, but solid collective efforts are few and far in between. So many levels of our community can be examined to see this trend. The lack of gangs in New Orleans, should tell you from a base level that everyone is for them self. Same holds true in the design and art community, I find. So many people, doing their thing, rarely collaborating, and executed in the usual New Orleanian ‘get to it, when i get to it’ attitude. I do find more solidarity in the arts now, because people are finding that its worth fighting for. We tend not to worry about things until the bottom drops out, hence our taste with Katrina.

I do also find that people forgot about New Orleans before the storm. Sure people know of the place, but usually associate with celebration only. It’s sad that it took a huge mess for some people to pay attention that there are things going on here. The people here are a special breed. Very real and able to deal many things that i think many in America could not deal with.

Feature
Post

Category
Homepage News

Tweaking in the works

Early tomorrow morning I’ll be busy making a few changes around here and adding a few things. Some thing’s I’m hoping to take care of:

  • Style next / previous links on search results & pages / archives
  • Create a search page with a full site search, and search via Rollyo.
  • Tweak articles index to include latest forum posts

Just a few minor things I plan to take care of tomorrow, so if you happen to experience a few design kinks here and there between 6 AM – 8 AM est, understand it’s just due to me fixing things.

Feature
Post

Category
General

Styleboost blasts off

Styleboost, the lovely quality link provider since 2001, has traded in its dark black look for a combination of greys and blues, for an updated “web 2.0″ look, and some great some great new additions.

Styleboost Mini Logo

While Johan has been teasing us with screenshots on his flickr account, the new version, dubbed Reboost, is finally out of the bag. Extremely easy to navigate, SB continues to serve up great looking links in a greater looking site. The new version also has promises for some included ajax goodness in the coming days / weeks.

The mini screen below gives you a small preview, and we couldn’t help showcasing it when our buddy and contributor Colin Cameron is at the top with his newly launched Wecreatethings.

Styleboost Screen - Capturing our own Colin Cameron