Behind the scenes of this website

I designed my first portfolio website just before graduating from Chaffey College in the end of 2000. I suppose my questionable choice to use a ghostly image of my face and blurred typography (the links came into focus upon mouse hover) can be called charming. I at least managed to strategically align the second o of ‘communication’ in the logo. Oh—the site also had an awesome Flash intro.

romanjaster.com version 1 (online from 2000–2004)

The second version of my website was designed in the summer between my 3rd and 4th year at CalArts in 2006. This website served me well for many years. I still very much enjoy the spirited and colorful patterns on the homepage and the patchwork quilt that the project thumbnails create.

romanjaster.com version 2 (online from 2006–2013)

But the site eventually started showing signs of aging ungracefully, especially in the brave new web world of embeddable typefaces, html5 & css3, jQuery, responsive design, and very big and very small screens. Hell, the old site was still designed with, ahem, tables. So I had been meaning to redesign it for a while. One summer a few years back I even started making a list of goals and features for a new site. But it was hard to find the time for such a big project. Regular (paying) projects always got in the way.

And then I could take it no longer. I wanted a site that reflected a contemporary approach to web design. In November 2013, I ceased all communication with the outside world for a strategic one-week-sabbatical and hunkered down. My goal was to design and code my new site in one week. (This was partly inspired by the folks at Happy Cog and their Redesign Week.)

What a fantastic experience! The ability to work uninterrupted and the self-imposed pressure made for very fast progress—by Monday night I had a visual direction, on Tuesday I started coding, on Wednesday the WordPress implementation was taking shape. By Saturday my new site was very close to being done.

Early ideas

I started by jotting down goals for my new site

Implementing legacy content and adding new work took a bit longer and I worked on that sporadically for the next two months.

Below is an detailed account of the process of creating this site.

Design and Development Hours

I keep track of my time spent on all projects. I feel strongly that this is very important for designers. It provides historical data that can be used to evaluate a project and to more accurately quote future projects.

For this website I spent about 155 hours from start until launch. Here’s a breakdown:

60h – Sabbatical week in November
25h – Additional coding
45h – Content implementation
25h – Tinkering, testing & preparation for launch

Fonts

I use Process Type Foundry’s Stratum for headlines and Joshua Darden’s Freight Micro for body copy. I purchased a web license for Stratum. Freight Micro comes courtesy of Adobe’s Typekit.

Design Tools

I created wireframes in Balsamiq. It’s a delightful tool to create no-frills, low-fidelity mockups of page structures. The fact that they turn out looking not very attractive is beneficial—it focuses attention on structural decisions and not aesthetic ones.

I created wireframes in Balsamiq.

The visual mockups were created in Illustrator. I like the ability to easily duplicate artboards to work on multiple pages and page sizes and quickly explore new ideas.

I designed visual mockups in Illustrator.

I use Dreamweaver as my code editor, mainly because I’m so used to it. I have not used any of the WYSIWYG functionality in years (although I admittedly did during the wild west table-layout-years). I do like the Site functionality that allows me to upload files to the server easily. It also has very robust code hinting. I installed Emmet inside of Dreamweaver, which offers many time-saving coding shortcuts.

I also used the web-based tool Fontello, which creates a custom icon font from many freely available icon typefaces.

For trouble shooting in the browser I rely heavily on Firebug. I used the Chrome Dev tools to monitor and improve performance.

WordPress Starter Theme

Underscores
I start every WordPress site with this bare-bones starter theme.

WordPress Plugins

WordPress plugins

Backend

Admin Menu Editor
Allows me to customize and rearrange the admin menu. It’s helpful for sites that use Custom Post Types. For example, I hid the “Posts” menu from the admin menu since I don’t use any posts on my site.

Content

Advanced Custom Fields (ACF) including Options Page and Repeater Field
This plugin is my favorite by far. It adds custom fields to posts and pages and allows me to use WordPress as a true CMS (and not just a blog).

Preserved HTML Editor Markup
Don’t rewrite my code, WordPress!

Responsive Video Embeds
Makes embedded videos shrink on small screens.

Custom Post Type UI
Allows for easy creation of Custom Post Types. For this site, I created a post type called “Work” and another called “Things to Share”.

Custom Post Type Permalinks
Allows to customize the permalinks for Custom Post Types. I wanted all my projects to have this URL structure: romanjaster.com/work/projectname.

Backup

Duplicator
Probably my second favorite WordPress plugin (after ACF). It makes the move from the local development environment to the live server a breeze. But I also use it as part of my Backup strategy.

WordPress Backup to Dropbox
Automatically saves a copy of the database and any files (you can choose which) to a Dropbox account. Brilliant!

SEO/Performance

WordPress Meta Description
Allows me to specify content for the <meta name=”description”> tag for each page or post.

Google Sitemap
Creates an xml sitemap of all content on the site.

MinQueue
Minifies and concatenates all CSS and JS files. This makes the site download much faster because the files are smaller (minification) and there are less server requests (concatenation).

WP Super Cache
This plugin caches all pages as static html files and serves those to the user instead. Since the pages don’t need to be assembled from scratch every time, it makes the site faster and less resource intensive.

jQuery Libraries

jQuery Cookie
This jquery plugin helps me to manage cookies via javascript. I use cookies to keep track of when a user closes the Things to Share sidebar. The sidebar then stays closed during the entire visit to the site.

Magnific Popup
I recently discovered this great jquery plugin for lightbox popup effects.

Mixitup
The filter animation on the homepage is powered by this jquery plugin. I briefly considered the more popular Isotope, but chose Mixitup because it is lightweight and uses only CSS3 transitions for the animation.

Custom jQuery

I wrote a few custom jQuery scripts to facilitate special functionality. The non-minified versions of the files can be seen here:

filter.js (project filtering on the homepage, also includes the script to create the colorful bar graph on the top of the homepage)
search.js (search function on the homepage)
sidebar.js (collapsing sidebar functionality)

Hosting

I’m hosting the site on Hostgator, which has been a solid experience.

I installed Google Analytics and Google Webmaster to monitor user stats and make sure the site doesn’t generate any errors.

And lastly…

Easter Eggs

If you are very patient and quiet you might run into a very naughty badger and a very sweet baby skunk.