Tag Archives: html

Mobile Web Layouts vs. the Viewport

Posted on October 16, 2010 by Kelson

A few years ago, I tried to give some of my most-used websites a nice, clean look on mobile browsers by adding a stylesheeet with the “handheld” type. Then the iPhone came out and ignored them, and everyone copied that behavior, making it useless.

Somewhere along the line, I revisited the same CSS techniques, but used the “max-width” media query to change the layout on smaller screens. This seemed even better in the long run, since screen size matters more than whether a device is a desktop computer or a handheld computer. (The iPad was nothing but a long-standing rumor in those days, but demonstrates this clearly.)

The raw screenshots (click to view) are slightly larger, but since mobile devices often have denser screens, if you’re reading this on a desktop, it’s probably about the same physical size.

That worked great on the iPhone, and on the G1, which I updated through Android 1.6. I stopped testing it after a while, and no one commented on it, so I figured it was still working. (Reminder to self: that’s always a mistake.)

Last week I got a G2, which came with Android 2.2. Last night I visited one of my websites, and was presented with this shrunken, unreadable mess…because Android doesn’t actually use the real screen size anymore. It pretends it has a bigger screen so that it can present a desktop-like view and then let the user zoom around. Mobile Firefox does the same thing.

<rant>Why is it that every time I find a clean technique to use the same markup on both desktop and mobile devices, some browser manufacturer decides to bypass it in favor of giving the user a clunky imitation desktop view instead of one optimized for their experience?</rant>

*ahem*

Anyway, it turns out it’s possible to fix this problem with the <meta viewport tag> as shown here:

<meta name="viewport" content="width=device-width">

So I can provide nice, clean small-screen layouts again…after I add extra markup to every single page that uses these stylesheets.

Problem solved!

Well, almost. It fixes the layout…but it also prevents the user from zooming out for quick scrolling, which can be awfully useful on a long page.

Screenshots of the Barry Allen Flash profile, taken using the Android SDK emulator with stock Donut and Froyo images.

Posted in Annoyances, Web Design | Tagged , , , , , | Leave a comment

Why Google Buzz Won’t Run on Your Android Phone (Yet)

Posted on February 9, 2010 by Kelson

I’ve been hoping to try out Google Buzz, but it hasn’t hit my Gmail account yet and it won’t run on my phone*…even though it’s a web app. Comments at Android and Me and at Mashable show that I’m not alone.

It turns out that Buzz uses HTML5 features (specifically appcache, database and location) to store local data and to detect your physical location…and those capabilities were added in Android 2.0.

The support thread mentions that they are “working on another version that will make Buzz for mobile accessible on older Android OS versions (and some other smartphones as well).” The browser in Android 1.6 and below supports similar capabilities through Gears, so they may be planning a Gears-based workaround.

This would be a lot less of an issue if it weren’t for the fact that most of the Android phones out there still run 1.6 or even Android 1.5. IIRC only the Droid and Nexus One have officially been updated to 2.0 so far**, so unless you have one of those two models, you’re more likely to get Buzz to run on an iPhone than Android.

Funny, that.

*I’ve got a G1. It can only access Buzz through the updated Maps app, which brought up a bunch of people in nearby office parks posting things like “Testing Buzz” and “WTF is Google Buzz?”

**A few other phones have had updates announced, but I don’t think any have actually shipped yet. I could be wrong.

Posted in Computers/Internet, Troubleshooting | Tagged , , , , , , , | 2 Comments

Geekery: WiFi and Presidential HTML

Posted on January 7, 2009 by Kelson

Hmm. I’ve used internet cafes while travelling, but have no idea wher to find one w/in 20mi of home. WiFi hotspots, OTOH, are everywhere. #

Political geekery; saw a bumper sticker reading </bush>. Only prob: tag should be <president name="bush">. Did I mention geekery? #

Posted in Computers/Internet, Politics | Tagged , , , | Leave a comment

Webslices and Revisiting Microsummaries

Posted on March 13, 2008 by Kelson

When the first Firefox 2 beta was released, I looked into Microsummaries, a feature that enables bookmarks to automatically update their titles with information. I concluded they were useful, but not for anything I was doing. The main application would be my Flash site, but it already had an RSS feed for updates, and a microsummary could only really include the most recent item.

Now the first IE8 beta supports Webslices. They’re similar in concept, but can include formatted data (not just plain text) and use microformat-like markup on the web page instead of a <link> element in the head.

I figured with two browsers supporting the concept, I’d give it a shot. I adapted the script I use to generate the RSS feed so that it will also take everything on the most recent day and generate a text file, which is used for the Microsummary title. For the Webslice, to start with I just marked up the “Latest Updates” section of the home page. Since I haven’t installed IE8b1 at home, I’m using Daniel Glazman’s experimental Webchunks extension for Firefox to try it out. Unfortunately the extension doesn’t seem to resolve relative links in its current state.

The real question, of course, is whether either technology offers anything better than what feeds can do now.

