How to use MODx and Responsive design

Good day,

I actually have a challenge. I realized a Eco 1.0.0 MODx web site and now, the ownwer would like to have a smartphone version.

Then I created a template called "mobile" and when I visualized the web site from my iPhone, it display something nice.

When I visualize the web site from my iPad, I rtealized I need a other template.

For now I found a add-on called
http://modx.com/extras/package/templateswitcher
but I am not full satisafied about it because I can not select a template related to a screen resolution. For exemple I would like to have the mobile template online for smartphone and have the default template for iPads.

In any case, I would like to know if you can provide me some advise in ordther to have a maximum of flexibilities with Evo 1.0.0 to adpt my template / web site regarding the devise ans screen size

Many thank for your help

not really a modx question - read up about media queries.

What you are talking about is not "responsive". Responsive design only needs one template, and the CSS controls the appearance using the above mentioned media queries. Device detection and template switching is another matter altogether.

pierrot1010, g5604 is correct. You can use @media queries or you can use browser sniffing to handle providing a different experience for mobile users. Additionally, you can use a combination of either of these techniques. This is from 2010 but will point you in the right direction: http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/ as well check out SmashingMagazine, SitePoint.com, .netMag and A List Apart for more info on this.

I use the "Skeleton" http://www.getskeleton.com/ to create responsive websites with modx. There are several boilerplates you can use. I want to try "360 and up", too.

I started working with Skeleton, but have since come to like the method described in the "Responsive Web Design" book at A Book Apart, by the author of the seminal A List Apart article. He starts out explaining how to build a fluid design, then morphs that into a responsive grid.