SitePoint

View Issue

The SitePoint Design View #64                  Copyright (c) 2009
October 21st, 2009                                 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The Official Design Newsletter of SitePoint
by Alex Walker (design@sitepoint.com)

Read the HTML version of this newsletter, with graphics, at: 
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=64

Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.

INTRODUCTION  - - - - - - - - - - - - - - - - - - - - - - - - - -

Welcome to Design View #64. 

Web Directions South [1] has come and gone for another year. If
you were lucky enough to attend, you no doubt left with some
fresh ideas, a few new friends, and a well-earned headache or
two.

However, if you were a no-show, there are still some great
treats to look forward to. The first batch of this year's
presentations are beginning to trickle online, including:

 - Donna Spencer's Designing for Different Information-Seeking
Behaviors [2]

 - Christian Crumlish's Designing Social Interfaces [3]

 - Ben Galbraith's The State of Developer Tools [4]

In this month's Design View, Matty spends some quality WDS09
time with type guru Mark Boulton, and finds out why Comic Sans
might not be the elephant man it's held up to be.

Later I'll introduce you to our new triplets -- Mac OS X
Dashboard, Opera Widget, and Adobe AIR versions of our
fiendishly useful (and free!) CodeBurner reference tool [5].

Read on.

Alex Walker
Editor
SitePoint Design View



[1] <http://www.webdirections.org/>
[2] <http://www.webdirections.org/resources/donna-spencer-information-seeking-behaviours/>
[3] <http://www.webdirections.org/resources/christian-crumlish-designing-social-interfaces/>
[4] <http://www.webdirections.org/resources/ben-galbraith-the-state-of-developer-tools/>
[5] <http://tools.sitepoint.com/codeburner/>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Who Said Web Design Wasn't Sexy?

 - Design amazing web interfaces from scratch.
 - Master key web interface design principles 
 - Create beautiful, yet functional, web sites.
 - Unleash your own artistic talents

Free Preview here http://www.sitepoint.com/launch/7b6c9f


IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -

 - Introduction
 - Interview with Mark Boulton
 - A Hunka CodeBurnin' Love
 - Latest Tutorials
 - Hot Discussions
 - New Blogs


INTERVIEW WITH MARK BOULTON - - - - - - - - - - - - - - - - - - -

SitePoint's own Matthew Magain caught up with designer, speaker
and author, Mark Boulton [1], at this year's Web Directions
South conference. Here's the transcript of their chat:

Mark, thanks for coming to Australia. When we spoke earlier, you
mentioned that you love this country and occasionally contemplate
moving here. Surely you'd miss the British weather, though?

Ha ha! Judging by this week, no. You have your own blend of
British weather here!

This is our third trip now. My wife and I used to live in Manly
approximately ten years ago, for about six months, and we
returned for a wedding three years ago. Every time we come back
we have the same discussions, like, "Should we move here?" It's
so beautiful.

I think we'd miss a good cup of tea though, to be honest. The
tea's not great.

But the coffee's excellent!

The coffee's excellent -- but I don't drink coffee! There you
go.

You're well-known for being a typographic designer. Could you
tell our readers what a typographic designer does?

Primarily, I design with type -- which is more than just
choosing the typeface. It means all elements of typographic
design, from grids and hierarchies to typesetting, and all that
kind of stuff. It means focusing on that. So the difference
between a typographic designer and a graphic designer is that a
graphic designer does typographic design, but it's not their
main focus. They're often focused on imagery, photography, and
art direction -- those aspects.

Many of our readers and listeners think of typography as being
one aspect of design, but you were saying in your presentation
today that you consider imagery, layout, and color to each be
one aspect of typography?

Yes, I do. I think that any image you use on a design should
really fit into a grid. And the grid is a typographic grid. It
should be created and designed with the typography in mind as
the primary element. They're all related to type, and 99% of
what we do on the Web, as designers, is typographic design.

