Web Standardistas - HTML and CSS Web Standards Solutions

March 2009 Archives

Convertbot

Convertbot [Detail]

Courtesy of the fantastically talented Tapbots, Convertbot is a “unit conversion robot” for quickly and elegantly converting currency, length, mass, time - and much, much more - all wrapped up in a beautifully crafted work of iPhone App goodness.

Follow these steps:

  1. Watch the Convertbot Demo Video
  2. Download from the iTunes App Store

Simple.

1238539080 · Christopher Murphy · Follow Us on Twitter

Fubiz™

Oopz...

Established in 2005, Fubiz™, is a perfect stopover for a daily dose of design inspiration. The Fubiz™ Mosaic offers a visual overview of inspiration across a range of design disciplines guaranteed to kick start creativity.

(Their 404 page is lovely too.)

1238357400 · Christopher Murphy · Follow Us on Twitter

A Dozen Questions for Mr Stokes

Front End Developer and Other Crap

Noah Stokes is a talented designer and developer, based in the San Francisco Bay Area.

Stokes attained internet notoriety when he launched www.noahstokes.com, a carefully crafted portfolio web site which perfectly captured the zeitgeist of the interwebz. Quickly picked up by the Twitterati the site rapidly went viral, cementing Stokes position as a designer worth watching.

Stokes isn’t a one trick pony, however, his other works, Dialed Tone (currently in the pipeline), Jeremy Cowart’s Blog and The Sold Project, demonstrate an admirable level of attention to detail and the craft of design.

Stokes states: “Contrary to what my portfolio says, my rates are far from $15 per hour. If anyone can get me backstage tickets for the U2 tour, however, I’ll make an exception.”

We asked Mr Stokes a dozen questions.

DialedTone

Where did you learn your craft? Where did you pick up your mad skillz?

I learned web development from viewing others’ source, web developers’ blogs (people actually used to blog about what they were learning back when CSS was becoming more and more widespread) and of course, Google.

Then it was just a bunch of trial and error. I’ve been doing it for nearly five years and I’m still learning something new every day.

Who inspires you?

Harold Emsheimer, Derek Nelson, Joshua Blankenship, Chuck Anderson, Si Scott, Garrett Murray, Ryan Sims, Team Airbag, Mark Jardine and Paul Haddad of Tapbots.

What are your influences?

God; smart, efficient design and functionality; and good music played really loud. 

I also do Twitter backgrounds.

How important is language as a design element?

I’d say it’s clutch. I think that a design should emphasize the content, a good IA will create design that draws the eyes to that important language and engage the viewer and hopefully call them to action.

What were the inspirations and influences for www.noahstokes.com?

Design portfolios are a dime a dozen. All of them can be brilliant, but you’ll end up forgetting about them. I thought: Why not do anti-design? I wrote the content as I was coding it, more as placeholder text, then I was reminded of the <marquee> tag and it was all downhill from there. It took me about 15 minutes to make it and about two hours, from the point I Twittered it, for it to reach critical mass.

<blink> vs <marquee>?

<marquee>.  <blink> doesn’t work in Safari.

1609

Is Twitter important?

Twitter is such a massive hive of what’s current right now.  I think it’s extremely important as far as information gathering and tracking goes. I really think the possibilities with Twitter are only just beginning to be explored.

In the context of my portfolio, it seemed to be stuck in a Twitter loop for several days. Where someone with a large number of follwers would re-tweet it and its traffic would spike, then an hour later the same thing would happen all over again. It’s really fascinating to see it make its rounds.

Is there a danger of being typecast as the ‘Kaa-Chow’ guy?

I’ll leave that for Lightning McQueen. With a little bit of AJAX, and an insane amount of luck, you too can code like me.

What else is in the pipeline?

I’m working on a project called Dialed Tone for musicians, specifically guitarists and bass players who use an effect unit called the M13 Stompbox modeler.

I’ve just put Clicoon into private beta, not sure what I’ll end up doing with that though. I’ve also got this Budget App that I originally built for my wife to use for our home budget, but it’s since grown into something much more;  I’d like to make an iPhone app out of that at some point.

