Responsive Web Design

Yep, back to this again. Conference blogging! Pacific Northwest Drupal Summit, this time, which long-time readers will know that I have been to this event several times…technically every time. It’s back in Seattle again, which is nice because it’s technically commute-able from my house, although a loooong commute. Last night I actually came up early & visited with Kat, who I haven’t seen in ages. (So long that both of our old kitties have died since the last time we saw each other.)

But now I’m here, and already I’ve seen a bunch of people I know, which is lovely.

First up, a presentation on responsive web design in Drupal, by a guy on the Omega theme team.

To be covered, pitfalls dealing with: images, menus, layouts (will this work?), CSS (not too much detail, but some high-level stuff), performance.

(Wifi is being weird here….)

max-width 100% on images, keeps everything from going outside of its containing box, even if width is set bigger than screen.

Adaptive Image Module? doesn’t use it. Sets a cookie with browser width, to get the right size image. which does weird things when rotating screen, apparently.

high dpi screens of various sorts.1px = 4 retina pixels. (wtf?) large but optimized is still large. retina.js – lazy load of high resolution images, only if high res screen. prefers using css3 to draw stuff instead of images: the obvious stuff, gradients, transparencies, borders, etc. (buttons!) ok, he’s sorta talking about the REALLY obvious stuff.

some weird snobby moments about browsers.

responsive as a moment for rethinking menus and how to get people to the info they need.

oh, superfish. I’ve used superfish about a zillion times. and now superfish can tell if you’re touch or hover. I think I’m in love.

he does two menus: one for desktop, one for mobile. (altho i was really frustrated with the pnwds summit site’s mobile menu, because I couldn’t find schedule link IN THE MENU. hrm.) but the js for how it was done in this case will be in the notes.

jquery “slidetoggle”?

display suite module. includes block as a field? ood for more complex sites. define gridsets. advanced layout stuff.

breakpoint selection… I still think that we might get something interesting with ems, better than all this pixels stuff. I think he’s on the wrong track with the px stuff. but yes, use floats creatively. (again, that’s some of the wildly obvious stuff.)

damn I just want to completely redesign my.e.e. Or at least borrow Justin’s brain for a week to get started.

“.tpls”? template files.

work with, not against, designer — then again, happily, our designer is all about the mobile. 🙂

Sass. “broke all my bad habits” (would that help with trying to keep track of css in cascade? and what about Less? which one did Amy G want to get into?)

grid classes in display suite? something to look into.

mediaquery.js – change layout completely, moving the actual html around. (huh.)

sleepy.

performance.

aaaaand the browser on my tablet is being crashy. #ironyalert

know your audience. [PLEASE STOP SAYING UTILIZE.]

background images/image sprites. someone else suggests using svg, not image sprites. and then the issue of printing, and what happens when all the images disappear? :\

display suite vs delta module in omega? (well, for one thing, delta is going away) whoooosh, that went right over my head.

omega 4 is a complete rewrite. well. focused on performance. all sass, all the time. have to learn that if you want to use omega.

[hungry. sleepy. should’ve gotten coffee & pastry or something.]

I wonder if we could leverage sass into some of the weird forena stuff. also, Dave said something about trying to integrate Views & Forena. which might allow for some interesting directions.

[twitter bootstrap is Less? if Erik’s expertise is with bootstrap, then we might be leaning Less. is there another theme system that’s more Less-friendly?]