Category Archives: Web Design

Recent Links: Geography, Internet and Comics

Posted on January 21, 2013 by Kelson

A few interesting links that I’ve been meaning to post for a while now.

Geography and History

Using and Building the Internet

  • Warren Ellis has given up on Facebook and Google+ because it’s just so hard to reliably reach or listen to people. Think of how many posts in your news feed you miss each day just by not being online at the right time, never mind the pre-filtering Facebook does to the firehose.
  • Page Weight Matters – an engineer at Google led an effort to cut Youtube’s bandwidth requirements by a factor of ten. Strangely enough, when they started a live test, average page load time went up. It turned out that people on low-speed connections had found out about it and started using it even though it took two minutes to load where they were…because even that was still better than the 20 minutes they’d been stuck with before. (Via Raymond Camden)
  • If you run an email newsletter, keep in mind that many of your readers will try to read it on a phone. Keep that in mind when designing your format. Giant images with no text aren’t going to be too helpful.
  • How to keep electronics going when you lose power for days: Generators, batteries, car chargers, solar or kinetic chargers, etc.

Comics

  • Some of the earliest UNIX daemon art was drawn by none other than Phil Foglio of Girl Genius fame.
  • Saturday Morning in Front of La Salle De Justice is a painting by Rey Taira in DC Comics’ gallery show, inspired by Seurat’s famous painting Sunday Afternoon on the Island of La Grande Jatte (the painting at the center of Sondheim’s Sunday in the Park with George), but recast with the Justice League and other DC Comics heroes. It’s making the rounds again now, but I first saw it on Firestorm Fan a few months back.

Posted in Comics, Computers/Internet, Travel, Web Design | Tagged , , , , , , , | 1 Comment

cfspreadsheet + GetTempFile() = NullPointerException

Posted on September 27, 2012 by Kelson

Every once in a while I encounter a problem with something so blindingly simple that

  1. I can’t imagine I haven’t tried it before, and
  2. I can’t believe no one else has documented the problem either.

ColdFusion 9 and later has a tag called <cfspreadsheet> which makes it dead simple to read, update, or create an Excel file. Want to plug the results of a query into a spreadsheet? Literally one tag with just three parameters.

There’s also function GetTempFile() that will create a guaranteed unique file on the server that you can then manipulate.

The obvious solution if you want to create a spreadsheet to download is to create a temp file, write to it with cfspreadsheet, then serve it up.

<cfset filename=GetTempFile(GetTempDirectory()) >
<cfspreadsheet action="write" overwrite="true" filename="#filename#" query="myquery">
<cfheader name="Content-disposition" value="attachment;filename=MyFile.xls">
<cfcontent type="application/msexcel" file="#filename#">
<cffile action="delete" file="#filename#">

It turns out this won’t work. You’ll get a Null Pointer Exception in the logs. Not because of anything you’d expect, though…it turns out that cfspreadsheet is relying on the file extension, and since GetTempFile() gives you a file ending in .tmp instead of .xls, it isn’t sure what to do with the file.

Solution: Find some other way to name your temporary file, and give it an .xls extension.

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

A matter of perspective

Posted on April 14, 2012 by Kelson

Last week, the webcomic XKCD ran a strip, Umwelt. Or perhaps it would be better to describe it as several comic strips.

As explained in the mouseover text, the title refers to the idea that because animals have different senses, each animal effectively inhabits a different reality. This can philosophically be extended to human perceptions.

Keeping that in mind, make sure you read it in a few different web browsers (both desktop and mobile!) for the full effect (JavaScript required). And try resizing the window.

As an art project, it’s the best use of browser-sniffing I’ve ever seen.

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

Recent Tech Links: Unmaintainable Code, XKCD on The Cloud and More

Posted on June 18, 2011 by Kelson

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

IE7 is the New IE6.

Posted on May 17, 2011 by Kelson | Leave a comment

Recent Links: Comic Strips, Moon, Hotspot Safety, Flash Forward and More

Posted on March 12, 2011 by Kelson

Comic strips and art:

Sci-fi and fantasy:

  • Keeping Up With the Cardassians. For months, this is what I heard every time someone mentioned the Kardashians. (What can I say? My brain is more attuned to Star Trek than to reality TV.)
  • Author Robert J. Sawyer answers pointed questions about Flashforward and the TV adaptation, including what went wrong. I have to agree that it was really hurt by focusing too heavily on the conspiracy arc.

Coolness!

Tech stuff:

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

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

IE9 vs. WordPress’ Twenty-Ten

Posted on September 24, 2010 by Kelson

As usual, the first thing I tried after installing the Internet Explorer 9 beta last week was to see how it handled all of my websites. It does just fine with everything except this one. It shifts the header image off to the right. This is particularly odd because it’s just the standard Twenty-Ten theme that’s the default for WordPress 3, customized with one of my own photos.

Oddly, it was just fine in the last IE9 preview. Even stranger, the sample 2010 page looks just fine. It’s not my customizations, though. I’ve checked on two other locally-installed WP sites.

There’s a short discussion thread at the WordPress forums, and a bug report. As of today, it’s marked as fixed, but here’s the question:

Is it worth fixing in WordPress?

I haven’t found any indication as to whether this is a bug in the IE9 beta or a deliberate change. If it’s a deliberate change, it’s an odd one, because it takes behavior that used to be the same as every other web browser out there and changes it to something different. If it’s a bug in IE, though, that’s where it should be reported and fixed, not in just one of the sites affected.

That said, I’m probably going to try the workaround on at least one of my sites the next time I get on a machine with IE9.

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

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 Conventions, Web Design | Tagged , , , , , , , | 17 Comments