Archive for May, 2010

Smashing-magazine-advertisement in Web Development For The iPhone And iPad: Getting Started
 in Web Development For The iPhone And iPad: Getting Started  in Web Development For The iPhone And iPad: Getting Started  in Web Development For The iPhone And iPad: Getting Started

According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS.

Thankfully, Safari on iPhone OS is a really great browser. Just like Safari 4 for the desktop, it has great CSS3 and HTML5 support. It also has some slick interface elements right out of the box, which sometimes vary between the iPhone and iPad. Lastly, because the iPhone OS has been around for quite some time now, a lot of resources are available.

I know that most discussion about the iPhone OS platform centers on native applications. But you can still create powerful, native-looking applications using HTML, JavaScript and CSS. This article focuses on three phases of building and optimizing your website: design, coding and testing.

Before we get into the three phases, let’s look at some of the advantages and disadvantages of building a Web app rather than a native app.

Advantages of building a Web app instead of a native app:

  1. No Apple approval process or red tape, which is especially important given the terms of service dispute going on right now.
  2. Optimizing your Web app for other popular platforms like Android and Blackberry with the same code is much easier.
  3. You don’t have to learn Objective-C.
  4. If you’re charging users, you don’t have to share revenue with Apple.
  5. You get 100% control over the means of payment, promotion and distribution to users… which could also be a negative, depending on how you look at it.

Disadvantages of building a Web app instead of a native app:

  1. No presence in the App Store.
  2. Installing the app on a device is a little trickier.
  3. No access to some of the features that are native to the iPhone OS, such as push notification and GUI controls.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Design

Designing a Web app for this platform is much like designing a native app, so you’ll have access to some really great tools. Whether your wireframing tool of choice is pencil and paper or desktop software, you’re covered.

Inspiration

Not many people know that Apple has a “Web apps” section on its website, which is dedicated to showcasing optimized websites.

Apple-webapps in Web Development For The iPhone And iPad: Getting Started
Featured Web app on the Apple website

There are also some galleries elsewhere that showcase the finest in mobile Web design:

Paper

Paper prototyping has long been my tool of choice for wireframing new ideas or websites. What I really like about the tools below is that they provide perspective on the size and dimensional constraints that you’re dealing with. To successfully optimize a Web app for the iPhone OS, you have to cut things out. I suggest keeping the design minimal by wireframing with a sharpie and one of the tools listed below.

Notepod in Web Development For The iPhone And iPad: Getting Started
Notepod is great for sketching out rough ideas for the iPhone and iPad.

Digital

Once you know exactly how things will lay out in your design, we can move to the desktop and get specific. I really like wireframing with OmniGraffle, but sometimes diving straight into Photoshop makes sense. Either way, these tools are a huge help in making it happen.

Ipad-gui in Web Development For The iPhone And iPad: Getting Started
iPad GUI preview from Teehan + Lax.

Hungry for more? This article has a good rundown of additional design tools.

Coding

When you start coding for Safari on the iPhone OS, understanding how the browser works is important. Also, there are subtle differences in the iPhone and iPad’s browsers, such as how form-select boxes work. Most importantly, Safari has great CSS3 and HTML5 support, so you can use modern code without having to worry about cross-browser compatibility.

Education

Apple actually does a really good job of documenting Safari for the iPhone OS. The only shortcomings in my opinion are a lack of help with browser detection and window orientation. Read each of the articles below for everything you need to know about coding for this browser.

iPhone Human Interface Guidelines for Web Applications
This is a good overall summary of how Safari for the iPhone OS works. It’s certainly worth scanning through, because it has some good advice, although no specific coding examples.

iPad Human Interface Guidelines
This document does a good job of distinguishing iPhone elements and iPad elements. This is also worth scanning through, because it has some great advice on designing for the iPad.

Safari Web Content Guide
This document gets specific about the viewport, webclip icons, unique meta tags and event handling, among many other topics. Code examples are provided. I recommend reading it cover to cover before getting started.

Preparing Your Web Content for the iPad
This document provides tips on testing your website on the iPad, but its discussion on browser detection isn’t as detailed as I would like.

Browser Detection
David Walsh provides good examples of proper browser detection for the iPad and for the iPhone on his blog. Options for PHP and Javascript are included.

Detecting iPhone Window Orientation
This iPhone development tutorial from Nettuts provides a good example of how to vary style sheets according to the iPhone’s orientation.

Detecting iPad Window Orientation
Detecting iPad’s window orientation is much easier. Here’s what the code looks like (no JavaScript required):

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

jQTouch Mobile Framework

Jqtouch in Web Development For The iPhone And iPad: Getting Started

While the iPhone has a few mobile development frameworks, jQTouch is far and away the best. jQTouch gives you all of the tools to make your mobile Web app look and feel like a native one. Visit the website, and go to the demo website from your iPhone to get a feel for it.

My only complaint when building my first website with jQTouch was a lack of documentation and tutorials. I had to figure it out by playing with the demo website’s code. Here are some jQTouch articles that proved helpful in coding my first website:

Testing

A crucial and somewhat tricky part of building a website or Web app for the iPhone OS is testing. It’s a little more complicated than testing in a web browser, but familiarizing yourself with a couple of tools should make the process simple.

Liveview

Liveview in Web Development For The iPhone And iPad: Getting Started

Liveview is a really clever testing tool for when your app is in the design or initial coding phase. It allows you to broadcast an image from your desktop onto your phone so that you can see what it looks like. This is useful for getting text size and the visual specifics just right, because sometimes visualizing from Photoshop is hard.

Using the iPhone Simulator

In my opinion, no good iPhone or iPad emulators are available. The ones that are available are a waste of time. Much better is to download the latest version of the SDK and use Apple’s official iPhone OS simulator, which of course supports the iPad as well.

Setting up the SDK and a local testing environment takes a few minutes but is well worth the effort, rather than depending on unofficial and often inaccurate emulators. I’ve written a step-by-step tutorial about setting up a local testing environment that’s worth a read. One great thing about local testing is that it’s faster and does not require an Internet connection. I highly recommend going this route until you are ready to launch.

PhoneGap: Best Of Both Worlds?

PhoneGap is a game-changer for Web developers. If you would rather create your app in HTML, CSS and JavaScript but want it to run natively and have it be available in the App Store, then PhoneGap is the solution. It’s an open-source development tool that not only compiles your code for native use on the iPhone OS but also works for Android, Palm, Symbian, Windows Mobile and Blackberry devices.

PhoneGap also steers clear of the recently controversial 3.3.1 clause of Apple’s terms of service. In other words, apps compiled with PhoneGap will still be approved. Check out the list of apps that are built with PhoneGap to learn more.

Feeling Overwhelmed?

If you are, then some good hosted services will make it easier to optimize your website for multiple platforms without having to start from scratch. There are various levels of flexibility available, but all the services use a WYSIWYG-like editor to help you create mobile websites on the fly. Depending on your Web app and client, one of the following may be a good fit:

Mobify in Web Development For The iPhone And iPad: Getting Started
Mobify is a great alternative if you don’t care to build from scratch.

Conclusion

It’s a great day to be a Web developer, because non-desktop platforms like the iPhone OS open up greater possibilities for us to express our creativity and entrepreneurial savvy, while allowing us to adhere to modern Web standards. All of the tools you need to create great a Web experience on the platform that’s currently dominating the mobile space are out there. It’s up to you to make the most of them!

(al)


© Nick Francis for Smashing Magazine, 2010. | Permalink | 70 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

Smashing-magazine-advertisement in CSS Three — Connecting The Dots
 in CSS Three — Connecting The Dots  in CSS Three — Connecting The Dots  in CSS Three — Connecting The Dots

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

Connectingthedots1 in CSS Three — Connecting The Dots

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Where do I start?

One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.

Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.

Example #1: CSS3 Transitions

A safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.

Example 1a in CSS Three — Connecting The Dots

Start with your link CSS, including the hover state:

a { color: #e83119; }
a:hover { color:#0a99ae; }

Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.

a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}

You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:

a { -webkit-transition: color .4s ease-out; }

View the live example here

The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.

Example 1b in CSS Three — Connecting The Dots

To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:

border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }

To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:

border-nav a { -webkit-transition: border .3s ease-out; }

View the live example here

Examples

This is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:

Team Excellence
The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.

Team Excellence Transition in CSS Three — Connecting The Dots

Ackernaut
Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.

Ackernaut Transitions in CSS Three — Connecting The Dots

SimpleBits
The SimpleBits main navigation transitions over .2 seconds with linear timing.

Simplebits Transition in CSS Three — Connecting The Dots

DesignSwap
On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.

Designswap Transitions in CSS Three — Connecting The Dots

Jack Osborne
Jack Osborne transitions all of the blue links as well as the post title link on his home page.

Jackosborne Transitions in CSS Three — Connecting The Dots

Eric E. Anderson
Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.

Ericeanderson in CSS Three — Connecting The Dots

Example #2: Background Clip

When connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:

<div class="bg-clip">
<h3>kablamo!</h3>
</div>

Example 2a in CSS Three — Connecting The Dots

Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.

.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View the live example here

This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);

Example 2b in CSS Three — Connecting The Dots

Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.

View the live example here

Examples

This is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:

Trent Walton
An experiment of my own, combining bg-clip and @font-face to recreate a recent design.

Trentwalton Bgclip in CSS Three — Connecting The Dots

Neography
An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.

Neography Rotate in CSS Three — Connecting The Dots

Everyday Works
One of the earliest innovative implementations of CSS text rotation I’ve seen.

Everydayworks Rotate in CSS Three — Connecting The Dots

Panic Blog
The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.

Panic Rotate in CSS Three — Connecting The Dots

Sam Brown
Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.

Sambrown Rotate in CSS Three — Connecting The Dots

Example #3: CSS Transforms, Box Shadow and RGBa

What used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.

Example 3 in CSS Three — Connecting The Dots

Here’s the HTML:

<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>

Let’s set up the CSS for the RGBA Shadow:

.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}

Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.

RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.

Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:

.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}
.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}
.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}
.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}

View the live example here

Examples

Here are a few additional sites with these properties implemented right now:

Butter Label
This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.

Butter Boxshadow in CSS Three — Connecting The Dots

Hope 140
Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.

Hope140 Boxshadow in CSS Three — Connecting The Dots

For A Beautiful Web
For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.

Forabeautifulweb Boxshadow in CSS Three — Connecting The Dots

Simon Collison
Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.

Colly1 in CSS Three — Connecting The Dots

Example #4: CSS3 Animations

If you really want to push the envelope and truly experiment with the latest CSS3 properties, you’ve got to try creating a CSS3 keyframe animation. As a simple introduction, let’s animate a circle .png image to track the outer edges of a rectangle. To begin, let’s wrap circle.png in a div class:

<div class="circle_motion">
<img src="/img/circle.png" alt="circle"/>
</div>

Example 4a in CSS Three — Connecting The Dots

The first step in the CSS will be to set the properties for .circle_motion, including giving it an animation name:

.circle_motion {
-webkit-animation-name: track;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
}

Now, all that remains is to declare properties for each percentage-based keyframe. To keep things simple here, I’ve just broken down the 8 second animation into 4 quarters:

@-webkit-keyframes track {
0% {
margin-top:0px;
}
25% {
margin-top:150px;
}
50% {
margin-top:150px;
margin-left: 300px;
}
75% {
margin-top:0px;
margin-left: 300px;
}
100% {
margin-left:0px;
}
}

View the live example here

Examples

A few examples of CSS3 animations online now:

Hope 140
Hope 140 subtly animates their yellow “Retweet to Donate $10” button’s box shadow.

Hope 140 Animation in CSS Three — Connecting The Dots

Hardboiled Web Design
Andy Clarke puts iteration count, timing function, duration and delay properties to good use when animating a detective shadow across the background of Hardboiled Web Design.

Hbwd Animation in CSS Three — Connecting The Dots

Optimum7
Anthony Calzadilla has recreated the Spider Man opening credits using CSS3 with JQuery and HTML5. You can also learn more about the process in his article “Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!”.

Optimum7 Animation in CSS Three — Connecting The Dots

The Many Faces Of…
The Many Faces Of… animates the background position of a div to create an effect where characters creep up from the bottom of the page.

Themanyfacesof Animation in CSS Three — Connecting The Dots

Trent Walton
I recently wrote a post about CSS3 usage, and animated a blue to green to yellow background image for the masthead.

Cssthree In Transition in CSS Three — Connecting The Dots

OK, Dots connected! Now what?

Yes, all of this CSS3 stuff is insanely exciting. If you’re like me, you’ll want to start finding places to use it in the real world immediately. With each new experimental usage come even more concerns about implementation. Here are a few of my ever-evolving opinions about implementing these properties online for your consideration.

  • CSS3 enhancements will never take the place of solid user-experience design.
  • Motion and animation demands attention. Think about a friend waving to get your attention from across a crowded room or a flashing traffic light. Heavy-handed or even moderate uses of animation can significantly degrade user experience. If you are planning on implementing these techniques on a site with any sort of A to B conversion goals, be sure to consider the psychology of motion.
  • Don’t make people wait on animations. Especially when it comes to hover links, be sure there is an immediate state-change cue.
  • Many of these effects can be used in a bonus or easter-egg type of application. Find places to go the extra mile.

This is a group effort. Don’t be afraid of failure, enlist the help of other developers, join the online discussions, and above all, have fun!

Further Reading

Related Articles

You may be interested in the following related posts:


© Trent Walton for Smashing Magazine, 2010. | Permalink | 71 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

Smashing-magazine-advertisement in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die
 in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die  in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die  in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die

With all of the buzz going on in our Web community about HTML5 and Flash, I’ve decided to dive into the fray and offer my thoughts as a 10-year veteran of both Web design and Flash development. Let me preface by saying that this article is opinion-based, and that information is certainly out there that I am not aware of, and that none of us truly knows what the future holds.

New: For a German translation of this article – please follow this link.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Use Of Flash Till Now

Macromedia Logo1 in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die

When Flash broke on the scene, it was a fairly revolutionary tool… and much simpler to use than it is today. I first started using it in 1999, when it was being produced by Macromedia. The current version then was 4. The simple benefit was that it allowed the average computer user to design graphics and create simple user interactions with almost no skill: quite a feat in the messy and over-complicated world of Netscape and IE4.

