Every time Sarah Palin hits the news, there’s always another silly sound bite to go along with her latest conquest. This is sort of expected, but seriously, does everything that comes out of her mouth need to relate to "up here in Alaska"?

I can't believe anyone would entrust an entire country’s decisions to someone who’s complete scope of knowledge is "up here in Alaska."

Last time I checked, the other 99.8% of us don't give much of a shit what happens in Canada.

This post, and the related CSS code to target the iPhone 4’s browser, came through my Twitter stream multiple times today.

Thomas Maier writes about targeting the Mobile Safari browser with CSS media queries on his blog.

I think the things Apple are doing, and the advances they are making in the mobile phone and hand-held Internet device markets are amazing. I think it’s great that consumers (with the help of device makers) are redefining where, when, and especially how they interact with devices and data. I think the iPhone is cool. [I don't own one (I do have an iPod touch for testing), but that new display is incredibly tempting...]

So here we have this awesome new device which allows us to access all the same information we previously only could from a desktop (or laptop) computer. Apple even went out of their way to reinvent the way we interact with and browse that information so that we could have "the full Internet experience," and not some scaled-down mobile version.

See where I'm going with this?

It seems to me that we have so called 'standardistas' promoting information on how to design for a specific device, when the last — what has it been now? — 10 years have been all about getting away from browser sniffing, and moving toward adaptable, degradable design. In enough time, there won't be a 'mobile web,' it will just be the standard 'desktop web' that we're used to, and "these websites over here that only work on the iPhone." Thankfully, I'm not the only one, nor anywhere near the first person to realize this.

But a funny thing happened. Web developers started making versions of their Web sites optimized for the iPhone. Some had these versions available shortly after the iPhone launched. But since then many of the major sites like Google, Yahoo, FaceBook, Amazon, and so on, recognize when they are being browsed on an iPhone and will display an iPhone-specific view instead of the one you see on your Mac or PC. So Apple gave us the real Web, but the Web site developers took it away.

Gary Rosenzweig from 'iPhone’s Promise of "The Real Web"' posted on MacMost.
[Emphasis added by Jstn Ryan.]

The iPhone has become an obsession. If we don’t pay attention, we’ll have a mobile web that only works on the iPhone. And then we’ll have the real mobile web that wasn’t made by us and doesn’t give a shit about web standards and best practices.

[ ... ]

We’re doing exactly the same as ten years ago. We now say “iPhone” instead of “IE6,” but otherwise nothing’s changed.

Peter-Paul Koch from 'The iPhone obsession' on his site, QuirksMode.

What’s the solution?

First you have to identify whether or not you have a problem. If you're designing for a specific audience, namely iPhone 4 users only, then there is no problem. At the moment, though, that’s a pretty small target audience. Additionally, if you're only using this media query to "clean up" the appearance of your site when viewed on the iPhone 4, it’s probably safe to bet that you're doing things the 'right' way.

Why use this specific targeting at all, especially when there are much better alternatives? Another trend which has resurfaced recently is being called Responsive Design. It’s sort of a rethinking of the elastic and liquid layouts of a few years back.

"Figure 1" from the A List Apart article 'Switchy McLayout: An Adaptive Layout Technique,' demonstrating the changing design of a web page based on the browsers display-size characteristics.

Using the very same idea, CSS media queries can be used to target all devices of certain display capabilities, for example display width and or height, not just the fact that their "device pixel ratio" (whatever the hell that actually means) is a certain value.

These media queries, although commonly in use for serving styles to iPhone, also work for any other browser which will recognize them. Consider this a way of 'future-proofing' your website. If I come along one day with a device that has a screen size similar, if not the same, as the iPhone, your website will already be appropriately styled for my browsing experience, no modification necessary.

Consider the following:

@media screen and (max-device-width: 480px) { /* iPhone 2/3 */ }
@media screen and (max-device-width: 960px) { /* iPhone 4 */ }
@media screen and (max-device-width: 1280px) { /* etcetera… */ }

Media queries can be a very powerful tool, and certainly don't stop at the functionality shown above. By changing max-device-width to device-width further style customization is possible:

@media screen and (max-width: 320px) {
    /* iPhone 2/3 portrait AND ANY DEVICE WITH SIMILAR DISPLAY SPECS */
}
@media screen and (max-width: 960px) {
    /* iPhone 4 landscape AND ANY OTHER DEVICES WITH MATCHING SPECS */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
    /* iPad portrait, etcetera… */
}

These media queries show some specific, powerful examples of targeting specific devices in specific modes, and can certainly be used for providing that functionality (if that’s your end-goal), but the point is that they shouldn't. They are powerful enough to give the designer the ability to build a site’s HTML once and style it endless ways provided some simple conditions of the device on which it is being viewed — not just the iPhone.

Go forth, and design wisely.

Buzzwords and 'buzz-concepts' travel through the web development community like the plague. After using the table element for page layout became faux pax everybody was so quick to jump on the bandwagon that there’s no arguing the point anymore — even in the off-case that it might just be appropriate. It’s such a widespread ’social injustice' that I've even had to explain to people that, "no, it really is okay to use a table here to mark up your tabular data," on more than one occasion.

Obviously, this isn't always a bad thing. It’s great to have people jump on board when something newer, better comes along. Recently, especially with all the hoopla over the new 'HTML5,' there’s been a lot of talk about semantics. Better semantics this, better semantics that. To me, most of the time it feels like we're just "being semantic" because it’s the cool new thing to do. You can go crazy with the label maker machine, but your basement is still going to be a fucking mess.

Garann Means seems to understand this flaw, and provides a great rant why using semantic markup is not always being semantic. Titled Defending Terrible Things, Garann explains the value of the b and i (italic) tags, versus their strong and em ’semantic' alternatives:

You know what strong and emphasis refer to? They refer to verbal inflections. You know what most peoples’ web browsers don’t do? Talk to them. You know what would annoy the shit out of me if I were using a screen reader to read a bibliography on the internet? Listening to a goofy-sounding computer voice try to emphasize every single word of Journal of the Study of Obscure and Mostly-in-Latin Canine Diseases Affecting Generally the Respiratory System but Also Sometimes the Lymph Nodes or something. I don’t know that this is still a problem, but the idea is ridiculous in and of itself. Italic does not always mean emphasis, nor does bold always mean MAKE THIS LOUD. Certain conventions of formatting require the use of bold or italics, but actual writing rarely does. If you need to place emphasis on something, you can do that with word choice. (Or anyway I hear it’s possible..)

Reproduced, because I couldn't have said it better myself.

So, what’s the moral of this story, then? Sometimes the cool, new, 'right way' to do things, isn't always the best way.

This past week I finally pulled myself out of the PC screen dark-ages and replaced my ancient CRT monitors with two model SP2309W LCD monitors from Dell. Now that I've gotten them settled in my workspace and have put them to some good use, I can happily say that they were money well spent. This is a brief overview of these monitors and my impressions of them.

These two SP2309 LCDs are a much needed improvement over my old CRT monitors.

The SP2309 is a attractive monitor with a full set of features. Native resolution is a massive 2048x1152 pixels. Inputs include HDMI, Dual-Link DVI-D, RGB (D-Sub), 1/8" audio-in and -out, as well as an integrated USB 2.0 hub with one in and four out ports. It also includes a USB-based integrated webcam and two microphones mounted at the top of the screen bezel. The included base allows for 360-degree swivel, and a somewhat limited range of tilt combined with elevation.

I use my computers almost exclusively for web development ('productivity') work and causual internet browsing, so I don't demand too much from my monitors. Although the SP2309W are a "twisted nematic" (TN) type LCD panel (which is commonly regarded as the poorest performing type), I have yet to be disappointed with them. I should also note that I'm currently running them in analogue mode (with the included 15-pin D-Sub cable), because my current video card is not capable of dual-monitor, dual-link support — that is: two monitors, both running dual-link connections. Because of their large resolution, they require a dual-link capable video card to display their native resolution in digital mode. Despite this, the monitors' performance is up to my expectations. I expect these monitors to perform even better once I get my system’s specs up to par.

Many reviews I have read on the Internet included complaints about poor viewing angles and color performance when viewed from anywhere off-center. I prefer to align the top of my monitors with my eye level (or slightly above), so this has never been a problem in my setup. I actually have quite a large range of movement before I start to experience washed-out colors or poor contrast.

I've found that the default settings of these monitors is quite appropriate, and in fact only adjusted the brightness and contrast so far. The default brightness setting was so bright that it hurt my eyes after a few hours of viewing time in my relatively dimly lit office. As an example, I currently run the contrast at 70, and the brightness at 25! They are quite comfortable at this setting.

I am very impressed with these monitors, and highly recommend them to anyone looking for a large, high-resolution widescreen. If ultimate gaming performance is a concern, these may not be the best solution, however I have not seen any evidence so far that they would not perform well.

As I've mentioned in previous posts I've been doing a lot of redesign on my website (mostly because I hate everything I come up with). One of the issues I, as well as probably every other developer on the planet, am dealing with is how to handle 'C-' and 'X-grade' browsers. Since I write mostly about web development, design, and technologies I feel pretty safe in the assumption that most of my readers are using the latest releases of their respective browsers; my analytics support this assumption. Despite that, I don't want to leave anybody out, including the possibility that someone is viewing over mobile device or other minimal/watered down browser.

On the other hand, I'm not going to spend many hours doing the leg-work of ensuring the absolute graceful degradation of every browser available (actually I'd prefer to enhance rather than degrade). I won't argue the importance of compatibility on the web, but this is a personal site — my site! — and I'm probably not going to directly benefit from the labor of ensuring everyone gets the same experience.

