Redesign Process

Initially I was going to write about the process of my site redesign in a previous post, but that turned out to be an overview due to the size of it. Here I want to go into the tools, thoughts and technical aspects such as getting into CodeKit, statistics, SASS and suchlike. As I mentioned in my previous post, I’ve learned a lot since my last site revision so it was time to tighten things up around here. I decided to follow my typical Project Flow process.

Takes Time

Before I dive into the process I ran through, the site redesign wasn’t easy going. From commissioning the illustrations it took me about 6 months to finish things up. I didn’t just run through all of this in a week or two. Between taking on a new day job, a couple of client projects and trying to keep fit I had quite large patches of time where things would go very slow, or not move at all. This might have been a bit of a blessing though, as it allowed me to mull over aspects of the design and content. Excuses huh.

Discovery

I looked at my statistics in Google Analytics to see what my audience was like in terms of browser support, and tried to identify areas which I could improve on. Here’s some of the main areas I looked at, the stats run from 1st January to the 30th April 2014.

  • 6,809 page visits, with people on average visiting 1.23 pages each time
  • 51.5% of they visits were using Chrome, and 22.7% using Firefox
  • 16.5% were using Internet Explorer with IE9 and IE8 having just 1.1% each, IE7 was just a tenth of that
  • The biggest source of traffic geographically was the US with 34.6% then the UK with 17.76%
  • The most popular page on the site was a post about Image Resolution with 3,390 visits

I wanted to drop the bounce rate of 91.16%. It seemed high, although it’s probably not too surprising given that most of my entry pages were to specific blog posts from specific Google searches. People got what they wanted and left most of the time. To try and combat this I’m going to try and provide better related content linking.

I was able to comfortably drop IE7 support and not really worry about IE8 and IE9 although I didn’t want to drop them completely.

It was quite surprising that the UK had just 17.76% of my visits, although I’m not really sure that matters too much for me.

Blogging—the little I did over the last year or two—really worked for my traffic. Without it my traffic would be much lower than it is currently. I’m going to increase the amount of blogging I do and see how things pan out.

Style Tiles

I didn’t do a proper Style Tile for this design as it was all in my head really. I knew from previous versions of the site—pictured below—roughly the styles I wanted to aim for. I knocked out a few rough sketches whilst Blair worked on the header illustrations. The illustrations really formed the colours and directions the site took.

The old Dot Monster site

For me there were two key areas I had to fix. The typography, specifically the measure, and the consistency. I learned so much about typography since I made the site, which started with Harry’s talk at TIDE conference in Scarborough last year. He wrote a post on Smashing Magazine about the subject.

Content

I really wanted to reword how I presented myself. Whilst I work under “Dot Monster”, it’s just me freelancing in my free time outside of the day job and I wanted to make that clear. I looked around a few sites (which I talk about in the previous design overview post) and came up with a tone I was happy with. I mapped the few pages I had out in Evernote and created a map. I simplified the map, combining all the pages I could and was left with a lean set of pages. I set about populating these just in Evernote with the new tone I liked and left it for days—coming back to it every now and then to tweak.

Layout

Like the Style Tiles I didn’t have a great deal to worry about there. I didn’t want to branch into a complex grid system with columns, the site doesn’t need that so it just stands with a single tube of content. One thing I did look at deeper here though was how I was going to show my portfolio. I wanted to go past just having a row of boxes—which is actually what made it to launch! Damn. I have an iteration to come later though which is something a bit different to how it sits at the time of writing. I just had to get something out there as the site was taking some time to finish up.

Design

I started with the typography. If I was going to get anything right I wanted it to be the type. I looked to Adobe’s Typekit and began putting some typefaces on a single tube of content page, with a simple scale in CSS and tested it across the Mac, iPad, iPhone and a Windows VM. I wanted the heading typeface to be one which wasn’t too serious and a body copy to compliment it. The whole site has a bit of a playful nature so I didn’t want something out of a 90s dental form. This process took about 5 hours, over 2 days before I was happy with it.

I went for a heavy Freight Sans Pro for the headings. For the body I wanted to continue this theme, but be a little more serious. Not dental form serious, but perhaps a permission slip for a school trip to Edinburgh serious. I went for FF Tisa Pro, a serif font with a nice x-height. I think they both work well together.

Whilst my type test page with a single tube of content had paragraphs, headings, numbers, dates and symbols for me to test the typefaces I missed out one test—money. I don’t like the spacing that is applied between a comma and numbers like you would use in prices like £9,000. I think it’s too large, and didn’t notice this until later on when working on the contact form. Not that a tiny bit of detail like this would have made me scrap a typeface, I did need to correct it with a little CSS on the contact form’s comma.

.kerning-sad { margin-right: -1.4px; }

Blair’s Illustrations

Next up I put together a colour palette from the illustrations Blair designed for me. The illustrations were an advancement of the landscape theme I used in the past two versions of the Dot Monster site but Blair really improved on my poor illustration attempts—he even brought in parts of the landscape around here like Wallace Monument. I used these colours to create some of the UI like the calls to action and the boxes used to frame some content like the newsletter sign up and the contact form.