I’ve got a few other ideas up my sleeve, I just need more hours in the day to finish them all. One that leverages Twitter in a really innovative way. I’m excited about that one. Oh snap, I almost forgot, I’m working on a web app for anyone who prays. It’s called Fervent. Derek Nelson is doing the design, and it’s mind blowing. 

Gotham Ultra

What’s your favourite typeface?

At the moment Gotham Ultra.

What’s your favourite plain text editor?

I really, really want to be a TextMate guy, but BBEdit keeps calling me home. I’ve been using it since version six. I do all my coding by hand, and BBEdit fits like a glove.

What’s your favourite tea?

I’m not a tea drinker, I wish I was. What would you recommend?

1238252160 · Web Standardistas · Follow Us on Twitter | 5 Comments

Introducing Alkaline

Alkaline [Detail]

Alkaline is a free application for the Mac that allows you to test your web site in a variety of Windows based browsers. Litmus’s lift pitch summarises its potential:

Alkaline tests your web site designs across 17 different Windows browsers right from your Mac desktop in seconds. No need for virtual machines, Windows licenses, or any messing around with Windows Update.

Alkaline works with the browser-based Litmus service which allows you to test your web sites in Firefox and Internet Explorer 7 for free, and with another 15 browsers, all available through a number of affordable, paid for options.

Watch the Litmus screencast for the lowdown on how Alkaline works. The screencast’s point - that testing across a range of browsers should be an iterative process, is a good one - and Alkaline makes this often tedious process very easy.

As with any screenshot service, the main drawback is that you can’t test how page interaction works, only check how your pages are rendered. That said, Alkaline looks like a useful addition to your web design toolbox. If, that is, you’re lucky enough to be working on a Mac.

1238170800 · Nicklas Persson · Follow Us on Twitter

XL

Mrs Eaves XL [Detail]

A revision of John Baskerville’s eponymous transitional typeface Baskerville, Zuzanna Licko’s Mrs Eaves was first released in 1995. A perennial favourite - it has outsold every other Émigré font twofold - it now sits alongside classics including Helvetica, Univers and Bodoni as one of the world’s best-selling typefaces.

A carefully crafted serif, perfect for adding a little classicism to any web site, it has now been joined by Mrs Eaves XL, optimised for legibility at smaller sizes and where space is tight.

An extensive essay on the development of XL, which was four years in the making, is available at Émigré’s excellent web site. Perfect for typophiles or the more discerning reader.

1238001120 · Christopher Murphy · Follow Us on Twitter

Motherfuton

I ALSO BLOG

Noah Stokes is clearly not only a talented designer, but also has a deep understanding of what makes the interwebz go around. He’s, “finally got around to redoing [his] personal portfolio site” [sic] and it’s a beauty.

Showcasing his mad skillz and calling more than a few culprits along the way, Stokes unashamedly states:

I am the best choice for all your front end development needs.

Before going on to explain why, at great length. Whilst his front end skillz are undeniable, it’s his marketing skillz that are the key here. Mr Stokes understands the importance of marketing yourself in a connected culture and clearly has his finger on the digital pulse.

1237951020 · Christopher Murphy · Follow Us on Twitter

Questionable Characters

You've got questions. We've got answers.

Courtesy of Ben Barry, a graphic designer and illustrator at Facebook (with some very interesting side projects) and Frank Chimero, a freelance illustrator and graphic designer (who also teaches at Missouri State University), Questionable Characters is a wonderfully designed site, showcasing the power of a good idea coupled with some solid XHTML and CSS (and just a dash of JavaScript).

Offering ongoing advice to an idiosyncratic range of queries, Ben and Frank, are guaranteed to have the answer to any question you’d care to throw at them. Indeed, it’s the sole reason they get out of bed every morning.

Recent questions include:

1237940880 · Christopher Murphy · Follow Us on Twitter

NotForPaper

NotForPaper

Subtitled ‘posts and observations on some of the most exciting design work for screen’, NotForPaper is designed, developed, and maintained by Robert Little, Art Director at Tuft and Co., an award winning studio with clients including Adobe, FedEx and Time Warner.

Little’s regular posts on “work best realized away from a printed surface” gather together a carefully curated cross-section of inspiring screen-based works well worth bookmarking for repeated reference.