IE6 Update

To address this issue I've been researching 'out of the box' solutions for styling older browsers. My first knee-jerk reaction was to use IE6 Update. This created a sort of safety net for my concerns for a short while; I felt better that while IE6 (and similar) users got a somewhat broken experience at least they were informed why things looked that way. In my testing the IE6 Update bar didn't quite meet my standards. While it did indeed look and sort-of feel like Internet Explorer’s notification bar, the experience was lacking. The text on the bar was centered instead of being left-aligned, and the bar jumped around on screen while scrolling, and sometimes disappeared for short times, where it should be completely fixed to the top of the viewport. I resolved that while it is an interesting idea with honorable intentions, the bar is a bit too deceptive for my comfort.

The IE6 Update website, with 'demo' update bar active. The actual bar displays a bit differently than it should, and than it is depicted.

Notes worthy of mention:

• The IE6 Update notification bar is not in use on the IE6 Update website.
• In the 'Buzz on Twitter' section, the IE6 Update website lists (what I assume to be) the last three tweets from the website about the bar. None of the users who tweeted about IE6 Update are employing the bar on the websites listed in their Twitter profiles.

Browser-Update, and ActiveBar2 provide similar experiences.

Other Options

Another consideration was a more subtle upgrade ’suggester' like Pushup. Pushup targets not just Internet Explorer, but all major brands of browser save Google Chrome. If a legacy browser version is detected, Pushup displays a mostly unobtrusive popup in the upper-right corner of the viewport which gently notifies the user that an upgrade is available, and provides a link to the appropriate download page. While not as suggestive (nor preventing itself as deceptively) as IE6 Update, it still presents the same feeling to me. That is, telling the user that their browser is insufficient to surf the web, despite the fact that at some point in the past, it was 'top of the line.'

