Re: [css-d] Responsive Images

2014-11-06 Thread Crest Christopher 
@media is what you recommend for changing images based on browser size, 
correct ?


Christpher ?


Crest Christopher 
Thursday, November 06, 2014 9:11 PM
Basically the web is becoming a billboard, if I want to design for 5K 
I'd need a 5K image, from there I scale it down, or up because I'll be 
designing for mobile first, then I adjust the page and graphics 
accordingly for desktop.


Christopher

Tom Livingston 
Thursday, November 06, 2014 7:41 PM



That does make sense to build simpler first then go desktop after,
I just may follow this logic !


Not necessarily. Most of the time I can use just three images.
Each image can span more than one breakpoint. My base
(mobile/phone) images usually get me up to my 600px breakpoint,
for example.

Let me understand, you typically keep your images up to 600px in
size regardless if the screen size is 2K or heck even up to 4K ? I
assume you do the 2x / 3x for Retina displays ?



I have used images for 2x displays. I dont worry about it for 
photographs. Logos mostly.


see picturefill.js

http://scottjehl.github.io/picturefill/


--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 




#663399
Crest Christopher 
Thursday, November 06, 2014 7:32 PM
That does make sense to build simpler first then go desktop after, I 
just may follow this logic !



Not necessarily. Most of the time I can use just three images. Each 
image can span more than one breakpoint. My base (mobile/phone) images 
usually get me up to my 600px breakpoint, for example.


Let me understand, you typically keep your images up to 600px in size 
regardless if the screen size is 2K or heck even up to 4K ? I assume 
you do the 2x / 3x for Retina displays ?


See my second reply above. I'll also add that you will be hard pressed 
to get perfection in a web page compared to a psd.


I don't understand ?
Tom Livingston 
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
mailto:crestchristop...@gmail.com>> wrote:



Why do you recommend building mobile first ?


Aside from being best practice, it is much harder and requires more 
code to achieve a mobile layout from a desktop first build because it 
requires you to "undo" a great deal of the desktop layout. It is less 
code and work to build mobile first as it is a simpler, additive 
process. I can tell you from experience that desktop first is a 
nightmare.




There is a pro and a con with swapping images, the pro, you can use 
bitmap images, the con, you have to have, as I mentioned earlier, 
maybe up to six different resolutions for your images.  The CSS may 
be the easiest to do, the hardest will be managing your image


Not necessarily. Most of the time I can use just three images. Each 
image can span more than one breakpoint. My base (mobile/phone) images 
usually get me up to my 600px breakpoint, for example.





If you don't go the swap images route as suggested by Tom :) You have 
to design all in vector.  I ask because, unlike previous web 
development experiences, I want to export my image assets perfectly, 
focus more on markup and styles and hopefully have an end result that 
plays well on most, if not all mobile phones and tablets and last but 
not least, desktops / laptops.




See my second reply above. I'll also add that you will be hard pressed 
to get perfection in a web page compared to a psd.






Crest Christopher 
Thursday, November 06, 2014 6:38 PM
Why do you recommend building mobile first ?

There is a pro and a con with swapping images, the pro, you can use 
bitmap images, the con, you have to have, as I mentioned earlier, 
maybe up to six different resolutions for your images.  The CSS may be 
the easiest to do, the hardest will be managing your images.


If you don't go the swap images route as suggested by Tom :) You have 
to design all in vector.  I ask because, unlike previous web 
development experiences, I want to export my image assets perfectly, 
focus more on markup and styles and hopefully have an end result that 
plays well on most, if not all mobile phones and tablets and last but 
not least, desktops / laptops.


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] Responsive Images

2014-11-06 Thread Crest Christopher 
Basically the web is becoming a billboard, if I want to design for 5K 
I'd need a 5K image, from there I scale it down, or up because I'll be 
designing for mobile first, then I adjust the page and graphics 
accordingly for desktop.


Christopher


Tom Livingston 
Thursday, November 06, 2014 7:41 PM



That does make sense to build simpler first then go desktop after,
I just may follow this logic !


Not necessarily. Most of the time I can use just three images.
Each image can span more than one breakpoint. My base
(mobile/phone) images usually get me up to my 600px breakpoint,
for example.

