Solved

Mobile phone and Web Page size help

Posted on 2013-10-23
5
474 Views
Last Modified: 2013-10-24
This page here:  http://bit.ly/1ac17jJ  uses a responsive design (bootstrap).   the hero image is not showing up on mobile devices, which is good.

validator.w3.org/mobile/¿  says that the mobile page is nearly 500kb large, so it gives me a critical error.  Google is telling me its much better than what validator says for mobile phones.

I was hoping that a mobile device would not actually load the hero image (which is 400kb).   But the mobile checker at validator.w3.org is saying it does.    is this true, and if so, anything I can do to change that?  Ideally, I want mobile phones not to load the hero image, since it doesn't display anyway.
0
Comment
Question by:arthurh88
  • 2
  • 2
5 Comments
 
LVL 29

Assisted Solution

by:chilternPC
chilternPC earned 250 total points
ID: 39596564
its probably due to the style sheet being in one file.  the screen check is done in the the style sheet. which is downloaded.
if you split the style sheet into the different screen resolutions and do the media check in the header part of the page instead of inside the style sheet.
so in style.css  the parts where is does the check...
"@media(min-width:768px)  { blah blah }  "

it may work.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 total points
ID: 39597314
As a test if the image is used as a background and a media query is used the image either loads or not based on the viewport.  If you use chrome or firefox console you can see if you narrow your screen all the way, then refresh, the image does not get loaded.  The way you have it in your code now, the image gets loaded, but it is just hidden in the smaller screen.

With your image, I did notice you can take the quality down a lot and it still looks good.  You can take the image down to nearly 200k.

http://jsbin.com/uZevejI/1/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
  <style>
    @media (min-width: 800px) {
div.test{background-image:url('http://www.theravive.com/img/hero-fall-forest.jpg');
height:500px;
width:2000px;

}
}
  </style>
</head>
<body>
<div class="test">test</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:arthurh88
ID: 39597571
@padas so are you saying that the hero image is not loaded on mobile devices?  That is what I'm trying to figure out and then fix.  chilternPC's comment made sense to me, what do you think?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39597688
I think we are saying the same thing but differently.  If you use your console via chrome browser or firefox, you can see what is loaded.   When using my sample code, if the browser is at full width, I can see in the console the image is there.  When I narrow my browser, the image is still there of course (just hidden).  Now when I keep the browser narrow and refresh, the image does not load.  

When you have the image coded in the html as you do, when the browser narrows, it just gets hidden, but it still loads no matter what the browser width is.
0
 

Author Comment

by:arthurh88
ID: 39599302
yes i see now.  Thank you Padas.  I think maybe the solution is to write some script that will check the size of the screen and then load (or not load) based on that.  I love hero images, but on a mobile phone, having them load makes no sense.

thanks for your help
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

685 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