BlogmyQuery – BMQ

For years you have been searching for it. You hear the question being asked in your dreams as you go on an Indiana-Jones-type-crusade to find the answer. When the answer comes to you, you know that the confetti will fall from the ceiling and the band will start playing your favorite song. You might even get a kiss from that special someone. So what is this question?

What is the secret to Web design?

A tough question and one that might not have an answer. In 2006, Oliver Reichenstein wrote Web Design is 95% Typography. Some people loved it, others were not so amused. If Web design was based that much on typography, then what was the point of learning anything else? All you needed to do is understand the elements of typography and you were good to go.

Of course typography doesn’t mean font selection. With the advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts, your skills in typography won’t improve. You can easily create wonderful designs with one font for the rest of your life if you choose to—they had to do it centuries ago and they didn’t have Photoshop sticking things to guides for them. If anything, more font selection will make things worse for you because creativity and beauty become hard to achieves when more options are given to us.

More toys means more fun though, right? If you want to go that route, then by all means go for it. I love to look at the different fonts being used and admire anyone that can successfully pull off using newer fonts for the Web. However, I’ve seen too many times what can happen when development options are given to the masses, and it isn’t pretty (re: Myspace). Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.

I’m not being sarcastic, saying that is all you need to know for a majority of websites. Try going through all of the Web designs that you love, strip out the images and ask yourself “how would that website look with just text and spacing?”. When designers say “text is the interface”, they really do mean it. The iA site is a great example of that.

Information Architects is based around strong typography.

One of my all time favorite designs is A Working Library. The site is a showcase of text being the interface. The spacing is just right and the typography is on point.

A Working Library by Mandy Brown.

Some people find design like this to be dull and boring, they feel that design should have more pop to it. At the end of the day some extra visual flair might be what separates your design from the rest, but you need to get the first 95% down. The website that you are reading this article on now has done a wonderful job of presenting a visual design that isn’t reliant on images to be beautiful.

Well That Isn’t Hard

It’s possible to create a wonderful design without the use of images at all. I know that sounds crazy, but it is possible. I’m not saying it should be done, but if we can create elegance simply with typography and white space, then why shouldn’t we be able to create greatness when we start throwing in images, videos and other effects?

With the use of images I’m not talking about images that are needed to represent something such as icons, but images that are there for flare. Sometimes a picture is worth at least ten better words than any word you could use, so it’s better to go with an image (but you still need to consider using white space with it).

Here are two more examples of beautiful websites that place a heavy emphasis on typography to control the design. The first is Blake Allen Design and the second is The Harriet Series (both use images to represent their typography, but you get the point).

Blake Allen Design uses images, but with great typography.

The Harriet Series by OkayType.

What makes the two designs above so interesting to me is that the typography not only guides you along a journey, but it does so with personality. You almost feel as if the typography is an expression of the person that designed it. Blake Allen uses Helvetica which gives the website a Swiss, clean and structured personality. On the opposite side of the spectrum, the Harriet Series website is a bit more playful and experimental—there is beauty in the organized chaos that the typography creates.

For 99% of the designs out there, typography and white space are going to be your underlying foundation. So if you can’t get them right, then the rest of your design has nothing to stand on. Stop worrying about the pop of your design and first worry about how it will stand tall. Once you get that down then you can begin to dress it up.

Clear is a very simple to do list application for iOS devices. While the majority of the excitement around it are the gestures used to control the interface, you will notice that the typography does enough to get out of the way and allow you to enjoy the application. Sure it is nothing more than Helvetica, but what if it was Comic Sans and had bad spacing all around? Great typography doesn’t have to stand out in a good way, but that doesn’t mean it should do enough harm when it stands out in a negative way, either.

Typography In Other Disciplines

Art of the Menu is a great website on menu design.

The Art of the Menu does a great job of showing the importance of typography in menu design. While a lot of restaurants like to add images and illustrations to their menus to give them a bit more pizzaz, they fail in providing a decent typographical structure that allows you to easily browse through the menu.

