Solved

Optimizing content for user's screen width

Posted on 2013-05-14
13
318 Views
Last Modified: 2013-05-21
After avoiding this subject for as long as possible, I'm about ready to make some concessions to the increased prevalence of mobile browsers visiting our website.  I'm not ready to create a dedicated mobile presence, but I would like to adjust some large images for performance on smaller screens.  Unfortunately, when I examine statistics for visitors' screen resolutions, the results differ significantly, depending on which system is recording the data.  

I have collected some great advice from Experts on this forum, regarding methods of applying Media Query, to serve different sizes of images, based on visitor's screen width. If I were to offer three different image sizes, for three different ranges of screen width, may I ask for an opinion as to what those ranges should be, in order to perform well on desktops, tablets and iPhones?

Finally, would you recommend performing the Media Query based on the visitors' screen width, or window width?
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
  • 8
  • 5
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39167706
0
 

Author Comment

by:ddantes
ID: 39168771
Thank you for that link.  Unfortunately, the article is a little beyond what I am prepared to engage with.  I tried downloading the 320 and Up system, to see if the CSS file would answer my questions, but the download link no longer works.  They've replaced that project with something called Rock Hammer, which looks even more complex.
0
 

Author Comment

by:ddantes
ID: 39170224
mplungjan:  You have tested this page for me recently.  Since then I have implemented some fluid image resizing,  and alternative fonts for the iPhone.  Would you have one more look with your iPhone and iPad?  http://mauitradewinds.com/FluidImageTest/view.htm   Thank you.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39170415
It works very well, perhaps even too fast on iPhone, but too slow to scroll on iPad
0
 

Author Comment

by:ddantes
ID: 39170448
So, , it needs to scroll slower on iPhone and faster on iPad?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39170501
Yes - perhaps a smaller image on iPad? It seems very large (size, not dimensions)
0
 

Author Comment

by:ddantes
ID: 39170507
I'll look into this and post back after some investigation.
0
 

Author Comment

by:ddantes
ID: 39170528
I reduced the image from 661kb  to 121kb.   What effect did that have, if any?   I'm concerned it may go even faster on iPhone now.  If so, I'll need to serve different images for different devices.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39170639
The speed did not change on the iPad. Still too slow
0
 

Author Comment

by:ddantes
ID: 39170678
Thank you for your evaluation.   To close this question, may I have your preference as to performing the Media Query based on the visitors' screen width, or window width?  It's easier for me to test changes based on window width, since I don't need to alter the screen resolution.
0
 

Author Comment

by:ddantes
ID: 39183395
mplungjan:  Just checking to see if you are still engaged with this question?  Thank you.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 39183890
Hi, Sorry, missed the question.

I do not have any preference since I do not see the window width differ from the screen width on mobile devices
0
 

Author Closing Comment

by:ddantes
ID: 39185124
Thank you.  Since my website will continue serving content to non-mobile browsers, I was thinking there may be a preferable approach as to window-width versus screen width.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

631 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