Solved

Optimizing content for user's screen width

Posted on 2013-05-14
13
315 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
  • 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
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…
The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.

756 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