With the birth of Firefox, the step-child banishment of Internet Explorer 6 and widespread adaptation of standards… life indeed has become much cheerier for us front-end web developers. What could be better than that? HTML5 coming to a browser near you! Scratch that, they’re now playing.

CC Photo Source: lilivc

This article is a brief introduction to what we can expect in HTML5… from a designer’s perspective.

When Is It Coming Out?

The truth of the matter is that the governing bodies behind HTML take years to deliberate what officially goes into the spec… or not. They have a committee of Jedi-level developers who recommend additions, deletions and refinements of existing spec. This takes years of submitting, re-working, compromising and blood and sweat and tears and dragons eggs… you get the point.

However, the browser industry comes out with new major versions every year because their market is so competitive. They don’t wait for the specs to reach final, approved status because they don’t have to! A lot of the recommendations are good ideas that have been around for years and the browser makers deem it necessary to move forward to bring the best user experiences to the masses. So they proactively insert the new specs for the developers to start using some of the new features for everybody’s benefit.

Progressive Enhancement

No images of old dudes in bath tubs here, we’re talking about making cutting edge websites. Sorry, couldn’t help the “Enhancement” joke..

There is no need to wait. If you know what browsers you are programming for, you can start incorporating the new techniques right now. Obviously, pay attention to your target demographic and what browser they will likely use and the target industry. Stay the heck away from HTML5 obviously if you’re working for an institution that doesn’t update browser software regularly like at some hospitals or government agencies.

Regardless, I believe that it is up to us web developers to take into our own hands what the future of front-end web design and development should be. Otherwise, we’re going to be slicing rounded corners and drop shadows until the cows come home or Eric Meyer gets a haircut… whichever comes first.

HTML5 – New Age Of Semantic Markup

Structure

One of the most glaring deficiencies of HTML4 is the lack of semantics in the basic layout structure of a web page. It’s so ambiguous that we had to come up with our own makeshift interpretations. Just think of how your naming system has evolved over time with how you name your “nav”, “header” and “sidebars”.

Enough of that says HTML5! The block structure we’ve come to love (or hate) has been acknowledged with the addition of some new elements:

header: can be used to group together items at the head of a web page like a logo and mission statement or can be used again elsewhere to handle the author name and date of an article for instance.

footer: similar to the header in that it is meant to group together items in a footer capacity but can be used again in articles, blog posts or any content that would require it.

nav: is meant to be used to handle all the various types of navigation out there whether it be the main navigation, pagination or even a bread crumb.

aside: is meant for indirect content sections around your main content. We know them as sidebars but I suppose things like pull quotes count too.

article: was created to represent independent distributable content. This type of content can best be described as having a beginning and an end to it and can exist by itself because of its self-contained nature. Think a full article, a complete blog post or even a forum post

section: can be described as a generic element that helps with organization as it is meant to be referred to in a document outline. This is different than a div because this implies it belongs as part of a group in a larger context.

Inline Semantics

Depending on who you talk to, inline semantics is the best thing since sliced bread or a horribly constricting device meant to torture web developers. I’m for the former. The features involved with them are beneficial and I see it as a evolution that will be exploited for everybody’s benefit once it becomes more commonly used. Here are some of the most promising:

figure: should be used for annotating diagrams, photos and illustrations. I have many clients in my studio that can greatly benefit from this feature now.

time: is a little bit more up in the air as I see it now but the way I am interpreting it is that there will now be a common format we can all get behind that will work across all browsers in all countries. So this may possibly make JavaScript and CMS output more useful… we’ll see.

details: the gist of this element is that it works as meta data on-demand for the user. Like adding more formal descriptions to diagrams if a user activates it via interaction. I’m always fighting between balancing open layouts where users can scan all the data versus more orderly layouts where users have to click deeper for the details. This addresses what we’re already doing with jQuery but I wonder if this will lead to bad usability practices.

Interactive Improvements

Video and Audio

As of late, this is one of the hottest topics surrounding HTML5 because of the recent controversy between Apple and Adobe concerning Flash support. Read more about it… or read the rebuttal…

For me, video on the web has always been a huge pain in the rear. Video in itself is already a confusing task for web developers and that’s why we’ve come to enjoy using outside services like YouTube, Vimeo and etc. to take care of the hosting, playback options and headaches for us.

That may still be the best way to go because as of right now, HTML5 video and audio tags are still not supported across the browsers with any consistency. The big idea behind HTML5 video and audio is that it can be embedded directly into the browser sans plug-ins like Quicktime and further controlled using Javascript.

Another interesting tidbit is that the source is now treated as a child element and be specified multiple times. That means although the browsers have compatibility issues, you can specify two or three sources to cover your bases (which we can all agree is a very unattractive work-around).

Canvas

The canvas tag is also a hot topic – but for the developers. It is basically a 2D drawing element that uses it’s own JavaScript API. The sky’s the limit and as an example, you can check out Bespin – a Mozilla experiment that uses the canvas tag to create a Web code editor. I’ve also seen people use the tag as image editor, a mapping app and even a calendar.

You can check out Canvas Demos to see apps, games and tutorials for the canvas tag.

Be Excited!

It’s a hell of a lot more fun to be a designer/developer now than it was just 5 years ago. With HTML5 and CSS3 already being usable technology right now, it will be even more fun. This is the time to get ahead of the curve and either practicing better semantic techniques in preparation for the future or becoming a HTML5 ninja right now!

