Tag Archives: webdev

Webkit display:table-cell Problem

Posted on May 4, 2010 by Kelson

I recently tried to retrofit a mobile layout onto an old table-based site using CSS. It was a fairly simple layout: A banner across the top, two columns, and a footer. I figured I’d use CSS to “unwrap” the table and make the sidebar and main content area into full-width sections instead of side-by-side columns.

In theory this should be simple: CSS handles tables by using the display property and assigning it table, table-row and table-cell for the <table>, <tr> and <td> elements. You can assign these properties to other elements and make them act as tables, or you can assign block or inline to these elements and make the table act like a series of paragraphs.

Initial testing worked perfectly in Firefox 3.6 and Opera 10.5x. Internet Explorer 8, as expected, ignored the changes entirely. Chrome, however, did something very strange, and Safari reacted the same way: The banner shrank, and the columns changed from a narrow sidebar to a 50/50 split…making it actually worse for small screens.

Clearly WebKit didn’t like something I was doing. Unfortunately, WebKit powers the exact platforms I was targeting: the iPhone and Android!

I dug around with the developer tools a bit to see if I could figure out what was going on. Was the browser not applying the property? Were the table cells inheriting the “original” property from somewhere else? Did I need to change properties on thead and tbody as well?

What I found was that WebKit did recognize the display:block I had added, but somehow the computed style was reverting to display:table-cell. This only applied to table and td, though. Table rows actually did what I told them to, which was why the result ended up looking bizarre.

If it hadn’t changed anything, I probably would have chalked it up to the capability just not being implemented yet. But since it worked on table rows, but not on cells, I decided to treat it as a bug in WebKit and went looking for the best way to report it. I ended up creating a WebKit Bugzilla account and reporting it as bug 38527.

Check out the testcase in Firefox 3.6 or Opera 10.5 to see what it should look like, then take a look in Chrome 4 or 5 or Safari 4.

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

Comic-Con Hotels 2010: Reviewing the Reservation Form

Posted on March 18, 2010 by Kelson

It was fast. Anticlimactic, really. It took a few reloads to get the Comic-Con International home page up, but once I could click on the reservation link, everything went smoothly. I was done by 9:05.

The reservation page was actually optimized!

  • Just one image: a banner across the top.
  • Everything was on one page, including the list of hotels, the personal info, and the hotel choices.
  • Hotel selection was done by client-side scripting, so there was no wait for processing between selections (and no risk of typos confusing their processing system later today).

This is a huge deal, especially compared to Travel Planners’ horribly overdesigned 2008 forms — yes, forms, plural — that kept bogging down. (I never even saw last year’s, though I tried for an hour and a half to get in.)

On the downside, that one page does load a half-dozen script files, but that doesn’t seem to have slowed it down much.

In case none of your 12 choices were available, they asked for a maximum price you’d be willing to pay for another hotel that’s not on your list. I vaguely recall this being a feature of the old fax forms, but I don’t remember being asked this on the phone last year.

I was surprised to find that they didn’t want credit card info immediately, but that’s good from a streamlining perspective as well. The hotel choices, room type, and contact info are critical in order to make the reservation in the first place. Payment can be done later, so in a rushed situation like this, it’s better to handle it later. Plus, not asking for credit card information means that they could run the site without encryption, speeding things up a bit more.

I would have liked to have gotten a confirmation number for the request, or an email, just so that I could be sure that I was in their queue. And to be sure that I entered the right email address. And the right start and end dates. And…well, you get the idea. I’m a little paranoid about the process at the moment.

Here’s hoping that the back end of the process, and sending out confirmations, goes as smoothly as the front end did.

Update: Short answer: it didn’t. Long answer: I’ve written up what went wrong, at least from the guests’ point of view.

Posted in Comic Con 2010, Comics, Web Design | Tagged , , , , , , , | 17 Comments

HTML Validator Trouble

Posted on December 12, 2008 by Kelson

The W3C Validators are in trouble: apparently running the tools is hideously expensive and they’re low on funds. #

