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?
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?
ASKER
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.
ASKER
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.
It works very well, perhaps even too fast on iPhone, but too slow to scroll on iPad
ASKER
So, , it needs to scroll slower on iPhone and faster on iPad?
Yes - perhaps a smaller image on iPad? It seems very large (size, not dimensions)
ASKER
I'll look into this and post back after some investigation.
ASKER
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.
The speed did not change on the iPad. Still too slow
ASKER
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.
ASKER
mplungjan: Just checking to see if you are still engaged with this question? Thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
http://stuffandnonsense.co.uk/projects/320andup/