subject:"Re\: \[css\-d\] Responsive Images"

Re: [css-d] Responsive Images

2014-11-12 Thread Crest Christopher

Unfortunately I don't have support for IIS, if you know of a PHP 
alternative I would be extremely grateful.


Thank you again Philip for the code and the help !

Christopher


Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 5:42 PM
Crest Christopher wrote:


I've always wanted to add a watermark to images automatically when
uploaded to the server for display on the page.  Can you customize the
watermark ?


Of course :  see the code fragment below.


My only problem is I have to check if I can support IIS,
which is faster IIS or PHP ?


Absolutely no idea, Christopher, but my code works only on IIS.

Philip Taylor

script language=C# runat=server

public bool ThumbnailCallback () {return false;}

public void Page_Load (object sender, EventArgs e)
{
int max = 30;
int min = 1;
string imageURL = Request.QueryString [img];
int imageMax = Convert.ToInt32 (Request.QueryString [max]);
int xOffset = 0, imageWidth = 0, imageHeight = 0;
imageURL =
D:\\Web\\Sites\\Org\\For-Charity\\Photos\\Resources\\Images\\Private\\
+ imageURL;
System.Drawing.Image fullSizeImg = null;
fullSizeImg = System.Drawing.Image.FromFile (imageURL);
int CurrentimgHeight = fullSizeImg.Height;
int CurrentimgWidth = fullSizeImg.Width;
if (CurrentimgHeight  CurrentimgWidth)
{
imageHeight = imageMax;
imageWidth = Convert.ToInt32 ( (1.0 * CurrentimgWidth) / (1.0 *
CurrentimgHeight) * imageHeight);
}
else
{
imageWidth = imageMax;
imageHeight = Convert.ToInt32 ( (1.0 * CurrentimgHeight) / (1.0 
*
CurrentimgWidth) * imageWidth);
};
Response.ContentType = image/jpeg;
System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = null;
dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort
(ThumbnailCallback);
System.Drawing.Image thumbNailImg = null;
thumbNailImg = fullSizeImg.GetThumbnailImage (imageWidth, imageHeight,
dummyCallBack, IntPtr.Zero);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage
(thumbNailImg);
SizeF StringSizeF = default (SizeF);
float DesiredWidth = 0;
Font wmFont = default (Font);
float RequiredFontSize = 0;
float Ratio = 0;
String strWatermark = Copyright  ©  2010;
String strWatermarkowner = Request.QueryString [wmo];
float xdelta = 0;
float ydelta = 0;
wmFont = new Font (Arial, 24, FontStyle.Bold);
DesiredWidth = Convert.ToInt32 (imageWidth * 0.85);
xOffset = Convert.ToInt32 ( (imageWidth - DesiredWidth) / 2);
StringSizeF = g.MeasureString (strWatermark, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
xdelta = 0; // imageWidth / 25;
ydelta = imageWidth / 20;
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage (fullSizeImg, 0, 0, imageWidth, imageHeight);
g.SmoothingMode = SmoothingMode.HighQuality;
SolidBrush letterBrush = new SolidBrush (Color.FromArgb (50, 255, 255,
255));
SolidBrush shadowBrush = new SolidBrush (Color.FromArgb (50, 0, 0, 0));
g.DrawString (strWatermark, wmFont, shadowBrush, Convert.ToSingle
(xOffset * 1.0) , Convert.ToSingle ( (imageHeight * 0.5) - 2.25 * ydelta));
g.DrawString (strWatermark, wmFont, letterBrush, Convert.ToSingle (
(xOffset + 3) * 1.0), Convert.ToSingle ( (imageHeight * 0.5) + 2 - 2.25
* ydelta));
wmFont = new Font (Arial, 24, FontStyle.Bold);
StringSizeF = g.MeasureString (strWatermarkowner, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
g.DrawString (strWatermarkowner, wmFont, shadowBrush, Convert.ToSingle
(xOffset - xdelta), Convert.ToSingle ( (imageHeight * 0.5)  + 0.25 *
ydelta));
g.DrawString (strWatermarkowner, wmFont, letterBrush, Convert.ToSingle
(xOffset + 3 - xdelta), Convert.ToSingle ( (imageHeight * 0.5) + 2 +
0.25 * ydelta));
Matrix myMatrix = new Matrix ();
Crest Christopher mailto:crestchristop...@gmail.com
Friday, November 07, 2014 5:32 PM
I've always wanted to add a watermark to images automatically when 
uploaded to the server for display on the page.  Can you customize the 
watermark ? My only problem is I have to check if I can support IIS, 
which is faster IIS or PHP ?


Christopher

Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 9:21 AM


Crest Christopher wrote:


Well, your server needs to be running IIS (Microsoft Internet 
Information Server) and then you just drop the .aspx and .aspx.vb or

Re: [css-d] Responsive Images

2014-11-12 Thread Philip Taylor

Sorry, can't help Christopher.  No experience with PHP (or Apache, or 
anything vaguely Unix/Linux-oriented) at all.


Philip Taylor

Crest Christopher wrote:

Unfortunately I don't have support for IIS, if you know of a PHP
alternative I would be extremely grateful.

Thank you again Philip for the code and the help !

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-12 Thread Karl DeSaulniers

My example was PHP Crest.

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 12, 2014, at 12:50 PM, Crest Christopher crestchristop...@gmail.com 
wrote:

 Unfortunately I don't have support for IIS, if you know of a PHP alternative 
 I would be extremely grateful.
 
 Thank you again Philip for the code and the help !
 
 Christopher
 
 Philip Taylor mailto:p.tay...@rhul.ac.uk
 Friday, November 07, 2014 5:42 PM
 Crest Christopher wrote:
 
 I've always wanted to add a watermark to images automatically when
 uploaded to the server for display on the page.  Can you customize the
 watermark ?
 
 Of course :  see the code fragment below.
 
 My only problem is I have to check if I can support IIS,
 which is faster IIS or PHP ?
 
 Absolutely no idea, Christopher, but my code works only on IIS.
 
 Philip Taylor
 
 script language=C# runat=server
 
 public bool ThumbnailCallback () {return false;}
 
 public void Page_Load (object sender, EventArgs e)
 {
  int max = 30;
  int min = 1;
  string imageURL = Request.QueryString [img];
  int imageMax = Convert.ToInt32 (Request.QueryString [max]);
  int xOffset = 0, imageWidth = 0, imageHeight = 0;
  imageURL =
 D:\\Web\\Sites\\Org\\For-Charity\\Photos\\Resources\\Images\\Private\\
 + imageURL;
  System.Drawing.Image fullSizeImg = null;
  fullSizeImg = System.Drawing.Image.FromFile (imageURL);
  int CurrentimgHeight = fullSizeImg.Height;
  int CurrentimgWidth = fullSizeImg.Width;
  if (CurrentimgHeight  CurrentimgWidth)
  {
  imageHeight = imageMax;
  imageWidth = Convert.ToInt32 ( (1.0 * CurrentimgWidth) / (1.0 *
 CurrentimgHeight) * imageHeight);
  }
  else
  {
  imageWidth = imageMax;
  imageHeight = Convert.ToInt32 ( (1.0 * CurrentimgHeight) / (1.0 
 *
 CurrentimgWidth) * imageWidth);
  };
  Response.ContentType = image/jpeg;
  System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = null;
  dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort
 (ThumbnailCallback);
  System.Drawing.Image thumbNailImg = null;
  thumbNailImg = fullSizeImg.GetThumbnailImage (imageWidth, imageHeight,
 dummyCallBack, IntPtr.Zero);
  System.Drawing.Graphics g = System.Drawing.Graphics.FromImage
 (thumbNailImg);
  SizeF StringSizeF = default (SizeF);
  float DesiredWidth = 0;
  Font wmFont = default (Font);
  float RequiredFontSize = 0;
  float Ratio = 0;
  String strWatermark = Copyright  ©  2010;
  String strWatermarkowner = Request.QueryString [wmo];
  float xdelta = 0;
  float ydelta = 0;
  wmFont = new Font (Arial, 24, FontStyle.Bold);
  DesiredWidth = Convert.ToInt32 (imageWidth * 0.85);
  xOffset = Convert.ToInt32 ( (imageWidth - DesiredWidth) / 2);
  StringSizeF = g.MeasureString (strWatermark, wmFont);
  Ratio = StringSizeF.Width / wmFont.SizeInPoints;
  RequiredFontSize = DesiredWidth / Ratio;
  wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
  xdelta = 0; // imageWidth / 25;
  ydelta = imageWidth / 20;
  g.InterpolationMode =
 System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
  g.DrawImage (fullSizeImg, 0, 0, imageWidth, imageHeight);
  g.SmoothingMode = SmoothingMode.HighQuality;
  SolidBrush letterBrush = new SolidBrush (Color.FromArgb (50, 255, 255,
 255));
  SolidBrush shadowBrush = new SolidBrush (Color.FromArgb (50, 0, 0, 0));
  g.DrawString (strWatermark, wmFont, shadowBrush, Convert.ToSingle
 (xOffset * 1.0) , Convert.ToSingle ( (imageHeight * 0.5) - 2.25 * ydelta));
  g.DrawString (strWatermark, wmFont, letterBrush, Convert.ToSingle (
 (xOffset + 3) * 1.0), Convert.ToSingle ( (imageHeight * 0.5) + 2 - 2.25
 * ydelta));
  wmFont = new Font (Arial, 24, FontStyle.Bold);
  StringSizeF = g.MeasureString (strWatermarkowner, wmFont);
  Ratio = StringSizeF.Width / wmFont.SizeInPoints;
  RequiredFontSize = DesiredWidth / Ratio;
  wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
  g.DrawString (strWatermarkowner, wmFont, shadowBrush, Convert.ToSingle
 (xOffset - xdelta), Convert.ToSingle ( (imageHeight * 0.5)  + 0.25 *
 ydelta));
  g.DrawString (strWatermarkowner, wmFont, letterBrush, Convert.ToSingle
 (xOffset + 3 - xdelta), Convert.ToSingle ( (imageHeight * 0.5) + 2 +
 0.25 * ydelta));
  Matrix myMatrix = new Matrix ();
 Crest Christopher mailto:crestchristop...@gmail.com
 Friday, November 07, 2014 5:32 PM
 I've always wanted to add a watermark to images automatically when uploaded 
 to the server for display on the page.  Can you customize the watermark ? My 
 only problem is I have to check if I can support IIS, which is faster IIS or 
 PHP ?
 
 Christopher
 
 Philip Taylor mailto:p.tay...@rhul.ac.uk
 Friday, November 07, 2014 9:21 AM
 
 
 Crest Christopher wrote:
 
 
 Well, your server needs to

Re: [css-d] Responsive Images

2014-11-12 Thread Crest Christopher

You won't do any changes to the code, your leaving it as is, correct ? 
Any changes would have to come from someone other then yourself.


Christopher


Karl DeSaulniers mailto:k...@designdrumm.com
Wednesday, November 12, 2014 4:56 PM
My example was PHP Crest.

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/
Crest Christopher mailto:crestchristop...@gmail.com
Wednesday, November 12, 2014 1:50 PM
Unfortunately I don't have support for IIS, if you know of a PHP 
alternative I would be extremely grateful.


Thank you again Philip for the code and the help !

Christopher

Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 5:42 PM
Crest Christopher wrote:


I've always wanted to add a watermark to images automatically when
uploaded to the server for display on the page.  Can you customize the
watermark ?


Of course :  see the code fragment below.


My only problem is I have to check if I can support IIS,
which is faster IIS or PHP ?


Absolutely no idea, Christopher, but my code works only on IIS.

Philip Taylor

script language=C# runat=server

public bool ThumbnailCallback () {return false;}

public void Page_Load (object sender, EventArgs e)
{
int max = 30;
int min = 1;
string imageURL = Request.QueryString [img];
int imageMax = Convert.ToInt32 (Request.QueryString [max]);
int xOffset = 0, imageWidth = 0, imageHeight = 0;
imageURL =
D:\\Web\\Sites\\Org\\For-Charity\\Photos\\Resources\\Images\\Private\\
+ imageURL;
System.Drawing.Image fullSizeImg = null;
fullSizeImg = System.Drawing.Image.FromFile (imageURL);
int CurrentimgHeight = fullSizeImg.Height;
int CurrentimgWidth = fullSizeImg.Width;
if (CurrentimgHeight  CurrentimgWidth)
{
imageHeight = imageMax;
imageWidth = Convert.ToInt32 ( (1.0 * CurrentimgWidth) / (1.0 *
CurrentimgHeight) * imageHeight);
}
else
{
imageWidth = imageMax;
imageHeight = Convert.ToInt32 ( (1.0 * CurrentimgHeight) / (1.0 
*
CurrentimgWidth) * imageWidth);
};
Response.ContentType = image/jpeg;
System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = null;
dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort
(ThumbnailCallback);
System.Drawing.Image thumbNailImg = null;
thumbNailImg = fullSizeImg.GetThumbnailImage (imageWidth, imageHeight,
dummyCallBack, IntPtr.Zero);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage
(thumbNailImg);
SizeF StringSizeF = default (SizeF);
float DesiredWidth = 0;
Font wmFont = default (Font);
float RequiredFontSize = 0;
float Ratio = 0;
String strWatermark = Copyright  ©  2010;
String strWatermarkowner = Request.QueryString [wmo];
float xdelta = 0;
float ydelta = 0;
wmFont = new Font (Arial, 24, FontStyle.Bold);
DesiredWidth = Convert.ToInt32 (imageWidth * 0.85);
xOffset = Convert.ToInt32 ( (imageWidth - DesiredWidth) / 2);
StringSizeF = g.MeasureString (strWatermark, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
xdelta = 0; // imageWidth / 25;
ydelta = imageWidth / 20;
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage (fullSizeImg, 0, 0, imageWidth, imageHeight);
g.SmoothingMode = SmoothingMode.HighQuality;
SolidBrush letterBrush = new SolidBrush (Color.FromArgb (50, 255, 255,
255));
SolidBrush shadowBrush = new SolidBrush (Color.FromArgb (50, 0, 0, 0));
g.DrawString (strWatermark, wmFont, shadowBrush, Convert.ToSingle
(xOffset * 1.0) , Convert.ToSingle ( (imageHeight * 0.5) - 2.25 * ydelta));
g.DrawString (strWatermark, wmFont, letterBrush, Convert.ToSingle (
(xOffset + 3) * 1.0), Convert.ToSingle ( (imageHeight * 0.5) + 2 - 2.25
* ydelta));
wmFont = new Font (Arial, 24, FontStyle.Bold);
StringSizeF = g.MeasureString (strWatermarkowner, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
g.DrawString (strWatermarkowner, wmFont, shadowBrush, Convert.ToSingle
(xOffset - xdelta), Convert.ToSingle ( (imageHeight * 0.5)  + 0.25 *
ydelta));
g.DrawString (strWatermarkowner,

Re: [css-d] Responsive Images

2014-11-08 Thread MiB


nov 7 2014 23:32 Crest Christopher crestchristop...@gmail.com:

 which is faster IIS or PHP ?

IIS is a server, PHP is a language that can run on servers. You're trying to 
compare apples to baskets. 

I haven’t looked at the Watermark code, but likely this is something in 
ASP.NET? If so that of course runs in IIS and possibly also on Apache with 
mod_mono http://www.mono-project.com/docs/web/mod_mono/. The latter is probably 
not something for you and IIS is likely to be the best for ASP.NET.

Nevertheless, switching servers because of one function that is also available 
in other packages NOT on ASP.NET is a tad strange. What are you going to do 
when you find some new hot code that can’t run well on IIS?

I’m not saying not to choose IIS, but build a solid base for choosing 
technology that you can stick with for years to come.

Personally I don’t care for either PHP or ASP.NET.

__
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-07 Thread Philip Taylor




Crest Christopher wrote:


Question is, how many resolutions, one, three,five... ?


Why not scale on-the-fly ? Visit :

http://photos.for-charity.org/

click on any album thumbnail, then any image thumbnail, and notice that 
the resulting URL is of the form :



http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720

Replace the final 720 with any realistic value and you will be 
delivered a new image of exactly that height.  The watermarking is added 
dynamically at the same time.


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

2014-11-07 Thread GJim

Howdy Philip,

~~~
Friday, November 7, 2014, 3:56:34 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 The watermarking is added dynamically at the same time.

 Philip Taylor

Are you certain that the watermarks are added dynamically?

If so, I would like to see the code that accomplishes that feature.  It would
solve some issues for me, and also for some others on another discussion list.

Thanks.

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




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

2014-11-07 Thread Tom Livingston



Sent from my iPhone

 On Nov 6, 2014, at 9:34 PM, Crest Christopher crestchristop...@gmail.com 
 wrote:
 
 @media is what you recommend for changing images based on browser size, 
 correct ?
 
 Christpher ?


Background images, yes.

For images coded in the markup, see the polyfill I gave a link to twice before 
or look up picture element/responsive images. Support is spotty at the moment 
for the latter.



 
 compose-unknown-contact.jpgCrest 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
 
 postbox-contact.jpgTom 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
 compose-unknown-contact.jpgCrest 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 ?
 postbox-contact.jpgTom Livingston  Thursday, November 06, 2014 
 7:17 PM
 
 
 Sent from my iPhone
 
 On Nov 6, 2014, at 6:38 PM, Crest Christopher 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. 
 
 
 
 compose-unknown-contact.jpgCrest 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 --

Re: [css-d] Responsive Images

2014-11-07 Thread MiB


nov 7 2014 00:38 Crest Christopher crestchristop...@gmail.com:

 Why do you recommend building mobile first ?

The main reason as I see it, is that mobile first methodology forces you to 
take a hard look at your content and prioritize it after what the users 
actually need to see first, second and so on. All fluff has to go for mobile. 
And if it’s fluff why should it stay there for browsers? 

When you do this, you typically will realize that content, its structure and 
presentation is a design problem. Depending on your clients it may also involve 
teaching your them about their content.

It baffles me how little some commercial operations actually know about what 
content their users actually are looking for and when they need it.

Of course, content structure is very much tightly connected to markup, which I 
find many designers take far too lightly as it influences presentation, where 
CSS comes in. So far I’ve broken my wows when doing mobile first by using 
javascript solutions affecting layout and structure. But I have no users on 
mobile that have javascript inactivated (about 5% on desktop).

Anyway, from a CSS design standpoint I too find it more fruitful to do a good 
mobile design and iteratively build on that when targeting larger displays.

__
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-07 Thread Crest Christopher

Mobile first to me is mos logical because simply, it's easier to add 
then to take away !


Christopher


MiB mailto:digital.disc...@gmail.com
Friday, November 07, 2014 8:28 AM

The main reason as I see it, is that mobile first methodology forces 
you to take a hard look at your content and prioritize it after what 
the users actually need to see first, second and so on. All fluff has 
to go for mobile. And if it’s fluff why should it stay there for 
browsers?


When you do this, you typically will realize that content, its 
structure and presentation is a design problem. Depending on your 
clients it may also involve teaching your them about their content.


It baffles me how little some commercial operations actually know 
about what content their users actually are looking for and when they 
need it.


Of course, content structure is very much tightly connected to markup, 
which I find many designers take far too lightly as it influences 
presentation, where CSS comes in. So far I’ve broken my wows when 
doing mobile first by using javascript solutions affecting layout and 
structure. But I have no users on mobile that have javascript 
inactivated (about 5% on desktop).


Anyway, from a CSS design standpoint I too find it more fruitful to do 
a good mobile design and iteratively build on that when targeting 
larger displays.


__
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/
Crest Christopher mailto:crestchristop...@gmail.com
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

Tom Livingston mailto:tom...@gmail.com
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

Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 12:48 AM
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 mailto:k...@designdrumm.com
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/

__
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-07 Thread Crest Christopher

What is the technology behind this scaling on the fly ? It's fluid 
compared to image replacement.


Christopher


Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 3:56 AM


Crest Christopher wrote:


Why not scale on-the-fly ? Visit :

http://photos.for-charity.org/

click on any album thumbnail, then any image thumbnail, and notice 
that the resulting URL is of the form :


http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720 



Replace the final 720 with any realistic value and you will be 
delivered a new image of exactly that height.  The watermarking is 
added dynamically at the same time.


Philip Taylor
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 9:43 AM
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 mailto:tom...@gmail.com
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

Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 12:48 AM
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 mailto:k...@designdrumm.com
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/

__
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-07 Thread MiB


nov 7 2014 14:28 MiB digital.disc...@gmail.com:

 When you do this, you typically will realize that content, its structure and 
 presentation is a design problem. Depending on your clients it may also 
 involve teaching your them about their content.

Talking about fluff, that ”your” wasn’t supposed to be there. Should be 
Depending on your clients it may also involve teaching them about their 
content.”

I must stop to post before coffee.
__
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-07 Thread Philip Taylor




GJim wrote:


Are you certain that the watermarks are added dynamically?


Completely certain; it is my web site.


If so, I would like to see the code that accomplishes that feature.
It would solve some issues for me, and also for some others on
another discussion list.


I will send under separate cover.

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

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 7:41 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:
 
 Completely certain; it is my web site.
 
 Philip Taylor

Hey Philip,
Have you thought of pointer-events: none; and pointer-events: auto for your 
images?
Noticed you have -webkit-user-select: none. That doesn't work for the mouse. 
Thinking you already know this though. :)

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

2014-11-07 Thread Philip Taylor


Hallo Karl --


Have you thought of pointer-events: none; and pointer-events: auto for your 
images?


The site is /very/ old, and has not been updated for some considerable 
time.  I am not familiar with pointer-events :  could you briefly 
explain what they accomplish and the effects of the two values none 
and auto ?



Noticed you have -webkit-user-select: none. That doesn't work for the mouse.
Thinking you already know this though. :)


I certainly did not add that myself (I do not use vendor prefixes) and I 
cannot see it when I view source or look at the style files; where did 
you see it, please ?


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

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 7:50 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:

 Hallo Karl --
 
 Have you thought of pointer-events: none; and pointer-events: auto for your 
 images?
 
 The site is /very/ old, and has not been updated for some considerable time.  
 I am not familiar with pointer-events :  could you briefly explain what 
 they accomplish and the effects of the two values none and auto ?
 
 Noticed you have -webkit-user-select: none. That doesn't work for the mouse.
 Thinking you already know this though. :)
 
 I certainly did not add that myself (I do not use vendor prefixes) and I 
 cannot see it when I view source or look at the style files; where did you 
 see it, please ?
 
 ** Phil.

OH!, I saw it in safari when I viewed your link. Safari 6.2 Mac OS 10.8.5

From what I read, pointer-events: works mostly with SVG but it also controls 
the click of an object and all its children.
So if you put pointer-events:none; on an element, it and all its children are 
un-clickable.
However if you wish for a child to still be clickable but not its parent, then 
you reset it with pointer-events: auto;.
Once you put pointer-events:auto on that child, all children in that child 
element are clickable and so forth. 
It has come in handy for me for example, on those curtains I was working on a 
while ago. 
I didn't want users to click/drag them but still have things behind them 
clickable.
pointer-events:none in essence, with how I was using it, made a div able to be 
clicked through.
Like it wasn't there. Pretty nifty trick. :)

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

2014-11-07 Thread Philip Taylor




Crest Christopher wrote:


What is faster for page request from the server, ASP.Net code or image
swapping ?  I found the ASP.Net code fast, then again my connection may
just be fluid, I can't assume all will be like this, unless the ASP.Net
code is effective. :-)


Bear in mind that that Asp.Net code is being run on a bog-standard home 
PC, several years old, and uploaded on a slow ADSL link that can manage 
barely 448kb uploads.  If you found it fast even bearing those facts in 
mind, think how fast it would be on a T1-connected real server.


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

2014-11-07 Thread Crest Christopher

The only issue is the images hug the border of the browser, but that is 
a style issue ;-)
How do you set this up using this Asp.Net code ?  I like it better then 
image replacements as I don't notice the flicker when the image changes 
size.


Christopher


Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 9:08 AM


Crest Christopher wrote:


Bear in mind that that Asp.Net code is being run on a bog-standard 
home PC, several years old, and uploaded on a slow ADSL link that can 
manage barely 448kb uploads.  If you found it fast even bearing those 
facts in mind, think how fast it would be on a T1-connected real server.


Philip Taylor
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 9:00 AM



Crest Christopher wrote:


It uses Asp.Net and is based on the code discussed here :

http://forums.asp.net/post/3495197.aspx

Philip Taylor
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 3:56 AM


Crest Christopher wrote:


Why not scale on-the-fly ? Visit :

http://photos.for-charity.org/

click on any album thumbnail, then any image thumbnail, and notice 
that the resulting URL is of the form :


http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720 



Replace the final 720 with any realistic value and you will be 
delivered a new image of exactly that height.  The watermarking is 
added dynamically at the same time.


Philip Taylor
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 9:43 AM
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 mailto:tom...@gmail.com
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


__
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-07 Thread Philip Taylor




Crest Christopher wrote:


The only issue is the images hug the border of the browser, but that is
a style issue ;-)
How do you set this up using this Asp.Net code ?  I like it better then
image replacements as I don't notice the flicker when the image changes
size.


Well, your server needs to be running IIS (Microsoft Internet 
Information Server) and then you just drop the .aspx and .aspx.vb or 
.aspx.js files into the appropriate locations on the server.  I imagine 
that if your server does not run IIS then there may be alternative 
technologies such as PHP that can accomplish much the same thing, but I 
personally know nothing about such server-side technologies.


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

2014-11-07 Thread Karl DeSaulniers

Yes php is one. There are tuts on this all over and example scripts.
Best to have an Apache server for this, not Windows from my experience.
Depending on your server there may be some php.ini directives that you will 
need to set, 
but these tuts usually go over this part with you.

Some search terms:
php dynamic image from text
php dynamic text on image
php thumbnail creator

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 7, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:

 
 
 Crest Christopher wrote:
 
 The only issue is the images hug the border of the browser, but that is
 a style issue ;-)
 How do you set this up using this Asp.Net code ?  I like it better then
 image replacements as I don't notice the flicker when the image changes
 size.
 
 Well, your server needs to be running IIS (Microsoft Internet Information 
 Server) and then you just drop the .aspx and .aspx.vb or .aspx.js files into 
 the appropriate locations on the server.  I imagine that if your server does 
 not run IIS then there may be alternative technologies such as PHP that can 
 accomplish much the same thing, but I personally know nothing about such 
 server-side technologies.
 
 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] Responsive Images

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 8:27 AM, Karl DeSaulniers k...@designdrumm.com wrote:

 Yes php is one. There are tuts on this all over and example scripts.
 Best to have an Apache server for this, not Windows from my experience.
 Depending on your server there may be some php.ini directives that you will 
 need to set, 
 but these tuts usually go over this part with you.
 
 Some search terms:
 php dynamic image from text
 php dynamic text on image
 php thumbnail creator
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com