People didn’t take long to start using Flash as an engine to create full and complete websites, especially as the versions continued their march upward and ActionScript gained footing. Quite simply, it sped up development time and wow’ed all users with its animations—a far cry from the static-text Geocities websites around them.

But Flash started to be overused soon after. One can compare it to HTML tables, a framework that revolutionized the industry for a time, became overused and then receded to its proper role (which in this case was to structure data points rather than website columns).

Why They Don’t Have to Fight

I’ve read a lot of blog posts lately about HTML5 taking on Flash like a prize fighter and kicking it off the scene in some epic battle of Web standards and pragmatism. But this is a false scenario: HTML5 and Flash are not meant to be fighting in the same ring, or to be fighting at all. Each has its proper place on the Web and in the graphic community.

Flash’s Place

Interestingly enough, Flash’s place is not entirely on the Web at all, and certainly not to take over full website designs (or those dreaded Flash intros either). While bits of Flash will continue to be used in Web design for advertising and gaming, it will truly shine in two primary areas.

The first area is the corporate setting. I work part-time as a Web developer on the multimedia team of a major international telecommunications company. The majority of the team consists of Flash developers, and there is a huge demand for more of them. So, while Flash may be shrinking in the Web industry, it is booming at the corporate level through rich media, training and learning solutions, Intranet applications and the like.

While Flash may be simplistic and annoying for a website, its capabilities for database interaction, PHP integration, XML sourcing, external ActionScript 3, extensible plug-ins and import and export functionality make it an extremely robust tool that far outweighs the competition for certain uses. Flash has a profitable future in corporate settings.

The second area is still budding and turbulent: mobile platforms. Web content aside, if Flash could be used to produce applications and rich interaction on a variety of mobile platforms, it would empower designers and developers everywhere to contribute to a booming mobile industry (and give us the opportunity to make a sweet profit while we’re at it).

Apple Vs Adobe For Dummies1 in HTML5 And Flash: Why Its Not A War, And Why Flash Wont Die

Why would Flash do so well in the mobile space compared to Web-based tools and frameworks? First of all, because Flash is a powerful development tool, beyond its graphic and animation capabilities. ActionScript 3 has brought serious improvements to the overall structure and functionality of applications, allowing developers to create powerful apps.

Secondly, Flash being used across multiple platforms brings a much higher probability of consistency and compatibility. Even if comprehensive Web standards were supported across all mobile devices, there is no guarantee that we wouldn’t run into the same cross-browser headaches on the variety of mobile browsers. If Flash were supported on all mobile devices, I could be reasonably certain that my Flash module would run smoothly on each one.

It’s like my parents fighting. I love Adobe. I love Apple. This really sucks.

— Terry Ranson

The Adobe and Apple cat fight disagreement may be discouraging, but consider that Android is releasing a Flash-enabled framework, and Adobe is releasing Flash Player 10.1 for smartphones, and Research in Motion has joined Adobe’s Open Screen Project, essentially committing the BlackBerry to Flash in the near future.

Flash should never have been used to the extent that it was purely for Web design. But it has capabilities beneath the hood that make it an extremely valuable resource for certain uses, particularly in the mobile space.

HTML5’s Place

HTML5’s place, on the other hand, is entirely on the Web. And this is an outstanding development. I remember switching from table-based designs to CSS, a liberating move that gave Web designers a freedom that only we could truly appreciate. Moving forward with standards-based browsers and rich functionality via CSS3 and HTML5 will take our industry to new heights and lead to a flourishing of gorgeous websites and functionality that we’ve never before witnessed.

Plenty of articles and resources outline the capabilities and benefits of HTML5 (I won’t cover them here), but rest assured that it is the future, and a sweet future at that.

The Web In Two Years

Where will the chips fall when the Web design industry reaches its next stage? I may be idealistic, but I would like to see (and I think we will see) the following:

  • HTML5 and CSS3 as the new Web standard;
  • All browsers being compatible and standards-based;
  • Flash being used more limitedly as a tool for multimedia and gaming and interaction, both online and offline;
  • Mobile platforms and mobile content development being the newest and fastest-growing subset of the industry:
    • Sporting Flash capabilities for robust application development across all platforms;
    • And offering HTML5, CSS3 and complex JavaScript capabilities for mobile browsing.

Conclusion

Flash has been misused and overused for the past eight years, spreading its tentacles too far into the fabric of Web design. But rather than getting beaten out of the picture by these practical new Web frameworks, Flash will retreat to its proper place: those niche areas where it belongs and can truly excel. The first niche is multimedia and learning solutions for the corporate space. Only time will tell if Flash finds its second niche on mobile platforms.

(al)


© Luke Reimer for Smashing Magazine, 2010. | Permalink | 264 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

Smashing-magazine-advertisement in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
 in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)  in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)  in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

Today we are glad to release two useful cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.

10 05 13 Csshelpsheet 450x450 in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

Download the cheat sheets for free!

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

Css-preview in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

CSS3-Help-Sheet-preview in CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

Behind the design

As always, here are some insights from the designers:

“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3.

We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE).

We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites.

Thank you, guys. We really appreciate your work and your good intentions.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Related Posts

You may be interested in the following related posts:


© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 64 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Women In Web Design: Group Interview

POSTED IN Blog | Comments Off

Smashing-magazine-advertisement in Women In Web Design: Group Interview
 in Women In Web Design: Group Interview  in Women In Web Design: Group Interview  in Women In Web Design: Group Interview

A couple of weeks ago we published the article Expert Advice for Students and Young Web Designers, in which we presented a group interview with professional designers and developers. We tried to find answers to questions that are particularly useful and interesting for those just starting to design websites for a living or considering diving into the Web design industry.

In the comments to that article, many readers wished we’d invited more female designers on the panel — in particular because, “There is no way of discerning how the experience of a female designer might differ, simply because there is a complete lack of representation.” So, we decided to prepare an article featuring specifically professional women designers giving their expert advice for young Web designers.

Today, we are glad to present a group interview of successful women working in the Web design field. These 16 female professionals will discuss inspirational topics such as the influences that have had a big impact on their work, as well as practical details, like how they managed to get where they are today. Of the 15 questions we asked, one obviously had to be about how these women have positioned themselves in this male-dominated community. We also look at the challenges they face in their careers as designers. So let’s get started by meeting these people, whom we thank once again for their thoughtful interviews. Here are their names and positions:

You may be interested in the following related posts:

1. Who are your role models, and what styles influence your work the most?

Sarah Parmenter in Women In Web Design: Group Interview
Sarah Parmenter

Sarah Parmenter

Rachel Andrew was a great role model to me. I always remember seeing her in .Net magazine. She was the one who really made me realize that it wasn’t just a boy’s job and that girls were also flourishing in this “new” medium.

As far as designs that influence me, I hate to be cliche, but Apple was the one really pushing its own style early on. Its style was heavily designed beautiful elements on fairly simplistic, white space layouts. This is something I looked up to and tried to model my early websites on.

Jan Cavan

I’ve always been a fan of the works of Michael Heald of Fully Illustrated. As for the way I design, I’m not sure if any particular person has influenced me, but I certainly find inspiration from the work of other designers and my surroundings.

milo317

Role model: none. Influenced by contemporary architecture and classic art.

Grace Smith

I don’t really have a Web design role model. There are those in the industry who have my upmost respect, such as Andy Budd, Jason Santa Maria and Mark Boulton (to name just a few). Alongside these, I like to look outside of Web design to people like Seth Godin, Jonathan Ive and Michael Bierut, because constantly looking only to those in your industry can be limiting to your growth as a designer.

I feel my style as a Web designer has slowly evolved but has been pretty consistent since I started freelancing. I like detail, attention to typography and giving the content room to “breathe” and flow. I would probably say, then, that the move towards grids and minimalism in Web design has influenced my style the most over the past few years.

Elena Scanteie

I don’t really have a specific role model. My role model is imaginary. My path to hopefully perfecting Web and blog design takes a lot of different inspirations. I bookmark three to six (portfolios, websites, blogs) per day, but I hardly find time to look over those in detail. I do appreciate the large websites with a clean professional look, and also I like those small blogs, websites, personal pages that have an inspiring graphic element that makes me say, “That is a cool site!”

I don’t like naming designers because I’m more likely to just take a wide variety of URLs from many different designers. Sometimes a designer can make one great website, and then the next project is a complete bomb, so giving up names isn’t what I do. The last bit also applies to me. :) Anyway, after a great project, a designer must expect some dips in the road. Success after success is an illusion!

2. Is it difficult for female designers to find their place in the design community?

Amber Weinberg in Women In Web Design: Group Interview
Amber Weinberg

Amber Weinberg

In design school almost every student was female, so I don’t think so. I find that most of my clients (agencies and other freelancers) are male, but it is definitely not rare to see women designers, and I have quite a few as clients. 99% of what I do is actually front-end development (CSS, HTML, WordPress), which I think is even rarer to find a woman in. I get comments (which are annoying, honestly) from men that they’ve never seen a woman developer before… it makes me feel like an nearly extinct bird or something :)

Inayaili de Leon

I wouldn’t say it’s difficult to find a place, but it certainly is a community with predominantly male designers. I guess if you do good work and are generally a nice person, you’ll have as much success as any of your male counterparts.

Grace Smith

I personally don’t believe it is difficult. Talent speaks much louder than gender. Good work is good work. I’ve never had any issues with being a woman in the industry, and I feel I’ve had the same opportunities as my male counterparts. Although, it is still disappointing to go to conferences and rarely see many female speakers. Is this because gender is still a factor in the industry, or is it simply because there are fewer of us?

However, I think part of the problem lies in the lack of willingness among many female designers to get involved in self-promotion. I believe as a whole that we don’t tend to bang the drum about our work as hard or market ourselves as strongly. In Jeffrey Zeldman’s article “Women in Web Design: Just the Stats,” he writes in the comments something that reinforces my thoughts on this:

More men brag than women; it seems to be a culturally learned behaviour. Several absolutely brilliant women I know cannot be persuaded to write or lecture or otherwise promote themselves… There’s a concensus that women, however smart or talented, are less likely than men to put themselves forward. We all miss out by not hearing their voices.

Without a doubt, the industry is male-dominated. For example, just in the UK, women make up only around 39% of those in the design industry (Design Council). I think this is mainly because Web design is still confused with IT in general. Many females feel you have to be a math, science or programming whiz to pursue it as a career and simply don’t believe they have the ability.

Jan Cavan

Sometimes it is, and yes, it is a male-dominated industry. I didn’t really realize this until there was one time I didn’t get a job that I applied for solely because I was female.

3. How did you manage to get where you are now? What did you study, and how did you become interested in design?

Kristi Colvin in Women In Web Design: Group Interview
Kristi Kolvin

Kristi Colvin

I am primarily self-taught, though I did take some graphic design courses at a community college in Houston, Texas, from a wonderful, real-life experienced former corporate art director. I floundered a bit in my 20s (I’m 44 now), seeking the right career path. I did some creative things, like visual merchandising and catering, where I learned skills that factor into projects I do now. I attended a university in my home town for some basic courses, but then moved to Houston and didn’t know what I wanted to do.

The Web as a medium in which you could express creativity was just taking off (this was in the mid ’90s), and between the graphic design courses and teaching myself HTML (no courses existed yet to teach Web design), I just sort of wound up doing website design in addition to the print design I was doing for some book authors.

I created a fairly popular vegetarian website and used it to teach myself all sorts of things, in addition to doing all the recipe creation, article-writing and graphics every month, like a monthly magazine. I also implemented a cookbook script, email for users, greeting cards and other technical features, and used all of those things as experimental lessons. Very early on, I met a developer who wanted me to design interfaces for his Web products, and that is how I began designing software and learning about user experience and human factors analysis. Because of the work I did for him, I wound up becoming a specialist in software design, usability and product marketing.

But the experience with my vegetarian website is what gave me the confidence to pursue design as a career. I did not take the typical path of being taught by an instructor and then going out and getting a job to gain experience. I taught myself what I was interested in, gained experience and, once I had mastered the skills of my trade, offered my services doing that for others. I’ve been mostly self-employed since about 1993 for that reason.

Molly E. Holzschlag

I come from a background in communications, writing and media studies. So, being more than design-specific, I have long been fascinated by how we communicate. Whether this communication is visual, written or any combination of media makes little matter to me. I’m interested in what can be improved in the way we communicate. Honestly, I cannot remember how far back this fascination goes. I’m sure it started very early in my life.

Rachel Andrew

I’m an ex-dancer and old enough that Web development couldn’t have been a career choice when I was at school anyway!

I started developing websites at a very basic level in 1996. At that point, there wasn’t a lot to learn, so I developed my skills as the Web developed. Initially, I thought that, with an arts background, “design” might be something I could do. As time went by, the more technical side of the Web became more interesting to me, and I am purely a Web developer these days. I don’t do any design at all.

Adelle Charles

I’ve always loved art and design since I was a little kid. I loved to draw and paint. As I got older, I realized that anything but math would suit me well, and that’s when I realized that anything creative was for me. I went to college at the Rochester Institute of Technology in New York and received my BFA in graphic design in 2001. After college, I worked for a few design firms and then fell in the television industry. I worked as the art director for a CBS and FOX affiliate for six years until it was time do my own thing. I started Fuel Your Creativity over two years ago, then met my business partner Joshua Smibert, and we co-founded FUEL. The “start-up” life and love for entrepreneurship grew from there.

Lynda Weinman

I am not actually a designer. I teach computer design tools and have built a strong sense of design aesthetics over my years of being around design and designers. I am self-taught in all areas, with no formal design or computer training. I followed my interest and passion and worked hard to teach myself things — plus added in a little bit of guts and tenacity.

Lisa Sabin-Wilson

Design was always a hobby of mine, dating back to the mid ’90s. I do not have any formal education in design or Web development. Like many out there, all of my skills and knowledge come from self-teaching and hands-on experience. I started my adult life in a career as a registered nurse and did design as a hobby on the side, and it just grew from there.

To get my name out there, I spent the first few years in design giving away my work for free. This manifested in things like downloadable HTML themes and blog themes for Movable Type and WordPress. I also released several free WordPress themes to the public back in 2003 and 2004. That is a good way to circulate your name and talents; if your stuff is good, people will use it.

