Grandioso Posted July 17, 2012 Share Posted July 17, 2012 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 ? Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/ Share on other sites More sharing options...
cmgweb Posted July 17, 2012 Share Posted July 17, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362198 Share on other sites More sharing options...
KevinM1 Posted July 17, 2012 Share Posted July 17, 2012 Yeah, that font is horrid. Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362222 Share on other sites More sharing options...
Grandioso Posted July 17, 2012 Author Share Posted July 17, 2012 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 ? Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362228 Share on other sites More sharing options...
cmgweb Posted July 17, 2012 Share Posted July 17, 2012 fyi it doesnt work in IE at all Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362240 Share on other sites More sharing options...
Grandioso Posted July 17, 2012 Author Share Posted July 17, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362242 Share on other sites More sharing options...
Adam Posted July 17, 2012 Share Posted July 17, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362257 Share on other sites More sharing options...
Grandioso Posted July 18, 2012 Author Share Posted July 18, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265815-my-no-will-no-skill-blogwebsite-responsivehtml5/#findComment-1362476 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.