1237774860 · Christopher Murphy · Follow Us on Twitter

The ___ Cards

One card. Infinite ways to express yourself.

The ___ Cards. One card. Infinite ways to express yourself.

Courtesy of “a bunch of regular folks who like to dabble with design and things that are out of the ordinary”, The ___ Cards’ supporting web site (and ‘real life, hold in your hands’ cards) are guaranteed to keep your creative mind occupied for quite some time.

See how others have used The ___ Cards at Flickr.

1237771380 · Christopher Murphy · Follow Us on Twitter

Cufón - Fonts for the People

Select the font you'd like to use...

Although there are many designers creating notable examples of beautiful web typography using default web safe typefaces alone (Coudal Partners, Jon Tan, Clearleft…), designers that might have wished to venture beyond the confines of Georgia, Arial, et al. have traditionally been faced with one of only two options: using images (of type) or using Flash.

With the rise of the web standards movement and the need to satisfy Mr Google’s need for easily indexed text, it soon became apparent that this scenario - replacing plain text with a Giant Whooping GIF™ or a standalone Flash movie - was a less than desirable solution to the typography problem.

Although accessibility for impaired users and non-desktop devices certainly had its role to play in re-assessing the effectiveness of the Giant Whooping GIF and standalone Flash movie approach, the primary reason for keeping your text as HTML was Mr Google. Semantically marked up HTML text can easily be found and indexed by search engines, Giant Whooping GIFs and standalone Flash movies cannot.

Several clever image replacement techniques using CSS have been developed over the years, however, they have all shared the same drawback: the designer has to manually create each image used for replacement. Whilst this is fine for a small site, it quickly becomes unmanageable on a larger scale and doesn’t work at all with dynamically generated content.

About five years ago, a solution of sorts evolved in the form of sIFR (Scalable Inman Flash Replacement) which offered a more sophisticated take on the image replacement conundrum.

Using a combination of Flash, JavaScript and CSS, sIFR allowed designers to specify their typeface of choice and dynamically replace HTML text with nice, shiny, custom type; allowing designers to employ rich typography on their web pages without sacrificing accessibility, search engine friendliness, or markup semantics.

The sIFR solution was almost ideal: any text could be dynamically replaced, even better, the text could be selected, copied and pasted - in other words, it behaved just like ‘ordinary’ text. However, sIFR had one distinct drawback: It required Flash.

Although we feel some sympathy for Mr Moll, who allegedly hasn’t had the need to open his copy of Flash for four years (and wishes to build on that record), the pain of having to use Flash to create your custom typeface file has possibly been a little exaggerated, the reliance on Flash is a more pressing issue for a device that doesn’t (and probably never will) support the technology… Did anyone say iPhone?

Good news. An alternative for font embedding might have finally arrived. Cufón, recently emerged on the scene, “aims to be a worthy alternative to sIFR” which is easier to set up and use, and eschews sIFR’s requirement for Flash in favour of a combination of JavaScript, HTML Canvas and VML. (Don’t worry, you don’t need to heavily research HTML Canvas and VML to use it.)

Using Cufón is remarkably easy:

  1. Download the Cufón JavaScript;

  2. Generate a font (you can use the hosted font generator or run a copy of your own);

  3. Replace your text using a line of JavaScript (to give you an indication of the lack of complexity of this operation, replacing all of your h1 elements would simply require this line of code: Cufon.replace('h1');); and

  4. Take care of IE (should you choose to do so).

Easy as pie.

Cufón is a new kid on the block and there’s no denying that there are still a few issues that need ironed out if it’s to fully take hold. Not least the fact that, as it stands, the generated text can not be selected, copied and pasted, i.e. it behaves like an image and not like text. However, given time, one would hope issues like this will be resolved.

Another, more complicated issue, is that of the EULA (end-user licensing agreement) for the typeface you’d like to use on your web site. Traditional EULAs specify the number of machines you’re allowed to install a typeface on, whether using Cufón might break these EULAs is still a grey area. As the typeface is converted to a JavaScript file that is easy to copy (read ‘steal’), there are genuine and understandable concerns expressed by type foundries about this.

However, there are a number of well-designed typefaces available under generous end-user licensing agreements that you might consider using in the interim.