From there, my design business evolved organically through word of mouth and through people using my work that I was giving away. My business grew and flourished in 2003, so much so that I was able to earn a decent enough living to leave my full-time job as a nurse and to focus on work that I love doing and that allows me to work from home and spend more time with my family.

[What did you study, and how did you become interested in design?]
I never studied a bit of design, aside from reading Smashing Magazine — heh :). I became interested in design through an insatiable interest in and curiosity about everything related to the Web and the Internet.

[When did you realize that you'd like to design on a daily basis?]
I slowly built my design business as a hobby. When my days started bleeding into my nights and I had more work than I could handle alone, I realized that I needed to give up one thing or the other. Either my nursing career had to go or my design work had to go — or at the very least be tempered. I realized that I would always have my nursing degree, but not always have the opportunity to work for myself, doing a job that I love and making a decent living at the same time.

When I was sleeping only 15 to 20 minutes every night by doing both jobs, that is when I realized I wanted to do design on a daily basis.

Sarah Parmenter

I was always drawing from a young age. I remember my parents giving me rolls and rolls of wall-lining paper to draw on because I used to run them out of paper so quickly. As long as I had a pencil, crayon or felt tip in my hands, I was happy. Going digital, though, was something I did much later on. My school wasn’t great on technology facilities, so I studied fine art until I left school, all the while practicing Web coding and digital graphic design in the spare hours I had at home. I guess design was always in my blood. I’m not sure where it comes from, though, because neither of my parents are like this at all. Web design interested me when the Internet was still in its infancy, and I was lucky enough to jump on board at that time, when we were still designing table-based layouts!

4. What are the most difficult challenges a designer faces in her career?

Eva Lotta Lamm in Women In Web Design: Group Interview
Eva-Lotta Lamm

Eva-Lotta Lamm

I think one of the biggest challenges is to make your designs and ideas reality. Developing a great concept or design is one thing, and making that concept a reality is quite another. On this path, you face a lot of challenges and obstacles. You have to communicate your design to stakeholders, clients and developers; you have to convince those who make decisions that your solution is the right thing to do; you face time, budget and technical constraints, and you have to decide where to compromise and where to defend the “soul” of your concept. (Mike Kruzeniski gave quite an interesting talk at Interaction10 about how his design team approach this problem at Microsoft: “Poetry and Polemics in Creating Experience.”)

milo317

Finding your own unique style, staying up to date on the latest technology and gaining a presence in the design universe.

Gisele Jaquenod

Maybe it’s because I am a very positive person, but I can’t really think of “difficult problems.” But there are challenges for sure, as in every profession. I for one have experienced, when developing projects, that making your opinion heard is sometimes hard, because people (employers or co-workers) consider the perspective of designers to be too artistic or utopian and not practical or commercial enough. I don’t think they realize that many designers are shaped as much by marketing as by visual language. We can be good advisors. But of course, it’s just a matter of showing what you’re made of; eventually they’ll realize you can be a much more important piece of the puzzle.

Claire Baxter

Looking back over my career, I can see that it’s easy to find oneself stuck in a creative rut. Although this happens to every designer at some point, continually striving to push the limits of your own creativity and of the status quo is essential to maintaining your footing in the design field. No one makes any waves by doing what their colleague did last week or last month. So, I’d say that finding inspiration in unlikely places keeps me busy and keeps my work from going stale.

Kristi Colvin

The term “designer” is very broad and can create challenges in understanding one’s skills and limitations. Some people are great designers and not technically skilled at implementation. Others are more technical than design-savvy. I think the first challenge is to determine what you’re truly good at and then, if you’re self-employed or seeking employment, being able both to demonstrate your talent and to craft a polished message, which can be hard.

I can do a client’s website so much faster than my own portfolio, for example. Sometimes knowing what to emphasize or focus on is hard, but you have to find the right words to communicate in a way that is understandable to the people who hired you (those people themselves not being designers). A great designer can increase a company’s revenues more than they realize (design is a subliminal selling aid), so finding the right creative fit and giving a designer room to create, experiment and push the envelope is really important to getting their best work.

Another significant challenge for designers is simply keeping up, especially if they’re self-employed, because now they have to deal with marketing themselves and all of the client administration and accounting. Throw in social media, and it’s hard many days just to find time to design anything!

5. What would you recommend to students who aspire to working in design?

Lisa Sabin Wilson in Women In Web Design: Group Interview
Lisa Sabin-Wilson

Lisa Sabin-Wilson

Never stop learning, and never stop seeking out new knowledge. Technology moves at an extremely rapid pace, so while you may have graduated with that design degree, that doesn’t mean your schooling will ever end. A big part of my daily focus is keeping up with emerging and ever-changing technology, which moves in the blink of an eye. Just when you think you have it all figured out, you realize you don’t. Just make sure to leave enough time in your routine to refresh your brain on everything that is happening around you from a technology standpoint.

Molly E. Holzschlag

No matter the field, I believe we must follow our passion and gifts. Not to do so is to disregard the fact that we have each been given something unique and special in this world and that part of life’s challenge is to honor that. In turn, with confidence and strength in our convictions, I believe there is nothing we as individuals or humanity cannot do.

Adelle Charles

Get into the field early, and gain experience through internships, if possible. Work for free. No, not free like that. Gain the kind of experience you’d like by getting in touch with some awesome brands and asking them if they’d be cool with you re-designing a campaign or logo for your portfolio. That’s much better than making stuff up, like some people do. You’ll then have those connections, and who knows what possibilities will turn up from that outreach. Really concentrate on your preparation and presentation.

Claire Baxter in Women In Web Design: Group Interview
F. Claire Baxter

Claire Baxter

Don’t be afraid to work outside of your comfort zone. This helps you find your voice and personal style. Seek out and follow constructive criticism. Take a business course, especially if you aspire to work as a freelance or run your own studio. Familiarize yourself with as many artistic disciplines as possible. If you’re an aspiring Web designer, learn the fundamentals of print design and layout (and vice versa). A well-rounded understanding of multiple design disciplines will help you better communicate with a team of multi-disciplinary artists as you move through your career, which is invaluable.

Kristi Colvin

Experience is much more critical than formal education. School projects may not contain elements of real-world issues, such as time and budget constraints, difficult client communications, mistakes at the printer, failed technology. Experience also helps build a portfolio, so in addition to school projects, I would try to do freelance work, intern at a real agency or creative place or even create your own real projects: blog, software, directory, something that will serve as real job and teaching experience.

6. How does a student determine whether design is for them or they should pursue another career?

Rachel Andrew in Women In Web Design: Group Interview
Rachel Andrew

Rachel Andrew

Do what you love doing. That goes for any career. If you are bored with the industry now, then it probably isn’t for you! If you love what you are doing, then work and fun can merge a lot of the time, which is a much better way to live than dreading the 9:00-to-5:00 every day. Yes, you need talent, but enthusiasm, a love of what you do and hard work can get you a long way. :)

Inayaili de Leon

If you don’t love it, then you should pursue another career; and that applies to any career, right? When you love design, you want to know more. You look at the world around you with your “designer eyes,” and you can’t really do it any other way. You can’t shut off. This is both a cursing and a blessing, which you’ll learn to live with and enjoy.

Claire Baxter

A genuine love of what you do, coupled with a desire to set yourself apart from the pack and continually push the limits of your creativity are traits inherent to any successful designer. Given the transient nature of our industry, it’s essential that designers perpetually strive to create something newer, bigger and bolder. Without this passion, drive and initiative, designers will find themselves disheartened and stuck in a creative bottleneck. So, I guess the short answer to this question is: passion (although a little patience and a thick skin wouldn’t hurt either). If you enjoy doing what you do and have the talent and diligence to see it through, go for it!

Sarah Parmenter

You have to be enthusiastic about everything around you: fonts on a movie poster, the way a label on a bottle of milk is designed, everything. Liking design just isn’t enough these days. I gave a talk to students wanting to pursue a Web career a couple of years back, and by the end of it about half still wanted to do it and half didn’t. I gave them a balanced talk on the ups and downs of Web design.

Sometimes things sound more glamourous than they actually are. As wonderful as the worldwide and local conferences and other meet-ups sound, the reality is that you sit at your desk 300-odd days a year. Some people just aren’t cut out to sit in front of a screen eight-plus hours per day, and that’s absolutely fine.

7. How did you adapt your skills and knowledge to the challenges you faced?

Adelle Charles in Women In Web Design: Group Interview
Adelle Charles

Adelle Charles

I listened, read and learned from various outlets. My own personal experiences certainly helped lead me to where I am today. I’m sort of stubborn, so I don’t give up until I’ve achieved all of my goals!

Amber Weinberg

The school I went to was really “old school” in that it really only taught print design principles. It had one Web design class, but it was behind in terms of using CSS and tables. I feel bad for my fellow students, because I know a lot of them are struggling to find work, because print design is a shrinking field, and most of them aren’t holding design jobs right now. Lucky for me, I got into Web design and development when I was kid, so it was easy for me to adapt the print design principles that I learned to Web design, until I was able to freelance on my own and find a niche fully in development.

Molly E. Holzschlag

As a head-strong, independent personality, my experience is likely different than that of many others. Instead of starting out with a company and then moving to freelance, I started out freelance and stayed that way for the majority of my career. It wasn’t until I turned 46 that I decided to accept an actual employee position with Opera Software, if for no other reason than I finally found a company whose ethics and ideas with regard to the Web, the world and communications are most compatible with my own. The biggest challenge? Remembering that I have bosses! I tend to work quite well with others but am coming from a lifetime of making my own decisions without checking with powers that be. This is a change for me, and I’ve made a few blunders in this regard.

Rachel Andrew

I’m completely self-taught, which I feel has always been advantageous to me, as I continue to teach myself new things all the time. You have to when you work in this area.

Lynda Weinman

Every new project and client is an opportunity to learn a new skill. I love to learn, and I view mistakes and setbacks as lessons, not tragedies.

8. What are the most significant things you wish you had known when starting out designing websites?

Elena Gafita in Women In Web Design: Group Interview
Elena Scanteie

Elena Scanteie

There are many things that I should know about, but one that bothers me constantly is the lack of self-promotion. It sometimes makes me regret the road I’ve taken, and other times it makes me work that much harder to achieve my goals. This job takes a tremendous amount of time, and you hardly notice when the hours have passed and you haven’t gotten the result you desired.

Eva-Lotta Lamm

Almost all the things I know today plus the things I’ll learn in the future. Being a good (and hopefully great) designer is the sum of a lot of small and big bits of actual knowledge but most of all experiences and hours of practice that you’ve put in over the course of your career. There is no recipe or quick top-10 tips list that make you design great websites overnight. But some fundamental things will help you on the way to becoming a better designer:

  • Being able to listen (users, customers, clients, stakeholders, anybody who is great in his or her field).
  • Being open-minded and curious (to discover and explore the unknown).
  • Being passionate about what you do. Doing just the minimum to get by or doing things you are not really interested in will not push you to improve your skills and thinking.
  • Working hard. Revising things. Doing them again, but better.

Oh, and one easy thing: write and sketch down everything. Capture your thoughts and ideas when they pop into your head. It’s amazing how quickly you forget a lot of good stuff.

milo

IE hacks ;P

Gisele Jaquenod

Oh, so many things. I have learned all I know about making websites by making them, so for me the whole road has been a learning experience. But I would have loved to have known much more about usability in general terms, not just Web design. You can get so many wonderful things from studying a bit about it.

Claire Baxter

It took a while for me to realize that quality is better than quantity. When I first started designing, I over-extended myself, thinking I was somehow obliged to take on any project that presented itself. As a result, I got a lot of work, but very few projects made it into my portfolio. I’ve since learned to sit back and analyze a project’s scope before committing time and resources to the client. That’s not to say that I don’t still occasionally over-extend myself, but long hours are the nature of the business!

Kristi Colvin

How to do more technical things so that I could do them all by myself. In truth, I don’t want to learn technical necessities like JavaScript, fancy CSS, Flash animation, etc. But when you have a great idea and can do the website mostly yourself, not knowing how to do these things can slow you down. These days, though, I don’t do anything technical (I work mostly in Photoshop and Illustrator), and I let developers bring my designs to life. The downside, even still, is that I’ll use a WordPress theme or something to make a website myself, and I’ll get a little stuck because of a technical issue that I cannot fix myself.

9. What is the most disappointing mistake or problem that you’ve encountered in your careeer?

Lynda Weinman in Women In Web Design: Group Interview
Lynda Weinman

Lynda Weinman

When I was teaching at Art Center College of Design, I wanted to become the Computer Graphics Department Chair and was overlooked for consideration. I remember crying in the office of the Graphic Design Chair (the only time I’ve ever cried in someone’s office!) and telling her prophetically that I might someday be the most famous computer graphics teacher to ever work here. I left right as my writing career was taking off and had hundreds of thousands of fans of my books encouraging me to go off on my own. Going off on my own turned out to be the best move I ever made, but I was heartbroken to leave Art Center and really felt that I could have transformed its department.

Amber Weinberg

The lack of professionalism between clients and freelancers and between freelancers themselves. It’s common for me to see freelancers cursing on their Twitter accounts or posting inappropriate things. Not only do clients see this, but it scares them away. This is also a huge faux-pas if the freelancer is using the account for their business (which most are). I also have had clients try to get extra revisions without paying full price or without paying the full rate. They would never do this to a doctor, lawyer or other professional, so why would they do it to us? You should never take someone on as a client who does this.

Inayaili de Leon

I guess one of the biggest problems is evaluating yourself on a monetary basis. You always end up devaluing yourself, especially in the beginning.

Grace Smith

The most disappointing problem I encountered was a non-paying client. It was at the beginning of my freelance career, and fortunately it was only a relatively small amount. But it did teach me the importance of choosing clients wisely and just how essential a rock-solid contract was.

Kristi Colvin

Honestly, myself. I was told just yesterday that I have always and continually under-priced my services, which was kind of hard to hear but not inaccurate. I have also stopped and started a lot: rebranding, taking a job then going back out on my own, etc. And that has hurt me overall, although I have stabilized and committed to my own brand and changed my company around this year to rectify that.

