Solved

Mobile phone and Web Page size help

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Show MP4 file and close (HTA) 3 38
Ways to Manage 2 Development Projects on Same Section 1 35
Call to SQL server times out 5 46
search by any word in column 5 25
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 …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

733 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