Similar upgrade suggestion techniques include the IE6 Warning Message, and a highly customizable Notification by Vincent Hasselgård.

These suggestion techniques tend to be more popular, and are in use (in some form or another) by some prominent sites like YouTube, Twitter, and Facebook. These sites tend to suggest an upgrade because of functionality and usability reasons, rather than simply basing the need for an upgrade simply because of a browser’s age.

And then there is the 'in your face,' modal box, or full window replacement methods; IE6 Upgrade Warning (which looks very similar to Pushup, and is possibly related), Chris Coyier’s IE 6 Blocker Script, and sevenup which supports custom styling 'plugins.' It is my opinion that these take the "rid the world of IE6" idea a bit too far.

Finally, worthy of mention is the Browse Happy website by the creators of WordPress. This isn't a script to run on your own website, but instead a full website (with testimonials), which can be linked to, to provide surfers with more information about the benefits of upgrading. Despite this being the most unobtrusive method of encouraging surfers to switch browsers, I still feel it is being unfairly deceptive. It refers to Internet Explorer in general (rather than a specific version), and cites a selection of articles from 2004 (and none more recent) which claim that Internet Explorer has poor security. In all, it feels more like an attempt at a smear campaign against Microsoft’s browser, regardless of version, rather than a valid upgrade campaign.

