Archive for ‘css’ category
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.
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.
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.
While 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.
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”.
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.
- 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.
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.
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.
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/.
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.
This 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.
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).
I 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.
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.