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!

Many outspoken technology leaders and taste-makers have come out against Flash like Leo Laporte and Ryan Block. Laporte (of TWiT) has argued that because it is a closed platform, he prefers the public support the new upcoming rich media features that HTML 5 and CSS3 will offer. Ryan Block (of GDGT) is weary of Flash and feels its value is dubious.

Recently, Apple’s lack of iPhone support for Flash and the non-story that has been is telling in itself. A generation of web users using the most popular smart phone of the moment are adapting to the post-flash era… and enjoying it because it excuses them from “monkey-punching” ads and ridiculous impractical interfaces in favor of usable, readable websites.

From my point of view as a front-end web developer, I believe that people are flat out fatigued by Flash and prefer a more straight forward web experience. I’m not saying Flash is not useful, but please keep it to where it is best utilized and where web users expect that type of content. For example — streaming media, animations, advertising, mini-sites, movie-sites.

Adobe Flash at its best is a familiar environment where designers and developers alike can start to create so-called “rich” content with powerful animation and scripting tools. That means there are little limitations and the potential for creating spectacular interactive content is out of this world. The reality is that most people use it as a homepage slide-show and an excuse to introduce non-web safe typography. The innovation is not there for most cases and only a select few studios actually exploit the “ground-breaking” features of Flash.

Movie websites like Avatar are perfect for Flash.

Flash is at it’s best when the company at hand has the resources to deploy Flash media and is committed to delivering uniqueness and originality to the public despite the cost. The best example would be movie studios. They offer a premium product and are interested in presenting it to the public in a innovative way to promote the movie. The content lends itself to be a temporary spectacle and they ask studios to “go crazy”. In this instance, I believe Flash is the ideal solution.

So once again, Flash has its place but I think that finding a platform that doesn’t require a thousand dollar software investment to accomplish relatively simple tasks is in everybody’s best interest. The article below states the case of finding alternative methods for rich interactive content.

Flash Is Not An Open Platform

HTML, CSS, Javascript are open technologies that are independent of any company or business. The foundation of the internet is built on these open platforms and that is one of the reasons why it has become so intergal of our lives. Anyone can start developing websites with just a rudimentary amount of physical hardware, software and advanced knowledge of the platforms.

HTML, CSS, and Javascript frameworks are developed independently and are not directly influenced by profit.

For any developer to start using Flash as a solution they would need good hardware, expensive software and expensive training.

The real world implication of this for developers is that we are enslaved to Adobe and are subject to their decision making processes. Adobe is a publically traded company with profit as it’s core motivator. Product releases, features and support are all in their control.

As an example, at my studio we have to upgrade to CS4 because some of customers use it. We just upgraded to CS3 about a year ago and now we’re forced to upgrade to CS4 already! For such an expensive suite, you’d think that Adobe would allow CS3 to atleast read CS4 docs right? Nope. We’re completely handcuffed and the alternative is to ask our clients to save down for us… which is unacceptable.

The argument against this is that Adobe is implementing new features that older versions can’t work with… but who decides on the release dates? Who decides whether the features are worth our investment vs. actual usage? The answer is Adobe does and the reason they do it is to make more money.

The new versions of HTML5 and CSS3 are being thoroughly reviewed and approved by the W3C which works to create web standards and facilitate developers with the best technology to make websites.

[Edit: Sometimes proprietary software is not evil and the reasons vary. Adobe Photoshop for instance is the cream of the crop in terms of photo manipulation and although expensive — it has a long shelf life, incredibly useful for all types of image-based file formats and plays well with other editors. Another product for example, ExpressionEngine CMS — built a better mousetrap and they offer it at a fair price. Both proprietary, but they are able to overcome that by being fair, offering a better solution and co-existing with other technologies well.]

Accessibility Issues

Adobe has definitely improved this area of Flash over the years with natively exposing text to screen readers, the Accessibility panel and making most mouse-defined events available via the keyboard but it’s still not a slam dunk.

You can take steps to further optimize accessibility but they require a lot of effort. Considering most developers have a hard enough time doing this for non-flash websites, it’s not going to be a high priority. Do you see yourself making HTML equivalents, self-voicing, and text natively accessible? This often directly contradicts why you use Flash in the first place – ultimate flexibility and freedom to create rich content.