Sure, you have the interaction layer, making sure it's usable.
But I think all of that is typographic design. I really do.
Consider a designer doing what I did in university: designing an
encyclopedia. You have to consider navigation and access
structure, you have to think about hierarchy and flow, because
an encyclopedia is not read cover-to-cover -- it's a reference
book. So it has to be navigated in the same way that a web site
is. The similarities are quite evident, in my view.

The key slide in your presentation that stood out was the 9
factors of typographic structure [2]. It really resonated for
me. Would you mind sharing how you came up with that structure,
and how you use it in your workflow?

Yes. It's taken a while to reach that point. This is the third
model I've used to explain my thoughts about typography, and
what I think typography is. The structure consists of nine
squares: we have function along the bottom -- language,
typesetting, and grid; above that we have what represents form
-- hierarchy, fonts and rhythm; and on top we have attributes --
layout, color, and content.



All of these have to work together to create a strong
typographic structure, although you can remove a couple and
still retain a robust structure. On the Web we've always had
very limited font choice, to the point where designers rarely
consider typeface. But we have a really strong structure due to
all the other elements, so we're able to create really good,
strong typographic design on the Web.

Just because we're unable to choose our font, doesn't
necessarily mean we have to produce poor work. It's still
possible to create solid typographic design on the Web.

I have to confess one point that came to mind when I saw you
omit "font" from your typographic structure -- I thought, "but
the center doesn't hold!" Is having this whole range of new
fonts available on the horizon for use as simple as dropping
"font" into the equation? Or are we going to have to relearn the
structure for every font? 

Yes, it's not as simple as dropping it in, which is one of my
concerns about @font-face -- that the barriers to entry for
doing that are as simple as choosing Comic Sans from a
drop-down. It requires no thought whatsoever. When you choose a
font, you replace that bit in the middle with a different font,
and it has an effect on all the surroundings. So yes, any font
that's dropped in there will affect the typesetting, the layout,
the content, and the rhythm.Speaking of Comic Sans, you mentioned
in your presentation that you had, perhaps mistakenly, been held
up as a defender of the font. Do you want to clarify what your
stance is on Comic Sans, and where it fits in the big picture?

I can almost hear the fury building in some designers' minds.
No, I don't think Comic Sans is a bad typeface. Bad designers
have used it, and it's been used by non-designers who are making
a design decision without having the right tools available to
them. So, for example, my mum and dad might create a newsletter
for their church. They want it to be friendly, so they use Comic
Sans. And we see that all over the place.

It's just been used in the wrong context so many times, because
the barrier to entry is so low -- no typographic schooling is
needed to be able to choose it from a drop-down. People berate
it for no good reason. It's a font that's been overused, rather
than a font that's inherently bad.

Talking about bad fonts -- an audience member at the end of your
session asked about free fonts, and you responded that you
thought the majority were "rather crappy." Tell me, then: what's
the difference between a bad font, and a font perceived to be bad
like Comic Sans.

There are a few differences. First, there's the actual quality
of the software -- how does it render on different platforms,
and in other browsers. The biggest issue that I see quite a lot
with free fonts is bad kerning -- the distance between
individual letters. For example, if you have a capital T with a
lowercase r next to it, the r has to go underneath the crossbar
of the T. These kinds of issues, including spacing requirements,
need to be addressed by a typographer when generating a font.
With free fonts -- because they're free, and there's no
commercial backing behind them -- then perhaps that time is
reduced, and as a result the kerning is poorer.

Also, free fonts generally lack the breadth of weights
available, making them counterproductive to be used
commercially. Quite a lot of designers will choose a typeface in
the print world, and will want a full family of fonts to be able
to use throughout the design; that way they can use just one
typeface and use it right across many applications. Free fonts,
on the other hand, are generally only available in single
weights. They're very rarely available in multiple weights. So
that's another issue.