If you are a designer you have no excuse to say you can’t come up with a decent design. When you create a design that lacks a strong foundation, anything else you add to it is just going to make it worse. Too many designers attempt to save their designs with fluff without understanding they are pouring gasoline onto the fire. If a design is not enjoyable to read then it is not an enjoyable experience, no matter how many images, colors or sounds you decide to add to it.

Looking to understand typography a little bit better? Not too long ago Smashing Magazine did a comprehensive overview of some wonderful typography tools and resources.

(jvb)

© Paul Scrivens for Smashing Magazine, 2012.

As consumers, there are a lot of different products that companies want us to purchase or get into. When you’re in a position to make one choice amongst many products, there is a need for it to stick out; you need to be swayed. Companies do this through things like features and pricing; is it what you need? or is it in your budget? Many times, all the features and prices can be relatively similar, so what do people turn to? The design.

Design is important not just because it can make what you’re selling look better, but often times because it gives us a sneak peek into what’s in store. The purchase of an album or a movie ticket is no different. If you’re looking for a good movie or album, you’re often taking a look at the related artwork.

Though an unfortunate truth about movie and television artwork, as well as album artwork, is sometimes it can be a bit over done. Most times, it’s your first impression, so typically production companies want to cram in as much as possible–or either they’re completely off. Either way, after you listen or you watch you have an idea of what you just consumed; it’s either the same or very different.

The Artwork

What would happen if you just stripped down movie posters and album artwork to what it really is or could be? What if one decided to pick one thing to single out and used that as the artwork? Well, fortunately we don’t have to ask as many designers have done so. Below are some of our favorite minimalist movie posters and album artwork; some are clever, and some are just the essentials.

For added fun, as you scroll, stop at the title of the work and try to imagine what you would use as the design then scroll to the picture and see what you get. It’s very fun to see how people strip down different things.

True Blood by Albert Exergian

Batman by RCrosby93

The Simpsons by Albert Exergian

The Help by Nelos

Radiohead’s “The Bends” by Danix54

Sex and the City by Albert Exergian

Slumdog Millionaire by ThreeProngs

Superman by Haden Yale

Roger Water’s “Amused to Death” by Abrickinthewall

Titanic by Pedro Vidotto

Teenage Mutant Ninja Turtles by Ahrima13

Alice in Wonderland by Rowan Stocks-Moore

The Avengers by William Henry

From Dusk Till Dawn by Grilherme Grecu

Fight Club by Pedro Vidotto

Juno by Theckboom

Forrest Gump by Pedro Vidotto

Hangover by Cameron X. Coleman

Home Alone by Backstothewall

Jay-Z’s “Blueprint 3″ by Minimal Album Artwork

Kill Bill Vol. 1 by Ibraheem Youssef

Captain America by Marko Manev

Pulp Fiction by by Ibraheem Youssef

The Shawshank Redemption by Nick Tassone

Shutter Island by Kenzo Giunto

The Social Network by Kairon Sarri

Coldplay’s “Fix You (Single)” by Ty Lattau

REM’s “In Time: The Best of R.E.M., 1988-2003″ by Mr. Brocklehurst

Pink Floyd’s “Dark Side of the Moon” by Ty Lattau

The Beatles’ “Abbey Road” by Abrickinthewall

Nirvana’s “Nevermind” by Ty Lattau

AC/DC’s “Back in Black” by Ty Lattau

System of a Down’s “Mesmerize” by Chris Siegle

Wall-E by Tom Cross

Wolverine by Marko Manev

Your Turn

Did you play along when scrolling? Pick three titles from above and let us know what you would have designed in our comments. Everyone has different ideas, so share yours!

(rb)

This is our sixth article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and in the fifth we’ve announced Erskine’s responsive grid generator Gridpak.

What Is A JS Bin?

JS Bin was one of the very first public paste bins with the output rendered live in your browser and available to share and edit with the completed output. Released back in 2008, JS Bin is now on its third iteration and after a long and thorough development finally includes some of the original features I wanted to build JS Bin with. It’s completely free to use all its features and open source, and it’s available on Github.

