Solved

Adapting image size to visitor's screen resolution

Posted on 2013-05-13
13
439 Views
Last Modified: 2013-05-14
Recently, the percentage of mobile browsers visiting my website has increased.  Some of my pages feature large images in a dynamic format, such as a slide show, or an auto-scrolling panorama.  I'm trying to accommodate mobile browsers (short of designing a dedicated website) by adjusting the image size of these features, based on the visitor's screen resolution. I'd appreciate some feedback regarding the performance of the page at http://mauitradewinds.com/Test/view.htm    This is supposed to redirect the browser to one of three different versions of a scrolling panorama, depending on the visitor's screen resolution.  I'd like to know if it is effective, or if there are specific improvements recommended.
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39162883
It's close except when I narrow the browser all the way to simulate the phone the text gets lost on the right.

I would suggest using media queries in your css to allow change for different sizes.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39163223
Your page is now quite performant on iPad.

Media queries will not work on actual images which should be detected on the server which then serves smaller images.

A quick one could be

if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
0
 

Author Comment

by:ddantes
ID: 39163342
Thank you both for your helpful comments.  

padas:  The style sheet for my pages has a min width of 500px, so that paragraphs of text don't turn into tall and narrow columns if the window is narrowed.  Do you think I should reduce that to a narrower min width, to accommodate iPhone?

mplungjan:  Regarding the code example which you offered, I'm unclear whether this is a client-side or a server-side function?   If it is client-side, can you show me how, and where, to insert it into the page at http://mauitradewinds.com/view.htm?  This is not the view.htm in the Test subfolder, but the one which is currently "live" online, and which makes reference to the view.jpg image.
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39163691
Just replace the 2 image tags you have now with
<script>
if ...
</script>
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39163726
Take a look at these projects http://foundation.zurb.com or http://twitter.github.io/bootstrap or http://unsemantic.com 

They are all responsive css/js libraries that can make this easier for you.  Even if you don't use them, you can get a good feel for how  they work.  Your Min width should probably be closer to 320 px https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
0
 

Author Comment

by:ddantes
ID: 39163737
mplungjan:  Thank you. If I understood correctly, the code would look like this:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
</script>
</div>

However, no image appears when the page is loaded.

padas: Thank you.  I'll review those articles.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39163826
Did you create the viewsmall.jpg and look in the console for any errors I might have typed on my iPhone ?

Also this code relies on the jQuery framework so applies to the new plugin I suggested
0
 

Author Comment

by:ddantes
ID: 39163866
Yes and no.  I did create viewsmall.jpg, but I failed to check the console, or to invoke the new plugin.  However, the following code appears to work:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if (screen.width < 500) {
document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
}
else {
document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
}
</script>
</div>

I don't know whether "screen.width" is equivalent to "window.width", so I'm not sure this code accomplishes the desired result.  If not, I'll try using the jQuery which you previously recommended.  Please advise.
0
 

Author Comment

by:ddantes
ID: 39163899
error consoleThe version of view.htm which we have been working with in this question uses a different javascript plugin to produce the scrolling, not jQuery.reel.  So the html code on the view.htm page is entirely different from the page which is associated with jQuery.reel.

I've attached a screenshot of the error console, which I don't know how to interpret.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39164078
Which URL?
0
 

Author Comment

by:ddantes
ID: 39165901
http://mauitradewinds.com/Test/view.htm

Your code is working.  There was an "(" omitted before the "$", and I failed to reference jQuery in the <HEAD> section of the document.

Would you please give this page a test now and let me know if it's performing as you would expect?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39166539
Apart from loading slow, it scrolls well on iPad and iPhone
0
 

Author Closing Comment

by:ddantes
ID: 39166558
Thanks to all participating experts for their good advice.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
The goal of the tutorial is to teach the user how to remove a natural vignette your photos and how to add vignette to your photos.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question