And they take a long time to produce. I'm not having a go at
free fonts. Type design is a completely different discipline. My
hat goes off to type designers, because it's hard work; it takes
a long, long time to do, and it's no wonder that foundries are
very protective of (normally) years and years of work.

I have a question about fixed and fluid layouts, as it's
obviously one of those topics that generate almost religious
fervor in debate and discussion. The concept of a grid, and the
concept of vertical rhythm -- these are elements that seem to
work quite well for a fixed layout. Is it possible to apply
those concepts to a fluid layout as well?

Yes, it is. It's just that your base unit of measurement needs
to be relative, rather than fixed. So you can use percentages
for ems. Quite often using ems for any of that kind of layout
stuff is actually preferable to using pixels, because an em is
related to your type. So there's an inherent relationship
between the layout and the typeface that you're using.

What about incorporating IAB ad units, which are always
specified in pixels, and which won't change as text size
increases or decreases?

Well, I think that comes down to control. It comes down to
designers on the Web needing to lose control, and that's
difficult for designers to do. I've mentioned this over the past
couple of days, and people like Khoi Vinh have been talking about
it for years; I'm only just coming round to his way of thinking,
I guess. It's not because designers are being difficult -- it's
the way we're schooled. It's part of our DNA: to control the
message, and control the design. So asking us to lose control is
actually a big ask, and I think that's why a lot of designers end
up going fixed -- because they can control it to a degree.

Maybe it's their clients that are unable to give up that
control?

Maybe it is! That's a big issue as well -- client expectations.
But client expectations can work in reverse as well, you know.
I've had clients who expect full-width, fluid layouts, and will
ask, "Why is there a lot of white space over here on the
screen?" So it works both ways.

In your talk, the definition of typography that you presented
was: "the mechanical notation and arrangement of language." My
question is, does the word "mechanical" imply that the art of
typography is more of a science than an art?

Yes, I think it does. I think type design -- the design of the
letterforms -- is more akin to art. There's a lot of art craft
in that process. To design a specific typeface so as to convey a
certain feeling or idea for a large body of text is very,
challenging. That's more art than science.

Typographic design, the stuff that I'm talking about, is more
science, really. There are rules, there are ways of doing things
... it's less about art than type design, absolutely.

Finally, I thought your presentation was fantastic, but I was
unable to work out whether you were pessimistic or optimistic
about the imminent arming of hobbyists with a whole stack of new
fonts to choose from.

Ha ha, yes, I was a bit of both, I think. I'm a little bit
pessimistic at the moment, because I feel like we're giving hand
grenades to kids. With the wrong tools in place -- such as Comic
Sans in drop-downs -- people are unable to make good design
decisions.

For designers, I think it's exciting, and it's a good place to
be. However, I think we lack the right fonts to use on the Web
at this stage. The difference between web fonts and fonts
designed for print is huge -- more than just technically, but in
the actual design of the typefaces themselves. I'd love to see
browser vendors or big corporations step up to the plate, like
Microsoft did, and invest in having web fonts designed and
distributed -- whether it's like TypeKit, or if it's the
foundries themselves -- so there's a way of putting the right
typefaces into the right hands. Because at the moment, putting
Garamond or Bodoni on the Web is fairly ordinary.

Thank you very much for your time, Mark, it's much appreciated.
And enjoy the rest of your time in Australia.

That's all right, thank you very much!



[1] <http://markboulton.co.uk>
[2] <http://www.markboulton.co.uk/journal/comments/web-directions-typographic-structure>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Business Secrets You Can't Live Without!

The Web Design 

Business Kit 2.0

 * 509 pages of proven techniques for building a successful web
   design business

 * 73 essential web business documents 

 * 100% money-back guarantee

Buy the kit now to take advantage of 
FREE worldwide shipping
https://sitepoint.com/bookstore/go/111/157cb2/


A HUNKA CODEBURNIN' LOVE  

When we first launched the SitePoint Reference sites [1], we
knew there were tons of great content in there. 

