Chris Casciano’s Place Name Here

For a recent project I was given the task of creating a lightbox style help dialog. The dialog was intended to highlight content of an odd or unknown size in addition to the more controlled information box. Essentially a figure in the shape of 2 adjacent rectangles of variable sizes that needed to be highlighted. The backbreaker — the 8 sided popup needed a large, opaque & diffuse drop shadow to make it stand out off the content.

This was the perfect use case for CSS box-shadow, but its also a public facing promotional site that for good reasons couldn’t just thumb its nose atMicrosoft Internet Explorer. The value proposition for any new CSS property – to make things like shadows and gradients easy to develop and manage with one rule replacing old complex solutions – is lost if you still have to code for that old complex solution juggling multiple PNG images and layering in added markup. Still, that work sounded painful to write for IE6, IE7 & IE8 as well as Firefox, Safari and Chrome so I started looking for an alternative in the proprietary MS filters which are supported in Internet Explorer 5.5 and up.

Today, November 30, is the 3rd annual Blue Beanie Day — a celebration and visible show of support for Web Standards & semantic, accessible markup. Web designers, developers, and users around the world are sporting blue beanies on their avatars to show their support for doing things right.

Mystery meat navigation is a term web designers know well. It represents the result of a designer getting too clever for their own good and burying site navigational elements under the surface — expecting users to spend the effort to discover them. With important links behind objects that have to be interacted with a site’s visitor loses context and that information a first glance of the page can provide and may leave or give up before finding what they were looking for even if its there.

Mystery Meat Pagination

As a whole, the industry has learned from the past and I don’t encounter many examples of cases of mystery meat navigation in the wild. But with new technology comes new opportunities to run aground. In the last year or two I’ve seen many new sites implementing an infinite scrolling or lazy loading technique with AJAX.

These “remove the need for pagination clicking” techniques really tend to irk me. I haven’t seen one yet that doesn’t hit me as either clunky and heavy handed or that immediately cause me to lose the context of where I’m searching. Spending some time poking around 37signals recently launched web studio directory Haystack prompted this post, and is a good example, but they shouldn’t be picked on as the only or worst offender.

With some recent projects — like the redesign of Hike New Jersey and a little Flickr View Larger tool — I’ve had the opportunity to try a few bleeding edge techniques as a means of enhancing the look of a site while keeping code and maintenance down. In his recent book Handcrafted CSS, Dan Cederholm calls this ‘progressive enrichment’ — or providing a little extra spice in the visuals for the few browsers that can follow along, while functionality, page structure, and general styling rules remain at some stated baseline across browsers. While working with these new properties like box-shadow and rgba colors I hit a few quirks that I thought I’d share.

• Bow Ties
• Stars
• Stars 2

The good folks at Carsonified have posted audio and slides of the FOWD London 2009 speakers including Molly E. Holzschlag giving an overview of the status of web standards, Simon Sankarayya on designing interfaces, both online and physical, and Robin Christopherson giving a JAWS demo and discussing design and accessibility in a Web 2.0 world.

A few weeks ago The Web Standards Project and WaSP Edu Task Force launched a new venture to help create a curriculum outline, guidelines and course samples for those teaching a variety of web related disciplines [it takes more then just good HTML coders to create a good web site]. While I may have had my hands in the code for the site, the real heavy lifting of designing the site and creating the foundation and content for the curriculum project was done by others.

This week saw the end of winter mixing with the first day of spring — in the northeast that meant snowflakes on the few flowers that have started poking out. There’s also been a flurry of activity on the net from site launches to reports from the SXSWi and MIX09 conferences and some other good stuff I thought needed to be called out.

Instead of writing about these things this week I let them fly into the twitter, IM, or news reader ether likely not to be mentioned by me again. Maybe I’ll make this recap a semi-regular features on this site as I expect to be quite busy over the next couple of months.

Sitepoint sale helping the Australian Red Cross.

Via Molly comes news that Australian based technical book publisher Sitepoint is raising money for the Australian Red Cross in the name of the disastrous fires in Victoria. The Sale — “For just $29.95 you can get 5 downloadable PDF books“http://5for1.aws.sitepoint.com/ — that’s a great deal for you and a great deal for the Red Cross.

Our ambitious plan is to raise over US$50,000. Every single cent generated from this promotion will go directly to the bushfire relief effort—so if you spend $29.95 purchasing 5 books from SitePoint, the whole $29.95 will go directly to supporting this cause. We feel that’s the least we can do.

Included in the sale are books like “The Art & Science Of CSS”, Ian Lloyd’s “Build Your Own Web Site The Right Way Using HTML & CSS” and “The Art & Science of JavaScript”. The sale is on now and goes through Friday the 13th.

If technical books aren’t your thing, donate directly to the Austrailian Red Cross Victorian Brush Fire Appeal 2009.

The Select Series supports The Patrick O’Brien Foundation

The Select Series by Threadless has just launched the “Storytellers Series” a collection of 4 t-shirts, curated by ALS sufferer and filmmaker Patrick O’Brien. All proceeds going towards the PBoF and helping with the production costs of Patrick’s movie about living with Lou Gehrig’s Disease.

For more information and direct donations visit the Patrick O’Brien Foundation website.

So its a bit of a slow work day with a few clients off for MLK day here in the states and I’ve found myself doing some pruning of the feeds I keep track of. While looking at the sites and who hasn’t update in months I’m realizing I’ve been reading a declining number of articles and tutorials on web development and web standards topics from people working on the front lines or the bleeding edge.

