…As the cover band upstairs kicks off its fourth set. Good times. The Boston Marriott Copley Place lobby, Saturday March 24, 2007. An Event Apart Boston begins Monday March 26th.
[tags]aneventapart, aneventapartboston, ericmeyer[/tags]
Category: Standards
Web standards for design and communication.
Categories
swfIR (swf Image Replacement)
Happy Cog’s Jon Aldinger, Mark Huot, and Dan Mall have published an image replacement method to remove some of the limitations of the standard HTML image object while supporting standards-based design concepts.
Using unobtrusive JavaScript, progressive enhancement, and Flash, swfIR (pronounced “swiffer”) lets designers include high-quality, scalable artwork in user-resizable web layouts—and even add styles to the images.
[tags]swfIR, imagereplacement, design, webdesign, webstandards, flash[/tags]
In Issue 233 of A List Apart, for people who make websites:
- Semantic Flash: Slippery When Wet
- The love that dare not speak its name gets its due as Happy Cog’s Dan Mall explores some of the ways Flash can enhance semantic, standards-based site designs. Part One of a series. Includes do-it-yourself, “shiny floor” project built with web standards and, yes, Flash (there, we said it).
- Where Our Standards Went Wrong
- No, they didn’t go wrong by using Flash. A List Apart’s Ethan Marcotte weighs the pros and cons of rigorous validation. Re-examine your assumptions. Discover the silent weight of invalid markup. Consider how to better educate clients on the benefits of web standards.
This issue goes out to our friends at SXSW Interactive.
Edited by Erin Kissane. Produced by Erin Lynch. Tech-edited by Aaron Gustafson and Ethan Marcotte (is that fair?). Illustrated by Kevin Cornell. Art directed by Jason Santa Maria. Published by Happy Cog. It’s shake and bake and I helped.
[tags]webstandards, flash, design, webdesign, alistapart, validation, ethanmarcotte, danmall, danielmall[/tags]
A List Apart 231 is strictly for tools. Unusual tools. Tools so wrong, they’re right.
So you need to prototype a sophisticated web application, all whizzing pathways and flipping form fields. So you need complex software, right? Not necessarily. In Paper Prototyping, Shawn Medero shows how to do sophisticated interface development thinking with our old friends, Mr Paper and Dr Scissors.
From child’s tools to what the pros use, our “so wrong, they’re right” tool theme continues in Casper Voogt’s unexpected Quick CSS Mockups With Photoshop. Yes, you read that right, and no, we’re not advocating a return to table-based layouts or absolute positioning.
The greatest web magazine team in the world produced this issue of A List Apart. Special hat tip to editor Erin Kissane (aka Girl Erin), acquisitions editor Krista Stevens, production manager Erin Lynch (aka Boy Erin), and technical editors extraordinaire Aaron Gustafson, Ethan Marcotte (studio, bio), and Andrew Kirkpatrick. ALA illustrator Kevin Cornell brought this week’s articles to life with a visual language that straddles brilliance and madness, and art director Jason Santa Maria supervised all visual details and contributed the issue’s color scheme.
[tags]alistapart, design, webdesign, prototyping, layout, photoshop[/tags]
Registration is now open for An Event Apart Boston 2007. Enjoy two amazing days of design and code plus meals, a party, and a bag of swag for a mere $795 (reg. $895) while early bird savings last. Attend for as little as $745 with a discount code exclusively for zeldman.com readers.
Learn by day, party by night
On An Event Apart’s website, you’ll now find a detailed schedule describing the presentations with which our superstar speakers hope to entertain and enlighten you. From “Web Standards Stole My Truck!” to “Redesigning Your Way out of a Paper Bag,” it’s two stimulating days of best practices and fresh ideas in design, usability, accessibility, markup and code.
Check out that schedule. I’ll wait.
Lest you be overwhelmed by learning too much too soon, we’ll help you unwind (and do a little networking) at the Opening Night Party sponsored by Media Temple. You might even win a prize, courtesy of Adobe, New Riders, or Media Temple.
Hotel savings
Our Boston Events page also includes notes to help you book your hotel room at a specially negotiated discount price.
Located in beautiful and historic Back Bay, the Boston Marriott Copley Place provides in-room, high-speed internet access; laptop safes and coolers; 27-inch color TV with cable movies; luxurious bedding and linens, and more. Best of all, it’s the site of the conference. You can walk out of your room and into the show!
Save more with discount code
During the early bird period, the price for this two-day event is $795. But you can nab an extra $50 off with this discount code exclusively for zeldman.com readers:
AEAZELD
Just enter AEAZELD in An Event Apart’s shopping cart to enjoy those savings immediately. During our early bird period, you’ll pay just $745 for the two days and everything that comes with them.
After February 26, 2007, when the early bird savings ends, the price goes up to $895, and you’ll pay $845 with the discount. Still pretty good for two days with some of the sharpest minds and greatest talents in web design. But why pay more? Book An Event Apart Boston as soon as you can.
Unlimited creativity, limited seating
An Event Apart Boston will be the best conference Eric Meyer and I have yet put together. It will also be this year’s only East Coast Event Apart. Don’t miss it.
Join Eric and me, along with Steve Krug, Andrew Kirkpatrick, Molly Holzschlag, Cameron Moll, Dan Cederholm, Ethan Marcotte, and Jason Santa Maria, for what we modestly believe may be the most exciting and enlightening show in modern web design.
Hurry! Seating is limited and early bird savings end Feb. 26, 2007.
[tags]aneventapart, boston, aneventapartboston07[/tags]
Happy Cog starts its publishing year with a great little issue of A List Apart, for people who make websites:
- Whitespace
-
by Mark Boulton
So you think you know all about whitespace. You may be surprised. Mark Boulton, type expert to the stars, shows how micro and macro whitespace push brands upscale (or down) and enhance legibility in print and online.
- How to Grok Web Standards
-
by Craig Cook
For designers who find web standards as easy to grasp as a buttered eel, Craig Cook shows how to stop the hurting and turn on the understanding. Learn how web standards work, and why they are more than simply an alternative means of producing a visual design.
[tags]design, typography, whitespace, webdesign, webstandards[/tags]
It’s the last gasp of 2006, a year whose sweetness will long be remembered. A List Apart celebrates twelve months of international peace and brotherhood with its final issue of the year.
…In which Marc van den Dobbelsteen asks the musical question, how can we manage web layouts that must accommodate devices with viewports as small as 240 pixels and as big as 1680? The old answer, liquid layout, doesn’t cut it:
If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability—gaps will appear on a wider screens, and your carefully balanced layout will break. On a tiny-screened PDA, your text and images will be compressed into a crowded content sandwich. No designer wants that. If vector-based layouts were technically possible on a wide range of browsers, we could use a single generic layout that looked exactly the same on all screen sizes. Since that’s more fictional than feasible, we have to find another way.
That other way is to define layout and appearance for a series of screen-width ranges, then match these layouts with the user’s viewport size. (You can even change layouts automagically as the user’s viewport size changes.) Learn how in “Switchy McLayout: An Adaptive Layout Technique.”
Then dive into Mike Brittain’s Making Compact Forms More Accessible for a smart way to solve the usability and accessibility challenges posed by today’s complex, tightly spaced forms.
Forms pose a series of usability and accessibility challenges, many of which are made more complex when you need to build a form to fit into a small space. Tightly spaced forms can look great on paper, but they often ignore accessibility issues altogether. … In this article, we’ll create a compact form that provides a high degree of accessibility, despite its reduced size.
This issue was produced by Erin Lynch and edited by Erin Kissane. Thanks and praise to technical editor Ethan Marcotte, who pulled flaming swords out of the rock. Kevin Cornell, The Web’s Leading Illustrator™, crafted the delicate visual poems that accompany our articles. Doctor Santa Maria art directed.
A list Apart T-shirts are still available and make an excellent holiday gift. A List Apart is a founding member of The Deck, the premier advertising network for reaching web and design professionals. Skiddle-dee doo-dee idle dum!
[tags]alistapart, accessibility, design, development, usability, forms, layouts, adaptive[/tags]
Issue 228 of A List Apart is all about smooth.
- User-Proofing Ajax
-
Ajax offers the ability to avoid both needless browser behavior like page reloads and useful browser behavior like error handling. When good web apps go bad, Peter Quinsey’s guidelines and techniques can help you and your users stay informed and productive.
- Avoid Edge Cases by Designing Up Front
-
by Ben Henick
Sooner or later, nearly all web projects fall afoul of simple, preventable problems—problems like building the wrong features or creating a platform that can’t be upgraded. A proper process can help you manage scope, develop site features that actually match your objectives, and catch fatal flaws before your site is produced.
[tags]alistapart, ajax, usability, process, webdesign[/tags]
Standardistas adore the Mozilla Firefox browser for its advanced support of web standards. (How good is it? The Web Standards Project considered declaring victory and closing shop when Netscape Corp. announced in 1999 that it would heed our advice and dump its non-compliant software in favor of the Gecko rendering engine that powers Firefox today.)
Though Firefox and related Mozilla browsers deserve credit for their unsurpassed handling of everything from the Document Object Model to MIME types, Firefox’s way with text leaves much to be desired, as the following screen shots show. Indeed, if reading is mostly what you do on the web, and if accurate typography makes reading more of a pleasure and less of a strain, then Apple’s Safari is superior to Firefox.
Lucida, Test One: with genuine italics
Zeldman.com is designed to be read in Lucida Grande, and the site originally listed “Lucida Grande” first in its style sheet. Alas, Lucida Grande lacks true italics. Fortunately, Lucida Sans has them. In a version of our style sheets used to capture the following screen shots, we’ve listed Lucida Sans first, Lucida Grande second, and substitutes thereafter. Both browers handle the site like a dream—but it is only a good dream in Safari. Open the screen shots in tabs:
Questions for discussion
- In Firefox, why does the text “now in its second edition. I can’t” display midway between roman and bold, and why is it so poorly antialiased? Apparently, Firefox bungles roman text that follows italics.
- In Firefox, why doesn’t hyphenation work? My gosh, people, it’s nearly 2007. IE5/Mac supported hyphenation.
Lucida, Test Two: using a font that lacks italics
Remember: Lucida Grande does not have italics; Lucida Sans does. But as Test One showed, Firefox can’t handle Lucida Sans correctly. So we’ve revised the style sheet. With Lucida Grande listed first in the style sheet, and Lucida Sans deleted, Safari still trounces Firefox. The experience of reading text is smoothly beautiful in Safari, much less so in Firefox.
Observations
- Both browsers fake the italics. But Firefox does the job crudely: a child could tell that its “italics” are faked. (Firefox slants the roman text.) By contrast, Safari fakes its italics so well (by substituting a true italic from the next available listed font that contains one) that only graphic designers and type hounds will realize that the font they’re viewing contains no true italics. See reader comments for delicious details.
- In Firefox, hyphenation still does not work.
Notes
It’s worth pointing out that these tests were done on Macintosh computers, which are known for their superior handling of text, and that Lucida is not some strange face chosen to prove a point. It is the default font in Mac OS X (not to mention on apple.com). Moreover, Lucida Sans Unicode, the first Unicode encoded font, shipped with Windows NT 3.1 and comes standard with all Microsoft Windows versions since Windows 98.
When I showed a friend and fellow designer these simple tests as I was working on them, he asked if I had reported “the bug” to the makers of Mozilla. But as I count it, there are multiple, overlapping Firefox bugs happening here—too many to fit into a bug-report form. I suspect that the problems have to do with Mozilla’s reliance on its cross-platform display environment. If you scuttle what an individual operating system does well in favor of what a cross-platform environment does poorly, you get what we’re seeing here. It’s not good enough.
Inferences for best practices
If your content will sometimes include italicized text, you naturally want to specify a font that contains italics. That’s just common sense. Unfortunately, as our screen shots have shown, common sense works against you here, because Firefox, although superior to other browsers in many ways, handles text like a drunken fry-cook.
When you specify the font that contains genuine italics (as we did in Test One), Firefox mishandles the roman text that abuts italicized words. When you replace that font with one that contains no italic (Test Two), Firefox fakes the italics crudely, but overall display and legibility are better than the unusable results of Test One.
Obviously there are fewer problems if you limit your website to Verdana and Georgia, but more constraints on typography are not what the web needs.
Discussion is now closed. Thanks to all who shared.
[tags]design, browsers, webstandards, webdesign, mozilla, safari, apple, lucida, unicode, windows, macintosh, osx[/tags]
An Event Apart Austin. Monday 6 November 2006. The Alamo Drafthouse Cinema Downtown. Austin, Texas, USA. Design and code. Macs and mics. Was it good for you, too?
(Photo pool.)
[tags]aneventapart, austin, design, conferences, events[/tags]
Event Apart Austin attendees, this post contains important information about parking, laptops, snacks and lunch, the after-party sponsored by Knowbility, our Flickr photo group, and more. The rest of you, please move along.
About Austin
Austin, capital of Texas, “live music capital of the world,” and the Southwest’s answer to Silicon Valley, is a lively and remarkable town, teeming with history and high-rises, high-tech and dirty low-down blues. Seat of a great university and a million funky taverns, it’s paradise for music lovers and Tex-Mex junkies. Our favorite activity: breakfasting and celebrity-watching at Las Manitas Florist, 211 Congress Avenue (when we can get in). Yes, it’s called “Florist.” No, it’s not a florist, it’s a great Mexican cafe. Welcome to Austin!
Location, Laptops, and Lunch
An Event Apart Austin takes place…
Monday, November 6th, 2006, 9am – 5pm
Alamo Drafthouse Downtown
409 Colorado St. (Corner of 4th and Colorado; Directions and Map)
Austin, TX 78701
Yes, you can bring your laptop. Yes, there will be WI-FI. Yes, there will be chow throughout the day, including vegetarian choices. (Lunch options include veggie pizza, veggie sandwiches and salads. There are plenty of meat options, too.)
The Schedule
An Event Apart Austin runs from 9:00 am – 5:00 pm. We have a lot to cover, so the event will start promptly. Arrive early to get a good seat! Doors open at 8:00 am; for best results, plan to show up between 8:00 am and 8:30 am. If you’re driving, leave yourself extra time to find a good parking space. (See the next section for details on parking.)
The day’s schedule is available for your perusal.
Parking
Parking can be a hassle, so come early and give yourself extra time. The Alamo Drafthouse says:
With the ongoing construction and the increased popularity of the warehouse district downtown, parking can be a real challenge. Street parking is still available for the crafty and persistent; we also recommend the parking structure between 3rd and 4th streets on San Antonio. The neighboring restaurants also have valet parking until midnight.
Happy Hour and a Half
An Event Apart Austin will be chock-full of design and code pleasures. But the fun (and the networking) don’t stop at 5:00. Join us after the show for a Happy Hour and a Half featuring complementary cocktails and savory snacks, sponsored by our good friends at Knowbility:
Happy Hour and a Half 6:00 – 7:30
The Belmont
306 W. 6th Street
Entering the Belmont Austin, with its wonderful 60s period decor, is like cruising Las Vegas or Palm Springs with Frank, Dino, and Sammy. Okay, it’s not—but it will be fun, especially after all those hours of brain work. Pull up to a plush banquette, order a free cocktail, and hob-nob with your fellow attendees.
Freebies From our Sponsors
By random drawing, some folks attending An Event Apart Austin will win software, books, or free hosting donated by our wonderful sponsors: Adobe, New Riders/AIGA Press, and Media Temple. Thank you, sponsors!
Join our Flickr Group!
You know you want to! Bring your digital camera and snap away (just be considerate of your fellow attendees). Share your snapshots with other attendees on our Flickr group:
flickr.com/groups/aeaaustin2006
Suggested tags: aneventapart, aneventapart06, aneventapart2006, aneventapartaustin, austin
Disclaimer and Miscellany
Please note that the schedule is subject to change, and that some things are not entirely within our control.
Previous AEA Austin 2006 news
- An Event Apart Austin 2006 Schedule
- Austin is last Event Apart of 2006
- It’s Molly!
- Deep In the Heart Of Texas
[tags]aneventapart, design, conferences, austin, texas[/tags]
- Berners-Lee: reinventing HTML
-
Tim Berners-Lee, inventor of the web and founder of the W3C, announces reforms:
It is really important to have real developers on the ground involved with the development of HTML. It is also really important to have browser makers intimately involved and committed. And also all the other stakeholders….
Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.
- 9 to 5 = average
- To be great in design takes passion and work.
- Sending XHTML as text/html Considered Harmful to Feelings
- I love this.
- Web Directions North
- Our Australian friends set up camp in Vancouver, for what looks like a great two-day conference on standards-based design and development (Vancouver Canada, February 6-8 2007). Speakers include Kelly Goto (Gotomobile), Andy Clarke (malarkey), Adrian Holovaty (Chicago Crime, Washington Post), Douglas Bowman (Google Visual Design Lead), Dan Cederholm (SimpleBits), Joe Clark (joeclark.org), Dave Shea (CSS Zen Garden), Cameron Moll (Authentic Boredom), Molly Holzschlag (Molly.com), Veerle Pieters (Veerle’s Blog, Duoh!), Kaitlin Sherwood (Google Maps US Census mashup), Tantek Çelik (Technorati).
- Web Accessibility: Web Standards and Regulatory Compliance
- By Andrew Kirkpatrick, Richard Rutter, Christian Heilmann, Jim Thatcher, Cynthia Waddell, et al. Don’t let the unsexy title fool you. Vast and practically all-encompassing, this newly updated classic belongs on every web designer’s shelf. (Better still, open it and read.)
- I Cannot Possibly Buy Girl Scout Cookies From Your Daughter at This Time
- By Charlie Nadler in McSweeney’s.
- Gemini Girl
- New women’s blog elegantly designed by Ray McKenzie.
- eMusic: 33 Folkways LPs
- Thirty-three important Folkways Recordings for download. Louis Bonfa, Mighty Sparrow, Woodie Guthrie, Henry Cowell and more.
- On having layout – the concept of hasLayout in IE/Win
- Technical but reasonably easy to follow discussion of why Internet Explorer’s rendering of your design may
suckdiffer from your expectations - “Apple’s Backup App is Shit”
- God bless SuperDuper.
[tags]W3C, webdirections, accessibility, haslayout, browsers, mcsweeney’s, folkways[/tags]
Partly because the beta was carefully rolled out over many months, the release of Microsoft’s Internet Explorer 7 has largely been a non-event, for developers as well as journalists. While not at the level of Mozilla Firefox, IE7 is far more standards-compliant than IE6, which was way more compliant than IE5.5, which beat the pants off IE5. To make IE6 render standards-compliant pages correctly, web designers came up with a Wikipedia’s worth of hacks. In IE7, those hacks aren’t necessary; some actually cause problems.
(Here’s a tip from Dan Cederholm, who created the CSS for Happy Cog‘s redesign of Advertising Age: “inline-block is the new-and-improved method for auto-clearing floats.” Use it to replace display: inline-table;.)
IE7 is also the first Microsoft browser to permit user scaling. It does this the same way the Opera browser does it (which is the same way Microsoft Office does it): if text is too small, the user scales the entire page. By contrast, Safari and Firefox use Text Zoom, originally developed by Tantek Çelik for IE5/Mac. In those browsers, if text is too small, the user scales the text size—and nothing but the text size. Images, column widths, and so on, typically do not scale (unless the web designer is doing something really tricky).
There’s a huge difference between Text Zoom and Page Zoom, and it will affect the way designers spec type sizes for the web. It didn’t matter much when only Opera scaled the page. It was a neat feature of Opera; but Opera’s neat feature didn’t affect the way standards- and accessibility-oriented designers approached text size. But market share matters. Once IE7 gains critical mass, a lot of our current thinking about ems and pixels and such will go out the window. I’ll write about that soon, probably on A List Apart.
Meantime, developers are focused on the persnickety stuff: Ajax and JavaScript compatibility problems, CSS bugs that didn’t quite get fixed, and CSS hacks that no longer work.
Like me, you may have heard from a client whose site you designed before IE7 existed. What problems have you encountered? What hacks have you jettisoned, and with what have you replaced them? (Please include URLs.)
[tags]css, IE7, bugs, hacks, workarounds, design, webdesign, tantek, dancederholm[/tags]
Reader Adam Engelsgjerd writes:
I develop and maintain websites for the University of Arizona Library. We make use of the “Holly Hack” to avoid the IE6 peek-a-boo bug for our intranet site (God bless Holly). In the course of testing our sites against IE7 I noticed that the bug was rearing its head again‚ despite claims that this latest version has fixed it.
Further investigation revealed that while IE7 really does seem to have fixed this peek-a-boo bug the Holly Hack has, with decidedly sardonic irony, reintroduced the very problem it was created to circumvent.
This morning I tested and just implemented a fix that seems to work for us: the removal of the universal selector, “*‚” before the “html” selector. So the traditional Holly Hack is:
/* Hides from IE5-mac \*/
* html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
Our new code is now:
/* Hides from IE5-mac \*/
html #contentWrapper {height: 1%;}
/* End hide from IE5-mac */
I’ve tested this against the following browsers on Windows XP SP2:
IE7
IE6 (SP1 standalone install from evolt.org and SP2 full install)
IE5.5 (standalone install from evolt.org)
Netscape 7.2 and 8.1
Opera 7.11 and 8.54 and 9.00
Firefox 2.0
And on Windows 2000 SP4:
IE6
Hopefully this can be of some use should others be running into this same problem.
[tags]css, browsers, IE7, bugs, hacks, workarounds, holly hack[/tags]
Readers read web pages. Readers print web pages. In 1999, the way to help readers print web pages was obvious to every major site owner: buy a proprietary, multi-million-dollar content management system avec service contract to generate multiple versions of every page. After all, you needed seven versions of every page to handle all the browsers out there; you might as well treat print the same.
In 2001, A List Apart started promoting print style sheets, and by 2003, all the cool kids were doing it. They were also mostly using free or low-cost, generally open-source, content management systems. Yay, open source! Yay, web standards!
But a problem remains: all those ponderous 1999 websites have trained readers to expect a “print this page” button and subsequent in-browser preview. How can you satisfy this basic user expectation while still enjoying all the benefits of web standards?
In Issue 226 of A List Apart, for people who make websites, Pete McVicar shows one very good way to do it. His “Print to Preview” combines alternate stylesheets and scripting to…
show how the page will look when it’s printed, perhaps display a preview message explaining what this new view is about, and then automatically print the page.
McVicar’s method isn’t the only way to do this—others will likely be mentioned in the comments—but his technique is straightforward and clean, and it takes care of users without making the mistake of trying to educate them about something in which they’re profoundly uninterested (namely, web development).
Also in this issue: “How to be a Great Host,” by John Gladding. These days, many people’s web business plan looks something like this: “Ajaxy goodness + ???? = Profits!” Other straw men seem to think five blog posts plus text ads by Google plus discussion board software guarantees a buyout by Google. It doesn’t.
Building a community takes time and work. No amount of social bookmarking and tagging can rush that process. But you can learn to avoid mistakes. And you can save time by following time-tested approaches. (Learning from your mistakes is overrated.) Gladding’s article is filled with smart, “first do this, then do that” tips that can help you grow your site’s audience with discussion that works.
Better printing. Better community-building. Better read A List Apart 226!
[tags]alistapart, webstandards, community, forum, printing, stylesheets[/tags]