I usually use the WDG Offline Validator as a first line, but the W3C’s tools are incredibly useful. #

Posted in Web Design | Tagged , | Leave a comment

What’s Dynamic About It?

Posted on March 14, 2008 by Kelson

In my post on Webslices, I mentioned that the home page of my Flash site uses server-side includes instead of a static HTML file. But it doesn’t really update that often: maybe 3 or 4 times a month. Is it really worth building that file dynamically? Should I switch from SSI to something more powerful, like PHP, that will let me add headers so that repeat visitors won’t have to re-download the whole page except when it’s actually different? Or should I switch to a static file, with the same benefits but simpler? What am I actually building, anyway?

Looking through the code, I find:

Browser upgrade banners. People using old versions of Firefox (currently 1.5 or older) or Internet Explorer (currently 5.5 or older) get an “Upgrade to Firefox 2″ banner instead of the thumbnail of the current issue of the comic. This is just as easily done with JavaScript—and is done with JS elsewhere on the site. (I used to make some minor adjustments for other versions of IE, but I converted them all to conditional comments a while back.)

Last-modified date in the footer, pulled from the actual file. I’ve already got a script to update this in the static files, so it’s just a matter of adding it to my general update script. A two-minute, one-time change and I’ll never notice the difference.

Latest posts from this blog. Probably better done with an iframe, or maybe using AJAX. Drawback: either method would mean an extra request from the client. On the plus side, repeat visitors would be able to re-use the rest of the page, and only download the 5-item list.

Unique-per-day spamtrap addresses, hidden where harvesters might pick them up. But only a few of them still accept mail and feed it to filters. Mostly, they just waste spammers’ resources. I could easily either get rid of them or change the script to generate a new address with each update instead of each day.

So really, there isn’t much stopping me from using a static file for the most-viewed page on the site, with all the attendant savings in system resources, bandwidth, etc.

On the other hand, I keep contemplating switching to a database-driven system for the whole thing, which would make any changes now meaningless. But since I’ve been thinking about that since around 2000 or so, and haven’t changed it yet, that’s not exactly a blocker!

Update (March 30): I’ve made the conversion to a static file. The blog posts and browser upgrade banners are now done client-side (and run after the rest of the page is loaded), the last-modified date is part of the pre-processing script, and I just removed the daily spamtrap addresses. Now to see whether it actually improves performance.

Posted in Comics, Site Updates, Web Design | 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

Net Links

Posted on January 29, 2008 by Kelson

Posted in Computers/Internet, Web Design | Tagged , , , | Leave a comment

The Right Tool…

Posted on January 16, 2008 by Kelson

I’ve been reading High Performance Web Sites and started thinking about how to apply the guidelines to my own sites (not to mention stuff for work). A lot of them are things I already do: minimize external resources, use compression & cache control, etc. Others are a bit out of reach for a personal site, like using a content delivery network. It got me looking at the way I use scripts, and reminded me of a change I made about a year and a half ago.

Way back when, I put a simple app on my Flash site: a team-name generator for teams of speedsters. It randomly generated a name from two lists, and provided a button to generate another one. I originally wrote it in PHP.

The funny thing was that it was the most-hit page on the site, because people would sit there and hit the button to generate a new name half a dozen times before moving on. And because it was a sever-side script, that meant not just another HTTP hit, but re-downloading the entire web page with only 2 words being different.

Eventually I realized it was much better suited to a client-side app. I rewrote the whole thing in JavaScript, using DOM functions to replace the name on the current page instead of reloading. I left the hooks to the PHP in place, so that it would still work for clients with JavaScript disabled.

  • It was much faster — practically instantaneous, in fact.
  • It used a lot less bandwidth — 40 KB (5 KB × 8 ) vs. 6 KB (5 KB + 1 KB) for a typical 8-name* scenario.
  • Traffic stats more accurately reflected the page’s popularity, as it dropped from #1 to around #30–50.

* Based on a drop from 32,000 hits/month in July 2006 to 4,000 hits/month in September, with the rest of the site staying about the same, it seems people were hitting reload 7 times.

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