Let me understand, you typically keep your images up to 600px in
size regardless if the screen size is 2K or heck even up to 4K ? I
assume you do the 2x / 3x for Retina displays ?



I have used images for 2x displays. I dont worry about it for 
photographs. Logos mostly.


see picturefill.js

http://scottjehl.github.io/picturefill/


--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com 




#663399
Tom Livingston 
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
mailto:crestchristop...@gmail.com>> wrote:



Why do you recommend building mobile first ?


Aside from being best practice, it is much harder and requires more 
code to achieve a mobile layout from a desktop first build because it 
requires you to "undo" a great deal of the desktop layout. It is less 
code and work to build mobile first as it is a simpler, additive 
process. I can tell you from experience that desktop first is a 
nightmare.




There is a pro and a con with swapping images, the pro, you can use 
bitmap images, the con, you have to have, as I mentioned earlier, 
maybe up to six different resolutions for your images.  The CSS may 
be the easiest to do, the hardest will be managing your image


Not necessarily. Most of the time I can use just three images. Each 
image can span more than one breakpoint. My base (mobile/phone) images 
usually get me up to my 600px breakpoint, for example.





If you don't go the swap images route as suggested by Tom :) You have 
to design all in vector.  I ask because, unlike previous web 
development experiences, I want to export my image assets perfectly, 
focus more on markup and styles and hopefully have an end result that 
plays well on most, if not all mobile phones and tablets and last but 
not least, desktops / laptops.




See my second reply above. I'll also add that you will be hard pressed 
to get perfection in a web page compared to a psd.






Tom Livingston 
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many 
mobile device browsers will download images within other mqs. There is 
an easy way to stop this in most cases.


For example, my base mobile styles (because you build pages 
mobile-first, right?) have a bg img. I'll use that img until I hit a 
breakpoint of 37em at which point I'll swap to a larger img. As is, 
most browsers will download both imgs needlessly. You can easily stop 
this by wrapping the base style img in an mq like:


@media screen and ( max-width: 37em){
Background img here
}

Notice the mq is a max-width of the next breakpoint.

Can't put my finger on the article and research that shows this, but 
will look later.


HTH

Sent from my iPhone

Karl DeSaulniers 
Thursday, November 06, 2014 12:29 AM
+1

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/
Norman Fournier 
Thursday, November 06, 2014 12:24 AM
Hello,

No, the idea is to swap out higher resolution images for the higher 
resolution screens so that no visitor ever has to see distorted, 
pixellated images.


Norman



__
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] Responsive Images

2014-11-06 Thread Karl DeSaulniers 
I think this works better if...

#imghldr { width: 40rem;
#myimage { width: 100%; 

That way you only have to change the size of #imghldr to change the size of 
#myimage

Much easier in a @media IMO.




http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-softpatterns-1200.png";>

Text below image



Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 6, 2014, at 1:22 PM, Felix Miata  wrote:

> #imghldr {
>   max-width: 100%;
>   width: 40rem;
>   background-color: #CBB;
>   padding: 1rem;
>   border: .5rem solid #BBC;}
> #myimage {
>   width: 48rem;
>   background-color: #BCB;
>   padding: .5rem;}
> 
> 
> 
>  src="http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-softpatterns-1200.png";>
> 
> 

__
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] Responsive Images

2014-11-06 Thread Tom Livingston 
On Thu, Nov 6, 2014 at 7:42 PM, David Laakso  wrote:
> On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston  wrote:
>> Sent from my iPhone
>>
>> On Nov 6, 2014, at 6:38 PM, Crest Christopher 
>> wrote:
>>
>> Why do you recommend building mobile first ?
>>
>>
>> Aside from being best practice [trmmed]..
>>
>
> I hope that you mean it happens to be "best practice" for you.
>


OK, I'll change that to "recommended by most"...


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] Responsive Images

2014-11-06 Thread David Laakso 
On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston  wrote:
> Sent from my iPhone
>
> On Nov 6, 2014, at 6:38 PM, Crest Christopher 
> wrote:
>
> Why do you recommend building mobile first ?
>
>
> Aside from being best practice [trmmed]..
>

I hope that you mean it happens to be "best practice" for you.

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] Responsive Images

