Notes
Handcrafted CSS
![Handcrafted CSS [Obscure Detail]](/assets/handcrafted_css.png)
With a focus on “progressive enrichment” and attention to detail, Handcrafted CSS - a partnership between Messrs. Cederholm and Marcotte - looks set to be a must have purchase when it hits the shelves on 10 August, 2009.
It’s refreshing to see the foregrounding of craftsmanship in (web) design, an often overlooked aspect of the design process that can make - or break - a design. Get your copy now.
A Dozen Questions for Mr Van Damme
![Tim Van Damme [Detail]](/assets/tim_van_damme.png)
Tim Van Damme is a designer, writer, public speaker and superhero, based in Machelen.
Van Damme’s meticulously crafted web sites for, amongst others, Atebits and 24 Ways, have helped establish him as an emerging talent with a solid understanding of interaction design coupled with the traditional skills of grid systems and typography.
Van Damme’s beautifully designed business card web site, launched in late 2008, is credited with re-igniting an interest in the business card web site, sparking something of a comeback for the format. It inspired many to create their own, gathered on the Wall of Fame, sadly it also inspired numerous, less ‘inspired’ copies, gathered, just as helpfully, on the Wall of Shame.
When not designing elegant web sites, Van Damme can be found writing under the alias of his superhero alter ego Maxvoltar.
We asked Mr Van Damme a dozen questions.
![Made by Elephant [Detail]](/assets/made_by_elephant.png)
Where did you learn your craft?
I’m self-taught. I’ve learnt a lot from books I’ve bought that were recommended by others. I’ve also learnt a great deal by dissecting other people’s work, and experimenting in Photoshop or with HTML and CSS.
At school there was only one class I can remember where I actually learned something useful. It was given by a great designer who introduced me to typography, colour principles and the basics of layout.
Who inspires you?
There are thousands of great designers out there, my favorites include: Andy Clarke, John Hicks, Josh Pyles, Matthew Smith, Sam Brown, Dan Mall, Dan Cederholm, Naz Hamid, Jason Santa Maria, Elliot Jay Stocks, Ryan Sims, Wilson Miner…
I also appreciate interface or icon designers, including: Brandon Walkin, Louie Mantia, Bobby Andersen, David Lanham, Mark Jardine, Sebastiaan De With…
What are your influences?
My influences range from beautifully designed Macintosh applications to grungy pictures of old Penguin books and everything in between. I’m a sucker for minimalism, bold designs and details hidden inside designs.
![Atebits [Detail]](/assets/atebits.png)
There’s been a great deal of discussion recently about how HTML 5 might signal the death of Flash. As a designer who is known for delivering rich, interactive experiences based on standards, we’d value your views on this.
It might, and I certainly hope it will, but it won’t be happening within the next ten years. The complexities of our industry and the various key players unfortunately combine to ensure that launching new technologies often takes a huge amount of time.
I’ve heard that a forthcoming version of QuickTime player will support .flv files, and hope that some of the video sites will jump on that train, saving us from that processor hogging, piece of shit software called Flash.
Is Typekit going to save the world?
Only Chuck Norris can save the world, but Typekit’s gonna make it a prettier place.
You divide your output across three different personas - Tim Van Damme, Maxvoltar and Made by Elephant - which is your preferred persona?
Maxvoltar, for sure. He’s the guy that says whatever he wants without caring about the consequences, because he doesn’t really exist. The result is that people come complaining to me about him, while I can’t even control him. Let’s just hope it doesn’t kill him.
![Maxvoltar [Detail]](/assets/maxvoltar.png)
Maxvoltar is a “superhero sans disguise.” Every superhero has a backstory, how did Maxvoltar gain his superpowers?
As a young child he was abducted by aliens and given a special radiation treatment. Ever since, he’s been bullet- and criticism-proof.
If you had to pick one design Made by Elephant, which would it be and why?
24 Ways. I don’t think it’s the ‘prettiest’ design I’ve ever made, but it got people discussing CSS3 properties and trying out new layouts inside web browsers which, in the end, is the best response a design can get. It also helped a lot of people realize that we still haven’t reached the point where we can’t come up with something new and refreshing.
You recently wrote an article titled ‘Why You Can’t Teach Web Design’ which generated some interesting discussion. Has your opinion on this topic changed and what would you consider essential learning for the aspiring web designer?
What I tried to say (but didn’t really make clear), is that with the current mindset of the people running schools, it’s impossible to learn web design at school.
There are a lot of really great books out there - didn’t you guys recently write one? ;-) - but their content is very rarely covered in school curricula. More often than not you’re on your own, figuring out what’s important and what’s not.
![24 Ways [Detail]](/assets/24_ways.png)
What’s your favourite typeface?
I’ve had some fun with Gotham lately, but I think it’s time to move on as it’s now popping up all over the place, being used and abused in every conceivable way.
What’s your favourite plain text editor?
Espresso, hands down.
What’s your favourite tea?
I only drink tea when I’m sick and prefer mint or black tea.
Enjoy this interview? Tweet it!
Firefox 3.5
![Firefox 3.5 [Detail]](/assets/firefox_3.5.png)
Officially out of beta, Firefox 3.5 is more than twice as fast as Firefox 3, and ten times as fast as Firefox 2, in addition to offering a lot more under the hood. Get it while it’s hot.
The Video Bay
![The Video Bay [Detail]](/assets/the_video_bay.png)
From the creators of the The Pirate Bay (admittedly now somewhat beleaguered) comes The Video Bay, an experiment that embraces HTML 5’s capabilities to stream video and audio on the web.
With “no (copyright) restrictions” and a desire to create an “experimental playground” that explores HTML 5’s <video> and <audio> tags fully, The Video Bay - launched in “Beta Extreme” - wears its heart on its sleeve:
Don’t expect anything to work at all.
They’re nothing if not honest.
$fx()
![$fx() [Detail]](/assets/$fx()_library.png)
Weighing a mere 3.7K, $fx() is a compact lightweight JavaScript library for animating HTML elements. Small, but powerful.
A Markdown Primer
Given the importance we attach to the creation of well-structured, semantic markup you might wonder why we’d advocate the use of Markdown as a means of generating clean and well-formatted markup. (Markdown, for creating markup? A contradiction, surely?)
The reason is that we use it day in, day out to make the process of content creation and writing markup easier. Once you have an understanding of how markup works, you’ll love Markdown’s simplicity; it makes the writing in writing markup a breeze.
To quote Mr Gruber, Markdown’s creator:
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).”
The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.
Put simply, Markdown enables you to focus on creating well-crafted content in your plain text editor before converting it into valid markup. Sounds perfect. So, how does it work?
Show and Tell
The easiest way to introduce the principles of Markdown are to run through some examples.
If you’re not familiar with Markdown’s syntax you might be forgiven for thinking that the examples below look just like plain text. That’s because they are. To explain the foundation of this emphasis on simple, clear text-like formatting Gruber states:
While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
So, let’s jump straight in and get started by looking at some examples.
Writing a paragraph is as simple as writing a paragraph:
This is a paragraph. Admittedly a very short paragraph
that comprises nothing more than two sentences.
Parsing this results in the following:
<p>This is a paragraph. Admittedly a very short paragraph
that comprises nothing more than two sentences.</p>
Typing the following will give you an <h1> followed by an <h2>:
An H1 Heading
=============
This is an H2
-------------
Running it through the Markdown parser transforms the above, easy to read plain text, into perfectly valid markup as follows:
<h1>An H1 Heading</h1>
<h2>This is an H2</h2>
Headings can also be designated with a # (hash) marker, where the number of hashes indicates the corresponding level of heading, as follows:
#H1 Heading
######H6 Heading
Phrase emphasis is simple, by wrapping content in either asterisks or underscores to indicate spans of emphasis, adding _emphasis_ or __strong emphasis__ (asterisks - *emphasis*, **strong emphasis** - are functionally equivalent).
Lists are equally simple. Unordered lists employ asterisks, pluses, and hyphens (*, +, and -) as list markers (as with phrase emphasis, you’re free to choose your preferred list marker). The following is an unordered list:
+ Bedtime for Bonzo
+ King Kong
+ Every Which Way But Loose
Changing this list to an ordered list is as simple as changing the list markers to numbers followed by a period, as follows:
1. Bedtime for Bonzo
2. King Kong
3. Every Which Way But Loose
As the preceding examples suggest, the beauty of Markdown is the ease with which it makes the creation of readable and editable content. Back to Mr. Gruber:
Markdown is not a replacement for HTML … The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format.
This emphasis on ease-of-writing is one reason why Markdown has been embraced as a lightweight markup language for several content-management and blogging systems, including WordPress, Movable Type, Drupal, Expression Engine and many more.
Embracing a Content Out Approach
In Transcending CSS: The Fine Art of Web Design, Andy Clarke introduces the idea of a content out approach as follows:
You should always start writing a document by first using only structural elements such as headers, paragraphs, lists and quotations.
With its plain-text-like syntax, Markdown is a perfect medium for adopting a content out approach. What makes it so appealing is the way in which it makes writing well-formed, structured markup so easy.
By default it produces lean, structured and well-formed (X)HTML, ready to be expanded into a clean and efficient web page or added to an existing one. This approach results in nothing but structured markup, ready to receive some CSS goodness, not a needless div or span in sight.
By enabling you to write easy to read content that can be converted quickly and painlessly into valid (X)HTML, Markdown allows you to generate well-formed content with the minimum of fuss. The easiest way to get a feel for it is to try out the Dingus at the Markdown site.
Getting Jiggy With It
Although HTML is relatively easy to craft by hand, Markdown is often easier and faster to write. Also, just as important, it’s easier to read. Mr Gruber outlines the philosophy behind Markdown as follows:
Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else.
Let’s look at a quick comparison, here’s a block of markup, in Markdown:
Markdown
========
Markdown is a lightweight markup language designed to ensure maximum
readability of both its input and output forms. John Gruber, Markdown's
creator, states:
> Markdown is a text-to-HTML conversion tool for web writers. Markdown
allows you to write using an easy-to-read, easy-to-write plain text format,
then convert it to structurally valid XHTML (or HTML).
Originally implemented in Perl, Markdown is now included with, or available
as a plugin for, several content-management systems.
Basics
------
Getting started with [Markdown][1] is easy. The language takes many cues
from existing conventions for marking up plain text in email.
###Further Reading
1. [Markdown Syntax][2]
2. [The Markdown Dingus][3]
3. [Wikipedia][4]
[1]: http://daringfireball.net/projects/markdown/ "Markdown Overview"
[2]: http://daringfireball.net/projects/markdown/syntax "Markdown Syntax
Documentation"
[3]: http://daringfireball.net/projects/markdown/dingus "Something whose
name is either unknown or forgotten."
[4]: http://en.wikipedia.org/wiki/markdown "Wikipedia"
And the same, this time in HTML:
<h1>Markdown</h1>
<p>Markdown is a lightweight markup language designed to ensure maximum
readability of both its input and output forms. John Gruber, Markdown's
creator, states:</p>
<blockquote>
<p>Markdown is a text-to-HTML conversion tool for web writers. Markdown
allows you to write using an easy-to-read, easy-to-write plain text
format, then convert it to structurally valid XHTML (or HTML).</p>
</blockquote>
<p>Originally implemented in Perl, Markdown is now included with, or a
vailable as a plugin for, several content-management systems.</p>
<h2>Basics</h2>
<p>Getting started with <a h
ref="http://daringfireball.net/projects/markdown/" title="Markdown O
verview">Markdown</a> is easy. The language takes many cues from existing
conventions for marking up plain text in email.</p>
<h3>Further Reading</h3>
<ol>
<li><a href="http://daringfireball.net/projects/markdown/syntax"
title="Markdown Syntax Documentation">Markdown Syntax</a></li>
<li><a href="http://daringfireball.net/projects/markdown/dingus"
title="Something whose name is either unknown or forgotten.">The Markdown Dingus</a></li>
<li><a href="http://en.wikipedia.org/wiki/markdown"
title="Wikipedia">Wikipedia</a></li>
</ol>
Looking at the two examples above, the former is clearly cleaner and easier to read, yet both achieve the same end result. Therein lies Markdown’s beauty.
Getting Started Is Easy
Markdown is easy to configure and is supported by a number of popular writing platforms including, Movable Type and Wordpress. Should you be writing your well-formatted markup on a Macintosh, it’s also possible to integrate Markdown with our personal plain text editor of choice BBEdit.
TextMate has built in support, and there are plugins for many other editors including Coda and Vim. Ever helpful, Mr Gruber provides full instructions which will get you up and running in next to no time.
If you ever plan on doing any writing for the web - and if you’re reading this you probably are - Markdown is an indispensable tool to add to your toolkit.
Typenuts
![Typenuts [Detail]](/assets/typenuts.png)
If you’re a typography aficionado Typenuts, courtesy of the fine minds behind I Love Typography, is guaranteed to offer a little something you’ll appreciate. In their own words:
Type-themed and type-inspired iPhone and desktop wallpapers for typenuts. Completely free; no strings attached.
Simple.
Size Matters
There are certain situations when using a CSS Grid Framework might be appropriate, however, most frameworks are complex and, well, just a little bit bulky.
Tyler Tate’s 1KB CSS Grid adopts a simple, lightweight approach. It might not do everything you’ll possibly need, but if what you require is a simple, lean CSS Grid, it’s certainly worth a look.
Focus on FontStructors
![Afrojet [Detail]](/assets/fonstructors_is_one.png)
Flying quietly beneath the radar earlier this year on April Fool’s Day, Fonstruct - FontShop’s beautifully crafted web application for the creation (and sharing) of modular typefaces - celebrated its first birthday.
Making up for the lack of fanfare, The FontFeed, is focusing its attention over the next few weeks on a number of FontStructors as a means of drawing attention to the vibrant and thriving community of type and design enthusiasts that have embraced FontStruct.
The series kicks off with a profile of John Skelton, a celebrated FontStruct aficionado and creator of, amongst other more practical typefaces, the excellent StacheStruct.
Check Your Colours
![Check My Colours [Detail]](/assets/checkmycolours.png)
According to the press release, CheckMyColours is:
“a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.”
Using algorithms suggested by the W3C, the site calculates luminosity contrast ratio, brightness and colour difference on each element on your site and displays the rather technical results in a well considered, thoughtfully designed page. Overall, a very impressive beta release, not at least because they spell the word colour right.
Elliot Jay Stocks is a designer, author, public speaker, musician and Belgian beer geek based in Chester. We asked Mr Stocks a dozen questions...
