Best Doctype for Web AND Mobile?

I’m familiar with using XHTML Mobile doctype for making mobile-only sites.

I am working on a site that currently relies heavily on tables and I am rewriting the markup. I was planning on using HTML 4.01 Transitional, but it’s not currently a mobile-friendly site and I’d like to make it so. It will, however, primarily be for desktop/laptop users.

I’d like to know if there is any advantage to use a normal XHTML doctype (strict or transitional) if I plan on incorporating a mobile stylesheet later on.

The only doctype currently worth using is HTML 4.01 strict as that one is the current standard.

Hmm, XHTML-MP is pretty much specific to mobile devices so you’d probably be better off with XHTML Basic (prohibits nested tables).

The CSS is pretty much separate from markup anyway so it is basically irrelevant whether you use the full XHTML 1.1 or not. You are basically looking at it from the wrong angle. Though if you try to restrict yourself to; 1.1 none presentational Elements. Thus don’t use (e.g. b, big, hr, i, small, sub, sup and tt) and presentational attributes it should make it easier.

I used XHTML MP for the mobile only site and I figured maybe a non-mobile XHTML would be read by more mobile devices than HTML 4.01.

Though I guess imparting a little reason, I doubt it will. I close my <p> and <li> tags in HTML, why should the device worry about having the slash at the end of an input or link tag.

If you use the XHTML 1.0 strict doctype but serve the page as HTML then as far as web browsers are concerned it is HTML 4.01 strict with a few extra slashes added where they can be ignored.

If you serve it as XHTML then anyone using Internet Explorer can’t view the page and it will be offered for download instead.

OK, It’s time I deal with some major misconceptions here… firstly, it’s a bad idea for you to use the XHTML Mobile Doctype full stop. As it currently stands, I don’t know of a SINGLE mobile handset that actually either uses or acknowledges it, and as well intentioned as the W3C were, they built that Doctype back in the days where mobile devices were being weaned off of WML before the likes of the iPhone brought desktop browsing to the smartphone market and revolutionised the whole industry. Mobile XHTML is a dead horse and should be kept that way, it’s just a restrictive incarnation of XHTML intended for a market that no longer exists.

Now we have that cleared up it’s worth noting that all mobile browsers work with HTML 4.01 (post the WML days) and CSS 2.1 and even some JavaScript. So you should write your mobile friendly pages the same as you would for the desktop, except you need to account for a more limited screen size (which means don’t use column or fixed width layouts) and always keep your design as flexible and fluid as possible (so percentage widths, EM font’s, and don’t rely on Flash or Scripting!). I personally wouldn’t bother with XHTML these days, HTML5 will take over from HTML 4.01 and XHTML has been discontinued by the W3C (on it’s 2.0 incarnations - as IE refuses to support XHTML entirely - to date). What I will say is the key to mobile design is to offer a separate version of your website with all these combined efforts into keeping things as flexible as possible on a subdomain or something like m.yoursite.com, this means mobile users can choose between the fully fledged main website or your mobile friendly one (which should also have less stuff packed into it, smaller images - essentially everything you can to reduce file sizes and bandwidth usage - as mobile internet just plain sucks like 56k in many cases - just think small and speedy and you’ll be on the right track).

Why you should use a separate design rather than having a stylesheet for mobile users is simple, like no mobile handset supports XHTML Mobile, very few devices support the “handheld” CSS at rule, and even worse, there’s conflicting implementations as some use screen alone (like desktop browsers), some use handheld alone, some use screen AND handheld and some use CSS3 media types. All this along with the millions of different handsets with their own META headers make detection and redirection an impossible task, so just do your visitors a favour and offer the two different formats as their choice - it’ll save you headaches trying to hack around it. :slight_smile:

What I will say is the key to mobile design is to offer a separate version of your website with all these combined efforts into keeping things as flexible as possible on a subdomain or something like m.yoursite.com, this means mobile users can choose between the fully fledged main website or your mobile friendly one

This is optimal, but also a major pain in the ass. I have no central CMS controlling most of these pages and that aspect of the site is beyond my control. Most of the pages are static HTML with server side include files controlling the header and footer.