2014-11-06 Thread Tom Livingston 
On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

>
> That does make sense to build simpler first then go desktop after, I just
> may follow this logic !
>
>
> Not necessarily. Most of the time I can use just three images. Each image
> can span more than one breakpoint. My base (mobile/phone) images usually
> get me up to my 600px breakpoint, for example.
>
> Let me understand, you typically keep your images up to 600px in size
> regardless if the screen size is 2K or heck even up to 4K ? I assume you do
> the 2x / 3x for Retina displays ?
>


I have used images for 2x displays. I dont worry about it for photographs.
Logos mostly.

see picturefill.js

http://scottjehl.github.io/picturefill/


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] Responsive Images

2014-11-06 Thread Tom Livingston 
On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> That does make sense to build simpler first then go desktop after, I just
> may follow this logic !
>
>
> Not necessarily. Most of the time I can use just three images. Each image
> can span more than one breakpoint. My base (mobile/phone) images usually
> get me up to my 600px breakpoint, for example.
>
> Let me understand, you typically keep your images up to 600px in size
> regardless if the screen size is 2K or heck even up to 4K ? I assume you do
> the 2x / 3x for Retina displays ?
>

No. That was just an example of one image. From base to a 600px breakpoint,
I use one image. From 600 to 768, I use a second and from 768 to my max
width, I use a third. Depending on your preference and how you style your
image you could use less. If you have an image that is nothing more than a
background texture - for example - you could have it scale up
proportionally and get away with a little pixelation, using
background-size: cover; for example.



>
>  See my second reply above. I'll also add that you will be hard pressed
> to get perfection in a web page compared to a psd.
>
> I don't understand ?
>

"want to export my image assets perfectly, focus more on markup and
styles"... What is pixel-perfect in an image editor will not be in
code/browser.



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] Responsive Images

2014-11-06 Thread Crest Christopher 
That does make sense to build simpler first then go desktop after, I 
just may follow this logic !



Not necessarily. Most of the time I can use just three images. Each 
image can span more than one breakpoint. My base (mobile/phone) images 
usually get me up to my 600px breakpoint, for example.


Let me understand, you typically keep your images up to 600px in size 
regardless if the screen size is 2K or heck even up to 4K ? I assume you 
do the 2x / 3x for Retina displays ?


See my second reply above. I'll also add that you will be hard pressed 
to get perfection in a web page compared to a psd.


I don't understand ?

Tom Livingston 
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
mailto:crestchristop...@gmail.com>> wrote:



Why do you recommend building mobile first ?


Aside from being best practice, it is much harder and requires more 
code to achieve a mobile layout from a desktop first build because it 
requires you to "undo" a great deal of the desktop layout. It is less 
code and work to build mobile first as it is a simpler, additive 
process. I can tell you from experience that desktop first is a 
nightmare.




There is a pro and a con with swapping images, the pro, you can use 
bitmap images, the con, you have to have, as I mentioned earlier, 
maybe up to six different resolutions for your images.  The CSS may 
be the easiest to do, the hardest will be managing your image


Not necessarily. Most of the time I can use just three images. Each 
image can span more than one breakpoint. My base (mobile/phone) images 
usually get me up to my 600px breakpoint, for example.





If you don't go the swap images route as suggested by Tom :) You have 
to design all in vector.  I ask because, unlike previous web 
development experiences, I want to export my image assets perfectly, 
focus more on markup and styles and hopefully have an end result that 
plays well on most, if not all mobile phones and tablets and last but 
not least, desktops / laptops.




See my second reply above. I'll also add that you will be hard pressed 
to get perfection in a web page compared to a psd.






Tom Livingston 
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many 
mobile device browsers will download images within other mqs. There is 
an easy way to stop this in most cases.


For example, my base mobile styles (because you build pages 
mobile-first, right?) have a bg img. I'll use that img until I hit a 
breakpoint of 37em at which point I'll swap to a larger img. As is, 
most browsers will download both imgs needlessly. You can easily stop 
this by wrapping the base style img in an mq like:


@media screen and ( max-width: 37em){
Background img here
}

Notice the mq is a max-width of the next breakpoint.

Can't put my finger on the article and research that shows this, but 
will look later.