Towards the end of his very thorough article Exploring Cufón, Mr Moll hints of talks between type foundries and Cufón’s creator Simo Kinnunen, suggesting that they have been very positive thus far, pointing out:

Technologies such as this encourage the use of typefaces other than the standard set we’re all used to [and] inevitably could increase the demand for typefaces. Therefore, type vendors and foundries have a vested interest in seeing @font-face, Cufón, and similar technologies flourish.

There’s no question that it would be in the interest of type foundries to work with projects like Cufón (and similar initiatives) to allow designers to legally use legitimately purchased custom typefaces on their lovingly crafted web sites. Positively, Kinnunen is ready and willing to make adjustments to Cufón as needed to facilitate this.

The web is growing exponentially. There are no shortage of designers seeking to bring the beautiful typography we’re accustomed to seeing in print to our screens. Cufón looks set to be a welcome step in that direction.

1237730700 · Web Standardistas · Follow Us on Twitter

UnderConsideration Expands

The UnderConsideration Online Network

In their continued bid for (well-deserved) world domination, UnderConsideration founders Bryony Gomez-Palacio and Armin Vit have launched Word It as a standalone site within the UnderConsideration Online Network.

UnderConsideration, described as “a growing network and enterprise dedicated to the progress of the graphic design profession … [intended] to question, push, analyze and agitate graphic design and those involved in the profession,” is home to an excellent cross-section of sites that deal with design in the broadest sense (both online and offline).

Joining Speak Up, Brand New, Quipsologies, and The Design Encyclopedia, Word It encourages creative diversity within the design community through monthly, one-word design challenges which are open to all.

Word it is your opportunity to express in any manner you wish and with as many (or little) other graphic elements as you need, what best describes each monthly word.

Why not browse UnderConsideration’s extensive archives whilst thinking about your entry for this month’s word: Transition?

1237698060 · Christopher Murphy · Follow Us on Twitter

So Simple

Speech Bubble

A wonderfully minimal, but hugely functional piece of information design, the Cologne Bonn Airport web site, designed by Intégral Ruedi Baur et Associés, encapsulates the airport’s ‘So Simple’ strapline perfectly.

Employing a beautifully crafted family of information-rich pictograms designed by Toan Vu-Huu, Cologne Bonn Airport presents a colourful face that effortlessly succeeds in its intention to “deliberately debunk the ‘grey airport’ myth” that plagues many other international airports.

[Via Ms Hanausek.]

1237675680 · Christopher Murphy · Follow Us on Twitter

Urtd

Klimax [Detail]

Slovak designer Ondrej Job’s portfolio site Urtd is a wonderfully well-considered web site. Job’s Klimax Bold - an exuberant, ultra-heavy display typeface - was awarded a Certificate of Excellence in the prestigious TDC2 2009 competition.

His Vlog is well worth exploring for off-screen inspiration.

1237579020 · Christopher Murphy · Follow Us on Twitter

Lovely Charts

100% FREE - Try it now!

Lovely Charts, courtesy of This is Lovely!, is a free, web-based diagramming application that allows for rapid development of beautifully crafted flowcharts, sitemaps and wireframes. This is Lovely! state:

Every single symbol available in Lovely Charts has been crafted with love, to enable you to create great looking diagrams that will impress, convince and seduce - even if you don’t have the slightest design skill.

Lovely Charts’ motto is “You think, we draw!” Try it (for free) and you’ll be creating beautiful charts in no time.

1237500180 · Christopher Murphy · Follow Us on Twitter

A Flexible and Accessible Fluid Grid

A Flexible and Accessible Fluid Grid

The Fluid Grid System is just what the name suggests: a resolution independent fluid web grid system which allows the designer to create a grid based layout which shrinks and grows with your browser window.

Fluid layouts are notoriously difficult to get right, but The Fluid Grid System, designed by Joseph Silvashy and his team looks like a great way of rapidly prototyping and deploying layouts based on a standard six column grid. You can even toggle the Show Grid button on the Fluid Grid site to get instant Gridification.

Simplicity seems to have been key when developing the Fluid Grid: the markup needed to create your grid based layouts is minimal and unobtrusive and should degrade gracefully, making sense both in Lynx and in the screen reader of your choice.

