A new look for Empfire in 2017
24th Jan 2017
At the beginning of 2016 I promised that Empfire would have a makeover. Well, it’s taken me over a year but here it is!
I don’t think I’ve ever taken so long or put so much effort into building a theme. I’ve gone back to the drawing board countless times, reworking ideas, incorporating new functionality, and just generally getting pissed off with jQuery. But I feel it was worth it. I’m so happy with it.
Some of you may think it’s not vastly different from the previous theme, but it terms of development, it’s 100% better.
I’m a developer, not a designer, so I found it a real challenge to come up with the perfect design. However, I learned a hell of a lot about design along the way and I’m happy with what I’ve come up with it. It was the first theme I ever designed in Photoshop before starting the build, and although it has changed a lot since the initial design, it did help to guide me and give me a focus.
I’d like to talk through some the key aspects of the new layout:
Same logo and colour scheme
In order to keep some consistency, and because I loved the design of the previous theme, I decided to keep the same logo and light blue colour scheme as before.
In terms of colour psychology, blue is suppose to represent reflection and calmness, but in all honestly though, I just use it because it’s my favourite colour!
A lot of blogs (or websites in general) have a scrolling image gallery at the top of the page, but I wanted something a bit different. After playing around with designs in Photoshop, this is what I came up with.
At the top of each page of the blog you will see the latest post as a sort of “featured post”. On other pages (About, Contact, etc), a different image has been assigned to provide some variety. On blog posts themselves, the featured image assigned to each post will pull through at the top.
It’s a simple feature but I really like it, and it was probably the most time consuming aspect of the build because it meant I had to go back through over 400 blog posts and assign featured images to each post. My goodness was it tedious!
Custom search results
See that search bar in the sidebar? Go ahead and search for something.
Why? Because for the first time ever I have built a custom search results page that neatly displays all the search results and hopefully makes finding what you’re look for a bit easier.
Responsive AND mobile friendly
When I built the previous theme for Empfire I boasted about how it was responsive. And yes, it was responsive, but I thought responsive meant mobile friendly. Oh boy, I was naive.
So, this theme is both responsive (go on, resize your browser!) and mobile friendly enough to pass Google’s formidable test. I’m so glad to see the back for the Jetpack built-in mobile theme!
My previous themes were built using XHTML because I’m slow to move with the times (and actually, we still use XHTML at work) but this one is built using HTML5 and CSS3.
The theme involves a lot of flex box. At work we recently dropped support for Internet Explorer 10 and below which means we can finally use flexbox, and I sometimes wonder how on earth I coped without it.
Saying that though, there are still a few flex box issues in IE. God damn you bugs! After seeking advice from some of my techy friends I decided not to get too wrapped up in these issues, especially as only 2% of my readers use IE, because the website still functions well. It just doesn’t look quite right.
(Let me know if you are viewing this site in IE. I’m just curious!)
And coming soon…
I’ll admit, this theme isn’t 100% finished. I’m still working on a custom archives page but it’s taking a bit of time as I experiment with the code. And honestly, it’s something I felt I could go live without.
No doubt I will be making tweaks to the theme over the next few week because I’m a bit of a perfectionist and there are still some aspects of the site I’m not totally happy with (like the menu on mobile).
I’m also open to comments and feedback from you readers on what you think of the new theme. If there is something that’s bugging you about the theme please let me know and I’ll look into fixing it.
So, what do you think?
P.S. Wondering where I find my design inspiration? I have a Pinterest board wher I keep all my ideas.