HTH

Sent from my iPhone

Karl DeSaulniers 
Thursday, November 06, 2014 12:29 AM
+1

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/
Norman Fournier 
Thursday, November 06, 2014 12:24 AM
Hello,

No, the idea is to swap out higher resolution images for the higher 
resolution screens so that no visitor ever has to see distorted, 
pixellated images.


Norman



__
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] Why is child wider than parent?

2014-11-06 Thread Tom Livingston 
Take a look at box-sizing.

http://css-tricks.com/box-sizing/

Adding it in late in the game will cause issues, however...

On Thu, Nov 6, 2014 at 5:43 PM, Angela French  wrote:
> Darn box model!
>
> Thanks.
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org 
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
> Sent: Thursday, November 06, 2014 2:40 PM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Why is child wider than parent?
>
> You have...
> #band {padding-right:20px; width:100%;}
> ...which makes the band 20px wider than its parent.
>
> regards
>  Georg
>
> __
> css-discuss [css-d@lists.css-discuss.org] 
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- 
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] Responsive Images

2014-11-06 Thread Tom Livingston 
Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
wrote:

Why do you recommend building mobile first ?


Aside from being best practice, it is much harder and requires more code to
achieve a mobile layout from a desktop first build because it requires you
to "undo" a great deal of the desktop layout. It is less code and work to
build mobile first as it is a simpler, additive process. I can tell you
from experience that desktop first is a nightmare.


There is a pro and a con with swapping images, the pro, you can use bitmap
images, the con, you have to have, as I mentioned earlier, maybe up to six
different resolutions for your images.  The CSS may be the easiest to do,
the hardest will be managing your image


Not necessarily. Most of the time I can use just three images. Each image
can span more than one breakpoint. My base (mobile/phone) images usually
get me up to my 600px breakpoint, for example.



If you don't go the swap images route as suggested by Tom :) You have to
design all in vector.  I ask because, unlike previous web development
experiences, I want to export my image assets perfectly, focus more on
markup and styles and hopefully have an end result that plays well on most,
if not all mobile phones and tablets and last but not least, desktops /
laptops.


See my second reply above. I'll also add that you will be hard pressed to
get perfection in a web page compared to a psd.
__
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] Responsive Images

2014-11-06 Thread Eric 
That's right David. If you have:
 
img {max-width: 100%;
 
The image will not exceed the width of its parent.
 
Eric

> On November 6, 2014 at 11:42 AM David Hucklesby  wrote:
>
>
> On 11/5/14, 9:22 PM, Felix Miata wrote:
> > Crest Christopher composed on 2014-11-05 23:45 (UTC-0500):
> >
> >> If I want to use images on a responsive site, the images should be in
> >> the largest size possible then set the style to {max-width:100%} ? If
> >> they are not the largest size possible and the page is viewed at 1700px
> >> by 1450px (fictional resolution, I didn't verify if it is a logical
> >> resolution) then the obvious result will be a stretched, blurred
> >> image(s) due to interpolation, correct ?
> >
> > It may or may not appear "stretched" and/or "blurry", depending on a myriad
> > of factors that include physical display size, viewing distance, OS/DE
> > settings and viewer acuity. It may appear "streched" or "blurry", but in
> > practical effect it won't necessarily appear to the visitor's eye any worse
> > than being too small. Either way, too small for detail to be discernable, or
> > over-enlarged and blurry, is similarly less than satisfactory.
> >
> > If you don't limit its size to some arbitrary px value (actual physical
> > display resolution available at retail is up to at least 5120x2880 now[1]),
> > at least you retain the possibility of the relative placement and size of
> > the
> > image within your layout, and possibly the layout itself, being preserved.
> >
> > [1] http://support.apple.com/en-us/HT5266
> >
>
>
> It’s not unlikely I am wet behind the ears, but I thought max-width simply
> prevented the image from expanding to its natural size in smaller containers.
> AFAIK the image will not stretch.
>
> Correct me if I am wrong.
>
> --
> Cordially,
> David
> __
> 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] Responsive Images

2014-11-06 Thread Crest Christopher 

Why do you recommend building mobile first ?