But sometimes it's more than just about the quality of the
content -- it's about how you work. CodeBurner for Firebug [2]
was the first step in our plan to help you put HTML and CSS
reference material into your normal workflow.

But let's face facts -- not everyone uses Firebug [3], or even
Firefox [4] for that matter.

So, that's why we're pleased to announce three new ways to have
yourself a helpin' of CodeBurner.

Let me introduce them:

1) CodeBurner for Mac OSX Dashboard Widget

If you're a Mac designer who spends most of your development
time in Safari, opening Firefox just to check some HTML isn't
exactly super convenient.



Install the new CodeBurner for Dashboard [5] widget and you'll
have the complete CodeBurner reference at the tap of a function
key. Mac-licious.

Download CodeBurner for Mac OSX Dashboard [6]

2) CodeBurner for Opera 

Of course, Firefox and Safari are just two of the great modern
browsers, as Opera devotees will be only too pleased to point
out.

And with James (brothercake) Edwards -- CodeBurner's author --
being an avid Opera fan, there was little chance of us
forgetting the Opera userbase with CodeBurner.



Download the CodeBurner for Opera Widget [7]

3) CodeBurner for AIR 

Okay, but why should you need to commit to any one browser to
enjoy the benefits of CodeBurner -- or even a single OS for that
matter?

Perhaps you like to sprinkle a little Linux Konqueror here and
maybe some Windows Safari there, because that's just how you
roll?

Well, happily my friends, we have you covered there too.

CodeBurner for Adobe AIR [8] gives you a complete HTML/CSS
reference without the need to even open a browser -- across
Linux, Mac, and Windows.



Download CodeBurner for AIR [9]

As if this new rainbow of CodeBurner flavors wasn't enough,
brothercake has even more to offer. These releases of CodeBurner
all come brimming with new features -- as do the updated Firebug
[10] and Firefox [11] plugins. For example, each tool now
contains a brand new CSS panel (shown above) that allows you to
load the style sheets from any site you visit, enabling you to
easily explore the CSS they use. The Firefox and Firebug
versions also sport a handy-dandy new lookup field in the status
bar of the browser.

It's all very slick. What's more, James is hinting at even
bigger things to come. Watch this space!

Read the blog entry:

     Web Tech Blog
by James Edwards

The CodeBurner Family Welcomes Three New Babies! [12] (5
comments)  

[1] <http://reference.sitepoint.com/>
[2] <http://tools.sitepoint.com/codeburner/firebug/>
[3] <http://getfirebug.com/>
[4] <http://www.mozilla-europe.org/en/firefox/>
[5] <http://tools.sitepoint.com/codeburner/dashboard/>
[6] <http://tools.sitepoint.com/codeburner/dashboard/codeburner-dashboard-1.5-en.wdgt.zip>
[7] <http://tools.sitepoint.com/codeburner/opera/codeburner-opera-1-5-en.wgt>
[8] <http://tools.sitepoint.com/codeburner/air/>
[9] <http://tools.sitepoint.com/codeburner/air/CodeBurner-en-1.5.air>
[10] <http://tools.sitepoint.com/codeburner/firebug>
[11] <http://tools.sitepoint.com/codeburner/firefox>
[12] <http://www.sitepoint.com/blogs/2009/10/20/the-codeburner-family-welcomes-three-new-babies/>


SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

If you think you're using all that CSS has to offer, think again!

Don�t be left behind!

Click here to download your copy of "Everything you know about CSS is 
wrong!" 

http://www.sitepoint.com/launch/6268fa



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

That's all for this issue -- thanks for reading! I'll see you in
a few weeks.

Alex Walker 
design@sitepoint.com [1]
Editor, SitePoint Design View



[1] <mailto:design@sitepoint.com>


Latest TutorialsSpice up your Firefox Extensions with a Dash of HTML
Want your Firefox extension to stand out from the crowd? Wish extensions were as easy to style as web pages? In this article, James shows us how to give an extension that extra bit of flair by mixing HTML right into an XUL document.

