Recently, Unmatched Style sponsored some “Friendly Markup Fisticuffs” where they issued design files to whoever wanted to compete, and the competitors would have two weeks to create a website using only their brains and their computers. The rules were pretty straightforward: one page only necessary, all external libraries (jQuery, et al.) had to be included, and your submission had to run locally. Otherwise, go nuts.
The judges would then review your work and score it based on code (cleanliness, semantics, and validation); user experience (respect for design, good choice points, interactions); and support (modern browsers, legacy browsers, size of project, resource optimization). In the judges hands rests the responsibility of deciding one grand prize winner, 2 second place winners, 2 third place winners, and 20 runners-up.
A few Centresourcers were up to the challenge, here is what they had to say about the experience:
The big thing that jumped out at me with this design was how EVERYTHING had a textured background associated with it. After that initial shock, my attention turned to points that seemed like they could have some kind of user interaction. There were none specified by the designer and the rules had specified that it was left to the coder to decide what (if any) they would like. The obstacles section was an obvious choice for some kind of hover/transition. The count down clock and form area also seemed like something that would have an room to explore with whatever I came up with while creating the markup. After a closer look, a few other smaller nuances caught my eye such as the small transparent border at the end and beginning of each section, the text shadows and many of the headings, or (again) the textured background. In the end, I made a conscious decision to try and keep this as small as possible in terms of the file size and sacrifice complete compatibility for items like the above nuances in legacy browsers. Although this probably hurt me in terms of scoring, I thought it would be more beneficial to learn newer practices for HTML5 and CSS3 versus supporting Internet Explorer 6 (which honestly has not been something I’ve thought about for a few years). The trade off worked out well for modern browsers as everything looked pretty close to the design and I was able to use lots of CSS3 properties to accomplish the gradient background effects (rgba transparent backgrounds with a gradient image), font face properties for all the non standard fonts (allowed for the ticking clock), and extensive use of the jQuery animate property for my transition effect on the prizes section. In all, this was a great experience that should pay off in the long run for applying new process to future work.
Mike went over the different sections/elements of the design, so I’ll talk about some of the tricks I used to accomplish the design while still keeping file sizes nice and small.
First, I exported all of my images as transparent GIFs instead of PNGs. The judging gives points for compatibility with older browsers, and everyone’s favorite browser to hate, Internet Explorer 6, doesn’t support transparent PNGs. The image quality of the exported assets were comparable as GIFs, the file sizes were much smaller, and they work with IE6 without having to do any weird hacks. By using GIFs, the total size for all image assets clocked in around 868KB.
My entry: http://cssoff.csclientsite.com/troberts/