Feb 4 2010

Base CSS Font Sizes Gone Wild (plus bonus CSS reset!)

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:

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.

Jan 20 2010

Web Standards. Who Cares?

Web standards, accessibility, WCAG, XHTML, CSS, blah, blah, blah… My web pages look just fine. Why should I care about the so-called “web standards”? Well, do you care that your car was built with and tested for safety standards? Do you care that if you buy a DVD, it will just work in the player you have at home? Does it bug you that you can’t just go buy a replacement battery for your digital camera (or it’s exorbitantly expensive) since it’s proprietary?

Having standards solves lots of problems.

What are web standards?

At a minimum your site will have:

  • Valid HTML/XHTML
  • Valid CSS

Hopefully your site meets some basic accessibility standards:

  • Section 508
  • WCAG priority 1

Even more hopefully, your site will meet the more strict accessibility standards (I usually go up to WCAG priority 2):

  • WCAG priority 2
  • WCAG priority 3

Also, just passing these tests isn’t enough. Seems stupid to say this at this point, but you shouldn’t be using table-based layouts and some thought should be given to how your site will degrade in text-based or unknown browsers. Focus on what matters: the content and usability. Do you really need a bunch of Flash animations and fluff on your site? If you do, then chances are good that people won’t hang around long enough for it to be successful anyway.

Adhering to these standards ensures that your pages can be viewed properly on a wide variety of platforms now and well into the future. You’re pretty much guaranteed that new web browsers will be able to view your pages properly, versus a poorly coded page that will probably fall apart visually. Check out your sites on a wide variety of browsers and devices and see what happens. Check it out on your mobile phone or on your PS3 or Wii browser. If you’ve been coding for IE only (thus making your site proprietary) it will be immediately evident.

Not to mention the fact that coding according to web standards can save money. Pages are more likely to work right “out-of-the-gate” on a greater variety of browsers/devices. Less testing plus increased compatibility = win. Standards-compliant code by definition means that developers new to the project should be able understand and maintain what was written.

Popular Validator Links

For More Info…

Oct 1 2009

Email Client Trials and Tribulations

I’m fed up with Outlook. We’ve moved away from using an internal MS Exchange server in lieu of using our hosting provider’s email servers. Since I need to access my email from wherever I happen to be at the time (office, home, phone, etc.), I decided that doing everything with the online mail interface would be ideal. So, I’m pretty much stuck with the interface that the hosting company provides, which happens to be SmarterMail (version 5.5).

So I gave it a genuine shot. The interface isn’t too bad, but I immediately found that something that I find very important was missing. I constantly flag messages for follow-up in my inbox so I don’t forget to get back to clients about this-and-that. Outlook has a deep flagging system that allows you to choose different colors (categories) and optionally set up reminders to popup at a specified date/time. I felt deceived, because SmarterMail had a “flag” option that even looks like the flags you see in Outlook, but when I tried it, I was presented with a menu of “Mark [as]” options that were “Read”, “Unread”, “Spam”, “Not Spam”. No option to “star” items like in Gmail, or to “flag” items like in Outlook. Webmail fail.

So, since I needed the “flag” feature and thus couldn’t use the webmail interface, I went looking for options. I like using Gmail for my personal mail and I think that has the option of downloading another email account via POP or IMAP, but I wanted to keep this completely separate from my personal mailbox. So that was out. I wanted to avoid it, but I was on to looking at mail clients again.

If I were to go back to using email clients, I needed to be sure that I kept the mailbox at the hosting provider as the single source for my email. Read or unread, moved, flagged or deleted, I needed everything to be the same no matter where I accessed it from. That meant no copies of email messages downloaded with POP. IMAP would work though, since it supports two-way communication with the server as opposed to POP’s method of simply downloading copies of messages and not reporting that anything has changed back to the main mailserver. So IMAP it is.

I started with the old mainstay, MS Outlook. I’m not willing to pay the exorbitant prices that Microsoft charges for their Office suite (at least not frequently), so I’m dealing with Outlook 2003 here. I imagine that they have made improvements by now, but Outlook 2003 hooked up to a server via IMAP sucked. Hard. deleting or moving messages resulted in them staying in their original locations, but with a strikethrough line through them, signifying that they were “marked for deletion”. Then I’d have to find and click the “Purge Messages” option in the menus to get rid of them. What a pain! Outlook fail.

Next on my list I had heard great things about: Thunderbird. It is free to download, plus Mozilla has done a great job with Firefox, a browser that surpasses the ubiquitous Internet Explorer in almost every way. Firefox is still my favorite browser even after trying Google Chrome, Opera, and Safari for Windows. Downloaded and installed Thunderbird, and – wow! I was in a timewarp; it was just like checking email in the 80s!  Well, maybe the early 90s. Despite an antiquated look, I gave it a genuine shot. I used it for at least a week or so and checked for plugins that would address some of the perceived shortcomings. Some were preference things that just make more sense in my mind; things such as replies being on the bottom of the message thread by default (even when I changed the preference for it to be on top, it would still put my signature at the bottom), and the default sorting of items showing the most-current item on the bottom (this could be fixed for when sorting by date only, but if I sort by, say, the “from” name, then the secondary sorting of date would still be backwards for me). Maybe I just got used to doing things a certain way using Outlook, but I honestly feel more like Outlook spoiled me. Not so much with features (I hardly use anything beyond basic email and flagging items), but with intuitiveness and the reading pane layout. Thunderbird fail.

It didn’t seem that I was left with many options that fit my budget of “free”. I wasn’t hopeful, but I decided to give Windows Live Mail a try. Despite it’s name, you do not have to use it with a Windows Live email account and I had tried it – with some success – with my personal Gmail account. First impressions were promising; it had the reading pane view that I’ve enjoyed since it’s inception (in 2003?) and it flags items for follow-up like a champ. It even has some handy “Quick Views” that I could use to view all my flagged items exclusively, which made it a handy replacement for the “Search folders” I had gotten used to in Outlook. I’ve currently got WLM set up at the office, on my home computer, and on my laptop. Plus, I can still get to my email on the web if I’m not near any of those systems (or my phone). It just works for me. Windows Live Mail win!

The only place where WLM falls short for me is in the calendar. I’m currently using my phone as my planner/reminder system, but I’m still on the lookout for a better option.