Responsive Web Design / Mobile design with ExpressionEngine

Mobile is absolutely huge and that's juts going to grow. By mobile we of course mean mobile devices such as Android, iPhone and event tablet devices such as the iPad and the Samsung Galaxy tab. When dealing ExpressionEngine a lot of people question what it takes to get a site working well on mobile?

The answer is is very easy indeed. With mobile you have two choices, you either go down the Responsive Web design route or you go chose a mobile elusive option.

Responsive web design allows the same site to viewed on the same url. If that sounds too technical then it basically means the same web page looks different in different devices. The word responsive means thats the website is set up to respond to the independent device viewing the web page.

A mobile exclusive route is a dedicated mobile site or sub section of the site. Technically when you view a site that has been set up like this it detects what device you are viewing and you are then redirected to that mobile option. So for instance if you were to visit the BBC site on your mobile phone such as iPhone you would be redirected to This is as at 6th may 2012, the BBC may well decide to switch to a responsive web design in the future.

The question however is how easy are these options when using ExpressionEngine. We love EE for many reasons, but one of the main ones is that its so incredibly flexible. Every piece of code you have on your site can be customised. Therefore its very easy indeed to set up both a responsive ExpressionEngine site and a mobile exclusive option. There isn’t however just a click and deploy add on that does it. That however is good thing because at Media Surgery we like to control exactly whats going on with all our client sites.

If you are going down a Responsive web design route most of the magic happens with CSS, and of course you can link to as many or as little CSS files as you like. As you also have full control, and we mean full control, over the HTML then you can easily set up a RWD site with ExpressionEngine. All the hard work happens in the CSS.

A mobile exclusive site is a little different, there is a plugin from Max Lazar that detects the mobile device you are on then redirects you to a section of your choice. With EE templates you again have full control of any outputted code and this is very straight forward to do with a dedicated template group. There's an great article on .net mag by Garrett Winder that explains this further.

So as we have looked at setting up a mobile site for devices such as iPad, Samsung Galaxy, Kindle Fire is very straight forward because of ExpressionEngine's customisability and flexibility.