Category is: Interwebs

Fools rush in

Interwebs

As a front end web dev it’s standard for a producer to give me a site to build, telling me to start with a given page. I often have no knowledge of the project but like a good little worker I open up the right PhotoShop comp and get straight to work styling it up. Of course this is a terrible idea.

I’ve been building sites for ten years now, large-scale international sites for seven: I know very well that they’re not built page by page. That didn’t stop me diving straight in and starting out my current project with the homepage header. Seems legit, right? But a cursory glance over the designs won’t uncover the layers to the onion or the pitfalls scattered around dozens of PSDs. Just that lowly header has 3 configurations for desktop, tablet, and mobile view, 3 more for the home-page-specific version, 2 more for scrolled-down view in tablet and desktop and the main nav has 2 compacted toggleable states: hover for scrolled down and on-click for mobile. Responsive gone awry.

TLDR: the header has about ten views.

For non markup monkeys, imagine a transformer with 10 forms. Each one may be simple but all coexisting in the same space it’s a nightmare. If I’d taken a step back at the beginning of the project to grok the site I’d have been able to minimise the impact; rationalise the design, keep things modular in places and siloed in others, and gotten through it in half the time. Instead in my haste I’ve fallen foul of every pitfall, rewritten everything three times, gained a few white hairs and frustrated poor PMs wondering what’s taking so long. DERP.

Note to self: next time go all Ackbar on their asses.

ackbar_its_a_trap

So, I guess it’s done.

Bloggery Interwebs

I’ve been working my ass off on this new personal site over the past four months (half the time of the last redesign), and I’d begun to lose perspective. I feel like the code’s beginning to fray and there might be other symptoms of my myopia, so it’s time to put it live and take a step back.

Take a look around! It’s got the blog still, similar to the old site but with a simpler feel, more focus on the photos and even comments! (For now.) The background images are heavy but responsive and no longer rely on Flickr. The About and Find pages are fairly standard but there’s also a new Photography page, where I collate all the Danpaps-type stuff I’ve done.

I’ve a to-do list, but it’s fairly short. Cache everything, test for performance, black headers on dark images and a bunch of content work. So yeah. LOTS AND LOTS OF FEEDBACK PLEASE. Cure my tunnel vision. Tell me what’s broke and what sucks. In the comments, over twitter, by email, even in person, it’s all gravy.

FANX!

The Treachery of Alt tags

Interwebs

(Cross posted from VML)

Updates to web browsers come so quickly (we’re on Chrome version 27!) that it’s easy to forget Internet Explorer 6 was the most popular web browser – not to mention the best Microsoft had to offer - for five long years. As a web developer I used to curse IE6 daily, and though I can finally move on from supporting the 12 year-old browser there’s one final bug that keeps cropping up, even after everyone’s stopped using it!

This is an alt tag

IE6 made “alt” attributes show on hover like “title” attributes.

This was a bug but so many learned the web on IE6 that people still confuse “alt tags” and “title tags”. The only times you’ll ever see alternate copy nowerdays is if the image hasn’t loaded. Those things you see when you hover over things? (Check the image above!) NOT ALT TAGS. Here’s a breakdown of the difference.

ALT:

  • Used on images
  • Shown when the image is broken
  • Mandatory
  • Repeats information found in the image as a back up

TITLE:

  • Used on links
  • Shown on hover
  • Optional
  • Gives extra info e.g. the size of file linked, or warning that you’re going to a new site/window

So, in summary:

  1. Alt tags should be on all content images, but you’ll rarely see them.
  2. Title tags are increasingly useless: no ‘hover’ on touch devices.
  3. You probably shouldn’t worry about either!