The big sites — Ajaxian, A List Apart, ReadWriteWeb, etc. — are prolific as they ever have been, but I’m missing the more personal insights that once filled my reader to the brim.

Not All Quiet

I do have to say its not all doom and gloom. Some of the old standbys that everyone knows pop up with a great post here and there and there are others who are still going strong. Among those I see regular interesting updates from I’d have to suggest Anne van Kesteren on the bleeding edge of the web standards world, Christopher Fahey who has picked it back up at graphpaper.com on the design & UX side, and coworkers Brian and Ben help keep me up on PHP.

Your Suggestions, Please

So what are your favorite blogs to read for keeping your skills sharp? Who is writing about experimenting with CSS, HTML, Canvas, etc? Where are you learning about the ins and outs of JavaScript techniques? Who is breaking down accessibility for the every day developer?

Even if its you and you’d like to do a bit of self promotion, please post a link in the comments.

Some of the most powerful CSS2 and CSS3 selectors defined in the specs are avoided by web developers because they’re not supported by commonly used web browsers. Sometimes in order to work around these shortfalls solutions with large overhead such as javascript libraries are used or code becomes littered with many specialized classes and sites become difficult to maintain.

Over time I’ve developed the habit of using specifically named class attributes to represent exactly where a pseudo-class would have applied. To aid in clarity and maintenance these classes are named with the same text as the name of the pseudo-class being represented.

Drew McLellan has for the 4th year running wrangled a bunch of great authors and launched the Web Development Advent Calendar 24ways.

It isn’t December yet [in this time zone anyways] but the first day’s article has been posted for your enjoyment — Easing The Path from Design to Development. This is a nice piece on interaction between different sides of the site building process, something I’m intimately familiar with. A few pointers from my experience that are worth adding to Drew’s comments…

Sometime in the last couple weeks I started noticing that my browser would hang while loading some Flash content, and since I’ve been too busy to diagnose the error¹ or even just to reinstall the Flash player I’ve been surfing with Flash disabled via the built in Flash block feature in Camino.

A funny thing happened between noticing sites loading faster and lots of ads missing — prompted by the sight of the Razorfish redesign I noticed how many web development agencies had sites that were just big empty flash movies and thus all looked the same. Nothing but a big empty browser window, with a big “F” or play button, and sometimes a background color other then black.

Clockwise from top left: Razorfish, R/GA, Schematic, WDDG, Organic, The Chopping Block, EVB, Big Spaceship — all looking nearly identical.

I’ll again be attending the Future of Web Design conference in NYC tomorrow [after running out to vote] and as usual I’ll have the camera in tow. If you see me, say hi.

Creating a site for yourself has always been a refreshing outlet for web builders. Without rooms of stakeholders, you alone have the control over which technologies to use, what features to include and what browsers to support. Part of that control is deciding how you are going to deal with browser bugs and often having the freedom to take the ‘high road’ and leave defects be so that they can be used for bug reporting, test cases, and to help prod browser vendors into maybe making those bugs a higher priority.

While I have no desire to work around them for my personal site, I think its worth it to point out and work to get these bugs fixed at the source, including the following 2 CSS bugs with visible on the new Place Name Here that I decided to let be — one in Microsoft Internet Explorer 8 beta 2 and the other in Google Chrome.

Place Name Here has gotten a much needed facelift and a bit of reorganization. A bit grungy, it harkens back to the black and white color palette that has haunted the site for most of its nearly 10 years [domain registered in December of ’98]. As usual the design is fairly simple simple, and as always I have found some way to fit some obnoxiously big type. The refresh also marks an increased interest on my part to post more regularly and more substantial then the recent link here and photograph there.

Sometimes conventions adopted by many unrelated sites across the web help make sites more friendly and familiar for visitors. That is certainly the case with adoption of the orange feed icon across the web.

It is such a good idea to develop ‘standard’ icons that there are now multiple ‘standard’ share icons and behaviors.

1. Share Icon Project
2. Open Share Icon Project

The later project started in part due to licensing and ownership issues with ShareThis’s graphics, which is something I’m sympathetic to, however at what point do we have too many conventions that the behavior of these conventions remains a mystery to visitors?

Molly recently lamented that twitter has sucked the blogging out of her. I’ve been feeling the same way for some time, though I was never as prolific a writer has she is. Though for me I think it was Web 2.0 that has sucked the blogging out of me, and unfortunately the slow down isn’t all that recent.

Things are getting a little old and dusty around here as a result of me being quite busy with work as well as contributing more elsewhere on sites like flickr, ma.gnolia and newsvine.

To honor its crusty-ness I’ve aged the site’s color palette some, like a fine, aged, um, newspaper? Enjoy.

The above screenshot of a page from The Jersey Journal shows one of the most annoying web advertising I’ve come across in some time. Whether on purpose, or due to some insane twist of [random] fate the page in question displayed the same auto-playing video ad with audio in two ad spots on the page. Due to page load being what it is the audio was staggered by half a second or so making the unexpected audio even more obnoxious. Particularly as it was loaded in a background tab so I didn’t know where the sound was coming from at first.

The page also gets bonus points for displaying ads for police recruitment on a story about a highly decorated cop getting arrested.

Andy Clarke has posted a quick write up of his approach to browser testing new site designs.