More Resources:

• W3C: HTML5
• HTML5 differences from HTML4
• A List Apart: A Preview of HTML 5
• A List Apart: Get Ready for HTML 5
• Tech radar: Everything you need to know about HTML5
• Dive Into HTML5
• HTML5 gallery
• HTML5 and The Future of the Web
• HTML 5 Demos and Examples

How do you feel about HTML5? Share in the Comments!

There is a bit of controversy about the nature of calling it “Object Oriented” and the specific usage benefits of the techniques. This article will delve into what it is, how it can be used and link to different resources on the web for you to learn more as these concepts are in their fledgling stages. Don’t blame me for what it’s called. I just found it interesting and somewhat useful and wanted to share.

What are the principles behind “Object Oriented” programming?

I’m going to spare you the geek-speak and tell you straight up — it’s basically programming blocks of code that you can use over again.

Those blocks of code are often called “objects” in other programming languages and with HTML/CSS they are often referred to as “modules“. So for our purposes, OOCSS is basically a flexible HTML structure that you can apply sets of efficient and flexible CSS to.

The Dirty Secret of OOCSS

For those of you who live and die CSS — you already know… We already do this! It’s the nature of the cascade. Consider this example:

So we already know of some OOCSS because they are basically best practice CSS techniques that have become more or less common place.

Advanced CSS Techniques First Please

Be Classy

ID selectors are meant for single use and Class selectors are meant for multiple use. So make sure you’re not using ID selectors for repeating styles as using Class selectors give you flexibility and of course re-usability.

No Twins Allowed

Nicole Sullivan points out that if you have styles that are very similar they should be the same. Learn to design efficiently because OOCSS will do you no good if you’re essentially re-creating the same modules (but slightly different) over and over again. (The size of the text in the diagram is slightly different.)

Seperate Stucture (HTML) and Skin (CSS)

Properties like height and width are hard to use repeatedly (in respect to modules) so it’s best to use CSS as intended and leave structure to be determined by content and “learn to love grids” (to quote OOCSS royalty; Nicole Sullivan).

Can We Get To The OOCSS Yet?

As Nicole Sullivan says — treat the modules like site-wide legos and start to build a component library that your modules will be composed of. First you define the defaults and then you start building classes that build upon the cascade.

Define Defaults

Start off with the defaults that you can then alter with a class. For instance, setting the size and font via the default and then use classes to become more and more specific with color, style and etc.

So you may have an instance where you have a h1 with a classes of h3. Honestly, this doesn’t feel great to me but I have come across having to define headers over and over again. So although this feels wrong, I’m not knocking it untlI try it.

Build On The Defaults With Classes

Avoid styling elements and localized ID selectors and try styling classes instead.

Use The Force,Cascade Luke

For the class components to work, they need to be the same strength so the cascade will overide the previous rule. So that means you can’t have some classes deprecated and expect all your CSS components to work in the way OOCSS was meant for.

Localizing is Evil in OOCSS

There are instances where you can get a little local on websites such as the masthead logo. However, you don’t want to paint yourself into a corner by localizing because when you re-use a class it won’t make sense semantically. Being semantic is a best practice that goes along with OOCSS as it will hopefully be easier to share with co-workers and train n00bs.

Over Specyfying Is Evil Too

The whole point of OOCSS is to make things efficient. If you over-specify, then I daresay you’re repeating yourself and although semantically correct… this is code bloat. If you continue down this path, it will only continue to grow.

Avoid Code Sequels

As you can see from Nicole Sullivan’s slide — rather than duplicating a class, just extend it for maximum efficiency.

The Bigger The Website Audience, The More Rewarding

Let’s be honest. Localizing is not evil for everybody but it certainly becomes more difficult to work with and is more conducive for code bloat as the website grows. It’s up to you on whether or not these OOCSS techniques are useful or not, so please I implore you to explore and help the CSS community form an opinion on some of these new ideas. Here are some links I used to bone up on the subject and believe me, there are more tasty nuggets in these resources that may be helpful to you that I may not have covered.

Nicole Sullivan is the OOCSS project queen over at Guthub:
Object Oriented CSS, Grids on Github

Nicole Sullivan Kickin’ It at Yahoo!
Object Oriented CSS video on YDN

Nicole Sullivan’s Often Referenced OOCSS Slide Presentation
SlideShare.net: Object Oriented CSS

Net Tuts did a Tutorial. Although a cool “tut” by Andrew Burgess, he uses HTML5/CSS3 in his examples which confuses the subject.
Object-Oriented CSS: What, How, and Why

Let me know if I missed anything!

Photo Courtesy: kurafire

Before we begin, the fine people at An Event Apart (AEA) have bestowed upon me a coupon code whereas you can obtain a $50 discount during checkout for the upcoming San Francisco Conference that has now just finished Early Bird Registration. It works for other events too, so if you’re not in the Bay — help yourself and help your wallet by using the TypeSett coupon code: AEATYPE for the event near you!

Now back to our regularly schedule programming:

From Jeffrey Zeldman – Understanding Web Design

“Good Design Is Invisible”

Being a person who designs and develops website as a professional, you’d think that “Understanding Web Design” would amount to nothing more than a cute speech for the project managers in the audience.

Wrong. Zeldman simplified and broke down the essence of what we do for a living. Sure, we work hard on delivering practical and functional solutions that amaze the eyes – but in the end why does anybody vist any website? The content. So it’s about time we realize that it’s the “character of the content” and not the “character of the designer”.

