Sophie Green Associates

Project Brief

I have been working with a Website Development agency from Kent called WebCrate since July 2014. Tom at WebCrate passed on a list of complicated site improvements and changes that he would like me to complete. A few of these are below:

• Responsive Design
• Replacement Design
• Full Width Drop Down Menu

The Process

WebCrate use a third party designer for all design work so I was handed the plans of what the site needed to look like and I began work on the website development side of the project. The site runs using WordPress and the theme is a custom child theme of the popular framework “Thematic”. I’m a huge fan of Thematic, my website is a custom child theme of the Thematic framework.

The first step was planning how to make the site work and look great with a responsive design. The previous site was fixed width so this was the major portion of the project. After the initial plans were made, I set to work stripping down the CSS and implementing the responsive elements. With website development projects like this, there are many different approaches. I could have added the new features first or followed the path I chose. Both had pros and cons.

Next up was the new footer. When the footer was in place I decided to finish up a few additional features that really help the design such as hover effects on the home page telephone numbers and on other images throughout the site. Website development is all about the little details on a site, they really make a huge difference!

Finally I moved onto the full width menus. This was a pain! I couldn’t use the standard WordPress menu scheme so had to develop it from scratch. Luckily Thematic comes with SuperFish and HoverIntent which makes controlling how the drop downs act a piece of cake.

The Result

I think you’ll all agree, the site looks fantastic and works beautifully. I’ve included a few images of the finished site below.