Hard to say, easy to do. That happens every time we do something fun with akella. Last year we made a reader for iPhone and iPad in 33 hours and yesterday we took part in CSS1K. It’s a challenge for coders to decorate the page with pure CSS in less than 1024 bytes. I made the decoration while akella coded everything. You can see the result before reading the post: Bbubles. Please also note that the file with this design saved (no animations, no links) is more than 20 times bigger than the CSS used to decorate and code it!
While akella was coding I chose the colours, so the colour codes would be 2 times shorter. CSS allows to shorten similar codes like #ffffff (white) to #fff. So the colours were:
#ccdd22 → #cd2 (green)
#eeeedd → #eed (background)
#ddddcc → #ddc (dark circles)
#444444 → #444 (text)
#ffffff → #fff (links background)
And the whole design brightened up:
It became obvious while coding that circles can’t be placed and act exactly as we wanted within the limitations, so akella placed them in the apexes of triangle and I improved the decoration.
Result still differs from the last mockup but not so much. When everything was ready I took a part in prowling the CSS in search of things to optimize. I made the code more than 10 bytes shorter with my offer to replace sans-serif with Arial (though it is not so standard and professional but still works), replacing 1.3em with 18px (it finished up as 130%) and others. I think there have to be more tips and coding tricks in akella’s post on CSS1k.
We had a great time taking part in this CSS1K thing and scored something that looks to me like jackpot: Bbubles.