Towards the end of his lecture, he goes on to list 12 specific tips. The fourth tip really spoke to me:

Sell ideas, not pixels

When you’re in those all important meetings with clients, sell the concept behind your design. Never forget that the people visiting your website are human beings with emotions, ideas, intelligence (hopefully) and a purpose. Use those to your advantage and design web interfaces that can challenge your users in the right way. Sell your client on these ideas and not the pixels.

A List Apart — Can be described as transparent and designed to facilitate the content rather than the website itself.

Web Designer Wall — Comes to mind every single time I need an example of a flamboyant website design.

Both websites are popular communities that deliver quality content. Which is the approach that you would take?

From Eric Meyer – The Lessons of CSS Frameworks

Meyer’s lecture basically consisted of a breakdown of the different CSS frameworks. He looked at popular frameworks such as 960, Blueprint and others (9 total). He compared them based on how they handle certain web design aspects such as heading sizes, body sizes and etc. He also took a look at how they handled implementation and extra features such as sketch files, compression and hacks for cross browser compatibility.

The main lesson learned at the end of the lecture is no secret. CSS frameworks are not perfect for every job, individual and or technical implementation. They do shed a lot of light on diagnosing what you do and don’t need in a CSS framework. So create your own, mix and match, evolve one to your own wants and needs.

Right now, I blend a variation of 960 with a custom Meyer-based CSS reset and some other tweaks. This personal “framework” is portable for me and I can use it project after project and evolves over time.

From Jason Santa Maria – Storytelling By Design

For me, Santa Maria’s lecture was the most inspiring and eye-opening of the entire event. He basically builds on what Zeldman was preaching and basically asks — If content is King, how come we treat it like a pauper?

Santa Maria practices what he preaches. Visit his website and see how he’s currently experimenting with web layout.

He showed us specific examples of websites that were functional and practical from a usability standpoint but challenged the user in a good way. He quotes the philosopher Bertrand Russell:

“The greatest challenge to any thinker is stating the problem in a way that will allow a solution.”

Think of it this way… is it possible to distill the entire purpose of your client’s business in a single sentence? Would you want to? I don’t know the answer and he clearly states that neither does he. But I think we both would agree that you can’t template creativity and that it would suit you well to properly explore solutions to telling your client’s unique story.

Google does a lot of things for us but in the end, doesn’t the search feature essentially help us learn something new every day? Does this graphic help tell the story of the company and what they offer?

Luke Wroblewski – Web Application Hierarchy

Wroblewski is a principal designer at Yahoo! Inc. and a book writer of such web form design classics such as — Web Form Design: Filling In The Blanks. It’s actually a very practical reference book for web design, I highly recommend it.

I admit that going into the conference I was aware of the intense scrutiny of how some companies handle forms – especially in e-commerce websites – but I wasn’t aware of the practical science and metrics Wroblewski offered. In his lecture summary, he writes:

Visual Communication is part Visual Organization and part personality. Visual Hierarchy is a deliberate prioritization of Visual Weight enabled by the manipulation of Visual Relationships to create Meaning for users.

The most important lesson I learned from him is that I should not take the user for granted when designing a web application. Not only should I practice sound design and best practices but I should test and continually learn from my experiences as a developer and a consumer to better serve the users.

From Heather Champ – Shepherding Passionate Communities

Champ is the Director of Community at Flickr and oversees member activities. For most of us, we design and develop websites not meant for critical mass. However, we can learn from somebody who works on a 24 million member website and the unique problems they encounter.

Specifically, for me — she’s a master at dealing with fuck-ups. Here’s a nice guide from Champ for when the shit hits the fan:

• Always be nice
• Inform them
• Keep them updated
• Make the best of the situation

Photo Courtesy: thelastminute
For us long-time Flickr users, we know of those funny and unique “We’re Down” pages where they pull images from user-contributed contests they created for this very reason. When websites give you lemons, make lemonade.

Twitter to a degree has been gracing us with the “Fail Whale” for a few years now. It’s not nearly as interesting as having the creativity of your audience deliver this message for you but at least it has a jovial tone.

More Than A Conference

Honestly, I would have to admit that up until I attended last year’s conference I was unsure of what I wanted in my career. I never shied away from web design and development but I couldn’t say that I dreamed of doing this since I was a kid. The enthusiasm, inspiration and the community of the people of the event answered those questions for me. I couldn’t recommend this conference enough if you have any questions of where your career is heading creatively while transitioning away from traditional graphic design.

I have no formal connection with AEA, but my contact over there has decided to offer a coupon code for the viewers of this website: AEATYPE

Thank You For Reading, Drop A Note If You’d Like!

We’re also going to go over some of the differences between more common selectors just so you know you’re efficiently implementing your code.

COMMONLY USED SELECTORS (like squirrels)

UNIVERSAL SELECTOR:

* {color:blue;}
This is applied to all elements unless it has a explicit selector already applied. The most common usage is probably those who are using it to reset values or apply universal values (duh!). For a quick fix — it might come in handy if you were doing a website demo and wanted to adjust all the font-sizes in your website by adding a font-size: 125% temporarily for the people in the back to see better.

TYPE SELECTOR:

body {background-color:blue;}
This is applied to to all matching elements. Whether it be a default or a custom Class or ID selector (see next), the match is found and the style is applied.

