Archive for ‘markup’ category

Use the Best Available Ampersand

I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no?

For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s also something I’ve done here on SimpleBits for quite awhile in our tagline. The simple little concept comes from one of Robert Bringhurst’s guidelines in his seminal typographic bible, The Elements of Typographic Style.

Guideline 5.1.3 offers this little tidbit regarding ampersands:

In heads and titles, use the best available ampersand.

Bringhurst explains that frequently the italic version of an ampersand is more decorative and interesting than its roman counterpart, and goes on to suggest:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

So why not apply this to the web? We can use CSS to cleverly specify a list of our favorite ampersands, with the reader getting the best one available. We’ll first apply a class wrapped around the ampersand we’d like to beautify like so:

<span class="amp">&amp;</span>

And we’ll build a list of cool italic ampersands that readers might have installed by default, while also specifying the italic version:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }

We can weight our list, putting our favorites near the front, understanding that the reader may get one or none, depending on which operating system they’re on, and if they have the font installed.

Thanks to the excellent efforts of our newly-hired help, here are some charts showing some of the more interesting italic ampersands available as default fonts on Mac and Windows. These’ll help get you started building your own awesompersand list.

These charts are by no means comprehensive, but were created from the default lists from each operating system. Pre-bundled or third-party applications may install other cool fonts that could be common enough to use as well. If you have a favorite that’s not listed, let us know in the comments.

Mac OS X (10.5)

OSX ampersands

Windows XP

Windows XP ampersands

Windows Vista

Vista added several new fonts, all beginning with the letter ‘C’. What’s nice is that Constantia nicely matches Palatino on the Mac and Palatino Linotype on Windows XP.

Windows Vista ampersands

For more Bringhurst-to-CSS goodness, see Richard Rutter‘s The Elements of Typographic Style Applied to the Web project. And be sure to grab Meagan’s wallpapers to ampersandify your desktop.

Safari 3.1 Develop Menu

Web Inspector

The just-released Safari 3.1 has a new “Develop” menu (check the Advanced tab in Preferences to activate it). I usually rely on Firefox’s Web Developer Toolbar for testing and diagnostics — but preferring Safari as my general browser of choice, I was happy to see some native tools baked-in.

I often run these “bulletproof integrity tests” after finishing an initial design: disabling styles, javascript and images to check for readability and flexibility. Favlets and Firefox extensions have made this easy for years, and Safari’s new Develop menu has several of these. Excellent, I said.

It also ships with a Web Inspector (think Firebug), which allows you to break down a web page by listing it’s various files, drilling down to see computed styles and DOM info. At first glance this looked exciting and very promising, with “editable CSS” promised in the release notes. Unfortunately, you can’t edit the full CSS file (a feature we’d all love, and one that’s found in other developer extensions), but rather choosing “Inspect Element” by right clicking on a web page’s element will activate a semi-confusing-but-comprehensive status on that particular bit of code selected. I was initally confused by choosing “Inspect Element” on one of the CSS files in the list view in an attempt to edit it, only to find that the Inspector was in fact inspecting itself (which is apparently built with HTML and CSS). Heh, recursive inspection. Recurspection. Inspursive.

It seems I wasn’t the only one confused, with a chorus of Twitterers wondering the same thing: how the heck can I edit the CSS? The answer is by choosing “Inspect Element” from the browser window (a right or ctrl click), then double-clicking a property from the Styles sidebar in the Web Inspector — but not in the “Computed Style” box that’s also in the sidebar.

So, it’s a start. I’d love to see full live editing of CSS and HTML in a future version — but it’s nice to see the beginning of all of this built right into the browser.

Marked Up & Styled

We held the third gathering of the Markup & Style Society last night (a local Boston-area meetup for web geeks that Ethan Marcotte and I started a while back). This one was different and contained more awesomeness, for a variety of reasons.

The kind folks at Filament Group hosted the event at their downtown Boston studio. The incredibly generous Freshview donated 18 pizzas, beer and wine for all 50 attendees. Freshview are makers of Campaign Monitor, the popular email newsletter campaign app, as well as creators of useful tools and resources for newsletter designers. Thank you thank you, Freshview.

Adobe donated two copies of CS3 Web Premium that we raffled off along with a few books at the end of the night. So we knew at least two people would go home happy no matter what happened.

Markup and Style SocietyWhile previous meetups have all been about beer and socializing, we may have surprised people with four short talks. A free, mini conference if you will. Ethan gave a brilliant presentation on some tricks he’s enabled in his freakishly bulletproof, fluid layout (Ethan’s write-up). I rambled on about “Gridlasticness”: taking an em-based approach to a strict grid. Josh Porter talked about craftsmanship as it relates to the web — a topic near and dear to my heart. It was sprinkled with “right on” moments and quotes like this, regarding the Shaker design philosophy:

