Social news communities have begun popping up into almost every niche. Similarly we’re seeing Internet Marketers jumping onto the latest trends with information technology. It’s absolutely amazing to see so much dedication being placed into these niche websites.

Below I’ll go into a few traits in social news marketing. Promoting a brand online doesn’t follow the same rules as physical marketing, which opens up a wide array of new techniques. Social news is just one department, but particularly commands a large segment of online traffic.

A Brief History

The first social news communities to launch online included Digg and Reddit. These are by far the most participated article sharing communities on the current curve of our World Wide Web.

The genre social news was created under the unique aspects following each website. Users are able to sign up and create a username to vote on stories and leave comments. Only the most popular news stories within a given time frame would hit the front page, delivering enormous amounts of traffic. Webmasters would long strive for this status to bring boatloads of unique visitors onto their blog or forums.

Digg vs. Reddit

First launched in November of 2004, Digg.com has experienced a very large rise to fame. Ultimately peaking around 2006-2007 when front page stories would often push 8,000 diggs. However their latest release of Digg v4 has struggled as users lose interest, and we now have news that site founder Kevin Rose has left the company for good.

Social news community Reddit garners loads more traffic and has now taken the place of former rival Digg. Their edge specializes in custom categories known as subreddits.

Social News Today

On the modern web there are numerous communities for which you may spend your time. I often play around with Pligg CMS communities featured all throughout Google. These websites act as popular directories for stories and articles relating to many topics.

General news, science, technology, media, and video games are just a few. If you’re running a blog or similar type of content this way of marketing can greatly benefit both you and your readers. Especially if your site is new to launch and desperate for unique signup registrations.

To get started Pligg’s core site has loads of resources for the average marketer. Immediately I can think of Pligg’s Official Gallery list to get you started. You’ll find well over 50 or 100 unique domains running the Pligg CMS system. By submitting your articles into their directories Google can find your content faster and index pages for related keywords.

Signup and Start Voting!

In the screenshot below I’ve included a basic Pligg website. You will notice the centerpiece features a list of front page stories, each with a user account tied to the submission. With an account on these sites you can both vote on other’s stories and submit your own (hopefully to reach the front page).

When you go to signup you’ll only need a username, password, and e-mail address. Many websites will require you to confirm the address, as it’s not very difficult to spam these networks otherwise. Security is always a problem. But intelligent webmasters won’t let their communities degrade and tend to interfere with quality article submissions, along with moderating front page stories before they pop.

What many don’t understand is just submitting your links into these directories will provide reliable link juice for your website. Even if nobody votes for your post, or even if they vote down your post, you’ll still have a backlink in the upcoming section. These are crawled by Google every few hours, so your site gains credibility for the keywords in your article.

Partitioning the Community

On the more popular websites it’s possible to chat with fellow community members. These are people around the world who demonstrate networking skills and help to run the front page of any social community. I highly recommend spending time out of your marketing plan to meet people and message for votes.

Some lesser-known titles include Sphinn and Kirtsy, notably two which garner heavy traffic onto front page articles. If your blog is related and posts on-topic featuring many of the same ideas then your website may gain new readers with such a marketing strategy. This method can work by community participation, or also by running a few separate accounts.

Strategy is required for smaller websites with much less of a community presence. Here you should spend time building a few accounts for yourself and note each username/password. Under this strategy you’re able publish numerous articles onto the front page without relying on other people for support.

Construct your Brand Image

When creating each profile don’t forget to build a unique brand image. Under the guise of your company every account should be created with branding potential in mind. Consider your username as relating to keywords for your business. The same goes for your profile information or avatar image.

It’s also fairly draining to spend all your time voting and submitting articles. Take some time out to relax and plan your strategies! Collect a list of social news websites and keep this on-hand each day. Marketing is a skill which takes time to master. If you’ve got a solid plan thought out, application and timing will perform in your favor.

Conclusion

The marketing strategies behind social news communities are vast. These are ever-popular as more information is flowing via the Internet each day. If you’ve already studied a bit into marketing techniques online then social news will become just another tool for your box.

We have briefly discussed strategies for viral news marketing in social news in an earlier article. Here my goal is to provide a more in-depth comparison into some of the communities and how you can properly induce traffic-heavy campaigns. If you have similar ideas please share them with us in the discussion section below.

Today We’ve got some useful tips for freelance project work. WordPress will help to advance not only your client’s websites but to save loads of time and patience during the process. The administration panel is easy as pie and even includes the possibility for new updates.

Why WordPress?

WordPress is a very powerful system having just come into 3.x release. Most blogs are powered under WP these days and include a handful of amazing plugins that push its usefulness even further. As web designers, it’s not uncommon to fully customize both plugins and themes within a fresh WordPress install.

Freelancers are also facing similar challenges. Working as a freelance designer, all too often projects require backend administration. Instead of coding your own application, it’s much easier to use an open source solution. These days WordPress can fit into almost any mold, and will shave off hours in your development time.

Design on Free Templates

If you know anything about WordPress, you know that its template system is very detailed. For simpler business websites, which only plan on utilizing static pages, your job becomes much easier. However, when you must include articles and archives there are many template files to consider.

I recommend downloading any of the newest WordPress themes and building around their wireframes. If you can find a layout which matches your needs (2-columns, 3-columns, parallax, etc) the amount of time saved coding HTML/CSS may come to you as a fantastic surprise. If you feel more comfortable building your own template this works fine as well.

The development community is often very active and filled with hot topics each day. Never shy away from asking important questions which can help you complete a project sooner. Developers are even likely to share bits of PHP code to simplify the process.

Create a functions.php File

Inside almost every template folder should rest a functions.php file. This is included on every page within the header as WordPress is loading your template. This custom script was built into WordPress back in version 2 for developer’s convenience.

It’s simple to create your own hooks and functions which will affect pages in your layout. There are countless WordPress code snippets and hacks to get you started on building a customized functions template file.

Of course, your usage of the file will greatly vary depending on your client’s needs. As an example, you may be able to manipulate custom post data for a portfolio design. Website designers and illustrators love WordPress as a portfolio tool. And with the endless supply of portfolio themes it’s easier than ever to release a customized template.

Provide Custom Analytics

WordPress hosts many of their free plugins as downloads directly from their website. One of the best Analytics plugins titled Google Analytics for WordPress allows the inclusion of analytics tags without any template edits. The core functions track visitor data and retrieve information directly from your analytics account.

The installation is performed by simply uploading and activating the plugin inside the WordPress admin panel. In the settings menu, you’ll need to provide the client’s Analytics ID, but you do not need to include their script tags. The plugin will automatically include this data within any template’s footer.

Setup Demo Installs

Personally, as a web developer it’s a great feeling once a project is completed. However it can take days, weeks, or even months to reach this stage. One of the simplest actions you can perform is installing a demo version of WordPress on your own local server.

This provides you with a platform to practice and build template files without needing to access the client’s live website. You also have full control over your server access and may manipulate files at will. The secondary benefit is to have a complete structure formed and able to be shared out digitally. This means you may contact your clients with demo links live before even touching their web hosting.

Granted, this step isn’t a necessity for every project. If you do end up building on WordPress frequently it helps to have your own demo space. You may install multiple themes and easily switch between the files for simultaneous project work.

Sharing Within the Community

Possibly, the greatest aspect of developing over WordPress comes with such an active and helpful support community. There are literally thousands of other developers around the world working with the exact same code you are.

This means there are plenty of free code bits and helpful plugins everywhere. Bloggers and developers over Twitter will release bits of their code into public domain. For this reason alone you should consider starting a Twitter following and keeping tabs on great WP developers.

Similarly, there are tons of great ideas out there for adding functionality into your blogs. Working freelance means you aren’t able to always control the project direction. However you can add in your own professional two cents every now and again. For blog layouts social media badges are the best way to gain attention onto a new launch.

Conclusion

This brief collection of ideas should get your mind geared towards growth and development. When building as a freelancer, the end result is financial stability and control over your free time. This means working with open source projects is possibly the best solution for almost any client requirement.

As WordPress continues to grow we’ll seen an enormous explosion of complex functionality and tutorials move into mainstream media. Developers are always hard at work to add their contributions into the WP codebase. If you have knowledge of similar projects please share your experiences in the comments section.