You can even get creative and combine two images together. 
A transparent png (with styled text and drop shadows, etc) and an opaque image 
(tie-dye background, photo?). 

Sorry for the OT everyone, just love me some PHP.  :P

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

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 8:32 AM, Karl DeSaulniers k...@designdrumm.com wrote:

 On Nov 7, 2014, at 8:27 AM, Karl DeSaulniers k...@designdrumm.com wrote:
 
 Yes php is one. There are tuts on this all over and example scripts.
 Best to have an Apache server for this, not Windows from my experience.
 Depending on your server there may be some php.ini directives that you will 
 need to set, 
 but these tuts usually go over this part with you.
 
 Some search terms:
 php dynamic image from text
 php dynamic text on image
 php thumbnail creator
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 You can even get creative and combine two images together. 
 A transparent png (with styled text and drop shadows, etc) and an opaque 
 image (tie-dye background, photo?). 
 
 Sorry for the OT everyone, just love me some PHP.  :P
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com

This is the file I created to do this with. Might need some tweaking to do what 
you want. Point directories and such.
I wont be doing any support on this script, but your all more than welcome to 
download and modify to taste.

http://designdrumm.com/upload_images_test.zip

This was used to place a copyright on product images.

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

2014-11-07 Thread GJim

Howdy Karl,