CUSTOM CLASS & ID SELECTORS:

.emergency {color:blue;}
#wrapper {background-color: blue;}

These are custom selectors that are formed by either using the dot notation or the hash mark preceding the name. The usage of these are basically Class for multiple instances and ID for single instances. You can target elements by directly adding them preceding the dot or hash marks.

p.sidebar {color:blue;}
p#content {color:blue;}


DESCENDANT SELECTOR:

body p {color:blue;}
This is applied to to all descended elements of another selector. So that means all children, grandchildren, great-grandchildren will have the style applied to them.

CHILD SELECTOR:

ul > li {color:blue;}
This is applied to only the children of the parent selector. This means you can target a specific depth of the element rather than have styles applied to the entire ancestry.

LESS COMMONLY USED SELECTORS (like red pandas)

ADJACENT SIBLING SELECTOR:

h2 + p {color:blue;}
This is applied to the adjacent sibling of another element. In other words, you might want to target an element that you know immediately follows another. For instance, in the middle of your web page content you have a text call-out with a h2 header. You can have all the instances of a p be styled differently to indicate that it’s a call-out with a background value. Also, this only applies to elements — so text in between the elements will be ignored. (This only works according to HTML document tree). See Eric Meyer’s Website for more on this…

SIMPLE ATTRIBUTE SELECTOR:

a[class] {color:blue}
This is applied to any element with a matching attribute. For instance, you want to apply a style on every link on the page with a class associated with it, even though they belong to different classes.

RARELY SEEN SELECTORS (like unicorns)

EXACT ATTRIBUTE SELECTOR:

a[rel="next"] {color:blue}
This is applied to only elements with the exact matching attribute. This could be useful if you’re trying to style specific attributes or even if you’re trying to style a group of obscure attributes like a set of rel and rev links. (They’re obscure to me because I don’t often use them! ha!)

PARTIAL ATTRIBUTE SELECTOR:

a[rel~="party"] {color:blue}
This can be applied to elements with space separated values. For instance it would work for class=”party” and class=”party august” but not class=”party-time”. So you can see it would be useful if you used these selectors to group a set of targets together by naming them a certain way.

BEGINNING SUBSTRING SELECTOR:

a[href^="/party"] {color:blue}
You can apply this selector to grab a element based on the beginning substring. This is useful if you want to style a set of elements that are grouped in a certain way like the beginning of a url for instance.

ENDING SUBSTRING SELECTOR:

a[href$="/document.pdf"] {color:blue}
You can apply this selector to grab a element based on the ending substring. This is a showstopper for sure! I think it’s good usability to alert users what type of file they are clicking on and this is a great way to consistently label files for your users visually (you still might want to include the file name or file type in the text but this helps them scan).

ARBITRARY SUBSTRING SELECTOR:

a[href*="typesett.com"] {color:blue}
You can apply this selector to grab a element based on any substring in the attribute. If you can find a pattern with an occurring substring on your page, you can exploit it to target only those same substrings.

LANGUAGE SUBSTRING SELECTOR:

body[lang|="en"] {color:blue}
This is used for selecting elements with a lang attribute. This is useful for differentiating content in different languages.

I’ve actually known this to be the “match or starts with” selector. Some people use it like this:
img[src|="party"] {border-color:blue}
and what it would do is find party.jpg or party56.jpg but not august/party.jpg.

Props to Jake Vance for the image!

Comment If You Have Anything To Add Or Correct!

Other Articles You Might Like:

CSS Rehab – 3 Step Program To Getting Clean
5 Innovative CSS Techniques You Should Know About

Shared Hosting – For Those on a Small Budget

People that do not want to spend a fortune on their web hosting and do not need it to be super-strong should start by looking at shared hosting plans. It is the most popular type of web hosting and it is also a perfect match for small online businesses or for personal websites. When we say that shared hosting is not super-strong we do not mean that it lacks in quality. You will still get secure and qualitative hosting, only costing a few dollars per month, but if your site gets a lot of visitors it might become a bit slow or even crash if it is a ton of visitors. That said, it takes a LOT of visitors to slow down a website that is built upon shared hosting so it will most likely not be a problem. Many of the best shared hosting plans are very similar – just make sure that you get plenty of bandwidth, disk space and that their uptime record is good.

Some companies that have generally been well received from their users and critics alike are:
Host Monster
Just Host
Top 10 Shared Web Hosting from Web Hosting Search

In this field there are many companies that have a less than respectable reputation and it is important to look into their background before committing. There are many shared hosting companies that are resellers and may lack the resources to effectively maintain their servers and client bases’ needs. That is not to say that all resellers are bad as that is far from the truth, but it is necessary to look over their finer points in depth to make sure they will be able to serve your needs in the best possible way.

Dedicated Hosting – Great for Major Companies

If you are in charge of a website that attracts a lot of visitors you better have web hosting that can handle all the traffic. Dedicated hosting is the crème de la crème of the web hosting industry and is a perfect match for the more popular websites. The server, which will work solely for you, is stored, protected, and maintained by the hosting provider. There are two forms of dedicated hosting: managed and unmanaged. With managed dedicated hosting it is very easy, all you have to do is take care of the onsite content. Unmanaged dedicated hosting requires more technical knowledge but it also gives more possibilities of optimizing things after your liking. Dedicated server hosting costs range quite a bit based on the plan and the average costs range from $60 and $200 per month, which has to be regarded as affordable when considering the strength and stability of the hosting plan.

