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!
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”
Leave a Reply