Updated design: v1.2 – ‘Flores’

I have published a new design to my blog! I decided to name it Flores. It was an interesting choice, but given that I named the previous two designs Bermuda and Atlantis, after two ‘lost’ and mysterious sorts of places, I felt that Flores was a good fit. The island of Flores makes Wikipedia’s list of non-fictional lost worlds, where remains of short (a metre tall) humans and unusually small elephants were found. I find it interesting that the island is located in Indonesia, which is part of my heritage, but I had never heard of it before.

Colour and Typography

This design boasts the same teal and coral red colours, but the main change is the switch from a two column layout to a single column one. I found that – as I usually do find, actually – I did not use the sidebar as much as I had anticipated. It became more of a distraction. The homepage now serves as more of a welcoming preview of the recent posts, and individual posts have more finesse with a larger heading and images standing out slightly beyond the side margins of the content. More often these days we link to individual articles, so I thought, why not let them have all the attention? That’s why I chose to make them big and bold.

I chose to go with Fira Sans as a global font – you may recognise it as Mozilla’s official font. It was the only font that I thought went well for every component. Not too round, not too skinny, and not too light. Only the error pages have the Karla font I used to use in the navigation. I do love that font, but it was time for a change.

Main navigation

The navigation between post listings and posts has quite an interesting look on larger screens. I made small arrows in circles that display a panel when hovered over. I added what seems to be a subtle animation, but in reality it was quite a challenge to get all the individual parts of the component to work the way I wanted. I definitely spent too much time on it but I am pleased with the result.

Quite a bit of tweaking was done with the navigation to make it look a bit better on smaller screens. I did not like the way I did it previously, requiring the menu to be opened before navigating to another page. I thought about only having a few links visible on smaller screens, but that meant I had to cut down on navigation items. It was something I was thinking about anyway, I guess, so I just made all the links visible on smaller screens.

Search bar

The search bar was something I usually put in the sidebar but it needed a new spot for a single column layout. I wanted to make it a full width one like the one I did on Liz’s blog, but it didn’t look as subtle as I wanted it to because of the colours. I ended up wedging it next to the navigation links but I am not completely happy with it. I believe the search bar should be somewhere prominent.

Footer

The footer was quite fun. Following along from what I have on my personal website (it is really just a one-page CV/resume), I wanted to include my funny ‘footers are overrated’ colophon. At the same time I wanted to add some humour and not just a coloured bar with text, so I added a random quote. This is something I honestly have not done since my community-contributed projects What is Love? and Love Is…, which displayed user-submitted quotes on rotation. That was back in 2010, I can’t quite remember. Around the time, it was common for me to include song lyrics on rotation as my designs were typically inspired by music. This time, on Flores, it is really just a handful of things I have tweeted or probably said out loud.

Browser support

I chose to drop support for anything below IE10, especially since Microsoft does not support updating those old browsers. Most of the people who visit my blog use Chrome, and very few use IE at all. For this reason I used a bit of flexbox in the layout. ;)

Other improvements

Emoji

Something external but something I found could be embedded into the theme was emoji. I mentioned some time ago that Nick had helped me convert my database to the correct format so that emoji could be used. Unfortunately during a server change, the database was not moved with the correct format in mind, so all the emoji turned into question marks.

I found that I could create a function to simply replace pieces of text in my posts and comments with emoji, so I allowed simple keyboard shortcuts such as :) to translate to :) and :( to translate to :(. It’s not completely bulletproof though, as some words trapped between punctuation marks might unexpectedly turn into emoji, but for the most part, it works with a handful of combinations that I have added by hand.

Edit: It is worth noting that emoji appears differently on different computers (Apple has the original coloured ones, Windows has it appear the same colour as the text), and that some ‘newer’ emoji (for those who are familiar) won’t display on Windows. It’s something I can change if it ever becomes a huge problem. I was simply hoping to avoid using a plugin for emoji.

Tags

I converted all the categories of friends’ names to be tags instead, for example Lilian. I haven’t changed Nick to a tag instead of a category yet though… :P I also made sure a description was visible on the tag landing page.

On GitHub

I have actually been working on this design since late last year. It was just sitting in the works, really. I didn’t think it would take that long to do but there were lots of little bits and pieces that I came up with, just when I thought I was done.

I have been maintaining version control with Git but the hilarious thing is that I didn’t want to push all 50 of my commits related to this theme until today, just in case someone was snooping. Either way, you can checkout the source code for this theme on GitHub. There are still some things hard-coded, I know…

Bugs

There are probably bugs, and I will not be surprised if there are bugs on old pages and posts. I’m sure very few people will look at those, though. I’ve already spotted the checkbox in the comment form… but let me know if anything else needs fixing. :)

I was going to put some screenshots of the various changes but I figured it would be better for a user to experience it. All the changes are there, after all!

Comments on this post

I think some of your emoticons are not loading on my end. I’m getting an “empty” box here and there, so I’m assuming those are supposed to be emoticons. Or maybe emojis? Just wanted to let you know.

Otherwise, I think your new layout is really nice! Love the tweaks you did here and there. I think it makes sense to get rid of the sidebar if you find yourself not using it or finding it to be a distraction :)

