bkg2

Search

Sharing is Caring

Subscribe via RSS

Web Design Tag Cloud

$allowed_extensions $member $title 2011 ai allowedextensions amazon analytics apple attachedfiles attachedimages bad widget class name given blog blog date brands business news classes click here digital cms columns commission conflict content control creating a facebook following css data dataobject::get date format default search results design digital driving traffic east london embed embed twitter estate agent websites facebook facebook advertising facebook marketing fan pages fast hosts favicon favicon generator file is not a valid upload follow button football form future geo targeting customers google google adwords google local business centre google logo google maps google places has_many hmv if conditions if pos image inbound linking include blog entry integrate twitter internet turns 20 ip ip address javascript jquery link building livingsocial local businesses local businesses on google local business web design london london web design london web designers london web developers making money on the web menus migration mobile mobile site mobile version modeladmin mod_fcgid: http request length multiple class mutliple images new website nofollow oauth onlien marketing online ads online discounts online marketing online media online offers outbound links pac-man pageclass php warning: fopen promotions property web design property web devlopers property website random child rar real estate web design recommend recommended agency recommended agency register referral rel="nofollow" responsive rooms & studios search seo shoreditch show full fields shreditch web designers sidebar signups silverstripe silvestripe small business social media social social media social networks split strategy styles technology timeline twitter twitter api twitter api 1.1 twitter feed undefined uploadify http error url icon urlsegment userdefinedforms userforms user forms ux validationexception video vouchering vouchers web web builds web design web design development web designers web design shoreditch web design web development web developers web developers in shoreditch web developers london web developers shoreditch web development widgets wysiwyg youtube

Creating a mobile site with SilverStripe

Although most of the latest handheld devices (iPhone, iPad, Blackberry, HTC etc.) display full web sites in all their glory, the majority of older mobiles do not. Websites on mobiles usually render terribly due to the smaller screen and poor load speeds, as such, it's always a good idea to create a version of your site just for handheld devices. Luckily, with SilverStripe this is super simple, and here's how it's done:

Firstly, download the module from here: http://silverstripe.org/mobile/

Mobile Site

Upload this to your root directory and run: dev/build

This will automatically set everything up for you, please note that your themes folder probably isn't writable, so you'll need to upload the "theme" folder from within the mobile module directly to your themes folder online. You may also want to rename it to something more user friendly too (E.G - MySite_Mobile)

Next, open up your CMS and click the site name on the left hand side to view the overall site config. There's a nice new tab called "mobile" click that to manage your mobile version. You can either redirect all mobile users to a sub-domain, or simply load the site with the mobile theme for them, and keep the URL the same.

We prefer the latter option, so just click "Mobile users see mobile theme, but no redirection occurs" then delete all of the content within the "Mobile domain" field. (otherwise it conflicts with the main site a bit, this bug will probably be ironed out soon)

Then choose your mobile theme from the drop down box, and save. Now you're all set!

Customise your mobile theme templates and CSS as you wish, you may also need to add templates to it from your blog theme etc, and then amend them so that things like the sidebar (that aren't really required on mobile) won't be loaded in.

Troubleshooting:

  1. Make sure that your main theme is defined within your _config.php file, then choose "use default theme" from within the CMS on the main site, and choose your mobile theme in the mobile tab. (this may be fixed soon too)
  2. Remember that not all of your pages will work out of the box with the included theme (e.g - your blog, image gallery etc) these will all need to be customised for mobile yourself!
  3. "Full site" link doesn't work if you're redirecting mobile devices to a mobile domain

    A huge thank you to the Maintainer(s): Sean, Willr for bringing us this module.

    As ever, if you see any problems with the above or can improve it, comments welcome below!

Posted by Ryan Badger on 13 June 2011 | 3 Comments

Tags: , , , , ,

Post your comment

Comments

  • Excellent!

    Posted by Arun, 26/12/2012 1:44pm (2 years ago)

  • Excellent!

    Posted by Arun, 26/12/2012 1:43pm (2 years ago)

  • Thanks for the write up... Helped me get it sorted out in about 10 minutes flat. Cheers!

    Posted by Colin Burns, 11/07/2011 3:34pm (3 years ago)

RSS feed for comments on this page | RSS feed for all comments