The options available with dedicated hosting have a relatively broad range. In mentioning a few of the companies that are highly thought of, we have mentioned one that is more focused on the higher end of the spectrum and one that is more entry level. InMotion is well known for their shared services but their dedicated plan is exceptional, although not for everyone with its nearly $200 a month price tag. For those seeking a dedicated host with less of an investment would be wise to consider eSecureData . They offer plans that range from $80 and up, but even their “low” level system is very respectable for the price and they have a strong reputation for their customer support.

When looking at plans, compare the differences between the “cheap” and expensive monthly plans. Some companies may charge substantially more for only a minor increase in features. It is also important to compare between companies for similar reasoning.

VPS Hosting – The Middle Alternative

VPS hosting plans are quickly growing in popularity and this type of web hosting has become the backbone of many web hosting providers of today. It is often referred to as the thing filling the gap between shared hosting and dedicated web hosting. With it you will get a customizable and stable hosting solution. Make sure that your VPS hosting plan contains plenty of disk space, monthly transfer, RAM, an unlimited number of add-on domains and a knowledgeable customer support team.

There are very few companies who offer VPS as their only solution, so the majority of the companies who offer quality VPS are the companies who have nice shared/dedicated offerings. One company of note though is HostICan as their VPS solution as they offer a pretty good setup for the price and are well known for their reliability.

Green Hosting – For a Healthier Environment

If you feel as if you want to do something for the environment Green Hosting is the thing for you. It is most often the same as the shared hosting plans but the web host either uses eco-friendly energy sufficient servers or purchase carbon offsets. As green hosting is shared hosting their plans should be equally good as well. This is one of the trendier alternatives of the hosting industry at the moment.

While it is possible to get Green Hosting from a few of the companies who offer standard hosting, if going green is of real importance to you it is good to check out companies who focus only on that. If a green, shared host is what you are looking for Green Geeks is definitely worth checking out as they are not only carbon neutral but actually buy three times more energy credit than they use. As Green Hosting is the use of energy credits to counteract carbon dioxide emissions and not actually something different done at the company (outside of energy efficient servers), there is no reason that a green host should have less features than a standard shared or dedicated hosting company. It is definitely possible to find a host that meets your server needs while still having a positive environmental impact.

Cloud Computing – Adaptable Hosting

Cloud computing is probably the hottest thing on the hosting market for the moment being. It is very flexible hosting as it grows in strength and stability when needed and goes back to its original shape when you do not have that many visitors. As a customer of cloud computing you do not have to pay for more web hosting than your website is using.

At the time of writing this piece, our review team was accessing the options available with cloud hosting and the data had not been finalized. One of the standout companies that was found however was GoGrid . GoGrid is worth noting for their affordable rates as well as their support services.

Whichever hosting type you choose, it is important to read the fine points of what is involved with your plan. While a plan may sound incredible on the surface, it could have very low bandwidth, poor support structure, or any number of issues. A hosting plan is a choice that you will have to live with for awhile and should be taken seriously. Although there are hundreds of great plans out there , some poor providers do exist and it is up to the consumer to make sure they know what they are getting into.

Author Bio:

David Walsh is a blogger and editor with Web Hosting Search. Here he tests and reviews hosting providers and web development tools as well as blogging about current happenings within the hosting industry. If you are looking for something specific in a hosting provider, check out our advanced search tool to find the appropriate web host: http://www.webhostingsearch.com/

#1 — Making the Usual, Unusual.

Instead of the usual neatly organized drop-down sub menu of options, we have a custom drop-down shelf! This is a great concept for the young demographic visiting their website who are in interested in the lifestyle aspects of the brand. Beyond that though, it’s a way for Converse to show how relevant they still are by employing innovative web design techniques.

http://www.converse.com/

#2 — Kill a Fly with a Shotgun.

David Airey is a great designer and a vocal blogger based in Ireland. Even though I frequent his website, I’ve never clicked on his explanation of RSS. When I did, I saw he decided to answer that question with a video of all things (linked from commoncraft). He could have accomplished this with a sentence or two and a tidy little diagram but the sheer pomp magnificence of a video makes it monumentally more interesting.

Instead of a standard text/photo “About Me” page — why not produce a gangsta rap video to tell your life story? That may be extreme but that’s the point! Do something normal but in extraordinary ways to shake things up. Usability theories are centered on making something easier to use. However, if you can figure out how to make something more difficult but more interesting it may be worth it to risk connecting with your audience better.

http://www.davidairey.com/what-is-rss/

#3 — Nice to Meet You. Again.

Mature websites may have taken years to get to where they are now, slowly building and growing with every added piece of content. It only reasons that newer members of your community may not be familiar with your past brilliance. Why leave it up to them to stumble onto your old content in a search or list somewhere? Take the initiative to introduce your content and your website properly to your new viewers. Point them to your most poignant and relevant posts. They’ll appreciate it and understand the significance of where your website has been and where it’s going.

http://www.alistapart.com/articles/ALAprimer/

Like this article? Comment!

Della Backlash

After an initial backlash from the premiere of the mini-site, they toned down some of the design and messaging but even with the updates it still feels borderline offensive. The most appalling messaging was in the “tips” sections where they opted to offer subject matter on calorie counting, recipe management and fitness. Rather than go that route, they could have highlighted useful functionality that women would appreciate such as size, portability and ease-of-use.

