Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,951 views

Published on

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

Published in: Technology
  • greate... it helps me alot
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×