Even when using the acessibility features, the reality is that it’s going to be a jumbled mess to these viewers unless careful attention is considered for the animation from the start. Is it worth the extra development time?

If you do plan on working with Flash, check out Erik Johnson’s Adobe Flash Accessibility: Best Practices for Design @ Six Revisions

Flash Is Difficult To Learn, Difficult To Keep Up With

Flash is an application that requires it’s own programming language, a blend of feature-sets that cross-over from other very different application environments and ultimately needs to be inserted into another type of file which is handled differently depending on the browser you’re using.

Seriously.

I like to think of myself as someone who endorsed Flash since the late 1990s and have taken college-level and continuing education courses with Flash superstars such as Josh Davis to keep up with it. Learning Flash and keeping up to date with it is monumentally difficult and my experience is that it’s not practical.

Flashkit is a popular tutorial website for Adobe Flash. It’s easy to learn how to be a Flash hack but being a true professional requires a true commitment to the platform.

The return on investment (ROI) is very low for most people because Flash is not used enough by most developers on a daily basis to justify the intense work you need to learn and keep current. Speaking for myself, I have enough to deal with developing best practice HTML/CSS websites on a content management system without having to jump into the intense, isolated and specialized Flash platform.

Which brings us to…

Flash Is An Expensive Proposition

Studios that specialize in Flash are expensive and deservedly so. Most designers are not capable of delivering high-quality Flash content because of the steep learning curve Flash often requires. That’s where these Flash studios come in to help your company out.

I worked in a company a few years back where the website was built entirely in Flash. The website supported a few retail locations and while not frequently updated, it was updated enough that the hourly charges for upkeep was definitely a hindrance. A simple notice of a sale or a PDF download required a couple of hours of work which we always tried to group together in a package of work for them to complete for us. The time wasted and lack of efficiency is just heartbreaking and the ROI (for the company) is rarely measurable over traditional methods.

Instead of putting all your eggs in one Flash basket… isn’t it more wise to be agile and versatile to current trends like tracking analytics, seeing the patterns and being able to quickly adapt, change and optimize? Bottom line, if Flash can’t generate measurable results for both the client and the developer, is it worth the effort?

The School of Visual Arts offers Advanced Flash for $900 as a Continuing Education course.

Flash Isn’t User Friendly

I hate upgrading my Flash player. I often skip any content I see that won’t allow my current Flash player to display it and I’ll delay upgrading for months until It browbeats me into upgrading. After a decade of this, I’m very tired of doing the upgrade dance.

It’s unacceptable to me that the content is unavailable to me even in a “gracefully degraded” version. For a product that is as ubiquitous as Flash has become, I find it ridiculous that I have to do something extra to make it work. As Flash is used to power interfaces and house actual content, it should not act as barrier to your content… EVER.

I have to come here, download, install, close the browser, open the browser…

I don’t believe stealing five minutes from my life to view Flash content is an acceptable practice. Flash is not user-friendly, the problem is we’ve simply gotten used to the idea we can be treated this way.

It’s Simple:

• Flash Is Not An Open Platform
• Flash Has Accessibility Issues
• Flash Is Difficult To Learn, Difficult To Keep Up With
• Flash Is An Expensive Proposition
• Flash Isn’t User Friendly

Tired of this?

In certain situations Flash may be appropriate but now better alternatives exist…

Alternatives:

jQuery has gained incredible traction from developers and contributors alike to create rich experiences with a light weight footprint. It’s available under MIT and GPL licenses for free and requires training in a non-proprietary language that is more useful than Actionscript.

Expression Engine is a CMS that offers a lot of great features that can replace some of the functionality that Flash offers. Not so much with moving graphics but randomization, colors and intelligence can help you offer rich content with out Adobe Flash.

Typekit allows you to use non web-fonts on your web page with just a single line of code. Typekit has garnered some early buzz and is made by web design veterans including Jeffrey Veen of Google Analytics fame. This is a better alternative than the “Flash Font Replacement” techniques out there (I know from personal experience, thank you very much) and a nice alternative to using Flash for typography purposes.

Google Analytics allows you to work smarter, not harder with your content. Replace Flash with a HTML based alternative and see what people are really clicking on. Build off of the data that you can collect and learn from it to deliver better solutions.

