Last October I participated in a competition called CSS Off. CSS Off descibes itself as a no holds barred display of CSS and markup skills. The competition in a nutshell comes down to this: You are provided with a design (provided by the fine folk at Paravel) which you need to turn into great HTML and CSS.
Because of the big amount of participants it took a while before the jury had judged all entries. But yesterday the results where finally published. And I did pretty well with an 11th place! Nice!
You can check out my submission here: My CSS Off entry.
I took a mobile first approach for this project. The starting point was the mobile (or small screen) version of the page and I worked my way up to the original design making sure the content was appropriate on all widths in between. I primarily used an iPhone, iPad and laptop to test.
Focus on clean code
My main goal was to create HTML that was as clean as possible. In my opinion this goal was met and the judges seemed to agree. Just check the source code to see for yourself.
To still be able to recreate the visual design I used a lot of background images and pseudo-elements (with a polyfill for IE8 and down). This worked well, but caused problems when trying to animate certain parts of the page.
With all the textures in the background and the illustrations in the foreground I knew it would mean I would have to create a lot of transparant png’s. Not the best file format for compression, so I created several versions of the same image for several breakpoints. This way the small files get loaded for the small screen version, while the big images are only loaded on big screens which presumably have more bandwidth to work with.
Since the design had several great illustrations there was no reason to use 24 bit png’s. 8 bit would be more than enough, but they have ugly non-anti-aliased edges. For the best result of big illustrations with transparent backgrounds I used to following trick:
Place the illustration on a layer in Photoshop above the background texture. Select the illustrations outline (click the layer thumbnail while holding [CMD] / [CTRL] ). Expand the selection by 1 or 2 pixels and copy that complete selection into a new document. Export it to PNG-8. You can optionally select the matte color the match the background.
The small screen version loads a liitle over 500KB of assets while the big screen version loads almost 1MB. That still not great but not bad for an accurate representation of the design.
Checking your website on an iPhone 4 or 4S makes you very aware of low resolution assets, so I provided several @2x versions for certain images. I used another trick to make the background texture look extra sharp: setting background-size to half of the original image dimension.
Stuff I knew that wasn’t perfect
The form, oh man, the form. It was bad. I wanted to create great dropdowns, but I dind’t have the time to do so. I also didn’t implement any validation.
Legacy browser support wasn’t great either. The background-size property not being supported was the biggest problem. I use background-size a lot to scale backgrounds while resizing the browser.
The last thing I didn’t do was concatenation and minimization of assets. The reason for this was simple, it would have been hard for the judges to judge, so I just didn’t bother.
Things I would’ve done differently now
Aside from fixing the points mentioned above I would have probably handled the image compression differently. I put a lot of effort into recreating the big screen experience of the page on small devices, but that came at the cost of bandwidth. Doing it over I would’ve dropped the textures on the smaller screens so I could’ve used more jpeg’s instead of png’s. That would have saved a massive amount of kb’s!
What I thought of the other entries
It was cool the see a very familiar design handled very differently by other people. Some of the things that crossed my mind:
- Damn, why didn’t I think of that
- Wow, that’s a nice animation
- Hmm, not exactly the same as the original design, but you definitely some save bytes here
The overall quality of the submissions I saw was good! But the most interesting thing to see was how everyone handled the responsiveness of the design. The breakpoints and how the layout changed when viewed on a different device differed a lot!
Participating was an amazing experience. Just knowing that people you look up to will be examining your code made me step up my game. I went the extra mile, crossed more t’s and dotted more i’s. The great thing is that my day to day coding has improved because of it.
And finally, while the competition itself is a lonely event, connecting with other participants afterwards has been great as well.
Thanks to the judges and everyone else involved with CSS Off. I will definitely be participating this year again!