Search Engine Optimization (SEO) has been a huge buzzword among marketers for years. The reason for this is that search engines can be legitimate sources of mountains of traffic for your site and the higher you rank on them the better.

The problem that arose in the early days of SEO was a blatant abuse of the system. What began as a few innocent tricks to earn more visitors morphed into questions of etiquette and heated debates regarding what should and shouldn’t be allowed. The web design community has come a long way in the past decade but there are plenty of marketers that still follow the tactics of the 90s either through ignorance or defiance.

Today we’ll briefly look at how to engage in SEO in an ethical manner by pointing out five key techniques to avoid.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Don’t Fill Your Meta Tags with Keywords

This is a clear example of how developers and marketers took advantage of the system to the point that any usefulness has been stripped. Years ago, websites began stuffing their meta tags full of every possible keyword and phrase that they could find. It was even a common practice to simply steal the meta tags of competitors.

If the fact that this practice is unethical and annoying doesn’t convince you to cut it out, consider this gem: it doesn’t help your rankings. Despite what your SEO guy might think, most modern search engines have abandoned (or simply never supported) meta tags as a way to rank results.

Google saw so many misconceptions regarding this subject that last year they published an article all about how they do and don’t use meta tags. They do occasionally use the description tag as the preview snippet for the site, they don’t use any meta tags to determine your page ranking.

Don’t Fill Your Footer with Crap and/or Hide Content

Another example of developers trying to boost their rankings through nonsense is by unnecessarily filling the footer with keywords or links. This results in a huge footer that doesn’t increase the usability of the site one bit (it actually reduces it!).

Also avoid hiding keywords on the page. This is one of my biggest pet peeves and really shows a complete lack of general knowledge or concern relating to ethical web development. I’ve seen pages filled with text the same color as the background, items piled on top of others, and other bizarre and desperate attempts to cram as many keywords as possible into the content. If it doesn’t fit with the content, leave it out!

An alternate version of hiding content is “cloaking.” This is a clever trick that makes search engines see one thing and users another. This way you can still have a nice clean website but still use all the dirty little SEO tricks. Cloaking is definitely frowned upon by the good people at Google and should definitely be avoided.

Don’t Duplicate Content Across Multiple Domains

Have you ever searched for something on Google, clicked on a dozen links or so that seemed unique only to realize that half or more ultimately led to the same site or product? Remember how annoying that was?

The key here is to continually put yourself in the mindset of a user. We are all aware that more traffic often equals more money, but duplicating all your content across multiple sites just so you appear multiple times in a search is essentially just spam! You’re not targeting valuable traffic for the sake of conversions, you just want to watch your analytics rise. Never mind the fact that half the people visiting your site are annoyed at the fact that they keep ending up there and will therefore never consider buying whatever it is you’re selling.

Having multiple domains is fine, if that’s what you genuinely need for content purposes. Creating a network of unique but connected sites is a completely legitimate business practice and can lead to a large following of interested users, just make sure you’re not mindlessly copying and pasting content simply to enlarge your snare.

Don’t Sacrifice Quality or Usability

At the real heart of all of these principals is a desire for quality and usability. If your SEO is reducing the ease at which people can use your site, then it’s counterproductive and reduces rather than increases the value of the site. Ask yourself what the fundamental purpose for the existence of the site is. If it’s to be a professional face for your company to the public, then don’t cheapen it for the sake of SEO.

Even good practices can make your site suffer if not implemented properly. For instance, the necessity of inserting keywords into paragraph copy often leads to sentences that are nearly unreadable or at the very least an assault on the English language.

For instance, repeating keywords again and again in different ways can make your site both annoying and confusing. As an example, your site can be made quite annoying and confusing by repeating the same keywords and phrases different ways throughout the paragraph copy. To illustrate, if you want to confuse and annoy your readers, repeat the same keywords again and again throughout the site.

See what I did there? Never imagine that your users are too dumb to notice your incessant attempts to fool search engines into giving you a higher rank. They will both notice and resent you for it.

Strive to make a website that people can use and even enjoy. Use the SEO techniques that you know are respectable and effective, but if you have to choose, give usability a higher level of importance.

Don’t Let Your Clients Believe SEO is Magic

One last thing that really irks me is “SEO Experts” who take advantage of clients that simply don’t know any better. Everyone uses the Internet, but few really understand it to the level that we web developers do. Consequently, it’s really easy for someone who knows the lingo to convince an aspiring business owner that the reason they haven’t achieved fame and fortune on the web is because they need a little SEO.

There are plenty of legitimate SEO experts that can in fact provide a measurable and valuable increase to the number of visitors to a site, but it sure seems like there are a lot more individuals who have learned just enough to rip people off.

Be honest with your clients both about your experience with SEO and how it will and won’t benefit them. If you don’t know anything about it, don’t claim that you do. Read a book or two on the subject before you start bragging about how good you are at it. If you really do know all about SEO, then you should know enough to tell your client how much of a return they can realistically expect from their investment.

How to Get Banned

If you read and discard the information above as the drivel of an overzealous designer, you should definitely reconsider. There’s more to my argument than simply stating that I don’t like it when developers engage in these tactics. The truth is, most of the web community doesn’t like it. So much so that engaging in practices like keyword abuse, cloaking, and duplicating content are excellent ways to get your site banned from Google and other search engines.

It might seem draconian for Google to police the web in search of violators, but you have to remember that the primary goal of a search engine is to provide relevant and useful links to searchers. If your shady actions are inhibiting this goal, don’t be surprised if you get the boot.

Conclusion

Ultimately, remember that good practices are those that don’t feel like you’re getting away with something. Proper use of headings, assigning alt tags to images and creating site maps are all great ways to boost your SEO without selling your soul. Exploiting loopholes and constantly searching for that one golden trick that will bring you the traffic of your dreams is a fool’s errand that ultimately hurts more than it helps.

Leave a comment below and let us know what your SEO pet peeves are. We want to hear horror stories of sites that go way beyond what is acceptable in the name of first page rankings!

This article will discuss the history and future of the web and what implications that has for how device testing will begin to play a larger role in the obligations of web designers.

As the presence of web enabled devices increases the key question that will arise relates to not only whether or not your design will function on a given device, but also (and perhaps more importantly) how high the quality of the experience will be on that device.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The History

The Internet used to be something that you kept in one place. It sat idly by in your office while you lived out your life with only the occasional need to fire up the connection through your phone line and check an email address that no one ever sent anything to.

Many of us saw the mass amounts of potential and knew that the possibilities were endless, but still couldn’t really think of a reason to be online very often. Our lives had been just fine without this strange new connection to the rest of the world and though it excited us to have it, there wasn’t much in our daily lives that called on us to actually use it.

As time went on, those few souls who really grasped the potential of this world-shaking technology gradually developed sites and applications that gave us practical and addicting reasons to continually check in online. We began to grow accustomed to an unlimited stream of information and started actually seeing the Internet as an essential household necessity.

It was where we started research papers, caught up on the news, looked for a dinner recipe, learned to play a song, and found out who that one guy in that one movie was. And the biggest revolution? Communication. The Internet suddenly provided us with new and exciting ways to keep up with both the people we loved the most and the people we were only mildly interested in hearing about.

However, while this communication revolution was taking place in the office, another was exploding in the streets. Cellular phones had become the hottest item on the planet, magically providing us with a constant, invisible tether to everyone we knew. Our insatiable thirst for constant communication had begun to push cell phones into the hands of adolescents, grandmas and every one in between.

Looking back, it’s easy to see that these two linked but separate revolutions were on a collision course that would change the world forever.

The Future

As we know, the mobile phone revolution did indeed collide with that of the Internet. As with the “normal” Internet, the mobile web was so limited at first that few really saw the need. The Internet had been built to be a rich, dynamic and Interactive place and many cell phones didn’t have so much as a color screen. Consequently, many thought they knew the future of the web: mobile.

In their limited grasp they envisioned a future with two Internets: the big one that you left at home and the small one that you took with you. However, this was merely a transitional period and not the true future of the Internet. The mobile web, though still a hot buzz item, is gradually giving away to something else entirely.

The birth of the smartphone marked a new era where these two technologies were finally able to collide with near full force into the explosion of constant information and entertainment we know today.

Not Mobile

