Kver wrote: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.

Yep, sometimes, @media queries are all you need

Kver wrote: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;
}

Yep, the new button looks amazing! I still have a lot of CSS to learn.

Kver wrote: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

I've updated the colors. I didn't know KDE had it's own color palette. Nice!

Kver wrote:Man, you're rockin' it though! Good work!

Thanks to suggestions from all of you, this is becoming way better than it was earlier.
Do check out the updated version.

ranveeraggarwal wrote:Thanks to suggestions from all of you, this is becoming way better than it was earlier.
Do check out the updated version.

Indeed, getting better and better!
Some niggles:

• I'd use titlecase instead of uppercase on the button label
• The line between header and body is still barely visible and not over the whole width
• Now the margin above the name and date is a tiny bit too big. They're still not centered between the title and the upper border of the box

colomar wrote:I'd use titlecase instead of uppercase on the button label

Changed it!

colomar wrote:The line between header and body is still barely visible and not over the whole width

I darkened the color. I actually made the color same as the background color. I guess it looks good. Whatsay?

colomar wrote:Now the margin above the name and date is a tiny bit too big. They're still not centered between the title and the upper border of the box

I've decreased the margins slightly. I does look better

Just because it caught my attention: The donate button looks old and out of place, so https://www.kde.org/community/donations ... donate.gif should be redesigned to fix that problem. Or is that a paypal trademark problem?

Great work. On my galaxy tab portrait mode (800x1280) the donate button is moved down, on a second line which expands the header and overlays on the first post.

Maybe use the hamburger menu for anything under 900px? Also post headers do not align very well with avatar images. Maybe images cave be moved to the right so titles/subtitles are aligned better?

Thanks for your work, Planet needed a revamp especially with responsive capabilities.

tassos wrote:Great work. On my galaxy tab portrait mode (800x1280) the donate button is moved down, on a second line which expands the header and overlays on the first post.

Maybe use the hamburger menu for anything under 900px?

Yep, I was able to reproduce the problem. Anything less than a 1000px and greater than 768px falls in a state of transition (the two line issue). I'll see how to fix it without affecting the other elements.

ranveeraggarwal wrote:...
Yep, sometimes, @media queries are all you need
...
Yep, the new button looks amazing! I still have a lot of CSS to learn.
...
I've updated the colors. I didn't know KDE had it's own color palette. Nice!
...
Thanks to suggestions from all of you, this is becoming way better than it was earlier.
Do check out the updated version.

Oh! Whoa! On the quoted text, I was just talking about using the orange colour for the lines on the left; not the text. So bright! XD

Other than that, mulling it over, I would probably reduce the spacing between dates and posts to about 20px between posts/titles. I would also consider reducing the space between dates and their lines. I can't really name anything else visually, it's looking pretty sharp.

...

Onto the actual tag structure - it's a little outside the VDG purview, but I feel obligated to mention it. The tag structure could be improved; I don't expect you to upheave your work, but if you'd like to try I can only encourage you. The tag structure in the design right now is "90s style", where's there's a lot of <divs> and <spans>; HTML and HTML 5 are much more expressive, so you should look at the tag structure now. I don't know if everyone here wants me coaching you on this, but I'm willing to if you'd like.

• In general, try to use as few tags as possible for design purposes, and try to do more with CSS.
• Instead of <hr> tags always use a border attribute. <hr> is considered a 'thematic break', and hints to search engines that the content before and the content after aren't necessarily related. Generally, you use <hr> only to split two paragraphs inside of a block of text; such as chapters, scenes in writing, or steps in a recipe.
• Do not use <br> tags for spacing; use the margin and padding CSS attributes. It's difficult to try spacing a document exactly using BR tags, and different browsers behave differently. Use margins and padding instead. Leave <br> for paragraph-level writing. Also, by using CSS you're much more like to get pixel-perfect in your designs.
• Lastly, avoid using <div> and <span> as much as possible. They literally have no meaning in HTML, so search engine treats whatever is inside as 'whatever'.
• H1-H6; you're using h4, instead you should be using h1. Basically, every time you put in a new tag, start at h1, and *only* if you're in the same tag do you move to h2, h3, h4... Essentially, if you use an h2, it should be preceded by an h1 at some point.

HTML5 Doctor is a great reference and I refer to it all the time myself if I'm questioning what tag to use:
http://html5doctor.com/

In the <div> thing specifically;

