Re: [css-d] Firefox and page inflation -- late response
I recall seeing this come through, but anyway, I'd like to say that I wasn't defending *not* using RWD, I'm a big proponent of it, but IIRC there were some replies that eluded to non-responsive sites being broken or preventative of users using the site on phones or tablets. I was just saying that in some (and at this point maybe most) cases that's not entirely true. Again, I'm not saying you shouldn't do mobile-first RWD, but for noobs, saying anything remotely suggesting that if you don't do RWD, you're site won't work on phones, et al, is misleading. On Tuesday, April 29, 2014 10:16 AM, MiB digital.disc...@gmail.com wrote: This got held up for unknown reasons: apr 10 2014 18:50 Tom Livingston tom...@gmail.com: it's still useable. He's not leaving mobile users *completely* out in the cold. That it is so, is still quite a bit beside the point I think. The users only have to get used to sites that cater for them, their use cases and their devices, to feel left out in the cold with just ”still usable”. In my world that can far too often mean that the user closes the window and doesn’t return. That’s what I do and I only had a smart phone for 2-3 years now. Of course each site is different typically. Anyway, to get back to CSS I find ”Mobile First” very helpful for designing already at the content level and focusing on what’s really important and that going from small size screens in my media queries and source media to larger simplifies my CSS design development considerably. That said I have already lost customers that don’t ”get” the need to design at the content level, at least not when they are doing the content. It’s possible I need to find people to work with that can do content so I can focus on server-side and interface design. /MiB __ 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] Firefox and page inflation -- late response
29 apr 2014 kl. 18:35 skrev Tom Livingston tom_livings...@ymail.com: I recall seeing this come through, I thought so to but couldn’t find it my mailbox nor in the online archive. but anyway, I'd like to say that I wasn't defending *not* using RWD, I'm a big proponent of it, but IIRC there were some replies that eluded to non-responsive sites being broken or preventative of users using the site on phones or tablets. I was just saying that in some (and at this point maybe most) cases that's not entirely true. That’s probably debatable, but I will not try that discussion here. Again, I'm not saying you shouldn't do mobile-first RWD, but for noobs, saying anything remotely suggesting that if you don't do RWD, you're site won't work on phones, et al, is misleading. Well, it may of course work less well compared to a responsive and responsible site design. However, some sites, or versions of these, may not have mobile users within target and need to do stuff for bigger screen users that just won’t work with mobile. But let’s not be theoretical about this issue. CSS and design is where it’s at. See you in another thread…. ;-) __ 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] Firefox and page inflation
Someone wrote: I would like to hear your thoughts/recommendations on Mobile devices for clarification and advice? I consider them for the most part more toys than tools. I own no mobile device, and do not anticipate ever owning one. I leave here infrequently. I've been fueling my car about 3-4 times per year for the past several years. Cell service here is non-existent for any but Verizon users. Hand held devices I'm familiar with are hard for those with big fingers and tired old eyes to use. Mobile devices are a scourge on traffic safety. I don't anticipate doing anything to promote or facilitate their use. Although I don't go along 100% with whoever wrote the immediately preceding paragraph (it is variously attributed to Ted Sperling and Felix Miata, but I cannot trace the original), I nonetheless have considerable sympathy with the ideas expressed. Like the author, I too own no mobile device other than a couple of 15-year-old mobile 'phones (monochrome) and although I /may/ purchase a Chromebook™ at some point, I believe that such devices emulate conventional desktop/notebook computers rather than tablets and their ilk. My thoughts regarding Mobile-first design is that it is putting the cart before the horse -- we should (IMHO) (a) be designing to W3C standards (and not designing to accommodate browser deficiencies), and (b) be designing to be flexible (so that no matter how big or how small the target device is, our content will reflow to fill it to maximum advantage). If those two desiderata are met, then it becomes the responsibility of tablet (etc) designers to accommodate such material; it is not our job to spoon-feed them and make their lives easier. 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] Firefox and page inflation
Den 10.04.2014 12:24, skrev Philip Taylor: My thoughts regarding Mobile-first design is that it is putting the cart before the horse -- we should (IMHO) (a) be designing to W3C standards (and not designing to accommodate browser deficiencies), and (b) be designing to be flexible (so that no matter how big or how small the target device is, our content will reflow to fill it to maximum advantage). If those two desiderata are met, then it becomes the responsibility of tablet (etc) designers to accommodate such material; it is not our job to spoon-feed them and make their lives easier. I agree in principle, but guess how much you play by the market, or not, depends on whether you are trying to sell something, or not. :-) FWIW, I have no first in mind when designing, only all... http://www.gunlaug.com/contents/design/mobile-first.html regards Georg __ 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] Firefox and page inflation
apr 102014 12:36 Georg ge...@gunlaug.com: I agree in principle, but guess how much you play by the market, or not, depends on whether you are trying to sell something, or not. :-) FWIW, I have no first in mind when designing, only all... http://www.gunlaug.com/contents/design/mobile-first.html Mobile first doesn’t imply ”not all, but is rather named after breaking with the tradition of adding mobile suport after having developed a normal ”computer” browser design. That’s what used to happen and still happens too often. What mobile first does is focusing on the content and the essential presentation of it. Something all web design should be doing already. __ 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] Firefox and page inflation
Den 10.04.2014 12:59, skrev MiB: What mobile first does is focusing on the content and the essential presentation of it. Something all web design should be doing already. That they should, regardless of how they approach visual design. regards Georg __ 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] Firefox and page inflation
As with the previous authors, I also do not own/carry a mobile device. However, our site visitors do. While I'm neutral overall on Mobile First vs. Desktop First, I can say that going to a Mobile First style sheet reduced our overall CSS by more than half. About 25% of our visitors are coming to us with some type of mobile device, so they get even smaller impact from CSS and image weight. It has simply made more sense to go from the simple to the complex layout within the CSS. Other wins include greater attention to natural syntax layout which in turn falls naturally into line with WCAG guidelines and compliance. In short, the Mobile First philosophy brought many wins with it. Perhaps the name is misleading and it should be Simplicity First or Basics First ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Philip Taylor Sent: Thursday, April 10, 2014 5:24 AM To: CSS-Discuss Cc: Felix Miata; Tedd Sperling Subject: Re: [css-d] Firefox and page inflation Someone wrote: I would like to hear your thoughts/recommendations on Mobile devices for clarification and advice? I consider them for the most part more toys than tools. I own no mobile device, and do not anticipate ever owning one. I leave here infrequently. I've been fueling my car about 3-4 times per year for the past several years. Cell service here is non-existent for any but Verizon users. Hand held devices I'm familiar with are hard for those with big fingers and tired old eyes to use. Mobile devices are a scourge on traffic safety. I don't anticipate doing anything to promote or facilitate their use. Although I don't go along 100% with whoever wrote the immediately preceding paragraph (it is variously attributed to Ted Sperling and Felix Miata, but I cannot trace the original), I nonetheless have considerable sympathy with the ideas expressed. Like the author, I too own no mobile device other than a couple of 15-year-old mobile 'phones (monochrome) and although I /may/ purchase a Chromebook™ at some point, I believe that such devices emulate conventional desktop/notebook computers rather than tablets and their ilk. My thoughts regarding Mobile-first design is that it is putting the cart before the horse -- we should (IMHO) (a) be designing to W3C standards (and not designing to accommodate browser deficiencies), and (b) be designing to be flexible (so that no matter how big or how small the target device is, our content will reflow to fill it to maximum advantage). If those two desiderata are met, then it becomes the responsibility of tablet (etc) designers to accommodate such material; it is not our job to spoon-feed them and make their lives easier. 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/ All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] Firefox and page inflation
Then you all can be happy carrying your pagers and listening to the latest hit from Abba as well. Mobile use is not a fad. It's not just something those whippersnappers are doing, even if you're not. It is, for many, the first and sometimes only web device they use. And it's use is growing exponentially. The problem that mobile-first is trying to solve is an issue not simply one of making content flow properly. Mobile devices have so much less screen space as to force a complete re-think of what the content is. Simply re-flowing vast amounts of content onto a small space makes for a terrible user experience. You need to re-design so that you provide only the essential content on a mobile device, and as you scale up, you add optional content. The solution that mobile-first presents is rather than taking a full-scale site and trying to decide what to throw out, you start with the essentials and scale up. It's as much a thought exercise as it is a design strategy. It's not about writing to specific mobile-device browsers, it's about designing a site and its content so that it makes sense on mobile, and then adding all the great extras when you have the luxury of screen space. I find it an incredibly useful way to think about things. I don't always complete the design a the mobile level first, but keeping it in the front of mind helps keep the KISS (keep it simple, stupid) at the forefront as well. And that's a good thing. Chris On 4/10/14 3:24 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Someone wrote: I would like to hear your thoughts/recommendations on Mobile devices for clarification and advice? I consider them for the most part more toys than tools. I own no mobile device, and do not anticipate ever owning one. I leave here infrequently. I've been fueling my car about 3-4 times per year for the past several years. Cell service here is non-existent for any but Verizon users. Hand held devices I'm familiar with are hard for those with big fingers and tired old eyes to use. Mobile devices are a scourge on traffic safety. I don't anticipate doing anything to promote or facilitate their use. Although I don't go along 100% with whoever wrote the immediately preceding paragraph (it is variously attributed to Ted Sperling and Felix Miata, but I cannot trace the original), I nonetheless have considerable sympathy with the ideas expressed. Like the author, I too own no mobile device other than a couple of 15-year-old mobile 'phones (monochrome) and although I /may/ purchase a Chromebook at some point, I believe that such devices emulate conventional desktop/notebook computers rather than tablets and their ilk. My thoughts regarding Mobile-first design is that it is putting the cart before the horse -- we should (IMHO) (a) be designing to W3C standards (and not designing to accommodate browser deficiencies), and (b) be designing to be flexible (so that no matter how big or how small the target device is, our content will reflow to fill it to maximum advantage). If those two desiderata are met, then it becomes the responsibility of tablet (etc) designers to accommodate such material; it is not our job to spoon-feed them and make their lives easier. 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/ __ 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] Firefox and page inflation
On 4/10/2014 10:33 AM, Chris Williams wrote: Then you all can be happy carrying your pagers and listening to the latest hit from Abba as well. Mobile use is not a fad. It's not just something those whippersnappers are doing, even if you're not. It is, for many, the first and sometimes only web device they use. And it's use is growing exponentially. The problem that mobile-first is trying to solve is an issue not simply one of making content flow properly. Mobile devices have so much less screen space as to force a complete re-think of what the content is. Simply re-flowing vast amounts of content onto a small space makes for a terrible user experience. You need to re-design so that you provide only the essential content on a mobile device, and as you scale up, you add optional content. The solution that mobile-first presents is rather than taking a full-scale site and trying to decide what to throw out, you start with the essentials and scale up. It's as much a thought exercise as it is a design strategy. It's not about writing to specific mobile-device browsers, it's about designing a site and its content so that it makes sense on mobile, and then adding all the great extras when you have the luxury of screen space. Chris On 4/10/14 3:24 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Chris These are excellent points. I deal with two different audiences. One group consists of quite conservative engineers and technicians the other consists of community college students. I have used websites to present math to my students in the classroom and have in the past expected them to access those websites at home for study. I notice that each semester more students rely strictly on their cell phone and do not have a desktop. I have been trying to figure out how I can connect more favorably with them and your comments about essential content may have set me in a productive direction. I have decided to do some things (flash cards) with some kind of app so I can push certain information out to them in a manner which is convenient for them. Do you anticipate giving your user more options to select bits and pieces of content? Now I anticipate using your ideas to completely redesign my sites. Thanks. This has been an interesting and useful thread. Del __ 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] Firefox and page inflation
Thank you for your comments, Chris, which clearly contain a great deal of sense. Let me, if I may, address just one part of what you say, in terms of what I create (create, in terms of create web sites, that is) -- The problem that mobile-first is trying to solve is an issue not simply one of making content flow properly. Mobile devices have so much less screen space as to force a complete re-think of what the content is. Simply re-flowing vast amounts of content onto a small space makes for a terrible user experience. You need to re-design so that you provide only the essential content on a mobile device, and as you scale up, you add optional content. I develop two sorts of site -- those that convey information, and those that set out to exploit web functionality to the full in order to achieve on-screen something that might otherwise require using a full GUI toolkit in order to accomplish. The first are pure text. They say what needs to be said and no more. I imagine that they will render satisfactorily on any tablet or mobile device, but lacking both I have never tested them against such a benchmark. The second (of which an example can be seen at the link below) typically require a screen resolution of at least 1152 x 864 in order to display satisfactorily (unless the visitor has good eyesight and can use negative page zoom in order to see more). They are not intended to be usable on tablets or similar, neither can I envisage any satisfactory way of making them render satisfactorily on such devices (nor can I envisage how to make the manuscript content accessible to blind and partially sighted users, which I regard as a far more important issue, and one that I would dearly love to be able to address). Since I don't create sites that seek to merge these two (in other words, my sites are quite unlike the vast majority of sites that one experiences today), I am not convinced that the first need to be made more mobile-friendly or that it would be possible to make the second more mobile-friendly. Typical text site : http://marden-prg.org.uk/ Typical graphic-dependent high-resolution site : http://www.royalholloway.ac.uk/Hellenic-Institute/Research/Etheridge/ 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] Firefox and page inflation
This, too, is a place where we engineers try to pretend we are like our users and, in doing so, often fail them. We all are comfortable with technology, and feel that sure, let's let them customize the heck out of this thing, give them a ton of options. Because we are comfortable with lots of options and think that's a good thing. But lots of options confuse many people. Or often they don't use them. So you need to be a good designer and make good choices -- even if those choices are only the defaults, because so many people will leave the defaults forever. In short, you can't get away with sloppy design and toss a band-aid on it that says that's OK, they can turn it on or off. You need to really think the design through so that it's useful to the largest number of users, and provide options only for those skilled or ambitious enough to play with them. My current application is extremely technical, with screens full of data and information and tables and graphs galore. Thinking this very complex app through from a mobile-first perspective, at the insistence of my design consultant, has been really thought-proking. I'm working through the user scenarios time and again to insure that the mobile user has a great experience, and am finding this is giving the full screen user an amazing one. It's challenging and fun all at once. On 4/10/14 8:55 AM, Del Wegener d...@delweg.com wrote: Do you anticipate giving your user more options to select bits and pieces of content? __ 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] Firefox and page inflation
Philip, as I described in the message I just sent, I too am developing a very complex and detailed application where I was convinced that one needed a huge screen to appreciate it. After many discussions with my contract designer she was able to convince me that the mobile user was worth pursuing. I wasn't initially convinced, so I approached several users and discussed the idea of using a phone or a tablet. They hadn't even imagined such a use case. With one, I started brainstorming and we realized that being able to walk around with the application, on a phone or tablet, was in fact a game-changer for the industry (I'll leave the specific industry out of it). After discussing it with other users, they (to my surprise) started to become huge advocates for it. Now, the mobile use case has become a cornerstone of the new product, a true differentiator from the competition. And not only has thinking about mobile changed our market strategy, it has, I believe, made a better product for the full screen user (see my other message). In short, I think people who ignore mobile do so at their own peril, or at least to their own market detriment. Chris On 4/10/14 9:18 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: I develop two sorts of site -- those that convey information, and those that set out to exploit web functionality to the full in order to achieve on-screen something that might otherwise require using a full GUI toolkit in order to accomplish. The first are pure text. They say what needs to be said and no more. I imagine that they will render satisfactorily on any tablet or mobile device, but lacking both I have never tested them against such a benchmark. The second (of which an example can be seen at the link below) typically require a screen resolution of at least 1152 x 864 in order to display satisfactorily (unless the visitor has good eyesight and can use negative page zoom in order to see more). They are not intended to be usable on tablets or similar, neither can I envisage any satisfactory way of making them render satisfactorily on such devices (nor can I envisage how to make the manuscript content accessible to blind and partially sighted users, which I regard as a far more important issue, and one that I would dearly love to be able to address). Since I don't create sites that seek to merge these two (in other words, my sites are quite unlike the vast majority of sites that one experiences today), I am not convinced that the first need to be made more mobile-friendly or that it would be possible to make the second more mobile-friendly. __ 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] Firefox and page inflation
Typical text site : http://marden-prg.org.uk/ Typical graphic-dependent high-resolution site : http://www.royalholloway.ac.uk/Hellenic-Institute/Research/Etheridge/ For what it's worth, a smart enough phone - like my iPhone - can render the high resolution site mentioned above with only minor Issues. I could even view the manuscript with little problem (minor button display issue), which seems to be the most complex area. I have to 'pinch and zoom' but it works. I'm not saying mobile optimized sites aren't giving a better experience. They do. But in case Philip hasn't looked (as he states he doesn't have a mobile) it's still useable. He's not leaving mobile users *completely* out in the cold. I'm a huge proponent of responsive sites, but you need to know your user base. There are still cases for not doing responsive. __ 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] Firefox and page inflation
Also, we're drifting away from list appropriate topics... Sent from my iPhone On Apr 10, 2014, at 12:32 PM, Chris Williams ch...@clwill.com wrote: Philip, as I described in the message I just sent, I too am developing a very complex and detailed application where I was convinced that one needed a huge screen to appreciate it. After many discussions with my contract designer she was able to convince me that the mobile user was worth pursuing. I wasn't initially convinced, so I approached several users and discussed the idea of using a phone or a tablet. They hadn't even imagined such a use case. With one, I started brainstorming and we realized that being able to walk around with the application, on a phone or tablet, was in fact a game-changer for the industry (I'll leave the specific industry out of it). After discussing it with other users, they (to my surprise) started to become huge advocates for it. Now, the mobile use case has become a cornerstone of the new product, a true differentiator from the competition. And not only has thinking about mobile changed our market strategy, it has, I believe, made a better product for the full screen user (see my other message). In short, I think people who ignore mobile do so at their own peril, or at least to their own market detriment. Chris On 4/10/14 9:18 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: I develop two sorts of site -- those that convey information, and those that set out to exploit web functionality to the full in order to achieve on-screen something that might otherwise require using a full GUI toolkit in order to accomplish. The first are pure text. They say what needs to be said and no more. I imagine that they will render satisfactorily on any tablet or mobile device, but lacking both I have never tested them against such a benchmark. The second (of which an example can be seen at the link below) typically require a screen resolution of at least 1152 x 864 in order to display satisfactorily (unless the visitor has good eyesight and can use negative page zoom in order to see more). They are not intended to be usable on tablets or similar, neither can I envisage any satisfactory way of making them render satisfactorily on such devices (nor can I envisage how to make the manuscript content accessible to blind and partially sighted users, which I regard as a far more important issue, and one that I would dearly love to be able to address). Since I don't create sites that seek to merge these two (in other words, my sites are quite unlike the vast majority of sites that one experiences today), I am not convinced that the first need to be made more mobile-friendly or that it would be possible to make the second more mobile-friendly. __ 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] Firefox and page inflation
apr 10 2014 16:19 Davies, Elizabeth elizabeth_dav...@gallup.com: the Mobile First philosophy brought many wins with it. Perhaps the name is misleading and it should be Simplicity First or Basics First ;D I liked that one. __ 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] Firefox and page inflation
apr 10 2014 18:50 Tom Livingston tom...@gmail.com: it's still useable. He's not leaving mobile users *completely* out in the cold. That it is so is still quite a bit beside the point I think. The users only have to get used to sites that cater for them, their use cases and their devices, to do feel left out in the cold with just ”still usable”. In my world that can far too often mean that the user closes the window and doesn’t return. That’s what I do and I only had a smart phone for 2-3 years now. Of course each site is often different. Anyway, to get back to CSS I find ”Mobile First” very helpful for designing already at the content level and focusing on what’s really important and that going from small size screens in my media queries and source media to larger simplifies my CSS design development considerably. That said I have already lost customers that don’t ”get” the need to design at the content level, at least not when they are doing the content. It’s possible I need to find people to work with that can do content so I can focus on server-side and interface design. /MiB __ 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] Firefox and page inflation
Phillipe found the same notes I did. I didn't have a machine in the lab with the requisite resolution and FF version, so my browser version was off. The first bug report I had listed version 28. I did some installs and narrowed it to the '21 good', '22 inflated'. Its not just my site, its all sites ... I'm playing with various media query methods and meta tags and roaming around looking for a site that doesn't do it, but will not be devoting a huge amount of time on this as these discoveries narrowed the impact substantially. Its not, after all, a horrible thing ... and for the majority of websites in love with fonts under 16px size, its downright nice for those of us with poor eyesight ... if stressful for control freaks (of which I may or may not be one). Many thanks. Elizabeth All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] Firefox and page inflation
On Apr 7, 2014, at 3:28 PM, Felix Miata mrma...@earthlink.net wrote: I suggest to start thinking like a puter instead of a human. By that I mean the decimal system is fine for common measurements by ordinary humans. But, puters use binary, and its octal and hexidecimal extensions, which suggests humans working extensively with puters are better off adapting, using computer math instead of the decimal system for sizing. Computer fonts are happiest using harmonics of the 8 bit byte, which is why 96 DPI and 1/4 multiples of it (120, 144, 168, 192, etc.) work well, all being evenly divisible by 8. This harmonizes nicely with the most commonly shipped 16px browser default text size. Embracing this fortune instead of applying the convoluted X.625X1.6 methodology should pay off exponentially. Felix: I applaud your efforts to educate. From my perspective, Mobile devices bring their own mix of DPI resolutions and pixel' definitions which only compounds the problem for me. However, my understanding may be fuzzy in that regard. So of this I don't understand yet. As such, I would like to hear your thoughts/recommendations on Mobile devices for clarification and advice? Cheers, tedd ___ tedd sperling t...@sperling.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] Firefox and page inflation
I've not used PX sizing for well over a decade. We did recently change to using
REM's off of a % on the HTML.
The site in question uses a % on the HTML and REM's on the typography with PX
in a legacy IE-only (for those that don't support REM). I can't post an URL as
its internal, but it uses similar base to http://www.gallupstrengthsfinder.com
(except the GSC site cascades PX to REM's instead of having a separate
conditional, the internal site has them separated out with a conditional.)
html {font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
P (etc etc) {
font-size: 1.6rem;
line-height: 1.5;
}
ELIZABETH DAVIES
Input | Intellection | Learner | Achiever | Belief
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Felix Miata
Sent: Friday, April 04, 2014 5:38 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Firefox and page inflation
On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed:
Looking for insight into (and potential correction to) the latest
Firefox browsers inflating the overall size/resolution of webpages. We
use a mobile first responsive upwards, and in the newest Firefox
browsers, what is a reasonable font size in every other browser
becomes ludicrously large in Firefox on high resolution monitors.
From what I'm seeing on the dev pages, this is intentional for sites
that do not use large font sizing
(most) at the high resolutions. But we are doing so in our newest sites.
I'd rather not deliver FF specific font sizing, but will if I must.
Any ideas? Fixes? Things to avoid?
You're using px for sizing text and its containers, right? If yes, stop doing
that, and the problem will disappear. In the first place, it's only the user
who is in position to determine reasonable font size, which size is
presumptively the size configured as her personalizable browser default, CSS
medium. When you respect a user's default by leaving the base size unaltered,
and only apply relative sizing via keywords, em, rem or % to elements that
actually need a contextual sizing adjustment, the integers-only Gecko device px
to CSS px ratio and display density/high resolution are non-issues.
The math involved with not using px is simple enough. Just think of one px as
.0625rem (1/16). If you want a block to be 960px wide, divide by 16, which
makes it 60rem. In viewports in which the as-shipped 16px default remains in
effect, 60rem will be 960px, while in those using higher densities, more px
will be used, but your design proportions will be preserved.
--
The wise are known for their understanding, and pleasant words are
persuasive. Proverbs 16:21 (New Living Translation)
Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
Felix Miata *** http://fm.no-ip.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/
All information in this message is confidential and may be legally privileged.
Only intended recipients are authorized to use 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 10:30 AM, Davies, Elizabeth
elizabeth_dav...@gallup.com wrote:
I've not used PX sizing for well over a decade. We did recently change to
using REM's off of a % on the HTML.
The site in question uses a % on the HTML and REM's on the typography with PX
in a legacy IE-only (for those that don't support REM). I can't post an URL
as its internal, but it uses similar base to
http://www.gallupstrengthsfinder.com (except the GSC site cascades PX to
REM's instead of having a separate conditional, the internal site has them
separated out with a conditional.)
html {font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
P (etc etc) {
font-size: 1.6rem;
line-height: 1.5;
}
ELIZABETH DAVIES
Input | Intellection | Learner | Achiever | Belief
I'm sure Felix can give an in depth explanation as to what's
happening, but I have to ask...
What's your reasoning for using 62.5% on the HTML element, then sizing
body copy back UP with 1.6 rems? What is accomplished over 100% on
HTML and 1rem on body copy? Did you try this to see if FF behaves
better?
As I said, Felix can give far more knowledge on this than I can, but
to my eye, you are working harder to achieve the same thing and 100%
on the HTML respects a users default browser settings.
--
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] Firefox and page inflation
Correct that example URL to https://www.gallupstrengthscenter.com/ ... The same inflation occurs on the GSC site. And it happens whether I put everything to em's, strip out the IE cascade, put all the media queries to em's or rem's. The design stays proportional and does not break, it just gets larger. ELIZABETH DAVIES Gallup System Application Developer Input | Intellection | Learner | Achiever | Belief All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] Firefox and page inflation
Not sure, but I have a feeling the answer to what is happening can be found here... http://www.gunlaug.no/contents/wd_1_03_04.html If so, it is an old problem that reappears in a new form, caused by the fact that you start small on font-size and then size up further in. regards Georg Den 07.04.2014 16:47, skrev Davies, Elizabeth: Correct that example URL to https://www.gallupstrengthscenter.com/ ... The same inflation occurs on the GSC site. And it happens whether I put everything to em's, strip out the IE cascade, put all the media queries to em's or rem's. The design stays proportional and does not break, it just gets larger. __ 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] Firefox and page inflation
Tom,
Setting the root element's font-size to 62.5% results in a REM unit being equal
to 10px assuming that the users UAr default font-size is set to 16px which what
overwhelming majority of browsers in the wild are set to. Some folks prefer to
do it this way because it's easy to think in base 10. Also, by setting the root
element's font-size using a percentage allows the user to change the UA's
default size while retaining a design build using the REM unit.
As for the OP's question. I don't see what Elizabeth describes in Mozilla
Nightly (still need to try in on FF). The diffs I did see between Nightly and
Chrome are minor and appear to be due to the usual diffs in UA font rendering
engines.
Eric
On April 7, 2014 at 10:41 AM Tom Livingston tom...@gmail.com wrote:
On Mon, Apr 7, 2014 at 10:30 AM, Davies, Elizabeth
elizabeth_dav...@gallup.com wrote:
I've not used PX sizing for well over a decade. We did recently change to
using REM's off of a % on the HTML.
The site in question uses a % on the HTML and REM's on the typography with
PX in a legacy IE-only (for those that don't support REM). I can't post an
URL as its internal, but it uses similar base to
http://www.gallupstrengthsfinder.com (except the GSC site cascades PX to
REM's instead of having a separate conditional, the internal site has them
separated out with a conditional.)
html { font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
P (etc etc) {
font-size: 1.6rem;
line-height: 1.5;
}
ELIZABETH DAVIES
Input | Intellection | Learner | Achiever | Belief
I'm sure Felix can give an in depth explanation as to what's
happening, but I have to ask...
What's your reasoning for using 62.5% on the HTML element, then sizing
body copy back UP with 1.6 rems? What is accomplished over 100% on
HTML and 1rem on body copy? Did you try this to see if FF behaves
better?
As I said, Felix can give far more knowledge on this than I can, but
to my eye, you are working harder to achieve the same thing and 100%
on the HTML respects a users default browser settings.
--
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/
__
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] Firefox and page inflation
On 2014-04-07 16:59 (GMT+0200) Georg composed: Davies, Elizabeth composed: Correct that example URL to https://www.gallupstrengthscenter.com/ ... The same inflation occurs on the GSC site. And it happens whether I put everything to em's, strip out the IE cascade, put all the media queries to em's or rem's. The design stays proportional and does not break, it just gets larger. Not sure, but I have a feeling the answer to what is happening can be found here... http://www.gunlaug.no/contents/wd_1_03_04.html If so, it is an old problem that reappears in a new form, caused by the fact that you start small on font-size and then size up further in. On 2014-04-07 10:41 (GMT-0400) Tom Livingston composed: I'm sure Felix can give an in depth explanation as to what's happening, but I have to ask... What's your reasoning for using 62.5% on the HTML element, then sizing body copy back UP with 1.6 rems? What is accomplished over 100% on HTML and 1rem on body copy? Did you try this to see if FF behaves better? As I said, Felix can give far more knowledge on this than I can, but to my eye, you are working harder to achieve the same thing and 100% on the HTML respects a users default browser settings. For several reasons, I'm not going to say much of invest time in this particular thread. Among the reasons: 1: I think Georg is probably on the right track. http://fm.no-ip.com/SS/Clagnut/bbcnSS.html has more on this one not a whole lot younger than Georg's original edition. 2: https://www.gallupstrengthscenter.com/Content/screen2014.css is 105510 bytes. That represents an enormously complicated and IMO grossly excessive attempt to control the uncontrollable. 3: https://www.gallupstrengthscenter.com/Content/screen2014.css contains px contraints that are not superceded by rem/em constraints for the better browsers, plus a number of other usages of px sizing. 4: https://www.gallupstrengthscenter.com/ is not the OP's site, or under her control. 5: http://fm.no-ip.com/SS/daviEliz01-120.png and http://fm.no-ip.com/SS/daviEliz01-144.png show it not happening here using configs I commonly test with when expecting screen density impacts. In both browsers, default size is identical @20px for 120DPI, @24px for 144DPI. IMO that much CSS weight, combined with mixing px sizes and other, combined with media queries, and combined with Clagnut sizing methodology, is asking to be driven nuts. I suggest to start thinking like a puter instead of a human. By that I mean the decimal system is fine for common measurements by ordinary humans. But, puters use binary, and its octal and hexidecimal extensions, which suggests humans working extensively with puters are better off adapting, using computer math instead of the decimal system for sizing. Computer fonts are happiest using harmonics of the 8 bit byte, which is why 96 DPI and 1/4 multiples of it (120, 144, 168, 192, etc.) work well, all being evenly divisible by 8. This harmonizes nicely with the most commonly shipped 16px browser default text size. Embracing this fortune instead of applying the convoluted X.625X1.6 methodology should pay off exponentially. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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] Firefox and page inflation
Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? -- Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.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] Firefox and page inflation
On Mon, Apr 7, 2014 at 11:38 AM, Eric e...@minerbits.com wrote: As for the OP's question. I don't see what Elizabeth describes in Mozilla Nightly (still need to try in on FF). The diffs I did see between Nightly and Chrome are minor and appear to be due to the usual diffs in UA font rendering engines. I did not look too closely at the example URL provided, but I agree with Eric … I don't see an issue. Elizabeth, how do you reproduce this problem? Can you post screen shots? On Fri, Apr 4, 2014 at 3:01 PM, Davies, Elizabeth elizabeth_dav...@gallup.com wrote: From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. Can you provide a link(s) to the dev pages? __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 3:31 PM, Barney Carroll barney.carr...@gmail.com wrote: Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? While feeling a little 'holy war', I'll bite... It's to honor browser/user-set default font size settings. If a user has set a larger font size in their browser preferences due to less than perfect eyesight, for example, setting 100% on the HTML element and then sizing elements with relative units will respect the users need for a larger readable text size and allow the text to scale up. Why do I feel like you know this and meant something else with your question... -- 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] Firefox and page inflation
Tom sent me some screenshots and is also not seeing the effect on a Mac. I checked around on our in house Macs, and this appears to be a Windows OS with Firefox effect. What we're seeing is an overall inflation of the entire page (not just font size). Where on a 1920 resolution screen, Firefox is behaving as if it's at 1280 and using that media query break point instead of continuing on to the higher one. For the same container, Firebug shows a computed width of 1505px / Chrome tools shows a computed width of 1905px on the exact same screen (1920X1080 screen resolution on the device). I hugely appreciate the feedback. It's brought to light that it's not just my sites, but also the old ones as well as every single web site I've visited on Windows high resolution with Firefox past version 28. I would love to say its only inside this building, but my home computer has the same results. I'm going to chalk it up to a hardware/browser combo issue and move on. For those that can't see the inflation: Chrome: http://i59.tinypic.com/rwnfc6.png Firefox: http://i60.tinypic.com/200cs2d.png @Eric: You are correct, the 62.5% is done for the base10 standardization as this section of the stylesheet is used by non-CSS developers who will simply use PX measurements if it requires any math. I get better compliance and less downstream cludge by making it so. @Felix: The CSS on the Gallup sites are under my control (at launch anyway - after that it escapes until a major evolution/redesign. That site is a first crack at mobile first and is about half the size of the previous traditional desktop first stylesheet. It contains about 1/3 of the typographic fiddling than previously (and has already begun to bloat). The bulk of the weight on that particular stylesheet is in the private pages where there are extremely complex dashboard layouts and wizards. ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] Firefox and page inflation
On 2014-04-07 15:51 (GMT-0400) Tom Livingston composed: Barney Carroll wrote: Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? While feeling a little 'holy war', I'll bite... It's to honor browser/user-set default font size settings. Exactly. Respect for optimal as determined by the viewer, represented by the configured default. If a user has set a larger font size in their browser preferences She may have set a smaller size. Maybe she wants to fit more open windows with less hidden from view in any or all of them. due to less than perfect eyesight, The why is totally irrelevant. Web pages are nearly always viewed on personal computing devices. Personalization is expected, regardless how often it ever goes beyond which wallpaper goes on the desktop to knowing default browser font size can be changed. for example, setting 100% on the HTML element and then sizing elements with relative units will respect the users need for a larger readable text size and allow the text to scale up. Not exactly. Zoom will scale it up, or down. The more important issue is the disregard for optimal, which causes the desire or need for a defensive reaction to the disregard in order to achieve legible and/or optimal and/or comfortable state. Computers have a natural ability to make tasks easier through automation. Disregard for defaults defeats an automation step. Design off the web generally means total control is given the designer. Elsewhere he has total control of all sizing. One of the virtues of the web is that designer control over absolute size ranges between difficult and impossible. And it's unnecessary. Even for a non-web design, apparent size varies with viewing distance. So the important part of design is how it all fits together, the perspective among design components. Those perspectives, no matter how important or trivial, can be reached in web design without attempting to impose any arbitrary absolute size to it or its individual elements. That is done primarily by disposing of use of the arbitrarily sized px, pt, cm, in and related units in favor of units configured by the visitor to suit the visitor, keywords, rem, em %, which improves automation, and reduces reactive activity required of the visitor. The friendly treatment that is respect should translate into a happier and less irritated viewer, which in turn should translate into a more receptive frame of mind, one more likely to lead the viewer to purchase whatever the site is trying to sell, or accept as valid the information provided. Exerting less control is usually easier too. :-) -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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] Firefox and page inflation
On Mon, Apr 7, 2014 at 5:10 PM, Felix Miata mrma...@earthlink.net wrote: On 2014-04-07 15:51 (GMT-0400) Tom Livingston composed: Barney Carroll wrote: Please forgive the impertinent lurker here, but could somebody weigh in with why relative measures are necessary when the desired outcome is pixel-level accuracy? While feeling a little 'holy war', I'll bite... It's to honor browser/user-set default font size settings. Exactly. Respect for optimal as determined by the viewer, represented by the configured default. If a user has set a larger font size in their browser preferences She may have set a smaller size. Maybe she wants to fit more open windows with less hidden from view in any or all of them. due to less than perfect eyesight, The why is totally irrelevant. Web pages are nearly always viewed on personal computing devices. Personalization is expected, regardless how often it ever goes beyond which wallpaper goes on the desktop to knowing default browser font size can be changed. for example, setting 100% on the HTML element and then sizing elements with relative units will respect the users need for a larger readable text size and allow the text to scale up. Not exactly. Zoom will scale it up, or down. The more important issue is the disregard for optimal, which causes the desire or need for a defensive reaction to the disregard in order to achieve legible and/or optimal and/or comfortable state. Computers have a natural ability to make tasks easier through automation. Disregard for defaults defeats an automation step. Design off the web generally means total control is given the designer. Elsewhere he has total control of all sizing. One of the virtues of the web is that designer control over absolute size ranges between difficult and impossible. And it's unnecessary. Even for a non-web design, apparent size varies with viewing distance. So the important part of design is how it all fits together, the perspective among design components. Those perspectives, no matter how important or trivial, can be reached in web design without attempting to impose any arbitrary absolute size to it or its individual elements. That is done primarily by disposing of use of the arbitrarily sized px, pt, cm, in and related units in favor of units configured by the visitor to suit the visitor, keywords, rem, em %, which improves automation, and reduces reactive activity required of the visitor. The friendly treatment that is respect should translate into a happier and less irritated viewer, which in turn should translate into a more receptive frame of mind, one more likely to lead the viewer to purchase whatever the site is trying to sell, or accept as valid the information provided. Exerting less control is usually easier too. :-) Well, yeah. That too. ;-) I was close though... right? -- 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] Firefox and page inflation
Le 5 avr. 2014 à 07:01, Davies, Elizabeth elizabeth_dav...@gallup.com a écrit : Looking for insight into (and potential correction to) the latest Firefox browsers inflating the overall size/resolution of webpages. We use a mobile first responsive upwards, and in the newest Firefox browsers, what is a reasonable font size in every other browser becomes ludicrously large in Firefox on high resolution monitors. From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. But we are doing so in our newest sites. I'd rather not deliver FF specific font sizing, but will if I must. Any ideas? Fixes? Things to avoid? And Le 8 avr. 2014 à 05:41, Davies, Elizabeth elizabeth_dav...@gallup.com a écrit : and this appears to be a Windows OS with Firefox effect. What we're seeing is an overall inflation of the entire page (not just font size). Where on a 1920 resolution screen, Firefox is behaving as if it's at 1280 and using that media query break point instead of continuing on to the higher one. For the same container, Firebug shows a computed width of 1505px / Chrome tools shows a computed width of 1905px on the exact same screen (1920X1080 screen resolution on the device). I hugely appreciate the feedback. It's brought to light that it's not just my sites, but also the old ones as well as every single web site I've visited on Windows high resolution with Firefox past version 28. This old thread probably provides an answer as to the why: http://archivist.incutio.com/viewlist/css-discuss/120466 The above applies to Firefox 22 and up, if I follow the links dates correctly. http://www.mozilla.org/en-US/firefox/22.0beta/releasenotes/ I'm a little puzzled that you say it only happens on Firefox 28 and newer, as I see nothing the release notes that would justify this: https://developer.mozilla.org/en-US/Firefox/Releases/28 No, I don't have a solution and still don't understand what exactly they are doing. The claim is that IE should do exactly the same scaling, but apparently it does not… See also this bug report, where the original implementation happened; scroll down to till the bottom. https://bugzilla.mozilla.org/show_bug.cgi?id=844604 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 1:41 PM, Davies, Elizabeth elizabeth_dav...@gallup.com wrote: Tom sent me some screenshots and is also not seeing the effect on a Mac. I checked around on our in house Macs, and this appears to be a Windows OS with Firefox effect. What we're seeing is an overall inflation of the entire page (not just font size). Where on a 1920 resolution screen, Firefox is behaving as if it's at 1280 and using that media query break point instead of continuing on to the higher one. For the same container, Firebug shows a computed width of 1505px / Chrome tools shows a computed width of 1905px on the exact same screen (1920X1080 screen resolution on the device). Ok, so, to clarify: The problem can be reproduced using Firefox 28 (but what version of Windows)? The demo page is here: https://www.gallupstrengthscenter.com/ With that said, here are some screen shots: 1. Chrome 33, Mavericks OS X: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/chrome-33-mavericks.png 2. Firefox 28, Mavericks OS X: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-28-mavericks.png 3. Firefox 29, Beta, via Browserstack emulation: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-29.0-beta.png 4. Firefox 30.0, Aurora, via Browserstack: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-30.0-aurora.png Maybe it's just me, but the above screens appear to show the same size in terms of overall scale, no? One thing to note: Firefox 29 is marked as Beta via Browserstack. I wonder if this problem will go away when it's officially released? I'm personally interested in this issue because I subscribe to the same font sizing technique(s) ... It would be nice to know how to best reproduce this problem. Maybe I need to preview your site using a high PPI monitor? Let me know if you want more screens from Browserstack. __ 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] Firefox and page inflation
Hello Elizabeth, I tested again this time using FF28 latest Chrome, Canary and IE10 (will boot Win7 later to check IE11). The results are the same - the only diffs I see are due to font rendering as far as I can tell. Based on the material the Philippe posted there may be an issue when using a higher density monitor which I don't have access to (unless I try it on my wife's iPad...when she's not playing WwF that is). However, keep in mind that high density displays are still a tiny fraction of what's being used in the wild. For a little while that is...until 4K takes off. Eric On April 7, 2014 at 4:41 PM Davies, Elizabeth elizabeth_dav...@gallup.com wrote: Tom sent me some screenshots and is also not seeing the effect on a Mac. I checked around on our in house Macs, and this appears to be a Windows OS with Firefox effect. What we're seeing is an overall inflation of the entire page (not just font size). Where on a 1920 resolution screen, Firefox is behaving as if it's at 1280 and using that media query break point instead of continuing on to the higher one. For the same container, Firebug shows a computed width of 1505px / Chrome tools shows a computed width of 1905px on the exact same screen (1920X1080 screen resolution on the device). I hugely appreciate the feedback. It's brought to light that it's not just my sites, but also the old ones as well as every single web site I've visited on Windows high resolution with Firefox past version 28. I would love to say its only inside this building, but my home computer has the same results. I'm going to chalk it up to a hardware/browser combo issue and move on. For those that can't see the inflation: Chrome: http://i59.tinypic.com/rwnfc6.png Firefox: http://i60.tinypic.com/200cs2d.png @Eric: You are correct, the 62.5% is done for the base10 standardization as this section of the stylesheet is used by non-CSS developers who will simply use PX measurements if it requires any math. I get better compliance and less downstream cludge by making it so. @Felix: The CSS on the Gallup sites are under my control (at launch anyway - after that it escapes until a major evolution/redesign. That site is a first crack at mobile first and is about half the size of the previous traditional desktop first stylesheet. It contains about 1/3 of the typographic fiddling than previously (and has already begun to bloat). The bulk of the weight on that particular stylesheet is in the private pages where there are extremely complex dashboard layouts and wizards. ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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/ __ 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] Firefox and page inflation
Mickey, I've tested on Win8 and reported my findings. I'll test later on Win7, but I seriously doubt there will be a diff. Especially on my standard density 1920x1080 screen. Eric On April 7, 2014 at 8:59 PM Micky Hulse mickyhulse.li...@gmail.com wrote: On Mon, Apr 7, 2014 at 1:41 PM, Davies, Elizabeth elizabeth_dav...@gallup.com wrote: Tom sent me some screenshots and is also not seeing the effect on a Mac. I checked around on our in house Macs, and this appears to be a Windows OS with Firefox effect. What we're seeing is an overall inflation of the entire page (not just font size). Where on a 1920 resolution screen, Firefox is behaving as if it's at 1280 and using that media query break point instead of continuing on to the higher one. For the same container, Firebug shows a computed width of 1505px / Chrome tools shows a computed width of 1905px on the exact same screen (1920X1080 screen resolution on the device). Ok, so, to clarify: The problem can be reproduced using Firefox 28 (but what version of Windows)? The demo page is here: https://www.gallupstrengthscenter.com/ With that said, here are some screen shots: 1. Chrome 33, Mavericks OS X: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/chrome-33-mavericks.png 2. Firefox 28, Mavericks OS X: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-28-mavericks.png 3. Firefox 29, Beta, via Browserstack emulation: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-29.0-beta.png 4. Firefox 30.0, Aurora, via Browserstack: https://dl.dropboxusercontent.com/u/1277106/gallupstrengthscenter/firefox-30.0-aurora.png Maybe it's just me, but the above screens appear to show the same size in terms of overall scale, no? One thing to note: Firefox 29 is marked as Beta via Browserstack. I wonder if this problem will go away when it's officially released? I'm personally interested in this issue because I subscribe to the same font sizing technique(s) ... It would be nice to know how to best reproduce this problem. Maybe I need to preview your site using a high PPI monitor? Let me know if you want more screens from Browserstack. __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 6:06 PM, Eric e...@minerbits.com wrote: I've tested on Win8 and reported my findings. I'll test later on Win7, but I seriously doubt there will be a diff. Especially on my standard density 1920x1080 screen. Ah, so it's all based on one having a high PPI monitor? I'm assuming Browserstack is not going to show a problem because it's not high PPI previews. I did not see an option to turn that on either. So, dumb question, but has anyone answered the question as to why Firefox zooms the page when viewing her page on a high resolution monitor? Would be interesting to see a watered down demo page with just enough CSS/HTML to reproduce the problem. That would make finding a fix a bit easier. Unfortunately, I don't have any high PPI monitors to test with. :( -- git.io/micky __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 6:25 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Ah, so it's all based on one having a high PPI monitor? Probably not helpful due to lack of PPI setting/option, but here's a batch of Browserstack automated screens: http://www.browserstack.com/screenshots/3c8d50bc8136a82478b2962853de36f4ca3868a4 Looks like no difference between shots. Would be cool if Browserstack offered a PPI setting. -- git.io/micky __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 6:30 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Looks like no difference between shots. Of course, they don't offer Firefox 28 for the screen shots, so I guess those screens are of no help anyway. Crawling back into my hole now. :D (would still love to see a watered down test page with bare minimum code) __ 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] Firefox and page inflation
On Mon, Apr 7, 2014 at 6:32 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Crawling back into my hole now. :D There's an interesting thread here: How to disable system DPI detection on FireFox 22 https://support.mozilla.org/en-US/questions/962945 Found when searching for firefox high dpi zoom via Google: http://goo.gl/Ki4Pv5 Looks like some good hits related to this topic. __ 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] Firefox and page inflation
Le 8 avr. 2014 à 10:25, Micky Hulse mickyhulse.li...@gmail.com a écrit : So, dumb question, but has anyone answered the question as to why Firefox zooms the page when viewing her page on a high resolution monitor? I answered that about 40 minutes before you sent this email… Would be interesting to see a watered down demo page with just enough CSS/HTML to reproduce the problem. Most minimal test case I can think: http://dev.l-c-n.com/_temp/cssd-20140408.html (If -in Firefox- a minimum font-size is set to anything higher than 10px, the test will fail insofar as the first paragraph will be larger than the second one. But that is not the issue at hand. [*]) I'd be curious if anyone can reproduce the issue with Elisabeth’s site on a rMBP with windows 7+ running in a VM, btw. -- Fwiw, the relevant Windows / HighDpi bug for Google Chrome (still open, afaict): https://code.google.com/p/chromium/issues/detail?id=149881 [*] the 62.5% hack is evil… 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] Firefox and page inflation
On Apr 7, 2014, at 8:25 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: On Mon, Apr 7, 2014 at 6:06 PM, Eric e...@minerbits.com wrote: I've tested on Win8 and reported my findings. I'll test later on Win7, but I seriously doubt there will be a diff. Especially on my standard density 1920x1080 screen. Ah, so it's all based on one having a high PPI monitor? I'm assuming Browserstack is not going to show a problem because it's not high PPI previews. I did not see an option to turn that on either. So, dumb question, but has anyone answered the question as to why Firefox zooms the page when viewing her page on a high resolution monitor? Would be interesting to see a watered down demo page with just enough CSS/HTML to reproduce the problem. That would make finding a fix a bit easier. Unfortunately, I don't have any high PPI monitors to test with. :( -- git.io/micky Quick question, but wouldn't setting zoom: 1; on the HTML or body keep browsers from resizing on their own? Kind of like the whole font-size:100%. Thus keeping this resizing issues from happening with the page and fonts? Sorry if I am misunderstanding the issue. Best, Karl __ 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] Firefox and page inflation
On Apr 4, 2014, at 6:38 PM, Felix Miata mrma...@earthlink.net wrote: On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed: Looking for insight into (and potential correction to) the latest Firefox browsers inflating the overall size/resolution of webpages. We use a mobile first responsive upwards, and in the newest Firefox browsers, what is a reasonable font size in every other browser becomes ludicrously large in Firefox on high resolution monitors. From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. But we are doing so in our newest sites. I'd rather not deliver FF specific font sizing, but will if I must. Any ideas? Fixes? Things to avoid? You're using px for sizing text and its containers, right? If yes, stop doing that, and the problem will disappear. In the first place, it's only the user who is in position to determine reasonable font size, which size is presumptively the size configured as her personalizable browser default, CSS medium. When you respect a user's default by leaving the base size unaltered, and only apply relative sizing via keywords, em, rem or % to elements that actually need a contextual sizing adjustment, the integers-only Gecko device px to CSS px ratio and display density/high resolution are non-issues. The math involved with not using px is simple enough. Just think of one px as .0625rem (1/16). If you want a block to be 960px wide, divide by 16, which makes it 60rem. In viewports in which the as-shipped 16px default remains in effect, 60rem will be 960px, while in those using higher densities, more px will be used, but your design proportions will be preserved. -- As usual, Felix provides excellent advice. Let me add that you should also define your images dimensions by the same em standard, as demonstrated here: http://sperling.com/examples/zoom/ Cheers, tedd ___ tedd sperling t...@sperling.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-d] Firefox and page inflation
Looking for insight into (and potential correction to) the latest Firefox browsers inflating the overall size/resolution of webpages. We use a mobile first responsive upwards, and in the newest Firefox browsers, what is a reasonable font size in every other browser becomes ludicrously large in Firefox on high resolution monitors. From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. But we are doing so in our newest sites. I'd rather not deliver FF specific font sizing, but will if I must. Any ideas? Fixes? Things to avoid? ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] Firefox and page inflation
Could you please post a URL to an example? Thanks On April 4, 2014 at 6:01 PM Davies, Elizabeth elizabeth_dav...@gallup.com wrote: Looking for insight into (and potential correction to) the latest Firefox browsers inflating the overall size/resolution of webpages. We use a mobile first responsive upwards, and in the newest Firefox browsers, what is a reasonable font size in every other browser becomes ludicrously large in Firefox on high resolution monitors. From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. But we are doing so in our newest sites. I'd rather not deliver FF specific font sizing, but will if I must. Any ideas? Fixes? Things to avoid? ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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/ __ 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] Firefox and page inflation
On 2014-04-04 22:01 (GMT) Davies, Elizabeth composed: Looking for insight into (and potential correction to) the latest Firefox browsers inflating the overall size/resolution of webpages. We use a mobile first responsive upwards, and in the newest Firefox browsers, what is a reasonable font size in every other browser becomes ludicrously large in Firefox on high resolution monitors. From what I'm seeing on the dev pages, this is intentional for sites that do not use large font sizing (most) at the high resolutions. But we are doing so in our newest sites. I'd rather not deliver FF specific font sizing, but will if I must. Any ideas? Fixes? Things to avoid? You're using px for sizing text and its containers, right? If yes, stop doing that, and the problem will disappear. In the first place, it's only the user who is in position to determine reasonable font size, which size is presumptively the size configured as her personalizable browser default, CSS medium. When you respect a user's default by leaving the base size unaltered, and only apply relative sizing via keywords, em, rem or % to elements that actually need a contextual sizing adjustment, the integers-only Gecko device px to CSS px ratio and display density/high resolution are non-issues. The math involved with not using px is simple enough. Just think of one px as .0625rem (1/16). If you want a block to be 960px wide, divide by 16, which makes it 60rem. In viewports in which the as-shipped 16px default remains in effect, 60rem will be 960px, while in those using higher densities, more px will be used, but your design proportions will be preserved. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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/