There is a pro and a con with swapping images, the pro, you can use 
bitmap images, the con, you have to have, as I mentioned earlier, maybe 
up to six different resolutions for your images.  The CSS may be the 
easiest to do, the hardest will be managing your images.


If you don't go the swap images route as suggested by Tom :) You have to 
design all in vector.  I ask because, unlike previous web development 
experiences, I want to export my image assets perfectly, focus more on 
markup and styles and hopefully have an end result that plays well on 
most, if not all mobile phones and tablets and last but not least, 
desktops / laptops.


Christopher


Tom Livingston 
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many 
mobile device browsers will download images within other mqs. There is 
an easy way to stop this in most cases.


For example, my base mobile styles (because you build pages 
mobile-first, right?) have a bg img. I'll use that img until I hit a 
breakpoint of 37em at which point I'll swap to a larger img. As is, 
most browsers will download both imgs needlessly. You can easily stop 
this by wrapping the base style img in an mq like:


@media screen and ( max-width: 37em){
Background img here
}

Notice the mq is a max-width of the next breakpoint.

Can't put my finger on the article and research that shows this, but 
will look later.


HTH

Sent from my iPhone

Karl DeSaulniers 
Thursday, November 06, 2014 12:29 AM
+1

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/
Norman Fournier 
Thursday, November 06, 2014 12:24 AM
Hello,

No, the idea is to swap out higher resolution images for the higher 
resolution screens so that no visitor ever has to see distorted, 
pixellated images.


Norman



__
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] Why is child wider than parent?

2014-11-06 Thread Eric 
"Darn box model!"

Well, the box model isn't set in stone you know.

> On November 6, 2014 at 5:43 PM Angela French  wrote:
>
>
> Darn box model!
>
> Thanks.
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
> Sent: Thursday, November 06, 2014 2:40 PM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Why is child wider than parent?
>
> You have...
> #band {padding-right:20px; width:100%;}
> ...which makes the band 20px wider than its parent.
>
> regards
> Georg
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> 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] Why is child wider than parent?

2014-11-06 Thread Angela French 
Thanks!  I don't code enough anymore.  :-(

-Original Message-
From: David Laakso [mailto:laakso.davi...@gmail.com] 
Sent: Thursday, November 06, 2014 2:44 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] Why is child wider than parent?

On Thu, Nov 6, 2014 at 5:29 PM, Angela French  wrote:
> Hello,
> Can anyone please tell me why the child (#band) is wider than the boundary of 
> its parent (#outcontainer)?  I set width:100% on the child to make sure it 
> took up the entire width of the parent, but it went wider.  Can't figure out 
> what I'm missing here. It may be the concurrent use of display:table but I'm 
> not sure why setting width still wouldn't work.  If I set the width to 98% it 
> almost fits inside the parent.
>
> http://www.sbctc.edu/OAAInstruction.html


Angela,

Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}

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] Why is child wider than parent?

2014-11-06 Thread David Laakso 
On Thu, Nov 6, 2014 at 5:29 PM, Angela French  wrote:
> Hello,
> Can anyone please tell me why the child (#band) is wider than the boundary of 
> its parent (#outcontainer)?  I set width:100% on the child to make sure it 
> took up the entire width of the parent, but it went wider.  Can't figure out 
> what I'm missing here. It may be the concurrent use of display:table but I'm 
> not sure why setting width still wouldn't work.  If I set the width to 98% it 
> almost fits inside the parent.
>
> http://www.sbctc.edu/OAAInstruction.html


Angela,

Try
#band {height: 52px;
background-color:#013E7D;padding-right:/*20px*/4%;text-align:right;vertical-align:middle;display:table;width:96%;/*100%*/}

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] Why is child wider than parent?

2014-11-06 Thread Angela French 
Darn box model!

Thanks.

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg
Sent: Thursday, November 06, 2014 2:40 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Why is child wider than parent?

You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.

regards
 Georg

__
css-discuss [css-d@lists.css-discuss.org] 
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- 
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] Why is child wider than parent?

2014-11-06 Thread Georg 

You have...
#band {padding-right:20px; width:100%;}
...which makes the band 20px wider than its parent.

regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Why is child wider than parent?