• <div class="container"> could be converted to <main>
• <div class="day"> could be converted to <section class="day">
• <div class="row"> could become <article>
• Article headers would become <header>
• Dates/names in article headers could potentially be <small> or <i>
• the bottom of the page should be <footer>

One last note on tags like <i>, <u>, <s>, <b>, etc;
In HTML they no longer strictly mean "italic", "underline", "strike-through", "bold", etc. Instead, they now define emphasis and inflection; it's totally fine and encouraged in modern HTML to use an <i> tag and set its style to font-style: normal, or use a <b> tag and set it's font-weight: normal. All <b> means is that the text is a little more important, not that it's specifically bold. You want to keep the default behaviour for article text, but you can use classes to alter the styles all you want in a layout context.

If you follow that advice, I can also guarantee future websites you use will rank higher in search engines than they would have otherwise.
Hope that helps!

Kver wrote:Oh! Whoa! On the quoted text, I was just talking about using the orange colour for the lines on the left; not the text. So bright! XD

Other than that, mulling it over, I would probably reduce the spacing between dates and posts to about 20px between posts/titles. I would also consider reducing the space between dates and their lines. I can't really name anything else visually, it's looking pretty sharp.

Whoops! I've changed it now and the right border is now orange instead of the text itself
I also made a small tweak - I centered all the images. Makes it look a bit more elegant.
Also incorporated the spacing changes (will reflect on the uploaded website in a while).
I guess it's almost ready for deployment!

Kver wrote:Onto the actual tag structure - it's a little outside the VDG purview, but I feel obligated to mention it. The tag structure could be improved; I don't expect you to upheave your work, but if you'd like to try I can only encourage you. The tag structure in the design right now is "90s style", where's there's a lot of <divs> and <spans>; HTML and HTML 5 are much more expressive, so you should look at the tag structure now. I don't know if everyone here wants me coaching you on this, but I'm willing to if you'd like.

...

If you follow that advice, I can also guarantee future websites you use will rank higher in search engines than they would have otherwise.
Hope that helps!

Gosh! I realized how little about HTML5 I know. Looks like a good time to get a good book and get cracking.
Now I realize why w3schools is despised by many, use that as an initial resource, and you'll end up like this :/

ranveeraggarwal wrote:

tassos wrote:Great work. On my galaxy tab portrait mode (800x1280) the donate button is moved down, on a second line which expands the header and overlays on the first post.

Maybe use the hamburger menu for anything under 900px?

Yep, I was able to reproduce the problem. Anything less than a 1000px and greater than 768px falls in a state of transition (the two line issue). I'll see how to fix it without affecting the other elements.

Fixed

ranveeraggarwal wrote:...
Whoops! I've changed it now and the right border is now orange instead of the text itself
I also made a small tweak - I centered all the images. Makes it look a bit more elegant.
Also incorporated the spacing changes (will reflect on the uploaded website in a while).
I guess it's almost ready for deployment!
...
Gosh! I realized how little about HTML5 I know. Looks like a good time to get a good book and get cracking.
Now I realize why w3schools is despised by many, use that as an initial resource, and you'll end up like this :/

I like when I pop open your demonstration page and go "Oh! OooOOooOoh."

W3C Schools is actually a great resource; they give a lot of technical info and great examples and live demonstrations - I reference them too from time to time. I find they work best when you already have something in mind, and you just need to reference syntax or double-check yourself. I find HtmlDoctor is great when you're not really sure what is appropriate. Probably the most important thing is to make sure you refer to at least 2 or 3 resources before you cement a fact in your mind - that way you can immediately get a feel when one of the resources isn't accurate.

I generally cite Stack Overflow as my "last resort" option for more complex problems, generally for two reasons; first, sometimes you have the wrong question. Second, sometimes the "best" solution isn't the highest rated or even there. But if you've got a pickle it's a good resource.

One of the best tools at your disposal is the integrated development tools in your browser; these people live and breath web development and build the browser - so they're extremely good tools. For example, right-click on any element on a website and go "inspect element"; it will show you the HTML and CSS going into that element, and you can edit it, live! You can tweak CSS values, add new rules, and modify the tags themselves - it's great to experiment with an idea non-destructively. Also, when you're on other websites and you see something being done that you really like, you can inspect their elements to see how they did it. If you want to get really good learn the integrated development tools; knowing and understanding those, you can dissect literally anything on the web and find out how it works.