The Fluid Grid System is generously licenced under an Open Source MIT Licence, and branched versions are available at GitHub.

1237389720 · Nicklas Persson · Follow Us on Twitter

Key

LaCie iamaKey USB Memory Stick

LaCie’s new iamaKey 4GB and 8GB USB memory sticks are beautiful (an adjective rarely associated with computer storage products).

Designed by 5.5 Designers, an innovative Paris atelier founded in 2003 by Vincent Baranger, Jean-Sébastien Blanc, Anthony Lebossé and Claire Renard, LaCie’s latest line of memory sticks join the growing ranks of well-designed products offered by LaCie in an effort to improve the often overlooked area of computer storage solutions.

5.5 Designers follow in the footsteps of a stellar lineup of designers - Philippe Starck, Karim Rashid and F.A. Porsche - who have previously worked with LaCie to introduce some long-overdue aesthetics into computer hardware design and, like the other projects they’ve turned their attention to, the results are memorable.

Available in either 4GB or 8GB - get yours now.

1237262220 · Christopher Murphy · Follow Us on Twitter

Typography Served

Typography Served [Detail]

Typography Served, just one of a growing number of Served sites courtesy of the Behance Network (including: Fashion, Industrial Design, Motion Graphics and Photography], offers a steady supply of typographic inspiration via an elegant and minimal interface. Sign up for the Served Newsletter for a custom summary of the best work delivered weekly or monthly by email.

1237251120 · Christopher Murphy · Follow Us on Twitter

TDC2 2009 Winners

Optica Normal [Detail]

The Type Directors Club Typeface Design Competition (TDC2): 165 entries from 26 countries narrowed down to 18 winners.

Personal favourites include: Manuel Guerrero’s Optica Normal, a functionally challenging, but aesthetic (and systems inspired) tour de force; Henning Skibbe’s Haptic, a versatile sans serif designed for use at small sizes; and Ondrej Job’s Klimax Bold, an exuberant, ultra-heavy display typeface.

[Via Mr Burns.]

1237240020 · Christopher Murphy · Follow Us on Twitter

Typetester

Typetester

Marko Dugonjic’s Typetester is a web-based application which allows for quick comparison of type on screen. With a three column display, Typetester allows you to compare and contrast typographic variations and, when you’re happy, one click supplies you with copy and paste CSS goodness.

With the ability to vary size, leading, tracking, alignment, word-spacing, decoration, color and background-color Typetester is the perfect tool for rapid typographic prototyping.

1236999000 · Christopher Murphy · Follow Us on Twitter

Ban Lorem Ipsum

Ban Lorem Ipsum

Words are an essential part of the design process, indeed words - when written well - can be the design itself.

Well-written and well-crafted content can capture the attention of the reader, allowing words to speak. The recent emergence of typographically crafted web sites that rely on well-written content, styled beautifully with CSS - A List Apart, Seed Conference and The Grid System for example - underline the importance that well-styled words can play within the designers’ toolbox.

With the rise of the web standards movement and the focus it has brought to content, not least the welcome re-emergence of a real understanding of the benefits of semantic markup, the days of lorem ipsum - placeholder text used as a part of the design process - are, thankfully, numbered.

A Little History

Designers, in particular those trained in a print environment, have traditionally used lorem ipsum as a means of visually presenting text as a graphic element during the early stages of the design process.

Using lorem ipsum as placeholder text gives a feel for how words flow on a page without distracting the client (who often invariably reads the text, failing to see the design). Using lorem ipsum, a Latin text, solves this problem, serving as a visual representation of text - “The text will be positioned here and will be styled like this.” - that isn’t distracting (unless your client happens to be fluent in Latin).

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

A popular piece of placeholder text, lorem ipsum is derived from an early passage by the classical philosopher Cicero which has evolved over the course of design history, reaching its current, canonical form in the Letraset catalogues of the 1960s and 70s. As the web has evolved, lorem ipsum has, unfortunately, found a place in the web designers’ toolbox.

If lorem ipsum has served designers so well for so long, what’s wrong with it now? Simple…

It’s All About Semantics

