24-Jul-2012 (Tue)
Wherein the site gets a redesign.

I have inflicted a pretty major redesign upon the DNA Lounge web site. What do you think? Let me know how it works for you.

44 Responses:

  1. Jacob says:

    "Directions", "Webcasts", and "Contact" have an unescaped --> (dash, dash, greater-than) near the top, under the main header. Otherwise works great in my old-ass no-scripted Firefox (unlike half the web or more).

    • jwz says:

      I don't see what you're talking about.

      • Lun Esex says:

        I can actually also see that in an old Firefox 1.5 I have on a dinosaur machine, but not in Firefox 13. But really: Firefox 1.5? Whatever. :)

        It doesn't even handle some of the CSS on LI tags right.

      • Jacob says:

        Older browsers only I guess (Firefox/3.5.16). There's a %%HEADING%% in a comment that "ends" with -- > (dash, dash, space, greater-than), the line with B CLASS="gwbox" (containing e.g. "Contacting Us"), and then a proper end-of-comment --> (dash, dash, greater-than). The last one is what gets rendered for me.

        • jwz says:

          Oh, wow. I had no idea Firefox was so "helpful" and "lenient" in its parsing of comments.

          • Jason says:

            Not "helpful" so much as "typical standards weenie". Apparently the SGML spec says that <! starts an SGML doohickey, and any instance of -- turns a comment on or off. Except that nobody in the history of the Web had ever done it that way so things would break in Firefox in fun and interesting ways if someone typed a long dash in the middle of their comment.

            Firefox, being open source, told everybody that they were the only ones doing The Right Thing and that pages which had worked fine for a decade should "fix" their HTML. A few of them actually did.

            They finally gave up tilting at that particular windmill around version 4 or so, so they've been doing what's expected for at least the last couple of weeks.

            • Nick Lamb says:

              You're right, Mozilla should have given up way earlier. The web of 1998 was just fine and we ought to feel nostalgic for those days when a web page was just any sort of nonsense that looks OK in the current version of Windows Internet Explorer (ha, remember when there were non-Windows versions of Internet Explorer? Fun times). Who cares what it says in some stupid standard, just roughly imitate whatever the other guy is doing and then watch the poor users try to guess what actually works or has to make a separate page for every browser. That's interoperability for you.

              But seriously, I wish there were more organisations willing to "tilt" at a few windmills and get broken stuff fixed. I note with dismay that we still don't have SNI (once entirely Microsoft's fault, but now also missing from the default browser on Blackberries and Android 2.x) deployed widely for example.

              • Pat says:

                Nick, you're one of those standards weenies that no one likes. Wasn't sure if you knew that.

                Jason said nothing about Windows, IE, or 1998. He answered the question with useful detail about SGML comment parsing, so you thought it was a good time to be a prick. Um, don't do that.

                Also, if no one else was strict with SGML comment, then what "windmill" are you talking about? How, in the world, would anyone think it's broken to be lenient on comment parsing? Where's the value add, Don Quixote?

                • Nick Lamb says:

                  Jason was engaged in a sort of reverse Texas Sharpshooter argument. Mozilla's standards compliance work was broadly scoped and it was mostly successful, the sort of layout shenanigans Jamie is getting praise for elsewhere in these comments aren't thinkable in the world where that reform didn't happen. But Jason has identified one example where Mozilla was unable to get widespread reform, and labels those at Mozilla (which might ironically include our host himself depending on the timing of that specific piece of work) "standards weenies" and claims they were tilting at windmills because of it, which is like ignoring hundreds of bullet holes in the bullseye and focusing on the fact that the sharpshooter missed the target with one round.

                  But you know, people I've never met don't like me according to someone else I've never met, so that makes Jason's argument completely valid and sensible.

                  • Pat says:

                    People you've never met don't like you, but that has nothing to do with Jason's argument. If you were to go back and read it, you would notice that his argument also doesn't mention you (just like it doesn't mention Windows, IE, or 1998, despite your weird framing to the contrary). Jason's argument still holds regardless of your self-aggrandizement because it was based around the fact that no one, anywhere, gives a shit about SGML comment strictness. Every SGML app that people use doesn't implement the de jure SGML comment syntax, but rather the de facto one. You don't seem to care about de facto standards, therefore you are a standards weenie. That's from the de jure standard on weenie taxonomy, so you know I'm right.

                    As for our host's opinion on standards, I refer you to this.

                • Grey Hodge says:

                  That's funny, because y'all love us standards weenies when you code up a page it it Just Works in Fx, Chrome, Safari, Opera, and mobile browsers. You only hate us when your shitty code doesn't work.

              • Jason says:

                Pat pretty much covered it, but I should come back and add some nuance to my smartassery. Basically, there's a time for steadfastness and a time for pragmatism. Steadfastness got web developers a DOM that (mostly) works cross-browser, thanks to support from Opera, Safari and (starting in v6) IE.

                Pragmatism got us [element].innerHTML, which saved us from having to build up DOM nodes by hand. It also got us H264 support in the <video> element (though the Mozilla folks did try to drum up support for Ogg's container and Google's (dead?) pet codec.

                In this case, they arbitrarily broke comments. And for no reason other than someone read the original SGML spec and thought, what could possibly go wrong? At that time, I'd imagine about 5 people on the planet knew comments worked that way, with one being the programmer and two more being the people who reviewed and super-reviewed the patch. This was not an endeavor worth spending tech-evangelism time, effort and good will on, especially when "make everybody happy" would have been as simple as backing out the patch and going back to the way comments had been parsed since the NCSA Mosaic days.

                The alleged attitude comes from time I've spent on places like Bugzilla and the Ubuntu forums -- time which I'll never get back -- where the "we're right and everyone else is wrong" answer is the third-most-popular after "fix it yourself" and "why didn't you punch any number of esoteric search terms that only we know into Google before bothering us with your ignorance?" But that's a PR problem, not a coding one. On the other hand, see "tech-evangelism good will" above and see where that might have been counterproductive.

                • Leonardo Herrera says:

                  Heh. Bugzilla. I still remember somebody marking "not a bug" caps lock behaving like the shift key in text boxes. Priceless.

  2. Lun Esex says:

    Feels like something's missing. Behind the Scenes? Code downloads?

    Is the header image supposed to be cut off on interior pages, only showing half the circular logo, and just "DN"? In Inspector I can see the whole logo.gif is there, but only the upper left portion is visible and it's not being re-sized for me (Safari & Firefox on Mac).

    The "Directions" link from http://www.dnapizza.com goes to dnalounge.com/directions/, so you don't get a "Menu" link for the cafe menu and have to click Back first (and we know "most people don't do this"). I'm not sure if it was always like this. I can't recall clicking around like that before.

    I'm guessing it's intentional that the Rentals, Photo Galleries, Merchandise, and Blog links are only available from the main page, but it seems a little strange to me to always have to back out to get them, without even having them hidden in dropdowns, or down in tiny type in the footer.

    Otherwise, the Calendar, Directions, Tickets, Webcasts, and Contact Us links/pages seem pretty zippy, readable, and easy to get to.

    • jwz says:

      I intentionally put more links on the front page menu than on every page because that's just too many links. They take up too much space, so I only put the most common ones on every page.

      Dropdown menus are bullshit.

      Yes, the logo thing is on purpose. How do you expect it to resize? The astute among you will notice that our logo does not have a 12:1 aspect ratio so there aren't a lot of options there. Most sites just have a tiny logo on the left and a giant honking blank space in the rest of the masthead, which looks awful.

      Yeah, I guess the "backstage/" directory is no longer linked to. Hmm. Not sure where to put that. Though I guess there's not much interesting there, really.

      The top level menu is already too long, so to add another item, one has to come off.

      • Lun Esex says:

        I wouldn't have been surprised to see a different, horizontally arranged image at the top of the interior pages.

        I'm not a fan of dropdown menus myself. I don't mind a row of text links across the footer of a page to get to lesser pages, though.

        The Behind the Scenes stuff was always fascinating to me.

  3. Bobby Marinoff says:

    Why not responsive?

    • Jamie Zawinski says:

      If you're saying you find the site to not be responsive, I don't know why, because it seems fast to me...

      • Ryan Lee Watkins says:

        He's likely talking 'Responsive Design', which you are doing with CSS3 media queries, just not extensive layout changes. Site does well on a variety of screen sizes, well done.

  4. echomrg says:

    on my PC IE8 complains of a "stack overflow at line: 0" while loading the home page.
    closing the alerts makes the page complete loading and render correctly.

    • Brian Van Nieuwenhoven says:

      If you've already overflowed your stack before the first line of the code - look at your life, look at your choices.

    • Jamie Zawinski says:

      Huh. Well if anyone can tell me what it's complaining about, it'd be appreciated. I live in a state of grace that includes a complete inability to run Microsoft products.

  5. Brian Van Nieuwenhoven says:

    Overall, a very good job. Things that stood out to me (I viewed in a desktop browser): the homepage is visual and enticing without burying useful information; the calendar page looks like an actual calendar without looking crappy in some way; the contact page is superb. Also: I guess you're not into the industry-default "header-content-sidebar-footer" page flow, which is a good thing in this case. This page layout here works very well.

    You will surely get many comments asking why you left out something that would have brought it closer to being the typical restaurant/nightclub website disaster zone. I will laugh at those people.

    • Jamie Zawinski says:

      Thanks! I thought about maybe using a sidebar to list upcoming events, but... eh. I'm not sold on it. That would be, what, a *fourth* representation of the calendar?

  6. Patrick Berry says:

    I like it. Important links at the top with a nice use of the posters and photos.

  7. jwz says:

    One of the things I'm not sure about is, is the Tickets page useful? Will most people end up just going to the calendar first instead of that page? That's probably the more sensible way to find what you're looking for, but on the other hand, having the website not have a link that says "Tickets" feels wrong.

    I'm also not happy with the layout of the "Subscribe" and Like buttons at the bottom of the top level page. You can tell that was kind of an afterthought.

  8. cryptomail says:

    It probably feels like a card game for those who like to go out. 'This week' and 'upcoming' are the hands you're dealt. It's effective, clean, brief and to the point.

  9. Vladimir Kife says:

    The header is way too big - readability suffers. I much prefer the header on content sub pages. Though it's cool how it refloats things in response to window size. It looks best below 768 pixels width. Also, never understood the reason for making the landing page layout (and navigation) different from content pages.

  10. nooj says:

    That whole 'resize' thing you made is unimaginably cool. The fact that resizing my browser is fun fills me with glee. How come no one else does things like this? Did you have to invent the internet to be savvy enough for good design?

    • jwz says:

      Thanks! I don't know why this kind of dynamic reflow isn't more common, because it's just not that hard! The thing I love about it is that it's all done in CSS, no JavaScript, no server-side agent sniffing.

      It gets tricky if you want to re-order elements on the page. I could probably do better layouts on the calendar pages if I wasn't constrained to have the elements in roughly the same order (without using JS to muck with the DOM.)

      • nooj says:

        It seems like everyone else used e=mc² to make the internet look like the inside of a japanese pachinko parlor (ie, be filled with intrusive ads, flashy bits, and obnoxiously loud noisemakers).

        You, on the other hand, use it to help people get laid.

    • Karl Shea says:

      You'd be surprised, more and more people are doing resizable sites like this. A great example is the Boston Globe: http://bostonglobe.com/

  11. Matty J. says:

    I like the front page. Very easy to quickly see what's going on and what's coming up. I especially like the way the photo gallery previews change.

    If I had to whine about anything, it's that certain pages have that nifty menubar at the top, but when you click on "Calendar" it and the 'strata' logo goes away. And Frankly, that particular Calendar representation is the least pretty of them all. The Tickets page is sufficient.

    Sounds kinda like nitpicking, though. Overall it's easy on the eyes, slick and responsive. Thumbs up.

  12. DaveL says:

    After all the pain it has caused you, I'd expect to see DNA Pizza somewhere more prominent (i.e., no scrolling needed to see it). Otherwise, very nice, renders well in Chrome, etc. Good job.

    • Nick Lamb says:

      Pizza doesn't intuitively feel like something that people are coming to (that) web page for. The most likely reasons I'm looking at the web page for a venue are:

      1. I need to know where it is (good, right on the front page there's an address I can give to a cab driver, a Sat Nav or even write on the outside of a package, and there's a link to directions that's not built out of Flash or PDF or other bullshit)
      2. I need to know when my event is (good, again on the front page we've got the next few shows, with pictures to give me a hint in case I don't remember what the show was called exactly, then inside a real calendar again not built out of bullshit)
      3. I need to buy some tickets (good, like two clicks from the front page to buying a ticket for an event)

      In the past few months I have done all three things more than once for different venues (not in San Francisco). In one case the event I was going to wasn't listed, which probably didn't help its poor turnout, in another the directions were poor to the point of being almost useless. This stuff ought to be a no brainer, but apparently it isn't, so it's good to see Jamie gets it.

      Note that the dnapizza.com site gets straight to the point of telling you they sell pizza and doesn't start rambling on about Trannyshack either. While there's clearly some potential for these two businesses to "cross sell" there are going to be plenty of people who like pizza but not night clubs, or night clubs but not pizza and in a world of single serving web sites it seems reasonable to give each business its own site.

  13. Laura Rubin says:

    I would like the Blog link to include a link to the DNA pre-history pages, but that is because I am a history dork.

  14. ducksauz says:

    Looks good. Really like the new homepage with the 'This Week' and 'Upcoming Live Shows' sections. On the webcast page, you might consider making the animated merch gif clickable to take you through to the merch page. It's sitting there, taunting you with all the merch you can buy but you have to search for the 'buy a t-shirt' link on the page to get there.

    • jwz says:

      Wow, weird. It had an HREF around it, but it was only clickable in the blank lines between paragraphs -- to make it work I had to put z-index:-1 on the LL class. Putting z-index:1 on the merch class didn't work. I don't understand this at all.

  15. nooj says:

    All the links work in both browsers!

  16. Anthony_A says:

    I like the design. My only quibble is that you're making the browser download the full-sized images, which are then dynamically resized on the fly. This is a problem for those of us still using third-world (Business AT&T in San Francisco) connections, where we have to wait for the images to download. The images seem to max out at 220px high, which is much smaller than the originals; it might (or might not) be worth using reduced-sized images for the front page to save bandwidth.

    • Jamie Zawinski says:

      They're not full-sized images, they're just slightly larger. Full-sized flyer images are ~870x1280, ~280k. The thumbs are now ~326x480, ~50k, and used to be ~120x176, ~10k. If that's a problem... then I think it must still be 1997.

      Also, Retina displays, yadda yadda.