Solved

Mobile phone and Web Page size help

Posted on 2013-10-23
5
484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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 53

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

695 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