Universal Internet Explorer 6 CSS

In my searching for a suitable technique for styling legacy browsers — and to appease my laziness — I also came across what seemed like a promising solution. Universal Internet Explorer 6 CSS does not try to notify people that their browser is inferior, nor does it even try to encourage them to upgrade. What creator Andy Clarke has done is to create a base Cascading Style Sheet designed specifically for displaying pages of content in Internet Explorer 6 simply, and attractively.

Andy explains it best:

When I asked myself why people visit my sites, and the ones that I make for other people, the answer was always “for the content”. Content that is almost always written words and that means type.

That is why I'm now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.

More than that, I intend to serve exactly the same Universal Internet Explorer 6 CSS for all sites (give or take a little branding here, or a touch of customization there). This will pay dividends for me, reduce wastage for my clients and give end-users a well-designed, well-presented view of what they come for — content.

Universal IE6 CSS is by far the best 'prepackaged' solution to dealing with IE6 that I've ever come across. Clearly it can not compete with actually taking the time to tailor each web page into IE6 compatibility, but that usually means hours of labor, and time is money. I decided that this was the solution for me.

So I got myself a copy of the U.IE6 Style Sheet and dove into the code. The Universal IE6 CSS page at For A Beautiful Web has a couple of demos of how the style sheet would look if it were in use on a pair of popular web design sites, namely the A List Apart homepage, and an article from Jason Santa Maria’s blog, the latter of which I've shown some samples of below.

The very top section of one of Jason Santa Maria’s articles, styled with Universal Internet Explorer 6 CSS, as rendered by Google Chrome

The bottom half of the same article, rendered by Google Chrome

A reply, to the same article, rendered by Google Chrome

The Universal IE6 CSS is pretty damned attractive, if you ask me, especially for a style sheet with no layout. This is HTML at it’s most raw (for today’s standards, anyway) — pure content, with just enough styling to make it an attractive alternative to default browser styling. This was exactly what I was looking for for my site, so I slapped the style sheet on my website and fired up IE6 to take a look…

…but it wasn't good.

The style was still there, but all the elements that make Universal an attractive style, rather than just a clean style were gone. There were no hanging lists, no hanging left-borders for <code> blocks and <blockquote>s, and my content did't exactly fit in that clean 60%-of-screen-width-column. Okay, so it wasn't terrible, but it also wasn't attractive any more.

In a troubleshooting attempt, I loaded those beautiful demo pages from the For A Beautiful Web page I listed earlier. The problem was clear: Andy Clarke had seemingly designed a style sheet targeted at IE6 using some browser other than IE6. All those pretty little extras that made the style more than just regular HTML weren't supported in the very browser for which they were intended!

My previous screenshots of Jason Santa Maria’s article were taken in Google Chrome. Now have a look at the very same page rendered by Internet Explorer 6 running in Windows XP.

The very top section of one of Jason Santa Maria’s articles, styled with Universal Internet Explorer 6 CSS, as rendered by Internet Explorer 6

The bottom half of the demo article, rendered by Internet Explorer 6

A reply, to the same article, rendered by Internet Explorer 6

The brilliance that was the Universal Internet Explorer 6 CSS has sort of lost its luster, hasn't it? Okay, I'll admit that this is nitpicking over something rather minor; the content is still there, and still perfectly readable. I think without those little extras, though, that Universal IE6 CSS takes a major step toward degrading itself to unstyled HTML.

I still plan to use the Universal Internet Explorer 6 CSS on my website, and possibly future sites, but definitely not before fixing its shortcomings.