One of the things I should have done differently in the past (but which I have done now) is find a strong partner who has skills that I lack or don’t have time for, such as business management. I brought on a CEO to do business development and manage this company so that we can grow and so that I have time to create and do the things that help our clients succeed and focus on products and new ideas and opportunities. One person usually can’t do it all. Finding a great partner or company environment that allows you to explore and do your best work is often the difference between a happy designer and a struggling one.

10. What should students and new designers focus on outside of their course work to advance in their careers?

Grace Smith in Women In Web Design: Group Interview
Grace Smith

Grace Smith

I think it’s important for any student or designer to take the time to be involved in the local Web community around them. Learning and sharing from others who are already in the field you’re aspiring to can only help to advance your knowledge of the industry itself, which will make you a more well-rounded designer.

It’s often through these types of events and conferences that we meet people and companies who share our interests and goals (which creates opportunities to work together), which is of course exactly what you want as a person just starting out in their career.

Molly E. Holzschlag

World culture and languages, history, art, philosophy, architecture, food. Also, travel: find out what others experience, and get a taste of what the world is really like, not just what we see through familiar media. Be social, be friendly, learn as much as you can about diversity and humanity. And ultimately work constantly towards improving oneself in all ways, personally and professionally, no matter how often we might stumble or be overwhelmed.

Rachel Andrew

Do real-world projects, whether it’s developing a website for a group, church or friend’s business or contributing to an open-source project. Real-world experience gives you something to put in your portfolio and helps you apply the skills you are learning in practical ways.

Lisa Sabin-Wilson

In my studio, I have three different types of “designers”:

  • The guy (or gal) who purely does design (that is, graphic design with Photoshop, Adobe, etc.);
  • The guy (or gal) who does not do graphic design but can code some seriously sexy CSS and develop themes in HTML, Flash and different CMS tools;
  • The guy (or gal) who does both.

This last one, the one who does both, brings home the biggest dollars from our projects.

11. What job-search advice do you have for recent graduates?

Jan Cavan1 in Women In Web Design: Group Interview
Jan Cavan

Jan Cavan

Love what you do, and keep on practicing! Start building you own Web presence too!

Eva-Lotta Lamm

My advice would be to not leave it until graduation to start doing “real” jobs. It’s important to get real job experience early on, be it through internships, small freelance jobs or volunteer work. Experience outside of university projects helps you build an interesting portfolio and get some ideas about how design works in the professional world. Internships and freelancing are also great for building a first network of contacts and for demonstrating that you are great to work with, which can often lead to a “proper” job after you’ve finished university. I actually got my first job after graduating at the same agency where I had done a six-month internship a year before. A few weeks before my graduation, I got an email from my former boss asking if I could imagine taking a permanent job with them, and two weeks after my final exam I moved to Paris and started working.

Lisa Sabin-Wilson

Don’t neglect social media tools in your job search. My last five hires in our studios were done through various social-media networking through websites like Facebook, LinkedIn and Twitter.

Adelle Charles

Plenty has changed since I graduated. It was much easier to find a job with a good resume and a semi-good college portfolio in my field, and it wasn’t even that long ago! Now, you really have to stand out from the crowd and do things differently. Get creative in how you plan to get that job you would love to have. The sky’s the limit really. If you can get in front of your dream job, that’s half the battle. And I am a big proponent of always giving a killer “leave behind” so that you’re memorable and it doesn’t get thrown in a desk drawer.

12. What should new freelancers do during the first few months of their business to succeed?

Gisele Jaquenod1 in Women In Web Design: Group Interview
Gisele Jaquenod

Gisele Jaquenod

I think the key these days is to network and market yourself. Many of us are out there, so one of the first steps has to be to get your name out. Make sure you know what you can and cannot do (everyone has different abilities); focus on your strengths; and also make sure you enjoy doing it (it makes it all so much easier)!

Lynda Weinman

A lot of listening and practicing being sensitive to what the client wants and to the goals and priorities of the job. I think newbies are often very reluctant to ask questions or to appear not to know something, but it’s actually better to be forthcoming about what you don’t know than to assume and make a misstep because of it.

Amber Weinberg

Don’t give up. I went for two months before I started getting steady work, but by no means did I just sit around for those two months. I spent my days marketing myself, through Twitter, on blogs and job boards and emailing agencies. I even started my own blog, and the traffic and SEO points that I got from it have really helped clients find me.

Rachel Andrew

Use your networks. Make sure everyone you know knows you are available. Twitter, Facebook and so on are fantastic for this. It goes without saying, you need your own website to point people to. Even if you are a developer rather than a designer, use your website to write about interesting things or to showcase some experiments or sample code.

Eva-Lotta Lamm

It’s been quite a while now since I’ve been freelancing, so I may not be the best person to ask. But in general, I’d say the same things apply that would be needed to succeed in any job. Be a pleasure to work with. Be reliable. Communicate with your clients so that they know what to expect and how the project is going. Be confident in your work but ready to listen and learn. Follow your instincts, and always do the best work you can in the situation.

13. What are some of the best ways for new designers to find clients?

Milo317 in Women In Web Design: Group Interview
milo317

milo

A strong portfolio, you own unique style, some well-done freebies and stamina.

Amber Weinberg

Go after them. Don’t expect clients to come to you if you’re new to the industry. What worked the best for me was cold-emailing agencies for their overflow work. Some people might think that’s spamming, but it isn’t if it’s short, relevant and only done to a company once.

Elena Scanteie

If I knew the secret ingredient to this question, I wouldn’t make it public :D. From what I can tell, the best way to find clients is to be good at what you do and to be extremely critical of your own work and to tell yourself that other designers can do what you do cheaper and faster. That will boost your imagination and work ethic. At the beginning of our careers, we all sold our creativity cheaper, and that is normal for someone starting out. In time, work quality grows, and the income grows as well. Then, you arrive at a point when clients come to you and not the other way around. Another thing is who you know, and using items such as social media (Facebook, Twitter, etc.) to find more clients.

Jan Cavan

Build your Web presence. Once you get your name out there, clients usually come to you.

14. What are your personal organization or time-management tips for a professional designer’s workflow?

Molly Holzschlag in Women In Web Design: Group Interview
Molly Holzschlag

Molly E. Holzschlag

I work in utter and complete chaos. It’s not for everyone, but somehow I’ve managed to get a lot done despite that. :)

Sarah Parmenter

I would actually love to know how other people handle their work days. My days seem to be so split up into different sections at the moment, it’s almost impossible to manage. Things have been hectic because I’ve been designing the UIs for a few iPad apps, and those have obviously been on deadlines.

But generally I use an app called The Hit List. I turn off all IM apps until a particular task is done, and I tend to work late to compensate for the lapses in concentration that invariably happen during the day.

Grace Smith

A few of my tips to stay productive and organized are:

  1. Plan ahead
    I usually plan my tasks (using TaskPaper) at the end of each day. This enables me to evaluate exactly what I need to accomplish, and it means I have a clear picture of how the next day will look, and it helps keep me focused and efficient. This prep usually takes around 20 to 30 minutes. During this time, I also usually tie up any loose ends from the day’s work.
  2. Deal with emails immediately
    Whenever I receive an email, I either respond, filter, delete or archive it. Constantly looking back over each email every time I check my inbox adds up to hours of wasted time each week. So, I try to look at each email only once. I’ve also found that setting up filters, canned responses and labels is an excellent way to automate my inbox and increase my productivity because it allows me to spend more time on work and less time in email!
  3. Track time
    I use a combination of Rescue Time and Toggl to track where my time goes. These apps log the hours worked on both client and personal projects and have highlighted areas in my own workflow that I’ve then been able to tweak to improve my overall productivity. It’s easy to get to the end of a project and find out you’ve actually worked for an awful lot less than you quoted, simply because you weren’t tracking exactly where and how your time was being spent.
  4. The dreaded admin
    It’s not a favorite task of any business owner, but it is essential to keeping our business organized (no one wants to spend time figuring out their accounts come tax time). So, I take some time each Friday morning to make sure all of the week’s affairs are in order. This could be invoicing, filing or accounts. It’s not fun, but then I know the rest of my week will be free of disruptions from these types of tasks.

Adelle Charles

I use Things for personal organization and management of my daily to-dos and operations management of FUEL. I find that working with timelines keeps me in check and ahead of the game for the most part. If I let myself get behind, I get too distracted, and that’s never a good thing when trying to be creative!

Gisele Jaquenod

Oh my. I am actually not so good with time management. I am always overworked. But I love every minute of it. However, I always advise not to take on too much; not just because you need to be rested to work properly, but because you might not be able to complete your projects — and nowadays, an online reputation can be destroyed much faster than it can be built. So, just make sure you can handle everything you take on. You could always recommend a friend. This is what I do when I can’t take on work. I recommend the client to contact someone who I trust can please them.

Lynda Weinman

I am very disciplined. If I don’t have time to visit with friends, go to a party or see a movie, I’ll put work first, and always have. I see a lot of people who don’t have self-discipline or strong work ethics, and they don’t go far to be honest. Almost all super-successful people work very, very hard.

15. How do you handle the pressure of deadlines and find time for your family?

Inayaili De Leon in Women In Web Design: Group Interview
Inayaili de Leon

Inayaili de Leon

I’m not married and I don’t have any kids, so that means I can work late or during the weekend if need be. I like to have deadlines. If you have good relationships with your clients and good communication skills, the deadlines won’t be completely ridiculous. You can either plan your time well and get your bit done in time, or you can just plain procrastinate and then freak out at the last minute — it’s up to you. I think I’d go mental if I didn’t have deadlines. Projects would just drag on and on. I wouldn’t be able to stop changing things here and there. It’s good to know when it’s time to stop and say, “It’s done.”

Molly E. Holzschlag

I don’t. This is why I’m unmarried and have no children. That’s not what I intended, but it’s the way life worked out for me. I used to regret it, but now I realize that I’ve received a different kind of blessing. I have been able to travel the world and meet some of the most incredible people, from paupers to princes. For me, to travel and interact with such an array of humanity is the greatest gift of my life, and I feel very, very blessed for it.

Adelle Charles

It’s tough. I work a lot of hours, and I’m most productive at night, so I usually get more done in the late evenings, when I can concentrate in peace. I always save certain hours for family time. Start-ups are hard and demanding, but I always find time for my family. It’s a bonus (but imperative) that they are very supportive and patient.

Elena Scanteie

Along with my husband Vlad (who is also a designer), we cry to ourselves about deadline pressures. I cry on his shoulder, and he cries on mine. It’s a fair deal. I personally have a great friend and partner at Design Disease in the person of Jacob Gower, who deals with all of my clients from the first moments to the end of the projects. This way, I have the comfort to work in peace.

There are no magical solutions in the career of a designer. Every single person has a different path, a different vision, a different result, and that makes this job unique.

Lynda Weinman

It’s been a huge challenge, and I am not sure I’ve entirely succeeded. I am definitely a workaholic, and it has hurt my family’s feelings many times. I think they know me so well now and see that my hard work has paid off, so they aren’t as critical any longer. It helps that my daughter is 20 now and has her own life to lead, but when she was younger she was upset with me quite often. I am not sure that I balanced life and work well at all.

Sarah Parmenter

Deadlines are fine; they go straight in the diary. As long as the client has provided everything I need to meet the deadline, it comes and goes without any hiccups. Family is a bit more tricky. I’m not too good at balancing this, because I now work from home, and it’s even harder when you have access to everything on an iPhone. I’m never away from my emails. I’ve gotten into the really bad habit of checking them, too, when I wake up at night. Generally though, the work-life balance is fairly okay. I work hard during the week, and I like to make my weekends a real break.

Lisa Sabin-Wilson

I sleep on the couch a lot. I’m kidding; I don’t really!

About three years ago, I realized it was getting to be very difficult handling everything on my own. As a freelancer turned studio owner, I wore all the hats in the shop: accountant, bookkeeper, maintenance person, receptionist and eventually, when I hired staff, personal director and counsellor. I was also taking on creative projects, so my time was extremely thin.

It was then that I hired a virtual assistant to help me with the day-to-day administrative tasks of running a business. She helps me with email, new project requests, accounts receivable and payables, just about anything I need to help me re-focus my time away from administrative duties and back onto the creative work I love doing.

When you aren’t getting enough sleep, eating enough food, drinking enough water, and your family is wondering whether you’ve gone missing, that is generally when you know you need to either scale back a little or hire.

You may be interested in the following related posts:

(al)


© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 106 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Smashing-magazine-advertisement in Imagine A Pie Chart Stomping On An Infographic Forever
 in Imagine A Pie Chart Stomping On An Infographic Forever  in Imagine A Pie Chart Stomping On An Infographic Forever  in Imagine A Pie Chart Stomping On An Infographic Forever

A certain category of design gaffes can be boiled down to violations of audience expectations. Websites that don’t work in Internet Explorer are a heck of a nasty surprise for users who, bless their souls, want the same Internet experience as everyone else. Websites that prevent copying, whether through careless text-as-image conversions or those wretched copyright pop-ups from the turn of the century, cripple a feature that works nearly everywhere else on the Internet. Avoiding this category of blunders is crucial to good design, which is why I am upset that one particular pitfall has been overlooked with extreme frequency.

According to statlit.org, statistical literacy is the ability to read and interpret summary statistics in the everyday media: in graphs, tables, statements, surveys and studies. Statistical literacy is needed by data consumers.

The importance of statistical literacy in the Internet age is clear, but the concept is not exclusive to designers. I’d like to focus on it because designers must consider it in a way that most people do not have to: statistical literacy is more than learning the laws of statistics; it is about representations that the human mind can understand and remember (source: Psychological Science in the Public Interest).

Food-pyramid 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Can you notice what’s wrong with this infographics? You will find a detailed answer below, in the showcase of bad infographics.

As a designer, you get to choose those representations. Most of the time this is a positive aspect. Visual representations allow you to quickly summarize a data set or make connections that might be difficult to perceive otherwise. Unfortunately, designers too often forget that data exists for more than entertainment or aesthetics. If you design a visualization before correctly understanding the data on which it is based, you face the very real risk of summarizing incorrectly, producing faulty insights, or otherwise mangling the process of disseminating knowledge. If you do this to your audience, then you have violated an expectation of singular importance for any content creator: their expectation that you actually know what you’re talking about.