I really do like how you condensed and simplified things. Your layout is simple, but elegant, and it’s clean. My main thing is legibility, and I’ve no problems with that! :D Lovely job, Georgie!

I’m also getting “empty” boxes for several of the emojis/emoticons, but this started before you [Georgie] changed your theme. I just thought it was normal.

‘You know you’re in Indonesia when you see people’s car brake lights constantly going on and off.’

That was my randomised footer quote. LOVE it :P
I had to look up ‘Flores’, never heard of it either. And it was interesting reading about some of the other ecologically diverse and isolated regions of the world, like Socotra in Yemen. Amazing :O I would love to go there.

I like the new design. The previous post thingy is cute! I seldom use sidebars – if I want to search for something I’ll use the search, or check the Archives. I nearly always use single column layouts on my own websites :)
So, big tick of approval here ;) Not that you need my approval :P I’ll let you know if I come across any bugs!

I haven’t noticed any issues with the site, but if I do I’ll be sure to let you know. :)

I really like the buttons at the side for navigating to other posts, and I think they’ll be super handy.

We are dropping support for IE9 and below at work and the level of excitement in the meeting room when we were told this was happening was ridiculous. Nerds, eh?! But seriously, flexbox is going to make our lives so much easier.

I’m working on a new layout for my blog and I’m putting all my web development skills to the test. I feel slightly mad for spending 7 and a half hours a day at work building websites, and then going home just to do more coding! But I wouldn’t do it if I didn’t love it. :)

Looks rather nice! Yay teal colors!

And its interesting to read about everything you did!

Actually, ignore my comment response to Tara. >.< I was in search of the comment box because I usually have a post open in one tab and the comment box in another, as I’m not the greatest at reading comprehension, and I first scrolled to the bottom. :s Oops. (And I was also wondering if anyone else had trouble with reading the text, but I see that’s just me.)

Overall, I think this theme looks nice!

I think it’s cool how you make your theme available on Github, too. I’m getting back into TCGs a little, and I’m going to be putting many files on my own Github account (excluding the cards, of course), because I’ve made custom hacks, addons, etc., and am so frequently asked about how I did something TCG-wisE. >.< Just seemed/seems much easier than using Pastebin all the time. :p

I’m glad you decided to keep the same color scheme – I’ve grown to associate these colors with your blog! Everything looks very clean, so I really like it! I really like the older post buttons, which I don’t comment all the time, but I read all of your posts, so those will come in handy if I miss one! Great job with the new design!

It really surprises me when people still use Internet Explorer, so it’s really irritating at work because the software our company uses ONLY works in Internet Explorer. Drives me and all our customers crazy!

Nice new layout. I don’t think I see any emojis? Oh well, I still love the colors of this layout <3

I suppose you might be seeing the black-and-white coloured emoji on Windows? I’m still poking into other solutions to have it look like the original Apple Color Emoji, but I’m afraid that any plugins I use might be too hefty. I remember a time I just chose not to use any kind of emoticon at all!

Looks good, Georgie! I love the color scheme, mainly because I am using a similar variation on my upcoming site, so I might be a little bias. ;) I also really like how you walk through all the different things that got changed, especially the bit about browser support, because I am too not giving a f***k about anything below IE10, haha!

Love how clean this design looks! I think that’s neat that you kept the same color scheme and the theme of “lost” islands. This teal color is both soothing and eye catching :) I actually like the positioning of the search bar in the navigation. Sometimes full width search bars are… too wide? They end up looking like a divider of sorts instead of a search bar, so my eyes often skip over them.

My work chose to drop IE10 a while back too. We looked at the stats, and way too little people were using it. It just wasn’t worth the time to support!

The arrows on the left and right are very nifty!

I’m digging this layout a lot! It is timeless and elegant and I don’t think I would get tired of seeing it. As always, you do wonderful work. <3

The only thing that looks iffy on my end is that I see unfilled squares instead of the emojis. (Currently running Mavericks.)