Slides, photos, video and audio from "Typography for the Web"

Listen to the event:

Watch "Typography for the Web" on Ustream.tv and view photos from it on Flickr!

Here is a list of resources that follow along with the topics covered in the presentation:

Building a foundation

• Eight definitive font stacks
• PX to EM
• How to size text using ems
• The typographic scale
• Setting type on the web to a baseline grid
• Compose to a vertical rhythm

Formatting headings

• Nine techniques for CSS image replacement
• Facelift
• Install FLIR
• FLIR Security Check
• sIFR3 Documentation
• This is how you get sIFR to work
• sIFR3 hard drop shadows
• Cufon - fonts for the people
• Cufon on github
• Cufon font embedding
• Web fonts with @font-face
• Combining Cufon and @font-face

Noticing the details

• Text-shadow
• Taming lists
• 12 examples of paragraph typography

And more!

• Better pull quotes with jQuery
• Typography blogs for your inspiration
• Fuck the foundries
• exljbris Font Foundry

What are some of your favorite typography resources? How do you feel about one type of replacement technique over another? Please continue the conversation in the comments below

Join the New York Web Standards Meetup at Meetup.com, follow us on Twitter and join our LinkedIn group!

Christy Gurga (theMechanism) will present different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy will cover advanced techniques that are applicable for front-end developers of any level.

You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headers and polish your typography with extra detail.

16 April 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Tossed to the gutter was my sexy old flame: Blogging — my occasional habitual activity of scribbling down thoughtful musings. My new sleazier and easier squeeze not surprisingly involves significantly less brain power. Twittering is fast food for the nerdling masses, but instead of increasing their waist lines, a purified and constant diet of tasty Tweets will likely shrink their brains faster than a Fail Whale caught in an updraft.

Back in the good old days of last year, people still communicated using a significant number of words and syllables to convey a complete thought — whether it was through actually jiggling their mouth parts and expelling noises with other human beings present, or through printed and later online media. Now, tapping 140 character quips is substituting once meticulously crafted ideas with “off-the-cuff” communication. Who has time with a busy schedule and diet of downloading free music, poking at a mobile device, and checking their friend count on Facebook to actually bother talking anymore?

For the people that Twitterers believe hang on their every word, they can share every thought that springs into their pointy skulls. Having a fresh cup of coffee? I must tell my followers. Sniffed a foul whiff of some particularly stinky cheese? Please, do tell the followers! Raining out; saw a squirrel; drew a fresh breath; tickled your pet toad; spotted a funny shirt or does your little tummy hurt? Please be sure to let those mysterious avatared creatures who are following your every random thought know immediately — as they must be kept in this timely loop of baboonery through your mighty Tweets.

I openly admit, I Twitter more than a geophagic licks earth. But when you share every thought, does everyone keep listening? Like the “lad who cried canis lupus”, knuckleheads who gleefully announce every single thought, lose my attention quickly. In real life, people that shout every thought that enters their skulls are not only shunned by society, but are usually referred to as “Apeshit.” However, in the world of Twitter, many of these serial chatterboxes are superstars.

For Twitter rock star Guy Kawasaki @guykawasaki, with over 21,000 updates and over 100,000 followers, Twitter is his minute by minute diary, and quite possibly, his current career until Twitter goes the way of MySpace. His endless announcements and links fuel his fans to pick up his books and line up to hear him talk (yep, talk…) about Twittering. People I’m certain, hang on his and many other Twitterers every written word, and as an indirect result, the days of expanded communication could very well be coming to an end. Who needs to have an actual conversation when you are having a conversation with hundreds and possibly thousands of eager followers?

In this age of speed and obvious lack of attention, how will magazines, books and newspapers deal with the lack of interest in expansive thoughts? They will be severely marginalized, to say the least. Newspapers are yesterday’s news. The press was a precursor to, and now a minor footnote to, full-on digital communication. Michael Wolf, columnist for Vanity Fair and the founder of news aggregator newser.com says that the newspaper is a dead medium, and I do agree. If you want a snapshot of the news, go to an online news aggregator like Alltop.com (oddly enough, created by Guy Kawasaki to support his endless desire to post aggregated news stories to his Twitter account). Follow trending topics on Twitter and you’ve got a tiny snapshot of anything that’s important this second.

Not all is bad for the serial Twitterer. One of the things that makes Twitter an innovative solution is that the writer isn’t expected to craft anything brilliant at all, making it an ideal solution for the largest possible user base. Depending on the Twitterer, 140 words can either be a link to an interesting story, a Re-Tweet of something someone else has already Twittered about, or if it sucks, possibly the sound of one hand clapping in a pixellized forest of sumac. Can you hear the virtual crickets as the masses embrace and virus forth with this technology on the planet? I can.