~~~
Friday, November 7, 2014, 9:44:17 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 http://designdrumm.com/upload_images_test.zip

 This was used to place a copyright on product images.

 HTH,
 Best,

 Karl DeSaulniers

Nice utility to automate adding a copyright to an image.

However, that's not a dynamic solution such as Philip mentioned.

Also, I notice that your code allows for a maximum image size of 516K - is there
a particular reason for that limitation?

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:
A man kin easy brag hisself out'n a place to lean on the bar.


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

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 9:08 AM, GJim jarne...@wyomerc.com wrote:

 Howdy Karl,
 
 Nice utility to automate adding a copyright to an image.
 
 However, that's not a dynamic solution such as Philip mentioned.
 
 Also, I notice that your code allows for a maximum image size of 516K - is 
 there
 a particular reason for that limitation?

Thank you.

Actually it is dynamic. 

$yearstamp = date( Y);
...
$copyright = Copyright Design Drumm $yearstamp; 

Line 203:
imagestringup($timg, $font, $max_w-10, $max_h-5, $copyright, $picFG);//Very 
basic text watermark. Replace with an image watermark maybe?

The max image size I believe (I wrote this back in 2010) was a personal 
preference associated with server space OR max upload size of my server.
Can't remember off the top, but this number can be changed to any size you 
want, just convert it to bytes.

