Basically there are three layouts now -- 4, 3 and 2 columns -- depending on how wide the window is, by using @media selectors. I tested this in Safari, Firefox, Opera and Opera Mobile on OSX, and on iPhone and iPad, but I'm not totally sure that measuring "max-width" in "em" is a portable thing to do.
@dnalounge calendar CSS tweaks
I've made some changes to the CSS on the calendar to (try to) make the layout look prettier in various sizes of windows and phones. Please take a look and let me know if it screws up (or even just looks ugly) in your browser or on your device. Try out various window and font sizes.
21 Responses:
I was going to find a way to snark, but to my astonishment the calendar looks good even in Palm Blazer 4.3. On the other hand, not so good with Dillo: the images' have height set, but not width, and get splattered across the viewport. Readable with Lynx.
Thanks! Not sure what you mean about the flyer images, though; they have settings like:
width:100%; height:auto; max-width:120px; max-height:180px;
where "100%" refers to their containing DIV, which will be "width=13em" or something. I don't know why that would screw up.
Dillo is a minority browser (Wikipedia says "In all, Dillo's global usage share is less than one hundredth of one percent.") known for not being compatible with many "modern" web pages, so I wouldn't worry about it too much.
Nexus One:
Portrait looks good except the page is apparently a couple pixels wider than the screen, so I have horizontal scrolling that lets me wiggle it back and forth ~5 pixels.
Landscape doesn't have the horizontal scrolling problem, but winds up with lots of dead space; even though I've got enough horizontal space to have the flyer art + two columns, it just shows the picture and the first column, with everything else down below. For some things, that winds up looking extremely lonely (Death Guild, in particular has almost nothing in that first text column, so that only fills roughly the left half of the screen)
Access Zero also winds up looking a big ugly since the video seems to be in a thing of its own so the left-justified text about who's performing leaves the right 3/4 of the screen empty, then you scroll down and have the left 3/4 empty with a video pegged to the right.
All in all, though, it's pretty reasonable especially in portrait mode. Beats the pants off of lots of other sites I've tried to parse on my phone (which sounds like damnation by faint praise, but it's not entirely)
Access Zero is goofy looking because there's a video but no blurb. That doesn't happen often.
Can you send me a screen shot? What is the size of the HTML viewport on that phone?
Just hit http://whatsmy.browsersize.com/ so see what it claims, and at default zoom in landscape it tells me I'm 533x239 while default zoom in portrait reports 830x1172.
The screen itself is actually 800x480 minus 38 pixels for the title bar up top, but clearly it's telling damned dirty lies about itself.
I also noticed while taking the screenshots that the street address at the top + the logo looks to be JUST too wide for portrait, which might be the cause of the horizontal scrolling there. Plus, the forward/back arrows on the calendar stomp on "Sun" and "Sat" on the landscape view.
I emailed you an url to a handful of screenshots of what seemed to be of interest. Holler if you'd like any others.
I tweaked it a bit; gave it a 4th layout. Lemme know if that looks better.
Much. I have a screenshot of Tropical with the new layout in the same place as the others if you're interested.
One more thing I just noticed in landscape: the month & controls for the calendar are attached to the website navigation stuff, so that winds up displaying way down below all that instead of being someplace associated with the calendar itself.
I tweaked it some more -- moved the floating video higher up. How does it look now?
Looking good. A couple more screenshots in the same place.
It's a little unfortunate when one column winds up particularly long (e.g. Hubba Hubba's mile-long performer list) since that stretches on and then has a full-width paragraph below it, but that's a rarity.
Also, just spotted the "Add this event" box cutting off particularly wide stuff. See the screenshots for details.
On my phone's Opera Mini 4.2, the calendar part displays as text centered on the screen, dates and events shown on separate lines, but without extra space between the dates so it's just one continuous list. The line for the 26th is in green like its box on the calendar is. It would be a lot clearer if it could display with line breaks between the dates, as the events with 18+/21+ display the 18+/21+ on its own line and are in the same font style as the dates. I'd take a screenshot if I could, but I don't think this thing is that smart.
Then after the calendar, all the individual event information seems to display OK, all left justified instead of in columns.
I'm on the LG Rumor 2, 240x320. I always browse in landscape because of the slide out keyboard, and it displayed fine like that. In portrait, it was wider than the screen, so for long event names in the calendar and the event information below I'd have to scroll right to see it all.
So are you saying that the part that should be a calendar grid is not actually displaying as a grid? That doesn't make much sense if this is really an Opera browser.
Opera Mini is evil in that your content goes through a proxy that converts the page into Opera Mini format. These proxies are incredibly stupid, as far as I can tell - I've caught them tacking on url parameters by just appending something like "?opera-mini=bs", regardless of existing url parameters.
Yep. I forgot before scullin mentioned it, but Opera Mini is its own thing, as opposed to the more full-featured Opera Mobile for smartphones which would probably display it OK.
Looks pretty consistent to me. HTC Legend.
Scaling works well enough, except that the topmost logo and the address don't wrap, so they just get bigger and wider while everything else is fit to the screen width (I get a huge right margin while all significant info is actually on the screen.)
Very nice on the default browser on the HTC Desire (Android 2.2) in both landscape and portrait orientations.
On the same phone, Opera Mini 5.1 is obviously fibbing about width - the user needs to horizontally scroll to see everything in portrait and there's a white bar down the side in landscape. But it's still usable.
Looks fine on the Nokia N900 in both landscape and portrait mode.
Looks good on all the Blackberry and Android phones here.
It seems decent on my Blackberry Curve 8330 running the Bolt Browser 2.1 in "Desktop Layout". There's a little overlapping of text here an there, but nothing devastating. It does make me scroll a bit more than I'd like though, but it does look pretty good.
http://whatsmy.browsersize.com/ reports the following stats when running Bolt in case you're curious:
Browser Window Width: 927
Browser Window Height: 925
Screen Width: 800
Screen Height: 800
Screen Color Depth: 32
Incidentally, http://whatsmy.browsersize.com/ doesen't work at all with the default Blackberry browser. Also, your calendar is just barely usable in the default Blackberry Curve browser, and looks worse the more "features" you enable support for in the browser Options. However, I wouldn't expend any time on it, the BB browser is a piece of shit and anyone who uses it gets what they deserve.
Here's a post by a designer who set up his site to dynamically adjust its layout using just CSS. Might be what you're looking for:
http://bureau.tsailly.net/2010/09/champagne.html