As everyone expected, browsing the web on our mobile devices has become steadily more prominent. The browsers available on our phones have become more robust and feel more like desktop browsers, but you know something? They’re not.

Ooh, that’s too rich for my browser

I increasingly find myself using the Opera browser on my HTC Fuze to get stuff done or check things out. Even doing things other than browsing the web will get me there eventually by clicking a link in email or a Twitter update. (That’s also why I think that the Xbox should have a browser, but that’s another story.) Problem is (I think), more and more sites are relying heavily on advanced JavaScript using frameworks like jQuery (which I love btw). I have been continually frustrated trying to view something via Opera mobile and it either runs painfully slow (usually due to some form of AJAX) or it simply does not work. There’s nothing worse than seeing an interesting updated via Twitter, click on the link, and page is loading… loading… You see the infamous spinning spinner graphic, and… nothing. Not going anywhere. Damn.

I think this also explains the prominence of mobile apps as opposed to better-working sites on mobile. I’m glad to see that hugely popular sites like Twitter and Facebook have mobile sites, but they aren’t exactly delivering a rich web experience. Not to mention they aren’t the default if you go to the site on your phone. (You have to know to put “m.facebook.com” into the address bar; I’ll admit, though, that this could be due to mobile browser delivering deceptive user-agent values to the site.) Suffice to say, mobile sites are too stripped-down and desktop sites are too heavy; there seems to be nothing in-between.

Put your website on a diet

Enter Facebook Lite. Could this be the answer?

Site developers need to keep in mind that users may be viewing their “desktop” site via a mobile browser. I think that developing a “lite” version and placing a prominent link to allow users to switch between the two is probably the best answer. At least, that’s the best I can come up with now…

“This solution requires that you use Internet Explorer. If this page is open in any other Web browser, open it in Internet Explorer.”

This was just too crazy not to post. Got this message from a page on the Symantec site after getting an error from the Symantec Endpoint Protection software we have at the office. What is this, 1990? This harkens back to the days of messages like “This site is optimized for IE at 800×600″. Good riddance to those days!

It did appear that the page worked fine in my Firefox browser, but seriously, WTF? That’s a giant website fail in my book. Inexcusable especially for a big corporation. Wow. Just wow.

I’ve been working on my version of a CSS “reset” file lately trying to achieve a gentler reset than the big ones out there. Specifically, I don’t want to reset everything all the way to zero; I’d just like better control over what those defaults end up being (cross-browser of course).

So, I’ve got almost everything done on my reset when I get to the point of wanting to set the base body font size in the CSS. So, as I have done in the past, I looked to the internet for guidance on what the best practice is. So the internet tells me:

• Set the base body font size to a percentage in the CSS to alleviate Internet Explorer text sizing issues. (yup, knew that already)
• Always use “em” units for your subsequent font sizing. (of course – been doing that for years)
• Your base font size percentage should be… (!)

What? There’s no standard out there among the CSS gurus as to what that base font value should be? I was surprised.

So, time to do my own investigating to determine what my base font size should be. Here’s a list of websites that I checked and their base body font sizes:

• meyerweb.com
  font-size: 0.84em;
• alistapart.com
  font-size: 0.8125em;
• davidwalsh.name
  font-size: 62.5%;
• csszengarden.com (default theme)
  font-size: 75%;
• jontangerine.com
  font-size: 100%;
• cnn.com
  font-size: 100%;
• google.com
  font-size: small;
• microsoft.com
  font-size: 70%;
• wordpress.org
  font-size: 62.5%

Curiously, Twitter, Facebook and Yahoo! all use pixels as their base font size:

• Twitter (0.75em, but overridden to 11px almost everywhere)
• Facebook (11px)
• Yahoo! (13px) use px as the base font size.

I’ve seen the 62.5% value often as a means to set the default browser text size to 1em = 10px. Obviously for those who want to set their fonts in pixel sizes, but know they can’t do it directly. Seems that it would work pretty well. For a long time now, I’ve been using the base font size of 76% as based off of this post by Owen Briggs. Strange that there isn’t more of a consensus among the CSS elite, but I think I’ll stick with Owen’s standard. I mean, anyone who took the trouble to take 264 happy little screenshots on the subject of CSS typography deserves some serious recognition.

I still think that the default sizes for the headings could use some tweaking, but I have a CSS reset demo page as well as having the demo pages available in a zip file.