I’m writing this post 35,000 feet above some state between Michigan and Florida, where Beth and I are on our way home from a seriously great vacation (more on that later). It couldn’t have come at a better time for either of us. Beth’s at the beginning of what promises to be a busy craft fair season, and I’m just finishing up the new Handmade Detroit site. Building this site has taken the better part of every night for the last month and, for whoever’s interested, here’s a little insight into some of the details:
- Because there was so much informtion that needs to be displayed (especially on the home page), a smart, well-organized layout was essential and Josh came through again with some really fantastic design. He wanted to incorporate some fabric or paper textures, tying back to the crafty content, and managed to pull it off without making the layout too busy in the process. Kick ass job, my man. (By the way, all of the stitch paterns that tie each section together were actually hand stitched by Lish and then scanned in. Handmade, indeed.)
- Once Josh handed me another wildly impossible-to-code PSD I had some problem solving to do. There were several elements that I wasn’t sure were possible (especially cross-browser), but somehow, nearly everything that he had in the original design mockups made it to the working site (Even for you IE 6 users! Seriously getting sick of coding for you guys though…). I decided to jump on the bandwagon and mark up the site with an HTML 5 doctype for no other reason than the fact that it’s hip at the moment (and I wanted to start getting familiar with some of the new elements). It’s a bit different than my usual workflow with an XHTML 1.0 Strict doctype, but turned out to be quite useful when it came time to write the CSS. Having pre-defined rules for semantic class names is something we’ve needed for a while, and this will definitely help make writing CSS faster. I’ve already got a bare bones “base” stylesheet that has empty selectors for all of the new “standard” class names. I can’t wait ‘til I can write a
<article>tag and have it actually mean something. - The design makes extensive use of alpha transparency in several places that feeding GIFs to IE 6 wouldn’t cut it, so I used the relatively new DD_belatedPNG method for alpha transparency in PNGs in IE6. There are still some minor issues, but it’s miles better than the old AlphaImageLoader filter. Very handy.
- One of my favorite parts of building this site was wrangling all of the external content that needed to be retrieved. I made use of the APIs for Twitter, Flickr, Vimeo, Google Maps, and Google Calendar, pulling JSON formatted data from each. I’m no JavaScript expert by any means, but jQuery makes me feel like it sometimes. It lets me whip out working code so much faster than if I had to code without a framework, worrying about browser compatibility on the behavior front as well as the presentation layer. I’m especially proud of the calendar quick view at the top of each page. This is created by fetching the data from two public Google calendars (Handmade Detroit events, and the Michigan D.I.Y. calendar) for the current month and parsing the event details from the results. It was a great design solution from Josh that fulfilled one of the HD gals’ main requests (Feature the calendar!)
The main point of the redesign was not only to make Handmade Detroit look good, but to bring the ideals of the group to the place where most people interact with them — handmadedetroit.com. By consolidating many of their social media properties in one place, and giving priority to the calendar and other people’s events, it really creates a welcoming central location for the Southeastern Michigan craft community. The group has always been about strengthening that community. Now they have a website that does it too.
