Fluid layout! Best practices

HTML & CSS
1

I am looking for some good sources/tutorials for a fluid layout that serves, both, desktop and mobile devices. For desktop I would use a percentage based layout in combination with max- and min-width e.a.


#wrapper {
	width: 70%;
	max-width: 1200px;
	min-width: 780px;
	margin: 0 auto;
}

But that isn’t really an option for mobile devices? This site for example shows very good both on desktop and mobile devices. I have been going over their stylesheet, (which is I think one of those template stylesheet) but couldn’t find anything out of the ordinary except that they don’t use the min-with property. Would that be a way of doing this or should I have a separate stylesheet for mobile devices? Any advice would be highly appreciated.

Thank you in advance.

2

You should find something you need here or [URL=“http://www.hongkiat.com/blog/responsive-web-tutorials/”]here or [URL=“http://responsivedesignweekly.com/rwd-summit/responsive-layouts-with-zoe-gillenwater/”]here.

The basis of a fully fluid site involve using media queries to change the layout when it no longer fits the viewport. There are many strategies but a common theme would be mobile first and then expand for more capable devices. It is not just a case of adding a simple rules set to the body tag but a whole [URL=“http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/”]design concept from the ground up.

This site for example shows very good both on desktop and mobile devices

I didn’t see anything special there apart form a media query to scale up for larger viewports. The iphone emulator shows the site just shrunk to fit with no special rules that I could see (I assume the actual iphone would be the same but have;t got one to hand to test). If the site is 960px wide then it gets scaled to fit the iphone better but a better approach would be a change of layout for small devices and not just a shrunk layout with unreadable text.

3

Hi Paul. Thank you for your reaction, links and tips. All very helpful. There is one other thing I can’t get my head arround and that is the height property in a fluid design. I know that for pictures I could use the max-width: 100% rule, but what about normal divs? I can set a width yes how do I set a height in such a way that aspect ratio will stay in place?

Thank you in advance.

4

Yes, same on the real thing.

It will scale automatically. Don’t set heights in general. Let elements find their own natural height.

5

Hi Ralph. Thanks fot the reaction. I understand that part, but what if I have four divs in a row, having a different amount of text, all having a different background color but I want to have them all the same height

6

You have to separate “what you want” from “what is good for the content”. Instead of imposing a design on the content is should to some degree be the content dictating the design :slight_smile:

However, these days you can use display: table and display table-cell properties (for IE8+) to have equal height boxes without the need for specifying a height. For smaller devices you can change the element (via media queries) back to display:block or float.