Jump to content

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


Grandioso

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 ?

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.