Archive for ‘css’ category

Decision or Bug?

I just logged a bug report after doing a little testing with the IE8 Beta. Overall, the progress and standards commitment in the latest effort is fantastic and exciting. Hats off to the Internet Explorer Team.

There’s one lingering decision that appears to have carried over though, and it’s an important one. I say “decision” since, by now, there clearly must be a reason why it’s still there. I’m also reminding myself that this is still a beta release. But the earlier we chime in on things, the better, right?

Here’s what I logged:

As with previous versions of Internet Explorer, the IE8 Beta also fails to resize text using the “Text Size” tool when fonts are sized in pixels. Most would consider this a bug, where the user should be able to trump any size specified by the page author, regardless of the unit specified. I remained boggled as to why this has been a consistent design decision.

It creates an accessibility issue for readers with poor or low vision, while making pixels a less than desirable choice for the page designer. In an ideal world, the designer should be able to specify fonts in any unit he or she desires (px, em, percentage, etc.) while the reader should have ultimate control over the size, using the browser’s controls. IE’s “Text Size” tool would appear to be broken when a reader attempts to adjust fonts on a page where fonts are sized in pixels. Surely confusing.

Thanks for listening, and keep up the excellent progress!

Disagree? I’d love to hear it :)

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.

A Type In the Right Direction?

We hear news that Webkit now supports the @font-face CSS property, enabling the designer to specify downloadable fonts in their web pages. I can remember getting excited about this back in June after hearing Håkon Lie talk about it during @media London (check out Richard Rutter’s thoughts on this as well). Legal and security issues will prevent us from using most fonts of course, but I like to focus on the positive here. There are some perfectly useable, free fonts out there — and more choice is better than little or no choice, right?

I wholehartedly agree with Jon Hicks, who writes:

Personally, I’m just happy that we’re reaching a point where we’re having this conversation!

Right! What’s important, I think, is that this helps move things along. Perhaps it will stoke the fire in terms of a real conversation between type foundries and browsers on how things could work while protecting the font maker. Then again, maybe it won’t.

Stephen Coles at Typographica writes something I’d like to counterpoint:

In general, web designers aren’t typographers. Their specialty is in the realms of interface, hierarchy, and navigation. Their training does not include making decisions about what typeface to use for long passages of text.

While this certainly could be true for many, it doesn’t mean that web designers can’t become good typographers — especially when given the chance with more of a variety of typefaces to work with. The worry that all web pages will be suddently ruined with crappy free fonts everywhere overshadows the fact that some good can come out of the ability to at least have a choice to use those crappy (and/or potential useful) fonts. Give us all a chance, eh?

For instance, and maybe this is fresh on my mind after releasing a *cough* icon-based pixel font *cough* just days ago, but imagine using a downloadble dingbat font for displaying icons instead of GIF or JPEG images. Suddenly text and icons become truly scalable together. Just a small example — but one I’d love to experiment with.

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.

An Event Apart Boston

Don’t wait for An Event Apart to come to your city — just make plans to catch the next one wherever it is (Seattle is next). AEA Boston was probably the first two-day, single-track conference where I felt like _every_ session was extremely valuable. I came away from each presentation either inspired or educated (or both). The easy, 20 mile commute to Boston didn’t hurt either, and having Kerry and Jack see me speak for the first time was fantastic (at one point up on stage, I could hear “Dada!” from the back, and I’ll tell you … that calms the nerves).

Interface Design Juggling slidesI had fun talking about “Interface Design Juggling” — a potpourri of color, typography, favicons (yes, favicons!), microformats and bulletproofness. This was the first run through of this particular set of ideas, but I think it went pretty smoothly. I was relieved to hear several people thank me for devoting time to favicons — a fun topic that I think deserves more attention. And I’m looking forward to expanding that segment in the future.

The latest updated versions of the slide deck can be found here (in PDF form) for those that were in attendance. As usual, they might not make sense without the commentary — and more importantly some of the transitions are muddled into a single slide (Keynote kept crashing when I tried to export each transition into its own slide).

Thank you to Jeffrey and Eric for inviting me to speak — it was quite an honor to share the bill with such an amazing group.