Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 321
  • Last Modified:

Optimizing content for user's screen width

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
ddantes
Asked:
ddantes
  • 8
  • 5
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
ddantesAuthor Commented:
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
 
ddantesAuthor Commented:
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
How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

 
Michel PlungjanIT ExpertCommented:
It works very well, perhaps even too fast on iPhone, but too slow to scroll on iPad
0
 
ddantesAuthor Commented:
So, , it needs to scroll slower on iPhone and faster on iPad?
0
 
Michel PlungjanIT ExpertCommented:
Yes - perhaps a smaller image on iPad? It seems very large (size, not dimensions)
0
 
ddantesAuthor Commented:
I'll look into this and post back after some investigation.
0
 
ddantesAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
The speed did not change on the iPad. Still too slow
0
 
ddantesAuthor Commented:
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
 
ddantesAuthor Commented:
mplungjan:  Just checking to see if you are still engaged with this question?  Thank you.
0
 
Michel PlungjanIT ExpertCommented:
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
 
ddantesAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now