Jump to content

Archived

This topic is now archived and is closed to further replies.

Grandioso

My No Will No Skill blog/website [responsive/HTML5]

Recommended Posts

Hi guys.

 

I created a blog like half a year ago called No Will No Skill. Now I want to transform it into a little different concept - there are going to be article/video and all kinds of recommendations to other webpages besides my own (and possibly others') blog posts.

 

I want this website to be really awesome in terms of design, SEO and overall UX.

 

So I created this responsive black&white design. On mobile devices there's only one row with the control bar hidden - the user can display it with a simple button click. On slightly bigger screens, the control bar is shown to the right with one column of content to the left. Then on wide screens, there are two columns of content, the right side is using inverted colors and the heading is aligned to the right. You can check all three cases just by resizing the browser window.

 

Here's the design: http://test.no-will-no-skill.com/

 

The widths for triggering the designs will change a little bit, especially the third one will need to be set to higher value. This is just to be able to view all three on my laptop screen.

 

I need a little help with two things:

 

- the third case - wide screens. I'm not sure about it. I would like to make it so that the posts on the right are directly underneath each other, not depending on the height of the post on the left side. But I don't know if it's possible without putting them into different divs (which I don't want). I would like to do it with CSS :nth-child, like it is now.

 

- the control bar - I want a different effect, but I don't know how to do it. It should look like it slides down from the menu bar and gradually pushes down the site content. Now it just appears and it doesn't look that smooth.

And there's a little bug - when I hide and show the control bar in the mobile view and then resize the window, it doesn't show anymore. This could be a big issue when going to landscape mode. How do I fix it ?

Share this post


Link to post
Share on other sites

Its very hard to read and repetitive with the logo in every post. I would use a font much easier on the eyes for copy text and the script font only for headers/logo. The responsive part works great.

Share this post


Link to post
Share on other sites

Yeah, the font looks beautiful on my HTC Evo 3D default Android browser, but unfortunately it looks horrible in Opera desktop. Do you have any recommendations as to which (free or cheap) font would work with the design ?

Share this post


Link to post
Share on other sites

I know, because it's HTML5, heh. It'll put in a script that allows styling for browsers that don't support HTML5 + some kind of message that they should upgrade their browser.

Share this post


Link to post
Share on other sites

There's no solution for responsive CSS in older IE versions, but you can use still use html5shiv to render it correctly for desktop size resolutions.

 

Also a nice tool for testing responsive design, without having to manually resize the browser:

 

http://responsive.is/http://test.no-will-no-skill.com/

 

The font looks awful on Chrome/Safari desktop. The whole site needs some colour if you ask me.

Share this post


Link to post
Share on other sites

Thanks for the tips guys. I changed the font, but cannot check it in all browsers ATM (I only have FF and Chrome and a shitty limited net connection). Let me know if it looks allrite.

 

Also, please tell me what do you think about the copy in the "About" section. I tried to fill it with keywords and put it on the very top of the page hoping to get the best possible SE rankings.

 

What else do you think I should do in terms of SEO ?

 

I want to finish the design today so I can start building the WP theme tomorrow.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.