That’s the argument I’m offering in the case against Flash, please use what you feel is best to solve your client’s needs.

Just no Flash intros!

Questions? Comments? Please contribute to the conversation.

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!

The History

Patrick Griffiths and Dan Webb are credited with coming up with a simple CSS and javascript-based dropdown menu that was originally published on ALA. With the influence of ALA over the years, the popularity of the Suckerfish menu technique has grown in popularity and the basic concept of their technique — using the pseudo :hover class as the trigger — drives many a dropdown across the interwebz.

With the now outdated IE6 slowly being taken out to pasture, modern browsers are even more optimized to use Suckerfish-style menus. IE6 for those of you who forgot — did not support the pseudo :hover class and that’s why the simple javascript is necessary at all. It triggers the dropdown action for that browser. While most of us still try to support IE6, it’s no longer a top-priority as it once was.

Patrick Griffiths and Dan Webb have updated this landmark menu technique since the original and called it the “Son of Suckerfish Dropdowns” on their now defunct HTML Dog website. They’ve expanded the functionality to include multiple levels and reduce the javascript as well as other compatibility enhancements.

Visit Patrick Griffiths and Dan Webb’s “Son of Suckerfish Dropdowns” @ HTML Dog.

See an example from HTML Dog.

Why Suckerfish Dropdowns?

It’s Lightweight and Easy To Use
Using this technique requires using three web languages. HTML, CSS and Javascript. The HTML and CSS portions are already necessary if you plan to have a menu of any kind and the javascript is there for IE6 and even then it’s just few lines of code supplied to you that you don’t have to edit. For those of you who have searched around for dropdown menus, you’ll know it’s really tough to find a simple solution that works on a standards compliant browser AND the IE6s of the world. There is always a caveat… intense javascript based on conditions, tables, intense CSS and etc.

It’s Standards Compliant & Accessible
The dropdown menu structure is marked up as a regular ol’ HTML list. It’s styled by CSS. The javascript can be used in conjunction with the CDATA tag and hence be seen as character data and pass validation.

It’s Popular and Well Supported by the Community
Every implementation of the technique will be unique and without a doubt — you’ll have a bug. The great thing about Suckerfish dropdowns is that it’s now pretty mature and well adopted by the community. Issues have been documented and supported and many work-arounds and fixes are already available online a google search away.

I had the common Suckerfish :focus problem where parts of the menu would remain visible or “sticky” depending on how the :focus was triggered on IE7. I looked around and found a simple fix here and voila, problem solved!

So although you may not have the same problem, you can be sure you’ll probably have better luck finding help for Suckerfish dropdowns over the other techniques.

It’s Versatile
I’ve been using it as a vertical menu for the most part but it works the same way with some tweaks as a horizontal menu as well.

Also, why does it have to be a menu? Use the basic concept to hide and then open up a content box using the :hover class to trigger it. For instance, a Trivia Question box and they roll over a button to display the answer. The possibilities are endless!

Six More Years of Suckerfish?
With the new features in CSS3 and HTML 5, I can’t wait to see what type of new progressive enhancement we’ll be seeing in years to come. Rounded corners, transparency, border-types, embedded media… all being used in imaginative ways with the basic Suckerfish techniques is a wonderful thing.

In the future when IE6 is nothing but a bad nightmare buried deep in our past, we won’t need the javascript portion of the technique making it even more easy to develop for. I prefer to use Suckerfish based menu techniques in general because of the reasons outlined above and I hope you consider in making your choice next time you do the dropdown dance!

Did I Miss Anything? Correct me or add to the conversation in the comments!

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

[Just to be clear, I know some form of probably all these techniques may have existed for awhile but I feel these five choices can still be used/improved upon by us developers and/or not fully adapted yet even though they are known by many to be productive. A bump and a nod, if you will.]

1. Perfect Full Page Background Image

by Chris Coyer of CSS Tricks

For a project I worked on in the past, I tried to implement a full page background image via CSS and it is much more difficult than you’d expect. First of all you’re dealing with the scaling issue (because we don’t want white space) and then you have the proportions to worry about and then on top of all that you have to deal with the scroll bars and browser compatibility issues.

Thankfully, Chris Coyer takes you through two techniques (albeit only one technique truly fulfills all the requirements above).

