Re: [css-d] Trying to get the big picture view on responsive design
On 11/13/2013 7:26 AM, william drescher wrote: ... 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. I looked and googled but... what is a css breakpoint? Is it just setting width ? bill Thanks all ! bill __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
Le 13 nov. 2013 à 22:44, Colin (Sandy) Pittendrigh
a écrit :
> many such breakpoints (out there in practice) are defined in ems, even when
> the author is thinking pixels, where one EM is calculated as 16 pixels.
>
> /* for 600px ...(16 * 37.5 == 600) */
> @media all and (min-width: 37.5em) {
>
>...css goes here
> }
>
> I've been doing this because the examples I copied did this. But I don't
> know why. Can anybody explain this issue?
By using ‘em’, you base your media queries on the user chosen font-size. That
maybe 16px (default on most user-agents) or it may be more. Both iOS and
Android have accessibility options in their general settings to enlarge the
text used on the device. Remember that em-based MQs use the browser (device)
set of font-size, _not_ the font-size you may have set on the root element of
the device.
That is especially interesting if your pages are text rich (news site, blogs,
etc). You have control over the length of the lines, and that remains
consistent independently of the user font-size. On the flip side, if your pages
are graphics rich, you might be better off working with MQ’s defined in px
(range of physical dimensions of the devices / viewport).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
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/
Re: [css-d] Trying to get the big picture view on responsive design
many such breakpoints (out there in practice) are defined in ems, even when
the author is thinking pixels, where one EM is calculated as 16 pixels.
/* for 600px ...(16 * 37.5 == 600) */
@media all and (min-width: 37.5em) {
...css goes here
}
I've been doing this because the examples I copied did this. But I don't
know why. Can anybody explain this issue?
On Wed, Nov 13, 2013 at 6:36 AM, Tim Arnold wrote:
> On Wed, Nov 13, 2013 at 7:26 AM, william drescher
> wrote:
>
> > I looked and googled but... what is a css breakpoint?
> > Is it just setting width ?
> >
> > bill
> >
>
> Breakpoints are points at which certain CSS rules kick in. They are
> most commonly based on the width of your browser viewport but can also
> be tied to other properties of a device. You use "media queries" to
> define them.
>
> A common example would be that you have a block on the page that is
> 50% of the available width (maybe lining up horizontally in two
> columns) and you need them to switch to 100% wide on smaller screens
> (stacking vertically instead of horizontally). In the case below, any
> screen less than 700px wide would do this.
>
> 700px would be the "breakpoint"
>
> .story{width: 50%; float: left;}
>
> @media only screen and (max-width: 700px){
> .story(width: 100%; float: none;}
> }
>
> NOTE: this is not just about width. You could change anything at all
> defined in CSS at these different breakpoints.
>
> http://www.w3.org/TR/css3-mediaqueries/
>
> Tim
>
>
>
>
> --
>
> tim.arn...@gmail.com
> __
> 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/
>
--
/* 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/
Re: [css-d] Trying to get the big picture view on responsive design
On Wed, Nov 13, 2013 at 7:26 AM, william drescher
wrote:
> I looked and googled but... what is a css breakpoint?
> Is it just setting width ?
>
> bill
>
Breakpoints are points at which certain CSS rules kick in. They are
most commonly based on the width of your browser viewport but can also
be tied to other properties of a device. You use "media queries" to
define them.
A common example would be that you have a block on the page that is
50% of the available width (maybe lining up horizontally in two
columns) and you need them to switch to 100% wide on smaller screens
(stacking vertically instead of horizontally). In the case below, any
screen less than 700px wide would do this.
700px would be the "breakpoint"
.story{width: 50%; float: left;}
@media only screen and (max-width: 700px){
.story(width: 100%; float: none;}
}
NOTE: this is not just about width. You could change anything at all
defined in CSS at these different breakpoints.
http://www.w3.org/TR/css3-mediaqueries/
Tim
--
tim.arn...@gmail.com
__
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/
Re: [css-d] Trying to get the big picture view on responsive design
... 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. I looked and googled but... what is a css breakpoint? Is it just setting width ? bill __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
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 wrote: > On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh > 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/
Re: [css-d] Trying to get the big picture view on responsive design
11 nov 2013 21.38 Chris Rockwell: > I see your point MiB. I was trying to make the point that fluid design > responds to the screen size, adding in breakpoints only enhances that > response. Yes, that's currently how I do it technically too, but it's of course just a set of possible techniques and a few years from now, other types will also be common I'm sure. When I use the term "adaptive design" I feel I open myself for alternative types of solutions which does feel like a more apt mindset for me. __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
I see your point MiB. I was trying to make the point that fluid design responds to the screen size, adding in breakpoints only enhances that response. On Mon, Nov 11, 2013 at 3:36 PM, MiB wrote: > > 11 nov 2013 21.06 Chris Rockwell: > > > responsive design is fluid design > > > I do think that here a better term, than "fluid" design, is "adaptive" > design, which means the design will adapt to the context. "Fluid" leads the > thought to a specific set of design techniques, which do not give the > complete picture for responsive design as I see it. > __ > 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/ > -- Chris Rockwell __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
11 nov 2013 21.06 Chris Rockwell: > responsive design is fluid design I do think that here a better term, than "fluid" design, is "adaptive" design, which means the design will adapt to the context. "Fluid" leads the thought to a specific set of design techniques, which do not give the complete picture for responsive design as I see it. __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh 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 __ 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/
Re: [css-d] Trying to get the big picture view on responsive design
This could be a much longer discussion, but it sounds like your big picture view is a bit flawed from the onset. Responsive design isn't about coding for devices, it's coding for screen sizes (albeit with special code for browsers on those devices). And, responsive design is fluid design. But instead of saying at any size screen I want column 1 to be 30% and column 2 to be 70%, you can use breakpoints to make them both 100% (still fluid:D) at a certain point. 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? > > -- > /* 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/ > -- Chris Rockwell __ 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/
[css-d] Trying to get the big picture view on responsive design
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? -- /* 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/
