24th March 2013
So here we are, version 2 of my personal website. It was a surprising amount of work to get it looking right across the different devices, though ultimately really rewarding. Building your own website is always a great opportunity to learn new things so I decided to tear the old site down and start again from fresh. Designing and developing my web portfolio in unison with my DJ website really added to the volume of work, though I tried to keep the styling as close as possible to keep a consistent look and feel throughout. I also made great use of WordPress’s awesome Child Themes functionality and this really saved me a lot of time and allowed me to keep everything nice and organised.
I was hoping the hardwork would end with the launch of these websites and could get my evenings back, but I have decided I really want to try and fill the blog section with lots of content, I have so much information I want to share including code snippets and solutions to problems that I often come across when designing/developing websites. With the launch of retina displays and the many differently sized devices the need for a responsive website has changed from ‘nice to have’ to ‘must have’ and it really has opened up a whole world of new problems for front end developers. Solving these problems is ultimately satisfying though and its really to find an obscure device and see your site still looking the way you intended. Having said that I can’t vouch 100% for this site yet as I am still testing, though so far so good, if you spot any problems please let me know :-p.
As you can probably tell from the flow of this post, I am not the worlds greatest blogger, though I am hoping that these posts will be of some assistance to people. I will never pretend to be the authoritative voice on web, I just know what works for me and I am always searching for a better solution. I am hoping that by posting up solutions to problems people will either benefit from them or hopefully even challenge my solution with something better.
About this site and my working environment
This website is a custom built responsive wordpress driven CMS designed and developed by myself. The main website is the Parent Theme with my DJ site using an additional Child Theme that shares all the same styles with overrides in place to differentiate the two. I used Fireworks to create the Wireframes and Designs, I highly recommend trying this out as I find the workflow so much quicker than using photoshop, though I must admit the text rendering is a bit suspect. Development was done via the fantastic Sublime Text and I use MAMP for my Local Server Environment and have Parallels set up for IE/Windows testing. I used Sass for the stylesheets and the wonderful Codekit to publish everything ready for the web.
How I built this site
To answer this question I am going to break it all up into a list and discuss each item in more detail through separate blog posts with code examples where applicable. I will update this list with links as and when I get around to writing the posts.
- Setting up a sensible CMS structure with Custom Post Types and Taxomonys
- Using Sass/Compass to structure my stylesheets as well as a few custom Mixins
- How I setup my font sizes
- Designing and developing a custom Grid
- Developing Mobile First
- Creating Retina graphics and updating the stylesheets to accomodate
- Using a custom Icon Font
- Custom Plugins I created for this site
- Other Plugins I used for this site
- Creating Sidebars with Custom Widgets
- Setting up a second website using Multisite and a Child Theme
- Using Codekit to organise/compress my files ready for a live environment
- Useful Code Snippets taken from my functions.php
- How I built the Parallax Effect on my DJ site