Jump to content

mobileOK Checker HELP


JKLM

Recommended Posts

I am building a new responsive designed website (my first one) and I seem to be having some issues with the mobile detection for CSS. My site will re-size and displays great on all my mobile devices, Phone, iPad, desktop etc. If I re-size the desktop browser it changes to the correct version based on size etc.. The problem i am having is when I run it through tthe W3C mobileOK validator. I get a score of zero because it seems to be loading all parts of my style sheet. So this brings up the help I need.

 

  1. What should I change in my current CSS?
  2. Should I create two separate CSS files and try to do some type of browser detect and serve up the correct version based on browser? I was under impression I should only use one CSS file.

 

My current CSS File: http://cdn.shopify.com/s/files/1/0244/3437/t/1/assets/styles.css?50092

 

My website (NSFW): http://www.mypleasurebox.com/

 

W3C Validator score of ZERO 8(: http://validator.w3.org/mobile/check?task=2013070102014242.mobile2&docAddr=http%3A%2F%2Fwww.mypleasurebox.com%2F

 

Thank You for any help.

Link to comment
Share on other sites

They have a list of problems there in the validator, which you should fix. They even provide possible solutions for each one.

Here are some of the problems the validator shows:

  • There are more than 20 embedded external resources
  • The total size of the page (969.4KB) exceeds 20 kilobytes (Primary document: 31.4KB, Images: 842.3KB, Style sheets: 95.7KB)
  • The CSS style sheet is not syntactically valid CSS
  • The document is served without caching information ("Expires" or "Cache-Control" header)
  • The size of the document's markup (31.4KB) exceeds 10 kilobytes
  • ...

Link to comment
Share on other sites

Foxy thank you for your response.. The problem I am having is the validator seems to be pulling my entire css file and not just focusing on my mobile part. I was trying to use one style sheet for desktop and mobile versions so i would have to have the images for both versions in there. How do I get the validator to just focus on my mobile site? Should I use two separate style sheets? Is the "@media only screen and (min-width:768px) and (max-width:1026px){.logo{max-width:738px;}" markups incorrect how I have them setup?

 

Thank You

Link to comment
Share on other sites

Your CSS stylesheet on its own is already 13kb. When the browser downloads it it doesn't distinguish different parts, it downloads the entire thing before reading it. I can't distinguish different part in it either. There's still the fact that more than 20 HTTP requests are being called from your site.

 

Does your site have a mobile version or is the page I'm seeing from my laptop the same one that mobile devices are loading?

If the validator is reading your ordinary site, try copying the mobile site to a temporary directory to test it.

Link to comment
Share on other sites

I am using one style sheet and a responsive designed page so if you resize your browser you will see the page resize itself. This is my first responsive design website thats why I am trying to find solutions. I will keep playing around with the validator to see if i can get some of the errors fixed.

 

Thank You for you help I just don't know enough how to do the responsive style.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...