http://css-tricks.com/perfect-full-page-background-image/

2. CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea of A List Apart

If your “images” folder is about to burst because of the sheer quantity and complexity of its contents, we have a winner for you! CSS sprites are basically a grid of images in a single image file that you position and re-position as necessary. You do this to help your production efficiency as you only need to maintain a single file. This technique is an absolute godsend for navigation links states effects.

ALA all-star, Dave Shea outlined these techniques as far back as 2004 and re-visited the subject in 2008.

http://www.alistapart.com/articles/sprites/
http://www.alistapart.com/articles/sprites2/

3. How To Recreate Silverback’s Parallax Effect

By Paul Annett of Think Vitamin

I first saw Jeremy Keith show off the Silverback website at An Event Apart in San francisco last year (2008) and was blown away. Not so much because of how exciting it looked but more because of its elegant coolness factor. The parallax effect can basically be described as multiple background images set at individual visual levels to acheive a nice movement effect when the user changes the browser window size.

British developper, Paul Annett is responsible for the original implementation of this technique for Clearleft (who makes Silverback) and gives us a rundown of how he implemented it for them.

http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/

Other ways to accomplish this technique:
http://forthelose.org/examples-of-and-how-to-do-the-css-parallax-effect
http://webdev.stephband.info/parallax.html

4. CSS: Add a “Loading” Icon To Your Larger Images

by DynamiX Labs

The tricky thing about dealing with large images (or multitudes of images that hog bandwidth) is that during loading it can really mess with your layout and confuse your viewers until the image loads. In other words – a bad first impression with your audience. To remedy this, use a preload image so that they know something is coming and they won’t be alarmed that the page is broken.

DynamiX Labs has a nice solution that is multi-browser compatible and requires no javascript.

http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/

5. Create a Lightbox Effect Only With CSS – no javascript needed (except to close the windows)

by Emanuele Feronato

I am an advocate of Lightbox, Greybox and the other jQuery options to achieve the pop-up effects for opening new windows within a webpage. As they mature, the options for them become more and more impressive. However, sometimes all you need is a simple lightweight option that gets the job done for you without a whole lot of fuss. That’s the beauty of this mostly CSS solution (rudimentary javascript is used to close the window).

For a landing page project that I worked on that had a shelf-life of about a month, I decided to use this technique for a registration form and it worked out great. it was easy and fast to implement and had I appreciated the tiny footprint.

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You may also find these articles useful:

3 Fresh Web Design Ideas
CSS Rehab – 3 Step Program To Getting Clean
Why I Love Expression Engine (CMS)

Did I Miss Something?! Let me know in comments!

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/

I eventually added CSS to slowly wick away the pain of tables by using simple global CSS selectors (i.e. body, link, img and etc.). At that time, I would say that’s what most people did. It was still very difficult for pure CSS based layouts because the browser situation was still awkward.* Internet Explorer was at it’s prime and Firefox was not as popular and easy an alternative as it is now.

