Mobile AND desktop compatibility (that validates)?

Hi, I want to make my website mobile friendly, but also desktop friendly. I have been looking around the net at various mobile compatible sites and I find it’s quite confusing.

Some of these sites do not validate in W3c, nor in the w3c mobile-ok checker. And it seems that @media queries are not actually universally recognized by all mobile devices. So, I’m wondering what is the best possible and most universally compatible solution to target both mobiles and desktops? Thanks.

Here’s a good slideshow on that:

There are other approaches, but this one is the most compelling for me.

As for validation, it doesn’t mean a whole lot. If you are using any CSS3, your CSS won’t validate against CSS2 rules, but it doesn’t matter. Validation is only a guide by which you can check if there are any potentially serious problems. Browsers are much more lenient than the W3C rules.

I haven’t seen the video, so I won’t say nada about that :x

IMHO
start off with a good bare-bones HTML skeleton, that would still make at least some sense reading the content with all tags removed.
use correct Doctype
Offer no or low weight images.
add CSS to improve how it looks…
add various javascript to improve how it feels

I think of the Validator as a tool and the specs as guidelines, but to get CSS3 working sounds like a lot of work

The slide show has some useful tips and general info about the wide array of mobile devices to (try to?) target.
One thing they say that I don’t quite understand: “the absence of support for media queries is in fact the first @media query”. ("…is the first @media query???).
The bare bones html sounds good. So now I’m thinking of starting off with a html /css layout for mobiles - so that by default (even if media queries weren’t recognized) the page could be viewed correctly in a smartphone, and would be readable on a laptop - meaning it would fill the smartphone screen and only occupy a tiny portion af a laptop screen.
Then I propose to use @media queries (in a single css stylesheet) for bigger screen sizes, up to desktop size. But what Doctype should I use? How about this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

or

  <!DOCTYPE HTM  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 

Or which Doctype should I use, bearing in mind Mobiles and desktops? Thanks.

A media query basically says to the a device—“What can you do?” … and then serves up appropriate styles. So I guess he means that the first thing you should check (the first query) is what the device can’t do, and then serve up a plain set of styles to cater for that.

which Doctype should I use, bearing in mind Mobiles and desktops? Thanks.

I keep hearing that you are meant to use XHTML for mobiles, but I don’t really understand why. Any strict HTML flavor should be fine, as far as I can see—whether XHTML, HTML4 or 5. It seems the doctype of the future is the simpler


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

so I don’t see a problem with using that.

yea, I have seen that doctype in quite a few mobile friendly sites,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 

so is it also ok for desktop screens?

It’s the most ‘up to date’ doctype, so to speak, though some people won’t like to hear that. :slight_smile: Yes, it’s fine for desktop browsers.

ok…now I’m trying to build up the css, but I can’t get the “margin : 0 auto” to center #box. Any idea what the problem might be in this css?


 body {
 
 margin : 0 auto;
 
 }

#container
{
	margin: 0 auto;
	background: #fff;
}

#header
{
font-size : 9px;
	background: #fff;
	padding: 4px;
	height : 20px;
	background-image : url(pro_small.gif);
	background-position : center;
	background-repeat : no-repeat;
	
}

#header h1 { margin: 0; }

#navigation
{
    font-size : .8em; 
	width: 100%;
	background: #333;
  margin : 0 auto;
  

  padding-top : 2px;
  padding-bottom : 2px;

}

#navigation a
{
	display: inline;

	padding: 3px;
	color: #fff;
	text-decoration: none;
	border-right: 0px solid #fff;

}

#navigation a:hover { background: #383; }

#content
{
	clear: left;
	padding: 0px;
	width : 100%;

	margin : 0 auto;
}

#content h2
{
	color: #000;
	font-size: 11px;
	text-align : center;
}

#footer
{
	background: #ccc;
	text-align: right;
	padding: 4px;
	height: .4em;
}
 #box {
 margin: 0 auto;
    width: 90%;
 background : #eeeeee;
          
 }

.table1 {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 260px;

height : 200px;
text-align : left;
margin-left : auto;

margin-right : auto;

margin-top : .4em;

padding-left : 3px;
}
.table1 th {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
}
.table1 td {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
line-height : 25px;
}


It looks like you might have too many instances of margin: 0 auto; in there, but anyhow, we probably need to see the HTML to know why that’s not working, as the context is important.

ok, here’s the html and the css. I’d like to center the #navigation and #box


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
  
   
  
  
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>  


  
   
  <title></title>
  
  <link rel="stylesheet" href="http://profesornativo.com/two.css" />
  </head>
 <body>
<div id="container">
	<div id="header">
		<h1>
		
		</h1>
	</div>
	<div id="navigation">
		
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Services</a>
		<a href="#">Contact us</a>
		<a href="#">Servi</a>
	
	
	</div>
	<div id="content">
				<h2>
	Private English Classes in Manresa and Granollers  </h2> 
		
			      <div="box">
	               
        <p>Communicatve Method</p>        
      <p>Grammar and Conversation </p> 
       <p> EOI / Cambridge Exams  </p>     
      
       <p> Private and Group Classes </p>    
      
       <p> In-Company Classes  </p>      
       <p>Intensive Classes  </p> 
        
          <p>Translations / Corrections</p> 
  
      	              </div>
	<div id="footer">
		Copyright  Site name, 20XX
	</div>
</div>
</body>
</html>


and the CSS



 


#container
{
	margin: 0 auto;
	background: #fff;
}

#header
{
font-size : 9px;
	background: #fff;
	padding: 4px;
	height : 20px;
	background-image : url(pro_small.gif);
	background-position : center;
	background-repeat : no-repeat;
	
}

#header h1 { margin: 0; }

#navigation
{
    font-size : .8em; 
	width: 100%;
	background: #333;
  margin : 0 auto;
  

  padding-top : 2px;
  padding-bottom : 2px;

}

#navigation a
{
	display: inline;

	padding: 3px;
	color: #fff;
	text-decoration: none;
	border-right: 0px solid #fff;

}

#navigation a:hover { background: #383; }

#content
{
	clear: left;
	padding: 0px;
	width : 100%;

	margin : 0 auto;
}

#content h2
{
	color: #000;
	font-size: 11px;
	text-align : center;
}

#footer
{
	background: #ccc;
	text-align: right;
	padding: 4px;
	height: .4em;
}
 #box {

    width: 90%;
    background : #eeeeee;
 
    margin : 0 auto;
          
 }

.table1 {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 260px;

height : 200px;
text-align : left;
margin-left : auto;

margin-right : auto;

margin-top : .4em;

padding-left : 3px;
}
.table1 th {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
}
.table1 td {
font-size : 9px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
line-height : 25px;
}

You need to replace

<div="box">

with

<div[COLOR="#FF0000"] id=[/COLOR]"box">

oh…yea…just replaced that id…still not centering though…

It works for me. :confused:

this is what I get: www.profesornativo(dot)com/two.htm

Heh heh, the box is centered for me in Firefox. What browser are you viewing this in?

It doesn’t center for me in IE, Firefox or Chrome. Have you tried the URL above?

Yes. This is what it looks like to me:

That gray area is your #box div, which is set to width: 90%.

Make sure to refresh your browser, or clear your cache if necessary.

same here, but I want to center that list of words (#box) and the black horizontal link text #navigation

OK, then you need to add this to your styles:


#navigation, #box {
  text-align: center;
}

Well, that’s progress, but I was hoping to have that list of words justified, but in the center.

Maybe a table is necessary?