cmsms mobile edition

Discuss, ask and suggest about Usability and Accessability with CMS Made Simple
Locked
cubix
Power Poster
Power Poster
Posts: 314
Joined: Mon Jul 09, 2007 10:00 am

Re: cmsms mobile edition

Post by cubix »

most mobile devices are starting to support xhtml now which is good.

however, heres a little demo of how cms caters for everyone!

heres some php that checks for mobile devices and redirects based on the output, ive placed this code in a UDT

http://www.andymoore.info/php-to-detect-mobile-phones/

should it detect a mobile device, the user is redirected to a new page with a template that looks alittle like this..

Code: Select all

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
 <card id="title" title="Title">
  <p>
{content}
</p>
 </card>
</wml> 
if they are not on a mobile device, they are redirected to a new page using my standard template.

to see it in action.. http://www.shareit.co.nz/mobile (this link may be removed in the near future)

hope this helps someone
cubix
Power Poster
Power Poster
Posts: 314
Joined: Mon Jul 09, 2007 10:00 am

Re: cmsms mobile edition

Post by cubix »

now, i cant say i know much about mobile technology but what you have stated shouldnt be too hard..

there are a few style switching modules in the forge that can easily be modified with the above script (or similar)

http://dev.cmsmadesimple.org/projects/browserstyler/
This module allows you to set up rules by which you can attach stylesheets to your pages depending upon the browser the end user is using (or claiming to use via the UserAgent string).
and/or

http://dev.cmsmadesimple.org/projects/styleswitcher/
The stylesheet switcher will provide a way for front end users to control the appearance of the site they are viewing.
if you have any php experience (even a basic level) im sure you could hack a few bits of code together. and im always happy to lend a hand if i can.

if you wanted to get really technical you could implement WURFL type checking (which would most probably identify the mobile device you noted)


now here comes my lack of understanding, as far as i can see, you would create 2x templates one for mobile devices and one for browsers (wml and xhtml doctypes), provided they both have {content} tags in them, theres no need to update any of your content. now im assuming you should be able to control the look and feel of the page from the css alone.

ill download the source for the wordpress plugin and have a look over that tonight.
cyberman

Re: cmsms mobile edition

Post by cyberman »

There's a mobile admin theme available too

http://themes.cmsmadesimple.org/index.p ... eturnid=17
jd

Re: cmsms mobile edition

Post by jd »

anyone got any experience designing pages for iphone with CMSMS?
aliceraunsbaek
Forum Members
Forum Members
Posts: 17
Joined: Wed Oct 07, 2009 6:30 am
Location: Denmark

Re: cmsms mobile edition

Post by aliceraunsbaek »

cyberman wrote: There's a mobile admin theme available too

http://themes.cmsmadesimple.org/index.p ... eturnid=17
Using a mobile template - wouldn't that mean that is the only appearance?

Because I could really go for an automatic switch in templates depending on the device viewing the site.
Eg. menu to the left with news and bit logo at the top of the page - for regular visitors
And simple menu and less fancy graphics - for mobile visitors
Both using the same content pages!

And I haven't seen that option anywhere - if it does exist, please direct me to it!

~Alice
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: cmsms mobile edition

Post by Nullig »

I redirect via .htaccess to a separate subdomain for mobiles. See here:

http://forum.cmsmadesimple.org/index.ph ... 520.0.html

While more and more mobile phones are capable of viewing regular web pages, there's usually a lot of scrolling involved. I think it is far more user friendly (along with cost reducing) to have content designed explicitly for mobiles - more succinct text, less graphics, etc.

You can see an example here:

Regular site - http://www.petgranny.com
Mobile site - http://mobile.petgranny.com (NOTE: still under construction)

The .htaccess file automatically redirects to the proper subdomain.

Nullig
faglork

Re: cmsms mobile edition

Post by faglork »

Nullig wrote: I redirect via .htaccess to a separate subdomain for mobiles. (...)
While more and more mobile phones are capable of viewing regular web pages, there's usually a lot of scrolling involved.
Well, for example, the WordPress WPTOUCH plugin (and others) handles this beautifully.

See it live at http://www.wiesentbote.de (use your iPhone)

The new version: http://www.bravenewcode.com/products/wptouch-pro/

Look at the features - something like that would be a KILLER application for CMSMS.
I would not mind paying for such a plugin/module.

Cheers,
Alex
uniqu3

Re: cmsms mobile edition

Post by uniqu3 »

