donboe — 2013-02-22T23:06:33-05:00 — #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.
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.
paulob — 2013-02-23T06:11:28-05:00 — #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](http://designwoop.com/2012/03/15-detailed-responsive-web-design-tutorials/).
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](http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu) 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.
donboe — 2013-02-26T03:39:45-05:00 — #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.
ralphm — 2013-02-26T07:31:31-05:00 — #4
Yes, same on the real thing.
It will scale automatically. Don't set heights in general. Let elements find their own natural height.
donboe — 2013-02-26T08:39:36-05:00 — #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
paulob — 2013-02-26T09:18:23-05:00 — #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
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.