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
... 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
On Wed, Nov 13, 2013 at 7:26 AM, william drescher
will...@techservsys.com 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
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 tim.arn...@gmail.com wrote:
On Wed, Nov 13, 2013 at 7:26 AM, william drescher
will...@techservsys.com 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
Le 13 nov. 2013 à 22:44, Colin (Sandy) Pittendrigh
sandy.pittendr...@gmail.com 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
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/
[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/
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 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 __ 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
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 digital.disc...@gmail.com 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.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/
