Hello all,

I'm one of the participants of Season of KDE 2014-15 and my project was to redesign Planet KDE.

For the uninitiated, Planet KDE is KDE's Blog aggregator, i.e. it displays feeds from the blogs of KDE contributors on one common web platform. It renders all the content on to a single HTML file, which can be customized.

So, here's what I did. I used Twitter Bootstrap with some custom CSS to make a flat and mobile-friendly design.

This is how it looks now: http://ec2-54-159-109-66.compute-1.amazonaws.com/
Also, the old website: https://planetkde.org/

Before finalizing, I wanted reviews/ideas on how to make it better from all of you. Any suggestion would be appreciated.

It looks really clean and nice.

If I can nitpick a bit, I'm a bit unsure about justifying the text. Some of the lines risk ending up with very large spacing between the words. Unless there is a stronger control with exactly how the layout ends up, I feel it's somewhat risky to justify text.

Also, it seems that quoted text ends up with a larger font size than the regular text (e.g. check Riddell's post from 24 December). Shouldn't it at most be the same size?

Thank you for the suggestions.

Yes indeed, justifying the text can pose problems, especially with different screen sizes. I'll make it left aligned and see how it looks.

About the larger font size on quoted texts, that was intentional. I had thought of somehow giving more weight to the quoted part, so that a post can be easily skimmed through, and the reader kind of gets the context about the post. I can make the font smaller if it doesn't look as good.

Also, I was notified of a bug in the responsiveness, wherein a large link overflows the card. Should I add the option of scrolling through a card or shorten the link up by showing up the initial part and ending it with ellipses?

Looks ver nice, especially on a mobile device

For desktop use, could you maybe reduce the maximal line length? Most articeles I read suggest 50-75 characters per line, for the best reading experience.
According to
http://www.pearsonified.com/typography/
the best settings for the 14 px font you use would be:
Font Size: 14 Line Height: 23 Content Width: 554

http://baymard.com/blog/line-length-readability
http://www.pearsonified.com/2011/12/gol ... graphy.php

Another thing I noticed, the avatar images are "above" (as in z- axis ) the article but don't have a drop shadow. They should have at least the same drop shadow as the article, or stronger.

As for the scrolling / ellipses - I would vote for ellipses.

Sorry, I previously had a much nicer post, but I got logged out while typing it and lost it. -_-*

So, first! Great job! The one thing you have me thinking here is how *close* you are to following the application design guidelines, I'm going to list the changes that would get your design bang-on to the KDE visual guidelines, and a bit closer to the desktop aesthetic; Please don't mistake this as criticism, these points just get you exactly onto the Breeze style.

• You could switch out fonts from Androids' Robto to the official Oxygen font; easiest way might be to use Google Fonts.
• On the header, the two "Planet KDE" titles are a bit redundant; by putting the logo beside the smaller name in the title, you can save space.
• Also on the header, we have a new "hamburger" icon starting to go around, I swapped it out. I also added a thin blue line (similar to how windows decorations are styled)
• Maybe darken the background so the text boxes stand out a bit more.
• The dates should have a thin blue line below them; it's the style used in Breeze for grouped lists.
• Move the avatars from their "perched" position to the top-left; the avatars vary in size and I guarantee you'll have nightmares if you try to centre them exactly. Additionally, it's very space-consuming.
• The "older entries" link could be styled to look like a Breeze button.
• If you used SVG files, the theme would be resolution independant

For colours, I followed the Breeze palette, darks are #475057, blues are either #3daee9 or #2980b9, the background is #eff0f1, and the boxes are white.

Here's what it would look like with the changes mentioned;


Anyway, awesome work! Much cleaner! Keep going!

If you'd like, I can post the various SVG images (the logo, back/forward buttons, and hamburger) you could use.

@fabianr I'll surely try and re-calibrate the text, so that it becomes more readable.

@Kver, amazing! It'd be great of you could post the svgs. I'll get to the modifications right away!

I have made several changes and it does look much better than it was previously. Where can I find the KDE icon to put on the navbar? Do you have an SVG?

ranveeraggarwal wrote:I have made several changes and it does look much better than it was previously. Where can I find the KDE icon to put on the navbar? Do you have an SVG?

Nice! Here's the icons, just let me know if there's anything more you need.

https://share.kde.org/public.php?service=files&t=71a001906dea6c4165afd2a79ce50181

ranveeraggarwal wrote:I have made several changes and it does look much better than it was previously.

It really does, great improvements!
Some things that would make it look even closer to Kver's mockup and even better:

• Draw the line between header and body of the posts over the whole width and make it a bit thicker. Currently it's barely visible (at least on my screen)
• Increase the top margin of the name and date to match that between the name and the title (i.e. so that the line with name and date is exactly in the middle between the title and the top of the box)
• Move the date more to the right so that it's right-aligned with the body

Kver wrote:

ranveeraggarwal wrote:I have made several changes and it does look much better than it was previously. Where can I find the KDE icon to put on the navbar? Do you have an SVG?

Nice! Here's the icons, just let me know if there's anything more you need.

https://share.kde.org/public.php?service=files&t=71a001906dea6c4165afd2a79ce50181

I have incorporated all the changes (I had forgotten the blue accent below the navbar, it's been added now). Any other suggestions to make it look better?

colomar had some good suggestions IMO.

Also, could you change to a better font for the 'comments' bit?

I loving this!!!

Looks fantastic so far. Some quick feedback:

• The date for each post doesn't appear to be quite aligned all the way to the right.
• The padding on the top/bottom and sides are different. Maybe make them the same?
• Decrease the font size of the big date header.

Can't think of anything else. Super awesome work!

colomar wrote:Some things that would make it look even closer to Kver's mockup and even better:

• Draw the line between header and body of the posts over the whole width and make it a bit thicker. Currently it's barely visible (at least on my screen)
• Increase the top margin of the name and date to match that between the name and the title (i.e. so that the line with name and date is exactly in the middle between the title and the top of the box)
• Move the date more to the right so that it's right-aligned with the body

• Any suggestions for the line color? It's got a 1px height. I think it's the color that makes it look a bit invisible.
• I've increased the margin proportionally.
• Right-aligning the date currently gives some issues with the responsive design, I'll try and fix it.

veqz wrote:colomar had some good suggestions IMO.

Also, could you change to a better font for the 'comments' bit?

He doesn't really have control over that; Wordpress inserts it into posts on the blogs' end, kinda the way it needs to be done, too. :/

ranveeraggarwal wrote:I have incorporated all the changes (I had forgotten the blue accent below the navbar, it's been added now). Any other suggestions to make it look better?

First, I really like that you used font-based rendering for the images; I was going to mention that but I didn't want to dictate technical details. I also like the extra spacing a bit more than how I had it spaced (there's a little more breathing room).

Only a couple *very* minor things!

With the date text could you set it to text-align right? The positioning looks awkward as it is right now. EDIT: Seems you're aware of it. If you use CSS @media queries you can have it change text-alignments under certain conditions, so it can be on the right at desktop widths, and snap left under tighter conditions.

The button on the bottom looks a bit weird, here's an exact CSS pair of CSS rules that should do the trick;
.btn-mat
{
background-color: #FFF;
border-radius: 3px;
box-shadow: 1px 1px .5px rgba(0,0,0,0.2);
color: #000;
transition: all 0.5s ease 0s;
border: solid 1px rgba(0,0,0,0.2);
background: linear-gradient(to bottom, #eff0f1, #e7e8e9);
}
.btn-mat:hover
{
background: linear-gradient(to bottom, #3daee9, #1998da);
color: #FFF;
}

There's a couple colour changes I would suggest. Maybe change the quoted-text line text to #FDBC4B, and the header navigation links text to #bdc3c7.

Generally, maybe just go over the colours on the design and double-check for colours which are not in this palette;
https://techbase.kde.org/images.techbase/8/8b/Breeze_Color_Palette.png

Man, you're rockin' it though! Good work!

veqz wrote:colomar had some good suggestions IMO.

Also, could you change to a better font for the 'comments' bit?

I really wanted to do that, but apparently that thing is an img that comes right out of the xml parser. I think Wordpress puts it there by default.