A new look for Empfire in 2017

24th January 2017

A new look for Empfire in 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:

A new look for Empfire in 2017

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!

Latest post

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!

Technical stuff

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!)

This is my first theme ever to feature jQuery that I’ve wrote myself. The world of JavaScript and jQuery is one that still baffles me but I’m slowly learning and getting to grips with it. I’ve used jQuery for simple features, like making the main navigation stick when you scroll, and for creating the hamburger menu on mobile.

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.

Enjoyed this post? Why not share it...

  1. omggg!!! Well done Holly, it looks amazing! It looks clean – I mean not to say your previous theme was clean but this just looks like a very refreshed look. I know that people may not think it’s entirely different but I can see all the differences and it’s really awesome. You have done a really good job!

    One of my favourite parts is that you have actually used more blue, and that really makes it stand out and give it a bit of personality compared to your old layout. The hover states on the navigation are a nice touch too 😄

    I really like the idea of a latest post. That’s very smart… I now want to do something similar haha! I guess because a lot of people do use the gallery or “carousel” (such debate around whatever they are actually called haha) to showcase posts but I find them really annoying, personally. It was very nice for you to promote just the latest post up there. I guess the only thing that bugs me just a little is that on the homepage the latest post will likely always be the first one you see as you scroll, so it feels like a double-up. Unless you also use the space to promote another recent post, or if you have a “sticky” post as the first one.

    Anyway, I love it! Looks so good! 👍👍👍

    • Holly

      Ah Georgie! That means so much. Thank you!

      I’m glad you like the fact I used more blue. I was worried that I might have used it too much. But I see that so many blogs these days are just black and white and I wanted to do something a bit different.

      Haha, I’ve heard those galleries called all sorts of things. Sometimes at work the clients have their own name obscure for it and at first I have no idea what they’re talking about.

      Yes, I thought the same. I even asked Tyrone is he thought I should I should hide the first post to prevent duplication. I’ll have to get thinking. I could even rotate the post on refresh to show one of my latest posts.

  2. It looks great, I love the colour and the new layout. It’s fab you learn a few things with the blog and this might help your career too.

  3. Elisa

    I loooove the new look! omg everything!! i love how spacey this theme feels, giving it more room to breathe…if that makes sense. it’s also a lot more minimalist and sleek and urgh i love love it!
    Idk why but reading “i’m a developer, not a designer” sounds so cool to me. i don’t mean to boast but i can come up with a few good design but i will never know how to develop them. yes i know some basic html css and i did code my own theme yeaaaaars ago but i’m not a developer and have always been more of a designer so i’m so jealous when i see people who can code and develop their blog to its fullest potential.

    I’m also happy that you’re developing this theme to be both responsive and mobile friendly. nowadays, when i come across blogs with non-responsive themes, i tend to cringe a little because imo, everything today should always been responsive. i mean, i probably sound like a snob despite not being a developer but as a designer, especially a web and interface designer, responsiveness and mobile-friendly layouts are a must! in terms of design, designing a responsive / mobile friendly theme on Illustrator isn’t easy either so yeah, i’m picky when it comes to blogs or websites with non-responsive themes 😛

    i can’t really comment much from the developer side but design-wise, i think it’s pretty alright. i definitely love it a lot more than your previous theme (not to say i didn’t like the previous one but you get what i mean) i hope this does not come as offensive but i’m not really feeling the font family, however, do take note that it’s just me being nitpicky with things and because fontface is kind of a personal thing for everyone. there’s no one size fits all. also, i’m not sure but i feel like the sidebar area is too…broad? like, how do i explain it… for instance the “Topics” widget where all the categories are present, i think the space between each link of category is a little too wide. last but not least, when i view your blog on mobile, the burger menu on the top left could use a little margin or padding because it’s too stuck on the browser’s corners…if that makes sense. again, i’m just saying this because of me being nitpicky so you don’t really have to change if you’re comfortable with what you have now 😀

    • Holly

      Thank you! That was my aim. I wanted to utilise white space and keep everything as simple as possible.

      I wish I could be one of those talented people who can design AND develop. But I think development suits me more. I love being able to bring other people’s designs to life.

      No worries. I appreciate feedback. I went with these fonts because I’m a big fan of sans serif and I tend to go for fonts that look like my handwriting (yes, I have very neat handwriting!) so it feels more personal. I got stuck on the Topics section. It was one of the last elements I built and I kind of rushed it. Maybe an update for version 1.01?

      You’re completely right about the hamburger menu. I’ll have to push it out a little in my next update. I’m also considering changing the button itself to one that says “menu” on it. I know most of my audience probably know what a hamburger menu is but I like thinking about accessibility and user experience.

      • Elisa

        hm, this is weird. i didn’t get any notification of you replying to my email.
        anyway, i actually think the sans serif font is fine. it’s not horrible or anything so you’re fine. also, if you have font-like writing irl then omg i’m so jealous of you!

        hm, i’m not sure whether you have something in mind for the Topics widget on the sidebar already or not but i was thinking if using image to represent each category might work, hehe. also, you mentioning about changing the hamburger menu reminds me of some articles regarding UI and UX where people are starting to change hamburger menus because they think the hamburger method isn’t the best. then again, that’s something when it comes to designing UI for mobile apps and i personally think it’s fine for hamburger menu to be used in mobile version of a website. i can’t wait to see the updated version of the theme :’D

  4. I love the new layout <3 And it's kind of periwinkle blue of some sort.

  5. Cat

    The new layout looks great! I love the clean look, and I always felt the blue that you use is very soothing to look at 🙂 I also like how the navigation changes after you scroll down a bit. After I read that you have a featured image for each page, I clicked the other sections to look!

    Aahh, that’s nice that your work dropped IE10 support. I think we were considering it too but haven’t made the move yet. Fortunately, the percentage for IE11 and Edge is higher, so those are easier to work with!

    My only suggestion is more of a UX one. When I see “latest post” type things at the top, the whole thing is usually clickable. I ended up clicking a few times before I got to your post, so that was a bit confusing! (I tried the image first, since that’s the largest thing, and then the “Latest Post” header before I finally clicked on the title.) Looks nice otherwise though!

    • Holly

      Thank you! It was such a relief when we could start using flex box. It’s completely changed the way I build sites.

      Thanks for the suggestion. I’ll definitely take this on board for the updates. 🙂

  6. Kya

    Awesome! 😀 I really like this design and it was interesting to read about your process and how it was made. 😀 When I was doing a bit of website design playing, I discovered Flex Box and I was excited. Because it felt just like working with graphic design principles, or like using InDesign, just in a coding sense. I wasn’t 100% sure at the time how supported it was, so felt a bit insecure about using it. It really has so many options that allow you to create a number of effects easily!

    Congrats on implementing the Java/jQuery. That still goes over my head. xD

    • Holly

      Thank you! I think flex box is supported by most browsers now, but it’s still problematic in IE (even in IE 11). It makes development so much easier in my opinion.

  7. WOW!!! It looks so awesome! I love the look and feel of this theme! jQuery huh? Awesome!!

  8. OMG HOLLY! I love the new theme – it is really calming and lovely 😀 You should be proud of yourself, I know you were having troubles with IE (it’s rubbish ugh) but go you! It even looks amazing on my ultra wide monitor which is actually quite hard to “make it work” haha. I know I had to tweak mine lots of times.

    Well done!

    • Holly

      Thank you! I’m glad it looks good on your monitor. It’s hard to test it on so many different devices and screen sizes!

  9. Love the new look. It looks super clean. Most importantly, it is easy to read!!! The shade of blue you chose is lovely. Blue’s my favourite colour and while I usually prefer the dark shades, the shades you chose for this theme is very appealing. You did a great job with this! Kudos to you 🙂