Posted on: 11th September 2011
Mobile Friendly Post
I've been thinking about writing this post since I first sat back and realised JUST how much design & front end work I have done over the past seven months since I joined the Zerply team.
As a disclamer before I try and start to sound like I know what I'm talking about: I don't consider myself a professional front end developer, "user interface designer" or what ever the cool kids are calling it these days. Everything I have done over the last 7 months with reguards to building, maintaining, iterating and scaling a web product has been completely new territory for me. Before this, I was building shitty sites for shitty clients with no passion for what I was creating. I have defiantly tried to grow with our big green baby as a well rounded designer, and just the way I understand how people can come to have empathy and even love a product. I have a personal ethos to always consider myself a n00b at everything I do and always want to learn no matter what level I'm at. I'm proud of what I have done so far with Zerply & the team, and am very excited about the future.
Every bit of markup and CSS you see on Zerply.com (with the exception of the Rogie King, Elliot Jaystocks and Mike Kus themes) was done by myself. Just before we started the build for '#newzerply' I spent some time looking into Object Oriented CSS. The principle writing of CSS was something I had always wanted to learn about, yet never had the excuse nor time. Everyone I spoke to pointed me in the direction of Nicole Sulliva and a talk she did for Web Directions North entitled "OOC: for high performance websites and web applications."
I highly suggest watching this video. It explains in a very simple way the essence of the principle that has saved me so much time and made developing Zerply fast and enjoyable (so far). I am still getting to grips with OOC but I'm really glad I took the time to get to know it.
A good learning tool would be to poke around Twitter's "Bootstrap" project. It's a beautiful example of somthing I want to achieve in the long run.
There are 2 core CSS file that make up 98% of Zerply.
Zerply-main and zerply-ooc both have their own image sprite that can be called to provide reguarly used images. As an example, here is how I build a button using ooc (100% imageless).
I'm sure there are a few people that are wondering why I called the class 'butt' and not 'btn'. Purley because I get a kick out of writing the word 'butt' all the time.
is used through out the site and I'm a firm beliver that it's something you can use right now and on any project. I've tried really hard to use as few images as possbile all over the prouduct and thanks to CSS3 It's almost becoming a reality.
One great example of why it's awesome came to my attention during one of the 500 startups demo days. Zerply had two 24" displays we were demoing 'Find', our public search tool on. I thought it would great if we zoomed into the page to fill the whole display. The fact all the gradients and buttons where CSS3 allowed it to scale up beautifully with no ugly pixelmush. It's practical examples like this, that really makes me appreciate it.
A few days before I spent just 30 minutes playing with some media queries and made the whole feature work great on the iPhone & iPad. Not to mention an iPhone 4 where the pixels are 2:1.
CSS3 really has allowed me to sit down and do the rapid development and in browser design I've been waiting to do for years. I may sound like a fanboy………but it's because I am.
I have spent a fair bit of time making sure Internet Explore 7 & 8 get their own 'fun' (and what feels like an 8bit) experience. It's by no means a bad one, just no bells and whistles. All the fallbacks are in place and some borders added here and there to create some contrast that CSS3 box shadow would provide otherwise. IE only equates for 5.33% of visitors to Zerply this year and 60% of those visits were IE 8.
IE testing was done with the help of Virtual Box, a copy of Windows XP & 7, Spoons IE emulators and whole lot of Sigur Ros to cancel out the rage.
If you ask about IE6 I will personally send you a letter with the word "NO" written in big letters.
I can thank Drew a little more for creating the TipTip jQuery plugin that we have also used all over the place.
My workspace set up is as follows. New 17" MacBook Pro running Lion (Thanks Team-Z) and a Magic Mouse. Application wise everything I did was created in Photoshop & Illustrator CS5 and all coding was done in Textmate. I use MAMP for my localhost. Other tools I could not live with out are: Dropbox & Spotify. Thats it.
The stream picker was originally a clunky dropdown that felt akward. After some rethinking It was replaced with a Opacity:0 select input over the top of a simple menu. It degrades nicely in IE and works so much better on mobile devices.
The client side validation for Username and Email in settings was Tanniel Jakobs idea and are easily one of my favioute small touches.
The select inputs in settings are also pretty sexy too. It was fun to look into the -webkit-appearance property and It's a handy thing to understand. Nice not to use any JS to make it better looking.
We created the Zerply 'share popout' to be used all over the product. Everyone loves sharing everything and we needed somthing we could use over and over again.
I hope this post has been vaguely interesting as a small insight in to a startup,it's product and my perspetive of the whole thing.