True, everybody looks at those features but you can write messaging that speaks to women specifically without offending them. For example, size and portability — if you’re a female looking to replace your heavy laptop, then this ad speaks about how the product helps you instead of pandering to female stereotypes:

“Flat Out Stunning”. If the headline was in pink, would women start uncontrollably buying Macbook Airs?

On Demographics

Corporations go to great lengths to understand the demographics of their customers so they can develop strategies. Sometimes, with the help of consultants and or specialized firms they make actual profiles of customers that are remarkably detailed. For instance, a profile may include gender, age, income and location but you may be surprised that they also gather information about offspring, sport team affiliation, television shows, hobbies and amount of disposable time for any given day.

The consultants and firms gather that information via paid surveys and the like with full participation of the customers so I’m not concerned with privacy but with how it’s used. My former company of employment (fitness industry) looked at that information and developed special programs that were beneficial to them such as if they had kids — they looked into child-care related offerings in addition to our core messaging centered around fitness. So our messaging would be; “We offer fitness and we make it convenient for you and your family” rather than pandering to women like; “Since you have children, you’ll like our fitness center” — which can be made more offensive if the visual design was overly skewed towards women.

Did They Fix It?

Unfortunately, despite the internet backlash — Dell still doesn’t seem to understand the essence of the problem. While it may be okay to target a specific demographic, they have choose to tone down the pandering rather than completely scrap it. Take a look at the new “Tips” section and see how instead of playing female stereotypes they overly simplify:

Sorry, but I’d say most females in 2009 are perfectly capable of operating a computer beyond these insultingly basic tasks. Seriously, #4 is referring to USB key drives right? IMO, that’s almost as offensive as the original!

As for their “featured artist” page, I question it’s entire premise and wonder if they should rename it “Pander-Land”. Dell is not making creative software like Adobe so I don’t understand the significance of having a “featured artist” page and not a “featured professional” page highlighting all the great female students, scientists, programmers, artists and other professionals out there:

In a traditional case study, individuals are featured to highlight their achievements relative to the product you are selling. It’s a great tool because it works as a testimonial, success story and highlights the product in ways a fact sheet can’t. So I find myself wondering why Dell chooses to forgo a traditional case study and instead opts for a simple bio and a video entitled “Darling Robyn: How to Score at Vintage Stores”. To me, it’s laziness or extreme pandering. I don’t understand what a female computer shopper is getting from this page.

Doing it Right

From Della, we understand what’s wrong but what can we do so that our future projects don’t suffer from the same mistakes?

1 — Research

It takes thoughtful consideration to bring a useful and effective website to the masses — even more so for one targeted to a specific demographic. Every industry is unique and different but if you do the leg work in finding out what is and is not acceptable then you just need to stay within those guidelines according to your judgment. Look at other websites that actually do a good job with design and messaging to women, such as:

Breastcancer.org uses an appealing palette, tasteful art direction in photos, illustrations and graphics as well as non-gender specific usability choices to deliver an effective website.

2 — Practical Benefits to Women

Instead of pandering, find out what women would love about your product and communicate that to them tastefully. In my experience, if you think the worst of your users, you’re really thinking the worst of yourself. You need to rise to the challenge and find a way to properly communicate your message without having to resort to blaming them for being what they are and using outdated stereotypical design concepts and ideas.

Although not specifically targeted to women, here’s another example from Apple that touts a universal benefit that would be well appreciated by women. For technology products, the benefits are usually non-gender specific. Dell perhaps could have done a better job offering answers about concerns females often have about their products that men don’t.

3 — Do Testing

The effort involved in testing will far outweigh the effort involved in trying to quell public outcry for the offense your website will have caused (as evidenced by Della). The problems with the Della website could have easily been avoided because they were so blatantly distasteful. I believe proper testing could have potentially caught this problem and saved them before they went live.

Female Dell employees were probably involved at some level creating the website but my best guess is that they were not in decision-making roles. Also, if they did testing — I don’t believe they assembled as diverse a group of testers as they should have. Assembling a range of female testers in age, tech savvy and profession should have been a priority for them if they did testing. Other than that, I would have also made sure I did a direct comparison to the normal website so the testers could understand the techniques used in targeting them and offer feedback. If the Della team did that, I would think the testers would have responded the same way the internet has.

Some people like Cnet’s Matt Hickey believe gender neutral is the way to go — like Dell’s normal home page for example.

Common Sense

Most men and women can both stand to be better educated about computers but Dell chose not to innovate by doing something new and perhaps helpful to the community. For instance — creating a non-gender specific mini-website that offers “how-to” advice on a variety of computer issues that would attract the less tech-savvy females (and men) they seem to covet. Another idea is to challenge your female demographic by offering a contest to any female who has bought a Dell notebook to create a video that helps educate people on the environment. My point is Dell took every shortcut along the way and paid for it at the end.

Around the internet:

What Do Women Want in a Laptop? — Jenna Wortham of the New York Times offers a level headed summary.

Big Aaargh! for Dell’s Della — Virginia of BlogHer does a great job rounding up reaction.

Dell Unveils New Site That Even My Dumb Vagina Can Understand. — Slackmistriss goes off on Della in one of the most entertaining posts

Dell’s Revamped ‘Della’ Site For Women — Forbes chronicles how Dell is allowing some negative comments about the campaign on the website.