Well i have done a mobile version of a website i am working on or better said waiting for approval based on UDT.
Basically this way you can define what menu, content etc. you want to use without using css display:none not loading a bunch of unneeded and design content on a slow connection.

The UDT i found somewhere in the Italian forum and i tested it on iOS Safari and Opera and on Andorid 1.6 default browser.

You can see it in Action at http://www.lehmaustria.at

The UDT:

Code: Select all

function mobile_device_detect($iphone=true,$android=true,$opera=true,$blackberry=true,$palm=true,$windows=true,$mobileredirect=false,$desktopredirect=false){

  $mobile_browser   = false; // set mobile browser as false till we can prove otherwise
  $user_agent       = $_SERVER['HTTP_USER_AGENT']; // get the user agent value - this should be cleaned to ensure no nefarious input gets executed
  $accept           = $_SERVER['HTTP_ACCEPT']; // get the content accept value - this should be cleaned to ensure no nefarious input gets executed

  switch(true){ // using a switch against the following statements which could return true is more efficient than the previous method of using if statements

    case (eregi('ipod',$user_agent)||eregi('iphone',$user_agent)); // we find the words iphone or ipod in the user agent
      $mobile_browser = $iphone; // mobile browser is either true or false depending on the setting of iphone when calling the function
      if(substr($iphone,0,4)=='http'){ // does the value of iphone resemble a url
        $mobileredirect = $iphone; // set the mobile redirect url to the url value stored in the iphone value
      } // ends the if for iphone being a url
    break; // break out and skip the rest if we've had a match on the iphone or ipod

    case (eregi('android',$user_agent));  // we find android in the user agent
      $mobile_browser = $android; // mobile browser is either true or false depending on the setting of android when calling the function
      if(substr($android,0,4)=='http'){ // does the value of android resemble a url
        $mobileredirect = $android; // set the mobile redirect url to the url value stored in the android value
      } // ends the if for android being a url
    break; // break out and skip the rest if we've had a match on android

    case (eregi('opera mini',$user_agent)); // we find opera mini in the user agent
      $mobile_browser = $opera; // mobile browser is either true or false depending on the setting of opera when calling the function
      if(substr($opera,0,4)=='http'){ // does the value of opera resemble a rul
        $mobileredirect = $opera; // set the mobile redirect url to the url value stored in the opera value
      } // ends the if for opera being a url 
    break; // break out and skip the rest if we've had a match on opera

    case (eregi('blackberry',$user_agent)); // we find blackberry in the user agent
      $mobile_browser = $blackberry; // mobile browser is either true or false depending on the setting of blackberry when calling the function
      if(substr($blackberry,0,4)=='http'){ // does the value of blackberry resemble a rul
        $mobileredirect = $blackberry; // set the mobile redirect url to the url value stored in the blackberry value
      } // ends the if for blackberry being a url 
    break; // break out and skip the rest if we've had a match on blackberry

    case (preg_match('/(palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i',$user_agent)); // we find palm os in the user agent - the i at the end makes it case insensitive
      $mobile_browser = $palm; // mobile browser is either true or false depending on the setting of palm when calling the function
      if(substr($palm,0,4)=='http'){ // does the value of palm resemble a rul
        $mobileredirect = $palm; // set the mobile redirect url to the url value stored in the palm value
      } // ends the if for palm being a url 
    break; // break out and skip the rest if we've had a match on palm os

    case (preg_match('/(windows ce; ppc;|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent)); // we find windows mobile in the user agent - the i at the end makes it case insensitive
      $mobile_browser = $windows; // mobile browser is either true or false depending on the setting of windows when calling the function
      if(substr($windows,0,4)=='http'){ // does the value of windows resemble a rul
        $mobileredirect = $windows; // set the mobile redirect url to the url value stored in the windows value
      } // ends the if for windows being a url 
    break; // break out and skip the rest if we've had a match on windows

    case (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|pda|psp|treo)/i',$user_agent)); // check if any of the values listed create a match on the user agent - these are some of the most common terms used in agents to identify them as being mobile devices - the i at the end makes it case insensitive
      $mobile_browser = true; // set mobile browser to true
    break; // break out and skip the rest if we've preg_match on the user agent returned true 

    case ((strpos($accept,'text/vnd.wap.wml')>0)||(strpos($accept,'application/vnd.wap.xhtml+xml')>0)); // is the device showing signs of support for text/vnd.wap.wml or application/vnd.wap.xhtml+xml
      $mobile_browser = true; // set mobile browser to true
    break; // break out and skip the rest if we've had a match on the content accept headers

    case (isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE'])); // is the device giving us a HTTP_X_WAP_PROFILE or HTTP_PROFILE header - only mobile devices would do this
      $mobile_browser = true; // set mobile browser to true
    break; // break out and skip the final step if we've had a return true on the mobile specfic headers

    case (in_array(strtolower(substr($user_agent,0,4)),array('1207'=>'1207','3gso'=>'3gso','4thp'=>'4thp','501i'=>'501i','502i'=>'502i','503i'=>'503i','504i'=>'504i','505i'=>'505i','506i'=>'506i','6310'=>'6310','6590'=>'6590','770s'=>'770s','802s'=>'802s','a wa'=>'a wa','acer'=>'acer','acs-'=>'acs-','airn'=>'airn','alav'=>'alav','asus'=>'asus','attw'=>'attw','au-m'=>'au-m','aur '=>'aur ','aus '=>'aus ','abac'=>'abac','acoo'=>'acoo','aiko'=>'aiko','alco'=>'alco','alca'=>'alca','amoi'=>'amoi','anex'=>'anex','anny'=>'anny','anyw'=>'anyw','aptu'=>'aptu','arch'=>'arch','argo'=>'argo','bell'=>'bell','bird'=>'bird','bw-n'=>'bw-n','bw-u'=>'bw-u','beck'=>'beck','benq'=>'benq','bilb'=>'bilb','blac'=>'blac','c55/'=>'c55/','cdm-'=>'cdm-','chtm'=>'chtm','capi'=>'capi','comp'=>'comp','cond'=>'cond','craw'=>'craw','dall'=>'dall','dbte'=>'dbte','dc-s'=>'dc-s','dica'=>'dica','ds-d'=>'ds-d','ds12'=>'ds12','dait'=>'dait','devi'=>'devi','dmob'=>'dmob','doco'=>'doco','dopo'=>'dopo','el49'=>'el49','erk0'=>'erk0','esl8'=>'esl8','ez40'=>'ez40','ez60'=>'ez60','ez70'=>'ez70','ezos'=>'ezos','ezze'=>'ezze','elai'=>'elai','emul'=>'emul','eric'=>'eric','ezwa'=>'ezwa','fake'=>'fake','fly-'=>'fly-','fly_'=>'fly_','g-mo'=>'g-mo','g1 u'=>'g1 u','g560'=>'g560','gf-5'=>'gf-5','grun'=>'grun','gene'=>'gene','go.w'=>'go.w','good'=>'good','grad'=>'grad','hcit'=>'hcit','hd-m'=>'hd-m','hd-p'=>'hd-p','hd-t'=>'hd-t','hei-'=>'hei-','hp i'=>'hp i','hpip'=>'hpip','hs-c'=>'hs-c','htc '=>'htc ','htc-'=>'htc-','htca'=>'htca','htcg'=>'htcg','htcp'=>'htcp','htcs'=>'htcs','htct'=>'htct','htc_'=>'htc_','haie'=>'haie','hita'=>'hita','huaw'=>'huaw','hutc'=>'hutc','i-20'=>'i-20','i-go'=>'i-go','i-ma'=>'i-ma','i230'=>'i230','iac'=>'iac','iac-'=>'iac-','iac/'=>'iac/','ig01'=>'ig01','im1k'=>'im1k','inno'=>'inno','iris'=>'iris','jata'=>'jata','java'=>'java','kddi'=>'kddi','kgt'=>'kgt','kgt/'=>'kgt/','kpt '=>'kpt ','kwc-'=>'kwc-','klon'=>'klon','lexi'=>'lexi','lg g'=>'lg g','lg-a'=>'lg-a','lg-b'=>'lg-b','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-f'=>'lg-f','lg-g'=>'lg-g','lg-k'=>'lg-k','lg-l'=>'lg-l','lg-m'=>'lg-m','lg-o'=>'lg-o','lg-p'=>'lg-p','lg-s'=>'lg-s','lg-t'=>'lg-t','lg-u'=>'lg-u','lg-w'=>'lg-w','lg/k'=>'lg/k','lg/l'=>'lg/l','lg/u'=>'lg/u','lg50'=>'lg50','lg54'=>'lg54','lge-'=>'lge-','lge/'=>'lge/','lynx'=>'lynx','leno'=>'leno','m1-w'=>'m1-w','m3ga'=>'m3ga','m50/'=>'m50/','maui'=>'maui','mc01'=>'mc01','mc21'=>'mc21','mcca'=>'mcca','medi'=>'medi','meri'=>'meri','mio8'=>'mio8','mioa'=>'mioa','mo01'=>'mo01','mo02'=>'mo02','mode'=>'mode','modo'=>'modo','mot '=>'mot ','mot-'=>'mot-','mt50'=>'mt50','mtp1'=>'mtp1','mtv '=>'mtv ','mate'=>'mate','maxo'=>'maxo','merc'=>'merc','mits'=>'mits','mobi'=>'mobi','motv'=>'motv','mozz'=>'mozz','n100'=>'n100','n101'=>'n101','n102'=>'n102','n202'=>'n202','n203'=>'n203','n300'=>'n300','n302'=>'n302','n500'=>'n500','n502'=>'n502','n505'=>'n505','n700'=>'n700','n701'=>'n701','n710'=>'n710','nec-'=>'nec-','nem-'=>'nem-','newg'=>'newg','neon'=>'neon','netf'=>'netf','noki'=>'noki','nzph'=>'nzph','o2 x'=>'o2 x','o2-x'=>'o2-x','opwv'=>'opwv','owg1'=>'owg1','opti'=>'opti','oran'=>'oran','p800'=>'p800','pand'=>'pand','pg-1'=>'pg-1','pg-2'=>'pg-2','pg-3'=>'pg-3','pg-6'=>'pg-6','pg-8'=>'pg-8','pg-c'=>'pg-c','pg13'=>'pg13','phil'=>'phil','pn-2'=>'pn-2','pt-g'=>'pt-g','palm'=>'palm','pana'=>'pana','pire'=>'pire','pock'=>'pock','pose'=>'pose','psio'=>'psio','qa-a'=>'qa-a','qc-2'=>'qc-2','qc-3'=>'qc-3','qc-5'=>'qc-5','qc-7'=>'qc-7','qc07'=>'qc07','qc12'=>'qc12','qc21'=>'qc21','qc32'=>'qc32','qc60'=>'qc60','qci-'=>'qci-','qwap'=>'qwap','qtek'=>'qtek','r380'=>'r380','r600'=>'r600','raks'=>'raks','rim9'=>'rim9','rove'=>'rove','s55/'=>'s55/','sage'=>'sage','sams'=>'sams','sc01'=>'sc01','sch-'=>'sch-','scp-'=>'scp-','sdk/'=>'sdk/','se47'=>'se47','sec-'=>'sec-','sec0'=>'sec0','sec1'=>'sec1','semc'=>'semc','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','sk-0'=>'sk-0','sl45'=>'sl45','slid'=>'slid','smb3'=>'smb3','smt5'=>'smt5','sp01'=>'sp01','sph-'=>'sph-','spv '=>'spv ','spv-'=>'spv-','sy01'=>'sy01','samm'=>'samm','sany'=>'sany','sava'=>'sava','scoo'=>'scoo','send'=>'send','siem'=>'siem','smar'=>'smar','smit'=>'smit','soft'=>'soft','sony'=>'sony','t-mo'=>'t-mo','t218'=>'t218','t250'=>'t250','t600'=>'t600','t610'=>'t610','t618'=>'t618','tcl-'=>'tcl-','tdg-'=>'tdg-','telm'=>'telm','tim-'=>'tim-','ts70'=>'ts70','tsm-'=>'tsm-','tsm3'=>'tsm3','tsm5'=>'tsm5','tx-9'=>'tx-9','tagt'=>'tagt','talk'=>'talk','teli'=>'teli','topl'=>'topl','tosh'=>'tosh','up.b'=>'up.b','upg1'=>'upg1','utst'=>'utst','v400'=>'v400','v750'=>'v750','veri'=>'veri','vk-v'=>'vk-v','vk40'=>'vk40','vk50'=>'vk50','vk52'=>'vk52','vk53'=>'vk53','vm40'=>'vm40','vx98'=>'vx98','virg'=>'virg','vite'=>'vite','voda'=>'voda','vulc'=>'vulc','w3c '=>'w3c ','w3c-'=>'w3c-','wapj'=>'wapj','wapp'=>'wapp','wapu'=>'wapu','wapm'=>'wapm','wig '=>'wig ','wapi'=>'wapi','wapr'=>'wapr','wapv'=>'wapv','wapy'=>'wapy','wapa'=>'wapa','waps'=>'waps','wapt'=>'wapt','winc'=>'winc','winw'=>'winw','wonu'=>'wonu','x700'=>'x700','xda2'=>'xda2','xdag'=>'xdag','yas-'=>'yas-','your'=>'your','zte-'=>'zte-','zeto'=>'zeto','acs-'=>'acs-','alav'=>'alav','alca'=>'alca','amoi'=>'amoi','aste'=>'aste','audi'=>'audi','avan'=>'avan','benq'=>'benq','bird'=>'bird','blac'=>'blac','blaz'=>'blaz','brew'=>'brew','brvw'=>'brvw','bumb'=>'bumb','ccwa'=>'ccwa','cell'=>'cell','cldc'=>'cldc','cmd-'=>'cmd-','dang'=>'dang','doco'=>'doco','eml2'=>'eml2','eric'=>'eric','fetc'=>'fetc','hipt'=>'hipt','http'=>'http','ibro'=>'ibro','idea'=>'idea','ikom'=>'ikom','inno'=>'inno','ipaq'=>'ipaq','jbro'=>'jbro','jemu'=>'jemu','java'=>'java','jigs'=>'jigs','kddi'=>'kddi','keji'=>'keji','kyoc'=>'kyoc','kyok'=>'kyok','leno'=>'leno','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-g'=>'lg-g','lge-'=>'lge-','libw'=>'libw','m-cr'=>'m-cr','maui'=>'maui','maxo'=>'maxo','midp'=>'midp','mits'=>'mits','mmef'=>'mmef','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','mwbp'=>'mwbp','mywa'=>'mywa','nec-'=>'nec-','newt'=>'newt','nok6'=>'nok6','noki'=>'noki','o2im'=>'o2im','opwv'=>'opwv','palm'=>'palm','pana'=>'pana','pant'=>'pant','pdxg'=>'pdxg','phil'=>'phil','play'=>'play','pluc'=>'pluc','port'=>'port','prox'=>'prox','qtek'=>'qtek','qwap'=>'qwap','rozo'=>'rozo','sage'=>'sage','sama'=>'sama','sams'=>'sams','sany'=>'sany','sch-'=>'sch-','sec-'=>'sec-','send'=>'send','seri'=>'seri','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','siem'=>'siem','smal'=>'smal','smar'=>'smar','sony'=>'sony','sph-'=>'sph-','symb'=>'symb','t-mo'=>'t-mo','teli'=>'teli','tim-'=>'tim-','tosh'=>'tosh','treo'=>'treo','tsm-'=>'tsm-','upg1'=>'upg1','upsi'=>'upsi','vk-v'=>'vk-v','voda'=>'voda','vx52'=>'vx52','vx53'=>'vx53','vx60'=>'vx60','vx61'=>'vx61','vx70'=>'vx70','vx80'=>'vx80','vx81'=>'vx81','vx83'=>'vx83','vx85'=>'vx85','wap-'=>'wap-','wapa'=>'wapa','wapi'=>'wapi','wapp'=>'wapp','wapr'=>'wapr','webc'=>'webc','whit'=>'whit','winw'=>'winw','wmlb'=>'wmlb','xda-'=>'xda-',))); // check against a list of trimmed user agents to see if we find a match
      $mobile_browser = true; // set mobile browser to true
    break; // break even though it's the last statement in the switch so there's nothing to break away from but it seems better to include it than exclude it

  } // ends the switch 

  // tell adaptation services (transcoders and proxies) to not alter the content based on user agent as it's already being managed by this script
  header('Cache-Control: no-transform'); // http://mobiforge.com/developing/story/setting-http-headers-advise-transcoding-proxies
  header('Vary: User-Agent, Accept'); // http://mobiforge.com/developing/story/setting-http-headers-advise-transcoding-proxies

  // if redirect (either the value of the mobile or desktop redirect depending on the value of $mobile_browser) is true redirect else we return the status of $mobile_browser
  if($redirect = ($mobile_browser==true) ? $mobileredirect : $desktopredirect){
    header('Location: '.$redirect); // redirect to the right url for this device
    exit;
  }else{ 
    return $mobile_browser; // will return either true or false 
  }

} // ends function mobile_device_detect


 global $gCms;
$smarty = &$gCms->GetSmarty();

$smarty->assign('mobile_detect', false); 
if((mobile_device_detect(true,true,true,true,true,true,false,false))==true)
{ 
   $smarty->assign('mobile_detect', true); 
}
return '';
The Template (you need a stylesheet named "mobile" or however you want to name it but do not attach it to the Template):

Code: Select all

{mobile}
{if $mobile_detect} {stylesheet name='mobile'}
the markup for mobile browsers, you could use HTML5 in this case since the most used smartphones support it.
{else}
here comes the rest of the template for ordinary browser.
{/if}
You can still redirect this to a subdomain or extra domain like Nullig suggested.

Tip: i fell in love with Snippely http://code.google.com/p/snippely/ it comes really handy since i find myself often looking here in forum and reading some user solutions that i do not need at the moments but is good for future reference.
Last edited by uniqu3 on Sun Jan 02, 2011 10:32 am, edited 2 times in total.
faglork

Re: cmsms mobile edition

Post by faglork »

uniqu3 wrote:
You can see it in Action at http://www.lehmaustria.at for login and pass simply enter "demo"
This URL takes me to a domain registration site ... ?

Would love to see it.

That`s a nice UDT ... it sure helps solving this problem. For the end user I`d still like to see a module, for easy configuring your mobile output.

Cheers,
Alex
uniqu3

Re: cmsms mobile edition

Post by uniqu3 »

faglork wrote:
uniqu3 wrote:
You can see it in Action at http://www.lehmaustria.at for login and pass simply enter "demo"
This URL takes me to a domain registration site ... ?

Would love to see it.

That`s a nice UDT ... it sure helps solving this problem. For the end user I`d still like to see a module, for easy configuring your mobile output.

Cheers,
Alex
Ups sorry add index.php
http://www.lehmaustria.at/index.php
nuno

Re: cmsms mobile edition

Post by nuno »

Otico wrote: Hello my fellow cmcms,

did anybody think about a module to make cmsms-sites mobile-friendly? I know about a plugin for wordpress that can do this.
It`s about
- recognition of mobile or handheld-device right at the beginning
- redirection to mobile-friendly templates
- replaceing th css

Otico

PS: I know about css-media 'handheld' - but not a lot of those little nice machines do themselves
You all going to have a surprise very soon :)
faglork

Re: cmsms mobile edition

Post by faglork »

nuno wrote: You all going to have a surprise very soon :)
This statement coming from *you* is downright electrifying ...

Cheers,
Alex
User avatar
pgwalsh
Forum Members
Forum Members
Posts: 45
Joined: Sun Mar 22, 2009 11:36 pm

Re: cmsms mobile edition

Post by pgwalsh »

nuno wrote: You all going to have a surprise very soon :)
What's your definition of very soon.  ;D
My Folding Widget: F@H WUdget
What! You're not folding? Folding@Home
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: cmsms mobile edition

Post by djkirstyjay »

Checkout this thread...

http://forum.cmsmadesimple.org/index.ph ... 572.0.html

I have done an iphone version of one of my sites :)
steffeiter
Forum Members
Forum Members
Posts: 13
Joined: Fri Dec 17, 2010 1:08 am

Re: cmsms mobile edition

Post by steffeiter »

We have been working this type of modification as well.

We wound up using the enhance.js (progressive enhancement) that filters out whether a device can handle certain levels of .js and .css.

Then you can specify ranges of devices to load certain style sheets (media queries) and separate .js files as well.

This got us to the basic level of singling out older phones - giving them a basic stylesheet without any fancy css or js.

For browsers that are capable (smart phones, tablets, desktops) - we then served enhancements. Adding css3 options, jquery .js, etc. You use the built in "enhance.js" to determine what types of devices get which .js an .css.

So this was a great start - but the real trick was using jquery/ajax to actually add content from the cms into the page if the browser was a desktop. The biggest issue as we saw it, was having a smartphone download a giant jquery cycle that had 8 images that were each 900px x 420px. No phone needs this content - it was basically branding stuff.

So we added it in via a javascript call that injected a page call from the cms. The page was rendered using a custom template that only contained the

Code: Select all

{content}
field. So it only output raw html. The content field contained a GCB with the images. All editable via the backend editor.

Sounds complicated, but we need to make sure that the client still has the ability to edit all content.

I would definitely look into "progressive enhancement" and ways of doing this. Check the Filamant group's website for the book. The approach is much more sound. serve a page that every browser can handle, then "enhance" it if the browser has more advanced capabilities.

This way your basic, mobile, tablet, and desktop website can still be single source. Albeit, it is a bit of a pain to set up andf there are certain tings that make a true mobile site perhaps more desirable, but for a simple site, this works great.

Once the site is out of testing, I can provide a link to show it off. But so far so good.
Locked

Return to “[locked] Accessability and Usability”