It is here that we venture outside of our 20/20 vision regarding what has happened and look through our incredibly inadequate prescription lenses towards the future. My prediction is this: The future of the web is not mobile.

To say that the future of the web is mobile is to focus on a small portion of the greater puzzle. The future of the web is not in cell phones. These devices are constantly evolving and will feed the revolution, but computers aren’t going away any time soon. The mobile trend does however provide us with the biggest key insight into the future. In this future our lives are inexorably intertwined with the Internet as the hours and locations where we aren’t hooked in dwindle and disappear. We won’t take the Internet with us, it will take us with it.

The future of the web is not mobile, it is ubiquitous.

The Era of Devices

The lengthy and overly dramatic narrative above is meant to get you thinking about the current state and possible future of web user trends. It used to be the case that a web designer’s biggest obstacle to tackle was cross-browser compatibility. In fact, this still holds true for many designers.

However, as the ubiquity of the web increases, the looming issue of device testing increases in importance. The Internet has leapt out of the desktop computer and into notebooks, netbooks, cell phones, mp3 players, tablets, and countless other devices.

As time goes on, technology fuses more and more with the web, giving you an ever increasing amount of variables to consider for how people are experiencing the websites you build.

The Real Goal of Device Testing

Fortunately, as technology improves so too does the compatibility of these devices with the web the way it was always meant to be. Though debates rage over which technologies should be supported, there is at least a strong core of support rising out of widely agreed upon standards in HTML, CSS and even JavaScript.

However, though your device testing duties may ease in some respect as certain technologies triumph over others and are adopted as standard by device manufacturers, never forget that this is not merely a question of compatibility. We can get so tangled up in making everything compatible that we forget the real goal entirely: the experience.

It is the user experience that is your ultimate end game as a web designer. Device testing then goes well beyond whether or not a site simply loads on a certain device to how it feels.

Focusing on the Experience

In a recent blog post titled Designing for iPad: Reality Check, the web developers at Information Architects discussed how they went about developing for the iPad before anyone could actually even get a hold of one. They used clever tactics like printing out screens and applying them to scale models, but ultimately nothing could provide a decent substitute for the real thing.

It wasn’t until they actually saw and experienced their application on the device that they were able to really fine tune the nuances of the experience. Armed with experiential knowledge of factors such as screen brightness and resolution, gesture friction, and device maneuverability, they are now much better equipped to tackle the task of creating enjoyable and effective user experiences for the iPad.

This is where the heart of device testing lies. When you leave behind compatibility and enter into experiencing for yourself how your designs fare on a given device. As you get a feel for popular devices, you can apply knowledge gained from concrete experience to the earliest stages of design to ensure that the users you want to target are getting the experience you want them to on the devices you know they’ll be using.

Closing Thoughts

Obviously, the depth of your duty in this regard will scale with the size and budget of the project. But in general, you have an obligation as a designer to pay close attention to trends in device usage and to familiarize yourself with the experience of using the gadgets driving those trends.

The more you familiarize yourself with a given device, the fewer unpleasant surprises the testing stage will bring. Sometimes the goal will be a widespread “acceptable” experience on as many devices as possible, other times it will be to really shine on a specific device at the expense of others. Great designers will be able to pull off either task equally well. Will you?

Let us know in the comments below how you think the rapid expansion of online devices will affect the future of web design.

Today we’ll look into the web design practices and trends of the single biggest name in software to see if we can learn anything about some mistakes to avoid in our own work.

Feel free to comment to either agree or disagree with the suggestions below. As professional designers your insight is valuable and I look forward to your thoughts.

The Occasional Rant

To everyone who hates articles filled with rants, I apologize that this post is a little harsh at times. I normally favor praising good design over criticizing bad, but when David Appleyard and I decided to do a post on the design trends of Microsoft, there just seemed to be a lot more to learn about the messy, ugly, and/or inadvisable things that they do than the alternative.

To cut you off in the comments, I won’t mention or make a single comparison to Apple in the analysis below. This is not meant to be a PC versus Mac argument in the least, but rather a look at what we believe to be genuinely poor practices in web design and development. In all fairness, Microsoft is a hugely successful company and is not exacting failing due to any of these problems. In fact, as we point out below, Microsoft really seems to have some stellar designers on the team for certain sites, we merely suggest that a greater level of quality control be implemented across the board.

With that in mind, let’s analyze a few places that Microsoft seems to fall short in its design and development practices and how you can benefit from this knowledge.

#1 Beware of Mandating Certain Plugins

If we’ve learned anything from the recent scrapes between Apple and Adobe it’s that creating sites entirely dependent on closed third party plugins can eventually lead to some serious backfire. Microsoft seems to be repeating this same blunder as its own network of sites becomes more and more deponent on Silverlight.

As I browsed Microsoft’s various sites preparing for this article I was constantly harassed by windows informing me that I had not installed Silverlight and therefore could not experience the webpage the way it was meant to be viewed. My question is, “why go this route?” Especially when we’re talking about simple slideshows and animations that can be done with more ubiquitous technologies. Granted, Microsoft owns Silverlight so it makes good business sense for them to back up their investment, but that doesn’t mean that it’s the best choice for you to go jumping on their bandwagon.

Whether you’re a huge fan of Silverlight or not, my advice is to be extremely cautious about basing the functionality of your site on this or any similarl technology. As the debate about whether or not it makes good sense to develop sites with Flash continues to heat up, second in line systems like Silverlight become even more of a gamble. Where possible, stick to cross-browser, standards-compliant code and tools that don’t require any additional work or installations from your visitors.

#2 Watch Your Resolution

This is one of my biggest complaints about Microsoft simply because it just seems like sloppy design. There is undoubtedly a fine line to walk between keeping your file size down to increase usability and keeping your pictures clean and crisp, but I can’t help but feel that Microsoft seems to be more prone to display ugly, jagged JPGs than literally any other professional site that I’ve seen in the past few years.

The ever decreasing amount of dial-up Internet users continues to push acceptable image sizes up and up. This by no means implies that you should not take special care to make everything as small as is reasonable, but the moment it starts to weigh so heavily on the design that it dramatically reduces the apparent quality of the site, the images become self defeating!

You’re living out pure irony if you use images to make your site look better but ultimately reduce your aesthetic appeal in the process. When possible, preview your processed images on different monitors and pay close attention to how much distortion and artifacting you find to be acceptable.

#3 Organized Clutter

Sometimes you can follow all of the obvious design rules and still end up with something that seems visually subpar. Browsing Microsoft’s sites I came across countless areas like the one below that just seemed cluttered despite their attempts at column-based organization.

So what’s the problem? Simply put, there is a ton going on in a relatively small space here. Even thought they’ve definitely attempted to arrange the content and enhance the visual readability through icons, the end result is still quite off balance.

If you take a close look at what’s going on here it feels like four columns of information designed by four different people that have been crammed together. The left side seems really heavy with images compared to the right, the text color is a little sporadic, the content is awkwardly staggered, and the columns lack enough breathing room to make them seem like the independent areas that they are.

The lesson here is to be careful of packing a single area of your page too full of disparate information. There are undoubtedly plenty of times when the situation will demand lots of content, but the organization should be handled in a consistent and attractive manner as seen in the beautiful examples below (from non-Microsoft sites).

#4 Inconsistency

Starting from Microsoft.com, open up the gargantuan navigation dropdown menus and choose an area of the site to visit. No matter which link you click, the resulting page will look quite different than the homepage and different still from most of the other links available in the same dropdown.

Exploring the Microsoft site is like spinning a roulette wheel. You have virtually no idea where you’re going to land and what to expect from the next page. Some pages feature swooshy backgrounds while other use soft gradients or even exploding circles. Most pages seem to favor blue but not necessarily the same blue and there are also plenty of pages that ignore the blue trend altogether.

The point is, whether your site has two pages or two hundred, consistency is a must. It makes users feel more comfortable when they can become familiar with the way a site works and looks within a few seconds. Giving them something drastically different every few pages makes browsing a more confusing and less efficient experience.

in addition to this there’s the idea that creating a strong, consistent brand is just good business as it helps customers relate to your company in a more personal way. Admittedly, Microsoft is juggling many different brands and microsites that all stem from the homepage, but even among what could be considered the core Microsoft.com pages, the image themes and navigation methods seem drastically diverse.