I built this so I could upload hundreds of product photos more quickly and 
efficiently. It also can be used for multiple formates. Gif, jpeg and png.
The image you place on top must be a transparent png though.

Best,
Karl

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

Re: [css-d] Responsive Images

2014-11-07 Thread GJim

Howdy Karl,

~~~
Friday, November 7, 2014, 10:38:31 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 Actually it is dynamic. 

 $yearstamp = date( Y);
 ...
 $copyright = Copyright Design Drumm $yearstamp; 

My perception of 'dynamic', as mentioned by Philip, is that the original image
resides on a server sans markings - it's only when displayed on the
site-visitor's screen that the copyright is displayed.

Your utility takes an existing image and adds the copyright, then stores as a
new image.  Certainly useful - I've been using Corel PaintShop and/or GIMP to 
add
such info.

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:
A poet who reads his verse in public may have other nasty habits. - Robert 
Heinlein, 'The Notebooks of Lazarus Long'


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

2014-11-07 Thread Karl DeSaulniers

On Nov 7, 2014, at 9:50 AM, GJim jarne...@wyomerc.com wrote:

 Howdy Karl,
 
 ~~~
 Friday, November 7, 2014, 10:38:31 AM (USA 'Somewhere on-the-road time-zone'),
 you wrote the message that appears below.
 
 My reply appears here and/or interspersed within your message.
 ~~~
 
 Actually it is dynamic. 
 
 $yearstamp = date( Y);
 ...
 $copyright = Copyright Design Drumm $yearstamp; 
 
 My perception of 'dynamic', as mentioned by Philip, is that the original image
 resides on a server sans markings - it's only when displayed on the
 site-visitor's screen that the copyright is displayed.
 
 Your utility takes an existing image and adds the copyright, then stores as a
 new image.  Certainly useful - I've been using Corel PaintShop and/or GIMP to 
 add
 such info.
 
 G'Jim c):{-

