Solved

Mobile phone and Web Page size help

Posted on 2013-10-23
5
427 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 28

Assisted Solution

by:chilternPC
chilternPC earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
@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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

762 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

11 Experts available now in Live!

Get 1:1 Help Now