Anyway, onto the design itself the last thing I have to say is to remove the <br> tags between dates and posts, and to reduce the spacing between posts to about 20px. The post header test is also quite glitchy and going all over the place as I resize the window. The avatars are a max of 80px wide, so as long as the left-size text is 100px to the right it will be correctly aligned.

Kver wrote:W3C Schools is actually a great resource; they give a lot of technical info and great examples and live demonstrations - I reference them too from time to time. I find they work best when you already have something in mind, and you just need to reference syntax or double-check yourself. I find HtmlDoctor is great when you're not really sure what is appropriate. Probably the most important thing is to make sure you refer to at least 2 or 3 resources before you cement a fact in your mind - that way you can immediately get a feel when one of the resources isn't accurate.

I generally cite Stack Overflow as my "last resort" option for more complex problems, generally for two reasons; first, sometimes you have the wrong question. Second, sometimes the "best" solution isn't the highest rated or even there. But if you've got a pickle it's a good resource.

One of the best tools at your disposal is the integrated development tools in your browser; these people live and breath web development and build the browser - so they're extremely good tools. For example, right-click on any element on a website and go "inspect element"; it will show you the HTML and CSS going into that element, and you can edit it, live! You can tweak CSS values, add new rules, and modify the tags themselves - it's great to experiment with an idea non-destructively. Also, when you're on other websites and you see something being done that you really like, you can inspect their elements to see how they did it. If you want to get really good learn the integrated development tools; knowing and understanding those, you can dissect literally anything on the web and find out how it works.

Learning how to use HTML/CSS is right next on my to do list. Also, I found HTML Doctor to be a great resource. I never knew so many tags existed and their purpose.

Kver wrote:Anyway, onto the design itself the last thing I have to say is to remove the <br> tags between dates and posts, and to reduce the spacing between posts to about 20px. The post header test is also quite glitchy and going all over the place as I resize the window. The avatars are a max of 80px wide, so as long as the left-size text is 100px to the right it will be correctly aligned.

Removed the <br>'s and put margins instead. Also, reduced the space between posts to 20px. Found a fix for avatars (Made them responsive ). How does it look now?

So myself and Thomas were going over and between us there's about 4 final points we'd like you to look at;

• The line separating the post headers and the conten should be darker; Perhaps #BDC3C7
• The blue line on the header could maybe be 2px thick instead of 1px.
• The links in the header should be title-cased instead of all-caps (remove the text-transform:L uppercase rule)
• The donation button could be brought more in-line with the remainder of the style; Recycle the style used in the prev/next buttons, but instead of the grey gradient use #FDBC4B as the background colour so it still stands out.

Here's the CSS for the donation button; You'll want to remove the image, and add a class or ID to the link element. I used id="donateLink"

#donateLink
{
border-radius: 3px;
box-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.2);
color: #000;
font-weight: bold;
transition: all 0.5s ease 0s;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 20px;
background-color: #FDBC4B;
margin-top: 8px;
background-clip: padding-box;
}

#donateLink:hover
{
background-color: #1A86DB;
color: #FFF;
}

Kver wrote:So myself and Thomas were going over and between us there's about 4 final points we'd like you to look at;

• The line separating the post headers and the conten should be darker; Perhaps #BDC3C7
• The blue line on the header could maybe be 2px thick instead of 1px.
• The links in the header should be title-cased instead of all-caps (remove the text-transform:L uppercase rule)
• The donation button could be brought more in-line with the remainder of the style; Recycle the style used in the prev/next buttons, but instead of the grey gradient use #FDBC4B as the background colour so it still stands out.

I feel the donate button looks a bit out of place. How about I increase the horizontal padding and instead of transitioning to blue, it goes a shade darker (orange)?

Not exactly design related (tho it might actually solve some issues), have you tried to validate the page?

http://validator.w3.org/check?verbose=1 ... aws.com%2F

ranveeraggarwal wrote:I feel the donate button looks a bit out of place. How about I increase the horizontal padding and instead of transitioning to blue, it goes a shade darker (orange)?

Yeah, I would do that; there should be a few shades of orange in the palette I linked to earlier; pick whatever looks good. I would also bump up the font-size a bit. Lastly, .navbar-right has a -15px margin on the right; if you get rid of it the side of the button will line up with the article containers more nicely.

Beyond that unless anyone else points anything else, visually, I'd say it's done!