plainblack.com
Username Password
search
Bookmark and Share

    

Responsive Design

User julied
Date 1/6/2012 12:51 pm
Views 17813
Rating -4    Rate [
|
]
Previous · Next
User Message
julied

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) ---



Back to Top
Rate [
|
]
 
 
TheSeparator

Very good question.

Responsive design requires a close collaboration between a CMS, codedevelopers and sitedesigners. Together they should be able to provide a suitable solution for the customer and an appealing experience for the customers' customers.

Let's see how far the Template::Toolkit and CSS can be stretched...

 

 

 

 

--- (Edited on 6-January-2012 22:46 [GMT+0100] by TheSeparator) ---

--- (Edited on 6-January-2012 23:01 [GMT+0100] by TheSeparator) ---



Back to Top
Rate [
|
]
 
 
rogier

>> 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:

And in general:

Good luck,

Rogier

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



Back to Top
Rate [
|
]
 
 
rogier

FYI: WebGUI also has an option in Admin Console > Settings to serve a different style template to mobile devices. Though I consider responsive CSS a better option, in some cases it can be useful.

R.

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



Back to Top
Rate [
|
]
 
 
neild
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) ---



Back to Top
Rate [
|
]
 
 
Mike101

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) ---

Thanks for your suggestion:)

--- (Edited on 3/3/2015 8:12 am [GMT-0600] by Mike101) ---



Back to Top
Rate [
|
]
 
 
rogier

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) ---



Back to Top
Rate [
|
]
 
 
neild

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.

Thanks in advance for your help.

--- (Edited on 5/21/2013 8:35 am [GMT-0500] by neild) ---



Back to Top
Rate [
|
]
 
 
martien

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) ---



Back to Top
Rate [
|
]
 
 
tdawson

@rogier, appreciate the information and the URL references. Helped me in my research about responsive design site with WebGUI.

--- (Edited on 3/3/2015 9:01 pm [GMT-0600] by tdawson) ---



Back to Top
Rate [
|
]
 
 
    



© 2019 Plain Black Corporation | All Rights Reserved