What I’m running is similar to a dating site: the main part of the site is a signup form and an inbox/message center, and the secondary part is articles designed to drive traffic to the signup form. We did a separate version of the signup form in XHTML Mobile and ignored the rest of the site. I figured there might be a way to serve the secondary articles with a handheld stylesheet, but I suppose that’s not happening unless I can detect if it’s a mobile user and serve them a different SSI header file.

To be honest, I didn’t notice any change at all between XHTML Mobile and XHTML 1.1 apart from the DOCTYPE. Is it going to hurt anything to leave it as it is? I haven’t received any negative feedback from the testers.

I understand the iphone is the go to platform but the idea is to reach as many users as possible. Will more devices bother with HTML than XHTML? Is there anywhere I can do more reading on this? All the articles I read were from around 2006 so I can understand where I got the wrong idea.

Yes it will “hurt them”, if you didn’t notice what I said… I stated explicitly that no mobile devices even acknowledge that DTD, what that means is that no mobile device on earth will even be able to render that page properly (without potentially encountering severe rendering issues). I know it’s a pain in the ass and I know you would prefer (like all of us) to simply use a handheld stylesheet (or even to detect the mobile user and send them a different header) but alas there’s nothing you can do in that respect. The only way to have a truly mobile friendly website is to simply have a separate version of the site (slimmed down)… mobile stylesheets aren’t well supported, detection and redirection (like you mentioned) is impossible due to the sheer number of devices, and XHTML Mobile is effectively abandoned. While the iPhone does hold a majority share of the market, new smartphones have decent browsers like Opera or the new Fennec (by Mozilla) so things will soon change. Honestly it’s worth making a separate mobile design purely out of the fact that in 5 years time, mobile Internet browsing is likely to increase anything up to 1000% - At the moment around 1% of all internet traffic is on mobile devices… a scary statistic if you don’t have such a version of the site. :slight_smile:

PS: In terms of mobile stuff you can read, unfortunately there’s not much out there because few people recognise mobile as a legitimate market (due to how long it takes people to catch onto new trends), there’s not many mobile specialists and because the market is changing on a literal monthly basis, its moving to fast to gain any meaningful data from (the best thing we can do till things balance out is to just make things as easy and universal as possible - hence the separate design).

Thanks Alex

I’d like to see some kind of source on this. Google’s mobile site uses XHTML MP 1.0., as does ESPN. Many sites use no DTD and twitter & facebook use no Doctype at all. Google Maps just says <!DOCTYPE html>.

These are some of the most popular sites on the web and Google users are not experiencing “severe rendering issues,” or else it would’ve changed by now.

As far as authority sites go, A List Apart uses MP 1.2.

PS: In terms of mobile stuff you can read, unfortunately there’s not much out there because few people recognise mobile as a legitimate market (due to how long it takes people to catch onto new trends), there’s not many mobile specialists and because the market is changing on a literal monthly basis, its moving to fast to gain any meaningful data from (the best thing we can do till things balance out is to just make things as easy and universal as possible - hence the separate design).

If the tiny company I work for acknowledges mobile as a legitimate market, I’m sure plenty of others do.

I think I should clarify my statement a bit as it seems to have been misinterpreted. In the XHTML specification (especially in 1.0) there are two ways in which a document can be rendered… either through text/html (which is what all browsers can read) and application/xhtml+xml … the one which Internet Explorer and most of the mobile browsers have an issue with. The thing is that 99% of people using XHTML use it incorrectly and don’t assign it the correct XHTML MIME type which is required to take advantage of XHTML’s true functionality. Thereby using XHTML Mobile in text/html (which works for everyone) will only function at the same level as HTML 4.01 (with a bit stricter syntax recommendations). Therefore there is no actual benefit to using XHTML Mobile over conventional HTML as you’re literally outputting the same thing only using a syntax language which wasn’t intended to be used in that way. I can say for sure that if you did use the XHTML MP as specified by the W3C, it wouldn’t render at all in Internet Explorer, IEMobile and a few other browsers. :slight_smile:

PS: Google Maps by using “<!DOCTYPE html>” are using HTML5. No browser uses the DTD, they just use them to determine strict or standards mode.