Anyone would be hard-pressed to find fault with the desire to make life prettier, but every color-coded geometric shape that you add to your awesome new “Lady Gaga vs. Eyjafjallajökull” infographic brings us all one step closer to something going horribly wrong. Most designers would probably not edit a politician’s party affiliation in a news article to make the text wrap in a way that is more pleasing to the eye. With data, though, careless designers all too readily sacrifice truth for the sake of aesthetics. Lovecraft’s eldritch horrors will rise only when the stars are right, but the preconditions for bad visual representations are already in place:

  • Demand for graphs, charts, maps and infographics has increased.
  • Increased data availability and more powerful tools have made it easier than ever to create them.
  • But you probably don’t have a solid understanding of how to interpret or process data.
  • Nor likely do your readers.
  • And there’s a good chance that neither of you know that.

Do you hear that fateful, fearsome ticking? You’ve given your audience a time bomb of misinformation, just waiting to blow up in their faces. Perhaps they will forget your inadvertent falsehood before they harm someone with it, but perhaps they will be Patient Zero in an outbreak of viral inaccuracy. Curing that disease can be excruciatingly difficult, and even impossible: one of the more depressing findings in psychology is that trying to set the record straight can muddle it further. The lesson is clear: provide the right story the first time. But the staggering variety of awful visualizations online makes it equally clear that designers haven’t learned that lesson yet. Let’s see just how bad it can get.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Showcase Of Bad Infographics

Dem-rep 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: The Nation)

Yikes! Note how enormously misleading the red and blue bars are. There is absolutely no reason for their presence in this graph. Even if they were actually scaled to the number of total new jobs, a two-axis graph would still be difficult for most people to understand. The figure also doesn’t take into account a host of potentially confounding factors, including (but not limited to) population growth, women entering the workforce, shifts from part-time to full-time jobs, change in wages and GDP change.

Food-pyramid 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: Physicians Committee for Responsible Medicine in Good Medicine Magazine)

This graph circulated fairly widely for a while. The design of the food pyramid changed recently, in part because the visual characteristics of the old pyramid did not correspond well to the numerical recommendations. The new designer makes the same mistake but disdains “misleading” in favor of “mind-bogglingly dishonest.” The bottom tier of the left-hand pyramid takes up far more than 73.80% of the pyramid’s area, and the 3-D diagram enhances that distortion even further. Want a fun party game? Hide the numbers and ask your friends to guess what they are!

Nuclear-bomb in Imagine A Pie Chart Stomping On An Infographic Forever
Large view

This classic suffers from the same problem as the food pyramid: the odd mushroom shape makes seeing the correct relationship impossible at a glance. The disparity between Bravo and Tzar Bomba is like a bad joke… and the punchline? In real life, doubling the destructive power of a nuclear blast doesn’t even come close to doubling the height of the resulting mushroom cloud.

Violent-crime 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: The Economist)

The flashy background and bright colors must have distracted this graph’s creator from the fact that it’s useless. Think the graph is describing crime rates? Think again. It actually describes the percentage change in violent crime rates. New York at 20% of its 1990 crime rate could still be more violent than Philadelphia at over 100% of its 1990 crime rate. If you want to know how dangerous these cities really are, you’ll have to look elsewhere.

Human-impact 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: New Scientist)

There have been worse pie charts, but this one is bad in a subtle way. The point of a pie chart is presumably to facilitate a comparison of land use, but this pie chart makes that very difficult. Given the combination of the huge number of categories and the huge change in their values, this would have been better rendered as a table.

Mccain-cuts 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: Somethingawful Forums)

This graph is a painful experience all around. Income is described as “percentile” but is shown in ranges. The category labels are placed randomly around the data points, rather than at the bottom where they belong. The data points are tremendous circular blobs that are impossible to compare at a glance. And that’s with only five data points!

State-suicide 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: Somethingawful Forums)

This is a line graph of binge drinking and suicide rates. Wait, scratch that: it’s an abomination, Alphabetically ordered lists of states belong in tables—maybe—and that’s only if you wouldn’t prefer to index them by some variable or another. Two-axis charts are as bad as any idea, especially when it’s not clear what the two variables actually are. But the worst part? It isn’t population adjusted. The states with the most deaths are the states with the most residents: California, Texas, New York and Florida. Knowing that someone made this and thought enough of it to post it on the Internet makes me want to drink.

Haiti-stats 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: in MOCH)

A certain measure of artistic expression is a great thing. This, on the other hand, is not. The bars have no proportion, even though there is no aesthetic reason why they couldn’t. What could have been a perfectly appealing mix of presentation and information has left any semblance of usefulness to die of neglect. Why not make the flag’s background represent Haiti’s casualties and then scale the war casualties to match? The world may never know.

Income-tax 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view (Source: Somethingawful Forums)

Trick question: what’s wrong with this map? Answer: there isn’t a map. The image may contain something that resembles a map, but it’s actually a map-shaped hole in effective data presentation. While the data in the table is presented more effectively, it’s too sparse to be of much use: how do those raw figures compare to tax rates, GDP, individual wealth or the many other factors that prevent easy comparison of states?

Income-education 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view

This isn’t so poor a choice of representation at first glance. But several subtle flaws could mislead the casual observer. To the lower right, we see three blocks labeled “7%” that have wildly different heights, presumably because of rounding in display. Dropping the decimal points is sometimes acceptable, but you can’t have it both ways: either those digits matter and should be shown, or they don’t matter and shouldn’t appear anywhere in the graph (in either the labels or bars).

The other major design failure here is the key, which misleadingly states that the darkest color is for someone in the “top fifth.” But which top fifth? We can see that you have to have a graduate degree and end up in the top fifth in income to be the darkest shade, but that would put someone in the 94th percentile (that is, the top twentieth). This is a case of an intuitive concept (darker means either wealthier or more educated) executed in a sub-standard way.

I leave it to the audience to decide whether it’s a mite useless, or even misleading, to only consider Americans with full-time employment.

Spending-state 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view

The first thought anyone should have when they see this is that it’s way too cluttered. The concern for the flags is merely aesthetic (as if anyone knows more than a handful of state flags), but the concern for the labels is about truthfulness. We’re presumably meant to look at the top of the flagpoles, but we can’t do that because there’s no axis for comparison, so we look to the labels for information. This means that we’re not going away with any more information than we might have from a table, but we might come away with less if we accidentally judge using the curve of the labels that we’re reading instead of the curve of the flagpole tops. Compare California to Washington to see what a difference that would make!

Thankfully, most people won’t skim long enough to notice the worst offender, which lurks at the bottom of the page. I knew something was about to go terribly wrong when I spied the notice stating that the graph “starts” at $20,000. Is the bottom of the page $20,000? Or is it the red line? Why is this counter-intuitive perspective even being used? I fear I may be kept waiting a long time for answers.

Map 500px in Imagine A Pie Chart Stomping On An Infographic Forever
Large view, source

Maps are a common way to represent information, but they’re also a common way to misrepresent information. This map is a wonderful example of that very un-wonderful fact. You can see a large version of it at its source, but I can’t recommend it for the faint of heart: the original is grossly oversized, its aesthetics are just plain gross, and it’s served as a PDF with even more awful JPG artifacts.

This map purports to show the number of murdered transgendered people over a one-year period. But there’s a big problem: there is no data for the vast majority of the world (either by country or by population!). The data that is there is likely quite suspect, too (only one transgendered person was murdered in a country the size of Russia?). Tracking hate crimes is notoriously difficult for a variety of reasons, most of which apply especially to the transgendered community; but even compelling reasons for a lack of accurate data don’t actually make up for that lack.

This map’s worst failing, though, is that its doesn’t show hate crimes at all. I obviously don’t condone murder, but within a large enough group, murders are a fact of life. Half a million people are murdered around the world each year, and if even one in ten-thousand people is
transgendered, we should expect to see hundreds of transgendered murder victims, for the same reason that we should expect to see tens of thousands of left-handed murder victims or hundreds of thousands of female murder victims.

Hate crimes against transgendered people are real; they can also deadly, which makes accurate information that much more critical. Perhaps presenting the information in this very sparse table in the context of a larger report would have been acceptable, but to use a poorly designed map with no disclaimers as a summary of findings is dishonest beyond belief.

Want Better Graphs? Get Virtuous Designers

If you’ve survived the array of horrors described above, take heart. Many design flaws can be remedied by learning patterns, principles or lenses that make avoiding disfunction easier. Even someone with no design background can read an article about why Comic Sans is never the right choice and resolve never to use it again. The curriculum is different, of course, but this is as true for data as it is for design.

Unfortunately, curing statistical illiteracy isn’t as easy as reading an article about it or even taking a statistics course. While a solid understanding of statistics is beneficial for a wide variety of purposes, countering statistical illiteracy requires the cultivation of an active interpretative technique that is separate from knowledge of pure mathematics.

Statistical literacy is only the bare minimum, though. The burden on designers is heavier because their uses of data often require them to go beyond interpretation and to perform some basic analysis, summarization or transformation of data. However, a formal education in research methods is probably too extreme. I believe that most mistakes of data could have been avoided had the designers focused on a limited skill set that is to a media producer what statistical literacy is to a media consumer. For now, let’s call this data mindfulness.

Mindfulness means exhibiting care, caution, exactness, prudence, regard and many other virtues. Data mindfulness is similar to someone imploring another to “be mindful” of something potentially dangerous. As a designer, you can be careful about the sources of data you choose and can be cautious of the claims you make based on that data. Your exactness is reflected in the effort you put into correctly transforming the original data. Your prudence relates to whether you are honest in your intent and methods. But regard comes closest to the concept of data mindfulness: to be mindful of your data—to avoid mistakes with it and prevent the harm that would result from such mistakes—you should regard it with respect.

Know Your Data: Mind, Body, And Soul

The mind-body-soul connection provides a convenient, memorable context in which to learn about data. With the mind already dealt with, where do the other two members of the trifecta fit in?

Our data’s “body” is its form and function. Like the human body, it consists of both overarching similarities and individual differences. Here we can draw an analogy with dislocation: just because your arm twists a certain way does not mean that it is supposed to; on the other hand, some people are indeed flexible enough to move in just that way. When we exceed the limitations of our body, we hear the body’s complaints loudly. But your data won’t let you know when you twist it out of shape (though you may hear some poor statistics professor screaming on its behalf). When we consider our data’s “body,” we’re considering the performance it can achieve and the stresses it can tolerate. That process often begins with these simple questions:

  • How was it collected?
  • What are its limitations?
  • Which mathematical transformations are appropriate?
  • Which methods of display are appropriate?

Our data’s “soul” is its context and broader meaning. One popular understanding of a soul is that it is some part of an individual that glorifies their uniqueness even while making them a part of a profound commonality. In a mystical context (whether you believe in it or not), we can easily understand this apparent contradiction. In a mundane context, many people would find the dissonance hard to swallow. This is unfortunate, because data must be understood in just this way: it is both an individual entity and a unit of a larger whole. Reconciling these is a notoriously tricky task, but some of the worst mistakes are avoided by collecting a few crucial bits of information:

  • Who collected it?
  • Why was it collected?
  • What is its context in a broader subject?
  • What is its context in the field of research that created it?

These eight questions should take under five minutes to run through, but they would prevent the vast majority of mistakes that designers make. Let’s assume for a moment, then, that you’re a responsible designer, and you try your best to come up with answers to these questions for the data you want to use. What if you can’t?

If your data’s “body” fails to stand up to scrutiny, then this is not necessarily a problem, depending on how serious is the task that you intend to put it to. Restricting yourself to a scientific level of evidence will earn you an A+ for effort, but it is not necessary for most design purposes. You will be limited in the claims you can make, but you can usually still make use of the data in some form without sacrificing honesty. Even scientists love preliminary data (or “napkin math,”) as long as they know that that’s what they’re looking at!

If your data’s “soul” is tainted, though, it could go to hell… in a figurative sense, of course: it would be banished somewhere where people wouldn’t draw the wrong conclusions from it. Getting some use out of potentially biased data is not impossible, but it’s not easy, and there are often other sources to draw upon anyway. If you smell smoke or, heaven forbid, a whiff of brimstone, don’t assume it’s because your infographic is so hot. Even people who do this for a day job get burned by misleading or downright falsified data more often than you might expect. For most any controversial issue, figuring out whose numbers to trust is difficult.

Learn It, Live It. You Can Love It Later.

I suspect that some designers are beyond their comfort zone by this point, so I’ll use a more familiar topic as an example of how to fit data mindfulness into your design. Many of you probably have experience with color theory or typography or have even taken courses on them. Or perhaps neither is your thing but you can still explain to someone why an image printed out looks different than on a monitor, or why Papyrus is a poor font choice. More importantly, you likely know where to find detailed information on particular topics in those fields when you need it.

Simply studying and practicing these fields to become proficient in them is possible, but few people can afford to master every skill they use in design. And yet most of us could afford a little more time to round out our skill sets. Just as with color theory and typography, even a novice understanding of the concepts involved in analyzing and representing data tunes a designer into the fact that it truly is a separate skill. This awareness allows you to stop yourself and say, “I don’t know how to do this yet.” Consciously recognizing that there is a “this” at all is an absolute prerequisite to being mindful.

Conclusion

Perhaps this all sounds a little extreme to you. But remember the stakes: while a poor font choice can ruin a meeting, a poor interpretation of statistics or data can kill you (or someone else, for that matter). Proper use of data is a viciously complicated topic, and I am no expert. But I feel confident enough to make this claim: if it would lead to the wrong conclusions, not presenting the data at all would be better.

Here is a simple rule for designers: your project isn’t ready to be released into the wild if you’ve spent more time choosing a font than choosing your data.

(al)


© Eronarn for Smashing Magazine, 2010. | Permalink | 49 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Smashing-magazine-advertisement in 50 Helpful Typography Tools And Resources
 in 50 Helpful Typography Tools And Resources   in 50 Helpful Typography Tools And Resources   in 50 Helpful Typography Tools And Resources

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups. And now it’s time to present a beautiful fresh dose of typography-related resources.

To help you improve the typography in your designs, we’re presenting here useful new articles, tools and resources related to typography. You will learn the fundamentals of typography, find out how to combine fonts and know what to keep in mind when choosing a typeface. We also present typography-related slideshows, glossaries, layouts and experiments.

