CSSOff

by on Dec 13, 2011 under Design, Development

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:

Mike Calhoun

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.

Travis Roberts

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.

Second, I used a CSS3 library (Animate by Daniel Eden) to accomplish all of the effects/transitions. This may seem counterintuitive to my previous paragraph about older browser compatibility. My thought was that effects/transitions are progressive enhancements. The site will still work fine without them, but they add a little polish to browsers that understand them. Because I used the CSS3 library for my effects, the only external javascript file I included was jQuery. This allowed my total project size to be relatively small (~1.1MB zipped).

My entry: http://cssoff.csclientsite.com/troberts/

,
Share This
  • SwitchUp Studios

    We (SwitchUp Studios) used PNG8 and PNG24 images that we then ran through a compressor and got all images done to less then 750kb, which have them much higher fidelity then GIFS. We then solved the problem of IE6 support of alpha traspanency by simply including the texture in most of the transparent images, which in most cases didn’t increase file size and in others decreased file size.

    Using a png8/24 compressor instead of photoshops export for web, actually cut our images from 2250kb down to 750kb, 66% less then the original.

    I wish the best for all of us in this competition :D

  • SwitchUp Studios

    We (SwitchUp Studios) used PNG8 and PNG24 images that we then ran through a compressor and got all images done to less then 750kb, which have them much higher fidelity then GIFS. We then solved the problem of IE6 support of alpha traspanency by simply including the texture in most of the transparent images, which in most cases didn’t increase file size and in others decreased file size.

    Using a png8/24 compressor instead of photoshops export for web, actually cut our images from 2250kb down to 750kb, 66% less then the original.

    I wish the best for all of us in this competition :D

  • http://www.cisin.com/ Natahn Miller

    Great news. I think its going to be tough.

  • http://www.cisin.com/ Natahn Miller

    Great news. I think its going to be tough.