JS Bin, a collaborative JavaScript debugging tool with advanced features.

Essentially, JS Bin exists for two main reasons: a) creating test and debug cases, and collaboratively debugging those cases, and b) to teach and learn from. JS Bin is a collaborative JavaScript debugging tool. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

What’s New?

In both current and previous versions, the UX has been a big part of the update. Danny Hope volunteered his UX experience to this open source project and collaborated very closely with me, allowing us to instantly try out UX ideas, see them in action and decide whether they worked or not.

Again in the spirit of open source collaboration, the project needed to be upgraded from entirely PHP (and not great PHP code!) to Node.js. Aron Carroll worked for the last few months in his spare time converting the existing JS Bin logic entirely to JavaScript. So as of today, JS Bin is 100% JavaScript.

This move to Node allows us to introduce two new useful features:

1. CodeCasting
2. Live remote rendering

Both techniques use EventSource and a little technique that I call The Spike.

The key difference between the old and the new JS Bin is that as you type – JS Bin is saving. Means, as soon as your first key stroke lands, you’ve got your own URL. You keep typing, it keeps saving. If you want to stop saving against that version, just create a milestone and live saving will be applied to the new revision.

CodeCasting

Say you’re running a demonstration or a workshop, and you want all the participants attending to see the code being updated and to see the output of the JavaScript, CSS and HTML, in real-time as you type. With the new JS Bin, you don’t have to be on the same connection, just visit the same URL. Instead of ending the URL with /edit, add /watch and they become voyeurs to your live coding. I’d love to see this live at a conference.

Live remote rendering

Ever wanted to check the output on multiple platforms: Firefox, Chrome, IE, iPads, Androids, Windows Phone, even a Boot 2 Gecko phone? Maybe all at a once? Maybe without ever hitting refresh?

JS Bin can do this. Simply point the device or browser to your full preview URL (basically removing /edit from the URL) and any changes you make as you type will cause the target device to refresh its content.

The URL structure even has a shortcut, if you’re registered, you can always point the URL to http://jsbin.com//last and it’ll pull up the last bin you’ve worked on. Along with live remote rendering, I’ve been working with the Adobe Shadow team and they’ve gone ahead and built compatibility with JS Bin directly in to Shadow.

How the live stuff works

Now, that’s an interesting question! And it has a quite simple answer. A while back I tried out a comet PHP based version of CodeCasting which was way, way more complicated. It worked, but releasing wasn’t possible as my server couldn’t take more than just a few concurrent sessions. The move to Node years later fixes that.

As you type, the tool sends an Ajax save request (after an idle time of 200ms). On the server side, this triggers an event which says “the bin with this url has just changed�. Now, when viewing the CodeCasting URL or the live remote rendering, each user is connected to the Spike application. It listens for the event that says that a bin has changed, and when that happens, it just finds all the users watching a particular URL and sends them the updated panel (so we only send the CSS panel if the CSS panel changed).

An EventSource maintains a persistent connection with the server and is listening for those events in the browser. When the event is received, depending on the content type, it’ll either inject the content live, or refresh the page providing users with the latest version of the code.

Other Important Features

There’s a whole lot more to the new release of JS Bin, and I intend to release screencasts on these features on the @js_bin on Twitter.

Some of these features were always part of JS Bin, but hidden inside of the “beta” access – which required a clunkly console command. Now JS Bin 3 adds the much needed UI to do simple things like login to remember your history of bins.

• Login to remember your history
• Your full history on a single page with live previews on hover
• An API to control default settings (useful if you’re preparing a teaching session)
• Processors, so you can use Markdown, CoffeeScript and LESS, amongst others
• CSS panel
• Console panel
• Support for more libraries (including Bootstrap, Backbone, etc)
• Native support in Adobe Shadow (you can point your browser to JS Bin and Adobe Shadow will render the live output automatically)
• “Edit from your editor and render remotely” feature. You’ll have to see it to believe it (idea and code by @wookiehangover)
• Our badass robot mascot: Dave, the JS Bin Bot (stickers will be made!)