You may be interested in the following related posts:

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Typography: References and Useful Resources

The Taxonomy of Type
This article’s purpose is to help us as designers to distinguish basic properties of types. It explains the type classification and provides examples of each type. Short, but nice article.

Typography-110 in 50 Helpful Typography Tools And Resources

Typedia: A Shared Encyclopedia of Typefaces
Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typography-119 in 50 Helpful Typography Tools And Resources

Typeface Anatomy and Glossary
Many fonts have abbreviations in their names. Some relate to glyph sets and font formats, others to design traits and foundries, and so on. A comprehensive list of these abbreviations and their explanation can be found in The Abbreviated Typographer from Unzipped.

Type-002 in 50 Helpful Typography Tools And Resources

Typographic Marks Unknown
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

Typography-154 in 50 Helpful Typography Tools And Resources

Periodic Table of Typefaces
A reference table for most popular typefaces and their classifications.

Typography-126 in 50 Helpful Typography Tools And Resources

Fonts for iPad & iPhone
This reference table features all fonts that are available on iPhone, iPod Touch and iPad.

Typography-155 in 50 Helpful Typography Tools And Resources

Font Anatomy (Wallpaper)
A nice overview of all typographic terms and subtleties. Do you know what an ‘arm’ or ‘beak’ is? Time to find out.

Typography-168 in 50 Helpful Typography Tools And Resources

Typographic Rules Checklist (PDF)
Useful typographic checklist that contains not only some general typographic rules, heuristics and guidelines, but also reminders for typography in your projects.

Typography Checklist (PDF)
Compiled by Jason DewinetzIf, this list contains some useful typographic checks that you may want to consider for before launching your next project or printing your next brochure or book.

Type in 50 Helpful Typography Tools And Resources

So You Need A Typeface (Infographics)
A nice infographics that can actually help you select a typeface for your design work. You may want to search for the path to Comic Sans.

Typography-179 in 50 Helpful Typography Tools And Resources

Finding The Right Type

The Right Font for the Job
A few years ago, you had to make a decision between TrueType or PostScript and Mac or Windows. Today, the choice is usually fairly simple: OpenType is the most convenient and full-featured font format, compatible with all modern screen and print workflows. All the extras that are commonly spread across multiple PostScript or TrueType files can live in one OpenType file. Best of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing reflow.

Typography-109 in 50 Helpful Typography Tools And Resources

Erik Spiekermann’s Typo Tips
With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta¨, Meta Design founder, co-author of ’stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

Typography-184 in 50 Helpful Typography Tools And Resources

Thirteen Ways of Looking at a Typeface
For the first ten years of my career, I worked for Massimo Vignelli, a designer who is legendary for using a very limited number of typefaces. Between 1980 and 1990, most of my projects were set in five fonts: Helvetica (naturally), Futura, Garamond No. 3, Century Expanded, and, of course, Bodoni.

Typography-106 in 50 Helpful Typography Tools And Resources

Picking Type for Web
Picking Type for Web As a part of the visual design process for MIX Online’s upcoming redesign, I’ve been experimenting with typography. The task of finding a typeface that’s both aesthetically pleasing and legible, however, is a tricky one.

Typography-113 in 50 Helpful Typography Tools And Resources

How To Choose A Font
Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font. These pointers have been gathered from Robin Williams great book “The Non-Designers Type Book” that I recommended in the top 5 typography resources of all time. Have a think about each of these before choosing your next font.

Typography-160 in 50 Helpful Typography Tools And Resources

On Choosing Type
Typography is not a science. Typography is an art. There are those who”d like to ’scientificize”; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice.

Typography-191 in 50 Helpful Typography Tools And Resources

Combining Type

Fundamentals: Combining Type With Helvetica
With this issue of FontShop Fundamentals we debut Guest FontLists. Building on our own lists, we asked experts we admire to round up typefaces that share a common use, style, or concept.

Typography-101 in 50 Helpful Typography Tools And Resources

Four Ways to Mix Fonts
Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

Typography-131 in 50 Helpful Typography Tools And Resources

How do I choose paring fonts ?
When I have to chose type for a project, I always rely on my feelings and lots of testing, wating for the love/hate Alchemy to happen and decide for me. This method, mostly based on luck, is often time consuming, and I often found myself needing to ask for help on the forums.

Typography-188 in 50 Helpful Typography Tools And Resources

Type Design

Beginner’s Guide to OpenType
OpenType (OT) is a cross-platform type format that includes expert layout features to provide richer linguistic support and advanced typographic control. Using OT technology you can substitute your characters for different glyphs1 using many different methods; Ligatures, Small Caps, Oldstyle Figures, Fractions, Superscript/Subscript, Ordinals, Alternates, Titling Characters and many more. This beginner’s guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

Typography-104 in 50 Helpful Typography Tools And Resources

Making Geometric Type Work
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is the same route I took when dissatisfied with the limits of commercial fonts at the time. I twisted and distorted each character to fit into a few simple, incredibly strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

Typography-102 in 50 Helpful Typography Tools And Resources

A few things I’ve learned about typeface design
Teaching on a postgraduate course feels very much like a spiral: the annual repetition of projects, each a vehicle for a journey of education and discovery for the student, blurs into cyclical clouds of shapes, paragraphs, and personalities. There seems to be little opportunity for reflection across student cohorts, and yet it is only this process that improves the process from one year to the next. Having passed the tenth anniversary of the MA Typeface Design programme was as good an opportunity as any to reflect, and ILT’s offer to publish the result an ideal environment to get some ideas out in the open. Although my perspective is unavoidably linked to the course at Reading, I think that the points I make have wider relevance.

Typography-107 in 50 Helpful Typography Tools And Resources

Case-Study: The Making of Vesper
A nice case-study about the creation process of the Vesper typeface, from its designer Rob Keller. “Vesper was developed over the course of almost three years. For this article, I’ve divided the process into two stages: #1 during my studies at the University of Reading; and #2 After Reading. Hopefully through this highly-condensed-yet-still-rather-wordy account of this project you will learn some interesting bits regarding my first major type family, the design process, and the MATD program.”

Typography-115 in 50 Helpful Typography Tools And Resources

Typographic Tools

TypeIt: Type accent marks, diacritics and foreign letters online
The service allows you to add typographic accents and special characters (e.g. punctuation marks) as you’re typing. Instead of clicking on buttons for the accents, you can also use pre-defined shortcuts, like Control + N, to insert the characters: just point your cursor to the desired character and you’ll see a tooltip.

Typography-105 in 50 Helpful Typography Tools And Resources

Web Font Specimen
Because web type renders differently with only subtle CSS adjustments, seeing it exercised in a variety of ways can help web designers typesetÑand also help them decide which typefaces to purchase for their projects.

Typography-108 in 50 Helpful Typography Tools And Resources

Typograph: Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Typography-129 in 50 Helpful Typography Tools And Resources

TextMod 2.1
Unlike dummy text generators, in TextMod you can modify a real text to match your current character set and use it for testing your font. Your TextMod settings are stored in a cookie. By now, TextMod only works with Latin and Armenian.

Typography-133 in 50 Helpful Typography Tools And Resources

Readability
Readability is a simple bookmarklet that makes reading on the Web more enjoyable by removing the clutter around what you’re reading.

Typography-182 in 50 Helpful Typography Tools And Resources

Free Typographic XHTML/CSS-Layouts For Your Designs
A collection of beautiful typographic (X)HTML+CSS-based layouts created by the design community and released for free.

Typography-142 in 50 Helpful Typography Tools And Resources

Typography Keyboard Layout
A simple, yet useful tool that lets you enter characters that are usually unavailable on a keyboard with ease. Hopefully it will help you achieve better typography in your designs.

Typek in 50 Helpful Typography Tools And Resources

{ font-family }
A resource for web developers and designers to provide recommendations for alternatives in the font-family CSS style.

Typography-156 in 50 Helpful Typography Tools And Resources

EmChart
This tool maps the ratio between your base size and your child elements font size.

Type-1011 in 50 Helpful Typography Tools And Resources

MyFontbook, A Browser-Based Free Font Viewer
myFontbook is a free tool for viewing, classifying and organizing fonts installed on your system from your web browser.

Typography-166 in 50 Helpful Typography Tools And Resources

Font Finder
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

Typography-167 in 50 Helpful Typography Tools And Resources

Unicode Codepoint Chart
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Typography-173 in 50 Helpful Typography Tools And Resources

Create Your Own @font-face Kits
An online generator for creating ready-to-use kits for your fonts, using @font-face.

Typography-162 in 50 Helpful Typography Tools And Resources

XHTML Character Entity Reference
This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.

Typography-174 in 50 Helpful Typography Tools And Resources

HTML Entity Character Lookup
Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c.

Typography-175 in 50 Helpful Typography Tools And Resources

CopyPasteCharacter.com
This page allows you to copy one or multiple special characters and paste them in your applications.

Typography-176 in 50 Helpful Typography Tools And Resources

Surveys and Research

Typographic Design Patterns and Best Practices
Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and paddingÉ The list goes on and on.

Typography-134 in 50 Helpful Typography Tools And Resources

Visual Search and Reading Tasks Using ClearType and Regular Displays
An academic paper exploring the usability performance of ClearType vs. Regular displays. Result: For most users ClearType-enhanced text produces a significant improvement in performance times on tasks involving extended eye-on-text interactions.

Typography-118 in 50 Helpful Typography Tools And Resources

‘Font’ vs. ‘Typeface’: font terms survey results
According to this study, the overall opinion is that in today’s world of digital typography “a typeface” means the general design, including all its styles, regardless of how it’s instantiated, while “a font” means a single style of a typeface, such as Myriad bold condensed italic, in a specific file format. However, this is not necessarily true.

Typography-120 in 50 Helpful Typography Tools And Resources

Font or Typeface?
As we”re collaborating with multiple authors on the FontFeed, we compiled a list of guidelines for ourselves and guest contributors. One of our concerns is that we should attempt to ’speak the same language” when using typographic and related terms. Because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.

Typography-172 in 50 Helpful Typography Tools And Resources

Rules for good and beautiful typography

A Guide to Web Typography
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

Typography-190 in 50 Helpful Typography Tools And Resources

The Principles of Beautiful Typography
For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

Elements52 in 50 Helpful Typography Tools And Resources

Simple rules for good typography
Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.

Typography-135 in 50 Helpful Typography Tools And Resources

Typography is the backbone of good web design
An overview of some typographic techniques to keep in mind for your next website design.

Typography-136 in 50 Helpful Typography Tools And Resources

A 20 Minute Intro to Typography Basics
“Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.”

Typography-144 in 50 Helpful Typography Tools And Resources

11 Essential Tips for Good Print Typography
Typography is a huge part of design and design is a huge part of type. You can”t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. Here are 11 typography tips to help you convey information in print the right way.

Typography-151 in 50 Helpful Typography Tools And Resources

It’s Type O’clock!
“One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.”

Typography-114 in 50 Helpful Typography Tools And Resources

What is typography today?
“Most people think Typography is about designing and selecting fonts. This is true as far as architecture is about designing or selecting furniture. In reality neither is a purpose but a means to an end. That end with architecture is (hopefully) accommodating its inhabitants, for typography it is accommodating the human mind, making the reader read, the viewer watch (not only look), drawing and keeping the attention.”

Typography-128 in 50 Helpful Typography Tools And Resources

The Ails Of Typographic Anti-Aliasing
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we”ll have to rely on software advances to fix these problems.

Typography-137 in 50 Helpful Typography Tools And Resources

Type-Inspired Interfaces
One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it’s the blank page where I spend the most time. To that end, I often start by choosing type.

Typography-116 in 50 Helpful Typography Tools And Resources

CSS and Font Embedding

Revised Font Stack
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Typography-161 in 50 Helpful Typography Tools And Resources

Becoming a Font Embedding Master
I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process.

Typography-163 in 50 Helpful Typography Tools And Resources

Web Font User Guide
An extensive reference guide for designers, developers and system administrators. It explains how to get started using Web fonts for display on your website. It also contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server.

Typography-159 in 50 Helpful Typography Tools And Resources

Inspiration: Showcases, Blogs etc.

we love typography
A showcase of type, typography, lettering, and signage.

Typography-122 in 50 Helpful Typography Tools And Resources

FINDINGS
Yet another blog featuring beautiful typography.

Typography-132 in 50 Helpful Typography Tools And Resources

typo/graphic posters
typo/graphic posters is a directory of typographic and graphic posters.

Typography-145 in 50 Helpful Typography Tools And Resources

The Journal of Urban Typography
TJOUT is dedicated to the documentation and study of signs, word fragments, and typography created with utilitarian intent in urban environments.

Typography-150 in 50 Helpful Typography Tools And Resources

Pressing Letters: A Collection of Inspirational Letterpress
The project is an effort to catalog work and promote creativity in the letterpress community. Anyone can submit their letterpress work, references, tips and links. The website has many different categories, including business cards, books, calendars, identity design, music sleeves, stationery and posters. A blog definitely worth bookmarking and visiting regularly.

Typography-177 in 50 Helpful Typography Tools And Resources

Alltop: Top Typography News
An aggregator of typography-related news, articles and tools.

Typography-153 in 50 Helpful Typography Tools And Resources

Last Click: Typography-Related… Games!

FontTrainer
An interesting tool that help to train you pay attention to subtle differences between fonts.

Typography-164 in 50 Helpful Typography Tools And Resources

Your Personality, Summarized in a Typeface
If you’ve ever sat down with a type designer, what you quickly realize is that they rarely talk about fonts in purely aesthetic or even functional terms: They talk about assertiveness or calm or friendliness. In short, they talk about personality traits. It makes sense, then, that your personality could be translated into a typeface. And Pentragram has done just that, in this lovely microsite, What Type are You? (Password: Character)

Typography-112 in 50 Helpful Typography Tools And Resources

TypePong
TypePong is a retro iPhone gaming with a modern twist. It allows you to play PingPong with your favourite fonts. You can also challenge your friends and the world on our global score board.

Type-001 in 50 Helpful Typography Tools And Resources

Deep Font Challenge
Are you a sharp shootin’ font-master or a no-good calamity who can’t spell Futura? To prove your design know how, shoot the font mounted on a target which is displayed on the banner. Points are scored for each successful round and the speed with which you complete it… but be warned, during the game the tables will turn, so keep on your toes.