Full Story...Type Talk with Simon Pascal Klein  
Raena caught up with Simon Pascal Klein -- designer, speaker and self-confessed rampant typophile -- to talk about his upcoming appearance at Edge of the Web 2009. 
Full Story...Pushing Pixels on a Shoestring: Bring out the GIMP
There’s a lot of great desktop software available in the open-source world. In this article, Tim shows us a few cool tricks using GIMP, a free and open-source image editor. 
Full Story...
HOT DISCUSSIONS - - - - - - - - - - - - - - - - - - - - - - - - -

help with styling fieldsets
<http://www.sitepoint.com/forums/showthread.php?threadid=641703>

CSS - Test Your CSS Skills Number 29 (image replacement)
<http://www.sitepoint.com/forums/showthread.php?threadid=642149>

Hey, Melbourne SitePointers -- come and join us for a meet and
greet!
<http://www.sitepoint.com/forums/showthread.php?threadid=641990>

Complex form design
<http://www.sitepoint.com/forums/showthread.php?threadid=641165>


NEW BLOGS - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Web Design Blog: PIXEL PERFECT

Elements Of Design: Shape  (2 comments)
http://www.sitepoint.com/blogs/2009/10/21/design-elements-shape/

Create A Painted Text Effect In Illustrator  (3 comments)
http://www.sitepoint.com/blogs/2009/10/19/create-a-painted-text-effect-in-illustrator/

Obama Artist Lied About Photograph  (15 comments)
http://www.sitepoint.com/blogs/2009/10/18/obama-artist-lied-about-photograph/

The Sans Serif Typeface  (5 comments)
http://www.sitepoint.com/blogs/2009/10/16/the-sans-serif-typeface/

Elements Of Design: The Line  (4 comments)
http://www.sitepoint.com/blogs/2009/10/14/elements-of-design-the-line/

Make A Big, Beautiful Call-To-Action Button In Photoshop  (12
comments)
http://www.sitepoint.com/blogs/2009/10/13/make-a-big-beautiful-call-to-action-button-in-photoshop/

5 Tips For Creating An Effective Call To Action Button  (6
comments)
http://www.sitepoint.com/blogs/2009/10/12/5-tips-for-creating-an-effective-call-to-action-button/

Photoshop Mobile Released  (6 comments)
http://www.sitepoint.com/blogs/2009/10/11/photoshop-mobile-released/


Web Pro Business Blog: STRATEGIES FOR SUCCESS

Is Text Messaging Marketing the New Advertising Fad?  (6
comments)
http://www.sitepoint.com/blogs/2009/10/13/text-messaging-marketing/

5 Crucial Email Marketing Tips  (6 comments)
http://www.sitepoint.com/blogs/2009/10/10/email-marketing-tips/


News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS

Mozilla Joins Microsoft in Slamming Google Chrome Frame  (38
comments)
http://www.sitepoint.com/blogs/2009/10/13/mozilla-microsoft-slam-google-chrome-frame/

UK MoD "How to Stop Leaks" Document is Leaked!  (5 comments)
http://www.sitepoint.com/blogs/2009/10/11/uk-mod-leaks-document-leaked/




ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -

Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)

Find out how to get YOUR sponsorship ad in this newsletter and
reach thousands of opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com  


HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -

People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's Design View.


ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Send suggestions and comments to:
mailto:design@sitepoint.com


To subscribe, send a blank email to:
mailto:subscribe@sitepoint.com

The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php

The SitePoint Design View is (c) 1998-2009 SitePoint Pty.
Ltd. All Rights Reserved. No part of this Newsletter may be
reproduced in whole or in part without written permission. All
guest articles are copyright their respective owners and are
reproduced with permission.

SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA

You are currently subscribed to The SitePoint Tech Times as:
[email]

To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php

To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>

To leave this list, please visit: 
[unsubscribe]

Do Not Reply to this email to unsubscribe.


We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -