Zerply Frontend

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.

With that out of the way, geeky stuff time.

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.

A Simple Run Down

There are 2 core CSS file that make up 98% of Zerply.

zerply-main.css: This has all styles for stuff you see when you login like tags, global nav, tabs and specific layout styles for the main product.

zerply-ooc.css: This is my first attempt at object oritenated styles. Core styles for Background, modal windows, all the button, forms & inputs, menus, autocompletes, patterns & textures, validation and CSS3 fun with fallbacks are all in here.

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.

Auxiliary pages such as the custom domain or the web resources page are all built with zerply-ooc at the core then thier own page spefic stylesheet and, if needed their own sprite for image assets.

Resources and technologies I'm using.

CSS3 is awesome

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.

"But Luke, what about IE yadd yaddy ya?"

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.

More Awesome Stuff

Two things that helped create a very legiable overall experience are text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased. Go learn about them……srsly.

CSS arrows are used all over the place in conjunction with :before and :after to create some cool effects and positionings. It's a really cool little technique to have to hand and IE even places nice with them.

I only recently became aware of how you can use Base 64 code in CSS and intirued by Patternify I replaced the two grid patterns used in our OOC with some Base 64 code and they now scale up and down perfectly. IE still served the patterns as images.

The main Zerply logo is a 12kb .svg file. I've been wanting to implement for a while. It has saved about 80kb on the main image sprite since there is no need to have logos in diffrent sizes thanks to the infinite scaling of an .svg. It's been great for mobile development and as I said above IE still get's the image versions and actually has it's own sprite for replacements like this.

The Pictos web font by Drew Wilson has been an invaluable tool during the building and scaling of Zerply. It's great not having to worry about recreating assets for mobile and having icons for all sorts of things being readily available anywhere.

I can thank Drew a little more for creating the TipTip jQuery plugin that we have also used all over the place.

My Tools

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.

My favioute parts

Here are some little things you may or may not of picked up on.

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.

That's it

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.

If you have any questions about anything in this post or just want to discuss anything I'm always all ears. You can reach me on hello@lukesbeard.com or tweet at me @lukesbeard.