Dave, the JS Bin Bot mascot, created by @yoheis (of PhoneGap fame).

Also, I’d like to add GitHub support, export your history, hosting of static assets and further features to the upcoming versions of JS Bin in the nearest future.

Hack, Play, Share & Get Involved

I’m really excited to share this updated version of JS Bin. Watch out for the twitter account @js_bin because it will be posting tips and screencasts, and do send your feedback with issues, ideas or just to tell us where you’re using JS Bin!

© Remy Sharp for Smashing Magazine, 2012.

One of the visual effects that is a mainstay in my Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background. Think of what a home appliance marquee or a professional business card looks (and feels) like, and you’ll know what I’m talking about.

I’ve developed a simple workflow for creating a letterpress text effect in Adobe Fireworks that, with the advent of CSS3, can be applied directly to HTML text — no images needed. Here’s the best part: it doesn’t use any Bevel or Emboss Live Filters.

What Is Letterpress?

Letterpress is a venerable technique of printing that involves “pressing� a plate of movable type onto a sheet of paper to produce an effect that is impressed (where the text is pressed down onto the paper) or embossed (where the text is raised above the surface of the paper).

An example of a letterpress business card with impressed text. (Image: Audimas Adomavicious)

The classic charm of letterpress found its place in digital design once designers were able to emulate its effect on screen. To accomplish that, designers observed the effect of light and shadow on the dents on paper that had gone through the printing process. Imagine a light shining down at an angle on a sheet of letterpress text. Impressed text will appear to have a sliver of highlighting at the bottom edge of the letters and a thin shadow at the top edge. Embossed text is just the opposite: highlights on top, shadows on the bottom. These properties create the effect of raised or sunken areas along the surface, and this can be translated using effects made possible by both Fireworks and the CSS3 specification.

Why Not Just Use Bevel or Emboss?

Fireworks’ Bevel and Emboss Live Filters are a bit primitive for my tastes. The refinement controls are unwieldy — for example, you can’t set highlights and shadows independently — and the result is subpar. It works OK for straight edges and sharp corners, but it gets rough around curves. I suspect this is because the effect is raster-based, so that it can work with any object (shape, text or embedded image); a vector-based tool would have allowed for a smoother and more precise effect.

The letterpress effect using the Outer Bevel Live Filter. Notice the roughness of the curved edges.

Letterpress Text In Fireworks

A better way to recreate the effect would be to use the Drop Shadow Live Filter, because it produces smoother edges. This solution hinges on a basic setting: a shadow and a highlight, offset exactly 1 pixel up or down, relative to the text object. For this tutorial, we’ll start with two text objects of different colors, set against a colored background.

Start with two text objects.

Embossed Text

To create an embossed effect, apply two Drop Shadow Live Filters to our first text object:

• Apply a “Shadowâ€� (distance: 1; color: #000000; opacity: 60%; blur: 0; angle: 270;) to the bottom of the text, and
• Apply a “Highlightâ€� (distance: 1; color: #FFFFFF; opacity: 90%; blur: 0; angle: 90;) to the top of the text.

Embossed effect applied to the “Smashing� text object.

The opacity of the Drop Shadow filters will depend on how light or dark the background is in relation to the text’s color. Tweak these values according to how pronounced you want the letterpress effect to be.

Adjust the opacity value in the Drop Shadow Live Filter.

Impressed Text

To create an impressed effect for the second text object, just switch the angle values of the “Shadow� and “Highlight� Drop Shadow filters shown in the previous step, so that the shadow is on top of the text and the highlight is on the bottom. Adjust the opacity values to maintain contrast against the darker text object’s color.

Impressed effect applied to the “Magazine� text object.

Note: These effects work best with text and background color combinations that aren’t black and white, as in our example. If you’re working with black text or black backgrounds, you’ll want to skip the “Shadow� effect, because it will do little for the text. Similarly, for white text or white backgrounds, forego the “Highlight� effect.

Save as Style for Reuse

Now that our letterpress effects are in place, we can save them as Fireworks Styles so that we can use them again later without having to apply each filter manually.

To create a Fireworks Style:

1. Select the “Smashing� text object with the Pointer tool (V);
2. Bring up the Styles panel (Control/Command + F11, or in the menu Window → Styles);
3. Click on the context-menu icon in the top-right corner of the panel, and click on “New Style�;
4. In the “New Style� dialog box, let’s give our style a descriptive name, like “Letterpress Emboss.� Uncheck all properties except for “Effect,� and click OK.
5. Repeat steps 1 to 4 for the “Magazine� text object.

Styles panel and context menu

“New Style� dialog box

You should now see two new items in your Styles panel. The next time you want to apply the emboss or impress effect to a text object, just select that object, and click on the new style that you created.

Styles panel with two new styles

Additionally, you can save these new styles as a Style Library file (*.stl), to share with other designers or to back up your styles before reinstalling Fireworks.

To save a set of styles as a Style Library file:

1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
2. Click on the context-menu icon in the top-right corner of the panel, and click “Save Style Library�;
3. In the “Save As� dialog box, enter a descriptive file name for the STL file, and then click “Save.�

The Styles panel, again.

“Save As� dialog box

To import a previously saved Style Library:

1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
2. Click on the context-menu icon in the top-right corner of the panel, and click “Import Style Library�;
3. In the “Open� dialog box, browse to and select the STL file, and then click “Open.�

Hint: Need a good library of Letterpress Styles for Adobe Fireworks? Why not check this 16 Letterpress Styles set by Mikko Vartio?

Translating Into CSS

Option 1: Translate the Values of the Live Filters Manually

Aside from the downsides of the Bevel and Emboss filters that I mentioned earlier, the other reason I use Drop Shadow filters is that they readily translate into CSS3’s text-shadow property. Consider this basic syntax:

text-shadow: [x-offset] [y-offset] [blur] [color-alpha];

Let’s break this down:

• [x-offset] is set to 0, and [y-offset] is either 1px or -1px, depending on whether the shadow or highlight is at the top (90°) or bottom (270°);
• [blur] is set to 0, to keep the shadow and highlight effects crisp;
• [color-alpha] is set using an RGBa value: rgba(r, g, b, a).
  • The first three values (r, g and b) correspond to the decimal red-green-blue values of the color itself (for example, #FFFFFF in hexadecimal is equal to 255, 255, 255 in decimal);
  • The last value (a) determines the transparency of the color (where 0 is completely transparent, 0.5 is half-transparent, and 1 is completely opaque).

Let’s apply our effects to the following HTML markup:

<div class="embossed">Smashing</div>
<div class="impressed">Magazine</div>

Our CSS for the embossed effect would be:

div.embossed {
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 -1px 0 rgba(255, 255, 255, 1.0); /* highlight */ }

And for the impressed effect:

div.impressed {
   text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 1px 0 rgba(255, 255, 255, 0.5); /* highlight */ }

Here, I have slightly adjusted the opacity values in the text-shadow property (relative to the original values in the Drop Shadow Live Filter in Fireworks) to better suit the way fonts are rendered in the browser.

Screenshot of the HTML and CSS output in Mozilla Firefox. See an HTML sample.

Screenshot of the HTML and CSS output in Apple Safari. See an HTML sample.

Option 2: Use the CSS Properties Panel in Fireworks CS6

Writing CSS code by hand is what we Web professionals usually do. But in some cases, tools can help us, too.

Fireworks CS6 (which was recently released) has a new feature that could help you when you want to quickly (yet reliably) translate the properties of a visual element in the design to CSS3 code. The CSS Properties panel can extract CSS3 code for virtually any object selected on the canvas, including text objects and live filters.

Let’s see how this could help us in practice when working with the letterpress effect!

If you have a copy of Fireworks CS6 (a trial version would do, too), open the letterpress-effect.fw.png file provided with this tutorial (see the Downloads section further below), and then with the Selection tool, select the first text object.

Open the letterpress-effect.fw.png file, and select the first text object.

Next, open the CSS Properties panel (in the menu, Window → CSS Properties, or Control/Command + F7), and while the first text object is selected, notice how the CSS panel instantly shows the object’s properties.

The CSS Properties panel shows the properties of the selected text object as CSS code. Highlighted here is the code that translates the two Live Filters into CSS.

In this case, we’re interested only in the Live Filters applied to the text object, so let’s copy this bit of code from the CSS panel and see how it looks:

text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.9);

As you see, we’ve got results similar to what we achieved earlier with the manual method. Fireworks CS6 has automatically translated the Live Filters that were applied to the “embossed� text object into clean and valid CSS!

Similarly, you can extract and copy the CSS for the Live Filters applied to the “impressed� text effect.

And if you strive for perfection (as many of us do), along with the CSS Properties panel, you can use CSS Professionalzr, an excellent free extension by Matt Stow that can further optimize the code produced by the CSS Properties panel.

Of course, even if you’ve already switched to Fireworks CS6, you can always opt to translate the properties of Live Filters to CSS code manually. But when you’re dealing with a lot of objects, the CSS Properties panel comes in really handy and can save you precious time.

Tips on Using the Letterpress Effect

• Use the effects sparingly.
  Text effects are the last thing you want to abuse, because they could impair readability, especially for people with vision problems. Restrict them to headings and interactive items (such as buttons and menu links).
• Enable them to degrade gracefully.
  While most modern browsers already support CSS3 to some extent (see the note below), Internet Explorer 9 still doesn’t recognize the text-shadow property. In an effort to make things look consistent, you might want to look for a workaround, but I highly recommend that you gracefully degrade the effect in browsers that don’t support the property. Effects should be enhancements, not vital features.

Please note: Browsers that fully support the text-shadow property (with multiple shadows) include Firefox 3.5+, Chrome 4+, Safari 4+ and Opera 9.5. As of version 9, Internet Explorer still does not support the official text-shadow definition; instead, it has a proprietary filter that achieves a similar effect.

Examples

Here are a few real-world examples of the letterpress effect in action.

Veerle’s Blog
The letterpress effect — applied to the (image-rendered) logotype and headings — creates a bit of contrast against the background here, while still keeping everything subtle. Notice the use of both embossed and impressed effects in the column headings.

Stunning CSS3 (teaser page)
Coupled with @font-face declarations for custom HTML fonts, the letterpress effect on the different heading levels makes for a sophisticated look, previously feasible only with image-based text. (Note that the teaser page we’ve linked to here is an archived version.)

Janko at Warp Speed
The use of only one text-shadow effect, and only on the headings, exemplifies Janko’s restraint in order to maintain contrast and readability. Also notice the 45° offset in the highlight effect, which you can achieve in CSS by adding a 1-pixel x-offset to the text-shadow.

Downloads

• Need a sample to study? Download the archive for this tutorial (ZIP, 84.5 KB), which includes the Fireworks PNG (created in Adobe Fireworks CS5) and the HTML sample.
• The Fireworks PNG uses the awesome (and free) Ultra font.
• You can also download the Style Library separately (ZIP, 22.3 KB), created in Adobe Fireworks CS5.

The samples (i.e. the Fireworks PNG and Style Library) should work fine in any recent version of Fireworks (CS4, CS5, CS5.1, CS6).

(al) (mb)

© Jose Olarte for Smashing Magazine, 2012.

With the growing number of HTML5 tutorials available to help designers and developers get a better handle on this language, it can get a bit tricky sorting through them to find what you are truly looking for. And as the capabilities of this language expand, it is important to keep up with the many ways to harness the full power of HTML5. Today, we hope to help you on that journey.

Below is a collection of handy HTML5 tutorials and resources that will teach you the basic ins and outs of the language, along with many, much more specific techniques. Take a look down through them and start boning up on HTML5!

Learn the Basics

What is HTML5? Infographic covers what it is, and why it’s useful. It also goes into where it’s supported. While not technically a tutorial, this is still a helpful resource to keep on hand.

HTML5 Tutorial.com is a great place for beginners to get their feet wet. The site is set up for those who have little to no knowledge of the language, and promises to get them ready to write and edit a site by hand.

HTML5 for Web Developers is an awesome work in progress, that is written with web developers in mind (cutting out the unnecessary vendor specific bits of the spec). Comprehensive and growing, this HTML5 specification is fantastic for beginners or those looking to refresh.

HTML5 Doctor is a site that anyone looking to sharpen their skills should know about. Their article archive alone is like an entire course on HTML5 and worth your while to take a look through.

HTML5 Pocket Book is just that. A short and sweet intro into the language. This printable fold-up pocket guide is a good cheat sheet of sorts for beginners to keep handy.

Getting Specific

Toying With the HTML5 File System API is a tutorial that explores this new element of HTML5, and the basics of this new API. Going over the most common file system tasks.

Have A Field Day With HTML5 Forms seeks to make you share the author’s love of using HTML5 to create much needed web forms. With the aid of some CSS techniques, you will have a fully styled and ready to use form in your arsenal.

Cross-Browser HTML5 Placeholder Text is a tutorial that will allow you to use HTML5 to fill any unfocused sections of your forms to have placeholder text. For browsers where this is not supported yet, there is a jQuery fallback in place.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 is a solid tutorial that will teach you the basics of this sort of build. While it is built using HTML5 and CSS3, it takes older browsers and their lack of support into consideration.

How To Build A Real-Time Commenting System is a nifty tutorial that will take you through using HTML5 to craft a commenting system that works with users in real-time, adding that fluidity and freshness to your site.

Design & Code a Cool iPhone App Website in HTML5 is not just for someone looking to promote an app, though that is where it is aimed. The tutorial will take the user through constructing a promotional site using HTML5 and a bit of style in CSS3.

How HTML5 Aids Mobile Financial App Development explains many of the new tags that are available in the language for building financial based applications.

HTML5 localStorage is divided into four parts and seeks to break down and fully explain the specifics of this aspect of the language. For those who do not know much about HTML5 localStorage, or those looking to know more, this is a great place to turn.

Add HTML5 video to your site will give you the tools to embed vids into your pages without having to rely on plugins or anything but your code. Again, there are fallbacks in place with this system for older browsers (flash based).

Touch The Future: Create An Elegant Website With HTML5 And CSS3 offers readers a brief overview of both languages before diving into a well structured tutorial that will have you building your own site by the end.

A Non-Responsive Approach to Building Cross-Device Webapps is a well thought out approach to serving up device specific builds, without simply using media queries to accomplish a purely aesthetic rearrangement of web elements.

HTML5 File Uploads with jQuery is a useful tutorial that uses the new HTML5 API’s to facilitate a jQuery based ‘upload center’ with drag and drop capabilities.

Create Vector Masks using the HTML5 Canvas teaches users to use the handy canvas tag in HTML5 with a bit of clipping to help shape more stylish images for your site.

Build your own HTML5 3D engine once again uses HTML5′s canvas tag, though this time with a little bit of Javascript to fashion a 3D rendering engine.

HTML5 Grayscale Image Hover offers users the means to dynamically clone colors within an image to turn it into grayscale, without an image editor. Instead, once again, HTML5′s canvas tag plays along with jQuery to make this happen.

“Mobifying” Your HTML5 Site is a tutorial that is dedicated to keeping your website mobile ready, and using HTML5 to get you there. With the focus on mobile ready these days, this tutorial might just hold the solutions you have been looking for.

Build your First Game with HTML5 calls on the power of Box2D and the ever-awesome canvas tag in HTML5 to craft a playable app.

Making a Beautiful HTML5 Portfolio uses both the Quicksand plugin, and the power of jQuery to build this stylish HTML5 based site to display your works.

All For Now

That is all on this end, folks, but that doesn’t mean the road ends here. We know there are more tutorials out there, and some thoughts that you may have on the ones we have shared. So take a moment and leave us a comment telling or directing us to the tutorials that really stand out to you.

(rb)