#5 Clipart-centric Design

This suggestion is obviously a little absurd seeing as how clip-art and Microsoft Office have always been inexorably intertwined. However, icon design has come a long way since 1995 and it’s about time to give up that specific style in the images you use.

The examples of art above pulled from various Microsoft pages simply make me cringe, especially that awful “Beginner Developer” logo. I have no idea why a boomerang is attacking a plant or whether the magical hovering computer monitor is aiding in the attack or fleeing the scene. All I know is that the visual communication here is an indecipherable mess.

This is one of the primary reasons CSS galleries like our own exist. Not so you can steal the design of others, but so you can get a glimpse into the state of design in the decade you’re developing in. Browsing through these galleries is like visiting popular clothing stores at the mall to show your crazy aunt that she doesn’t have to dress like someone from the Sunny and Cher show.

Always feel free to break boundaries and move beyond current deisgn trends by starting your own. Just be cautious of staying stubbornly stagnant for years while the rest of the world moves on.

#6 Misaligned Overflowing Text

Another trend that’s hard to miss across Microsoft’s sites is the constantly broken columns of text that overflow their obvious bounds.

This one is fairly easy to fix and really only requires a bit of effort and attention. Just make sure to take advantage of free tools like Adobe’s browser lab to ensure that your layouts don’t break when viewed on any major browsers.

Though CSS layout is an admittedly tricky beast when it comes to cross-browser consistency, small mistakes like this really bring your site quality down and are worth the troubleshooting time they take to resolve.

#7 Poor Alignment

Sometimes a given page presented me with the challenge of deciding which design foible to point out. For instance, on the page below I originally considered picking on the use of a tiny screenshot that doesn’t get bigger when you click on it, but the more I looked at the page the more I became confused as to what was going on with the layout.

If you’re familiar at all with basic design theory, you know that learning to implement solid, consistent alignments is the key to good page layout. The odd mixture of left, center and right visual alignments taking place on the site above, in conjunction with the awkward empty space near the top, make for a really odd visual flow of the information being presented.

Further, if you visit the page above you’ll see that the content as a whole seems like it’s trying to be centered but is really thrown off by the strip across the middle, which makes the page seem quite right of center.

#8 Ad Clutter

Free design blogs like this one have to feature plenty of ads, it’s simply the way we make an income and continue to provide you with content. However, if you’re running a professional business site, you have to consider carefully if you want to detract from your message and professionalism with advertising.

The pages of Microsoft.com are littered with various ads that really bring down the aesthetic of the page that they’re on. Sometimes these ads point directly to other Microsoft pages, sometimes to other companies or partners. There’s nothing wrong with the concept of directing traffic to other parts of your site, but how you accomplish this can make a huge difference.

If there’s one thing most web users have learned to spot, ignore and possibly even resent, it’s a banner ad. Not to say that this type of advertising doesn’t work with proper targeting and design, or to even say that Microsoft users aren’t clicking on these, but I do wonder if there isn’t a better way.

If Microsoft wants to direct traffic to their mobile phones and other projects, the easy way out is to setup a cluttered, non-standard (design wise) ad system that rolls across their entire site. However, it seems like integrating this content as part of the actual site would have a much better click-through rate as more users would take note of the message and not have to break any internalized rules about avoiding banner ads at all costs.

Plus, such integration would force the designs to be more consistent because they are created as a single unit rather than by separate teams. Again, this is a scenario where I can understand the cost-efficiency of Microsoft’s approach, but want to caution you against following their lead. Odds are, the sites you design won’t rival the mega-network of Microsoft sites and will therefore more likely lend themselves to solid, integrated design so you can avoid the visual clutter of excess ads.

Obviously, there are plenty of sites genres where this doesn’t apply at all as advertising is expected to be present. Just make sure you consider whether your site should be dedicated to selling your product or service, or requires the extra income and distraction of advertising.

#9 A Lack of Breathing Room

In print design, designers setup every page with a “live area.” This is usually a rectangular inset from the trim of the page that defines the area in which it is safe to place content to avoid page cutoff or edge crowding. Most web designers do this intuitively as it’s fairly obvious you don’t want your content to be too far crammed up against the side of the browser.

However, as the screenshot above shows, there are a few Microsoft pages that don’t seem to put stock in such opinions. Instead, the content starts as soon as the page does with zero horizontal padding or margin (at least on the browsers that I checked with).

The navigation panel doesn’t feel like it’s built-in to the side of the page, it feels like it’s getting cutoff (again, it may be doing just that due to the fact that I don’t have IE). The lesson here is simple: always be conscious of the edge of the browser window. Unless you’re breaking the rule for an obvious visual bleed effect, place your content, especially interactive portions and links, well within a safe margin so that users don’t feel crowded when they try to use it.

If you look closely at the screenshot above you can see some more examples of Microsoft’s designers simply not considering whether or not their text will flow properly on all major browsers. This is quite the amusing trend for Microsoft as many web designers spend their days attempting to make special accommodations for Microsoft’s Internet Explorer, but the multi-billion dollar company can’t be bothered to return the favor by checking their own work on other systems.

#10 Failing to Leverage Your Talent

Though there are plenty of negative comments above about the web designers over at Microsoft, I was pleasantly surprised to see that they do in fact have quite a few sites and pages that look simply amazing.

The examples above are just two of the many places I believe Microsoft really knocked it out of the park with their layout, color choices, graphics, and cross-browser compatibility. What this tells me is that somewhere among the vast pool of cubicles in this company there sits some really talented individuals capable of taking the company completely out of its design slump.

These designers, whoever they are, should be promoted to positions that would allow them to cooperate together and set consistent standards that literally every Microsoft web designer would be forced to follow. In place of a labyrinth of disconnected jumbles of content they could create a strongly branded network of beautiful sites that all clearly belong in the same family.

The final suggestion I present to you is to find these types of outstanding individuals in your own company and give them a voice. Rather than lamenting at the lack of talent among the other members of your team, appoint the strongest designers and developers to positions where they can influence every piece of visual communication that rolls out associated to a specific brand.

This can be done efficiently and effectively by creating clear, consistent and strict brand guidelines that are distributed to every designer and developer for every distinct brand that you work with.

Closing Thoughts

To sum up, though Microsoft possesses quite a few extremely talented web designers, the work of these individuals is almost completely overshadowed by the vast amount of content that doesn’t even meet standards that we would expect from rookie designers and developers in their first year.

Fortunately, we can use companies like Microsoft as instructional aids to clearly illustrate that there is in fact a wrong way to do things. Never imagine that just because you’re a lonely freelancer or small design firm that you can’t completely outperform mega-corporations and design firms when it comes to the quality of work you produce.

I’ve found that it is often easier to find examples of quality designers in home offices around the world than sitting at the desks of large firms. Take comfort in the fact that you don’t have to coordinate and control the quality of hundreds of designers. Do your best to create some of the best sites on the web with the small amount of resources you possess in conjunction with a mass amount of personal drive to create beautifully functional designs.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.

It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

1. WAI-ARIA

When improving your site’s accessibility, your first port of call should be a set of documents, published by the Worldwide Web Consortium, called WAI-ARIA. These documents basically set out the ways in which developers should add metadata to HTML for improved accessibility.

2. Progressive Enhancement

Progressive enhancement means designing a website in a layered fashion so that everyone can access the most basic functions and users with better bandwidth and advanced browsers can see an enhanced version. Sites built using a strategy of progressive enhancement can be read much more easily by screen reading software, used by people with a range of disabilities.

3. Alternate Content

It’s absolutely vital that you provide a text equivalent for non-text content in your site. Images and videos need alt tags, so that people using screen reading software can find out exactly what’s on a page. Links need relevant title tags too.

4. Captions

As well as alt tags, images, audio and video clips need captions, so that the visually impaired know exactly what they’re looking at. If you’re uploading videos or podcasts, provide a paragraph of text summarizing its contents, or even better, provide a full transcript. Don’t forget, captions really help with SEO too.

5. Screen Reading Software

Most blind and partially sighted people use screen reading software when browsing websites. One of the best ways to make sure that your website is accessible to them is to try using the same software yourself. Turn off your monitor and run the software to find out exactly what your site’s saying to these valuable readers and potential customers. If the software starts spouting gibberish, you know you need to make some changes!

