Responsive Layout test

[pbryd]

Hi Guys

i thought I'd show my first couple of attempts at responsive layouts and perhaps you guys could let me know if there's any problems on your devices.

Both pages are set out for 3 widths although the difference between wide and medium is minimum atm.

First test page, single column with menu

Second test page, a 2 column layout which adapts to a single column on small screens

The second page uses responsive %s for it's padding.

 

[Edwin]

They both seem to work well for me - tested by resizing my browser to various widths and everything moves around just as it should do. Nice.

 

[pbryd]

Nice work. But why not use a responsive framework like foundation or bootstrap?

I'm all for learning if that was the reason, I was just curious as to why re-invent the wheel(?)

I've never looked into those tbh. I've always done my own coding with html and css and thought it was time to look at html5 and responsive design.

 

[killaclown]

It looks like a sunday morning well spent phil!

Works great.

 

[pbryd]

Getting experience using an open-source and industry standard responsive framework will do wonders for your CV if you were still looking to get into the industry. I know, because that's what just got me a new job.

Sounds good, let me know what you've been studying if you would through a dm

 

[martin-s]

Another option is responsejs.com

 

[retired_member34]

Getting experience using an open-source and industry standard responsive framework will do wonders for your CV if you were still looking to get into the industry. I know, because that's what just got me a new job.

Bootstrap? Is it getting that established?

 

[pbryd]

I do tend to think of myself more of a designer than a coder, and in that respect wouldn't want to spend too long studying up on something I may not need.

Of course a bit of coding knowledge should help if I was to apply for a design position.

 

[Edwin]

Here's a great resource about responsive design (just in case it's useful) http://www.adamkaplan.me/grid/

 

[pbryd]

Thanks Edwin I'll take a look.

At the moment I'm trying to find out the best way to manage the sites menu when displayed on smart phones.

 

[greg2013]

If you dev with Firefox, there's a great deal of must have developer tools.

e.g.
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
This gives you a plethora of tools - lets you resize the screen to test resolutions, outline block level elements, and shows responsive layout sizes.

And Firebug is another mus have