HTML code

Building my website

Estimated reading time: 5 minutes

I thought it was about time I shared my experiences & experiments of web development with other like-minded souls.

I knew from the off that I wanted to get my personal site up as quickly & easily as possible, due to time constraints outwith my working hours. I decided on WordPress as I know it well. I used to build several client sites in Joomla in the past, when WordPress was still a mere blogging tool. But when WordPress became more advanced, it was (and still is) much more enjoyable to work with than I found Joomla was.

I had already had a layout in mind, and I’d also been playing about with a logo idea to give it a little impact. I wanted it to be fairly clean & simple, so as not to distract from the content. I’m a big fan of minimal when a situation warrants it (most of the time if you ask me!).

One of my favourite processes is taking the design & transferring it to the web. In the past I’ve either created a basic WordPress template from scratch, or I’ve hacked an existing template. For the purposes of getting a site up fairly quickly with my own design in mind, I explored bare boned responsive template options, such as:

However I settled on Underscores . I’d read good things about it, plus it’s well updated, and it is also maintained by Automattic, the company who runs, Jetpack, Akismet, and Gravatar. So I felt like I was in safe hands.

As you can see, my initial layout hasn’t changed a great deal:

my website idea

I tweaked the content, links and also decided it would be prudent to show the latest blog posts on the home page. I expect it to continually evolve though, as all sites should, adapting to the content, strategy, etc. You see it in restaurants too for example. Those with an enormous menu that never changes start to stagnate. Those serving great food, with a small menu that changes over time, adapting to the seasons and listening to customers, will keep customers coming back.

Now I’m guessing you’ve heard of the ‘mobile first’ concept? There are some interesting articles on the subject praising it , some not so sure , and some against it . As my site was pretty lightweight, I didn’t have the headache that would come from delivering a complex website. I do agree with the concept, particularly when it comes to structuring the site, especially the CSS aspect. For example I use media queries to help make my site responsive in as many devices & screens as possible. If you’re using CSS’s flexbox like I am here, and try to override these styles further down in your CSS to satisfy older smaller devices, you’re going to get a serious headache!

When it came to actually designing my site, I preferred to start off as if it were to be viewed in an average sized monitor, then work the design backwards from there. I do understand the benefits of doing it the other way round if you have a much more content-rich site. You need to decide what is the more important content to push to visitors. It also makes you think if there is any content that is actually just ‘fluff’ and surplus to requirements. Content for content’s sake. With that in mind though, you also need to consider what is best from an SEO & marketing strategy point of view.

When it came to editing the style.css document that came with the template, the section that required the most editing was the ‘Posts and pages’ section. So I decided to use SASS & Compass to construct the CSS. It’s quite easy to install these resources, and there are plenty of useful online tutorials explaining how, such as ‘Getting Started with SASS & Compass ‘. Once they’re installed, it’s really simple to get running. Some handy commands to run in the terminal are:

compass watch

This compiles SASS files to CSS every time you save your .scss (SASS) files automatically. But where? You can edit the config.rb file that is generated in the dir that you installed Compass. As the article above explains, this is the brain of Compass. You can edit the paths to where you want the css compiled to, how the css is outputted, etc. Once you’ve made any changes, you need to recompile it again, so you’ll need to do this command:

compass compile

You’ll need to include the path to the dir containing the config file if you are not in the directory currently. There are more Compass commands available here .

Before going live, I created a copy of my website in a secure location on my host’s server, so I could do browser testing across as many devices as I could get my hands on. From old mobiles, tablets, netbooks & desktop computers. I’ve heard of actual places you can go where they have all manner of devices available for testing. Must dig that article out…

Once I was happy with the results I went live. It’s such a good feeling when you’ve finally committed to publishing it to the world. I hope you like what you see.

The banner image is originally a photo by Florian Olivo on Unsplash