Responsive design

Printable View

01/13/2012, 12:10
spirelli

Responsive design

I'll sortly have to re-design a Contao website. Of course with everyone talking about it, I'll aim to make it a responsive website, i.e. one that adapts to different screen sizes

See
http://www.alistapart.com/articles/r...ve-web-design/
http://designmodo.com/responsive-design-examples/

I was intrigued by nedim's post http://www.contao-community.org/viewtopic.php?t=3725 who says that he'll need to migrate away from Contao due to due to "responsive" or "adaptive" reasons.

How do other people see this. Has anyone built a responsive site with Contao and what were the experiences?
01/13/2012, 22:00
ga.n

Re: Responsive design

Quote:

Originally Posted by spirelli

I'll sortly have to re-design a Contao website. Of course with everyone talking about it, I'll aim to make it a responsive website, i.e. one that adapts to different screen sizes

Hi,

If you are wondering if Contao:

- Can handle "fluid" layouts, the answer is yes: The "overall width field" (Themes -> Layout) allow user to choose a "%" based width

- Can handle different style sheets based on "media" attribute, the answer is yes: You can accomplish this by creating a stylesheet through the built-in css editor (Themes -> stylesheets) or by writing custom code (<link rel="....) in the "Additional <head> tags" field (Themes -> Layout)

- Provide an easy way to write specific css-rules that applies only to some User Agent(s), the answer is yes: take a look at this http://www.contao.org/en/blog/forget...ontao-210.html

If you are wondering something else please ask :)

hope this helps to get you started
01/14/2012, 00:34
Medianomaly

Re: Responsive design

I remember reading that post by that Nedim guy. I honestly don't have a clue what he means, but it sounds like he doesn't really know what he is talking about or what responsive design really is. I found it strange that he's only posted once just to say he's leaving. And if he's really used Contao for the past 5-6 years, you'd think he would have built more than 4 websites during that time. :)

Responsive design is one of those things that I don't really understand what they expect the CMS to do. Unless they just want to buy a bunch of templates that are already "responsive" and plug them in. Yes there are a bunch of canned Wordpress templates that are responsive.

Short of that, you use media queries to detect screen widths -- you can do that either in Contao as Ga.N has pointed out, or outside of Contao if you hand-code your CSS files. Then you deliver different CSS rules based on that -- and you can do that too inside or outside of Contao.

So the "detect and switch" part takes maybe an hour and you're good to go on all future projects. The other 95% is the CSS rules that you write to create your layout and design -- just like with any custom designed site (again, unless you're just plugging in a template).

So I'm not sure what any CMS could possibly provide beyond that. I think a lot of people throw this buzzword around and don't understand how it works -- they just expect everything to be done automatically for them. But in reality its like asking Contao to read their mind and conjure up all of their style sheets for them, or maybe just design their next project for them. :)

The only other thing I wanted to say is that I saw Ethan Marcotte speak at a conference this summer, and I truly believe that "Responsive" design in some incarnation is the future -- that's how we'll be building all of our sites some day.

But not yet. People are piling on the bandwagon but I think there are a small subset of project types that a responsive layout is useful for right now. There are a host of technical limitations, concerns, and issues with implementing Responsive layouts that really need to be ironed out in some way before it's ready for the big stage. Here are a couple of examples of what I mean:

http://www.cloudfour.com/css-media-quer ... ools-gold/
http://www.webdesignshock.com/responsiv ... -problems/
01/14/2012, 01:16
ramjet

Re: Responsive design

Interesting stuff.
An irony - in reading the webdesignshock.com article, an alert popped up to inform me that if a script on the page continues running "my computer may become unresponsive" :D
01/15/2012, 11:09
Ruud

Re: Responsive design

There is another thing the CMS could cover; http://adaptive-images.com. I don't like the approach they use, it can be built into Contao because Contao already knows which browser is viewing. I do like the idea of scaling image when you already know the browser is on a small device, I don't like the idea of scaling because I sometimes would like to zoom in on my small device.

Funny thing though: Wordpress doesn't support this either...

Also, if this is the new hot thing it should be a highlighted feature, but I can't find it. What I do find are recent posts by Wordpress users who are wondering about this adaptive and responsive stuff they keep hearing about. There is supposed to be a responsive theme...

Are we hijacking a topic? Sorry...
01/19/2012, 18:31
PaoloB

Re: Responsive design

This is a subject that interests me very much.
I did many tests in recent days, but I failed again to continue.

I share with you my findings.

To have a website that is suitable for all mobile devices, desktop or else, you can use a Responsive design

There are many CSS frameworks that help do this.
Some of these also helps in the management of images, fonts and more.

Almost all these frameworks are based on grids where those designs must place elements.

I was trying to add this functionality to 2.11 Contao.
There is an extension that is called "ck_adapt" which integrates Adapt.js in Contao.

On the forum in German instead I found a user who has used the framework 1140 grid
This is the result of his work
http://contaogrid.glen-langer.de

Seems like a good start, although I am not satisfied at all.

Between frameworks I tested I like Amazium for handling items, look at how to resize images, while with Fluid Baseline Grid I created a template in minutes with excellent reading of the characters.

I think that in future versions of Contao you must keep in mind this new need.

What do you think?
05/13/2012, 00:13
freeyland

Re: Responsive design

See http://www.contao.org/en/extension-list ... te.en.html
for my firs responsive template
05/13/2012, 15:11
Ruud

Re: Responsive design

I like how it resizes. Media queries?
05/15/2012, 16:39
matchboxhero

Re: Responsive design

Hi all.

I have also posted this in another thread about responsive design but more discussion seems to be going on here...

We have been working on building a responsive layout into contao. The following link is work in progress so some parts may still be in development.

You can see the website here...
http://360fusionhosting.co.uk/responsive/

The website incorporates 5 layouts using the following pixel values;

mobile: 0 - 650px
tablet: 650px - 980px
small monitor: 980px - 1200px
wide monitor: 1200px - 1500px
Max width: 1500px+

The layout will change as you change the size of the browser window up until 1500px where it fixes in the center.
Throughout the website I have used 2 different layouts, 3 column and 2 column. The 2 column layout is only being used on the contact page for the time being.

I created a new version of the fe_page template using boilerplate and I have used the blocks module to group all of the modules in the side columns.

As I said at the start of this post, this is still a work in progress so please go easy.

Ste,
360fusion.
05/15/2012, 20:38
ga.n

Re: Responsive design

it is great :)

I really like the idea of the navigation menu that switches to a selectbox when viewed as mobile
05/16/2012, 01:33
ramjet

Re: Responsive design

That is awesome.
There is a point in resizing a browser however (still tablet/near mobile boundary) where the menu disappears completely.
No biggie maybe - just to let you know.
05/16/2012, 12:57
matchboxhero

Re: Responsive design

Thanks for the feedback, hope you all dig it.

Thanks ga.n. There's a simple script which changes the navigation for mobile devices.

Cheers ramjet. I didn't notice that before something else which needs fixing, lol.

Ste.