I found this thread in a google search, I don’t know where you are getting your facts from but all mobile browsers from at least 2006 and forward supports at least XHTML Mobile Profile 1.0, most support MP 1.1

Some browsers do require the correct doctype, certainly for features being correctly toggled the doctype is important otherwise the browser will default to something.

It is however important to remember that mobile browsers add features ontop of standards, the best approach is to develop with XHTML MP 1.1 and then check any never features, i.e you are not limited jsut because you decide on a mobile profile, older browsers will ignore tags not supported and all you loose is that any validation will fail since that will read the doctype and use that strict version.

It is completely the wrong approach to just write html and hope it works, you can do that if all you want to target is the absolutely newest devices, you may be happy with that but most are not.

XHTML MP is what you should develop in if you target mobile devices, test for any extra features on top of that.

but all mobile browsers from at least 2006 and forward supports at least XHTML Mobile Profile 1.0, most support MP 1.1

If XHTML MObile Profile requires (as XHTML does) to be served as application xhtml+xml MIME type, then no IE-based browsers will work with it, like no desktop-based version of IE will work with it.

If you just mean fake XHTML being sent as text/html then sure, why not. Except you do have tag soup (not that any browser really cares either way).

According to specs it can be served as any of application/vnd.wap.xhtml+xml, application/xhtml+xml or text/html

If you wan to make sure it renders on both mobile and dekstop then check the HTTP_ACCEPT on the serverside and check those mime types in that order and then output the mime type the browser can handle.

Anyway, it seemed like the previous answers was to not follow any mobile standards at all but to use html 4 or html 5 and just hope it works, you cover more (older) mobile units by using the mobile profiles that are for that purpose and then using server side scripts and client side scripts to detect newer features that can be used.

I think it’s worth providing an update here, I recently undertook a massive study on mobile websites and among the results I analysed the prolification of XHTML MP within handheld devices (and from this I’ll retract my statement about MP’s not being used). While it’s true that many smartphones are now acknowledging the mobile profiles, in EVERY single case where the mobile profile was supported the FULL HTML or XHTML 1.0 specification (served as text/html) was also supported (this was tested using every major device manufacturers OS). Among device testing I encountered a number of devices which did NOT support the mobile profile and only supported conventional HTML or XHTML (and of course there are still some low end devices which still only support WML). Therefore, not only are your claims that from 2006 all devices support the MP 1.0 totally untrue, in every instance I could find the equivalent (x)HTML support was also found thereby making the use of mobile profiles utterly obsolete (as why anyone would use the diet edition rather than the equally supported “full fat” edition, I’ll never know).

Regarding machine specific features, while this is true the extensions that are placed into the devices either require interaction with JavaScript (for hardware specific features) or CSS (For proprietary extensions), I’ve yet to see any proof of a single custom HTML element being used (excluding meta tags) which is device specific thereby any association with the HTML markup is entirely unjustified. Claims that you should be using the mobile profiles in preference to proper HTML/XHTML are uneducated decisions. Low end devices from the non-browsing era make use of WML and support neither HTML or XHTML (in full or MP form), feature phones (otherwise known as the close to but not a proper smartphone phone) equally follow suit with modern smartphones (except without changing renderer) in that they support HTML and XHTML (both full and MP) and every smartphone is not only able to render both fully, they in most cases adopt a desktop rendering engine giving them equal capabilities. If you really think that we still live in an era where handheld devices aren’t as capable as desktop browsers, you’re 5 years out of date. :slight_smile:

Awesome thread. Exactly the kind of information about about developing mobile website that I was after.

6 months down the track do these principles still stand?

Scoopy, I provided an update just previous to your post which explains the only things that have really changed. :slight_smile:

Check out this link http://en.wikipedia.org/wiki/XHTML_Mobile_Profile#DOCTYPE which I found about Doctype for web and mobile.

^ and it says right there:

Note that a series of revisions have been issued to correct technical errors in the above DTDs, and the DTD format is more complex and less widely supported than that of standard HTML

I have no reason to use something more complex and less supported.

And which works perfectly well for the intended purpose all by itself with no fancy dancy add ons other than an extra style sheet or two.