Illustrations set, typography set, colours set, base UI set, it was time to move to the build. I design mostly in the browser so I moved into development to finish up the design, not just to make it work.

Development

Let’s get the buzzwords out the way. I done this project differently to any I have done before. I brought in new tools and altered my workflow—happy to say that it’s now become the workflow I now use where the project allows. I went mobile first, used SASS, CodeKit, MAMP, Perch, GitHub and pulled in content from the Dribbble and Flickr APIs. I was well chuffed, I’m not really a developer—more of a fiddler. Maybe next time I’ll even look at GULP or whatever the cool kids are using now, but for now that sort of thing does make me gulp.

SASS, CodeKit and MAMP

I wanted to use SASS. I read Dan’s SASS for Web Designers and was convinced it was time to jump into preprocessor land. I held off for a long time just because I wanted to be sure I knew vanilla CSS really well before abstracting it. To compile the SASS I needed a tool, and bang on time I happened to listen to the Shop Talk Show episode with Bryan Jones and Guy Meyer—the creators of CodeKit. I sent some fine dollars their way, hooked it up with MAMP and I was all set with a local web server, something to compile the SASS I wrote, and something to watch my files for changes and push them to the browser. Ready to go.

Building

I setup a Trello board with all my tasks, and set out making a website. I’m not going to go deep into specifics, you can browse the code on GitHub if you like. I configured SASS into a structure that worked for me. I created the page structure, pulled in some of the content I had come up with earlier and put in placeholders for parts to come later like the contact form and newsletter sign up. I used a mobile first approach to building the site. I done the vast majority of the site on a 13 inch Macbook, I didn’t even look at it on a screen bigger than that until much later. I used Ghostlab to view my design as I coded on the iPhone and iPad which sat around my laptop. I’m not entirely comfortable doing all the design mobile first. My mind works in a desktop view and how it can adapt both down and up. I do develop it mobile first but don’t picture it that way as I design.

Perch CMS

I used WordPress for my old site and the majority of projects I worked on but wanted to give this little CMS a try. I don’t need to use a lot of what WordPress offered so I figured go with something a little smaller and gave me some more control. I got way too excited though and installed Perch before I really should have. I was still building out the page structure, populating the content and tidying up the styles. I ripped it out again, so we’ll come back to Perch.

Images from APIs

I wanted to bring in my latest Dribbble shots and Flickr photographs on my Design page. I’ve never really properly used an API before so this was a bit daunting at first but it wasn’t so bad in the end. The code could probably be written better but it works. I put a GitHub Gist up about how I pulled the images from Flickr in PHP. For the Dribbble API I used Martin Bean’s PHP Wrapper. My only concern with the images is the performance. Whilst it’s probably good enough, it would be nice if I could fetch these images once a day, store and optimise them on my server, and display them from inside my own server rather than calling the API each time. I’ll need to try be smart one day and see if I can work it out.

Date Available

You’re about to get how developery I am. I wanted to show the date I was available for new projects on the Hire page. Rather than set a date and update it each time I used some PHP to control this so I can set and forget about it unless I was really tied up in some project work—but I would just need to adjust the offset or set a manual date if need be. Here’s the Gist of it. It takes todays date and adds two weeks unless another date is set. Basic stuff but a proud moment in a colour in’er’s life. There are a couple of little bits of code around the site like this which I added to allow me to be lazy when it comes to updates if need be.

Perch Take Two

With my site looking pretty much finished, the APIs ticking over, the content all static and my placeholders waiting to be brought to life I reached for Perch. This time was much simpler since I was just replacing the finished article with Perch code. I decided to only load Perch where I needed it, so most of the site is actually just static. I can edit the HTML so didn’t really need to bother with setting it up everywhere, controlling all the text. On the Blog and Contact form however Perch is loaded and run. There probably isn’t much of a performance gain there, and it’s not really noticeable I don’t think but there must be something to not executing Perch’s PHP and hitting the database. Perch was a little confusing at first, mainly because I’m not a developer and I’m used to WordPress, but the videos and tutorials they have a really detailed.

Finish Line

After some browser testing, and making sure there was no glaring errors I pushed all the code to GitHub and made the site live. There are still some areas I need to address, mainly the portfolio display to the new idea I’ve been working on. There are a couple of small bugs: Webmaster Tools is crying over some micro-format error; a .htaccess redirect isn’t as nice as I would like; and the form validation should be done client side. I’ll sort them at some point though, I have a Trello card for each which I’ll work through when I get time. Oh and Opera Mini. Yeah.

I plan on writing another post as I optimise the site’s performance, and go into a bit more detail about what I’ve done here which I think helps keep things quick. Maybe I’ll have the Flickr and Dribbble images pulled and displayed on my web server by then rather than query the API each time! I eat vegetables more often than I blogged on my last site—and I’m not one who eats greens. I’m going to try a little harder this time. I have a Trello card for each blog idea which I’ll try dip into weekly. Stick around.

, .

Can’t get enough? Subscribe to the Newsletter.

Using the great power of the internet—and MailChimp—you can get what I write straight to your inbox. All things design, web, and even photography sometimes.

It’s very occasional, and if it turns it it’s not for you, you can unsubscribe with just one click.