Solved

Adapting image size to visitor's screen resolution

Posted on 2013-05-13
13
440 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 53

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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 75

Expert Comment

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

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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Adults who share images on social media aren’t the only ones who need to worry about their privacy. Our culture’s tendency to share every move and celebration affects the privacy of our children, too.
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

724 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