In order to write effective, semantic markup you need to start with the content first. You have to start with words and meaning and work out from that, applying the appropriate markup where necessary.

This approach, often referred to as a content-out approach (a term coined by Mr Clarke in his excellent book Transcending CSS), puts meaning first and foremost. If it’s a paragraph, mark it up as a paragraph. If it’s a blockquote, mark it up as a blockquote.

Without the content, and relying solely on lorem ipsum, it’s impossible to create well-formed, meaningful markup. Placeholder text like lorem ipsum has no inherent meaning and as a consequence is impossible to markup semantically - the first, critical stage in the design process.

In order to embark on this phase, building a solid foundation of well-structured markup, you need to get the content.

Chicken and Egg

Clearly this presents something of a chicken and egg situation. Often the client wishes to see some ‘design’ before any content has been created, however, you need some content to create the design. It’s at this point that a little client education can go a long way.

Explain to your client that real words are a part of the design process and that without them you can’t even begin to start. Give them a look behind the scenes at some typical markup and show them the hierarchies of information you’ve put in place, explaining the role the content plays in the design process.

You’ll find that not only will they respect you for guiding them through the design process, but you’ll have saved yourself (and your client) a time-consuming stage along the way - the creation of web pages that mean nothing (except to Cicero).

1236818760 · Web Standardistas · Follow Us on Twitter | 1 Comment

Shhh...

The first music player that talks to you.

The world’s smallest music player is also the first that talks. Introducing VoiceOver, Apple’s latest iPod Shuffle features a text-to-speech interface, enabling easy navigation amongst playlists and identification of songs. It’s also, as ever, a beautifully crafted piece of design. They kept this one quiet.

1236809820 · Christopher Murphy · Follow Us on Twitter

Beautiful and Elegant HTML Lists Using CSS

If you ever forget which browsers apply padding and which apply margin to your lists, Konstruktors offer a visual primer on how lists are rendered in standards aware browsers such as Gecko, Webkit or Opera as compared to Internet Explorer.

1236703620 · Nicklas Persson · Follow Us on Twitter

Using Conditional Comments to Unstyle IE6

Conditional Comments

Over at SimpleBits Mr Cederholm suggests that now is perhaps the time to treat Internet Explorer 6 the way that many web designers have long dealt with legacy browsers, for example Netscape 4. Serving IE6 a plain, unstyled site and not worrying about spending extra time and resources on this less-than-stellar browser, frees up time to concentrate your design and development effort on the many modern, standards compliant browsers out there.

If you’re working on a personal project or have the statistics to show that only a minority of your users still use IE6, this method, making use of conditional comments, might save you a considerable amount of design and development time. This variant, courtesy of Mr Hicks, which punishes IE6 users by serving them Comic Sans, seems just a little bit too cruel.

If you’d like to learn more, and build up your nerd-points while you’re at it, Perishable Press has an excellent article that covers all you ever needed to know about Downlevel Conditional Comments.

1236627120 · Nicklas Persson · Follow Us on Twitter

Good Design in Ten Commandments

Dieter Rams

Vitsoe present the ten commandments of good design, courtesy of design icon Dieter Rams. Amongst the gems: “Good design is thorough to the last detail.” (Illustrated by Rams’ ET Series calculators.)

1236620520 · Christopher Murphy · Follow Us on Twitter

Objectified Trailer

Objectified

Get a preview of Gary Hustwit’s new film Objectified. While you wait for the release schedule to roll out, why not get a copy of Hustwit’s first, excellent, film Helvetica.

1236609780 · Christopher Murphy · Follow Us on Twitter

2008 Web Trend Map

2008 Web Trend Map [Detail]

The 2008 Web Trend Map, the third in a series of maps by Information Architects, highlights established and emerging online trends via a beautifully crafted tube map interface.

Featured by WIRED, Boing Boing and The Guardian, amongst others, a limited edition A0 print of the map is available, although - as of this writing - it’s selling out fast (664 have been pre-ordered). Get yours now.

[Via Mr Fearon.]

1236273180 · Christopher Murphy · Follow Us on Twitter

Horror Vacui

Glorious Pixels

Horror Vacui - a two-player, eight-bit game coming soon from Shaun Inman, developer of Mint.

1236272760 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.