Hi Everyone,
At the last meetup I did a presentation on Responsive Design using a (very) beta version of a site my team's been working on. Well I'm proud to say we're finally launched it!
Check out http://responsivedesign.ca
We're hoping that there's "non-developer friendly" content there that you can use to help convince clients or boss-types to jump in on responsive design. We've also got a section of resources for developers with links to various (and rapidly changing) techniques and challenges related to responsive web design.
The Drupal section is a little empty --- If you know any base themes, articles, or modules useful for all the responsive / adaptive / mobile first / progressive Enhancement please let me know. I'd also specifically like feedback on the resources section of the site. I was thinking of allowing people to rate & comment on a specific resource kind of like drupalmodules.com so you can easily read a few people's opinions on responsive grid framework X vs. Y. because right now you need to search far and wide for that kind of info.
Cheers,
Aidan
Comments
Not yet there
Hey Aidan, the site doesn't seem to be propagated yet:
Oops! This link appears to be broken.
Did you mean: responsivewebdesign.com
I believe you mean
I believe you mean http://responsivedesign.ca/
How embarassing
Just fixed the post. Indeed it's http://responsivedesign.ca/
new trick
make the url change to responsivewidescreenwebdesign.ca when viewing full width on a desktop, then resdes.ca on mobile. :)
p.s. the site rocks!
This is an awesome resource!!
This is an awesome resource!! I thought Teehan + Lax has like the ultimate grid when it comes to responsive design. Mind you each project requires some adjustments to the grid.
ui/ux designer
Is it this one?
http://www.teehanlax.com/downloads/baseline-grid/
I'm sold
Yup I'm totally sold.
Sigh now to find the time to start actually exploring and thinking about it :)
Nice Work!
Very nice Aidan - very nice indeed.
@@
<
\/
Great Resource
This is a really useful resource. Thanks Aidan!
Michael Keara
User Interface Systems Architect,
The User Advocate Group
Looks great. I've been
Looks great. I've been delaying the inevitable when it comes to responsive web design, it's time to get the ball moving.
--
Lyemium
Looks terrific everywhere
Thanks for the great information site. It looks great everywhere: my old laptop, my cell phone. Thanks Aidan!
Would ratings / comments be useful on resources section?
I was thinking of adding ratings and comments to resources as the next site enhancement. Would this be useful for you or just UI fluff?
The idea came from the difficulty I found picking a responsive grid system to use as there's so many available and it's lots of work to evaluate them. (Actually we just gave up and responsivedesign.ca doesn't use one)
Post your Responsive Design?
Have you considered adding a section to the resources that allows people to post their responsive designs?
David, Bcomm, S.A.
Lead Software Designer and Drupal Expert
www.intriguedevelopment.com
Had some thoughts
REALLY sucks I didnt catch it when you presented it but I was thinking as I was adding some content to my site, what about images. Do they count as dynamically resize elements? or would you do the ye-olde game trick of different sized LOD textures, i.e. having multiple images for each form factor and swapping them out dynamically.
I know you're moving buttons and what not around. Responsive design makes a whole bunch of sense until you address the content question, does some content just get deleted outright? Say you had one page that had an embedded app, on the mobile form factor that app itself wouldn't fit. Or maybe it's one of those godawful flash intros ;)
At some point responsive design may become deletive design?
to clarify (images)
To clarify, yes any old image can resize but I say certain images when doing parameterized resize would just become illegible or certain key objects would become indistinguishable. In that case I would be swapping in a specifically cropped shots just for that form factor. Content wise I think you would still incur similar costs for different form factors of content as apps.
Our Image experience building the site
There's a couple rules of thumb we learned building the site with regards to images.
1 If you can use image sprites to do something then use them. The device icon in the site's top right is a single image sprite that changes from desktop to tablet to phone as you resize the browser. That works great when resizing the display when compared to the fish mascot image which gets "puffed up" on larger displays. The fish is loaded with javascript and you can notice a delay when the request is sent for the new image.
2 is actual adaptive images is really tricky to implement. http://drupal.org/project/adaptive_image module is a implementation of http://adaptive-images.com/ . Basically the module makes a few smaller versions of a image field with image cache. When you visit a site a cookie is set on the browser which then gets sent to the server so drupal can decide what size image to serve . It's kinda buggy so right now we're just wasting the bandwidth with images that are too large for mobile but this technique (or some variation of it) looks promising.
3. You mentioned some images that can't scale small, and this is very true. One example is the text on the slides on the home page on the "WHY" tab. The main content is easy to read, but the "sub text" can't be read on a phone. I think that's just a basic rule that if you use text in an image (avoid if you can) then make sure it's a very big.
We considered doing a module to serve different images for different sized responsive breakpoints but we needed to "feature freeze" the site or we'd never launch it. I could see some kind of module where you customize breakpoints in your site, and say you added 3. Phone, Tablet, Desktop. When you node/add something using this new field type (or image field formatter) it would require 3 images one for each size.
Adaptive images is awesome thanks :)
Thanks for that, the adaptive images thing is really cool and more or less answers the question :) I'm a fan of some purely browser based games like forumwarz and while I normally stay away from anything that doesn't have game applications I would love to have some time next year to actually really dive into some of this stuff. As you know the internet troubles in Toronto already cost me some of that time I wanted to spend for myself/another project.
As far as content goes, I can imagine some really big sites or clients if you will who may not be thinking about the content properly, and then you have stakeholders in the creators too. For example, I can easily picture some PM or "web lead" on the client side signing off on responsive and then when you ask them about preparing any content they'll say "do whatever you need to" so you go and define a bunch of content size templates or what not and just when you are close to finally being done with the final deliverable you get a bunch of journalists or whathave you crying foul that elements or things have been moved/resized or deleted and "you have ruined ze masterpiece!!!" :D If it were me I might be inclined to not proceed until that stuff gets locked down in a contract or at least have your overages set in place before it happens.
and yeah JFC today is catching up on emails/messages day apparently ;)
Wow! This is a brilliant
Wow! This is a brilliant resource indeed! I was totally surprised to see the site web design expanded the entrance of development and has position new standards for others to pursue. It's another cool web design I ever seen. Thanks! @ http://www.junowebdesign.com/
Shelly Wilkinson