Dell unveils Della website to help women choose which totally cute laptop they prefer — Engadget cracks some good jokes at Della’s expense.

Other articles you might like:

Tropicana Rebrand – THE AFTERMATH

Agree or disagree? Comment!

BEST

The one common factor of all these websites is that they should make you excited about the programming for that network. As usual, the more innovative, usable and aesthetically pleasing along the way the better. I think these are the best:

FX Network

FX has a unique layout while clearly highlighting their unique programming.

ESPN

ESPN is one of the rare cases of being equally dominant on air and on the tubes. Their recent redesign keeps them on top.

FOX

Say what you want about them but their website is clean, sticks out from the other big 5 networks and highlights their shows well.

Discovery Network

They manage to make educational programming look… sexy. At least better than PBS.

TNT

Easy to digest and I love the transitions on the sliding hero graphic. They took a tried and true user pattern and made it work well for them.

Food Network

Similar to ESPN they are big players in the culinary resources available online.

CBS

When a channel goes out to promote a popular show… might as well go all in. I don’t even watch Survivor but I wanted to after visiting,

Bravo

Bravo did a good job of developing a simple, yet unique look. It went a long way in helping their content look fresh to their target demographics.

CNN

CNN is one of the cornerstone news websites on the web.

Cinemax

Cinemax opted to do a fresh layout with interesting typography choices while highlighting popular features — like highlighting current programming on the homepage.

AVERAGE

These networks offer compelling content yet their websites present the programming in a generic way. I’m not very excited by what I see on the homepage and the actual website features are not very compelling considering the content.

PBS

A network with so much history and who us so beloved by their viewers has a very unassuming website. Granted, their demographic may skew mature but I think this is a competent if not generic design.

NBC

I don’t understand the organic swirl background and what the heck it has to do with NBC. This reminds me of a late 1990s portal search engine website.

HBO

This is the BMW of TV networks. All I see is text text text. They couldn’t find a way to bring some of the glitz, glam, guns, sin and sex people love about HBO into the home?

Travel Channel

Travel Channel. Not as popular as the rest of the TV channels but they have a built in excuse and unique programming subject matter to go nuts but they don’t. Let the genie out of the bottle!

WORST

What stuck out the most to me as being “worst” is that channels who have distinct content that can naturally translate to the web don’t stand out.

VH1

VH1 manages to be loud but quiet, bold yet shy… the design could stand to be “chunked out” a little to help visually distinguish sections from each other. All I see is text, text, girl, girl, pink, pink and it feels very chaotic.

MTV

Their contribution to the internet is a huge form field and a Javascript randomizer for their style sheets?

BET

It feels like they’re trying to fill up space. Regardless, very uninspired for a TV network with their cache in youth culture.

ABC

This is the best ABC can come up with? I logged on to your website to watch commercials, get a clue. Those little thumbnails and middling hero graphic are very uninspiring compared to what FX does.

NICK

Another website that can use some “chunking”. It feels like content soup which may not be a great idea considering the demographic for some of the content.

TBS

Going along with their tagline — “very funny”, it looks like a very happy website but the lack of contrast is very glaring. If they had just a bit more white on this website (especially as a background for text) they could be in the “best” category.

Articles you may also like:

En Fuego! Best & Worst NBA Websites
10 Shockingly Beautiful US Government Websites!
Comparing Websites of Rival Companies

Agree? Disagree? Let me hear it in the comments?

Tip #1 — It’s All in the Timing, Baby

For those who didn’t know, Tuesdays have shown to get the best “open” rates for email campaigns. Tuesday is probably just that perfect time of the week where you can catch your potential clients and customers after they’ve finally got back to speed from the weekend yet still have plenty of time to read your email before the coming weekend. Most report that it usually declines after this point with Wednesday and then Thursday being the next best days to send a email blast out. Keep in mind that everybody’s business is unique, so it may for your individual industry. Some of my friends who are in the bar/restaurant business send out emails with drink/meal specials on the day of so they can tempt their customers all day hopefully ending with them visiting later on.

Tip #2 — Add Me to Your Address Book

Do not ever underestimate the power of the spam filtering that people have. Spam is so annoying and dangerous to individuals and corporations alike that they use varied methods of just keeping the inane and dangerous garbage out of their lives. Believe it or not, adding a little bit of text — “Please add example@website.com to your address book to ensure delivery.” in a prominent area in your sign up area is an incredibly underestimated and often neglected practice that can yield tremendous benefits. I would go as far as adding it to the newsletter/campaign as well somewhere just in case your newsletter has been blocked but has miraculously made it through on rare occasions.

Tip #3 — Don’t Underestimate the Importance of the Subject Line

Not only does the subject line help you make it pass the spam filters and into the mailbox — it is the text that entices the receiver to open the email. Here are some quickie recommendations:

• Keep the messaging short and simple and 50 characters or less
• Read the subject line out loud. Hearing it aloud will allow you to hear the flow of it better. See if your co-workers can comprehend what the email is about just from listening to that
• Never use ALL CAPS
• Never use the words: Free (Can’t resist? Just never first in the sentence and be very careful with punctuation), Help, Percent off, Call Now, Discount and Reminder (or anything sexual or “naughty” if you want to be sure to clear the spam filtering)
• Be very careful with punctuation if you use it. Multiple exclamations is just asking to be filtered
• Localization Helps — Mentioning a city or town name can be effective
• Don’t be afraid to test — tweak length, keywords and tone until you hit the sweet spot

