2

We're running EE2, going to have a responsive desktop site...but rather than going with a "mobile first" design, which is kind of bland, we'd like to have both a responsive (for desktop/laptop/tablet, with a few extra tools and some extra "decoration") and a dedicated mobile (for mobile, and for tablet users who prefer something leaner.) But I just know that one of the requirements is going to be, "preserve the SEO of the URL structure."

Has anyone done this? Is it possible to have a dedicated mobile site and keep the same, or nearly the same, URL/template group structure (for SEO purposes)? I've found the tutorials that tell people how to set up dedicated mobile sites on their EE, but couldn't find anything definitive about using such a setup with multiple template groups.

EDIT: we will eventually be replicating this solution across at least four, likely five sites - so keeping the cost low is a factor here. (And when we redesign a site, we start with a clean install/clean database, so putting multiple sites on an MSM isn't necessarily the best option either.)

EDIT the SECOND: we will be creating a subdomain for this mobile-only site. This may be important in how people answer - apologies, I left that detail out.

Improve this question

5 Answers 5

Reset to default
2

Setting aside the debate of responsive vs dedicated mobile version (agreeing with Ian here), there was a good article back in the days on Erskine Design about building a separate version of your site without using MSM. That approach uses global variables to serve different templates to mobile users

You could combine that approach with the RESS-ee plugin by Tyssen.

Improve this answer
2
  • you can just make a separate directory with a copy of index.php and point the other (sub)domain to it. Then assign_to_config() the correct group/template, site_name, path to system dir, and other variables in the copied index.php, and use this info: expressionengine.stackexchange.com/questions/1563/…
    – GDmac
    Commented Apr 29, 2013 at 10:34
  • Thanks for stopping by, man. Didn't know about override_site_name, learning something every day ;o)
    – Jérôme Coupé
    Commented Apr 29, 2013 at 15:04
1

If you're creating a sub-domain for a mobile only site in addition to the main install then I can't see any other way than to buy MSM as they will be two different sites (refer to the EE licencing).

However I'm not sure why you say a responsive website needs to be bland? There are plenty of responsive websites which work on mobile which are anything but bland. The design is adapted to the constraints of the device and on a screen display the size of a mobile phone screen this means that you focus the content a little more and prioritise information. You then add to this as the screen space increases. If you built a mobile only website I don't see what difference they'll be to the screen size limitations so you'd still have to prioritise content and consider usability on a smaller screen.

Personally I'd always go with a single responsive website which cuts down on separate installs, multiple code bases to manage and maintain and generally just more work in keeping the two in sync throughout their lifetime.

Improve this answer
4
  • 1
    We're going with two separate, because while the same core content/functionality is going to be in both, there are decorative bits (customer testimonials, for example; or square "banner" graphics that don't really add tons to a mobile/task-oriented site) that enhance the appeal of the desktop site, that don't even need to be downloaded for the mobile site. With a responsive site, even if a person doesn't see a content block (because let's say that it's display:none for the mobile) it's still downloaded.
    – user800
    Commented Apr 24, 2013 at 19:21
  • display:none is rarely used in good responsive web design. EE is perfect for handling conditional content with it's template system and conditionals. There are a few addons built for this purpose following current best RWD techniques including Ress and MX Mobile Device Detect.
    – Ian Young
    Commented Apr 25, 2013 at 8:43
  • 1
    You can then just use a simple conditional so the content is never downloaded at all on the client device: {if {screen_width} > 1024}You have desktop{/if}. This really is your best bet. It's far more economoical, far less maintenance and much more inline with modern mobile support.
    – Ian Young
    Commented Apr 25, 2013 at 8:44
  • 1
    "With a responsive site, even if a person doesn't see a content block (because let's say that it's display:none for the mobile) it's still downloaded. " This statement isn't necessarily true. Depending on how you construct the site any assets hidden by using display:none will not be downloaded.. See here for some examples: cloudfour.com/examples/mediaqueries/image-test
    – foamcow
    Commented Apr 25, 2013 at 13:21
1

I'm currently in a situation similar to yours. Most of my needs will be accomplished with just CSS media queries, but I found these articles of interest, while I was researching:

http://www.netmagazine.com/tutorials/going-mobile-expressionengine http://www.johnfaulds.com.au/journal/responsive-layouts-with-expressionengine/

Improve this answer
1
1

Not specifically answering the question, this is how I sometimes approach mobile development...

Most of the site would just be regular templates with responsive design.
For pages where a completely different mobile experience would be beneficial, ie. the checkout process, I would detect for mobile then serve a separate template.

default_site/
| checkout.group/
| | index.html
| | _regular.html
| | _mobile.html

So index.html would look something like:

{if not_mobile}
  {embed="checkout/_regular"}
{/if}
{if mobile}
  {embed="checkout/_mobile"}
{/if}

The conditionals come from either MX Mobile Device Detect or by making the mobile variables available in my config bootstrap. (I use Focus Lab's Master Config Bootstrap)

$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
  $env_config['mobile'] = true;
} else {
  $env_config['mobile'] = false;
}

$master_global = array(
  'mobile' => $env_config['mobile'],
  'not_mobile' => $env_config['mobile'] ? false : true
);
Improve this answer
0
0

To do this I would use MSM and have a seperate "mobile" site set up. Using this separate site you now set up your mobile templates with the exact same name as the ones in your main site, but with the mobile style that you need. Call your channel entries with the site="default_site" parameter and you'll now have a mobile only site that has the exact same url structure and pulls content from the main site.

You'll then need some sort of javascript to redirect your mobile visitors to the mobile version of your site. I'd probably set up a subdomain m.domain.com

Hope this helps.

Improve this answer
1
  • It's an option...but we're hoping to do this without having to purchase MSM. This solution will be replicated across five sites, so we want to keep the costs low. But I'll keep it in mind. (I'll also edit my original question - sorry, forgot to state that.)
    – user800
    Commented Apr 24, 2013 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.