Typography-121 in 50 Helpful Typography Tools And Resources

Related Posts

You may be interested in the following related posts:


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

TypeTalk: The Best Fonts for Newsprint

POSTED IN Blog | Comments Off

Ink spreads more or less depending on the paper and printing technologies. Here's one way to compensate for the ink spread you'll encounter in certain situations.

read more

TypeTalk: Setting Tabs in Illustrator

POSTED IN Blog | Comments Off

Setting tabs in Adobe Illustrator is a bit different than setting tabs in page-layout and word-processing programs. Here's how to master the process.

read more

Smashing-magazine-advertisement in Modern CSS Layouts, Part 2: The Essential Techniques
 in Modern CSS Layouts, Part 2: The Essential Techniques  in Modern CSS Layouts, Part 2: The Essential Techniques  in Modern CSS Layouts, Part 2: The Essential Techniques

In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.

Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.

You can jump straight to:

CSS3

CSS3, the newest version of CSS that is now being partially supported by most browsers, is the primary thing you need to know in order to create modern CSS web sites, of course. CSS is a styling language, so it’s no surprise that most of what’s new in CSS3 is all about visual effects. But CSS3 is about more than progressive enhancement and pretty typography. It can also aid usability by making content easier to read, as well as improve efficiency in development and page performance.

There are too many CSS3 techniques to cover in a single article, let alone an article that isn’t just about CSS3! So, we’ll go through the basics of the most important or supported CSS3 techniques and point you to some great resources to learn more in-depth.

CSS3 Visual Effects

Semi-transparent Color
Aids in: progressive enhancement, efficiency

RGBA allows you to specify a color by not only setting the values of red, green, and blue that it’s comprised of, but also the level of opacity it should have. An alternative to RGBA is HSLA, which works the same way, but allows you to set values of hue, saturation, and lightness, instead of values of red, green, and blue. The article Color in Opera 10 — HSL, RGB and Alpha Transparency explains how HSLA can be more intuitive to use than RGBA.

Part2 Rgba in Modern CSS Layouts, Part 2: The Essential Techniques

The 24 Ways web site makes extensive use of RGBA to layer semi-transparent boxes and text over each other.

RGBA or HSLA isn’t just about making things look cool; it can also improve your web site’s efficiency. You don’t have to take time to make alpha-transparent PNGs to use as backgrounds, since you can just use a color in the CSS, and the user agent doesn’t have to download those images when loading the site.

For more on how to use RGBA and HSLA, including fallback methods for browsers that don’t support it, see:

Styling Backgrounds and Borders
Aids in: progressive enhancement, efficiency

CSS3 offers a whole host of new ways to style backgrounds and borders, often without having to use images or add extra divs. Most of these new techniques already have good browser support, and since they’re mainly used for purely cosmetic changes, they’re a good way to get some progressive enhancement goodness going in your sites right away.

Here are some of the new things CSS3 lets you do with backgrounds:

  • Multiple backgrounds on a single element: You can now add more than one background image to an element by listing each image, separated by commas, in the background-image property. No more nesting extra divs just to have more elements to attach background images onto!
  • More control over where backgrounds are placed: The new background-clip and background-origin properties let you control if backgrounds are displayed under borders, padding, or just content, as well as where the origin point for background-position should be.
  • Background sizing: You can scale background images using the new background-size property. While scaling won’t look good on many background images, it could be really handy on abstract, grunge-type backgrounds, where tiling can be difficult and where some image distortion would be unnoticeable.
  • Gradients: While just part of a CSS3 draft spec, Safari, Chrome and Firefox support declaring multiple color and placement values in the background-image property to create gradients without images. This allows the gradients to scale with their container — unlike image gradients — and eliminates the need for page users to download yet another image while viewing your site.

CSS3 lets you do the following with borders:

  • Rounded corners: Use the border-radius-property to get rounded corners on divs, buttons, and whatever else your heart desires — all without using images or JavaScript.
  • Images for borders: With CSS 2.1, the only way to create a graphic border was to fake it with background images, often multiple ones pieced together on multiple divs. You can now add unique borders without having to use background images by adding the images to the borders directly, using the new border-image property, which also allows you to control how the images scale and tile.

Part2 Borderradius in Modern CSS Layouts, Part 2: The Essential Techniques

The border-radius property can be used to round corners and even create circles out of pure CSS, with no images needed. (Stunning CSS3 web site)

These background and border techniques have already been covered well in a lot of great articles and tutorials, so check these out for the details:

Drop Shadows
Aids in: progressive enhancement, adaptability, efficiency

Drop shadows can provide some visual polish to your design, and now they’re possible to achieve without images, both on boxes and on text.

The box-shadow property has been temporarily removed from the CSS3 spec, but is supposed to be making its re-appearance soon. In the meantime, it’s still possible to get image-free drop shadows on boxes in Firefox and Safari/Chrome using the -moz-box-shadow and -webkit-box-shadow properties, respectively, and in Opera 10.5 using the regular box-shadow property with no prefix. In the property, you set the the shadow’s horizontal and vertical offsets from the box, color, and can optionally set blur radius and/or spread radius.

Part2 Boxshadow in Modern CSS Layouts, Part 2: The Essential Techniques

The Cherry web site uses drop shadows created with box-shadow on many boxes and buttons.

The text-shadow property adds drop shadows on — you guessed it — text. It’s supported by all the major browsers except — you guessed it — Internet Explorer. This makes it the perfect progressive enhancement candidate — it’s simply a visual effect, with no harm done if some users don’t see it. Similarly to box-shadow, it takes a horizontal offset, vertical offset, blur radius and color.

Using text-shadow keeps you from resorting to Flash or images for your text. This can speed up the time it takes you to develop the site, as well as speed up your pages. Avoiding Flash and image text can also aid accessibility and usability; just make sure your text is still legible with the drop shadow behind it, so you don’t inadvertently hurt usability instead!

For more on box and text drop shadows, see:

Transforms
Aids in: progressive enhancement, adaptability, efficiency

CSS3 makes it possible to do things like rotate, scale, and skew the objects in your pages without resorting to images, Flash, or JavaScript. All of these effects are called “transforms.” They’re supported in Firefox, Safari, Chrome, and Opera 10.5.

You apply a transform using the transform property, naturally (though for now you’ll need to use the browser-specific equivalents: -moz-transform, -webkit-transform, and -o-transform). You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object.

In the transform property, you specify the type of transform (called “transform functions”), and then in parentheses write the measurements needed for that particular transform. For instance, a value of translate(10px, 20px) would move the element 10 pixels to the right and 20 pixels down from its original location in the flow. Other supported transform functions are scale, rotate, and skew.

Part2 Transform in Modern CSS Layouts, Part 2: The Essential Techniques

The BeerCamp SXSW 2010 site scales and rotates the sponsor logos on hover.

For the full syntax on these transform functions, as well as examples of how to use them, see:

Animation and Transitions
Aids in: progressive enhancement, efficiency

Animation is now no longer the solely the domain of Flash or JavaScript — you can now create animation in pure HTML and CSS. Unfortunately, CSS3 animation and transitions do not have very good browser support, but as with most of the effects we’ve talked about so far, they’re great for adding a little non-essential flair.

CSS3 transitions are essentially the simplest type of animation. They smoothly ease the change between one CSS value to another over a specified duration of time. They’re triggered by changing element states, such as hovering. They’re supported by Safari, Chrome, and Opera 10.5.

To create a transition, all you have to do is specify which elements you want to apply the transition to and which CSS properties will transition, using the transition-property property. You’ll also need to add a transition-duration value in seconds (“s” is the unit), since the default time a transition takes is 0 seconds. You can add them both in the transition shorthand property. You can also specify a delay or a timing function to more finely tune how the two values switch.

Transitions are easiest to understand with live examples, so check out:

Beyond transitions, full-fledged animations with multiple keyframes are also possible with CSS3 (but currently only supported in Safari/Chrome). First, you give the animation a name and define what the animation will do at different points (keyframes, indicated with percentages) through its duration. Next, you apply this animation to an element using the animation-name, animation-duration, and animation-interation-count properties. You could also set a delay and timing function, just like with transitions. For details, see:

CSS3 Usability / Readability Enhancements

Most the CSS3 techniques we’ve gone over so far have been purely cosmetic effects that aid progressive enhancement. But CSS3 can also be used to improve the usability of your pages.

Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability

Some pieces of text are more readable in narrow, side-by-side columns, similar to traditional newspaper layout. You can tell the browser to arrange your text into columns by either defining a width for each column (the column-width property) or by defining a number of columns (the column-count property). Other new properties let you control gutters/gaps, rule lines, breaking between columns and spanning across columns. (For now, you need to use the browser-specific prefixes of -moz and -webkit.) This is another one of those techniques that can harm instead of aid usability if used improperly, as explained in “CSS3 Multi-column layout considered harmful,” so use it judiciously.

For details, see:

Controlling Text Wrapping and Breaking
Aids in: adaptability

CSS3 gives you more control over how blocks of text and individual words break and wrap if they’re too long to fit in their containers. Setting word-wrap to break-word will break a long word and wrap it onto a new line (particularly handy for long URLs in your text). The text-wrap property gives you a number of options for where breaks may and may not occur between words in your text. The CSS2 white-space property has now in CSS3 become a shorthand property for the new white-space-collapse and text-wrap properties, giving you more control over what spaces and line breaks are preserved from your markup to the rendered page. Another property worth mentioning, even though
it’s not currently in the CSS3 specification, is text-overflow, which allows the browser to add an ellipsis character (…) to the end of a long string of text instead of letting it overflow.

For details, see:

Media Queries
Aids in: adaptability, efficiency

CSS2 let you apply different styles to different media types — screen, print, and so on. CSS3’s media queries take this a step further by letting you customize styles based on the user’s viewport width, display aspect ratio, whether or not his display shows color, and more. For instance, you could detect the user’s viewport width and change a horizontal nav bar into a vertical menu on wide viewports, where there is room for an extra column. Or you could change the colors of your text and backgrounds on non-color displays.

Part2 Mediaqueries1 in Modern CSS Layouts, Part 2: The Essential Techniques

Part2 Mediaqueries2 in Modern CSS Layouts, Part 2: The Essential Techniques

This demo file from Opera uses media queries to rearrange elements and resize text and images based on viewport size.

Media queries couldn’t come at a better time — there is more variety in the devices and settings people use to browse the web than ever before. You can now optimize your designs more precisely for these variations to provide a more usable and attractive design, but without having to write completely separate style sheets, use JavaScript redirects, and other less efficient development practices.

Media queries are supported to some degree by all the major browsers except IE, and there are lots of great articles and tutorials explaining how to use them right now:

Media queries are particularly helpful in serving alternate styles to small-screen mobile devices, as these articles and tutorials explain:

For other options on how to deal with mobile devices, see Mobile Web Design Trends For 2009.

Improving Efficiency Through CSS3

Many of the visual effect properties of CSS3 that we’ve gone over have a great bonus in addition to making your design look great: they can improve efficiency, both in your development process and in the performance of the pages themselves.

Any CSS3 property that keeps you from having to create and add extra images is going to reduce the time it takes you to create new pages as well as re-skin existing ones. Less images also mean less stuff for the server to have to send out and less stuff for the users to download, both of which increase page loading speed.

CSS3 properties that keep you from having to add extra divs or extra classes can also reduce your development time as well as file size. We’ve already gone over some great techniques that help with this, but there are a few more worth mentioning.

The box-sizing Property
Aids in: efficiency

In addition to the div-conserving properties we’ve already talked about, the box-sizing property can also help limit your div use in certain situations.

In the traditional W3C box model of CSS 2.1, the value you declare for a width or height controls the width or height of the content area only, and then the padding and border are added onto it. (This is called the content-box model.) If you’ve worked with CSS for a while, you’re probably used to the content-box box model and don’t really think much about it. But, it can lead you to add extra divs from time to time. For instance, if you want to set a box’s width and padding in different units of measurement from each other, like ems for the width and pixels for the padding, it’s often easiest to nest another div and apply the padding to this instead, to make sure you know how much total space the box will take up. In small doses, nesting additional divs simply to add padding or borders is not a great sin. But in complicated designs, the number of extra divs can really add up, which adds to both your development
time and the file size of the HTML and CSS.

Setting the new box-sizing property to border-box instead of content-box solves this problem so you can get rid of all those extra divs. When a box is using the border-box box model, the browser will subtract the padding and border from the width of the box instead of adding it. You always know that the total space the box takes up equals the width value you’ve declared.

Part2 Boxsizing in Modern CSS Layouts, Part 2: The Essential Techniques

In the traditional box model (bottom image), padding and border are added onto the declared width. By setting box-sizing to border-box (top image), the padding and border are subtracted from the declared width.

The box-sizing property has good browser support, with the exception of IE 6 and IE 7. Unlike the more decorative CSS3 properties, however, lack of support for box-sizing could cause your entire layout to fall apart. You’ll have to determine how serious the problem would be in your particular case, whether it’s worth living with or hacking, or whether you should avoid using box-sizing for now.

For details, see:

CSS3 Pseudo-Classes and Attribute Selectors
Aids in: progressive enhancement, efficiency, modularity, rich typography

CSS has several really useful selectors that are only now coming into common use. Many of these are new in CSS3, but others have been around since CSS2, just not supported by all browsers (read: IE) until recently, and thus largely ignored. IE still doesn’t support them all, but they can be used to add non-essential visual effects.

Taking advantage of these newer, more advanced selectors can improve your efficiency and make your pages more modular because they can reduce the need for lots of extra classes, divs, and spans to create the effects you want to see. Some selectors even make certain effects possible that you can’t do with classes, such as styling the first line of a block of text differently. These types of visual effects can improve the typography of your site and aid progressive enhancement.

For details, see:

Read these articles and tutorials for examples of how to put advanced selectors to practical use right now:

HTML5

Although this article is focused on modern CSS techniques, you can’t have great CSS-based web pages without great markup behind them. Although HTML5 is still in development, and although debate continues about its strengths and weaknesses, some web developers are already using it in their web pages. While HTML 4.01 and XHTML 1.0 are still great choices for the markup of your pages, it’s a good idea to start learning what HTML5 has to offer so you can work with it comfortably in the future and perhaps start taking advantage of some of its features now. So, here is a brief overview of how HTML5 can help with our five modern CSS-based web design characteristics (progressive enrichment, adaptive to diverse users, modular, efficient, typographically rich).