6. Audit

No amount of accessibility testing you do yourself can compare to having a real specialist cast their expert eye over your site. There are a number of companies and individuals who will carry out an accessibility audit for you, telling you exactly which changes you need to make.

7. Usability Testing

Usability testing is another valuable way to identify potential accessibility problems with your site. Get a group of people with a range of different needs to try your site out for real, navigating around and performing tasks. They’ll be able to tell you in detail about any problems they encounter, lots of which, you’re bound to find, will not be included in WAI-ARIA guidelines.

8. Stylesheets

When you’re building or redesigning your site, make sure that your stylesheets permit variable font sizes and never use fixed fonts. You’d be amazed by how many users, from old people to those with slightly poor eyesight, resize their fonts on a regular basis.

9. Font Controls

Firefox and Internet Explorer users can enlarge fonts but lots of people are not aware of this and others still are using older browsers that do not have this capability. For them, consider embedding font resizing controls into your site.

10. Consistency

Consistency in design from page to page is really important for people who can’t take in a whole page at a glance, and those using screen readers. If you’re site’s consistent, with the same things in the same place on each page, they’ll be able to get to navigate around much more easily. Sighted users often find consistency beneficial too.

11. Text for Navigation

Avoid using images for navigation on your site, at all costs. Use text instead. Screen readers can understand it and it’s much easier to resize. If your navigation controls can’t be enlarged, make sure they’re written in a clear font, at least 16 point in size.

12. Colors

Using different colors in websites is great, but you have to consider how they work together to create a clear image. Foreground and background colors must contrast sufficiently and you can forget about using light-grey text it’s difficult enough for people with 20-20 vision to read. Links must be a different color from the rest of the text on your site, preferably blue and always underlined.

Conclusion

Accessibility is an often overlooked aspect of web design, but it’s something that should be at the core of your design process right from the start when you’re wireframing a layout. Without sounding too self-serving, ensuring that your website meets the standard for accessibility means one thing: more happy customers. And you know what that means!

Use the comments below to tell us if you agree with the tips above and how you’ve made your site more accessible.

The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.

Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.

What Is a Front End Package?

What I mean by front end package is essentially a set of tools and conventions that standardize certain elements of the web development process. The inspiration for this article comes from the creative minds at Erskine Design. As a designer, you’re probably a visual thinker so we’ll cut straight to the diagram:

The Basic Outline or Erskine’s Ultimate Front End Package

As you can see, Erskine has essentially built a basic framework from which to jump off for major web design projects. They sum it up as “a bumper compendium of cascading and connected CSS files, naming conventions, modules, plugins and library scripts that ensure any project led or worked on by any member(s) of the team will stay on convention, and be simpler for anyone else to step into and work with at any time.”

Possessing such a framework can be invaluable for a number of reasons, which we’ll discuss below. The argument posed by some is that such a framework or toolkit is not only helpful, but absolutely necessary. Erskine Design’s Simon Collison goes so far as to say “Without question or compromise, every website needs to be built with a solid foundation layer and an Ultimate Package.”

Let’s take a look at some of the benefits from, and reasons for, building your own custom front end package. (Based on some of the suggestions from Erskine’s Presentation, found here)

Elimination of Repetition

This is the most basic and understandable reason for developing a front end package. Every time you start to build a site you go through several setup steps such as forming the bare HTML structure, creating the external CSS files, linking the HTML to the external CSS, importing jQuery and/or any other JavaScript libraries you often use, etc. Developing a front end package recovers all of this lost time by making it extremely easy to start a new site: just copy the folder containing the framework and you’re up and running.

You might argue that these tasks don’t take a significant amount of time or are even necessary to get your brain into a web development mindset. To answer these arguments I would first suggest that you time yourself to see just how long you lose on every project getting your file hierarchy in place, setting up and loading scripts and styles, figuring out naming conventions, and fixing sloppy mistakes. I’ll wager it’s a lot more than you think. Finally, to the latter argument I would challenge you to retrain your brain to accept a new part of the process as the beginning. Try jumping right into experimentation with your system in place and discover how much nicer it is to skip all of the tedious, repetitive tasks.

Standardization

Standardization is a major benefit from using a prefab toolkit. Every time you start a new project, you might do things slightly different. This can be something big, like changing the way you layout your HTML, or something small, like deciding on a new naming convention. This can make it extremely difficult for others to follow your work or even for you to go back later and remember how you were doing things at the time.

As you develop your front end package, keep standardization at the forefront of your mind. Decide on the best way you know to do every little thing and stick with those conventions through every project you start. Markup your comments the same way, organize your CSS the same way, use the same variable naming conventions, utilize the same folder hierarchy, use the same CSS resets, etc. Taking all the little decisions and guesswork out of your system has the benefit of streamlining the entire development process to ensure you’re creating a discernible, organized site as quickly as possible.

This is not to say you should decide on a system and stick with it permanently. Let it evolve as you learn and discover better methods, just don’t integrate new methods flippantly or frequently enough to void the usefulness of the entire package. When you decide on a better way to do something, make sure you are absolutely certain that it will improve your system and be sure to make a note outlining the change and when it was integrated so you know what to expect from older projects.

Better Collaboration

This is where a front end package crosses over from “nice to have” to “absolutely essential.” When you’re working with a team of developers on a large project, one of the biggest inefficiencies you can have is a failure to get everyone on the same page from the outset of the project.

If you’ve got Bill structuring his part of the project one way, Jill structuring her part another way, and Will trying to keep up with both Bill’s and Jill’s methods, things are going to get messy fast (and not just because all of your employees’ names happen to rhyme). This will inevitably lead to long meetings spent arguing over trifles. If you have team members that have already started a project using certain conventions, you can bet they’re going to defend that method to the death to avoid going back and fixing what they consider to be finished work. This is why it’s extremely important to develop a front end package in cases where significant collaboration is involved. You’ll probably still have to hold a meeting to decide on specific conventions to follow, but you’ll find that team members are much more flexible to new methods if it doesn’t require backtracking.

The key takeaway here is to develop a system before a project begins, not during. This will increase the chance of acceptance and prevent a lot of incompatibility issues down the road. Also, be sure to include your team in the decision making process. This is hugely important to the success of the package for a number of reasons. First, it’s always a bad idea for management to create a system to streamline a given task without consulting the people who are closest to that task. No matter how many more college degrees you have than the people under you, chances are they are the single best authority on what will and won’t work. Finally, apart from the issue of effectiveness is again the issue of acceptance. If you hand your team a set of guidelines that they’ve had no part in developing, they will drag their feet and complain the entire way because you are forcing them into something they don’t want to do. However, if you let team members from every level actively participate in the development of the conventions, they are much more likely to conform to the new system because they aided in its creation and direction.

Quality Control

Developing a front end package allows you to implement a certain degree of quality control across the members of your team from the outset of the project. It ensures common mistakes, such as grabbing the wrong doc type or forgetting to include a certain browser specific style sheet, aren’t made. Further, having a strict system in place can help prevent intentionally sloppy work. In a mad rush to get a project going, developers will often use non-standards compliant code, vague variable names, obscure tricks, and any number of other shortcuts with the argument that they will go back and fix these things later. The problem of course is that there usually isn’t time to go back and fix these things later in the project as you approach key deadlines. Many of these problems will disappear if your foster a culture that avoids such practices and discourages straying from agreed upon conventions.

In Regard to Design & Innovation

Before I close and ask to hear your opinions, I want to preempt an argument that might arise. Many see common conventions and strict rules as something that will cripple the design process, virtually eliminating any room for creativity or innovation. This simply is not the case in this instance and is in fact the opposite result of what a well-designed front end package will provide.

A good front end package will actually allow you to focus more on the creative elements of the development process through standardization of areas that eat up time and whose variation would not making a significant difference in the end result. What I mean by this is that such elements as your folder hierarchy will go completely unnoticed by the end user and are therefore not the place to focus your creativity on every single project. The idea here is to get through the boring stuff in one fell swoop so that you can quickly dig into the things that do, and should, vary from site to site; the things that make each site unique. With this type of system in place, you can spend more time developing original user interfaces, choosing custom color schemes, trying different font-families and coding innovative functions.

If the system you come up with hinders the creative process, it simply isn’t doing its job and should therefore be scrapped in favor of a trip back to the drawing board.

