Week One Improvements
It’s been less than a full week since I launched this blog, and at the risk of sounding smug, I think I’ve made a number of small, yet noticeable improvements.
Home Page
The old home page (which I neglected to screen cap), featured a prominent plain-text heading followed by several subheadings that described everything you could do on my site: read about me, hire me, contact me, read my blog, or follow me on Twitter. Graphically, it was dull. But worse, it overwhelmed the visitor with links without providing a clear next step.
The new homepage design uses a PHP conditional statement to alter the ID of the main content area. This allows me to work a little CSS voodoo—the content area is now black, in order to separate the homepage visually from other pages on the site. I also gave the main heading a bold CSS background image to create some visual interest (and I set the text-indent to -9999px to preserve accessibility).
Next, I drastically reduced the amount of support copy on the page. I kept what I consider the two most important things you can do on my site: read my blog or hire me.
Finally, I turned off the Twitter widget in the sidebar. I think it’s a lot of fun, but not necessarily important enough to grace the homepage.
jQuery Lightbox
If you click the screen cap above (and have Javascript enabled) you’ll notice that the entire screen dims and the image enlarges in its own pop-up.
This is the lighbox effect, which I downloaded and installed in under 10 minutes.
The drawback, of course, is that the lightbox effect takes a second or two to load. However, when a post has more than one photo, the lightbox plugin’s next & previous buttons will make browsing much quicker than clicking each photo separately. This will be especially handy on my portfolio page… if I ever actually create one.
Accessibility Improvements
April 9 was CSS Naked Day, a day in which participating sites turn off all their decorative stylesheets exposing their (hopefully) well-structured, semantic HTML underneath.
Although I didn’t plan on participating in the holiday, it did remind me to review my site with CSS disabled in order to find potential SEO and accessibility problems. (Better late than never!)
I was, naturally, flabbergasted. The jQuery plugin that draws shadows underneath my <div>s works by
- replicating the <div>,
- repositioning the <div> absolutely,
- re-coloring the <div>,
- blurring the the <div>
- lowering the the <div>’s opacity
- lather, rinse, repeat
What I didn’t expect, is that the plugin duplicates not just the <div>, but also its content, down to every last paragraph and image. With CSS disabled, every HTML element was plainly duplicated several times, making the page unreadable.
Since this was an effect of Javascript, I didn’t have to worry about the plugin affecting SEO, but it was a definite accessibility nightmare for anyone who had disabled CSS.
Luckily, with the help of a friend, I was able to alter the plugin so it duplicates only the <div>s, not the content. Theoretically this should cut way down on page rendering time, too.
Additionally, I belatedly realized that my primary navigation did not include a “Skip to Content” link. Oops. Another head-smacking accessibility moment. (It’s there now, just hidden with CSS, but screen readers will still be able to see it.)
Take-Home Message
Through my full-time job, I’ve had the pleasure of being involved in a number of site launches.
Even if a launch or a redesign goes smoothly, there’s always going to be some glitch that could have been prevented or some feature no one thought to implement. My own launch was no exception.
I think the hassle-free site launch might be a myth.
And if it’s not, you’re probably playing it too safe. Boo.