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?
ddantesAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT 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
 
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.