Free Resources

Sold on the idea of developing your own front end package but don’t know where to begin? Here are some free resources to get you started.

• A Killer Collection of Global CSS Reset Styles
• HTML Blank Page Examples
• A Simple PHP Template System
• Google Code: Hosted JavaScript Libraries (jQuery, MooTools, etc)
• 16 Basic CSS Layout Templates

Speak Your Mind

The above represents my long-winded argument for why I believe Erskine Design is right in asserting that every website should be built from a strong, standardized and preset foundation. Let us know if you think developing such a system is worth your time. Better yet, if you have a system in place, let us know how it works!

This will be the final article in our series on HTML5. This go around we’ll have a brief look at which new HTML5 technologies major browsers are officially supporting and go over some techniques you can use to take advantage of the new elements in your coding today. Finally, we’ll discuss how you should start preparing to support HTML5 in all the sites you build from here forward.

What Features Are Major Browsers Officially Supporting?

For the purpose of this article, we’ll define “official support” as listed in the documentation from the browser’s developer. This will ensure that no hacks or tricks are required to use the new features and will instead focus on native implementation straight from the source (feel free to add your own commentary based on the results of your own tests!). With that in mind, let’s take a look at the current iterations of a few major browsers.

Firefox 3.5

Head over to the Firefox Developer Page and you’ll see a brief description on HTML5 support. Here’s a list of supported features:

• audio element
• video element
• canvas element
• Offline resource specification
• Drag and Drop API

Safari 4

The Safari 4 features list mentions support for the following features:

• audio and video elements (and associated API)
• canvas element (actually created by Apple for Dashboard)
• Offline Application Support

Internet Explorer 8

Though the Internet Explorer Developer Center claims “strong support” for HTML5, there doesn’t seem to be any support for the canvas element (probably due to Silverlight), audio/video elements, or the offline application API. Here’s a complete list of IE 8′s supported elements, none of which seem to be exclusively from HTML5. I did however, find mention of support the new Cross-Document Messaging API. Feel free to share any resources you have on HTML5 support in IE 8 using the comments below.

Opera 10

Opera’s developer site posted an article about HTML5 in January containing existing support. Here are the features that article lists as currently supported by Opera 10:

• video element
• canvas element
• Cross-document messaging
• Server-sent events
• Web Forms 2.0

Further, here’s a report on current web specifications supported in Opera Presto 2.3 (Opera’s rendering engine).

Google Chrome

Unable to find an official list straight from Google, I was forced to turn to an O’reilly article outlining a speech made by Google’s VP of engineering on HTML5 and the future of web technologies. In his speech, Vic Gundotra listed the these features as being supported by Google Chrome (as well as Firefox, Safari and Opera):

• video element
• canvas element
• geolocation API
• App cache (offline wep app API)
• Database API
• Web Workers (background thread processing)

Cheating

As you can see, even the browsers that have the most support for HTML5 still don’t natively support even half of the new features and elements we’ve discussed in recent articles. Which means using HTML5 today will not be as easy as simply throwing in the semantic changes that you’ve learned. What we’ll need is a way to create the new elements in HTML5 using only the widely used and supported web technologies of today. As it turns out, JavaScript offers a simple, native method for doing exactly this! By using document.createElement, we can make our own custom elements that conform to the specifications of those supported in HTML5. Sure it’s a bit of a hack, but it’s the closest thing you’ll get to getting your hands on all of the new elements in the near future. Let’s use the example from our previous article to see what this would look like.

<body>
	<aside>
 
		<p>General Info</p>
		<nav>
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Contact</a>    
		</nav>
 
		<p>Tutorials</p>
		<nav>
			<a href="">HTML5 Tuts</a>
			<a href="">CSS3 Tuts</a>  
		</nav>
 
	</aside>
 
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>
 
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of free tutorials!</footer>
	</section> 
</body>

As you can see, this page uses the HTML5-only elements header, footer, article, aside, nav and section. All we have to do to get this to work is create those elements in JavaScript:

<script type="text/javascript">
       document.createElement('header');
       document.createElement('footer');
       document.createElement('section');
       document.createElement('aside');
       document.createElement('nav');
       document.createElement('article');
</script>

Voila! Now you can target those elements in CSS just as if they were native elements. Warning: this method can produce widely varied results and you should use at your own risk. If someone visits your site with JavaScript turned off, your CSS won’t take hold and your nice, pretty HTML5 website will look like it was attacked by Godzilla. However, this method is great for your own experimentation and should work with all major browsers.

Further Testing

In my own testing, both Safari and Firefox seemed to handle all of the new elements listed above without any JavaScript whatsoever. If you take a look at the code, you can see that Apple’s own Safari 4 about page uses several new HTML5 elements and only implements JavaScript in the case of Internet Explorer. Try this out on your browser and let us know what you come up with!

Preparing for HTML5

On his site, Jon Tangerine make the suggestion that we should start preparing ourselves for HTML5 by getting used the structure inherent in the semantic changes. What this means practically is fairly simple, use classes to mimic the structure of an HTML5 page. This method is not browser-specific, adheres to all currently popular standards, does not rely on scripting, and is super easy to implement. For example, we would take all of the header tags in the code above and convert them to <div class class=”header”> and use the normal class markup in for targeting in CSS.

Now, if you really want to properly prepare yourself for HTML5, don’t just go throwing the terms header, footer, section, etc. around. Force yourself to use these terms semantically, as if they were the actual HTML5 elements. First of all, this means using class instead of id where applicable. It also means adhering to the strict HTML5 guidelines in place for each element (outlined in the previous article). One example of this would be to only use a nav class on major navigational areas of a page and not for minor navigational links such as those found in a page footer.

5 Sites Using HTML5

Despite the fact that my official advice is that HTML5 won’t be ready for popular use for some time, I have to admire sites that are taking the initiative to usher in the future of web development by using HTML5 today. Here are five sites that do just that. Just click on a pic to view the site. Be sure to take a look at the code each developer used to get an idea of the structure of a few real world examples of HTML5. Also, if you’ve developed a site in HTML5, we want to see it! Leave a URL in the comments so we can check it out.

Conclusion

Well that concludes our four part series on HTML5. We’ve gone over the basics, how to use a select few new elements, major semantic changes, and how to implement HTML5 right now. I hope you’ve learned a ton and are now more excited and less apprehensive about the future of HTML. Your feedback is instrumental in what articles we choose to write so tell us what you thought of the series and what you’d like to see us go over in the future.

In the last article, we looked at a number of new elements introduced in HTML5 and how to implement them properly. In this article, we’ll again be discussing a set of new elements but this time we’ll be examining only those HTML5 elements that represent a significant semantic change to the way you structure your sites. This article will cover how to use each of these new elements in a way that will bring much needed relief to the div-itus that plagues the structure of so many sites today.

Semantics?

Before we get started, you should know that by semantics I’m simply referring to using HTML tags and elements the way they were intended to be used. Unlike programming languages, which have to compile to run, HTML requires no compiler (the browser attempts all the interpretation) and therefore gives you a vast amount of freedom to use a given element any way you want. However, if you’re a new web designer you’re probably discovering that many people are semantic fanatics, and perhaps rightfully so. Using tables where they don’t belong or throwing around <h1> tags every time you want to bold something might be convenient, but it makes for some incredibly messy and hard to read code. Therefore, we look to semantic, cross-browser, valid HTML practices to bring unity and consistency to sites all across the web. Many of the HTML5 elements we’ll be looking at will be easy enough to interpret simply by reading the name, but familiarizing yourself with the correct way to implement these elements is absolutely crucial if you want to create professional quality sites that function in a number of major browsers.

The Problem

Take a look at 100 different websites with nearly identical layouts and you will find 100 different structures and naming conventions in the underlying HTML. Even though any good web developer will name his/her <div>s in such a manner that they are easily understood, the vast possibilities can lead to confusion over the identification of relatively simple and uniform sections of code. For this reason, HTML5 gives us a number of elements that can be used to identify and target items that appear in almost every site on the web such as headers, footers and navigation menus. Furthermore, apart from inconsistent naming conventions, the current way of doing things can quickly lead to div structures that come with a lot of extra weight compared to simple, built-in HTML elements. To illustrate, let’s look at a simple structure you might find in HTML4.

