Taking Your WebsiteMobile with TYPO3Jeremy Greenawalt
Hi.
I live in Dallas with mybeautiful wife,Rebekah.
I live in Dallas with my                 beautiful wife,                 Rebekah.We have a dog.
45678)4-#,29-1-1#& )*0%&&  %*($-B&        &     :;9)("$)>&22)2-9.%)?."#);&1)<""=0D& 4+%#&        &     !& O>+/(&(-$)+5&$(&...
Contact Me:email: jeremy@vin56.comtwitter: @jgreenawalt
What We’reTalking About:•How much do you optimize for mobile devices?•Mobile best practices•Four basic paths to mobile dev...
How much do youoptimize for mobiledevices?Mobile design happens on a spectrum.
The MobileDevelopmentSpectrumDesktop       NativeWebsite       App
The MobileDevelopmentSpectrumDesktop                NativeWebsite                App          Compatible          Design
The MobileDevelopmentSpectrumDesktop                           NativeWebsite                           App          Compat...
The MobileDevelopmentSpectrumDesktop                                     NativeWebsite                                    ...
The MobileDevelopmentSpectrumDesktop                                               NativeWebsite                          ...
Mobile Best PracticesFirst, we learn from everybody else.
Mobile is aboutcontext.Mobile is not a screen size.
Mobile Users:•Have a smaller screen•Have limited bandwidth•Need different information•Need everything faster•Don’t have ke...
Mobile Changes:•Navigation•Content•Layout
Ideal target-size =44x44Apple HIG.http://developer.apple.com/
Simplify Navigation•Reduce menus to the minimum # of items.•Highlight the menu items that people need in a mobile context....
Navigation•Highlights most helpful links for mobile users•Provides large buttons for highlighted links•Provides link back ...
Content•Replace large or unnecessary images•Make sure text is easily readable•Optimize forms
Content•Removed large images•Readable text         http://alistapart.com
Mobile Form•Large target areas•Minimal fields•HTML5 and autofill helpers       http://trinitychurch.org
Layout•Reduce multi-column layouts•Use simple design to highlight content•Mimic mobile design patterns from native apps (s...
Layout•Simple design highlights content•Single-column text with single large image              http://wfaa.com
Layout•Single-column layout•Table mimics iOS and Android apps          http://wfaa.com
Tools•CSS•TYPO3 •TypoScript •TemplaVoila•Mobile frameworks (e.g. Sencha Touch)
Advantages of TYPO3•Built-in checks for browser, device, etc.•Multiple templates for the same content.
Paths to MobileDevices•Responsive web design•Pure TypoScript•TemplaVoila Subtemplates•External mobile site (redirect)
Responsive WebDesignThe new awesomeness
Layout Techniques•Fluid grids•Responsive layouts•Flexible images
Fluid Grids   http://www.designinfluences.com/fluid960gs/
Responsive Layouts             http://hicksdesign.co.uk/
Flexible Imagesimg,object { max-width: 100%; }Internet Explorer:img { width: 100%; }http://unstoppablerobotninja.com/entry...
Media Queries  •CSS  •JavaScript
Single CSS Stylesheet /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 32...
Separate CSS Stylesheets<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css"rel="style...
JavaScripthttp://code.google.com/p/css3-mediaqueries-js/
More Information           http://abookapart.com
Pros•Can be a great starting place•Adaptable for screens of all sizes
Cons•Introduces a whole new design process•Not a complete “mobile solution”•Still downloads large content•No way to see fu...
TypoScriptThe purest TYPO3 method
Original Site
Original vs. Final
TypoScriptConditions
Example Condition[browser = msie]page.headerData.30.value = <link rel="stylesheet"type="text/css" href="fileadmin/templates...
Useragent StringCondition[useragent = agent]
What is a useragentstring?Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0like Mac OS X; en-us) AppleWebKit/532.9(KHTML, like Gec...
What is a useragentstring?Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0like Mac OS X; en-us) AppleWebKit/532.9(KHTML, like Gec...
iPhone useragentcondition[useragent = *iPhone*]
Our mobile useragentcondition[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]||[useragent = *OperaMin...
User Functions[userFunc = function(parameter)]
Adding a user functionto localconf.php function mobile_check($cmd){    switch($cmd){        case "appleDevices":          ...
User FunctionCondition[userFunc = mobile_check(appleDevices)]
Our user functioncondition[userFunc = mobile_check(appleDevices)]||[userFunc = mobile_check(androidDevices)] ## Mobile inf...
Loading Mobile CSSwith TypoScriptWhy did we just learn conditions?
Mobile Stylesheet/* Resize all fonts for mobile devices */p, ul, div, h2, h3, h4, h5, h6 {   font-size: 24px;   line-heigh...
Load CSS with TypoScript[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||...
Updating TypoScriptObjectsHarnessing the power of TYPO3.
Common Objects toUpdate •Images •Menus •Generated HTML
Updating an image[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[userag...
Updating an image[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[userag...
Bring it all together[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[us...
Bring it all together
Adding a Link to theDesktop VersionSome people still want the whole experience.
Global Variablehttp://example.com/index.php?id=73&full=1
Set the link variableconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [glo...
Check global variablesconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [gl...
Add link to full siteconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [glo...
Bring it all togetherconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [glo...
Bring it all together
TemplaVoilaSubtemplatesCreating a mobile HTML template.
Mobile HTML<!DOCTYPE HTML><html> <head>  <meta charset="utf-8" /> </head> <body>  <div id="logo"></div>  <ul id="menu-area...
Page TSConfig
Page TSConfigTCEFORM.tx_templavoila_tmplobj.rendertype.addItems.mobile = Mobile version
Create newtemplate object
Setup subtemplate
TypoScript Setup[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [us...
Original vs. Final
Mobile Site Redirect
“...if the user goals for your mobile site aremore limited in scope than its desktopequivalent, then serving different con...
TypoScript Redirect[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent= *iPod*] && [globalVar = GP:full<1] || ...
TrinityChurch.org
Contact Me:email: jeremy@vin56.comtwitter: @jgreenawaltwww: pocketrevolutionary.comslides: slideshare.net/jeremygreenawalt
Taking Your Website Mobile with TYPO3
Taking Your Website Mobile with TYPO3
Taking Your Website Mobile with TYPO3
Taking Your Website Mobile with TYPO3
Upcoming SlideShare
Loading in …5
×

Taking Your Website Mobile with TYPO3

16,273 views
16,083 views

Published on

Make your TYPO3 website ready for mobile devices using CSS, TypoScript, and TemplaVoila.

Published in: Technology
1 Comment
19 Likes
Statistics
Notes
  • greate... it helps me alot
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
16,273
On SlideShare
0
From Embeds
0
Number of Embeds
233
Actions
Shares
0
Downloads
1
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide
  • \n
  • T\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Taking Your Website Mobile with TYPO3

    1. 1. Taking Your WebsiteMobile with TYPO3Jeremy Greenawalt
    2. 2. Hi.
    3. 3. I live in Dallas with mybeautiful wife,Rebekah.
    4. 4. I live in Dallas with my beautiful wife, Rebekah.We have a dog.
    5. 5. 45678)4-#,29-1-1#& )*0%&& %*($-B& & :;9)("$)>&22)2-9.%)?."#);&1)<""=0D& 4+%#& & !& O>+/(&(-$)+5&$(&.*1#",>/&39:;<&%#)./$%#0&E5+#%/-& & >0+?&3-.*45"+.%B&3#)./$6*+/$B&$(&*%2#"&5*"#&(& )*"#&& %#52*/*?+#0& !& !>0%*)+G#&(-$)+5&)#>0B&/*?*0B&$(& )+G+?&& 2#$(#"0&>0+?&%"+5=0&-*>&1*K%&E(&+&%2#&& $+/$A/#D& *,E5+$/&(*5>)#%$%+*&)./#& %*&&*45"+.%B&& !& O>+/(&5*%#%&#/#)#%0&$(&%#)./$%#& #C%#0+*0&%*&*@#"2$>/&$(&+)."*@#&& 39:;<K0&(#,$>/%&A$5=H#(&#(+%+?&#C.#"+#5#C$)./#&>"& *1& !& N((&(-$)+5&A$#"0&$(&/*?*0&%*&$&#C+0%+?& #D&9*>& %#)./$%#&(#0+? ?$%+*B&0&+&%2#& !& !"#$%#&5>0%*)&)#>0&>0+?&)>/%+./#&)./$%#0& $.."*$52#0&$(&%#52+F>#0 ! " # # $ % & ( ) * + , - . & - % / - ) 0 & 1 & 2 2 - 3 *>&1+//&*$/+G#& !& !"#$%#&)>/%+./#&%#)./$%#0&1+%2*>%& "#.#$%+?&-*>"0#/, !& !>0%*)+G#&%2#&A$5=#(&#(+%+?&#C.#"+#5#& 7#"#)-&8"##$1$/% ,*"&0.#5+E5&%#)./$%#0 45678)4-#,29-1 $%0&%*&)>/%+./#& !& N((&)>/%+./#&5*/>)0&$(&0.#5+$/&,*")$%%+?&#B&%2#& 1+%2&Q#C+A/#&5*%#%&#/#)#%0(&>0#"0& !& !"#$%#&.*1#",>/&5*%#%&#/#)#%0&1+%2& #(+%+?& @$"+$A/#0&$(&+%#//+?#%&,*")$%%+? @)ABCBB)L4 !"#$%#&$(&)*(+,-&%#)./$%#0&1+%2&3-.*45"+.%&$(&3#)./$6*+/$ D)8ECBB)LM :"+5#0&(*&*%&+5/>(#& /*5$/&0$/#0&%$C&*"&6N3& 12#"#&$../+5$A/#?B&O+")+?2$)&H&P>)A$+ 9/=6$<C/"# F-.-#()G.--%9>92
    6. 6. Contact Me:email: jeremy@vin56.comtwitter: @jgreenawalt
    7. 7. What We’reTalking About:•How much do you optimize for mobile devices?•Mobile best practices•Four basic paths to mobile devices using CSS, TypoScript, and TemplaVoila.
    8. 8. How much do youoptimize for mobiledevices?Mobile design happens on a spectrum.
    9. 9. The MobileDevelopmentSpectrumDesktop NativeWebsite App
    10. 10. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Design
    11. 11. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Design Template
    12. 12. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Design Template Content
    13. 13. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Mobile Design Template Content Version
    14. 14. Mobile Best PracticesFirst, we learn from everybody else.
    15. 15. Mobile is aboutcontext.Mobile is not a screen size.
    16. 16. Mobile Users:•Have a smaller screen•Have limited bandwidth•Need different information•Need everything faster•Don’t have keyboards or mice
    17. 17. Mobile Changes:•Navigation•Content•Layout
    18. 18. Ideal target-size =44x44Apple HIG.http://developer.apple.com/
    19. 19. Simplify Navigation•Reduce menus to the minimum # of items.•Highlight the menu items that people need in a mobile context.•Don’t rely on hover or drop-down behavior.
    20. 20. Navigation•Highlights most helpful links for mobile users•Provides large buttons for highlighted links•Provides link back to desktop version http://lifechurch.tv
    21. 21. Content•Replace large or unnecessary images•Make sure text is easily readable•Optimize forms
    22. 22. Content•Removed large images•Readable text http://alistapart.com
    23. 23. Mobile Form•Large target areas•Minimal fields•HTML5 and autofill helpers http://trinitychurch.org
    24. 24. Layout•Reduce multi-column layouts•Use simple design to highlight content•Mimic mobile design patterns from native apps (sometimes)
    25. 25. Layout•Simple design highlights content•Single-column text with single large image http://wfaa.com
    26. 26. Layout•Single-column layout•Table mimics iOS and Android apps http://wfaa.com
    27. 27. Tools•CSS•TYPO3 •TypoScript •TemplaVoila•Mobile frameworks (e.g. Sencha Touch)
    28. 28. Advantages of TYPO3•Built-in checks for browser, device, etc.•Multiple templates for the same content.
    29. 29. Paths to MobileDevices•Responsive web design•Pure TypoScript•TemplaVoila Subtemplates•External mobile site (redirect)
    30. 30. Responsive WebDesignThe new awesomeness
    31. 31. Layout Techniques•Fluid grids•Responsive layouts•Flexible images
    32. 32. Fluid Grids http://www.designinfluences.com/fluid960gs/
    33. 33. Responsive Layouts http://hicksdesign.co.uk/
    34. 34. Flexible Imagesimg,object { max-width: 100%; }Internet Explorer:img { width: 100%; }http://unstoppablerobotninja.com/entry/fluid-images/
    35. 35. Media Queries •CSS •JavaScript
    36. 36. Single CSS Stylesheet /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } "Hardboiled CSS3 Media Queries" by Andy Clarke http://stuffandnonsense.co.uk/blog/about/ hardboiled_css3_media_queries
    37. 37. Separate CSS Stylesheets<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css"rel="stylesheet" />
    38. 38. JavaScripthttp://code.google.com/p/css3-mediaqueries-js/
    39. 39. More Information http://abookapart.com
    40. 40. Pros•Can be a great starting place•Adaptable for screens of all sizes
    41. 41. Cons•Introduces a whole new design process•Not a complete “mobile solution”•Still downloads large content•No way to see full desktop site
    42. 42. TypoScriptThe purest TYPO3 method
    43. 43. Original Site
    44. 44. Original vs. Final
    45. 45. TypoScriptConditions
    46. 46. Example Condition[browser = msie]page.headerData.30.value = <link rel="stylesheet"type="text/css" href="fileadmin/templates/common_ie.css">[else]page.headerData.30.value = <link rel="stylesheet"type="text/css" href="fileadmin/templates/common.css">[end]
    47. 47. Useragent StringCondition[useragent = agent]
    48. 48. What is a useragentstring?Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0like Mac OS X; en-us) AppleWebKit/532.9(KHTML, like Gecko) Version/4.0.5Mobile/8A293 Safari/6531.22.7
    49. 49. What is a useragentstring?Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0like Mac OS X; en-us) AppleWebKit/532.9(KHTML, like Gecko) Version/4.0.5Mobile/8A293 Safari/6531.22.7
    50. 50. iPhone useragentcondition[useragent = *iPhone*]
    51. 51. Our mobile useragentcondition[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]||[useragent = *OperaMini*]||[useragent = *BlackBerry*] ## Mobile information[end]
    52. 52. User Functions[userFunc = function(parameter)]
    53. 53. Adding a user functionto localconf.php function mobile_check($cmd){ switch($cmd){ case "appleDevices": if(strstr($_SERVER[HTTP_USER_AGENT],iPhone) || strstr($_SERVER[HTTP_USER_AGENT],iPod) || strstr($_SERVER[HTTP_USER_ AGENT],iPad)) { return true; } break; case "androidDevices": // .... break; } }
    54. 54. User FunctionCondition[userFunc = mobile_check(appleDevices)]
    55. 55. Our user functioncondition[userFunc = mobile_check(appleDevices)]||[userFunc = mobile_check(androidDevices)] ## Mobile information[end]
    56. 56. Loading Mobile CSSwith TypoScriptWhy did we just learn conditions?
    57. 57. Mobile Stylesheet/* Resize all fonts for mobile devices */p, ul, div, h2, h3, h4, h5, h6 { font-size: 24px; line-height: 30px;}/* Resize menu items for mobile devices */li.menu-item a { font-size: 30px; line-height: 36px; margin-right: 10px;}         /* Reset all columns to 100% width and single-column */#column_1, #column_2 { float: none; width: 100%;}
    58. 58. Load CSS with TypoScript[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[useragent =*BlackBerry*]page.headerData.30 = TEXTpage.headerData.30.value = <link rel="stylesheet"type="text/css" href="fileadmin/templates/css/mobile.css" />[end]
    59. 59. Updating TypoScriptObjectsHarnessing the power of TYPO3.
    60. 60. Common Objects toUpdate •Images •Menus •Generated HTML
    61. 61. Updating an image[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[useragent = *BlackBerry*]       page.headerData.30 = TEXTpage.headerData.30.value = <link rel="stylesheet" type="text/css"href="fileadmin/templates/css/mobile.css" />       lib.logo.file = fileadmin/templates/logo_mobile.pnglib.mainMenu >lib.mainMenu = HMENUlib.mainMenu { entryLevel = 0 wrap = <ul id="menu-area">|</ul> 1 = TMENU 1.NO.allWrap = <li class="menu-item">|</li>}[end]
    62. 62. Updating an image[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[useragent = *BlackBerry*]       page.headerData.30 = TEXTpage.headerData.30.value = <link rel="stylesheet" type="text/css"href="fileadmin/templates/css/mobile.css" />       lib.logo.file = fileadmin/templates/logo_mobile.pnglib.mainMenu >lib.mainMenu = HMENUlib.mainMenu { entryLevel = 0 wrap = <ul id="menu-area">|</ul> 1 = TMENU 1.NO.allWrap = <li class="menu-item">|</li>}[end]
    63. 63. Bring it all together[useragent = *iPhone*]||[useragent = *iPod*]||[useragent =*Android*]||[useragent = *Opera Mini*]||[useragent = *BlackBerry*]       page.headerData.30 = TEXTpage.headerData.30.value = <link rel="stylesheet" type="text/css"href="fileadmin/templates/css/mobile.css" />       lib.logo.file = fileadmin/templates/logo_mobile.pnglib.mainMenu >lib.mainMenu = HMENUlib.mainMenu { entryLevel = 0 wrap = <ul id="menu-area">|</ul> 1 = TMENU 1.NO.allWrap = <li class="menu-item">|</li>}[end]
    64. 64. Bring it all together
    65. 65. Adding a Link to theDesktop VersionSome people still want the whole experience.
    66. 66. Global Variablehttp://example.com/index.php?id=73&full=1
    67. 67. Set the link variableconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [useragent = *Android*] &&[globalVar = GP:full<1] || [useragent = *Opera Mini*] &&[globalVar = GP:full<1] || [useragent = *BlackBerry*] &&[globalVar = GP:full<1] ## Mobile information lib.footerLink { value = Full Version typolink { parameter.data = page:uid addQueryString = 1 addQueryString.exclude = id additionalParams = &full=1 } }[end]
    68. 68. Check global variablesconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [useragent = *Android*] &&[globalVar = GP:full<1] || [useragent = *Opera Mini*] &&[globalVar = GP:full<1] || [useragent = *BlackBerry*] &&[globalVar = GP:full<1] ## Mobile information lib.footerLink { value = Full Version typolink { parameter.data = page:uid addQueryString = 1 addQueryString.exclude = id additionalParams = &full=1 } }[end]
    69. 69. Add link to full siteconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [useragent = *Android*] &&[globalVar = GP:full<1] || [useragent = *Opera Mini*] &&[globalVar = GP:full<1] || [useragent = *BlackBerry*] &&[globalVar = GP:full<1] ## Mobile information lib.footerLink { value = Full Version typolink { parameter.data = page:uid addQueryString = 1 addQueryString.exclude = id additionalParams = &full=1 } }[end]
    70. 70. Bring it all togetherconfig.linkVars = full[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [useragent = *Android*] &&[globalVar = GP:full<1] || [useragent = *Opera Mini*] &&[globalVar = GP:full<1] || [useragent = *BlackBerry*] &&[globalVar = GP:full<1] ## Mobile information lib.footerLink { value = Full Version typolink { parameter.data = page:uid addQueryString = 1 addQueryString.exclude = id additionalParams = &full=1 } }[end]
    71. 71. Bring it all together
    72. 72. TemplaVoilaSubtemplatesCreating a mobile HTML template.
    73. 73. Mobile HTML<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> </head> <body> <div id="logo"></div> <ul id="menu-area"> <li class="menu-item"><a href="">Menu Item</a></li> </ul> <div id="content">This is our content</div> <div id="print_link"></div> </body></html>
    74. 74. Page TSConfig
    75. 75. Page TSConfigTCEFORM.tx_templavoila_tmplobj.rendertype.addItems.mobile = Mobile version
    76. 76. Create newtemplate object
    77. 77. Setup subtemplate
    78. 78. TypoScript Setup[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent =*iPod*] && [globalVar = GP:full<1] || [useragent = *Android*] &&[globalVar = GP:full<1] || [useragent = *Opera Mini*] && [globalVar =GP:full<1] || [useragent = *BlackBerry*] && [globalVar = GP:full<1]page.10.childTemplate = mobile## The rest of our mobile code[end]
    79. 79. Original vs. Final
    80. 80. Mobile Site Redirect
    81. 81. “...if the user goals for your mobile site aremore limited in scope than its desktopequivalent, then serving different contentto each might be the best approach.” Ethan Marcotte http://m.alistapart.com/articles/responsive-web-design/
    82. 82. TypoScript Redirect[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent= *iPod*] && [globalVar = GP:full<1] || [useragent = *Android*]&& [globalVar = GP:full<1]config.additionalHeaders = Location: m.example.com[end][useragent = *Opera Mini*] && [globalVar = GP:full<1] ||[useragent = *BlackBerry*] && [globalVar = GP:full<1]## Generic mobile code goes here[end]
    83. 83. TrinityChurch.org
    84. 84. Contact Me:email: jeremy@vin56.comtwitter: @jgreenawaltwww: pocketrevolutionary.comslides: slideshare.net/jeremygreenawalt

    ×