Insights on how I made my site jeniferv.com
August 20th 2011
People often tell me how much they like my site or ask how I made it. I’ve had a really great response to the sites look and feel and am really happy about that! I thought I would share a few of the things I’m doing to make it what it is.
- Template
- Type
- Layout Inspiration
- Sticky Footer
- Lazy Loader
Template
To start, I’m using a custom template on WordPress that I’ve hacked together. I started with the template Starkers, which takes the basic WordPress template and strips it down to the absolute basics. It is essentially a blank slate. From there I was able to edit the page templates and develop my own style using a combination of php, html, and css.
This is what Starkers looks like when applied to a page:
Type
I feel like the thing that makes my site… well my site… is the typography. I’ve always used Myriad Pro as my go to font for documents and personal presentations. I always liked playing with a combination of light and bold weights like in my title. After trying to find a font that could carry my site, I gave up and turned to Typekit for my beloved Myriad Pro.
Typekit is a service that allows you to embed non-standard fonts into online documents using JavaScript. I am paying to use this service but there are nice standard fonts and/or free services that might work for you. As for myself, if it wasn’t Myriad Pro, it felt like having my hair blonde… just not me!
Myriad Pro is an interesting font choice of mine. It is a popular OpenType font created by Adobe and is Apple Inc.’s corporate font. I’ve had a preference towards this font in my personal work for some time. It is a sans-serif humanist font. I liked it for it’s minimalism and various weights. I also strangely liked the way the ‘at sign’ – @ looked in the font because I use that symbol a lot to talk about twitter, people, and places. I liked the way the at sign fit with my name! Originally I wanted all the sections of my site to be something of the format ‘diary @jeniferv’.
It is mostly a coincidence that Myriad Pro has a similar feel to Microsoft’s font Segoe, which I’ll talk about in the next section.
Layout Inspiration
When it came to actually laying out my site, I had been through millions of design iterations. After working on a couple of Windows Phone 7 applications and becoming entrenched in the Metro Design Language, I was inspired. I love the focus on content and clean lines. My site looks like a full panorama page and even has a sticky footer to recreate another distinguishing feature of Windows Phone 7, which is the application bar. I tried using other sans-serif fonts to get the look and feel of the Segoe typeface used in Metro, but nothing felt right because it wasn’t my font, which has always been Myriad Pro! Fortunately Myriad Pro works!
Following are the design principles of the Metro Design language, which have been a big source of inspiration for my way of thinking about design even outside of Windows Phone 7:
Footer
The thing I get asked about the most is how I have my footer stick to the bottom. Basically I have two divs inside of my body class. The first is a wrapper on the page content. The second is a footer div. In my css for the footer div, I made the position fixed and made it 0 from the bottom. I then made the z-index higher so that it’s always on top of the other page elements. I had to make sure that the wrapper div for page elements had a bottom margin slightly larger than the height of my footer section (100px) so that it doesn’t cut off the end of the last article.
This is the basic structure:
Inside of my footer I have other divs that I use to float the previous/next buttons to the left and the follow me link to the right. In other parts of my site you don’t know about, my footer changes in really cool and interesting ways. Maybe one day you will see those cool parts of my site that are currently not open to the public. 
Finally here is the css for my footer div. The box shadow creates that glowy look on top border of the footer.
Lazy Loader
Finally, I’m using a million plugins on my site for analytics, caching, what have you. I post lots of images on my site and show full posts on my home page, which can really slow down the load time. This can be frustrating to me because one of my Metro Principles is ‘clean, light, open, FAST’.
One of the ways that I’ve been able to help with the speed is applying the following plugin that lazy loads images on the screen. Basically only the images in view are loaded at first. The rest of images are only loaded as they are needed or as the user scrolls down the page.
I had to hack the plugin file a little bit so that it only applied to certain sections of my site (namely the blog post section) and did not lazy load for example my sidebar.
http://wordpress.org/extend/plugins/jquery-image-lazy-loading/
Design is not only how things look visually, but how it works. Some of the things I do on my site or choices I have made are about speed and manageability on my end. It’s really hard to keep up a blog. After your design is complete, the hardest part about blogging is creating and keeping up with content.
I’ve tried my best to make blogging easy on myself. Later I will share some of those tips! 