2014-11-06 Thread Angela French 
Hello,
Can anyone please tell me why the child (#band) is wider than the boundary of 
its parent (#outcontainer)?  I set width:100% on the child to make sure it took 
up the entire width of the parent, but it went wider.  Can't figure out what 
I'm missing here. It may be the concurrent use of display:table but I'm not 
sure why setting width still wouldn't work.  If I set the width to 98% it 
almost fits inside the parent.

http://www.sbctc.edu/OAAInstruction.html


body {background-color:#EDEBE0;}
#outercontainer {margin:0 20px 20px 
20px;height:100%;background-color:#CC3366;padding-top:5px;}
#band {height: 52px; 
background-color:#013E7D;padding-right:20px;text-align:right;vertical-align:middle;display:table;width:100%;}
#main {width:90%; min-height:80%;;margin:auto;margin-top:30px;}
h1 {color:#FF;font: 1.4em Arial, Helvetica, 
sans-serif;margin:0;display:table-cell;vertical-align:middle;}
p {font: .75em Arial, Helvetica, sans-serif;}



Thanks for any help.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
www.checkoutacollege.com
www.sbctc.edu

__
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] Responsive Images

2014-11-06 Thread Felix Miata 
David Hucklesby composed on 2014-11-06 08:42 (UTC-0800):

> It’s not unlikely I am wet behind the ears, but I thought max-width simply
> prevented the image from expanding to its natural size in smaller containers.
> AFAIK the image will not stretch.

It may depend on how astutely it's used. I can see the following in the
context of much more complex CSS & HTML causing some head scratching:

#imghldr {
max-width: 100%;
width: 40rem;
background-color: #CBB;
padding: 1rem;
border: .5rem solid #BBC;}
#myimage {
width: 48rem;
background-color: #BCB;
padding: .5rem;}



http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-softpatterns-1200.png";>



http://fm.no-ip.com/Auth/Tmp/tstimg.html
-- 
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responsive Images

2014-11-06 Thread David Hucklesby 

On 11/5/14, 9:22 PM, Felix Miata wrote:
> Crest Christopher composed on 2014-11-05 23:45 (UTC-0500):
>
>> If I want to use images on a responsive site, the images should be in
>> the largest size possible then set the style to {max-width:100%} ? If
>> they are not the largest size possible and the page is viewed at 1700px
>> by 1450px (fictional resolution, I didn't verify if it is a logical
>> resolution) then the obvious result will be a stretched, blurred
>> image(s) due to  interpolation, correct ?
>
> It may or may not appear "stretched" and/or "blurry", depending on a myriad
> of factors that include physical display size, viewing distance, OS/DE
> settings and viewer acuity. It may appear "streched" or "blurry", but in
> practical effect it won't necessarily appear to the visitor's eye any worse
> than being too small. Either way, too small for detail to be discernable, or
> over-enlarged and blurry, is similarly less than satisfactory.
>
> If you don't limit its size to some arbitrary px value (actual physical
> display resolution available at retail is up to at least 5120x2880 now[1]),
> at least you retain the possibility of the relative placement and size of the
> image within your layout, and possibly the layout itself, being preserved.
>
> [1] http://support.apple.com/en-us/HT5266
>


It’s not unlikely I am wet behind the ears, but I thought max-width simply
prevented the image from expanding to its natural size in smaller containers.
AFAIK the image will not stretch.

Correct me if I am wrong.

--
Cordially,
David
__
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] Responsive Images

2014-11-06 Thread Tom Livingston 
On Thu, Nov 6, 2014 at 9:43 AM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> I'd like to read the article, when you find the link.
> There is only one issue, if I'm doing my own custom design with a
> smorgasbord of images etc.  I have to find the largest, suppose a 5K image,
> then do my design magic in Photoshop, then scale the design at different
> resolutions.  Question is, how many resolutions, one, three, five... ?
>
> Christopher
>
>

Breakpoints should be based on the needs of the content. Start with "phone"
size, open up your viewport until the content starts to look like it needs
work, and add a breakpoint there. Make layout adjustments. Repeat.

That said, there are GENERAL breakpoints at 480 (phone landscape), 600, 768
and 960. Add more breakpoints anywhere you need to. Don't use any of these
if you don't need to (because the content works fine without an adjustment
at these breakpoints). Again, this assumes a mobile-first build (because
that's best).


Here's the article. Test five is what I am referring to.
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

HTH


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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] Responsive Images

