A new appearance

Posted by | Comments (3) | Trackbacks (0)

Yay, Refining Linux got a face-lift!

This blog has now been up for a good one and a half year and nothing has changed much since it started. Now it's time to give it a redesign (if you ask me, this was long overdue). While the main appearance stays the same, the details have changed significantly. Let me walk you through the new goodies.

Responsive design

The most awesome feature first: the whole design is now completely responsive and can be viewed at any size. The old desktop-only design has been replaced by a brand-new flexible design for any kind of device, be it a small smartphone, a bigger tablet or a giant 30" display. Refining Linux has it all.

If you like, you can test this. Just resize your browser window and see how great the new design adapts to the new width. The minimum size I consider looking well is about 240 pixels, but there is no upper limit. It just might start looking a bit ridiculous if you project a tiny page onto your 5k display wall. wink

The new layout looks great on both large and very small screens such as mobile browsers.

Nicer typography

Although Georgia and Verdana are not the worst choices I made in my life, they don't look very pretty. They're old veterans of the web-safe fonts battalion and have gotten a bit long in the tooth. Nothing against these fonts in general, but it was time for something different. I mean, we live in the age of web fonts, don't we?

The new choices are Clarendon Paint and Aller, two fresh fonts for the new look and feel of Refining Linux. I like both and think they support the overall painted appearance.

The Refining Linux typography has changed to a heading font with a painted look and a cleaner body text font.

Improved Header

Not only the body has been refurbished, also the header has been pimped. It was actually the last thing I took care of, but that doesn't mean it's not important. It is. Our little painting Tux has become a bit more lifelike, the background painting a bit more realistic. I also took care of the main menu. It got some more detail, less straight edges and some subtle CSS gradients for the hover effect.

In general I haven't modified much in the header, but again, the details have changed. It's perfectly possible that some things in the header might still be tweaked from time to time, but for now I leave it as that.

The Tux header image has got some more fine detail as well as the navigation links and the header background.

Redesigned comments section

The comments section has especially been taken care of. It looks very different now and much better in my opinion. The speech bubbles make a lot more sense this way and the overall look is much cleaner and more pleasing to the eye. I hope you like it as well.

The amount of indentation has grown a bit with the redesign, so I have limited the maximum number of indents to four (plus the root level, i.e. five). Comments already being submitted at a higher nesting level retain their position in the database but their display is linearized at the fifth level.

Also the comments form (and the contact form as well) has been redesigned slightly. It also looks a lot cleaner now and I put in some nice HTML5 form validation features there (more on that in a second).

The comments section has been redesigned completely, avatars are now next to the comments with speech bubble beaks pointing to them. Also little shadows have been added to give the comments more depth.

Better syntax highlighting

The syntax highlighting has much been improved. Instead of SH_JS I'm now using Highlight.js which gives me way more accurate highlighting and particularly more control. Especially for the last Advent series I created a special ZSH highlighting scheme. I couldn't really do that in SH_JS without having to learn GNU Source Highlight (I'm too lazy for that).

The new color scheme for the syntax highlighting is based on Ethan Schoonover's famous Solarized theme. Personally I don't like Solarized too much for my editor (the colors are too muted to my taste), but for the website, I believe, the bright theme is great.

Yes, there are still some glitches here and there in the highlighting, but I guess I will be able to fix them over time. The highlighting as it is now is already tremendously better than it was ever before.

The syntax highlighting has got a more suble and muted background color, a nicer color scheme as such and much more precise highlighting rules.

HTML5 rewrite

The whole page has been rewritten in HTML5. This wasn't necessary, but I did it in the process of making the whole thing responsive. It now uses semantic HTML5 markup and of course also goodies like HTML5 input type validation for the comments form, a new Canvas tag cloud (replacing the old and ugly Flash tag cloud) and much more.

The tag cloud, by the way, should be completely accessible as it is based on a normal list of links. Users with very small screens, touch based devices or disabled JavaScript will get that version instead. Also screen readers should be able to access the fallback version.

The HTML code now consists of semantic HTML5 elements instead of a large div soup.

Better legacy IE support

Although I don't care much, a nice side-effect of the responsive design and its “mobile-first” approach is that the support for IE6, 7 and 8 is much better now. IE9 renders everything fine and just lacks support of some minor things such as gradients without SVG. IE8 and older, however, does horrible things to the layout, especially with the new unknown HTML5 elements which I can only get to work with JavaScript. But with the mobile fallback and a few minor fixes I got a more or less decent but at least working version for old IEs. With JavaScript enabled it looks a little less horrible, with JavaScript turned off a little more. But overall it's all working and the two IE users I have will get a very rough but usable basic version of the website (actually, it's a bit more. I have about 7-8% of IE users here of which about a quarter uses IE 9 or above. In December the IE rate was even as low as 5.7%).

Users of old IEs still get a big warning that their browser is outdated, but the overall visual experience has improved a little in those browsers.

Enjoy!

I hope you enjoy the redesign as much as I do. If you like, you can help me a little by doing some browser testing. Although I have tested this on Linux and Windows in many browsers, there might still be some glitches here and there. If you find some, please let me know.

Have fun! smile

Trackbacks

No Trackbacks for this entry.

Comments

There have been 3 comments submitted yet. Add one as well!
onli
onli wrote on : (permalink)

It is indeed a beautiful design. I like especially how the checkboxes in the commentarea are places. Good work!

Is it based on 2k11 or did you do it all by yourself?

Janek Bevendorff
Janek Bevendorff wrote on : (permalink)

Glad, you like it.
No, it’s not based on 2k11, I made it all myself from scratch and I also implemented things in the template such as real nested comments up to a certain level (or infinitely nested if I want).

custom essay writing service
custom essay writing service wrote on : (permalink)

I really liked your article , your article is very petrified me in the learning process and provide additional knowledge to me , maybe I can learn more from you , I will wait for your next article, thanks.

Write a comment:

HTML-Tags will be converted to Entities.
Textile-formatting allowed
Standard emoticons like :-) and ;-) are converted to images.
Design and Code Copyright © 2010-2017 Janek Bevendorff Content on this site is published under the terms of the GNU Free Documentation License (GFDL). You may redistribute content only in compliance with these terms. tweetbackcheck