Re-Design 10

Google Analytics was giving me warning signals since my last re-design. Things were just going down, and it was obvious why. Before I had a blog on a front position, now I had a static html page and than a blog in a sub-folder. I also forgot to update the blog on regular bases and last post was some months ago.
I had a one month holiday to take advantage of, for planning and executing this re-design. This time, I’ve placed focus on the content – I don’t care about the design and look of things (still no Comic Sans around).
I took the time to go through all 50 posts I had at the time and rewrite them, fix spelling mistakes, add new data or simply completely trash them. Some categories were deleted and new were added, other were simply renamed.
It was quite interesting reading stuff I wrote 3 years ago – stuff that I thought could be of help to somebody and now I considered as general knowledge. I aim to post more ‘advanced’ stuff from now on.
There are about 20+ emails sent from me, to my own e-mail with code snippets, links and ideas about future posts. For the first few weeks of 2014, I’m aiming to turn those e-mails into posts posts and cleanup the inbox. So, keep checking for solutions to funny IE8 behaviors, making web sites for mobile devices, adapting websites for reading from right to left and more.
I had to consider usability for everything, as content has been placed on such a high priority. As you can see, I’m using crazy huge font-size and black on white text. There is no side bar, no widgets, no tags. All unnecessary information is taken away! My goal was to make a super easy and light to read web site. It is going to be an achievement if I get shorter average time per visit in Google Analytics, then before. Than I’ll be sure that people don’t waste their time – they find what the web sites is about, they find if it’s interesting to them and they read the posts fast without any distractions.
The web site is completely fluid. Images and videos resize down to accommodate perfect experience, on all devices. That’s done through combination of css magic and FitVid WordPress plugin. To be honest, as I write this text, I haven’t tested yet on phone or tablet, but I’ve resized my browser down to see roughly how things stack.
There is one single break-point in the design, and it’s for adapting the menu for mobile devices. But there is something more special about the navigation – it’s sticky navigation and it’s always visible on the page, no matter how further down you have scrolled. This is achieved by adding position: fixed. Yet, there are wild discussions going on in the web community if sticky navigation is really useful, or a bad idea. According to Hyrum Denney, who wrote an article on SmashingMagazine, sticky menus are quicker to navigate. I support that statement completely, as first – it makes a lot of sense avoiding scrolling to the top of the page to move around the site, secondly, the conclusions of those guys are based on research with 40 people.

Imagine typing a document in Microsoft Word and having to scroll up to the top of the first page every time you wanted to bold a word or widen the margins. Just the thought of that sounds frustrating. Most desktop software provides access to the entire navigation menu no matter what you are doing in the application. The Web browser is no different; we would find it ridiculous to have to scroll to the top of a website to access the address bar of a browser.

But on the other side, there are so many haters out there, that I just had to go through some of their arguments which seemed right. You can find out that the support of mobile devices for position fixed is terrible (I blame iOS for everything). In many browsers it’s just not following with the user when she/he scrolls, but snaps on later, or displays incorrectly (see research by Brad Frost). Nobody likes buggy web sites. May be that’s the reason why CNN, BBC and some other popular news agencies haven’t adopted sticky nav. Yet, sticky nav can be found on the official web site of Vestas or MakeBetterApps.
Another point the haters fight about is space. Space is limited when you are on a mobile device. Things get even more squeezed when you have a huge sticky nav from the top or bottom of your screen. Advertisements on mobile devices are easy to hide through clicking the X sign, but not the sticky navs – they just hunt you down, down to the bottom of the page. The guys might have a point here, but not for all web sites. The examples I saw on Kill the sticky nav by Felix Salmon were only extreme. He was pointing to web sites where the nav was more than one line-height and there was variety of colors used, to make it even more distracting.
As I mentioned previously, I haven’t tested on any mobile devices yet, so I’m not sure how buggy is my sticky nav. For the moment, I think it’s not that intrusive and is easing the navigation. What do you think – should I change it to static?
I don’t have anymore a logo and why should I have one. Logos are useful for branding of big companies, not for bloggers like me. It’s just going to be unecessary to have it hang somewhere at the beginning of the page if I’m not planning to go big. Yet, I could design something new, just for the practice, or for a new edition of my business cards.
The process: We use CMS to make our lives easier, to avoid building complex systems every time we have a new project. When we use CMS we can use ready built themes – to save time on designing and writing basic html. I decided to start off from Landscape – a free minimalist and responsive WordPress theme with top rating. It had very clean and nicely written css, nicely defined typography and it was looking closest to how I imagined my new re-design. I threw it in and made things even more minimalist, by removing some borders, footer text, posts meta text and decreasing the font-size. Making the nav sticky was an extra. Sure thing, there is more work to be done, more testing and this is not a final version. Probably there will be ML 10.5 in a month where I’ll finish testing in different devices and browser, optimize the css, bump in few more posts to reach my goal of 100 by the end of December (currently on 40 posts).

But enough, bla bla – just let me know if you find any bugs or what do you think in general about this re-design. You can still find the previous version here if you want to compare. Or see version 3 with horizontal scrolling, while I was in my second year at university.

Leave a Reply

Your email address will not be published. Required fields are marked *