<body>
	<div id="nav_bar"></div>
	<div id="main_header"></div>
	<div class="side_bar"></div>
	<div id="container">
		<div class="section">
			<div class="header"></div>
			<p>Some Text</p>
			<div class="footer"></div>
		</div>
		<div class="section">
			<div class="header"></div>
			<p>Some Text</p>
			<div class="footer"></div>
		</div>
	</div>
	<div id="main_footer"></div>
</body>

You can see how this relatively simple piece of code is overrun by divs, which can take a long time to sort though due to all of the necessary fluff. The CSS to work with this HTML would contain the following selectors:

#nav_bar {}
#main_header {}
.side_bar {}
#container {}
.section {}
#header {}
.section p {}
.footer {}
#main_footer

Though not as complicated as the HTML before it, this code isn’t as simple as it could be. Now let’s dive into how HTML5 helps us solve this problem.

The Solution

HTML5 allows us to take nearly all of the custom divs above and convert them to standard elements. Let’s look at the code necessary to accomplish the same thing in HTML5.

<body>
	<nav></nav>
	<header></header>
	<aside></aside>
	<div id="container">
		<section>
			<header></header>
			<p>Some Text</p>
			<footer></footer>
		</section>
		<section>
			<header></header>
			<p>Some Text</p>
			<footer></footer>
		</section>
	</div>
	<footer></footer>
</body>

And the corresponding CSS:

nav {}
header {}
aside {}
section {}
footer {}
section p {}
#container {}
#container header {}
#container footer {}

There’s a lot to discuss about these examples so let’s start with the HTML. Notice that the chronic div-itus has disappeared and in its place are universally understood and easy to interpret elements. This vastly improves the readability of the code. One of my pet peeves when reading through someone else’s code is tracking down the correctly corresponding <div> and </div> tags. This can take a ridiculous amount of time if there are eight or ten stranded and unlabeled closing div tags. Using standard elements goes a long way towards eliminating this problem because the closing tag is more informational (it’s easier to find </section> than it is to locate a random </div> that belongs to <div class=”section”>).

The CSS has been simplified as well. We can now just use identifiers without hash tags or periods in most cases because we are referring to natively supported elements instead of uniquely named divs. Notice that in our HTML this time around we were able to use the same tag for all header and footer elements (we tossed the “main” classification). This is because if we want to style headers within the container differently than the others we can just use “#container header” to target just the header elements within the container div (and we can be sure it will properly inherit the traits we want to keep). Now that we’ve gotten a glimpse of the new structural elements, let’s go over how to use each one individually.

The <header> Element

You might initially assume that the header element refers to the one principal header on the page. However, it’s really just a generic element that can be used several times throughout your code. Here’s an example:

<body>
	<div class="Tutslist">
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
	</div>
 
	<div class="Tutslist">
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
	</div>
</body>

Again we’ve replaced what would’ve normally been a bunch of divs with simpler header tags. It’s important to note that since we can have multiple header tags in a single HTML file, you shouldn’t think of the header element as a replacement for <div id=””></div>, which represents a unique div appearing only once, but rather for <div class=””></div>, which represents an element that appears multiple times. This is an important distinction for semantic reasons as well as CSS styling and applies to several of the elements we’ll discuss.

The <footer> Element

Most of the things I just explained about the header element also apply to the footer element, meaning it is generic and can be placed multiple times throughout your code. Obviously, footers generally (though not always) go at the end of a section of code and contain information that is secondary in nature such as the publish date, author, copyright information, etc. However, what goes into the footer is largely up to you. Here’s a quick example that builds on what we saw with the header element:

<body>
	<div class="Tutslist">
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>6 hours of free tutorials!</footer>
	</div>
 
	<div class="Tutslist">
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>4 hours of tutorials!</footer>
	</div>
</body>

The <section> Element

The section element is a generic way to separate portions of your site. For instance, say an event website is divided up into “what”, “when”, and “where.” You could use <section> tags to make this division in your code (again, think “class” not “id”). Using our previous example, we could replace the “Tutslist” class with section elements.

<body>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>6 hours of free tutorials!</footer>
	</section>
 
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>4 hours of tutorials!</footer>
	</section>
</body>

Notice that sections frequently begin with a header element and end with a footer element, though this is by no means a necessity.

The <article> Element

I briefly mentioned the article element in my last post, forgetting completely that I was saving it for this post. However, a commenter cleverly pointed out some bad information that we should straighten out. Despite the fact that w3schools states that the article element is strictly for external content, w3.org clearly states that its actual purpose is to identify a section of your site that is intended to be independently distributable. For example, a blog post like this one could stand on its own and is not dependent on the rest of the site’s content. Further, this post is something that we actually want other sites to discuss and link to. News stories, forum posts and tutorials are good examples of this type of content. Let’s apply this to our running example.

<body>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>
 
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of tutorials!</footer>
	</section> 
</body>

As you can see, this is really internal content that can be referenced externally, rather than vice versa like w3schools seems to suggest.

The <nav> Element

The nav element refers to sections of your HTML containing links for navigational purposes like that in a sidebar or strip of buttons along the top of a page. However, this does not apply to all groups of navigational links on your pages. Instead, reserve this element for the main sources of navigation on your site. w3.org gives the example of a series of links in a footer as a situation that would not merit a nav element. Again we’ll revise our example to include the new element.

<body>
	<nav>
		<a href="">Home</a>
		<a href="">About</a>
		<a href="">HTML5 Tuts</a>
		<a href="">CSS3 Tuts</a>
		<a href="">Contact</a>    
	</nav>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>
 
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of tutorials!</footer>
	</section> 
</body>

The <aside> Element

The last element we’ll discuss is aside. This element is reserved for content that is related to, but distinctly separate from the rest of the content on the page. The aside element can be used for pull quotes, advertisements, nav elements, sidebars, etc. For instance, let’s say we wanted to take our navigation from the last example and place it into a sidebar:

<body>
	<aside>
		<p>General Info</p>
		<nav>
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Contact</a>    
		</nav>
 
		<p>Tutorials</p>
		<nav>
			<a href="">HTML5 Tuts</a>
			<a href="">CSS3 Tuts</a>  
		</nav>
	</aside>
 
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>
 
	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of free tutorials!</footer>
	</section> 
</body>

Look Ma, No Divs!

The example above illustrates the exceptionally large amount of code that HTML5 allows us to execute using only standard elements! Every piece of this example is super easy to target in CSS, instantly understandable by any developer (at least any developer who is versed in HTML5), and incredibly concise compared to the amount of code this would require in HTML4. And there’s not a div in sight.

Conclusion

This article briefly described the concept and importance of semantic code and discussed the major semantic changes brought about by HTML5. We discovered how to properly use six incredibly helpful new HTML5 elements: header, footer, section, article, nav and aside. Finally, we learned how these new elements can be used to create neatly structured and easily readable code that avoids the excessive use of divs.

To prevent confusion (and to avoid a flurry of angry comments), I should make it clear that there is absolutely nothing wrong with divs. I personally use divs quite liberally throughout every site I create and find them to be among the most flexible and essential elements in HTML. However, the more you can replace uniquely named divs with universally named elements the more reliable and standards-accurate your code will become.

Looking Ahead: Three Down, One to Go!

The next article will be the final in our series on HTML5. As you probably know by this point, none of what I’ve showed you is ready to be integrated into websites for widespread public viewing. However, our next article will show you various tricks to start using HTML5 right away and discuss how you should be preparing your sites for the inevitable update!

A couple of days ago we posted an introduction to HTML5 and briefly covered some of the content we’ll be outlining in this series. Today’s post, which is the second in the series of four, will take a look at how to use six of the new elements in HTML5: canvas, article, audio, video, meter, and mark.

Keep in mind that HTML5 is not exactly ready for widespread use – so don’t go changing anything on your site quite yet. Be assured that HTML5 is in fact coming soon, therefore these concepts may prove useful in the near future.

The Canvas Element

The <canvas> element is a new container for graphics. Note that the canvas is merely that, an area where graphics can be placed. The <canvas> element should contain only two attributes: width and height. Here’s an example:

<html>
	<head>
		<script src="testscript.js" type="text/javascript">
	</head>
 
	<body onload="draw();">
		<canvas id="graphicsCanvas" width="600" height="600">
	</body>