Note: Many of these techniques are not supported in enough browsers yet to make their benefits really tangible, so think of this section as, perhaps, “here’s how HTML5 can aid these five characteristics in the future.”

New Structural Markup

Aids: adaptability, modularity, efficiency

HTML5 introduces a number of new semantic elements that can add more structure to your markup to increase modularity. For instance, inside your main content div you can have several article elements, each a standalone chunk of content, and each can have its own header, footer, and heading hierarchy (h1 through h6). You can further divide up an article element with section elements, again with their own headers and footers. Having clearer, more semantic markup makes it easier to shuffle independent chunks of content around your site if needed, or syndicate them through RSS on other sites and blogs.

In the future, as user agents build features to take advantage of HTML5, these new elements could also make pages more adaptable to different user scenarios. For instance, web pages or browsers could generate table of contents based on the richer hierarchy provided by HTML5, to assist navigation within a page or across a site. Assistive technology like screen readers could use the elements to help users jump around the page to get straight to the important content without needing “skip nav” links.

Although many of these benefits won’t be realized until some unforeseen time in the future, you can start adding these new elements now, so that as soon as tools pop up that can take full advantage of them, you’ll be ready. Even if your browser doesn’t recognize an element, you can still style it — that’s standard browser behavior. Well, in every browser but IE. Luckily, you can easily trick IE into styling these elements using a very simple piece of JavaScript, handily provided by Remy Sharp.

Of course, you usually can’t depend on all your users having JavaScript enabled, so the very safest and most conservative option is to not use these new structural elements just yet, but use divs with corresponding class names as if they were these new elements. For instance, where you would use an article element, use a div with a class name of “article.” You can still use the HTML5 doctype — HTML5 pages work fine in IE, as long as you don’t use the new elements. You can then later convert to the new HTML5 elements easily if desired, and in the meantime, you can take advantage of the more detailed HTML5 validators. Also, using these standardized class names can make updating the styles easier for both you and others in your team, and having consistent naming conventions across sites makes it easier for users with special needs to set up user style sheets that
can style certain elements in a needed way.

For more on HTML5 markup, see:

Reducing JavaScript and Plug-in Dependence

Aids in: adaptability, efficiency

A number of the new elements and features in HTML5 make effects possible with pure markup that used to be possible only with JavaScript or various third-party plug-ins, like Flash or Java. By removing the need for JavaScript and plug-ins, you can make your pages work on a wider variety of devices and for a wider variety of users. You may also make your development process quicker and more efficient, since you don’t have to take the time to find the right script or plug-in and get it all set up. Finally, these techniques may be able to boost the speed of your pages, since extra files don’t have to be downloaded by the users. (On the other hand, some may decrease performance, if the built-in browser version is slower than a third-party version. We’ll have to wait and see how browsers handle each option now and in the future.)

Some of the features that reduce JavaScript and plug-in dependence are:

  • New form elements and attributes. HTML5 offers a bunch of new input types, such as email, url, and date, that come with built-in client-side validation without the need for JavaScript. There are also many new form attributes that can accomplish what JavaScript used to be required for, like placeholder to add suggestive placeholder text to a field or autofocus to make the browser jump to a field. The new input types degrade to regular inputs in browsers that don’t support them, and the new attributes are just ignored, so it doesn’t hurt unsupporting browsers to start using them now.

    Of course, you’ll have to put in fallback JavaScript for unsupporting browsers, negating the “no JavaScript” benefits for the time being. (Or, depend on server-side validation—which you always ought to have in place as a backup behind client-side validation anyway—to catch the submissions from unsupporting browsers.) Still, they offer a nice usability boost for users with the most up to date browsers, so they’re good for progressive enhancement.

  • The canvas element. The canvas element creates a blank area of the screen that you can create drawings on with JavaScript. So, it does require the use of JavaScript, but it removes the need for Flash or Java plug-ins. It’s supported in every major browser but IE, but you can make it work in IE easily using the ExplorerCanvas script.

  • The video and audio elements. HTML5 can embed video and audio files directly, just as easily as you would add an image to a page, without the need for any additional plug-ins.

Part2 Html5form in Modern CSS Layouts, Part 2: The Essential Techniques

Some of the new input types in HTML5 will bring up widgets, such as the calendar date picker seen with the datetime input type in Opera, without needing any JavaScript. (HTML5 input types test page)

For more on these features, see:

IE Filtering

Aids in: progressive enhancement

IE 6 doesn’t seem to be going away anytime soon, so if you want to really make sure your pages are progressively enhanced, you’re going to have to learn how to handle it. Beyond ignoring the problem or blocking IE 6 altogether, there are a number of stances you can take:

  • Use conditional comments to fix IE’s bugs: You can create separate style sheets for each version of IE you’re having problems with and make sure only that version sees its sheet. The IE sheets contain only a few rules with hacks and workarounds that the browser needs.
  • Hide all main styles from IE and feed it very minimal styles only: This is another conditional comment method, but instead of fixing the bugs, it takes the approach of hiding all the complex CSS from IE 6 to begin with, and only feeding it very simple CSS to style text and the like. Andy Clarke calls this Universal Internet Explorer 6 CSS.
  • Use JavaScript to “fix” IE: There are a number of scripts out there that can make IE 6 emulate CSS3, alpha-transparent PNGs, and other things that IE 6 doesn’t support. Some of the most popular are ie7-js, Modernizr, and ie-css3.js.

In addition to the resources linked in the text above, you can learn more about how to handle IE at:

Flexible Layouts

Aids in: adaptability

One of the main ways you can make your sites adaptable to your users’ preferences is to create flexible instead of fixed-width layouts. We’ve already gone over how media queries can make your pages more adaptable to different viewport widths, but creating liquid, elastic, or resolution-dependent layouts can be used instead of or in conjunction with media queries to further optimize the design for as large a segment of your users as possible.

  • Liquid layouts: Monitor sizes and screen resolutions cover a much larger range than they used to, and mobile devices like the iPhone and iPad let the user switch between portrait and landscape mode, changing their viewport width on the fly. Liquid layouts, also called fluid, change in width based on the user’s viewport (eg, window) width so that the entire design always fits on the screen without horizontal scrollbars appearing. The min-width and max-width properties and/or media queries can and should be used to keep the design from getting too stretched out or too squished at extreme dimensions.
  • Elastic layouts: If you want to optimize for a particular number of text characters per line, you can use an elastic layout, which changes in width based on the user’s text size. Again, you can use min- and max-width and/or media queries to limit the degree of elasticity.

  • Resolution-dependent layouts: This type of layout, also called adaptive layout, is similar to media queries, but uses JavaScript to switch between different style sheets and rearrange boxes to accommodate different viewport widths.

For details on creating flexible layouts, see:

Layout Grids

Aids in: modularity, efficiency

Designing on a grid of (usually invisible) consistent horizontal and vertical lines is not new — it goes back for centuries — but its application to web design has gained in popularity in recent years. And for good reason: a layout grid can create visual rhythm to guide the user’s eye, make the design look more clean and ordered, and enforce design consistency.

Grids can also make your designs more modular and your development more efficient because they create a known, consistent structure into which you can easily drop new elements and rearrange existing ones without as much thought and time as it would take in a non-grid layout. For instance, all of your elements must be as wide as your grid’s column measurement, or some multiple of it, so you can easily move an element to another spot on the page or to another page and be assured that it will fit and look consistent with the rest of the design. At worst, you’ll need to adjust the other elements’ widths around it to a different multiple of the column measurements to get the new element to fit, but even this is not too work-intensive, as there is only a handful of pre-determined widths that any element can have.

Part2 Grid in Modern CSS Layouts, Part 2: The Essential Techniques

All of the content of The New York Times site falls into a grid of five columns, plus a thin column on the left for navigation.

To learn how to use grids, see:

Efficient CSS Development Practices

Aids in: modularity, efficiency

Layout grids and many of the CSS3 techniques we’ve gone over have the side benefit of making your CSS more modular and helping you write and maintain CSS more efficiently. There are also a few CSS development practices that you can use with any of the techniques we’ve already covered in order to reduce the time it takes you to write the CSS for those techniques in the first place, as well as save you time reusing components in your pages.

CSS Frameworks

A CSS framework is a library of styles that act as building blocks to create the standard pieces you might need in your site. While CSS frameworks differ greatly in depth and breadth, most popular, publicly-distributed frameworks contain some sort of layout grid, as well as standard styles for text, navigation, forms, images, and more. It’s a good idea to create your own CSS framework, perhaps based on one of the most popular ones; it can be as simple as standardizing the IDs and classes you tend to use on every project and creating a starter style sheet for yourself.

Good CSS frameworks provide you with a solid starting point for your designs, cutting down your time spent developing, testing, tweaking, and updating. They can also reduce the time others (your team members or those who inherit your sites) spend modifying your CSS, as everyone is working from a standard set of conventions. Frameworks can make your designs more modular by giving you a standard set of classes that can be reused from page to page easily, breaking the styles down into separate sheets that can be applied independently to pages on an as-needed basis, or allowing you to plug in various types of content without needing to invent new classes for it.

But, frameworks have their share of problems too. For instance, publicly-distributed (as opposed to your own private) frameworks tend to have large file sizes, as they need to work for any type of site with any type of content; if they’re separated into multiple sheets, they can further damage page speed since every HTTP request takes time. We won’t get into the full list of pros and cons here, but there are ways to work around many of them, so check out the following articles for the details. You’ll also find links to the most popular CSS frameworks.

Object-oriented CSS (OOCSS)

Nicole Sullivan coined the term object-oriented CSS (OOCSS) for her method of creating self-contained chunks of HTML (modules) that can be reused anywhere in the page or site and that any class can be applied to. Some of the main principles of OOCSS are:

  • using primarily classes instead of IDs
  • creating default classes with multiple, more specific classes added on to elements
  • avoiding dependent selectors and class names that are location-specific
  • leaving dimensions off module styles so the modules can be moved anywhere and fit
  • styling containers separately from content

OOCSS aims to make your CSS development more efficient, as well as to make the CSS itself more modular and less redundant, which reduces file sizes and loading speed.

CSS Generation

When it comes to writing CSS quickly, what could be quicker than having some piece of software write it for you? Now, please don’t think that I’m advocating not learning CSS and having a tool write a complete style sheet for you. That is a bad, bad idea. But, there are some quality tools out there that can give you a headstart with your CSS, just to shave a little time off the front of your CSS development process. Most good CSS generators are focused on creating styles for one particular area of your design, such as the layout structure or type styles, not the whole style sheet.

There are far too many tools to link to individually here, so remember when you’re finding your own tools to carefully review the CSS it outputs. If it’s invalid, bloated, or just plain ugly, don’t use the tool! Here are some articles that include lists of and links to CSS generators:

CSS Performance

Aids in: efficiency

Your efficiently created CSS-based web sites also need to perform as efficiently as possible for your users. Many of the CSS3 techniques we’ve covered can reduce file sizes and HTTP requests to increase the speed of your pages. There are some additional CSS techniques you can use to boost performance.

CSS Compression

Writing clean CSS that takes advantage of shorthand properties, grouped selectors, and other efficient syntax is nothing new, but it remains very important for improving performance. There are also tricks some CSS developers employ to further reduce CSS file sizes, such as writing each rule on one line to reduce all the line breaks. Although you can do some of this manually, there are a number of tools that can optimize and compress your CSS for you.

For more on methods and tools to optimize and compress your CSS, see:

CSS Sprites

CSS Sprites is a CSS technique named by Dave Shea of combining many (or all) of your site’s images into one big master image and then using background-position to shift the image around to show only a single image at a time. This greatly improves your pages’ performance because it greatly reduces the number of HTTP requests to your server. This is not a new technique, but it’s becoming increasingly important in modern CSS-based web sites as page performance becomes more and more important.

Part2 Sprites in Modern CSS Layouts, Part 2: The Essential Techniques

The Apple site uses CSS sprites for various states of its navigation bar.

For details, see:

Not everyone is a fan of CSS sprites, however. For some opposing arguments, as well as alternative methods of reducing image HTTP requests, see:

Font Embedding and Replacement

Aids in: progressive enhancement, rich typography

Until recently, web designers were limited to working with the fonts on their end users’ machines. We now have a number of techniques and technologies that make unique but still readable and accessible text possible.

The @font-face Rule

The @font-face rule, part of CSS3, allows you to link to a font on your server, called a “web font,” just as you can link to images, and displays text on your site in this font. You can now make use of your beautiful, unique fonts instead of just the fonts that most people already have installed on their machines. Fortunately, @font-face has good browser support. But alas, it’s not as simple as that. Different browsers support different types of fonts, different platforms and browsers anti-alias very differently, you can get a flash of unstyled text before the font loads, your font may not allow @font-face embedding in its license, and on and on it goes. To break through the confusion, see these articles:

Part2 Fontface in Modern CSS Layouts, Part 2: The Essential Techniques

Sam Howat’s site uses @font-face to get attractive non-standard fonts into the headings and intro blocks of text.

Part2 Fontface2 in Modern CSS Layouts, Part 2: The Essential Techniques

Blue Sky Resumes uses @font-face extensively in headings, feature copy, and the main nav bar of the site.

Other Font Embedding and Replacement Techniques

If the pure CSS solution of @font-face is making your head spin, you can use a font embedding service or font replacement technique.

  • Font embedding services: There are a number of third-party font embedding services available that make use of @font-face, such as Typekit and Kernest, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal. Most of these services are not free, but some have free options that give you access to a limited set of fonts.
  • Font replacement techniques: These free techniques, such as sIFR and Cufón, do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s machine. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

For links to these services and techniques, see:

Conclusion

You’re now equipped with the basic knowledge and a slew of links to create modern CSS-based web pages that are progressively enriched, adaptive to diverse users, modular, efficient, and typographically rich. Go out and create great, modern work!


© Zoe Mickley Gillenwater for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,

See our New Portfolio Items

We have been busy uploading new portfolio items onto our web site. Please take a look and check out some of our latest work. Be sure to let us know what you think.

Comments

    Archives