Twitter is now everywhere, which makes it very popular, and dare I say, interesting for business yet simultaneously less interesting to everyone else. John Stewart has ranted about it, CNN as well as all the major networks have reported on people, stars and politicians using it, and the CBS Morning Show did a story on it this morning. Once everyone is at the party however, it’s time to find another party. Knowing that politicians are now using Twitter from the floor of Congress to send quippy notes to their reptilian minions spooks me. There’s something childish about John McCain @SenJohnMcCain Twittering “On my way to tape meet the press.” It resonates with me like a high schooler talking about going to Dunkin’ Donuts. Really John, who cares?

The amazing social connections that can occur when blending Twitter with LinkedIn, Facebook, blogging, Flickr, Last.fm, technorati, feedburner and other social media systems in order to build out a personally web-rounded personality is what interests me. This is where social media truly has long lasting power. Use Twitter to announce some new photos to another audience that won’t necessarily see your Flickr account, for example. The goal is to merge these various social networking audiences to build a much more powerful network for yourself and to introduce people who wouldn’t have normally met in other circumstances. The most important thing if you take this advice is to make sure that you stay on message.

I’m curious about what footprint the folks who have gone full Twit and successfully abandoned other social networks will leave behind when they eventually have thought chips built in their monkey skulls, making the act of clicking a keyboard or tapping into a mobile device irrelevant for telling the masses your baby just made a potty. Google has begun to crawl Twitter blogs, but in an online society that values the immediacy of communication, I wonder how interesting what your kid burped up on Saturday will be to you or anyone in the future.

So, for the old school bloggers (holla!), perhaps there’s never been a better topic to actually blog about.

One thing’s for sure, I’m 6313 characters over my Twitter yak limit and you read it to the end. See, there’s hope for you yet. Maybe even someday, we can have a personal conversation again, like humans used to have last year.

Dave Fletcher is the Founder / Creative Director at theMechanism, a multi-disciplinary design agency with offices in New York, London and Durban, South Africa. Until they embed the chip into his monkey brain allowing him to communicate directly with you at any time and anywhere, you can follow his mindless quipping @davefletcher.

Overarching Themes:

• Collaboration within companies, collaboration between client & web team, collaboration between web teams
• Openness with coworkers and with clients
• Don’t do work for the sake of doing work; create deliverables that have applicable value
• Some clients (and even workers) respond better to many lo-fidelity steps (sketching, collage, mood boards) to buy into the design process before seeing a polished design
• Agile development! Working in quick phases to roll out a product. Everyone’s talking about it, but it may not be good for every team or every client

Web Typography: Quit Bitchin’ and Get Your Glyph On

See the slides at SXSW Typography

• Richard Rutter - Clearleft Ltd - @clagnut
• Ian Coyle - iancoyle.com - @superheroeshq
• Samantha Warren - Viget Labs - @samanthatoy
• Jonathan Tan - OmniTI Inc - @jontangerine
• Elliot Jay Stocks - @elliotjaystocks

Links:

• webfonts.info

Being a UX Team of One

• Leah Buley - Adaptive Path - @ugleah

Highlights:

• Ditch the concept of the “singular genius designer.” The designer is the person who takes everyone’s ideas and creates a cohesive solution to the problem
• Always sketch out at least six layout ideas!
• Get as many people (developers, clients, shareholders) involved as early as possible

Links:

• Concept Share, a web-based collaboration tool.

Books:

• I talked with Leah, and she recommended Information Architecture for the World Wide Web, better known as The Polar Bear Book.

How to Create a Great Company Culture

• Sam Decker - BazaarVoice - @samdecker
• Jason Black - Boundless Network - @jasonablack

Highlights:

• A good fit is achieved by every team member having the same core values
• Always remain passionate about what you’re doing. Even if you find yourself in a situation you don’t like, find a small thing to focus on and remain passionate

Books:

• Good to Great
• Fierce Conversations

How MacGyver Would Do Design Research

• M Jackson Wilkinson - Viget Labs - @whafro

Highlights:

• Do as much dual-work as possible (creating wireframes in CSS/HTML, reusing documentation, etc)
• Know what not to research; pay attention to what’s already been done
• Do user testing with fewer people, have them each do more tasks

Links:

• Silverback
• UserFly
• Camtasia
• Crazy Egg

Wireframes for the Wicked

• Nick Finck - Blue Flavor - @nickf
• Donna Spencer - Maadmob - @maadonna
• Michael Angeles - Traction Software - @jibbajabba

Highlights:

