RSS

Responsive Layouts

by mrqwest

This is my first post on 12412, and its about responsive & fluid layouts in web design.  I’ve not really played around with fluid layouts in the past. I’ve tended to stick with pixel widths purely because I *thought* I had greater control but the past year or so, I’ve come to realise that is certainly not the case.

Fluid layouts adapt and change the layout of your site dependant on the size of the viewport /device your using.

So in my first month of the 12412 project, I’ll be learning all about responsive layouts and will be applying my knowledge to my own personal site (mrqwest.co.uk) which I have recently stripped bare of it’s previous pixel-based grid layout and design.

I’ll come armed with my iPad loaded up with some choice ebooks including ‘Responsive web design‘ by Ethan Marcotte and ‘Adaptive Web Design‘ by Aaron Gustafson. Additionally, my team mate Paul Adam Davis recently wrote a really nice article on responsive web design for the ‘12 Devs of Xmas‘ which will help in my learning too!

 

Units

First things first.  How will I be making my layout responsive? Percentages are your friend.

I’m setting the width of my body tag to 90% and centrally aligning the tag using margin:0 auto;. This means my body tag will fill 90% of the browser window; regardless of whether the browser is full screen or only taking up a quarter of the screen.  Setting to the width to 90% also gives the body some breathing room and ensures that any text or content within doesn’t run right upto the edges.

This looks great on a mobile device but looks extremely odd when viewed on a large desktop screen. The line lengths of text are extremely long and uncomfortable to read so we’ll want to reduce the line-lengths.

I’ve done this by setting a max-width on my body tag. I’ve set this as max-width:960px;. This means that the content area will take up either 90% of the screen width until it hits 960px wide and then it’ll stay at that width. This gives me an element of control over my design at larger screen sizes.

I know I can take this even further by changing my layout for larger screens using media queries but I’ve yet to tackle that so that’ll be saved for my next post.

For a start though, I’ve set up my site to utilise a linear, yet responsive layout. It works nicely on mobile devices, tablets, desktops and *should* work well on almost all internet enabled devices using up to date browsers & technology.

6 Responses to “Responsive Layouts”

  1. Clive Walker - January 6th, 2012 at 13:04

    Just a quick comment on setting max-width as pixels. You could consider using ems for this (and other dimensions) which leads into an elastic layout (has some advantages for users who resize text size).

  2. mrqwest - January 6th, 2012 at 13:15

    Ahh, yes! Good shout Clive. For some reason, I was thinking that if I set the max-width as em’s, it would resize along with the browser, but indeed that isn’t the case. I’ll do a bit of testing and update the post.

    Thanks!

  3. Phil Wareham - January 6th, 2012 at 16:18

    If you are going down the em route for sizing, make sure all fonts are em sizes and relative to body. So for example 16px body is 1em and 12px is 0.75em.

    The number 16 is a great composite number – it can be divided by any number lower than it and still give a manageable result (if, say, you wanted 10px footnotes that would be 0.625em, or 11px footnotes 0.6875em, 32px headers 2em, 24px headers 1.5em, etc). Then using media queries you can simply bump up the body font size where you get to a certain width and all those relative-sized fonts will follow suit. For example change body font to 18px (1.125em) at > 960px screen width and every other font size scales up nicely too.

    16 is also divisible by 320, 640, 960, 1280 to give you useful em measurements for your various device screen sizes.

  4. mrqwest - January 7th, 2012 at 09:25

    Thanks Phil, it’s much appreciated :)

    I’ve been using em’s for font-sizes for a while now and it does make life a lot easier as opposed to px sizing. You’re right though, 16 is a great number for responsive design as you’ve pointed out in your examples.

    I used to go for the easy route and specify body {font-size:62.5%;} in my CSS so that 1em would become 10px, purely for ease of use when sizing other elements; 2em = 20px etc. but I stopped using that practice a while back.

  5. aprillins - January 8th, 2012 at 06:58

    I think fluid layout becomes more important day to day. FYI At page 382 in Pro HTML5 and CSS3 book there some explanation about fluid layouts. So, now we have to learn about this topic more serious I think…. I read Clive’s website and found precious information related to fluid layouts one of them is http://getskeleton.com/

  6. Ike - January 20th, 2012 at 04:47

    I certainly knew about nearly all of this, but never the less, I still thought it turned out valuable. Great job!

Leave a Reply