</html>

The actual drawing for this example is done in JavaScript. The key to implementing the graphics in your script is to reference a context through the method getContext. For now the only context you can call is “2d”. Think of the 2d context as your actual drawing plane (defined by the HTML canvas size) beginning at coordinates 0,0 (the very top left of the screen). To draw an item, you first decide at what coordinates the item will begin. For example, if you want to draw something that’s ten pixels in from the left and ten pixels in from the top, your coordinates are (10,10).

There are a number of ways to use the 2d context to create graphics. Everything from simple rectangles to curves and gradients are supported. For our purposes, we’ll keep it simple just to get you started. Here’s the JavaScript, implementing the principles outlined above:

   function draw() {
      var canvas = document.getElementById("graphicsCanvas");
      if (canvas.getContext) {
        var context = canvas.getContext("2d");
 
        context.fillStyle = "rgb(50,50,50)";
        context.fillRect (20, 20, 150, 150);
        context.strokeRect (20, 20, 300, 300);
      }
    }

If you’re using a supported browser (Safari, Firefox, or Opera) you should see the following result when you combine the HTML and JavaScript we just looked at.

Again, before you do any drawing remember to implement the 2d context or you won’t see any graphics at all! Just in case you’re wondering what the heck this “fillRect” rubbish is about, here’s a quick explanation of the syntax for a few of the drawing methods.

Drawing Rectangles

First of all, you should know that when you see four numbers in the format (0,0,0,0), this represents (distance from the left, distance from the top, width, height). Now let’s look at a few specific syntax examples:
fillStyle = “rgb(50, 50, 50); Determines the color of the fill
fillRect (20, 20, 150, 150); Creates a simple filled rectangle
strokeRect (20, 20, 150, 150); Creates a stroked rectangle
clearRect (20, 20, 150, 150); Creates a transparent area (a hole)

Drawing Shapes

beginPath (); Starts a path
closePath (); Closes a path
moveTo (20, 20,); Lifts drawing pen and starts in a new location
fill (); Fills the drawn shape
stroke (20, 20); Strokes the drawn shape

Much More!

For much more information on how to draw with JavaScript and how to use the canvas element, check out Mozilla’s tutorial.
Also, here’s a handy Canvas Cheat Sheet from Jacob Seidelin.

The Article Element

The article element is simply a way to refer to a blog post, news article, etc. within your page. Here’s the syntax:

<article>
	<p><a href="http://articleLinkHere>
	 Article Title Here
 
	 Article </p>
</article>

As you can imagine, this will make it super easy to target and style articles in your CSS without defining a class.

The Audio and Video Elements

Like the article element, these are simply containers that hold content. Again you can see the benefit immediately when you start to style these with CSS without the need of any custom classes. Here’s the simple syntax for each (any text placed between the brackets only shows up in unsupported browsers):

<video src="http://videoSourceHere">Unsupported browser!></video>
 
<audio src="sample.mp3">Unsupported browser!</audio>

Audio Attributes

Both the audio and video elements contain important attributes that you should know. First let’s look at those for the audio element (source: w3shcools).

autoplay (true or false)
If true, then the audio will start playing as soon as it is ready

controls (true or false)
If true, the user is shown some controls, such as a play button.

start (numeric value)
Defines where in the audio stream the player should start playing.
As default, the audio starts playing at the beginning.

end (numeric value)
Defines where in the audio stream the player should stop playing.
As default, the audio is played to the end.

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

loopend (numeric value)
Defines where in the audio stream the loop should stop,
 before jumping to the start of the loop. Default is the end
attribute's values.

loopstart (numeric value)
Defines where in the audio stream the loop should start.
Default is the start attribute's values

playcount (numeric value)
Defines how many times the audio clip should be played.
Default is 1.

poster (url)
The URL of an image to show before the video is ready

src (url)
The URL of the audio to play

Video Attributes

The video element contains all the same attributes as the audio element as well as 3 more (source: w3shcools).

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

poster (url)
The URL of an image to show before the video is ready

The Meter Element

The meter element can be used to contain measurements of any kind (percentage, score, day counter, etc.). This time, before we look at an example, let’s go straight into the attributes (again, straight from w3shcools).

high (number)
Defines at which point the measurement's value is consider a high value

low (number)
Defines at which point the measurement's value is consider a low value

max (number)
Defines the maximum value. Default value is 1

min (number)
Defines the minimum value. Default value is 0

optimum (number)
Defines what measurement's value is the best value.
If this value is higher then the "high" attribute's value,
it means that the higher value the better. If this value is
lower than the "low" attribute's value, it means that the
lower value the better.

value (number)
Defines the measurement's value

The two specially important attributes in this set are max and min. The meter element can only be used when the measurement has a known maximum and minimum value. That doesn’t necessarily mean you have to define a max and a min (you could use the default), just that you have to be aware of what they are. Here’s an example:

You found 25 out of 50 or 50% of the hidden words!

Notice that for the first meter element required specification of the min and max because the range was between 0 and 50. However, the second meter used the default range of 1-100 because percentages usually fall in this range.

The Mark Element

The final element we’ll take a look at is <mark>. Simple in concept, the mark element can be used to highlight a specific section of text to make it more noticeable to the reader. Here’s an example:

<p>A good highlighter is hard to find.</p>

Now we can use the mark tag to easily target the section we want to highlight in our CSS:

mark {
	background-color: yellow;
	font-weight: bold;
}

The result is nice, highlighted text that you can spot in an instant.

Conclusion

In summary, we covered six brand new elements from HTML5. First we looked at the canvas element, which is a container for a wide variety of graphical items that you can create using a number of JavaScript functions. Then we learned about the article element, which represents a new way to refer to external content. Next we outlined how to use the audio and video tags along with their various attributes as well as how to properly tag values falling within a specified range using the meter element. Finally, we discovered how to highlight a specific portion of text using the mark element.

I hope you’ve learned as much reading this as I did writing it! Use the comments below to ask any questions you might have or share your own bit of HTML5 knowledge. The next article in this series is perhaps the most important because we’ll be looking at a few more new elements that represent some serious semantic changes in the structure of HTML files. So check back soon to see how you’ll be laying out your HTML for years to come!

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

APIs

Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:

As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

New Elements in HTML5

HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):

Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.

Semantic Changes

This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>

Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.

Getting HTML5 Working Today

Don’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 right away. In article four, we’ll take a look at how you can start your HTML5 journey sooner rather than later.

Conclusion

This article briefly introduced the new elements and APIs included in HTML5. We talked about how you should be excited for the changes HTML5 will bring to the web apps of tomorrow. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today. Check back here frequently in the next week for an in-depth look into each of these topics!

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

Why use web standards?

It is undoubtedly the case that designing with standards in mind takes extra time and expertise, but there are several arguments to support it all being worth the effort. Here are five solid reasons to justify the need for standards.

1. Make your job easier

Trying to pick your way through a mess of poorly written code is no fun – planning ahead and using well written, standards based code will save you masses of time in the long run. Writing semantic code (using the right tags for the right job) will also mean that updating your site in the future is a breeze. This is especially important if you are creating a site and passing it on to someone else to manage and update – they need to be able to understand how you’ve crafted the site.

2. Increase your audience

There’s no point having a website if no-one visits it. Designing with standards improves accessibility, and makes it easier for people with disabilities (for example, using a braille interpreter) to navigate through your site. Often your website will also look much better for people using older computers and web browsers – not everyone has the cutting edge computer you have.

3. Improve your search engine ranking

Getting your website listed well in search engines is the holy grail, and something companies spend millions of dollars on. One of the best methods to succeed in this arena is through a well-structured semantic website. This means using heading (<h1>) tags where appropriate and generally structuring your code consistently.

4. Stay professional

As the popularity of standards based coding increases and more web developers start to take it on board, it’s vital that you stay ahead of the curve and keep up with current trends. In order to attract clients as a web designer it’s a service you’ll need to offer. You can market standards as a way to improve search engine ranking and reach more customers.

5. Why not?

Coding with standards has so many advantages, and the only down-side is that it takes a little longer than using an ad-hoc, slap it all together method. The only major changes you need to make involve coding semantically, and passing your site through a CSS and XHTML validator before handing it back to the client. Not a huge set back! For more help and information, read our tutorials on web standards.