2014-11-06 Thread Crest Christopher 

I'd like to read the article, when you find the link.
There is only one issue, if I'm doing my own custom design with a 
smorgasbord of images etc.  I have to find the largest, suppose a 5K 
image, then do my design magic in Photoshop, then scale the design at 
different resolutions.  Question is, how many resolutions, one, three, 
five... ?


Christopher


Tom Livingston 
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many 
mobile device browsers will download images within other mqs. There is 
an easy way to stop this in most cases.


For example, my base mobile styles (because you build pages 
mobile-first, right?) have a bg img. I'll use that img until I hit a 
breakpoint of 37em at which point I'll swap to a larger img. As is, 
most browsers will download both imgs needlessly. You can easily stop 
this by wrapping the base style img in an mq like:


@media screen and ( max-width: 37em){
Background img here
}

Notice the mq is a max-width of the next breakpoint.

Can't put my finger on the article and research that shows this, but 
will look later.


HTH

Sent from my iPhone

Karl DeSaulniers 
Thursday, November 06, 2014 12:29 AM
+1

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/
Norman Fournier 
Thursday, November 06, 2014 12:24 AM
Hello,

No, the idea is to swap out higher resolution images for the higher 
resolution screens so that no visitor ever has to see distorted, 
pixellated images.


Norman



__
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] Responsive Images

2014-11-06 Thread Tom Livingston 
Swapping bg images is easy enough with media queries, however, many mobile 
device browsers will download images within other mqs. There is an easy way to 
stop this in most cases.

For example, my base mobile styles (because you build pages mobile-first, 
right?) have a bg img. I'll use that img until I hit a breakpoint of 37em at 
which point I'll swap to a larger img. As is, most browsers will download both 
imgs needlessly. You can easily stop this by wrapping the base style img in an 
mq like:

@media screen and ( max-width: 37em){
Background img here
}

Notice the mq is a max-width of the next breakpoint.

Can't put my finger on the article and research that shows this, but will look 
later.

HTH

Sent from my iPhone

> On Nov 6, 2014, at 12:48 AM, Crest Christopher  
> wrote:
> 
> Swapping will require more page requests from the server.  The other solution 
> mentioned requires by default a 5K image if you go by the highest screen 
> possible, just so you can scale down appropriately without blurred images.
> 
> I suppose gone are the days I could find an image at 800x600 do photo magic 
> to the image in Photoshop then merge it with the design.
> 
> Christopher
> 
>> Karl DeSaulniers 
>> Thursday, November 06, 2014 12:29 AM
>> +1
>> 
>> 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/
>> Norman Fournier 
>> Thursday, November 06, 2014 12:24 AM
>> Hello,
>> 
>> No, the idea is to swap out higher resolution images for the higher 
>> resolution screens so that no visitor ever has to see distorted, pixellated 
>> images.
>> 
>> Norman
> __
> 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] Responsive Images

2014-11-06 Thread Tom Livingston 
I've been using a polyfill called picturefill. It will serve the necessary 
image based on media query. Very few people, if any, change browser viewport 
sizes while browsing like devs do in testing. Only the appropriate image gets 
served. No crazy amounts of server requests. 

Sent from my iPhone

> On Nov 6, 2014, at 12:48 AM, Crest Christopher  
> wrote:
> 
> Swapping will require more page requests from the server.  The other solution 
> mentioned requires by default a 5K image if you go by the highest screen 
> possible, just so you can scale down appropriately without blurred images.
> 
> I suppose gone are the days I could find an image at 800x600 do photo magic 
> to the image in Photoshop then merge it with the design.
> 
> Christopher
> 
>> Karl DeSaulniers 
>> Thursday, November 06, 2014 12:29 AM
>> +1
>> 
>> 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/
>> Norman Fournier 
>> Thursday, November 06, 2014 12:24 AM
>> Hello,
>> 
>> No, the idea is to swap out higher resolution images for the higher 
>> resolution screens so that no visitor ever has to see distorted, pixellated 
>> images.
>> 
>> Norman
> __
> 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/