Thread

I know there are a couple of add-ons out there that detect if a user agent is “mobile”.

The Mobile addon for example uses a mobile template if it detects that you are on a “mobile” device.

But this approach seems less than ideal to me.

First of all it seems to assume that a device is either mobile or not. But devices used to access the web range from tiny phone screens to widescreen desktop monitors. It’s a spectrum, there is no cutoff.

If all you do is designate mobile or not then you are using the same template for an iPad as for a phone.

What would be great to have is a plug-in that works like Mobile except instead of user agent sniffing it would use media queries.

You could designate breakpoints based on screen width

width < 320: template A
width > 320 and < 500: template B
Width > 500 and < 900: template C
Width > 900 template D

If you used fluid layouts for the templates then you could have a site that looked good on any device without the need to do UA sniffing.

Am trying to make the transition to responsive web design and somethings like this would help.

I do think that Mobile is on the right track by allowing the use of alternate templates. It allows you to only send markup that will be used and makes it easier to send media files that are smaller than those sent to a desktop screen. 

Just think it would be more powerful if based on media queries.

Alas I am no programmer so can’t build addons myself.

Anybody?

I’m working through the exact same thing right now except I’m a bit further on than you are right now but thankfully I passed that path 2 weeks ago and you can benefit from my pain 😉

I used the Skeleton base, you can find it here: http://getskeleton.com/ It will give you all of the things that you need (ie: media querys based on screen size).  It’s based on the 960 Grid system ( http://www.960.gs ) and all of the info is pretty straight forward.

Right now I’m working on a hack to get EE to resize images based on screen size, you’ll be there next.

Overall EE is working nicely in a responsive format so far.

I hope that this helps you out, if there’s anything else that I can do for you please send me a message.

Peace to you!

Respectfully,
EJ Lear

I’m presently looking for examples of responsive sites that use ExpressionEngine. How did you both get on? Do you have any live examples, which you can post?

Any pearls of wisdom would be appreciated.

Many Thanks.

Here are two EE sites that use responsive designs: http://energytomorrow.org/ and http://www.religionnews.com/  They were done by eecoder.