Don’t make something unless it is both necessary and useful, but if it is both necessary and useful, don’t hesitate to make it beautiful.

Scott Jehl closed the show with an excellent talk on how progressive enhancement plays a big role in the projects he tackles at Filament Group. Read more about Filament’s process over at their newly launched lab (Filament’s Maggie Costello Wachs’ write-up).

All in all, ’twas a great night, and it made up for seeing just one single panel at SXSW just days earlier. We’ll have to do it again soon. Blatently tooting our own horn here, Patrick Haney dug it, evidenced by his tweet:

Really felt like I got more out of the four short talks tonight at M&SS than I did at a week of SXSW

Thanks to the speakers, sponsors and especially Filament for the venue. We’ve also been planning on adding more formal workshops or full day conference-style events to the mix in the future. New England needs more of this, methinks. Stay tuned.

Update: Jenny Bergman has posted some wonderful photos of the event. Thanks, Jenny!

Markup & Style Society

Ethan and I are pleased to announce another meeting of The Markup & Style Society next month. It’s a semi-regular, casual meetup for New England area web geeks. This time, things are a little more interesting, and even more secretive. Here are the details:

We need to limit the number of guests due to space, and we’ll be keeping track of first 50 people who RSVP via Upcoming. Unfortunately only those folks will be able to attend, so mark your calendars early.

A fun and interesting evening is promised, with after-meetup drinks at a local pub to follow (that’s really the best part, isn’t it?). We’re also looking for a friendly sponsor to cover pizza during the event. Interested? Let us know and you’ll be forever remembered as “that awesome company that gave us pizza that one time at that thing a while back”.

Gridlasticness

After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design—but under the hood is new markup, new stylesheets and a strict grid layout based on ems. After moving into new physical digs last month (more on this later), it only seemed appropriate to spruce up the virtual ones as well.

As usual, the overhaul started innocently enough, with a little tinkering here and there that snowballed into tearing the old CSS out, while the site embarrassingly stood naked for a week. But the challenge of creating a em-based grid was too tantalizing (the second time I’ve used that word in as many days).

A few notes when trying to create a grid layout using ems:

  • Using the 62.5% method for sizing text has the advantage of setting gutters, borders, etc. at values of ten (e.g. 1em = 10px).
  • Remember to avoid specifying widths and font-size on the same element (or at least be consistent about it).
  • Realize that when adjusting text size in Safari, the grid will only stay perfect on a random bump. Firefox seems to stay intact at all times. I assume this is due to a rounding discrepancy.
  • Understand that when building an already-wide layout, it’ll get really wide, really fast. That’s OK. Wide is the new drop shadow.
  • Have plenty of coffee at hand.

A large motivation for this tinkering had to do with the Notebook entry styling. I’ve tweaked the MovableType templates to enable posting of quotes and photos as well as long entries and QuickBits (links). A “tumblelog” as the kids would call it. That doesn’t mean there’ll be 100 posts a day—but it does mean (I hope) more posting in general.

Now if you’ll excuse me, there are several dusty corners to clean up around here.

Markup & Style Reminder

Just a quick reminder of next week’s meet-up of the Markup & Style Society. Ethan and I have occasionally put together these informal gatherings in Boston for the past few years. They’re always a good time, and we’re always amazed by the turnouts.
So join us next Wednesday the 26th at Boston Beer Works on Canal. The format of these meetings is pretty simple: we meet and enjoy beverages for a few hours. That’s it. Perhaps we need a secret handshake or other ceremonial traditions. Those will evolve in time. We do have plans to expand this a bit in the future, and would love any ideas on a venue around town to hold a more structured meeting.
Lastly, there are a few more pinſ available if you don’t have one yet. Hope to see you fellow New Englanders there.

Middle West

