Has anybody done a responsive design site with WebGUI? Any ideas/tips/pointers? I'm not sure how to deal with images in particular. I don't see a way to put a class on images. The one (very simple) page I've done with responsive design I ended up using snippets for the images, but that won't work for an entire site with non-technical people needing to update the content. 

--- (Edited on 1/6/2012 12:51 pm [GMT-0600] by julied) ---

>> Has anybody done a responsive design site with WebGUI? Any ideas/tips/pointers?

Mainly the responsiveness comes from the CSS. Valid, concise and semantic HTML makes life easier. WebGUI shouldn't be a problem. Quite the opposite, it allows more flexibility in design than most other CMS's.

>> I'm not sure how to deal with images in particular. I don't see a way to put a class on images. The one (very simple) page I've done with responsive design I ended up using snippets for the images, but that won't work for an entire site with non-technical people needing to update the content. 

An image, if placed as an image asset (via the new content menu) has a template. In newer WebGUI versions (7.9.something plus), there is a class already in the template (.image, I think). You can copy the template, edit it and add your own class. Note: never edit the original template!

Also, these may help:

• http://www.alistapart.com/articles/fluid-images/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.google.nl/search?q=responsive+images+css (couldn't find a good article on the basics right away, but they're out there)

And in general:

• http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
• http://stuffandnonsense.co.uk/projects/320andup/

Good luck,

Rogier

--- (Edited on 11-01-2012 18:19 [GMT+0100] by rogier) ---

I've just started to use Foundation,http://foundation.zurb.com/

It's quite comprehensive; one templating framework for all devices. 

--- (Edited on 10/4/2012 10:12 am [GMT-0500] by neild) ---

A note on responsive images in WebGUI.

If you upload an image, WG will automatically generate a thumbnail for it. The thumbnails will have the same filename as the original, prefixed with "thumb-". You can use this for a very basic implementation of responsive images.

If you set the thumbnail size to a reasonable size, say 400px, the thumbnail images will be large enough to serve to mobile devices. So use the thumbnails by default.

Then, with javascript, check the viewport width/resolution and rewrite the image URLs for higher resolutions. You just need to remove the "thumb-"

The thumbnail size can be set in Settings for images in general, and some assets, like the Collaboration System, have their own thumb size option.

I think the Gallery even resizes images to multiple sizes. The downside is that it's difficult to template and can be a bit buggy.

Ideally, multiple resizing should be added to the core for all images in WebGUI. So instead of 2 sizes (thumb and original), we can define 4 (or so) alternative smaller sizes.

Then we would be able to serve for example:

• size 1 (100px) for mobile thumbnails
• size 2 (320px) for mobile "full size" and tablet thumbnail
• size 3 (600px) for tablet "full size" and desktop thumbnail
• size 4 (800px) for desktop
• original (100px+) for retina display full size

R.

--- (Edited on 20-10-2012 14:30 [GMT+0200] by rogier) ---

Hello,

I need help completing a responsive theme using Foundation which I started a while ago.
The main navigation is multi-level drop-down; the same as that used in CrystalX and Sitestrong themes and it's what I need help with.

Hello Neil,

did you finish your theme with "Foundation"?
I es, please contact me at webgui@innovate.de

Thanks!

Martien

--- (Edited on 2014-09-05 15:20 [GMT+0200] by martien) ---