• Choose your wireframe type based on the audience; you may do different wireframes for the client vs the developer
• Feel free to mix hi- and lo-fidelity methods to achieve the appropriate type of wireframe
• Sketching-style wireframes may make clients feel more comfortable with sharing ideas and adding input
• Michael Angeles has the coolest notebooks! Sketching the User Experience

Links:

• Twitter conversation #wickedwire
• Balsamiq Mockups
• Konigi OmniGraffle Stencils

Designers and Developers: Why Can’t We All Just Get Along?

• Chris Lea - Media Temple/Virb - @chrislea
• Liz Danzico - The School of Visual Arts - @bobulate
• Ryan Sims - Virb - @simmy
• Joe Stump - Digg - @joestump
• Daniel Burka - Digg/Pownce - @dburka
• Andy Beaumont - Flutter + Wow - @drcongo
• Rob Corradi - NeonState - @ribrob

Highlights:

• Speak in terms of problem/solution instead of specific features–the developer may have a better way to solve the problem
• Include a developer in early meetings to avoid promises of unrealistic features and to help brainstorming
• Designers should make the effort to learn as much as they can

Links:

• Edward Tufte

Collaboration or Collision: Achieving Design Studio Bliss

• Jennifer Bove - Kicker Studio - @kickerstudio
• Tom Maiorana - Kicker Studio - @tmaiorana

Highlights:

• Bring your clients into the brainstorming session
• Show your clients a variety of mood board concepts; This is the stage for back-and-forth conversations and for feedback. Take this knowledge and deliver one cohesive design mock-up. Delivering several designs diminishes your expertise in finding the right solution.
• Educate your clients on the value of your product; don’t work to meet unreasonable deadlines
• Don’t let a single designer get too involved in the “ownership” of his/her design. Take it away and let someone else work on it.
• Don’t design behind closed doors, open up the conversation!

Books:

• Radical Collaboration

Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.

Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn’t choose it: The out-of-the-box look doesn’t have nice buttons and transitions.

jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.

Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn’t choose it: Way too complex for the specific project I’m working on. I’d want to use this on a highly-branded site where I’ve crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn’t determine if there is an easy way to use this in “gallery” mode where I want Previous/Next buttons to go between a set of images.

prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it’s a really nice looking Lightbox.

Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn’t choose it: This was nearly my final choice, but I don’t like the tab-like box above the photo for the title. The project I’m using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.

jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It’s the closest match I’ve seen to the official Lightbox 2.

Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it’s got what I want right out of the box.

In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.

EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!

Google, Yahoo and Microsoft now support a new value for the rel attribute of the link tag that allows one to publicly specify their preferred version of a URL. The value is "canonical" and it's simple to use: <link rel="canonical" href="http://your-site.com/preferred/url/" />. Read my post

The PHP Fileinfo extension is useful for determining the MIME types of files. The returned type is not based on a file's extension, but rather on certain byte sequences at specific positions within the file.

The first post I wrote describes how to compile and install Fileinfo on a Media Temple dedicated virtual server. The second talks about how to use Fileinfo and includes a wrapper class that might be helpful.

Via @davefletcher. Source YouTube

The New York Web Standards Meetup Group will meet next Thursday (26 February 2009) at theMechanism at 7:00 pm.

After a brief intro to/review of the Google Maps API, Jeffrey Barke (theMechanism) will cover some advanced Google Maps API topics, including server- and client-side clustering, creating custom base maps and some GIS-like functions.

Attendees should have some experience with JavaScript and familiarity with the Google Maps API.

26 February 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Geir Magnusson (10gen) will talk about 10gen's MongoDB, an object-oriented DBMS. It is neither a relational database nor even "table oriented" like Amazon SimpleDB or Google's BigTable

22 January 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

OneWebDay, the Earth Day of the internet, has submitted a proposal to make OneWebDay a national day. Please review their full proposal below, and, if you support it, vote for it at Change.org.

The idea behind OneWebDay is to focus attention on a key Internet value (universal access and digital literacy in 2009), focus attention on local Internet concerns (connectivity, censorship, individual skills) and create a global constituency that cares about protecting and defending the Internet. OneWebDay is like an Earth Day for the Internet, celebrated every September 22 since 2006! We are building an organization that works like the Web: an open platform that supports collaboration on annual projects that educate and activate a broad range of communities about issues that are important for the Internet's future.

In recognition of President-elect Obama's deep understanding of the power of the Internet and his stated pledge to bring "true broadband to every community in America," we hope that the new Administration will recognize OneWebDay and partner with us in 2009 to organize a week of national (and global) service to bring more access and skills to communities that are still left behind in the new digital world.

Tomorrow is the deadline! Please take action and vote at Change.org now!