I think I’ll end up going the external-feed route for the Webslice as well, since it’ll use a lot less bandwidth than having a bunch of IE installations pulling the entire home page once a day. Plus since I’m using SSI on that page, it doesn’t take advantage of conditional requests and caching, and a static file will. But that’ll have to wait. Lost is on in 2 minutes, and after getting up earlier than usual this morning, I’ll probably be going to bed right after the show.

Update: I checked in IE8, and the webslice does work as expected. A few minor differences: Webchunks pulls in external styles, like the background and colors, while IE8b1 only uses styles in the chunk itself. Interesting bit: I’m marking up list items as entries, and IE8 is actually displaying them as a bulleted list, while Webchunks is simply showing the content.

So it at least works. Maybe tonight or Sunday I’ll see if I can refine it a bit.

Posted in Web Design | Tagged , , , , , | 3 Comments

Advantages of standards-based design: Compatibility

Posted on October 12, 2006 by Kelson

Microsoft is really pushing for people to make sure their websites and apps are compatible with IE7. Apparently this is a real concern for a lot of people who relied on certain proprietary features, bugs, and quirks in IE6. I guess they figured they wouldn’t have to worry about future versions. (Hmm… I wonder where they got that idea?)

The fact of the matter is, I’m not worried. I tested my personal sites and the sites I’d built for work months ago, using the IE7 betas, and more recently with RC1. I made a couple of minor changes to some stylesheets, but that was about it.

Why? I’ve been writing standards-based code for years. I validate it from time to time, and I test to make sure it works in the latest versions of Firefox, Opera and Safari as well as IE. So the code was already portable.

Plus, anything new I’ve built since January has been designed with IE7 in mind from the beginning.

Most of the changes were to workarounds for IE6. Either stopping them from running on IE7 (if the bug was fixed), or keeping them running on IE7 (if it was done using a CSS hack).

Posted in Web Design | Tagged , , , , , | Leave a comment

Taking the Web Beyond the Typewriter

Posted on December 18, 2004 by Kelson

I recently stumbled across an old copy of the Demoroniser (which my American-trained sense of spelling keeps trying to spell as demoronizer), a script designed to correct some of the, well, moronic HTML generated by Microsoft Office. Aside from flat-out coding errors, Office would use non-standard characters for things such as curly quotes or em-dashes that would only show up on Windows computers. If you viewed these sites on a Mac, a Linux box, a Palm, etc., they would seem to be missing punctuation everywhere. His solution was to convert these to their plain-ASCII equivalents.

Over the last year or so, WordPress and A List Apart have converted me from “stick with the lowest common denominator” to “let’s show real typography.” Since the days of the Demoroniser, Unicode has become a standard part of HTML, so modern browsers* can either display a full range of characters or convert them to something they can display. You probably won’t be able to see Chinese text in Lynx, but a properly encoded curly quote—“ or ”—will show up as a plain old ".

For one thing, real typography looks much nicer. Continue reading →

Posted in Web Design | Tagged , , , | Leave a comment

Butterfly wings

Posted on August 11, 2004 by Kelson

Last week I started looking at ways to cut down on false positives in our spam filters. I’ve only seen two in my own mailbox this year, but of course everyone gets different kinds of email. I’ve been trolling the server logs for low-scoring “spam,” looking for anything that looks like it might be legit, particularly if the Bayes subsystem has already identified it correctly but isn’t enough to counteract the score assigned by other rules. (Unfortunately, it’s hard to tell when all you’ve got is the sender, subject, and list of spam rules.)

One item I noticed was a copy of the Microsoft Technet Flash newsletter. I thought this was odd, since I’d gotten a copy of the same newsletter and it hadn’t been labeled. In fact, it turned out that my copy only scored 0.3 points, and the other hit 6.4! (5 points indicates probable spam.) What could explain such a disparity?

Answer: two very small differences. Continue reading →

Posted in Spam | Tagged , , | Leave a comment

New Layout

Posted on February 11, 2004 by Kelson

I finally put together a new layout! I tried to do as much as possible in CSS and leave the HTML as little changed as possible, and when I finished I was able to keep the default WordPress layout as an alternate. In theory I ought to be able to plug in any of the submissions from the WordPress CSS Style Competition as alternates as well.

It’s been tested so far on Mozilla, IE 6, Opera 7, and Konqueror 3.2. It doesn’t use anything more complicated than Fahrner Image Replacement, so it shouldn’t cause too many problems. I’ll try to test it in a bunch of other browsers at work tomorrow.

I consider this a first draft – among other things I figure on adding to the main title banner – but it’s something a bit more distinctive than the out-of-the-box layout we ended up with after the upgrade to 1.0.

Updated Feb. 12 and Feb. 13 to describe testing in more browsers and the interesting saga of tracking down a bug in Internet Explorer 5.0: Continue reading →

Posted in Site Updates, Web Design | Tagged , , , , | 4 Comments