Re: [css-d] Don't miss a space
Should I use srcset, picture or picturefill for images. I've read if you use picturefill as an alternative you can use picture ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 7:50 PM This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 7:46 PM How do you accommodate most, if not all screen sizes. For example iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other smart phones fall in-between, I did not include Phablets, and tablets. I suppose using SASS, although I don't have experience using SASS you could do a condition whereas one MQ could somehow fill in the pixel gaps between an iPhone5 and a Nexus 4, or no ? Christopher __ 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] Don't miss a space
I don't seek to excuse such an error for one second, but there is an important difference between the two : the Wordpress site is written in XHTML 1.0 Transitional, a stable specification against which the Validator can check pages accurately; the W3C site, on the other hand, is written in HTML 5, a work in progress, and as both the draft specification and the validator can (and do) change on a daily basis, validation here is very much a moving target. One error is indeed inexcusable : Error Line 9, Column 39: No space between attributes. link rel=stylesheet type=text/cssmedia=handheld, only screen and (max-dev… the others may well have been valid at some point in time. Philip Taylor Jon Reece wrote: Apparently, even the W3C have trouble keeping all of their pages passing validation ;) http://validator.w3.org/check?uri=http://www.w3.org/blog/dpub/2014/10/01/new-draft-for-the-requirements-for-latin-text-layout-and-pagination-published/ __ 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] Don't miss a space
Though this discussion is interesting (as it is every 6 months when it comes back again) it isn't really on the topic of CSS. Any other thoughts for Christopher about media queries? On Tue, Nov 25, 2014, 6:58 AM Philip Taylor p.tay...@rhul.ac.uk wrote: I don't seek to excuse such an error for one second, but there is an important difference between the two : the Wordpress site is written in XHTML 1.0 Transitional, a stable specification against which the Validator can check pages accurately; the W3C site, on the other hand, is written in HTML 5, a work in progress, and as both the draft specification and the validator can (and do) change on a daily basis, validation here is very much a moving target. One error is indeed inexcusable : Error Line 9, Column 39: No space between attributes. link rel=stylesheet type=text/cssmedia=handheld, only screen and (max-dev… the others may well have been valid at some point in time. Philip Taylor Jon Reece wrote: Apparently, even the W3C have trouble keeping all of their pages passing validation ;) http://validator.w3.org/check?uri=http://www.w3.org/blog/ dpub/2014/10/01/new-draft-for-the-requirements-for-latin- text-layout-and-pagination-published/ __ 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] Don't miss a space
Tim Arnold wrote: Though this discussion is interesting (as it is every 6 months when it comes back again) it isn't really on the topic of CSS. Any other thoughts for Christopher about media queries? Media queries are an attempt to pigeon-hole browser geometries into discrete sets. As the number of such sets is finite but unbounded (and grows on a daily basis), effort would be far better expended on designing a framework that adjust itself to accommodate /any/ browser geometry without requiring arbitrary /a priori/ division of the universe of browser geometries into finite sets. Discuss. 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] Don't miss a space
Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. On Tue, Nov 25, 2014 at 7:20 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tim Arnold wrote: Though this discussion is interesting (as it is every 6 months when it comes back again) it isn't really on the topic of CSS. Any other thoughts for Christopher about media queries? Media queries are an attempt to pigeon-hole browser geometries into discrete sets. As the number of such sets is finite but unbounded (and grows on a daily basis), effort would be far better expended on designing a framework that adjust itself to accommodate /any/ browser geometry without requiring arbitrary /a priori/ division of the universe of browser geometries into finite sets. Discuss. 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] Don't miss a space
Tom Livingston wrote: Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. Nonsense. Media queries are a part of the CSS infrastructure, and they were the subject of my message. And their use (or abuse) certainly requires discussion here if Christopher is not to waste months of his life trying to pigeon-hole his designs into a finite number of disjoint sets only to find that the number of such sets has significantly increased by the time he gets to deploy his design. 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] Don't miss a space
On Tue Nov 25 2014 at 7:32:58 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS. Nonsense. Media queries are a part of the CSS infrastructure, and they were the subject of my message. And their use (or abuse) certainly requires discussion here if Christopher is not to waste months of his life trying to pigeon-hole his designs into a finite number of disjoint sets only to find that the number of such sets has significantly increased by the time he gets to deploy his design. Philip Taylor True. I was under the impression the topic of your prior comment was still Wordpress and how it could be improved. I missed the transition back to Christopher's problem. __ 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] Don't miss a space
I have a question, how do I eliminate the white space between the orange
box and the red box, I've tried or so I believe I tried nearly
everything and it won't disappear ?
At first I thought it was padding or margins, so I set either and
both red and orange box to {margin-top/bottom:padding:0 or margin:0}
that did not solve this issue.
As well, when a break point comes into effect, does anyone else see
overlapping text on the grey box ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Tuesday, November 25, 2014 8:18 AM
True. I was under the impression the topic of your prior comment was still
Wordpress and how it could be improved. I missed the transition back to
Christopher's problem.
__
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/
Philip Taylor mailto:p.tay...@rhul.ac.uk
Tuesday, November 25, 2014 7:32 AM
Tom Livingston wrote:
Nonsense. Media queries are a part of the CSS infrastructure, and
they were the subject of my message. And their use (or abuse)
certainly requires discussion here if Christopher is not to waste
months of his life trying to pigeon-hole his designs into a finite
number of disjoint sets only to find that the number of such sets has
significantly increased by the time he gets to deploy his design.
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/
Tom Livingston mailto:tom...@gmail.com
Tuesday, November 25, 2014 7:25 AM
Discuss. On webdesign-l. Or off list. As Tim said, this isn't CSS.
__
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/
Philip Taylor mailto:p.tay...@rhul.ac.uk
Tuesday, November 25, 2014 7:20 AM
Tim Arnold wrote:
Media queries are an attempt to pigeon-hole browser geometries into
discrete sets. As the number of such sets is finite but unbounded
(and grows on a daily basis), effort would be far better expended on
designing a framework that adjust itself to accommodate /any/ browser
geometry without requiring arbitrary /a priori/ division of the
universe of browser geometries into finite sets. Discuss.
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/
Tim Arnold mailto:tim.arn...@gmail.com
Tuesday, November 25, 2014 7:10 AM
Though this discussion is interesting (as it is every 6 months when it
comes back again) it isn't really on the topic of CSS. Any other thoughts
for Christopher about media queries?
__
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] Don't miss a space
On Tue, Nov 25, 2014 at 9:59 AM, Crest Christopher crestchristop...@gmail.com wrote: I have a question, ...trimmed] Put the markup and css of the page in question on a public server and provide a link to it in your post to the list. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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] Don't miss a space
nov 25 2014 07:38 Karl DeSaulniers k...@designdrumm.com: In regards to what you asked here, If they are using these plugins and actually fixing any errors they find, then yes I know (without pretension) their code will be valid. It's the reason these plugins were created. lol So your inference here is that if you validate CSS (or HTML) code with a tool, read the error list produced and proceed to fix those errors and revalidate until there are no errors, then the resulting code will be 100% compliant? If so. I think it’s safe to assume here that inference probably can be verified to be true in repeated testing. However, you’re assuming here that the CMS itself is put together in such a way that a dynamic page can never be put together with HTML and CSS that is nothing but perfectly fitted together in a balanced union, even as the CSS exists in one minified external style sheet and the HTML is built from many parts that could come into conflict of one another. To get into the detail of what could go wrong in a CMS in this area is beyond the scoop of this discussion and this list, but I’d say it’s a quite burdensome task to build a CMS where a scenario where there is some mismatch cannot happen and even if it could be done with some effort that would likely come with the price of a certain amount of inflexibility, that may not be very attractive in a CMS. I suppose it could work in a specific purpose-built system. But in a general system like Wordpress? __ 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] Don't miss a space
Hi Guys, Pardon me while I interject, but if your using Wordpress, CSS Javascript toolbox (CJT) wont let you get away with bad code. :) They even have an advanced theme and plugin editor that will show you if someone's plugin has bad code and give you descriptions of the error. https://wordpress.org/plugins/css-javascript-toolbox/ https://wordpress.org/plugins/cjte-advanced-plugins-editor/ https://wordpress.org/plugins/cjte-advanced-theme-editor/ Now back to your regularly scheduled programming... Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 24, 2014, at 12:00 AM, MiB digital.disc...@gmail.com wrote: tools PREVENTS you from doing mistakes? So what are these tools then? __ 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] Don't miss a space
If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well as a responsive container/div now turned into an extremely narrow container/div that looks horrible ? Christopher __ 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] Don't miss a space
What do you mean, make images width:100% like this;
img {width:100%} ?
With regards to the image in a div I assume you mean this;
divimg/img/div
div {width:76%} ?
In other words the image will scale without multiple resolutions of the
same image ?
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you
can have size up or down respectfully.
If when resizing the viewport your image gets too big or too small,
then set a MQ with a min-width or max-width;
Karl DeSaulniers mailto:k...@designdrumm.com
Sunday, November 23, 2014 8:26 PM
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you
can have size up or down respectfully.
If when resizing the viewport your image gets too big or too small,
then set a MQ with a min-width or max-width;
IMO... NEVER set a max-width on an img itself.
2¢
Here is somthing I got when I went looking on Google for this same info.
CSS-Tricks:
/*CSS @media skeleton by Tirumal - April 28, 2013 -
http://code-tricks.com/css-media-queries-for-common-devices/*/
@charset UTF-8;
/*Most Popular Screen Resolutions
Desktops Laptops
1024×768 and higher
iPhone
5: 1136×640
4S: 640×960
3GS: 320×480
iPad
First second generations: 1024×768
Third generation: 2048×1536
iPad Mini
1024×768
Android Phones Tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px
wide.
When designing for them, however, it is typical for developers to
break them
into the following groups based on their Density-independent pixel (dp),
which is the minimum screen size.
Small screens: 426dp x 320dp
Normal screens: 470dp x 320dp
Large screens: 640dp x 480dp
Extra-large screens: 960dp x 720dp*/
/* All Smartphones in portrait and landscape --- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape --- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait --- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/* ANDROID DEVICES */
/* Android 240 X 320 --- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 --- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 --- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 --- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 --- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/* ALL GENERATION IPADS */
/* iPads in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/* Retina IPAD 3 4*/
/* Retina iPad 3 4 in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* IPAD 1 2 (ALSO IPAD MINI)*/
/* iPad 1 2 in portrait and landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and
Re: [css-d] Don't miss a space
What do you mean, make images width:100% like this;
img {width:100%} ?
With regards to the image in a div I assume you mean this;
divimg/img/div
div {width:76%} ?
In other words the image will scale without multiple resolutions of the
same image ?
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you
can have size up or down respectfully.
If when resizing the viewport your image gets too big or too small,
then set a MQ with a min-width or max-width;
__
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] Don't miss a space
On Mon Nov 24 2014 at 9:30:08 AM Crest Christopher
crestchristop...@gmail.com wrote:
What do you mean, make images width:100% like this;
img {width:100%} ?
With regards to the image in a div I assume you mean this;
divimg/img/div
div {width:76%} ?
In other words the image will scale without multiple resolutions of the
same image ?
Use that with caution. Don't deliver a 4000px wide image to a phone and
don't scale a 200px wide image to 960px wide on your desktop.
see picturefill.js http://scottjehl.github.io/picturefill/
__
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] Don't miss a space
On Mon Nov 24 2014 at 9:27:25 AM Crest Christopher crestchristop...@gmail.com wrote: as a responsive container/div now turned into an extremely narrow container/div that looks horrible ? Christopher Enter Media Queries stage left and... ACTION! On small screens, you'd have a different layout so as to avoid this. Stack your columns instead of side-by-side. When the viewport is wide enough to support side-by-side columns that aren't ridiculously narrow, add a breakpoint and add styles at that point to reposition the stacked columns to be side-by-side. __ 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] Don't miss a space
When I divide the a container/div, suppose one of my containers/div which is 360px in width by lets say extremely large 4096px the result is a 11.3% container/div on a 360px width device the container/div is not even a container/div any longer rather a long, slim rectangular box, that is why I said, in this scenario I have to use MQ instead of percentages. Christopher Tom Livingston mailto:tom...@gmail.com Monday, November 24, 2014 9:47 AM Um, not necessarily. Your stacked columns that I mentioned could be 90% of the viewport, for example, so as to give you a nice margin on the right and left (using margin 0 auto 0 auto;). That 90% could continue up to the point that the layout can support side-by-side. Tom Livingston mailto:tom...@gmail.com Monday, November 24, 2014 9:40 AM crestchristop...@gmail.com mailto:crestchristop...@gmail.com as a responsive container/div now turned into an extremely narrow container/div that looks horrible ? Christopher Enter Media Queries stage left and... ACTION! On small screens, you'd have a different layout so as to avoid this. Stack your columns instead of side-by-side. When the viewport is wide enough to support side-by-side columns that aren't ridiculously narrow, add a breakpoint and add styles at that point to reposition the stacked columns to be side-by-side. Crest Christopher mailto:crestchristop...@gmail.com Monday, November 24, 2014 9:27 AM If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well as a responsive container/div now turned into an extremely narrow container/div that looks horrible ? Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 8:29 PM I don't recommend using all of these 'just because'. Good info though. On Sun, Nov 23, 2014 at 8:27 PM Karl DeSaulniers k...@designdrumm.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] Don't miss a space
nov 24 2014 12:26 Karl DeSaulniers k...@designdrumm.com: Hi Guys, Pardon me while I interject, but if your using Wordpress, CSS Javascript toolbox (CJT) wont let you get away with bad code. :) They even have an advanced theme and plugin editor that will show you if someone's plugin has bad code and give you descriptions of the error. Yes, that is definitely impressive. I’ll give you that. Unfortunately that will not prevent developers from posting laughable and invalid code in Wordpress anyway. Wordpress is one of the CMSes where you often can find the worst code on the internet. IMHO structurally unsound code is much worse than a stray surplus coding tag that hardly is affecting the site experience as much as the former. It can certainly look bad depending on the actual effect. But I digress. I keep forgetting to just talk CSS. Sorry about that. After all CSS is more interesting. __ 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] Don't miss a space
Laughable maybe, invalid NO. Whole reason for my post. Best, Karl Sent from losPhone On Nov 24, 2014, at 12:38 PM, MiB digital.disc...@gmail.com wrote: nov 24 2014 12:26 Karl DeSaulniers k...@designdrumm.com: Hi Guys, Pardon me while I interject, but if your using Wordpress, CSS Javascript toolbox (CJT) wont let you get away with bad code. :) They even have an advanced theme and plugin editor that will show you if someone's plugin has bad code and give you descriptions of the error. Yes, that is definitely impressive. I’ll give you that. Unfortunately that will not prevent developers from posting laughable and invalid code in Wordpress anyway. Wordpress is one of the CMSes where you often can find the worst code on the internet. IMHO structurally unsound code is much worse than a stray surplus coding tag that hardly is affecting the site experience as much as the former. It can certainly look bad depending on the actual effect. But I digress. I keep forgetting to just talk CSS. Sorry about that. After all CSS is more interesting. __ 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] Don't miss a space
Karl DeSaulniers wrote: Laughable maybe, invalid NO. http://validator.w3.org/check?uri=https://.wordpress.com/ Very first site I tried. 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] Don't miss a space
On Mon, Nov 24, 2014 at 6:20 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: Karl DeSaulniers wrote: Laughable maybe, invalid NO. http://validator.w3.org/check?uri=https://.wordpress.com/ Very first site I tried. Apparently, even the W3C have trouble keeping all of their pages passing validation ;) http://validator.w3.org/check?uri=http://www.w3.org/blog/dpub/2014/10/01/new-draft-for-the-requirements-for-latin-text-layout-and-pagination-published/ -- Jon Reece jon.re...@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] Don't miss a space
nov 25 2014 00:03 Karl DeSaulniers k...@designdrumm.com: Laughable maybe, invalid NO. Whole reason for my post. OK, but I find it a tad pretentious to argue you know the specific code of hundreds of thousands of web sites built with Word press. You obviously do not know this and neither do I. We just have differing experiences there of actual code in the wild. What I find more likely is that you’ve found that the features of Wordpress, since version something that you describe, helps you know that your Wordpress-built sites doesn’t contain validation errors. And that’s a good thing of course. __ 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] Don't miss a space
nov 25 2014 00:39 Jon Reece jon.re...@gmail.com: Apparently, even the W3C have trouble keeping all of their pages passing validation ;) Unless it’s intentional. Maybe they’re just not using Wordpress? __ 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] Don't miss a space
Not talking about Wordpress itself, I'm talking about pages you build IN Wordpress for your own site. lol. Wordpress itself is a mess. But people who pay the bills use it and want me to edit on it. so these tools have helped me keep error free for the most part. Haven't used it long enough to know if it is 100%, but its better then 0%. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 24, 2014, at 5:20 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: Karl DeSaulniers wrote: Laughable maybe, invalid NO. http://validator.w3.org/check?uri=https://.wordpress.com/ Very first site I tried. 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] Don't miss a space
On Nov 24, 2014, at 10:06 PM, MiB digital.disc...@gmail.com wrote: nov 25 2014 00:03 Karl DeSaulniers k...@designdrumm.com: Laughable maybe, invalid NO. Whole reason for my post. OK, but I find it a tad pretentious to argue you know the specific code of hundreds of thousands of web sites built with Word press. You obviously do not know this and neither do I. We just have differing experiences there of actual code in the wild. Hi MiB, Not sure how you got all that from my post. When did I argue I knew that? I just simply gave an example of a tool that helps people write valid code in Wordpress (a CMS). You asked Phillip what tools he used. I just happened to be looking at these at the exact moment you asked that question. Seemed like fate. So I shared. In regards to what you asked here, If they are using these plugins and actually fixing any errors they find, then yes I know (without pretension) their code will be valid. It's the reason these plugins were created. lol What I find more likely is that you’ve found that the features of Wordpress, since version something that you describe, helps you know that your Wordpress-built sites doesn’t contain validation errors. And that’s a good thing of course. Exactly ;) I think what is the fundamental problem here and the reason things like CMSs exist is because not enough people are being educated correctly on how to do all this stuff, but the machine waits for nobody and so people learn on the fly, make mistakes and someone else or themselves have to come fix it. They create these CMSs so others don't have to learn how to do all that other stuff and its easier to keep up with the machine. However, if your going to be putting together a CMS for others to use and advertise it as a solid CMS, then I would have to say those Dev's need to be on top of their game. No room for mistakes. At the very least make sure the home page has no flaws. But now I am OT and will digress. Best, Karl DeSaulniers Design Drumm http://designdrumm.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] Don't miss a space
nov 25 2014 07:38 Karl DeSaulniers k...@designdrumm.com: However, if your going to be putting together a CMS for others to use and advertise it as a solid CMS, then I would have to say those Dev's need to be on top of their game. No room for mistakes. At the very least make sure the home page has no flaws. Yes, I agree with this. But of course it can also be argued that 100% validation is seldom the primary objective. If the site works without user issues, which in my case means all automatic GUI tests pass and no reports are coming in of malfunction, then the site is working. Whether it also validates fully may be a moot point and not be considered a flaw” out of a business perspective. I’ve been forced to kicking and screaming have to publish sites that didn’t fully validate, but if I can help it I won’t allow this myself. I just know there’s fine but distinct line between what can constitute both a technical and a business flaw. Because a specific web page may have these outcomes: 1. It may fulfill the business requirements and be technically without (known) flaws (Best IMHO) 2. it may fulfill the business requirements and have technical flaws that does not affect the former (Acceptable) 3. it may fail to fulfill the business requirements and be technically without (known) flaws (Unacceptable) 4. it may fail to fulfill the business requirements and have technical flaws that affects the former or not (Unacceptable) The outcomes 2 and 3 illustrates my point, I think. I try not to worry too much about if my CSS and HTML code validates, but usually it does. __ 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] Don't miss a space
23 nov 2014 kl. 03:14 skrev Crest Christopher crestchristop...@gmail.com:
Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container the
size of the image
If you must use images, there’s stuff like the classic ”Sliding doors”
technique. I usually blend images with CSS3 so the middle ground is all CSS and
the images only enhance the main design.
__
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] Don't miss a space
Tim Arnold wrote: This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Hmmm. I followed the link, and it appeared in my browser window which occupied the right half of my screen (your message appears on the left); all is visibly not very well ... https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0 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] Don't miss a space
On Sun, Nov 23, 2014 at 5:31 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Tim Arnold wrote: This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Hmmm. I followed the link, and it appeared in my browser window which occupied the right half of my screen (your message appears on the left); all is visibly not very well ... https://www.dropbox.com/s/8qfsk1qhoipekyw/Screenshot%202014-11-23%2010.28.53.png?dl=0 Philip Taylor No issue seen this end Windows SeaMonkey/2.30. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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] Don't miss a space
David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. __ 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] Don't miss a space
On Nov 23, 2014 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. You are correct Phil, there are a few widths on the way down where things overlap a bit. There is an A/B test currently running that displays a different herospace image and layout of the form and three blocks. As a result of having to pull off three designs with the same markup there are simply more variables than we could reasonably account for. As a result I accepted that there would be some discrepancies (as you have observed) and as long as they did not prevent the user from interacting with the form and, more importantly, did not occur on the actual devices we tested on, that they were acceptable. It is definitely not ideal. This site was a pretty fun challenge: The design is not mine and Drupal presents some interesting hurdles as far as the markup goes. Trying to pull this off with those constraints was actually pretty fun. Come Monday, I'll see if I can dial in the behavior you noted, Phil. Thanks for the feedback. Tim __ 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] Don't miss a space
On Sun, Nov 23, 2014 at 6:52 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: David Laakso wrote: No issue seen this end Windows SeaMonkey/2.30. Unless your browser / geometry / font settings / font scaling / screen resolution / a million other possibilities are identical to mine, David, you may not see the same artifacts. My point was not that all viewers will see the artifacts that I did, but that others /might/, and therefore an investigation into what triggers that particular aberrant behaviour might be worthwhile. I find it trivial to replicate by starting with my browser full-screen and then slowly narrowing it until the panels start to overlap. ** Phil. Granted. Cruel and unusual punishment, though. Just getting Drupal to work at default is enough to tax even Leonardo... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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] Don't miss a space
On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com wrote: I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! 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] Don't miss a space
nov 23 2014 13:40 David Laakso laakso.davi...@gmail.com: Just getting Drupal to work at default is enough to tax even Leonardo… I think that might be why Perch http://grabaperch.com/ was invented. __ 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] Don't miss a space
MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /divfooter role=contentinfo 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] Don't miss a space
I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. __ 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] Don't miss a space
While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. On Sun, Nov 23, 2014 at 10:50 AM Crest Christopher crestchristop...@gmail.com wrote: I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. __ 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] Don't miss a space
On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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] Don't miss a space
Tom Tim - I forgot about the mobile tools in Chrome, they are pretty good, I wonder if you can add devices, my phone is not listed. Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:01 AM While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 10:49 AM I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 7:49 AM On Sunday, November 23, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Absolutely correct , Christopher ;) Make sure it works at any width regardless of device and also focus on popular devices. This is the dichotomy I am faced with every day. When I have control over the design it tends to be more simple, but working on a team it's never so straightforward. Making the site flow perfectly at every width regardless of device is the ideal I work toward. When I have to rely on MQs and trickier tricks, I recognize the failure, try to do my best, and test on devices. It is confusing, you are totally right. The one should make the other unnecessary, but things are often more complicated. And fun! Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 12:36 AM I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher __ 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] Don't miss a space
Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM Tom Tim - I forgot about the mobile tools in Chrome, they are pretty good, I wonder if you can add devices, my phone is not listed. Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:01 AM While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 10:49 AM I suppose I must begin testing on different devices immediately so break points can be inserted. Otherwise I'm afraid I'll be far along in development only to realize I'd have to go backwards causing all kinds of frustrations. What are the popular devices ? Christophers __ 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] Don't miss a space
On Nov 23, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /div footer role=contentinfo Philip Taylor LOL! Karl DeSaulniers Design Drumm http://designdrumm.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] Don't miss a space
On Nov 23, 2014, at 10:29 AM, Crest Christopher crestchristop...@gmail.com
wrote:
Tom Tim - I forgot about the mobile tools in Chrome, they are pretty good,
I wonder if you can add devices, my phone is not listed.
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive layout
mode. VERY helpful.
One thing I have found to be a good method with images is to make them width:
100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you can have
size up or down respectfully.
If when resizing the viewport your image gets too big or too small, then set a
MQ with a min-width or max-width;
IMO... NEVER set a max-width on an img itself.
2¢
Here is somthing I got when I went looking on Google for this same info.
CSS-Tricks:
/*CSS @media skeleton by Tirumal - April 28, 2013 -
http://code-tricks.com/css-media-queries-for-common-devices/*/
@charset UTF-8;
/*Most Popular Screen Resolutions
Desktops Laptops
1024×768 and higher
iPhone
5: 1136×640
4S: 640×960
3GS: 320×480
iPad
First second generations: 1024×768
Third generation: 2048×1536
iPad Mini
1024×768
Android Phones Tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px wide.
When designing for them, however, it is typical for developers to break them
into the following groups based on their Density-independent pixel (dp),
which is the minimum screen size.
Small screens: 426dp x 320dp
Normal screens: 470dp x 320dp
Large screens: 640dp x 480dp
Extra-large screens: 960dp x 720dp*/
/* All Smartphones in portrait and landscape --- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape --- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait --- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/* ANDROID DEVICES */
/* Android 240 X 320 --- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 --- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 --- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 --- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 --- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/* ALL GENERATION IPADS */
/* iPads in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/* Retina IPAD 3 4*/
/* Retina iPad 3 4 in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* IPAD 1 2 (ALSO IPAD MINI)*/
/* iPad 1 2 in portrait and landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in portrait --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops --- */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}
/* Large screens ---
Re: [css-d] Don't miss a space
I don't recommend using all of these 'just because'. Good info though.
On Sun, Nov 23, 2014 at 8:27 PM Karl DeSaulniers k...@designdrumm.com
wrote:
On Nov 23, 2014, at 10:29 AM, Crest Christopher
crestchristop...@gmail.com wrote:
Tom Tim - I forgot about the mobile tools in Chrome, they are pretty
good, I wonder if you can add devices, my phone is not listed.
Christopher
Hi Christopher
With firefox, you can set different screen sizes in their responsive
layout mode. VERY helpful.
One thing I have found to be a good method with images is to make them
width: 100%
and then wrap them in a div and set the images size with the div.
Also, set the images div's size in percentages based on that div's parent
and you will then have a fluid/liquid image in a container that you can
have size up or down respectfully.
If when resizing the viewport your image gets too big or too small, then
set a MQ with a min-width or max-width;
IMO... NEVER set a max-width on an img itself.
2¢
Here is somthing I got when I went looking on Google for this same info.
CSS-Tricks:
/*CSS @media skeleton by Tirumal - April 28, 2013 -
http://code-tricks.com/css-media-queries-for-common-devices/*/
@charset UTF-8;
/*Most Popular Screen Resolutions
Desktops Laptops
1024×768 and higher
iPhone
5: 1136×640
4S: 640×960
3GS: 320×480
iPad
First second generations: 1024×768
Third generation: 2048×1536
iPad Mini
1024×768
Android Phones Tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px wide.
When designing for them, however, it is typical for developers to break
them
into the following groups based on their Density-independent pixel (dp),
which is the minimum screen size.
Small screens: 426dp x 320dp
Normal screens: 470dp x 320dp
Large screens: 640dp x 480dp
Extra-large screens: 960dp x 720dp*/
/* All Smartphones in portrait and landscape --- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape --- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait --- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/* ANDROID DEVICES */
/* Android 240 X 320 --- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 --- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 --- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 --- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 --- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/* ALL GENERATION IPADS */
/* iPads in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/* Retina IPAD 3 4*/
/* Retina iPad 3 4 in portrait and landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 4 in landscape--- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* IPAD 1 2 (ALSO IPAD MINI)*/
/* iPad 1 2 in portrait and landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in landscape --- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 2 in portrait --- */
@media only screen
and (min-device-width : 768px)
and
Re: [css-d] Don't miss a space
nov 23 2014 17:58 Crest Christopher crestchristop...@gmail.com: Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Just pick a few numbers and resize upwards slowly from the smallest and watch what happens with your design. Pick breaking points where you have notice serious layout issues and adjust it going from there. In the beginning you probably can just start out with the MQs in any of the available mobile boilerplates, also if you don’t use these in full, and take it from there. It’s better to just start with just a few MQs and a really simple layout than to ponder on what to do. Experiment! Again, I’d argue that it’s always best to let the content guide the design. Acknowledging content gives you limitations on what you can do, which should stimulate your design creativity. And mobile design is even more about the content itself. __ 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] Don't miss a space
Crest Christopher composed on 2014-11-22 19:46 (UTC-0500): How do you accommodate most, if not all screen sizes. Let the browser produce its innate functionality at instead of constraining it: 1-Pretend px, pt, cm, mm, in and other non-relative units do not exist in CSS. 2-With one exception, which you can take care of with one MQ, care not how wide the viewport is. The exception is to query for landscape vs portrait, where in the latter you may want to drop one or more columns below or above instead of placing beside. #1 you can't do entirely, but it shouldn't be your sizing focus, because, sizing in px,: A-your focus is on a unit that disregards the nearly infinite possible physical permutations of user screen characteritics (width, height, pixel density, luminosity, viewing distance, etc.) B-makes you work harder doing things the computer is supposed to do (easily, and accurately) instead of you How many MQ breakpoints are you going to have, for both portrait and landscape, when the tiniest screens remain only 120px wide (in portrait) but the most dense have grown to well upwards 20 times that? Granted, a CSS px isn't the same thing as a device px, or at least, often won't be. Why should you concern yourself with whether or not or how much if it isn't necessary to get the perspectives you want? Regardless the ratio between them on any particular screen, the px unit still disregards the user completely, taking absolutely no account of how big the user wants or needs things on his screen to be in order to be useful. The angular definition of a CSS px in the standard doesn't address size in terms of what a user needs or wants. Unless you and your users are in position to agree on px sizes that work, it's rude for you to assume they work for anyone else but you. That the px unit ever got into CSS for any purpose except pixmap management was a travesty. You'll still need px for math to arrive at the image sizes you'll use, once per image placement. You'll also use px, again once, for each screen you test with, to determine how many px it takes on your own screen(s) to make up one unit of the size that is your sizing focus. That unit can be any of em, rem or ex, or a mixture of any of the three. Percent you'll use only secondarily. If your development screen's browser default size in px is 32, and its fullscreen viewport width 2548 (give or take, 2560 screen resolution), you get 79.625rem units of width to work with. If you want main content width, e.g. full paragraphs, to use roughly half *your* screen width, you make your P or P container 40rem wide. If you want a left column to be about 20% of your screen width, 20% of ~80 is 16rem. Add main and column together to get a 56rem outer container width. If you want an image inset to the right side of paragraph to be 50% of the paragraph width, declare width: 50%. If you want it centered, do it same as always. When you're done, whatever whitespace remains at the sides are whatever it is. Who cares? Your content is the size you made it, based on your local environment, to produce the perspectives that are the essence of your design. Now the guy with a different size and density screen loads your page, yet the same perspectives result. Instead of you, the computer calculated how many px it took to do it, the same way it did on yours. If his default font size is 16px, the size in px will be less, yet it will be based on a physical size he chose, and the content will have the same *relationships*, same look, same perspectives, you chose, maybe with wider or narrower whitespace beside content because his screen's aspect ratio is different from yours, but the main content will still be 40rem wide, the left column will still be 16rem wide, and the image will still be 50% the width of the paragraph, all nice-sized from viewer's perspective, because the foundational size (1rem) is the very size he found optimal (presumptively, which is why his browser default is set to it, whether actively so or not). He doesn't need zoom, and you and/or MQ don't have to figure out how many px it takes to produce your design on his screen. You have no need to concern yourself with whether a user's browser is using the whole screen or some portion thereof. It turns out those who need bigger objects go for bigger windows, and those who need the biggest tend to go fullscreen, and tend to skip even trying with miniature screens. The people who like small may fit your 56rem wide page into a half screen width window anyway because they're using a smaller default size. Those who need it to fit with big text use bigger windows. You don't need to change anything for both to be happy, just do a respectable testing job to ensure your expectations have adequate flexibility across varying conditions. Use CSS to declare the *perspectives*, not px, in your total design. Then the user's browser figures out how many px it takes to produce your perspectives on his screen. That's polite;
Re: [css-d] Don't miss a space
I understand, you take the pages max width, whatever that may be then do the math, in your example, you used 960px. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 12:14 PM Normally what I do is have my page width be 100% of the viewport until I reach my desktop breakpoint. At that point my page max-width will be in effect. Typically we max our page content at 960. So it's at this point I start working with percentages based on a max of 960. Obviously, use your own parameters for your page. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:58 AM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM Tom Tim - I forgot about the mobile tools in Chrome, they are pretty good, I wonder if you can add devices, my phone is not listed. Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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] Don't miss a space
If I have a 4096 width resolution, I know what are thinking and have said already :-) I divide by a 320px width container that works out to 12.8% my container/div has transformed what previously was working well, into an extremely narrow container/div that looks horrible ? Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 12:14 PM Normally what I do is have my page width be 100% of the viewport until I reach my desktop breakpoint. At that point my page max-width will be in effect. Typically we max our page content at 960. So it's at this point I start working with percentages based on a max of 960. Obviously, use your own parameters for your page. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:58 AM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% How do I find my page max width, if the page width can be adjust at any time, right now I don't know what my page width is so to give containers and so forth the correct percentage widths. Christopher Tom Livingston mailto:tom...@gmail.com Sunday, November 23, 2014 11:42 AM Again, the combination of percentage width and min-width MQs should cover a vast majority of devices for layout. Testing every device is nearly impossible. Crest Christopher mailto:crestchristop...@gmail.com Sunday, November 23, 2014 11:29 AM Tom Tim - I forgot about the mobile tools in Chrome, they are pretty good, I wonder if you can add devices, my phone is not listed. Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 11:18 AM On Nov 23, 2014 11:01 AM, Tom Livingston tom...@gmail.com mailto:tom...@gmail.com wrote: While testing on devices is important, you get a long way using the dev tools in Chrome or Firefox. The new dev tools in Chrome also provides some pretty amazing device emulation. It's certainly not perfect but miles closer to real than simply resizing the viewport as you work which, as Tom says, will get you a long way. Tim __ 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] Don't miss a space
24 nov 2014 kl. 02:26 skrev Karl DeSaulniers k...@designdrumm.com: With firefox, you can set different screen sizes in their responsive layout mode. VERY helpful. We have mentioned the new Firefox Developer Edition, right? https://www.mozilla.org/en-US/firefox/developer/ IMHO the Firefox tools is all I need. Maybe Espresso once on a while. __ 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] Don't miss a space
On Nov 23, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: MiB wrote: I think that might be why Perch http://grabaperch.com/ was invented. Assuming that Perch was used to generate its own landing page, it would not be for me : Line 435, Column 7: Stray end tag div. /div footer role=contentinfo” OMG, that was serious. So you’re implying that your tools PREVENTS you from doing mistakes? So what are these tools then? Maybe a more reasonable question to answer here would be how fast such a user error can be fixed in a CMS when it is discovered. That’s much more interesting than to pretend your own code is always perfect. Are you certain there is never code errors in sites built with popular CMS products out there. Are you certain no site you’ve built contain even the slightest error? If so, I must bow to your superior coding. Care to make this viewpoint interesting? I bet you $1000 I can fix such a user error in Perch, which I don’t use, significantly faster than you can in Drupal. I can find a third party, that you will trust, that can set up such at test with timers. Are you a man or a mice? __ 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] Don't miss a space
nov 24 2014 07:00 MiB digital.disc...@gmail.com: Are you a man or a mice? I most certainly meant to ask ”Are you a man or a mouse”? My apologies for that grammatical error. You see how easy we mere mortals can make an error like that? A code god like you, Philip, surely would have a field day with me. C’mon now. __ 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] Don't miss a space
nov 24 2014 07:25 Crest Christopher crestchristop...@gmail.com: This version of the Developer Tools seems ten times more better then the version I have in 33.1 (33.1.1) just released, literally at the time of me writing this message/email. I also like Chrome tools and the Developer Tools add-on for both Chrome and Firefox, but this new one is my new default developer browser. __ 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] Don't miss a space
How do you accommodate most, if not all screen sizes. For example iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other smart phones fall in-between, I did not include Phablets, and tablets. I suppose using SASS, although I don't have experience using SASS you could do a condition whereas one MQ could somehow fill in the pixel gaps between an iPhone5 and a Nexus 4, or no ? Christopher __ 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] Don't miss a space
This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. On Sat, Nov 22, 2014 at 7:47 PM Crest Christopher crestchristop...@gmail.com wrote: How do you accommodate most, if not all screen sizes. For example iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other smart phones fall in-between, I did not include Phablets, and tablets. I suppose using SASS, although I don't have experience using SASS you could do a condition whereas one MQ could somehow fill in the pixel gaps between an iPhone5 and a Nexus 4, or no ? Christopher __ 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] Don't miss a space
I don't understand, I need multiple MQ ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 7:50 PM This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. __ 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] Don't miss a space
Howdy Christopher,
~~~
Saturday, November 22, 2014, 7:46:33 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
How do you accommodate most, if not all screen sizes.
Percentage, percentage, percentage.
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
Savvy ponderable:
Always drink upstream from the herd.
---
This email is free from viruses and malware because avast! Antivirus protection
is active.
http://www.avast.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] Don't miss a space
I use percentage widths on all my containers and try to limit MQ usage to just where the layout needs to change to adapt. The breakpoints (whether tied to specific devices, or just informed by how your design behaves in a browser, is up to you) and since I use percentage widths, that accounts for everything in between. I try, as best I can, to not consider devices at all. Assume that your are powerless (you are) and that you can't know all the device widths (you can't) and design sites that flow. This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Note the Find Your Rate form and three blue boxes below the big image. I determined where the layout should change drastically (only twice, really) based on when things started to look like crowded. I did try to test on popular devices to be sure my decisions didn't leave any gaping holes, but nobody is perfect and no site is perfect. I'm sure folks will find problems with this one, gawd knows I do ;) Good luck! Tim On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher crestchristop...@gmail.com wrote: I don't understand, I need multiple MQ ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 7:50 PM This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. __ 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/ -- 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] Don't miss a space
Percentages does help make boxes/containers liquid but if you will be using boxes with images that have a limited width then percentages won't do, instead I'm left to do multiple MQ, arghh, ah well. Christopher Tim Arnold mailto:tim.arn...@gmail.com Saturday, November 22, 2014 8:14 PM I use percentage widths on all my containers and try to limit MQ usage to just where the layout needs to change to adapt. The breakpoints (whether tied to specific devices, or just informed by how your design behaves in a browser, is up to you) and since I use percentage widths, that accounts for everything in between. I try, as best I can, to not consider devices at all. Assume that your are powerless (you are) and that you can't know all the device widths (you can't) and design sites that flow. This is a fair example of this idea that I recently worked on: http://www.workingamericahealthcare.org/ (Built in Drupal, Front End work mine, design by others who know better). Note the Find Your Rate form and three blue boxes below the big image. I determined where the layout should change drastically (only twice, really) based on when things started to look like crowded. I did try to test on popular devices to be sure my decisions didn't leave any gaping holes, but nobody is perfect and no site is perfect. I'm sure folks will find problems with this one, gawd knows I do ;) Good luck! Tim On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 7:52 PM I don't understand, I need multiple MQ ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 7:50 PM This will be handled by the min-width MQs, as mentioned before. Base styles for small screens like iPhone. Then, for example, the next MQ at 480 for landscape iPhone. The gap between base and 480 will take care of the different width phones. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 7:46 PM How do you accommodate most, if not all screen sizes. For example iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other smart phones fall in-between, I did not include Phablets, and tablets. I suppose using SASS, although I don't have experience using SASS you could do a condition whereas one MQ could somehow fill in the pixel gaps between an iPhone5 and a Nexus 4, or no ? Christopher __ 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] Don't miss a space
On Sat, Nov 22, 2014 at 8:47 PM, Crest Christopher crestchristop...@gmail.com wrote: Percentages does help make boxes/containers liquid but if you will be using boxes with images that have a limited width then percentages won't do, instead I'm left to do multiple MQ, arghh, ah well. Hey Christoper, Tell me more about your images. I'm not sure why that would affect you ability to use percentage width containers. Tim __ 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] Don't miss a space
Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container
the size of the image ?
Christopher
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 7:50 PM
This will be handled by the min-width MQs, as mentioned before. Base
styles for small screens like iPhone. Then, for example, the next MQ
at 480 for landscape iPhone. The gap between base and 480 will take
care of the different width phones.
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:46 PM
How do you accommodate most, if not all screen sizes. For example
iPhone 3,4,5 are all 320px width, but iPhone6 is 375, then most other
smart phones fall in-between, I did not include Phablets, and
tablets. I suppose using SASS, although I don't have experience using
SASS you could do a condition whereas one MQ could somehow fill in the
pixel gaps between an iPhone5 and a Nexus 4, or no ?
Christopher
__
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] Don't miss a space
On Sat, Nov 22, 2014 at 9:14 PM, Crest Christopher
crestchristop...@gmail.com wrote:
Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container the
size of the image ?
Christopher
Christopher,
If you just give the image max-width: 100% it will only start getting
small (thank you, Steve Martin) when its container forces it to. What do
you mean by scale the width of the viewport? Percentage widths on
containers have no affect on the width of the viewport, they scale
proportionally to the viewport.
Tim
__
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] Don't miss a space
Sorry, if you have a 650px (example) width div/container, what is the
math to calculate the width in percentages ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 7:50 PM
This will be handled by the min-width MQs, as mentioned before. Base
styles for small screens like iPhone. Then, for example, the next MQ
at 480 for landscape iPhone. The gap between base and 480 will take
care of the different width phones.
__
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] Don't miss a space
I know if you give an image {max-width:100%} when the viewport (browser
window) scales down the image will get smaller (why the reference to
Steve Martin ?)
When I said scale the width of the viewport, I meant the div/container
will fits the exact with of the viewport (browser window) which I don't
want. It could be I'm misunderstanding at this point, soon to understand :-)
Christopher
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 9:21 PM
Percentage values scale the width of the viewport unlike pixel
values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the
container the size of the image ?
Christopher
Christopher,
If you just give the image max-width: 100% it will only start
getting small (thank you, Steve Martin) when its container forces it
to. What do you mean by scale the width of the viewport? Percentage
widths on containers have no affect on the width of the viewport, they
scale proportionally to the viewport.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 7:50 PM
This will be handled by the min-width MQs, as mentioned before. Base
styles for small screens like iPhone. Then, for example, the next MQ
at 480 for landscape iPhone. The gap between base and 480 will take
care of the different width phones.
__
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] Don't miss a space
I hope this isn't going to be a dumb question, how do you find your page
width, is it based on the MQ min-width ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:52 PM
Target / Context = Result
So if your max page width is 960 and your container is 650 then:
650/960=.677 (x100) so 67.7%
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
__
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] Don't miss a space
Otherwise I'll need eight MQ that doesn't guarantee I won't miss some,
but I'll get the majority !
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:52 PM
Target / Context = Result
So if your max page width is 960 and your container is 650 then:
650/960=.677 (x100) so 67.7%
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 7:52 PM
I don't understand, I need multiple MQ ?
Christopher
__
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] Don't miss a space
Well considering some of my target audiences may have 4K resolutions, my
page will hit 4K approx.
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:56 PM
That's up to you. How wide do you want your page to get?
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:52 PM
Target / Context = Result
So if your max page width is 960 and your container is 650 then:
650/960=.677 (x100) so 67.7%
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:14 PM
I use percentage widths on all my containers and try to limit MQ usage
to just where the layout needs to change to adapt. The breakpoints
(whether tied to specific devices, or just informed by how your design
behaves in a browser, is up to you) and since I use percentage widths,
that accounts for everything in between.
I try, as best I can, to not consider devices at all. Assume that your
are powerless (you are) and that you can't know all the device widths
(you can't) and design sites that flow.
This is a fair example of this idea that I recently worked on:
http://www.workingamericahealthcare.org/ (Built in Drupal, Front End
work mine, design by others who know better).
Note the Find Your Rate form and three blue boxes below the big
image. I determined where the layout should change drastically (only
twice, really) based on when things started to look like crowded. I
did try to test on popular devices to be sure my decisions didn't
leave any gaping holes, but nobody is perfect and no site is perfect.
I'm sure folks will find problems with this one, gawd knows I do ;)
Good luck!
Tim
On Sat, Nov 22, 2014 at 7:52 PM, Crest Christopher
__
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] Don't miss a space
On Sat, Nov 22, 2014 at 9:51 PM, Crest Christopher crestchristop...@gmail.com wrote: (why the reference to Steve Martin ?) Most likely because it's Saturday night and I am very, very old. But specifically the reference to getting small made me think of http://en.wikipedia.org/wiki/Let%27s_Get_Small and I couldn't stop myself. Tim __ 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] Don't miss a space
What is the best method to pick breakpoints ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:59 PM
You'll never miss some. It just that your content may not look that
good at some widths. The content will dictate your breakpoints. Don't
pick breakpoints based on devices. You'll never do it.
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 9:56 PM
Otherwise I'll need eight MQ that doesn't guarantee I won't miss some,
but I'll get the majority !
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:52 PM
Target / Context = Result
So if your max page width is 960 and your container is 650 then:
650/960=.677 (x100) so 67.7%
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 9:48 PM
Sorry, if you have a 650px (example) width div/container, what is
the math to calculate the width in percentages ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Saturday, November 22, 2014 9:20 PM
More like:
div{width:75%;} /*example width only*/
div img {
max-width:100%;
}
But use this carefully. Don't serve a huge image to phones. Or allow a
tiny img to scale up too large as it will look bad.
__
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] Don't miss a space
There are not many, but I'm prepared ! Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:01 PM How do you know that. How many users of websites are using 4k resolution? Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 9:57 PM Well considering some of my target audiences may have 4K resolutions, my page will hit 4K approx. Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:56 PM That's up to you. How wide do you want your page to get? Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 9:55 PM I hope this isn't going to be a dumb question, how do you find your page width, is it based on the MQ min-width ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:52 PM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% __ 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] Don't miss a space
I'm going to let MQ dictate the images, especially retina ! Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:02 PM Your better off providing smaller images on the web with links to view larger ones if they want/need to. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 9:57 PM Well considering some of my target audiences may have 4K resolutions, my page will hit 4K approx. Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:56 PM That's up to you. How wide do you want your page to get? Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 9:55 PM I hope this isn't going to be a dumb question, how do you find your page width, is it based on the MQ min-width ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:52 PM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% __ 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] Don't miss a space
Didn't Steve Martin made an album, news to me !
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 10:11 PM
(why the reference to Steve Martin ?)
Most likely because it's Saturday night and I am very, very old. But
specifically the reference to getting small made me think of
http://en.wikipedia.org/wiki/Let%27s_Get_Small and I couldn't stop myself.
Tim
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 9:51 PM
I know if you give an image {max-width:100%} when the viewport
(browser window) scales down the image will get smaller (why the
reference to Steve Martin ?)
When I said scale the width of the viewport, I meant the
div/container will fits the exact with of the viewport (browser
window) which I don't want. It could be I'm misunderstanding at this
point, soon to understand :-)
Christopher
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 9:21 PM
Percentage values scale the width of the viewport unlike pixel
values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the
container the size of the image ?
Christopher
Christopher,
If you just give the image max-width: 100% it will only start
getting small (thank you, Steve Martin) when its container forces it
to. What do you mean by scale the width of the viewport? Percentage
widths on containers have no affect on the width of the viewport, they
scale proportionally to the viewport.
Tim
Crest Christopher mailto:crestchristop...@gmail.com
Saturday, November 22, 2014 9:14 PM
Percentage values scale the width of the viewport unlike pixel values.
Tom / I assume when you say use max-width you mean;
img {
max-width: 123px
}
If so why do that, if you know the image size just give the container
the size of the image ?
Christopher
Tim Arnold mailto:tim.arn...@gmail.com
Saturday, November 22, 2014 8:54 PM
Percentages does help make boxes/containers liquid but if you will
be using boxes with images that have a limited width then
percentages won't do, instead I'm left to do multiple MQ, arghh,
ah well.
Hey Christoper,
Tell me more about your images. I'm not sure why that would affect you
ability to use percentage width containers.
Tim
__
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] Don't miss a space
In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 10:48 PM What is the best method to pick breakpoints ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:59 PM You'll never miss some. It just that your content may not look that good at some widths. The content will dictate your breakpoints. Don't pick breakpoints based on devices. You'll never do it. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 9:56 PM Otherwise I'll need eight MQ that doesn't guarantee I won't miss some, but I'll get the majority ! Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:52 PM Target / Context = Result So if your max page width is 960 and your container is 650 then: 650/960=.677 (x100) so 67.7% __ 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] Don't miss a space
On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com wrote: In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. 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] Don't miss a space
I don't have any site analytics, although that probably does help narrow things down, although you never know who will visit your site on a device that is not in your analytic. This is the confusing part Tim :) You say focus on the most popular devices but be sure your design works well at any width ! Christopher Tim Arnold mailto:tim.arn...@gmail.com Sunday, November 23, 2014 12:04 AM On Saturday, November 22, 2014, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: I wouldn't even worry about testing on devices at first. Just resize your browser until problems arise then add MQ break points to address those problems. Test on devices based on what information you can glean from site analytics (if you have them) to be sure things are ok on those devices. Otherwise just focus on the most popular devices but be sure your design works well at ANY width. Keep the design as simple as possible and you will have a much easier job. Tim -- tim.arn...@gmail.com mailto:tim.arn...@gmail.com Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 11:53 PM In other words I need to test my site on many difference devices until as you said, the layout looks poor, hence all the mobile testing sites online. I didn't expect to already begin to need it, I suppose it came sooner then later ! Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 10:54 PM Get base styles for phone set. Open viewport until layout looks poor and add a breakpoint/MQ at that point and adjust styles to improve layout. Repeat. Crest Christopher mailto:crestchristop...@gmail.com Saturday, November 22, 2014 10:48 PM What is the best method to pick breakpoints ? Christopher Tom Livingston mailto:tom...@gmail.com Saturday, November 22, 2014 9:59 PM You'll never miss some. It just that your content may not look that good at some widths. The content will dictate your breakpoints. Don't pick breakpoints based on devices. You'll never do 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/
