Just over a month ago I wrote about some changes I had made, and planned to make to my blog. It’s taken nearly 5 weeks of almost non-stop, after work coding, to get to where it is now, and I’m really chuffed with the new, hand made, custom theme I’ve created.

I taught myself to code HTML & CSS when I was in my early teens, and for a few years thought I would become a web designer. Thank goodness I didn’t! Although I’m more than capable of designing and building a site from scratch (your looking at the proof), in all honesty I hate it, it would be a great way to torture me, if you ever need too. Few things frustrate me as much as desiging a website does!

I’m sure it’s subjective, and a web designer would disagree, but I feel like it never used to be such a pain in the backside to build a site back when I taught myself nearly 16 years ago. The modern focus on responsive websites that we have now, whilst a good thing I suppose, because you can look at stuff on your phone, makes the whole process of building a site from scratch a really frustrating experience if you haven’t done it for years, there is so much to catch up on.

So in light of that, I wouldn’t say the last month has been particuarly enjoyable, but I thought I’d write about some of the process I took to get the site to where it is now and where I want to take it over the next few months. Although I was happy enough with the design to launch it, it’s not quite there yet, and I have an even bigger backend change planned in the future if all goes to plan.

I’ve never been one to do things the easy way. When I do something I strive to do it to the highest standard I possibly can. I suppose you could say I’m a perfectionist, but I wouldn’t say I am. I definitely used to be, but I find perfectionism just leads to needless frustration. I tread a fine line between trying to get things to be as good as they can be, and accepting that sometimes, in reality, stuff won’t be and that’s actually ok. That’s pragmatism right? Life has taught me, especially in the past 10 years, that sometimes you can’t get things to be exactly how you want them to be, and you have to compromise.

I’ve had to make some compromises with this design. In a sense the very fact your seeing it is the biggest compromise I’ve made. I didn’t want to launch it until I was happy with everything, every little detail, and that included the things you can’t see - the backend. Some of the code is a bit messy, and I’ve had to remove features I just couldn’t get to work. I have a long list of things I will polish over the next few weeks, even if just to keep myself happy!

One of the things that really held me up was styling the comments section. On WordPress they seem to be one of the most ridiculous, overcomplicated features I’ve ever had to try to style! I ended up borrowing the code from another theme as a base, and even then I personally hate how they look. I haven’t been able to style them how I wanted to style them at all. The CSS for just the comments must make up about 15% of my overall CSS, which is ridiculous (probably an exaggerated estimate, to make a point though!).

Other things I’ve put on the backburner are things like a search feature. It’ll come eventually, but the effort it would take isn’t worth it with this many posts just now. Theres lots of other tweaks, and little features I want to add in, and it’ll all come in time, but I have very much had enough of it for now, and have so much else I also should be, and want to be doing at the moment.

I was originally thinking about designing the site around a sidebar. You see quite a few of these kind of sites out there at the moment, the sidebar contains the logo/site title, navigation, social media stuff etc, and then the content is all on the right. I came up with a few ideas in Photoshop but just wasn’t feeling it. I’ve always had a weakness when it comes to design, in that I tend to jump right in, instead of planning it on paper, so realising I wasn’t getting anywhere I got some paper out (I rarely use paper, or pens now days) and came up with some front page layout ideas.

In the end some of the ideas ended up merging and evolved in to the current design. I really wanted to focus on two things - simplicity & typography and I feel I’ve achieved that. I put a lot of thought into the typography, spacing between lines, font size etc. I hate it when I’m reading an article on a screen and you can just tell there has been very little work put into how the content is presented. I wanted my content to displayed in a simple, beautiful, non-distracting format. I suppose that’s not always going to be possible because much of what I post will be how I’ve done things, and those posts often include screenshots and images, and I feel like sometimes images can break the flow, but for articles like this I love how it looks on the page.

The site is still very much on WordPress as I mentioned above, but my long-term plan is to switch to a static site generator, because I love their simplicity and the fact that you can write everything in Markdown files.

However, as I found out when initially trying to build this design for both Jekyll and then Hugo (both current static site generators), my initial forays just led to even more frustration (yes frustration seems to be a theme of this article), and I realised that the backend of these generators is far from simple! I am stunned at how un-detailed the documentation is for both Jekyll and Hugo, and despite watching two video courses on how to work with them still really didn’t know how to take it further than a basic site. So after wireframing my site in HTML and CSS I decided to adapt it to work as a WordPress theme - which is so much simpler.

I’ve still got issues though, one of the bits of functionality I can’t get to work at the moment is pagination, which for those who don’t know, is basically splitting your front page in to pages when you hit a certain amount of posts, although I’ve looked at lots of examples, everytime I do it, I get the pages to automatically create but the posts are the same on every page. Quite frustrating, and I don’t know where I’m going wrong, despite much searching around for solutions, most of which didn’t fix it. I’ll get there, hopefully before I have 100 posts all on the front page (get scrolling people!).

For the CSS, I’ve actually used Sass, which I used a few years ago when it was becoming popular, and is still just as great. To be able to set variables for things like colours and fonts, and even width is a superb feature that should be built into CSS natively.

As far as the responsive, mobile first aspect of the site is concerned, despite my annoyance at having to worry about it, I’ve put quite a lot of work into getting the site looking decent on everything from phones to tablets to 4K TV’s, and although, again I think there’s improvements to be made, it’s more than functional for now. I actually went the complete opposite to mobile first though, and that made it a lot harder to get the site to size down, in future, I’ll build it for mobile first, and scale it up (mobile first!),

One of the features I really love, and think is really cool is the featured image that shows at the top of the page when your reading an article. I’ve managed to work it in to the natural flow of the site, and I’m really happy with how it’s come out, I think it really looks impressive.

If your a web developer and you look at my code, apologies, It’s probably the most unsemantic HTML you’ll ever see, but this is something I hope to simplify over time. At times I feel like I’ve used so many containers (divs) around pieces of content it’s ridiculous, and I’m sure I can clean that all up, but for now it will do.

One of the constant frustrations for web developers is getting their sites to look and work the same across all browsers, including the always annoying Internet Explorer. I’ve tested the site in all the latest browsers (except Safari - because I don’t have an Apple device) and even Internet Explorer 11, but I’ve not tested it with earlier versions, because I’m past caring!

So I should probably wrap this all up now, otherwise I’ll go on for a long time.

I love graphic design, again it’s something that also really interested me in my early teens, and unlike HTML/CSS still remains a passion. Graphic designers, as well as photographers and artists have to have a portfolio, and now days that needs to be online, how else do you show people your work, and what you can do? I think it’s just as important for people like me, people that are building a career based around something they love. Just having a LinkedIn profile and a CV isn’t enough for me, you have to be active in your industry to get to where you want to be.
I want to prove how passionate I am about tech, and this site is how I do it, it’s my technology portfolio, it’s as much for people to see what I can do, as it is for me to look back on and remember what I can do, and have done. For something this important I was never happy to use a bog standard theme, designed by someone else, the very theme itself had to go someway to proving my abilities, and passion and I really feel I’ve achieved that with this design.

I expect it’ll evolve over time, and if I can get my head around a static site generator I plan on changing platforms, but I really feel that I can happily blog away now, knowing that I have a great design to do it on.

Thanks for reading.