Upcoming Roe Designs Redesign

[ronaldroe]

Have a look and see what you think. While you're at it, go ahead and resize your browser window. I added some media queries (which do not yet work in IE below 9).

None of the links work yet, and the content is laid out like the blog page will be. The content area for the main page will look similar, but not quite like it is here. Also, the empty block to the right will be the sidebar.

Finally, there are media queries for mobile browsers. I know how it looks on iPhone, if you don't mind, please give it a look on others.

Thanks.

 

[PixelPusher]

Clean design. Dig the colors. I didn't see too much change with the media queries? The width on the paragraphs or P containers is set too wide for an iphone (480px wide). I get a horizontal scroll bar. Also I would have the main menu wrap under the logo? and maybe under the search bar?

One other thing, on your dates for articles, how about setting the month to all caps? You use caps in the menu and logo , plus it would set the month off from the day.

 

[ronaldroe]

Thanks for the input. Did you actually try the layout on your iPhone? There's a separate media query, max-device-width, which is specifically for mobiles, and works on my iPhone like a charm. I'll take your other suggestions into consideration

 

[PixelPusher]

Thanks for the input. Did you actually try the layout on your iPhone? There's a separate media query, max-device-width, which is specifically for mobiles, and works on my iPhone like a charm. I'll take your other suggestions into consideration

Ahh i see, no I did not try on an iphone I just resized chrome to iphone params.

 

[Absolution]

Clever resizing change! I notice after resizing down past a certain point though the navigation gets jumbled.

 

[ronaldroe]

Clever resizing change! I notice after resizing down past a certain point though the navigation gets jumbled.

Yeah, don't know what to do about that, but you have to resize super small.

 

[Absolution]

Yeah, don't know what to do about that, but you have to resize super small.

Would this property help you out?

http://www.w3schools.com/cssref/pr_dim_min-width.asp

 

[irrra]

On my iphone does not work ((

 

[PixelPusher]

Yeah, don't know what to do about that, but you have to resize super small.

You can change the layout of the menu once it hits that media query param. The reason your menu is getting a bit jumbled is due to the floating. Maybe change the style of the links a little? Ron take a look at this article by Ethan Marcotte. It's worth bookmarking. Responsive Web Design

 

[DHDdirect]

The orientation addition to media queries is an interesting feature. But with all these nice changes I'd still probably go with something like Tera-WURFL because of browser compatibility and you can retrieve so much more device information if required.

I'd recommend to just strip everything down to a text based site (and maybe some basic graphics such as logo) after you get to that point where the screen width is too small and stuff starts to jumble.

 

[ronaldroe]

Would this property help you out?

http://www.w3schools.com/cssref/pr_dim_min-width.asp

*facepalm* I'm a little embarrassed I didn't think of that myself. Worked like a charm.

You can change the layout of the menu once it hits that media query param. The reason your menu is getting a bit jumbled is due to the floating.

I could, but I'm not sure I need to cater to non-mobile sizes that small. 450px for screen is quite small.

Maybe change the style of the links a little? Ron take a look at this article by Ethan Marcotte. It's worth bookmarking. Responsive Web Design

Great article. Love ALA.

 

[Phreaddee]

looks good on android as well.