9-Jan-2012 (Mon)
Wherein the web site gets a big overhaul.

I've just done a huge redesign of the DNA Lounge calendar. Please let me know whether it looks sane to you!

For many years, I clung to the idea that the calendar should be one page per month, under the hypothesis that having the info for all of the other events be right there would be faster for browsing around, and would also cause at least some people to check out events that they might not otherwise have known about.

But, now that I've submitted to the NASCARization of the web and stuck all those "Like" buttons on everything, the page got really, really slow to load. The junk buried under the IFRAMEs shipped by Facebook and especially Google is gigantic and horrible and they should hang their heads in shame. Those buttons cause an absurd slowdown on any page that includes them, but on a page like mine, that typically has 40+ different Like buttons on it? Forget about it. You'd think that shit would be cached and shared, but no.

So, I gave in and switched to one page per event, like the rest of the world does. This let me re-do the layout to use more and larger images and stuff, since there aren't 20+ events on the same page any more. Consequently, I think it looks a lot better.

Let me know if it looks wrong for you. Specifically, let me know if something looks screwed up on your phone, or if any of the boxes dance around weirdly when you resize the window. (It has three different layouts it runs through as space decreases, but it shouldn't thrash.)

For some events, there's a bit too much unused blank space on the page, but it's really hard to come up with a layout that works well for all of our events, given the dramatically different distribution of text and images they tend to have...

Also!

We've still got a bunch of those "Save DNA Lounge" shirts (the ones that say "A DISORDERLY HOUSE INJURIOUS TO THE PUBLIC WELFARE AND MORALS" on the back) left over 2009 and 2010 fundraiser for our legal battles. As they are no longer what you would refer to as "timely", and as they are taking up much-needed shelf space, we're trying to get rid of them. If you want one, now's the time! We're unloading them for just five of your American dollars.

18 Responses:

  1. Magnus says:

    Looks nice in Opera 11.60 except for on the 13th where ypu have two events on the same day, then they both get cut off on the bottom.

    • Jamie Zawinski says:

      Cut off how? Which page, the event page or the calendar grid? It looks fine to me in Opera...

  2. Candi Razor says:

    Looks good on my iphone. Only suggestion is the similar events are listed both above and below the actual event - I would remove it from the top. It might be confusing for those that don't scroll down to see the event; they'll think the page didn't load right or there is no info.

    • Jamie Zawinski says:

      You're only supposed to see "similar events" once. On phones, it's at the bottom; on wide screens, it's in the left column. It should never be above.
      I suspect you need to clear your cache? That's the only way I can think of that you would be seeing it twice!

  3. Jon Dowland says:

    I'm the proud owner of one of those shirts, which I needed to have smuggled out of your fine country by an assistant on my behalf.

  4. the hatter says:

    All looks fine to me in Opera (11.6, OS X).

    the hatter

  5. badc0ffee says:

    I'm seeing the overhang on Firefox 9 as well. (For what it's worth, IE9 has the same issue).

    Looks fine on Chrome 16.0 on Windows.

  6. Christopher says:

    None of the "Share" calendar links seem to work just now; they all give "unparsable event UID".

    • jwz says:

      Thanks, fixed. Though I'm not sure if the Yahoo API I was using is gone, or just down at the moment. Does anyone know? Also can someone try out the "Export to Google" link and let me know if that works?

      • pawliger says:

        Export to Google mostly works. Date, time, title, location, all work. The event Description is truncated to 369 octets including the [...], not sure where. Example: the event description for Hubba Hubba (which has a lengthy description) ends with:

        "The Official Edwardian Ball Weekend Opening Night Jubilee!

        Featuring performance [...]"

        • jwz says:

          Yeah I discovered empirically (when I did this years ago) that it failed if the GET url was longer than 700ish bytes, so I truncate it on my end.

  7. Tyler Wagner says:

    The new calendar (and whole DNA site, really) looks good on Dolphin on Android 2.3.7.whatever, on HTC Desire HD running whatever crazy custom build I have this week.

    I tested with both an Android UserAgent, and with a "Desktop" one, using the cool plugin that lets me switch. The render was the same. The sidebar becomes a top menu in landscape mode. Well done there.

  8. Still too green. ;^P

  9. Louis says:

    There's a cool hack to prevent the Facebook and G+-overlords from tracking people across the web, a site made the "Like" button grey, and the user had to click on it before the Facebook-IFRAME is loaded and the button turns blue and is activated: http://adland.tv/content/heise-creates-two-click-facebook-button-avoid-traffic-tracking-facebook-peeved

    I guess this info is perfectly timed, huh.

  10. jwz says:

    Well, fuck. It does not overlap for me in Firefox on Mac, default everything. The left column is sized to be 13.5em wide, which was the right size for that text in every browser I have...

    I guess you're getting a different font than I am.

    I don't think there's any way to make this work without hardcoding the width of that column. I tried.

  11. Enid says:

    Yeah, I'm on a PC. Maybe just a line break before the zip code? (or a line break for PC users only...)

  12. David says:

    Just for the record, I've got the zip code overhang too in Firefox 9.0.1, Windows 7. Looks fine in IE8 and Chrome.

  13. badc0ffee says:

    If I remove the <b> around each line of the address, it no longer overlaps, and it looks like the font in "Calendar", etc.