Less darkness, less clutter, more responsiveness
Sep 21, 2012 (about 7 months ago)
For a long while, whenever I had the misfortune to look upon my own website, I found myself thinking, “Urgh, it’s a bit dark.” Having such thoughts about my own website was not ideal, so, three days ago, I set about redesigning it. The redesign is now live. For posterity, I present you images of the old design and the new design.
Regarding the process, the actual coding probably took about a full day. The procrastinating over whether to actually perform a redesign of my existing Whird instance, or switch to something more mainstream, such as WordPress, took a lot, lot longer. In the end, I came to the conclusion that Whird serves its purpose quite well, so I decided to stick with it and give my site’s design a bit of a makeover.
Interestingly, or not, when I decided that a makeover would suffice, I only had a few ideas as to what I wanted the design to achieve. I wanted:
- less darkness
- less clutter
- more responsiveness
With this in mind, I completely skipped the creation of any design mock-ups and simply attacked the existing CSS. The first job was to display:none; on every element outside of the main content, including my natty logo, navigation menus and sidebar content. The second job was to reverse the colour scheme. With these two tasks completed, I had already totally changed the site’s design and mentally, I was halfway to achieving my goals.
I was now faced with what was essentially, a very simple design, something akin to looking at a document within an office productivity suite. To be honest, if it was not for the need to have a means of navigating my site, I might have been tempted to leave it like that. But, like all good websites, I really did need to reinstate the navigation menu. It was then, that I decided I could also reinstate my site’s sidebar content, with the help of some jQuery scripting.
Having recently obtained a new Android phone 1, I was inspired to iconify 2 the site’s main navigation menu and use jQuery to help toggle the visibility of my site’s existing sidebar content. I am quite happy with the result and I think I have managed to remove the clutter, but also improve usability, and all with minimal disruption to the existing code.
Finally, I am still working on the responsiveness, but I have implemented the following CSS media queries, which I think should cover most screen sizes and devices.
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
@media only screen and (min-width: 960px) {
/* Style adjustments for viewports 960px and over go here */
}
You know, back in the day, the web used to be so simple!
Anyhow, the redesign is complete (bar the usual tweaks and titivation) and I am quite happy with it. If I have skipped over anything and you would like to know more, or you have any comments or constructive feedback, please leave a comment.
Footnotes:
-
A Samsung Galaxy SIII, it is like carrying the future around in my pocket (or it would be if Three pulled their fingers out and issued a Jelly Bean update). ↩
-
Glyphish Pro icons, as used by the likes of Google, Twitter, Facebook, Apple and Cern (which is really what sold them to me!) For an unlimited license, you can purchase them for $25, which IMHO, is an absolute bargain. ↩
18 responses to “Less darkness, less clutter, more responsiveness”
Add your comment
Use the form below to add your comment. Markdown syntax is available. Note, all comments are moderated.
Sep 21, 2012 (about 7 months ago)
I think it works very well, and I have to say the font size, which is quite bigger than what most sites default to, is quite nice. A happy #! user from France.
Sep 21, 2012 (about 7 months ago)
@MekkaGodzilla, you noticed the font size, good. I did mean to mention the increased font size, but must have forgotten. The font size is linked to the media queries for browser/screen width and reduces as the screen gets smaller. I know preferences for font sizes are subjective, but I quite like the larger fonts, I find them easier to read. I also think they are proportional to the design. Thank you for your feedback.
Sep 21, 2012 (about 7 months ago)
The redesign looks fantastic on my android, and the iconified navigation links at top are very minimal in terms of screen real estate on a 4” display. Looks great!
Sep 21, 2012 (about 7 months ago)
Very nice, indeed! I think the background could even be a bit brighter and the font a bit more “classic”. Also don’t really like the submit-buttons.
Will the new layout be included with a Whird-download? Would love to play around with it.
Sep 21, 2012 (about 7 months ago)
@dos, “classic” as in serif? Also, how much brighter are we talking? Give me a hex value and I’ll give it a try. Regarding the buttons, I am not sure about those either and I might revisit them.
Regarding including it in Whird, I am not sure yet. I have just finished moving the code from my old bzr repository into git and I am ready to start working on it again. The default themes could definitely use a makeover, but it is finding the time.
Sep 21, 2012 (about 7 months ago)
Congrats on the new site design. I think it works well, especially for my ageing eyes!
Sep 21, 2012 (about 7 months ago)
Hmm, I am really not an expert in design. but I find the color of the text input box where I am writing now quite pleasant. maybe F5F5F5 or a bit more “sandy” F3EFE0. But it’s hard to tell when you can’t try it. Concerning the font I always enjoy Georgia which is very nice to read on light dark backgrounds.
Sep 21, 2012 (about 7 months ago)
@neil, my eyes are not getting any younger either ;-)
@dos, regarding:
Have you tried Firebug for Firefox? Or Google Chrome’s built-in developer tools? Either will allow you to modify a site’s CSS on-the-fly. I use Firebug all the time and I think I would struggle without it.
Sep 22, 2012 (about 7 months ago)
Hi
I like the new look, much easier on the eyes, on both my phone and pc. (Although that could indicate a need for new glasses and/or less beer)
If the feedback on this is positive would the new look be extended to the #! site and forum too?
Many thanks for all that you have achieved with #! - a satisfied user.
Steve
Sep 22, 2012 (about 7 months ago)
Hello,
I love your originality of your design and your pick of colors for your blog. I created my own design too, for my Homepage with cakephp.
Sep 22, 2012 (about 7 months ago)
@Steve, thanks, I am glad you like it. Regarding extending the design to the #! site, it is tempting, but no, I don’t think so. That said, I am working on making the #! site more usable, so some elements might make an appearance.
@Jojo, nice work. I have never tried CakePHP, but I have heard good things. I should probably take a look.
Sep 24, 2012 (about 7 months ago)
I saw your post on Planet Openbox and agree with your arguments regarding mobile navigation. Your site is completely readable in my Galaxy Y (320x240 resolution). I will make some changes on my website, to make it clearer.
Cheers!
Sep 25, 2012 (about 7 months ago)
Nice designs, change and explanations corenominal.
It looks great
Cheers
Oct 5, 2012 (about 7 months ago)
@corenominal: What font are you using here? It’s awesome :)
Oct 5, 2012 (about 7 months ago)
@SabreWolfy, the font is PT Sans. I discovered it a while back and it has become a personal favourite. I think it is kind of funky, yet not cheesy, if that makes sense. It is available via Font Squirrel and Google Web Fonts.
Oct 5, 2012 (about 7 months ago)
@corenominal: How fracking awesome is the Samsung Galaxy S3? I have one too and I’m loving it! :) Also on ICS 4.0.4 at the moment. It’s luxurious and smooth and powerful.
Oct 5, 2012 (about 7 months ago)
@SabreWolfy, aye, it is a brilliant phone and I love it.
Oct 25, 2012 (about 6 months ago)
Just to say that the redesign is wonderful, clearer and simpler. But… I find the font too big, on a 24”, 1920x1080, 92dpi. Very nice on my Samsung Galaxy Note, tough.