Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Mobile phone and Web Page size help

Posted on 2013-10-23
5
Medium Priority
?
501 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 1000 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 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 54

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

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

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

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…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

650 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