Good responses. Thank you all. This has helped me clarify the issues. I have yet to design a site phones first, from the ground up. I'm currently busy trying to retrofit a few older ones. I am discovering I want to send different markup down the pipe--however--rather than media query CSS edits to the same markup.
But that has to be done with server side codes that rely on a double GET for the first request, so a cookie can be set. Then you can send fewer images, different images and different markup, all matched with its own custom CSS. On Mon, Nov 11, 2013 at 1:17 PM, Tom Livingston <tom...@gmail.com> wrote: > On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh > <sandy.pittendr...@gmail.com> wrote: > > I'm a beginner at responsive design. I understand the mobile first > > argument which (at least from the client side) boils down to "Design for > > the phone first and then use CSS media queries to vary floats and widths > as > > needed, and to use javascript to add non-essential images on the fly, for > > larger monitors." > > > > However. Intricately planning individual layouts for all possible > devices > > seems error prone to me. If not a fool's errand. New gizmos show up all > > the time. > > > > In my limited experience totally fluid layouts scale well or well enough > > between desktop and tablet. The literature frequently faults fluid > layouts > > for looking bad when the user drags the browser out to too wide. But I > > don't see that as a problem. > > > > When I drag a fluid layout out to too wide I immediately pooch it back to > > narrower again, until it looks right. I think that's what everybody > does. > > > > So now (if fluid layout covers both desktop and tablet) all you have to > > worry about is one media query for phone size gadgets. Removing all > floats > > invariably makes a mess. A better first draft is to make every block > > element float left. Full width blocks still stack vertically. Narrower > > blocks sit side by side. A small amount of custom tuning from that point > on > > is usually all it takes. Or at least so it seems. I am new at this. > > > > I'll skip over server-side device detection for now. Although that seems > > like the most powerful technology--if detail-oriented micro-managed > layout > > really is the goal. > > > > Does anybody want to argue against that big picture view? Or amend it > > some, for the benefit of a beginner? > > > > > Fluid/flexible layouts are, IMO, best. Like you mention, new devices > are coming out all the time. Percentage width on your structure help > you cover all the varying widths. Start mobile first, and adjust > layout with breakpoints when the *content* requires it. Sometimes a > single column is all you need up to 600px wide or so. I generally use > 3-4 breakpoints, adding in others as need to fine-tune widths or # of > columns, etc. > > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > -- /* Colin (Sandy) Pittendrigh >--oO0> */ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
