Solved

Optimizing content for user's screen width

Posted on 2013-05-14
13
311 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
Gigs: Get Your Project Delivered by an Expert

Select from 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.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from 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.

Question has a verified solution.

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

This article was inspired by a question here at Experts Exchange (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28629170.html). The requirements stated in that question are (1) reduce the file size of a large number of…
PaperPort 14.5 Patch 1 update is often not detected or downloaded automatically. This article provides direct download links to solve the problem for retail (non-bundled) versions of the Standard and Professional editions, as well as the Professiona…
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.
The goal of the tutorial is to teach the user the full work flow of how to use flash media encoder to stream onto YouTube.

815 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now