dshipman

Hi, I'm trying to validate a mobile site I'm working on in the W3C mobileOK Checker.

I'm getting a couple of issues that I'd like to fix, but I'm not sure how.

1. "The document is served without caching information ("Expires" or "Cache-Control" header)"


2. "The HTTP Content-Type header does not specify a character encoding and no UTF-8 encoding or a non-UTF-8 is specified in the XML declaration"

Any ideas how to fix these two issues? The documentation it links to is a little confusing.

thanks


W3C mobileOK Checker

WillR

1. Try adding this line in the head section of the page:

<meta http-equiv="Cache-Control" content="max-age=600" />

2. You need a line like this in the head section of the page:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

dshipman

Thanks, my index file already has the <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> in the head, so I'm not sure why it's giving me the error.

I'll add the cache-control one since I didn't have that already.

thanks for your help.

rlhurst

I was having the same error even though I had that line in there too. Then, I found if you put this line as your very first line (even above the !Doctype line).... it "passed"

<?xml version="1.0" encoding="UTF-8" ?>

Also, keep the meta one in there too (in the head section)... it takes both. Now, I'm not going to pretend like I'm some coding expert. I just did some searching around and found out this works. Someone more knowledgeable can explain why!!

dshipman

That worked! thank you

rlhurst

You're welcome

dshipman

I've got one other question. Would either of you (or anyone) know of a way to reduce the file size of a css file? I'm using jquerymobile for the site and it has a huge css file that's affecting the total size of the page.

My images are small, my index.html is small. I'm just having trouble with the massive css file.

It's not a huge deal. I'm at 62% on the W3C checker, so it's not completely failing.

thanks

rlhurst

What are the sizes of your images.... and what's the size of the css file?
You should be way better than 62% imo

WillR

62% is still pretty low and not something that will just be fixed by reducing the images and CSS file.

In regards to reducing the size of the CSS file you can use a CSS compressor. They will strip out all the unnecessary white space etc. There are several free ones online such as this:
CSS Compressor

For reducing the size of your images I use GIFbot:
GIFbot

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

rlhurst

Hey Will, would linking to an external css file fix the size problem?

dshipman

My file sizes are as follow:
index file: 2.6kb
images: 14.5kb
style sheets: 44.2kb

My most major error is this: "The CSS style sheet is not syntactically valid CSS", so I checked the w3c css validator and it's saying things like text-shadow and corner radius doesn't exist in css 2.1, but exists in css 2 and css 3.

The CSS style sheet comes from jquerymobile. the jquerymobile mobile site also gets a low score, so maybe they haven't updated to the w3c standards yet.

Quentin

If you use the jquery it will almost always access the google api which will drag your score down to about 65 or less because it contains a lot of images.

You can check this by clicking on the various score and below it will say where and if you click on this it will provide where it is falling down.

It is always a compromise between whether you want validation or an interactive site.

Those that go the validation route often sacrifice looks and experience for speed which is good if that is what the customer wants.

Quentin

dshipman

I'm currently using an external style sheet.

WillR

No, it doesn't make a difference where you host it. The page still needs to load that CSS content regardless of where it is hosted. The only way to improve the CSS file is to remove all the styles that you are not using and to run it through a compressor.

Yes, the W3C validator doesn't seem to like CSS3. But that's most likely because there are still a lot of browsers out there that do not support CSS3. I wouldn't worry so much about those warnings.

From an end-user standpoint though, make sure that your site still looks good and is easy to read if CSS3 styles were disabled.

Exactly. There is nothing that says you HAVE to score a certain percentage however obviously being able to show potential clients the difference using the 3rd party validator can often be a good selling point.

You also need to remember the W3C standards were introduced for a reason. They are the standards that most developers of browsers, etc will follow so the more you can adhere to those standards yourself, the greater the number of devices your site will work across.

It's a juggling act at the end of the day and there is no right or wrong answer. Whatever works best for you is the right answer.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

dshipman

Okay, thanks. Yes, I checked it out in Internet Explorer and it still looks good. Just missing the rounded edges.

WillR

Yes, with regards to rounded edges, any browser that does not support CSS3 will just use straight edges instead. No big deal really. The things you need to be careful about are when using things such as CSS3 gradients for buttons etc. You need to make sure that if the gradient is not working the solid background color will still allow people to easily see the text on top of it.

In regards to testing, don't get too concerned about testing the sites on desktop browsers since most mobile phones use different browsers or different versions of those desktop browsers.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.