[*This is from my experience, as I remember specifically working on a client project in 2003-2004 how hard it was to follow tutorials as every one had so many browser caveats. I'm sure my inexperience contributed to the difficult as well.]

Needless to say, my HTML/CSS was a mess even after I started using CSS the way it is supposed to around 2006-2007. This is the time frame I’d say Firefox really started getting traction and soon after IE7 came out in 2007 making everybody’s life so much easier. The main problem was that even though I used CSS, the actual implementation was kind of jagged. As a designer/developer — it’s important to be clean, simple and elegant (as Jamie from Myth Busters likes to phrase technically challenging concepts implemented efficiently) as it helps to debug, transfer, share, update, teach and perform best practice techniques.

Even now, I can do better but here are 3 techniques I practice religiously that have really benefited me after adapting them into my routine.

STEP 1: RESET – Let’s Code on a Level Programming Field

Since Eric Meyer made resetting browsers popular with his influence/community in 07′— it started to build in popularity quite rapidly. As soon as I started using it, I immediately thought to myself how great it was as many problems started fading away very quickly. Sure, we all used mini resets like setting margins and padding to “0″ in the html or body selectors but completely eviscerating all browser defaults is a wonder you have to experience yourself.

If you take nothing away from this article — make sure you start using CSS resets. It’s been one of the biggest difference makers in reducing day-to-day CSS headaches (especially between browsers). Eric Meyer is generally accepted as a CSS authority and his style sheet is generally accepted as the best:

From: http://meyerweb.com/eric/tools/css/reset/index.html

[Link updated: 7.8.09]


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


The way I use this is by linking to it as a separate external style sheet as the first cascade.

STEP 2: FRAMEWORK – No Need to Re-Invent The Wheel

I initially did not flock to CSS Frameworks but have personally experienced the benefits from using them these last few years. CSS is pretty simple once you gain experience using it, so going through the trouble of using a “bloated” framework seems like BS to some developers. This is especially true for those Jedi web developers who have made dozens and dozens of websites through the years and have developed their own way of doing things.

There are plenty to choose from, the two I am most familiar with is Blueprint and a pseudo framework called 960 Grid System (GS) that predominantly focuses on standardizing grid layouts. Once I started using 960 GS, I never stopped. The main reason behind that is because it takes away arbitrary decisions that change from website to website.

For example — what size should the sidebar be from website to website? In the past, it could range from 251px to 327px. Yes, circumstances may require you to make the sidebar exactly 243px wide but if you design it with the grid in mind in the first place — you can avoid these awkward numbers. That can become difficult to manage as you work on several new websites during the course of a day and even more if you do work updating old ones. 960 GS logically gives you several options to design from and as you implement the framework — it’s consistent and makes sense no matter what website you work on.

The way that all the frameworks work is that they supply you with basically a template — but a bare template that’s flexible and versatile enough that web professionals will not reject it for lack of adaptability and can use it for any conceivable future project. Blueprint unlike 960 GS goes much further and offers all the selectors but IMO, it starts to get bloated. However, that’s the beauty of CSS frameworks — you can choose the one that makes sense to you. There probably is a Goldilocks framework out there waiting for you.

Here’s a list of some of the most popular for you to explore:
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/en/

w3avenue and SpeckyBoy have explored more of the frameworks more in-depth:
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Jeff Croft waxes poetic about this subject over at A List Apart
http://www.alistapart.com/articles/frameworksfordesigners

I actually saw Eric Meyer speak about CSS frameworks at An Event Apart SF 08 and the conclusion he left us with is that each one has good and bad points but most stress standards compliant code and organization… so using them certainly can’t hurt.

STEP 3: ORGANIZING – It Works For Your Socks, Why Not Your Code?

[NOTE: Step 3 is hard. It's a bit nit-picky but hey — we're all trying to get better right?! I know I need to follow my own advice better at times!]

You’ve heard this before and like me — you’re too busy writing the code to fuss with it too much. That’s the reality but there are clear benefits as well. CSS = Cascading Style Sheets. Organization is inherently built into the functionality of the language! We should be striving to be clean and easy, and here’s a few quick tips that any of us can start doing right away without much fuss:

Selector Grouping

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is the same as:

h1, h2, h3 { font-family: sans-serif }

and a real world example of the space you’d be saving is:

h1, h2, h3 { font-family: sans-serif }
h1 {2.5 em}
h2 {2 em; color#000000;}
h3 {2 em; color#333333;}

Reducing some of the redundancy will really help make your CSS be more efficient and save you time as well!

Default Selectors First

Define the values of these at the top of the document and keep them there. I’ve seen some style sheets where they group similar selectors together with the assigned selectors such as putting form selectors with the rest of the structure and styling of the form. It makes some sense but it’s bad practice because it’s hard to locate later on and especially frowned upon if you work with a team.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td

This actually happened to me… a co-worker a few years back told me I should stop sprinkling my selectors everywhere. He had to use the Find tool all the time to figure out what the hell I was doing. Don’t annoy your co-workers like me!

Alphabetizing Selector Values

Yep. It’s as simple as that and yet it’s so hard to do.

h1 {
background-color: #000000;
color: #ffffff;
font-family: sans-serif;
padding: 20px;
}

I read about some developers doing it but I always opted for grouping similar/popular values together. Such as width and height, padding and margin and etc. The reason why I’ve come over to this way of thinking is because I realized when I deliver code to a client’s IT team — it makes sense to them that it’s alphabetical since they don’t work with me and don’t know my quirks. In other words, my arbitrary grouping of selectors means nothing to other people. Alphabetical makes sense since it’s a simple and functional way to organize.

In Conclusion…

The reasons why you should strive for clean CSS is to code faster, be efficient and to not annoy your co-workers and clients.

• 1. RESET!
• 2. Use a Framework!
• 3. Organize within your code!

Thanks Darwin for the photo!

Helpful? Comment!

Eventually, I installed and tested several options I deemed worthy. Drupal, Joomla and Mambo were all open-source solutions that generally garnered excitement in the community and sometimes awards for their efforts. The problem with all three of these for me was not that they don’t work but that it’s hard for me as a front-end developer to get excited enough to want to use them. The main problem was that it’s hard to use and hard to learn and once that frustration turns into resentment — we’re done with it.

The matter finally came to a head last year as my company needed a website refresh. This time, I asked around and tried to do actual research as to what web design firms actually use to make sure I made the right choice. On a popular technology forum I frequent, somebody suggested Expression Engine (EE) which I had never heard of at the time. I went to the website and I immediately knew that this was something special. My exact words in the thread was:

wow, expression engine looks very promising…

and then later…

I checked out all the Experience Engine videos and looked into the demo…

This looks like what I was dreaming about. Pretty simple, flexible, easy-to-use, supported and the admin has a tailored feel to it. Too bad it’s not free… but since I’d be recommending it to customers with money, that’s not a deal breaker for me.

[Notice how I called it "Experience" Engine... haha!]

Eventually, I choose it and have been using it as my CMS of choice ever since and have only experienced minor setbacks due mostly to growing pains. Expression Engine is straight forward to use and learn, supported very well, extremely flexible, feature-rich and has been adapted by big and small companies alike. Whether or not it’s the right one for your project is up to you to decide but I want to share why I like it:

Straight-Forward Learning and Ease of Use

Looking back, there was two major factors that really impressed me about Expression Engine. The first was the website. No big deal for a CMS right? WRONG! Go to drupal.org, mamboserver.com or joomla.org and you just don’t see the potential that is within their product and you certainly aren’t inspired by their product.

[Left: Expression Engine homepage] [Right: Expression Engine Tutorial Videos]

With the EE website, you see it and feel it with every click. They say you shouldn’t judge a book by its cover but I really think it’s an important factor if you’re trying to woo web designers and developers by showing them how great it can be. So needless to say, the EE website showed me that I can do great things with this product and to not settle for a CMS that will restrict me with limitations.

The second factor was that they put together a set of well-made video tutorials. They assumed I knew nothing and showed just enough so that I understood the general idea of what makes EE great. Compared with what I went through the year before where the trifecta I was investigating made me feel like it was my fault for not being smart enough — EE made me feel at ease. If you were new to the CMS world like I was, you would understand how great a wall that initial starting point can be. These four videos, show your pretty quickly how to get started while at the same time slowly hinting at how powerful this will be once you get the hang of it.

Since it was for my job’s website — we went through with the $10, 30-day hosted demo to put it through it’s paces. I followed the videos and the written documentation online — EE has a well put together User Guide, useful Wiki and a responsive Forum community that’s all search-able.

Online resources outside of the EE website include:

http://www.train-ee.com/
This website offers free training as well as paid training (in the form of workshops) and consulting. They’re based in the mid-west (Michigan) sadly for us coast clingers but they are a great online resource. I personally think this blog tutorial series on how to build a small business website is a great place to start once you’re comfortable with the basics.

http://devot-ee.com/
This is a newer website that is more geared toward the experienced EE developer. They offer more advanced tutorials, review add-ons and is a quality resource for EE developers.

At that time, my co-worker pointed me to a Smashing Magazine article as well:
http://www.smashingmagazine.com/2008/10/29/expressionengine-developers-toolbox/
Smashing — as always — gets straight to the point and rounded up very useful EE tidbits from around the web. I still come back every so often because I forget what other popular things people are doing with EE around the web.

Quality Support

At some point everybody with any CMS platform will experience a problem whether it be big or small. How well and how quick you can get solutions for your problem is a great sign of what the community is like for your platform. With EE, they have a support forum that is patrolled by a staff of full-time moderators. As with any user community, there are outside resources as well depending on the problems you are having such as with 3rd party add-ons and extensions.

I recently had issues with a WordPress (WP), which is free software under a GNU General Public License. Unfortunately, WP left me completely hosed when we encountered a technical problem. One of the reasons we love WP is that it has such a strong community behind it but seeing how my specific technical issue (who others also had) had not been resolved for months and with no response in their official forums… you really understand the reality of free software.

I’m happy to report that from my experience, EE is not like that. Their moderators on the forum are always lurking the forum and helping and strive to resolve your issues. I had a RSS question and of course posted with as much information as possible and although they didn’t specifically answer my question — they pointed me to the right knowledge base entry. Other times, they have answered my questions outright or linked me to other forum posts that didn’t show up in a search.

Granted, I’m sure there are plenty of cases for EE developers who have been less than satisfied but from my experience, I truly believe that if I have a problem — there is help.

Visit Expression Engine’s Support Forum…

Extreme Flexibility

“Themes” and “Templates” are two features publishing platforms try to push on you to disguise the fact that you are forced to use their product in a certain way. Sort of like buying a car and then customizing it at the end by picking out some custom elements. At the end of the day, you’re driving a Toyota Camry albeit yours has 19 inch rims and a huge spoiler.

EE doesn’t work like that. Although you can start out by editing their basic default website that comes with installation… you’ll eventually want to harness the true power of EE and exploit it’s true potential for your customers.

Currently, I’m working on a website with my client where I’m designing their website with thoughtful consideration to solve their marketing and business goals. There are several components that a CMS will have to handle for me, two of which are dynamic content and a control panel for updating… I don’t need to think about how EE can make this work for me. I think about how I can make EE work for me.

If you didn’t follow that — EE has a easy to learn tag system that allows you to custom build the solution as you need it to work. It was created with flexibility and versatility in mind so you don’t have to build cookie cutter websites. Each client is different and EE allows you to customize for them without learning a new development language. The tag system is straight-forward, logical and easy to become productive with. Here’s an example snippet you embed directly in the HTML:


{exp:weblog:weblog_name weblog="gst_blog"}

[Above example taken from EE Quick Start Guide Page 7]

Expression Engine Video Tutorials:
Introduction to Templates
Weblogs and Custom Fields
Weblog Template Relationship

[Save the drama for your mama... each video is around 5 minutes or less.]

Feature Rich

There are more CMS options today than ever and the feature lists are looking more and more similar. Look closer and you’ll see EE offers the features you expect but with more sophistication. This is what you’d expect from a company and platform that has had time to mature rather than some of the new and trendy options available today. [It's original incarnation was called p-Machine, for Publishing Machine but officially debuted as Expression Engine in 2004 under EllisLabs]

One of the features I like most is when I design a custom field for content (as part of a set), I can control if that one particular field has HTML capabilities or not. That’s just a single example of the attention to detail in EE. Throughout the whole product you’ll see they the care that went into it’s core functionality — web publishing but they also built in high-end features for content writers and the developers. EE is often popular as a blogging platform – they have first rate commenting and spam features. They have add-ons and modules that handle forums, multi-website support and a myriad of other functions.

Visit Expression Engine’s Full Feature List…

Adopted by Companies Big and Small

Sometimes when I introduce EE as a CMS to client, the easiest selling tool is to tell them who else is using it. It quickly shows them that it’s not a limited shelf-life, fly by night product that has a limited lifespan.

http://change.gov/content/home

http://blogs.cisco.com/datacenter

http://veerle.duoh.com/
Veerle has gained notoriety from being picked as a frequent “Top List” website.

A complete list at Expression Engine’s website…

Interested? Give It A Shot!

There are a lot of options out there for publishing these days and I understand the thought of “the right one is the one that does the job” but I also believe that what clients want is a moving target at times. A year later, they often come back to you asking for this and that trying to gain an edge on their competition. Expression Engine allows you to grow your websites on platform where you can grow as well. With every EE website I build now, it’s better than the last!

The pricing for a personal license is $99 and you can upgrade that to commercial for $150 more. For the type of clients at my studio, this is not an issue but it’s understandable for some of the clients out there you do work for with razor thin budgets.

What experiences have you had with Expression Engine?

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!