Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Adapting image size to visitor's screen resolution

Posted on 2013-05-13
13
Medium Priority
?
446 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 54

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 2000 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

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

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

597 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