Markup Archives
18 entries
Safari 3.1 Develop Menu
Posted at 10:54 PM
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
Posted at 12:25 PM
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.
Update: Jenny Bergman has posted some wonderful photos of the event. Thanks, Jenny!
Markup & Style Society
Posted at 4:53 PM
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
Posted at 11:31 AM
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
Posted at 11:04 AM
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
Posted at 9:59 AM
I’ve been meaning to write up some thoughts on last week’s An Event Apart Chicago. It was my first trip to the city in the middle west that sits on a big lake. Hot dogs were eaten. Cheezborgers 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’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 wowed us with a semantically rich crossword puzzle styled with CSS.
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 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 and by many others.
Bulletproof Web Design, Second Edition
Posted at 10:04 AM
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.
AIGA Redesign
Posted at 11:09 AM
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
Posted at 9:23 AM
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.
Microformats for Designers
Posted at 10:57 PM
In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.
But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:
I know there’s a lot happening out there, so let’s hear about it. And thanks!
Pairing Wine and Microformats
Posted at 3:34 PM
While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.
We’re currently using three microformats on Cork’d:
- hCard (for member profiles)
- hReview (for wine reviews or “tasting notes”)
- rel-tag (for indicating tag links)
Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.
Bulletproof Logos
Posted at 10:38 AM
There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.
When Floated Figures Attack!
Posted at 8:45 AM
I recently began publishing full entries in the RSS feed for SimpleBits, figuring that if people would rather read the entire Notebook post in the comfort of their aggregator, they could go ahead and do so. Personally, I enjoy reading content in its intended environment, with all the site design around it, and find myself skimming NetNewsWire for interesting articles to pull up in a browser later on.
New Book: Bulletproof Web Design
Posted at 10:11 AM
I’m happy to finally announce my new book, Bulletproof Web Design, to be published by New Riders this summer. It’s now completely written and heading to the printers this weekend. If all goes well, it should hit bookshelves in early August.
microformats.org Launched
Posted at 10:28 AM
Officially announced at Supernova2005 earlier this week, a new community-based site has been launched to be the official home for microformats — with a logo and simple site design from SimpleBits.
Styling Nested Lists
Posted at 7:47 PM
Recently, I was building a site map and realized that it is basically an outline of sorts. So how should I go about marking it up? I settled on a series of nested tables — ha! gotcha — nested unordered lists.
The Raw Markup
At their very basic — nested, unstyled lists deliver the exact hierarchy I was looking for. I could feel good about the structure that all browsers and devices would read, while easily styling it with CSS later on.
A simple version might look something like this:
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
Figure 1 below shows us how the markup above will render in most browsers. Woilla. A site map or outline. But let’s kick it up a notch (apologies to Emeril).
Figure 1
Adding Style
Let’s say that we’d like some definition for certain levels of the site map. All we really need to add to the markup is an id so that we may style this particular list differently from any other lists that may be on the same page, without any additional markup:
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
Using descendant selectors, we can give a unique style to each separate level of the list. For instance, if we’d like the higher levels to be large and bold and the inner levels progressively smaller, we’d first set the size and weight for entire list:
#sitemap {
font-size: 140%;
font-weight: bold;
}
That will make the entire list big and bold. So next we’ll reduce the size and turn off bolding for li elements that are nested at any level below:
#sitemap {
font-size: 140%;
font-weight: bold;
}
#sitemap li ul {
font-size: 90%;
font-weight: normal;
}
Figure 2
This means that all top level items will be big and bold, while all lists that are nested within will have a normal weight and font-size of 90% (which in this case is 140% of whatever the page default is). Figure 2 above shows the result.
We don’t even need to assign a smaller size for the third level, as it’ll automatically apply 90% of 90% (a little confusing, but it works!):
Now we have a descending font-size for each level of the list.
Custom Bullets
Let’s turn off default styling, and add a decorative bullet for only third level items by using the background property. We’ll first turn off list styling in general for all li elements, then we’ll specifically assign a background image for third level items:
#sitemap {
font-size: 140%;
}
#sitemap li {
list-style: none;
}
#sitemap li ul {
font-size: 90%;
}
#sitemap li ul li ul li {
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
Figure 3
Figure 3 shows the resulting list with a custom bullet applied only to third level li elements. We’ve added 16 pixels of padding on the left to account for the width of the decorative bullet image we’re using (plus a bit of whitespace). We’re also telling the browser to align the image 0 pixels from the left and 50% from the top, which essentially aligns the bullet to the left and center of the text. While we could’ve used a pixel value here, using a percentage allows for similar bullet placement if text is resized.
Conclusion
For building outline-like lists, nesting uls makes for a structurally sound — and easily styled solution. By assigning a single id to the top-level ul, we can let CSS do all the hard work of styling each level separately — without the need for extraneous presentational markup. And possibilities for creative styling go way beyond this simple example.
SimpleQuiz › A List › Conclusion
Posted at 9:45 PM
This was another easy one — but as expected the discussion got more interesting as additional related questions were asked. The question itself is becoming secondary to the conversation happening alongside.
Notable Comments
Overwhelmingly, it was D all the way. I guess I sort of gave it away, orginally titling it “Part II: Unordered Lists”. We’ve learned some good stuff here though.
web:
Yeah, I’d go with D as well, but to be noted is the lack of KitKats in your list.
Dully noted.
There are a few situations where code like A could be used, though. Marking up a poem, for example.
Which prompted others to ask about using pre or br / to markup a poem. Tough to call,
and even the W3C uses a poem as an example of both methods.
Did anyone ever fall into the trap of identifying every bit of content on a page as a list, ordered and unordered? I was that close to declaring the bodytext on a page as an inline ordered list.
In fact, Doug Bowman pointed me to Tantek Çelik’s move to using a series of lists to handle most of his weblog’s structure.
Also certainly worth a look again, is Doug’s Overused Lists? article — where he explores the differences between using pipe-delimited vs. an unordered list for navigation. The pipe-delimited method could’ve easily been option E in this quiz question, and may have divided the results a bit.
I think even one item can constitute a list.
And according to the W3C, this is true.
You’d have to change the stylesheet and the markup if you wanted to do something as simple as add a border around your list.
Exactly. Using a ul makes it easier to change styles with CSS.
Matt Haughey poses some questions that are far more intriguing than the quiz itself:
When should someone put something in a list instead of using line breaks? How to do screenreaders interpret lists?
To which Patrick H. Lauke responds with perhaps the most insightful information of the discussion:
… yes, they do treat lists differently from normal text broken up by line breaks. JAWS, for instance, announces that it’s an “unordered list with 5 items”. I imagine other screenreaders will provide similar information.
That to me, is a huge reason for using lists when in doubt. And after being asked whether the declaration of how many list items there are would be a hinderance to blind users, Patrick went on to offer this:
… they will know how many links there are (i.e. whether it’s only 5 items or 50), which will influence how they will choose to navigate the site.
I realize I could go on quoting everything else — because there are other great points raised as a result of another seemingly ELEMENTary (sorry) question.
Summary
A simple list of items should most likely be structured with a ul element. Why is the better way?
- D is more easily styled with CSS without having to modify the markup.
- Using a
ulto markup lists makes it easier for screenreader users to hear how many items are contained. - An unordered list may be better represented in a small screen such as a phone or PDA — where unintentional line-wrapping may occurr.
SimpleQuiz › Part I: Headings
Posted at 11:57 AM
In response to Jason Kottke’s post on semantics and markup, I thought I’d try out a new series here called SimpleQuiz (I know… but it’s better than “Markup Quiz” or “Web Standards Quiz”). The objective is to ask some questions about markup and generate some discussion about preferred methods.
I may very well become either too busy or bored to continue these on a regular basis, but we won’t know until we begin. The hope is that these questions and answers would become useful little bits of information. I also won’t pretend to be the authority on any of these subjects. I may very well be asking the question because I’d like to hear how others would handle it as well.
So here goes… the first one is a doozy. Sure it’s incredbly obvious — but we have to start somewhere, and should probably make no assumptions.
Q: Which of the following is more semantically correct? (For the title of a document)
<span class="title">This is a Title</span><h1>This is a Title</h1><p><b>This is a Title</b></p>
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of EdA tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.