Tip #4 — Have a Consistent Sending Schedule

Generally, bi-weekly or monthly is a good frequency as most people find the time between messages to be just long enough so they are not annoyed. You want the recipient feel that they might miss something if they don’t scan it this month. Most people are curious and if you craft a consistently good newsletter — it can become a part of a recipient’s routine. It’s worth it to the sender as well because from my experience, it can be cumbersome to generate a ton of emails . It all depends on the type of business but for those who care about sending an email that always has genuine value with quality content — it can be tough.

Tip #5 — Build Your Lists as Much as You Can

When you premiere that first newsletter/email campaign… think if it as the start and not the ending. Every chance your business affords you should add names to that list. Trade shows, seminars, sign-up forms, events and even social networking should be a chance for you to get some names for the list. After a client meeting — ask them if they’d be interested in your mailing list which includes your newsletter subscription. If you work at a bar — ask your bartenders to help inquire clients they’ve newly befriended. There are many many way, but just realize it’s a never ending process. Be warned that permission is key as your potential client may not like you so much if you “spam” them (which it is if you don’t ask for permission to send).

Tip #6 — No Video and Flash Allowed

Sorry , my new media maven buddy — that stuff just doesn’t work. However, that shouldn’t stop you from offering that content elsewhere if that is the goal of the email campaign. Just design the email blast so the singular goal is to get them to click the link to view the new media as easy as possible. Don’t deceive them by having a image of a YouTube style graphic and expecting them to play it but entice them with a fetching screen cap (whatever that might be for your purposes). The point is, new media is revolutionizing the internet and how people communicate and you shouldn’t let email browsers prohibit your company from offering that type of content.

Tip #7 — Stop With the Ginormous Image as The HTML Email

Yes it’s simple and allows you to design without knowing any code at all and always displays perfectly — but nobody will see it! This is what spammers do so it will be highly likely it will be damned to spam folder hell! Also, email clients by default don’t display images. So that means it will become yet another hurdle that you’ll have to jump over to get your email message to your clients and customers. My advice is to find a quality email campaign service with lots of templates and choose one that floats your boat. Anything is better than sending simple big image emails.

Tip #8 — Take the Time to Test

Since a lot of businesses are doing email marketing, the propensity for blunders is occurring more frequently. A simple and effective practice is to make a checklist and turn it into a routine that you build in time for. It can be simple like — spell check, correct list, tested all links in the test email and plain-text is set up. When you click that “send” button you want to feel secure that you’ve done your due diligence in making sure your clients see you in the best possible light. Here’s a testing tip: don’t use dummy text. When you send it to the test list, it’s not going to be a accurate delivery because dummy text triggers spam infiltrators preventing it from arriving in the inbox (causing confusion and unnecessary headache).

Tip #9 — Is Your Sign Up Form Perfect?

Rightfully so, most people and businesses will concentrate their best efforts into their website. If it’s built right, it’s the ultimate go-to for impressing your audience and generating results (whatever that might be). Naturally, you’ll want to strike while the iron’s hot and get them to sign up for the newsletter/mailing list to keep the client relationship strong long after they leave the website. It’s a good idea to make sure the sign up is in a logical and relevant place that they will surely not miss during the browsing session. The sign-up form itself should not be cumbersome to fill out — look at your competitor’s website and try to only harvest the info you can’t live without.

Tip #10 — Design Your Layout Width Between 500 to 600 Pixels

You have no idea how people are viewing email, whether online or via a dedicated email client. Even if they have a web mail address they may be forwarding it to a client or using POP and IMAP features. Play it safe, 500 to 600 pixels is not that restrictive — this is the sweet spot for a email preview pane. Furthermore, when you see how people are using the preview panes you should try your best to follow simple user patterns such as logon on the top left and content in proper hierarchy so the viewers can scan. As Steve Krug says — “Don’t Make Me Think”.

Comment if you have any questions!

Brooklyn Brewery

I admit some favoritism, but the overall experience and energy of the website was executed very well.

Pyramid Brewery

Very simple and not very flashy in terms of technology but it is very well done overall and the ease of use is top notch. VERY un-annoying.

Guinness

Guinness being a huge brewery managed to put together a neat well-crafted website — something the big American breweries couldn’t do. (Although Budweiser did come closest.)

Blue Moon Brewing Company

Blue Moon and Rolling Rock both tried to capture the local/small town flavor of their brand. The little “Easter eggs” for everyone to find are a fun touch.

Rolling Rock

Rolling Rock tried to capture a small town newsletter feel which I felt offered it a unique look.

Stella Artois

Stella Artois does a good job appearing as a premium brand.

Pabst Blue Ribbon

“PBR” as people call it is essentially a cheap beer but they separate themselves by marketing a reaching out to their “following”.

Peroni

My former co-worker called this the “Budweiser of Italy” — I have no idea if that’s true or not but the website is pretty unique from all the others. It feels like some design portfolio websites I’ve been to.

Red Stripe

I think of Red Stripe as a hip party beer and I think it does a good job of portraying itself that way.

Duvel

Duvel is a premium beer like some of the others but they really believe in the “less is more” approach.

Like this article? Raise a glass in the comments!

]]> http://www.typesett.com/2009/04/10-smashingly-dapper-brewery-websites/feed/ 4