Re: [css-d] Implementing Responsive Design
i think it's a good way of thinking, the limited space does force you to go minimal and abstract as much as possible with your content and how you present it. on the topic of mobile-first vs desktop-first, there is an alternative - the goldilocks approach[1], which sits right in the middle, i'd say. ~Adam [1] - http://goldilocksapproach.com/demo/ Dne 23. 8. 2013 3:10, Colin (Sandy) Pittendrigh napsal(a): Been reading Implementing Responsive Design by Tim Kadlec--which is surprisingly well-written for an IT book. Kadlec seems to recommend building a site's CSS from the cell phone up--because some phones still don't handle media queries. In other words he starts off by making his sites look good at the smallest resolution, and then uses media queries (and sometimes Javascript) to add floats and what ever else is needed to make the site look right as the view port increases. This came as a surprise to me. I assumed everybody did the opposite: still build for the desktop, then fiddle with media queries and viewport widths to make the site acceptable for pads and phones too. His approach does sometimes require Javascript, to loop through all the block elements of a certain class and then add to add CSS as needed. What are the group's thoughts about this approach? Do you build from the desktop down, or from the cell phone up? __ 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] Implementing Responsive Design
IMHO, mobile-first is the right way to go. My experience in desktop-down has been unpleasant to say the least. To me, mobile-first makes sense. If a mobile device doesn't understand MQ's, then you're in trouble with a desktop-down site. If you're going to spend the effort to do a responsive site, you should make sure as many devices have a good experience as possible. 2¢ On Fri, Aug 23, 2013 at 8:38 AM, Adam Ambrus eidam...@gmail.com wrote: i think it's a good way of thinking, the limited space does force you to go minimal and abstract as much as possible with your content and how you present it. on the topic of mobile-first vs desktop-first, there is an alternative - the goldilocks approach[1], which sits right in the middle, i'd say. ~Adam [1] - http://goldilocksapproach.com/demo/ Dne 23. 8. 2013 3:10, Colin (Sandy) Pittendrigh napsal(a): Been reading Implementing Responsive Design by Tim Kadlec--which is surprisingly well-written for an IT book. Kadlec seems to recommend building a site's CSS from the cell phone up--because some phones still don't handle media queries. In other words he starts off by making his sites look good at the smallest resolution, and then uses media queries (and sometimes Javascript) to add floats and what ever else is needed to make the site look right as the view port increases. This came as a surprise to me. I assumed everybody did the opposite: still build for the desktop, then fiddle with media queries and viewport widths to make the site acceptable for pads and phones too. His approach does sometimes require Javascript, to loop through all the block elements of a certain class and then add to add CSS as needed. What are the group's thoughts about this approach? Do you build from the desktop down, or from the cell phone up? __ 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/ -- 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] Implementing Responsive Design
Adam Ambrus wrote: on the topic of mobile-first vs desktop-first, there is an alternative - the goldilocks approach[1], which sits right in the middle, i'd say. I like it, and I like the demo. through which it presents itself, but why, when I extend my browser window across both monitors, to a resolution of about 2048 x 860, does it continue to present itself in a single column with an empty column to the right and ridiculously wide margins ? If it followed its own precepts, it would have folded itself into two, three or even four columns. Philip Taylor __ 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] Implementing Responsive Design
On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole m...@risingwoods.org wrote: FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. Keep in mind, if doing a mobile first approach, that IE8 (not exactly an ancient browser) does not support media queries at all without a polyfill. 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] Implementing Responsive Design
FWIW, what I do is repeat my styles without MQ's inside a conditional comment. Lo-fi, I know, but if you don't want to load a polyfil, this is another option. I use sass imports to do this in a neat way. Email me if you want any more info. — Sent from Mailbox for iPhone On Fri, Aug 23, 2013 at 10:59 AM, Tim Arnold tim.arn...@gmail.com wrote: On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole m...@risingwoods.org wrote: FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. Keep in mind, if doing a mobile first approach, that IE8 (not exactly an ancient browser) does not support media queries at all without a polyfill. 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/ __ 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] Implementing Responsive Design
Mobile-First is a good idea, but the realities are that it’s a Desktop-First world. If you're doing any serious web browsing on a phone its capable of Mq's. And unless you put an extraordinary amount of work into it, the page performance is not much different than a desktop anyway. http://sixrevisions.com/mobile/responsive-web-design-not-the-future/ Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, August 23, 2013 9:25 AM To: Tim Arnold Cc: CSS Discuss; Mike O'Toole Subject: Re: [css-d] Implementing Responsive Design FWIW, what I do is repeat my styles without MQ's inside a conditional comment. Lo-fi, I know, but if you don't want to load a polyfil, this is another option. I use sass imports to do this in a neat way. Email me if you want any more info. — Sent from Mailbox for iPhone On Fri, Aug 23, 2013 at 10:59 AM, Tim Arnold tim.arn...@gmail.com wrote: On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole m...@risingwoods.org wrote: FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. Keep in mind, if doing a mobile first approach, that IE8 (not exactly an ancient browser) does not support media queries at all without a polyfill. 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/ __ 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-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] Implementing Responsive Design
If you're in a sharing mood, Tom, it would be great if you would post your solutions to this mailing list, and we could all benefit from your hard work ;-) On 2013-08-23, at 10:24 AM, Tom Livingston wrote: FWIW, what I do is repeat my styles without MQ's inside a conditional comment. Lo-fi, I know, but if you don't want to load a polyfil, this is another option. I use sass imports to do this in a neat way. Email me if you want any more info. — Sent from Mailbox for iPhone On Fri, Aug 23, 2013 at 10:59 AM, Tim Arnold tim.arn...@gmail.com wrote: On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole m...@risingwoods.org wrote: FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. Keep in mind, if doing a mobile first approach, that IE8 (not exactly an ancient browser) does not support media queries at all without a polyfill. 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/ __ 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-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] Implementing Responsive Design
On Fri, Aug 23, 2013 at 1:02 PM, Norman Fournier
nor...@normanfournier.com wrote:
If you're in a sharing mood, Tom, it would be great if you would post your
solutions to this mailing list, and we could all benefit from your hard work
;-)
On 2013-08-23, at 10:24 AM, Tom Livingston wrote:
Like I said, this is low-tech. But it's quick, requires less effort
and so far has not caused any pain that I'm aware of.
Also, I certainly didn't think this up. I read about this technique
and it made sense to me. Possibly from Andy Clarke. I will say that I
hardly ever hear about so it's either common place, or unpopular.
Either way, it works for me. YMMV. I am allergic to polyfils and use
very few of them. The only one I can think of that I use regularly is
selectivizr (http://selectivizr.com/).
So...
I have a main scss file that looks like:
@import normalize.scss;
@import forms.scss;
@import fonts.scss;
@import base.scss;
@media only all and (min-width: 480px){
@import 480.scss;
}
@media only all and (min-width: 600px){
@import 600.scss;
}
@media only all and (min-width: 768px){
@import 768.scss;
}
@media only all and (min-width: 960px){
@import 960.scss;
}
/* CLEARING */
/* For modern browsers */
.clear:before, .clear:after {content:; display:block;}
.clear:after {clear:both;}
.clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */
And an IE sheet that looks like:
/*480*/
@import 480.scss;
/*600*/
@import 600.scss;
/*768*/
@import 768.scss;
/*992*/
@import 960.scss;
The IE sheet is importing the same styles as the main sheet, minus the
MQs, inside a conditional for IE 9. Sheets outside of the MQs in the
main sheet still work for IE. The cascade then builds the desktop-only
page for old IE, in my case 7 and 8.
These are scss imports which happen in preprocessing and are not
causing multiple server calls. The result is only 2 sheets, main and
ie 9.
The base sheet is my mobile starting point, with usually only
typographic styles and such with little or no layout styles. This is
the base a dumb phone will get. Sheets build up from there as the
width gets wider.
I have conditionals around my html element, adding classes for 7 and
8, and I add specific 7/8 styles as needed in the individual break
point sheets. Yes, this causes good browsers to also download
ie-specific styles as well, but they are usually only a few lines and
I can live with that. It's one less server call. I find it much easier
to just keep all the element styles together, rather than to jump out
to another sheet to do a style related to the element I'm working on
in the main sheet. But that's just me. Feel free to create an
IE-specific sheet and tack in on the end of the above IE scss file.
I'm no guru. This is just what works for me.
HTH
--
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] Implementing Responsive Design
Le 23 août 2013 à 23:58, Tim Arnold tim.arn...@gmail.com a écrit : On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole m...@risingwoods.org wrote: FYI only recently has the 'smart phone' (all MQ capable) sales passed the 'feature phone' in sales percentage. Many present day low end 'feature phones' and most older (sold in 2009-2012) 'feature phones' lack the MQ support. As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are much more powerful than the 'smart phones' of 2011 and before. Keep in mind, if doing a mobile first approach, that IE8 (not exactly an ancient browser) does not support media queries at all without a polyfill. Hmm, polyfills… I prefer the good old school conditional comments to load an 'IE8' or 'oldIE' specific stylesheet. If you use SASS or similar preprocessors, it is relatively trivial to set up your system to generate such a stylesheet. And it cuts down on the amount of JS oldIE has to process, which is good for performance. That is similar to what Tom Livingstone described upthread. In general, on the debate between 'mobile first' and 'desktop first', I go with the former, that is, building a stylesheet upwards from the simple to the more complex. The term 'mobile first' is a bit of a misnomer, though. I prefer to frame the whole thing in terms of viewport sizes. That also means that someone who has a huge 'desktop' monitor but a narrow browser window will see a different layout than someone with a larger window. 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/
