I like Ang Lee. I really do. Well, I think I do. I certainly like the "Crouching Tiger, Hidden Dragon" Ang Lee. And I think I like the "Lust, Caution" Ang Lee, but I haven't actually seen that film as of yet. However, I definitely don't like the "Hulk" Ang Lee. Let's just say that I'm a fan of Ang Lee when commas are involved in the title.
My point is that the "Hulk" movie Ang Lee directed wasn't really what it should have been. I'm not sure at which point things fell apart, but maybe it had something to do with plotlines involving squid DNA. Fortunately, Marvel was able to make things right with this year's "The Incredible Hulk" which I'm pleased to announce did not involve squid DNA, but did involve Liv Tyler. It also didn't suck, which means you should check it out if you like large green men pounding on tanks.
That's a pretty specific fetish, I'll admit.
The movie just came out on DVD. You should go rent it. (And Iron Man, if we're going to get down to the comic book nitty gritty.)
No, Marvel didn't sponsor this blog post. But if they would like to do so, they should drop me a line.
There's two points that I'm getting to here. The first is that the word "Hulk" starts to look very strange the more you read it. The second is sometimes things are better the second time around.
Back in August I wrote a little blog post called Tiny Can Be Ugly. In it I discussed the increasing access of websites by handheld devices and the steps we needed to take as website creators to make sure our sites could be both accessed and appreciated by these devices. It wasn't my best work, and I'm officially suggesting you disregard most of the suggestions I gave there about targeting mobile devices. Mainly because they didn't work.
Fear not, I'm here to correct the mistake with a fresh look at mobile devices, websites, and how the two relate.
There's a lot of devices out there, and a slew of strange, cthonian browsers concocted by engineers who've had their brains impregnated with dark visions spawned by the elder beings living in between the curtains of reality. Since I'm not nearly motivated enough to catalog them all, I'm going to focus instead on the most popular two of this bunch: the Safari browser on the iPhone and Opera Mini (which is on a slew of devices including the Nintendo Wii). Starting tomorrow there will be a third major contender, Google Android's browser, but as that also runs on Webkit (the browser engine that powers Safari) I'm expecting that it will be a short skip from the others in behavior.
If you don't have a Opera Mini-equipped device, you can test your site designs on their handy Opera Mini Simulator. The iPhone allegedly has a simulator, but based on comparing it with results on an actual iPhone it appears to not behave at all like it should, so I'm not going to link or recommend that.
Both browsers are capable of running websites almost exactly like the big boys, using zoom and pan techniques to navigate the larger sites. However, it's not exactly a pleasant experience constantly having to scroll horizontally to read text or zoom in and out to view a page. So in an idea situation a site's layout would modify itself to handle smaller screens. There's other concerns, such as loading time for wireless devices, the presence or absence of plugins like Flash (still one of Apple's less intelligent and more petty decisions, I might add), and the speed at which handheld devices can process JavaScript.
A first question for anyone going down this road is why bother?
The answer is that you need to be looking forward. Especially in an economic climate like our current one, the wise developer needs to be thinking from the first step how to make the most of their current projects. A great many devices other than computers are accessing the web these days, and those numbers are going to climb. It's been a slower trend in North America thanks to the horrendous relationship between mobile phone carriers and the software on their devices, but since the iPhone explosion and with the imminent emergence of Google Android, the pace at which people are going to be reading their favorite webcomics via devices is going to accelerate exponentially.
The focus for this particular blog post is dealing with small screens. We can't really do anything about plugins other than be aware of the deficiency, and JavaScript for handhelds is a topic all of it's own.
Today's example site is Squirrelfeed, a collection of social feeds that relate to myself all available on one simple page. I'm not sure who's going to make use of this service other than my mother and stalkers (fun fact: I was voted most likely to have his own cult in my graduating high school class, and was second place for most like to be president), but it's a handy small page to work with.
If you look at it in a normal browser, you'll find that we have a four-column layout going on. Nothing overly complicated. But with a mobile browser we'd have major problems. Prior to fixing the site for mobile screens, devices were either zooming the screen way out (requiring a lot of zooming and panning to check it out), or they were squishing the columns over each other, making the site unusable.
This really doesn't work out at all.
So how are we going to fix this? What sort of complicated, unwieldy solution do we have to bring to bear?
As luck would have it, the solution is incredibly simple. We're going to use media types and media queries in link tags to direct our mobile browsers to overwrite the layout styles that are causing the problem.
A normal link tag looks something like this.
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
The media property there is for screens, which means most devices will load this sheet regardless.
To load a stylesheet for a mobile device, the W3C standard is:
<link rel="stylesheet" href="mobile.css" media="handheld" type="text/css" />
Nice and simple, right? The media attribute has a value of "handheld", which is pretty self explanatory.
Unfortunately, it's not that simple. The people at Apple are pretty proud of their iPhone. So proud, in fact, that they have it ignore handheld stylesheets in favor of the normal ones due to their confidence of how it can handle a website. This is well and fine, since the iPhone can handle pretty much anything that doesn't rely heavily on Flash, but it doesn't make our task any easier when we want to have the site use a modified layout for the iPhone's smaller screen to save on all that panning.
This is where we start to get tricky and use media queries in the media attribute. With queries we can target not just devices, but also properties of the devices. Of particular use is 'max-device-width', which tells you how much real estate you've got on the devices screen. Media queries are fairly new, and not all devices use them, but fortunately the iPhone does, so we can get it to behave by including them in our link tag.
We'll adjust our tag to look like this, then:
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width: 480px)" type="text/css" />
What the media attribute here is asking for is that both handheld devices and screens that are no larger than 480px wide load the mobile stylesheet. This catches both the iPhone and Opera Mini, as well as other handheld devices. Victory!
Well, mostly. Due to some quirkiness some normal browsers will grab this stylesheet when they shouldn't. To Make them play ball we make a very slight change:
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
These quirky browsers hit the 'only' part of the query, don't understand it, and therefore don't load the stylesheet.
Once you've got the stylesheets loading properly, you can start making modifications to make the content fit more appropriately in smaller windows. In the case of SquirrelFeed, I've elminated the four columns, making them instead load vertically, with all the content fitting snuggly (and legibly without the need for zooming) in the devices' screens. I've also removed the large landscape image from the header, to cut down on load time (I've kept the squirrel, which peeks from behind the title).
Things to be wary of include setting pixel or em-based widths on page elements. If the element is fixed to a size wider than the device's screen, than the site will be zoomed out (or require panning) to be visible on the device. I've found that percentage-based widths work great for sites that you don't want to alter the layout but you do want the page to be legible on the more forgiving devices (like the iPhone, which does a good job of showing the main CSSquirrel site without zooming). However, to avoid zooming out on smaller devices, it's best to have your mobile stylesheet utilize a one-column layout, with no explicit width.
Yes, it's less exciting. However, you can make it look professionally polished while reducing visitor fatigue by preventing the need to pan and zoom to make use of the site.
For those curious about what changes I made for mobile devices with SquirrelFeed, here's the normal stylesheet, and here's the mobile override stylesheet.
So are we done?
Not quite. In it's infinite wisdom Apple decided to have iPhone's Safari browser load webpages by default as if they're 980px wide, unless told otherwise. The width of the iPhone's browser when in vertical mode is 320px. So if you don't instruct the iPhone regarding the viewport's size, a carefully optimized mobile site may have itself zoomed out to accomodate the assumed 980px width.
It's not a calamity, fortunately, as we can easily fix this with a meta tag. (For more information about these kinds of solutions for the iPhone, take a look at Apple's Web App Dev Center for the iPhone. Here's the tag:
<meta name="viewport" content="width = 320" />
This instructs the iPhone to set the viewport to an assumed width of 320px, which, if your mobile stylesheet is impacting the site's layout properly, is the full width of the page.
Although my own testing has shown this procedure to work so far, I'm going to recommend due diligence for any mobile site developement you do. With the plethora of device and browser combinations appearing out there, it's not likely that you can account for all of them, but if you cover your bases they should all behave properly.
I hope this tutorial has helped alleviate any confusion I may have created with my earlier attempt to discuss this subject. Properly armed, instead of making a poorly recieved "Hulk" you can produce something Incredible.