I’ve been meaning to write up some thoughts on last week’s “An Event Apart Chicago”:http://aneventapart.com/events/chicago07/. It was my first trip to the city in the middle west that sits on a big lake. Hot dogs were eaten. “Cheezborgers”:http://www.flickr.com/photos/adactio/1255681470/ were inhaled. Deep dish pizza was shoveled. I was inflated. Chicago is without a doubt a food city — but how the heck does anyone stay under 300 lbs. there?
The event itself _was excellent_. Of course it was excellent. Whenever you get a bunch of great speakers and cool attendees under one roof for a few days, that’s the way it’s going to go. But there are other reasons why this particular show was a success.
In my opinion: one track continues to rule. It rules because you don’t have to decide where to go and what to miss. But it also rules because the conversations in the hallways and pubs can be centered around the same sessions. There’s no “ah, I missed that one because I saw ______ instead”. There’s a complete shared experience between all attendees, and that’s a very good thing.
On the opposite end of the spectrum is SXSW, which will have approximately 23,867 panel sessions next year. Maybe we’ll be able to talk about one of them together. Maybe we’ll also bump into each other at that party on Sixth. Or more likely, we’ll leave feeling like we’ve missed the _real_ conference.
Another key to the single track at AEA: breaks. And a lot of them. An hour is a long time to sit, and a nice break after every session really helps. It also helps in that it gives more opportunity to chat with people. And you can chat about the session that just happened while it’s fresh. It seems obvious, but not every event is structured like this.
I’m bummed I missed “Liz Danzico”:http://bobulate.com/’s The Seven Lies of Information Architecture talk. But I was busy freaking out about my session that immediately followed, going over slides up to the last minute, as usual.
“Derek Featherstone”:http://www.boxofchocolates.ca/ wowed us with a “semantically rich crossword puzzle styled with CSS”:http://www.boxofchocolates.ca/projects/crossword/.
A highlight was Coudal‘s closing keynote, where he talked about the balance between work that pays the bills and the personal projects that are exciting, fun and if you’re lucky can also pay the bills. A lot of what he was saying hit close to home — the idea that maybe we all don’t have short attention spans. We get inspired and have those moments of sheer excitement when diving into something new. I liked that Jim said this was OK. See the hilarious “aforelinked film”:http://www.simplebits.com/notebook/2007/08/30/regrets.html that supplements this.
It was a quick trip, but luckily was able to squeeze in a river boat tour of downtown Chicago with friends old and new. The architecture is incredible, and sitting on a boat floating through the city is my kind of sightseeing. From the river, one can take in the hundreds of skyscrapers that pepper the riverside. Just amazing.
Photos were “taken by me”:http://www.flickr.com/photos/simplebitsdan/sets/72157601786721091/ and “by many others”:http://www.flickr.com/groups/aeachicago07/pool/.

Bulletproof Web Design, Second Edition

On bookstore shelves today (I hope) is something I’ve been toiling over for the past few months. Bulletproof Web Design, Second Edition is a refresh of the book I wrote for New Riders in 2005. I’ve been humbled by the response of the first edition, and have enjoyed talking about the principles described in the book at conferences and workshops over the last few years. So it was only fitting to give this little blue book a tune-up under the hood.

Book coverThis isn’t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn’t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total. All in all, I’m happy to have the book be all the more solid and relevant.

On the surface, writing a second edition of a book seems like an easy little project. One that won’t be too much work, won’t take long, and can easily fit in between other activities. But it’s not like that. It’s like writing another book all over again (even though it’s not another book and a large portion of the text is the same).

I find the actual writing of a book the easiest of all stages. It’s the editing, the back-and-forth, the endless checking and double-checking of Word docs (Word!) and then PDF files. Reading comments, checking comments, adding your own comments. “Should this be bold or code font?”. All of this is necessary of course. But my goodness it’s just as time consuming as the first go-around.

But like anything that takes time and effort in life, you quickly forget the pain and maybe even someday agree to do it all over again.

While today is the official publication date, Amazon is still taking pre-orders only. I’ve yet to see an actual copy myself, so there could very well be a slight delay.

AIGA Redesign

This morning, AIGA (the professional association for design) relaunched with a shiny new design by Happy Cog. I had the pleasure of taking Jason Santa Maria‘s brilliant designs and turning them into semantic XHTML and CSS templates that could be plugged into a custom CMS built by Thirdwave (AIGA’s technical partner). Magic and fun ensued.

Every project is a learning experience. But working with Jeffrey and Jason for a client like AIGA, well that’s a whole new level of awesomeness. One could (and should) study Jason’s molecule-level of detail in typography (using just two web fonts and a splash of Interstate via the venerable sIFR). It was a fun challenge getting things _right_ using CSS. I hope I’ve come close.
Congrats to AIGA for renewing their digs with a smart, readable, beautiful design — and a big thank you to Jeffrey, Jason and Happy Cog for allowing me to pitch in and help with this.

Read more about the redesign:
* Jeffrey Zeldman: Happy Cog redesigns AIGA
* Jason Santa Maria: AIGA Redesign
* Happy Cog: AIGA Website Redesign

And a special geek note: events listed on AIGA’s homepage are marked up with hCalendar.

Way #24

For the second year in-a-row, Drew McLellan has put together another excellent 24 Ways — an advent calendar of helpful web articles written by fine folks from all over the web.

To cap off this year’s set, I’ve contributed Gravity-Defying Page Corners, a simple little trick for adding dimension to a plain ol’ box. It also might the first (and after reading you’ll probably be thinking “hopefully last“) web tutorial written in verse. It’s corny for sure, but fun to write and hopefully read. Many thanks to Drew for wrapping up 48 presents to us all.