It will also size it to what ever size you set. I used it to create a large 
image and thumbnail from the same pic.
Like I said, may need some tweaking and you could probably combine another php 
script with it to get your dynamic content into it.

HTH,

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

2014-11-07 Thread Angela French

This discussion on responsive images is making me wonder how modern CMSs that 
support content editors inserting an image onto a page are handling the fact 
that they might need to upload three images ?  Any ideas?

Angela French

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Thursday, November 06, 2014 6:35 PM
To: Tom Livingston
Cc: Karl DeSaulniers; CSS-Discuss
Subject: Re: [css-d] Responsive Images

@media is what you recommend for changing images based on browser size, correct 
?

Christpher ?

 Crest Christopher mailto:crestchristop...@gmail.com
 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 mailto:tom...@gmail.com 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 
 http://medialogic.com


 #663399
 Crest Christopher mailto:crestchristop...@gmail.com
 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 mailto:tom...@gmail.com Thursday, November 06, 2014 
 7:17 PM


 Sent from my iPhone

 On Nov 6, 2014, at 6:38 PM, Crest Christopher 
 crestchristop...@gmail.com 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 mailto:crestchristop...@gmail.com
 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

Re: [css-d] Responsive Images

2014-11-07 Thread Karl DeSaulniers

Well with Wordpress it creates the different sizes for you that you set in your 
prefs.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 7, 2014, at 10:21 AM, Angela French afre...@sbctc.edu wrote:

 This discussion on responsive images is making me wonder how modern CMSs that 
 support content editors inserting an image onto a page are handling the fact 
 that they might need to upload three images ?  Any ideas?
 
 Angela French
 
 -Original Message-
 From: css-d-boun...@lists.css-discuss.org 
 [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
 Sent: Thursday, November 06, 2014 6:35 PM
 To: Tom Livingston
 Cc: Karl DeSaulniers; CSS-Discuss
 Subject: Re: [css-d] Responsive Images
 
 @media is what you recommend for changing images based on browser size, 
 correct ?
 
 Christpher ?
 
 Crest Christopher mailto:crestchristop...@gmail.com
 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 mailto:tom...@gmail.com 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 
 http://medialogic.com
 
 
 #663399
 Crest Christopher mailto:crestchristop...@gmail.com
 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 mailto:tom...@gmail.com Thursday, November 06, 2014 
 7:17 PM
 
 
 Sent from my iPhone
 
 On Nov 6, 2014, at 6:38 PM, Crest Christopher 
 crestchristop...@gmail.com 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 mailto:crestchristop...@gmail.com
 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

Re: [css-d] Responsive Images

2014-11-07 Thread Philip Taylor



Crest Christopher wrote:

 I've always wanted to add a watermark to images automatically when
 uploaded to the server for display on the page.  Can you customize the
 watermark ? 

Of course :  see the code fragment below.

 My only problem is I have to check if I can support IIS,
 which is faster IIS or PHP ?

Absolutely no idea, Christopher, but my code works only on IIS.

Philip Taylor

script language=C# runat=server

public bool ThumbnailCallback () {return false;}

public void Page_Load (object sender, EventArgs e)
{
int max = 30;
int min = 1;
string imageURL = Request.QueryString [img];
int imageMax = Convert.ToInt32 (Request.QueryString [max]);
int xOffset = 0, imageWidth = 0, imageHeight = 0;
imageURL =
D:\\Web\\Sites\\Org\\For-Charity\\Photos\\Resources\\Images\\Private\\
+ imageURL;
System.Drawing.Image fullSizeImg = null;
fullSizeImg = System.Drawing.Image.FromFile (imageURL);
int CurrentimgHeight = fullSizeImg.Height;
int CurrentimgWidth = fullSizeImg.Width;
if (CurrentimgHeight  CurrentimgWidth)
{
imageHeight = imageMax;
imageWidth = Convert.ToInt32 ( (1.0 * CurrentimgWidth) / (1.0 *
CurrentimgHeight) * imageHeight);
}
else
{
imageWidth = imageMax;
imageHeight = Convert.ToInt32 ( (1.0 * CurrentimgHeight) / (1.0 
*
CurrentimgWidth) * imageWidth);
};
Response.ContentType = image/jpeg;
System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = null;
dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort
(ThumbnailCallback);
System.Drawing.Image thumbNailImg = null;
thumbNailImg = fullSizeImg.GetThumbnailImage (imageWidth, imageHeight,
dummyCallBack, IntPtr.Zero);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage
(thumbNailImg);
SizeF StringSizeF = default (SizeF);
float DesiredWidth = 0;
Font wmFont = default (Font);
float RequiredFontSize = 0;
float Ratio = 0;
String strWatermark = Copyright  ©  2010;
String strWatermarkowner = Request.QueryString [wmo];
float xdelta = 0;
float ydelta = 0;
wmFont = new Font (Arial, 24, FontStyle.Bold);
DesiredWidth = Convert.ToInt32 (imageWidth * 0.85);
xOffset = Convert.ToInt32 ( (imageWidth - DesiredWidth) / 2);
StringSizeF = g.MeasureString (strWatermark, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
xdelta = 0; // imageWidth / 25;
ydelta = imageWidth / 20;
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage (fullSizeImg, 0, 0, imageWidth, imageHeight);
g.SmoothingMode = SmoothingMode.HighQuality;
SolidBrush letterBrush = new SolidBrush (Color.FromArgb (50, 255, 255,
255));
SolidBrush shadowBrush = new SolidBrush (Color.FromArgb (50, 0, 0, 0));
g.DrawString (strWatermark, wmFont, shadowBrush, Convert.ToSingle
(xOffset * 1.0) , Convert.ToSingle ( (imageHeight * 0.5) - 2.25 * ydelta));
g.DrawString (strWatermark, wmFont, letterBrush, Convert.ToSingle (
(xOffset + 3) * 1.0), Convert.ToSingle ( (imageHeight * 0.5) + 2 - 2.25
* ydelta));
wmFont = new Font (Arial, 24, FontStyle.Bold);
StringSizeF = g.MeasureString (strWatermarkowner, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
g.DrawString (strWatermarkowner, wmFont, shadowBrush, Convert.ToSingle
(xOffset - xdelta), Convert.ToSingle ( (imageHeight * 0.5)  + 0.25 *
ydelta));
g.DrawString (strWatermarkowner, wmFont, letterBrush, Convert.ToSingle
(xOffset + 3 - xdelta), Convert.ToSingle ( (imageHeight * 0.5) + 2 +
0.25 * ydelta));
Matrix myMatrix = new Matrix ();
__
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 crestchristop...@gmail.com 
 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 mailto:k...@designdrumm.com
 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 mailto:nor...@normanfournier.com
 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

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 crestchristop...@gmail.com 
 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 mailto:k...@designdrumm.com
 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 mailto:nor...@normanfournier.com
 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 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 mailto:tom...@gmail.com
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 mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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

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 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 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;}

body
div id=imghldr
img id=myimage
src=http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-softpatterns-1200.png;
/div
/body

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 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 mailto:tom...@gmail.com
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 mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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 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 huckle...@gmail.com 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 Tom Livingston

Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 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.
__
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 mailto:tom...@gmail.com
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
crestchristop...@gmail.com 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 mailto:tom...@gmail.com
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 mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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

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 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 David Laakso

On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston tom...@gmail.com wrote:
 Sent from my iPhone

 On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com
 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:42 PM, David Laakso laakso.davi...@gmail.com wrote:
 On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston tom...@gmail.com wrote:
 Sent from my iPhone

 On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com
 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 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.

body
div id=photo_container style=text-align:center;
div id=imghldr
img id=myimage 
src=http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-softpatterns-1200.png;
/div
div id=img_textText below image/div
/div
/body

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 6, 2014, at 1:22 PM, Felix Miata mrma...@earthlink.net wrote:

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

__
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 mailto:tom...@gmail.com
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 
http://medialogic.com



#663399
Tom Livingston mailto:tom...@gmail.com
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
crestchristop...@gmail.com 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 mailto:tom...@gmail.com
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 mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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 Crest Christopher

@media is what you recommend for changing images based on browser size, 
correct ?


Christpher ?


Crest Christopher mailto:crestchristop...@gmail.com
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 mailto:tom...@gmail.com
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 
http://medialogic.com



#663399
Crest Christopher mailto:crestchristop...@gmail.com
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 mailto:tom...@gmail.com
Thursday, November 06, 2014 7:17 PM


Sent from my iPhone

On Nov 6, 2014, at 6:38 PM, Crest Christopher 
crestchristop...@gmail.com 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 mailto:crestchristop...@gmail.com
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-05 Thread Felix Miata

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
-- 
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-05 Thread Norman Fournier

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

On 2014-11-05, at 9:45 PM, Crest Christopher wrote:

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

2014-11-05 Thread Karl DeSaulniers

+1

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 5, 2014, at 11:24 PM, Norman Fournier nor...@normanfournier.com wrote:

 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.

__
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-05 Thread Crest Christopher

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 mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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-05 Thread Karl DeSaulniers

Well, you could build your images to the middle resolution (whatever that is at 
the time) and let it be what it is on all other screens. I think this is the 
most common scenario, but I could be corrected.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Nov 5, 2014, at 11:48 PM, Crest Christopher crestchristop...@gmail.com 
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 DeSaulniersThursday, 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-05 Thread Norman Fournier

Real chokepoint on a 2400 baud modem.

On 2014-11-05, at 10:48 PM, 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 mailto:k...@designdrumm.com
 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 mailto:nor...@normanfournier.com
 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-05 Thread Crest Christopher

Most of the internet, if not all would choke a 2400 baud modem.  I 
remember when I got my 28.8 !


Christopher


Norman Fournier mailto:nor...@normanfournier.com
Thursday, November 06, 2014 1:35 AM
Real chokepoint on a 2400 baud modem.


Karl DeSaulniers mailto:k...@designdrumm.com
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 mailto:nor...@normanfournier.com
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 not scaling down

2012-07-16 Thread Tedd Sperling


On Jul 15, 2012, at 5:45 PM, Gates, Jeff gat...@si.edu wrote:

 Two images on a page don't seem to be resizing as they should when I reduce 
 the viewport. The page in question is 
 http://www.outtacontext.com/wp2/about/past7/
 
 -nip-
 
 Can someone tell me why the images aren't scaling down? Thanks.
 
 Jeff

Jeff:

The images are scaling for me (Safari 6.0 Mac OS 10.8).

However, when I want to scale images, I use em's like this:

http://sperling.com/examples/zoom/

HTH's

tedd


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

Re: [css-d] Responsive images not scaling down

2012-07-15 Thread Georg


On 15.07.2012 23:45, Gates, Jeff wrote:

Can someone tell me why the  images aren't scaling down? Thanks.


Images scale fine - never wider than 100% of their containers, but with 
only 22% width left for the center column the layout doesn't force 
image scaling until page is so narrow that center column looks broken.


regards
Georg

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

Re: [css-d] Responsive images not scaling down

2012-07-15 Thread Gates, Jeff

From: css-d-boun...@lists.css-discuss.org [css-d-boun...@lists.css-discuss.org] 
On Behalf Of Georg [gunla...@c2i.net]
Sent: Sunday, July 15, 2012 6:38 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Responsive images not scaling down

On 15.07.2012 23:45, Gates, Jeff wrote:
 Can someone tell me why the  images aren't scaling down? Thanks.

Images scale fine - never wider than 100% of their containers, but with
only 22% width left for the center column the layout doesn't force
image scaling until page is so narrow that center column looks broken.

regards
 Georg

Thanks Georg. I can see what you're saying. And I started to play around with 
increasing the side div percentages. However, what I'd like to maintain is a 
somewhat narrow middle column for the text (I'd like the text to be more 
vertical than horizontal as a block). How can I do that?

Jeff

__
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 not scaling down

2012-07-15 Thread Georg


On 16.07.2012 00:51, Gates, Jeff wrote:

Thanks Georg. I can see what you're saying. And I started to play around with 
increasing the side div percentages. However, what I'd like to maintain is a 
somewhat narrow middle column for the text (I'd like the text to be more 
vertical than horizontal as a block). How can I do that?


Too long since I created this...
http://www.gunlaug.no/tos/moa_9b.html
...but it might give you some ideas.

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/

57 matches

Mail list logo