• Save
Taking Your Website Mobile with TYPO3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Taking Your Website Mobile with TYPO3

on

  • 15,065 views

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

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

Statistics

Views

Total Views
15,065
Views on SlideShare
14,860
Embed Views
205

Actions

Likes
18
Downloads
1
Comments
1

8 Embeds 205

http://jainishsenjaliya.wordpress.com 185
http://pinterest.com 9
http://mjnext.com 4
http://www.php-talks.com 2
https://www.google.com.tr 2
http://webcache.googleusercontent.com 1
http://www.pinterest.com 1
https://jainishsenjaliya.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • greate... it helps me alot
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. Taking Your WebsiteMobile with TYPO3Jeremy Greenawalt
  • 2. Hi.
  • 3. I live in Dallas with mybeautiful wife,Rebekah.
  • 4. I live in Dallas with my beautiful wife, Rebekah.We have a dog.
  • 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. Contact Me:email: jeremy@vin56.comtwitter: @jgreenawalt
  • 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. How much do youoptimize for mobiledevices?Mobile design happens on a spectrum.
  • 9. The MobileDevelopmentSpectrumDesktop NativeWebsite App
  • 10. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Design
  • 11. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Design Template
  • 12. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Design Template Content
  • 13. The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Mobile Design Template Content Version
  • 14. Mobile Best PracticesFirst, we learn from everybody else.
  • 15. Mobile is aboutcontext.Mobile is not a screen size.
  • 16. Mobile Users:•Have a smaller screen•Have limited bandwidth•Need different information•Need everything faster•Don’t have keyboards or mice
  • 17. Mobile Changes:•Navigation•Content•Layout
  • 18. Ideal target-size =44x44Apple HIG.http://developer.apple.com/
  • 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. Navigation•Highlights most helpful links for mobile users•Provides large buttons for highlighted links•Provides link back to desktop version http://lifechurch.tv
  • 21. Content•Replace large or unnecessary images•Make sure text is easily readable•Optimize forms
  • 22. Content•Removed large images•Readable text http://alistapart.com
  • 23. Mobile Form•Large target areas•Minimal fields•HTML5 and autofill helpers http://trinitychurch.org
  • 24. Layout•Reduce multi-column layouts•Use simple design to highlight content•Mimic mobile design patterns from native apps (sometimes)
  • 25. Layout•Simple design highlights content•Single-column text with single large image http://wfaa.com
  • 26. Layout•Single-column layout•Table mimics iOS and Android apps http://wfaa.com
  • 27. Tools•CSS•TYPO3 •TypoScript •TemplaVoila•Mobile frameworks (e.g. Sencha Touch)
  • 28. Advantages of TYPO3•Built-in checks for browser, device, etc.•Multiple templates for the same content.
  • 29. Paths to MobileDevices•Responsive web design•Pure TypoScript•TemplaVoila Subtemplates•External mobile site (redirect)
  • 30. Responsive WebDesignThe new awesomeness
  • 31. Layout Techniques•Fluid grids•Responsive layouts•Flexible images
  • 32. Fluid Grids http://www.designinfluences.com/fluid960gs/
  • 33. Responsive Layouts http://hicksdesign.co.uk/
  • 34. Flexible Imagesimg,object { max-width: 100%; }Internet Explorer:img { width: 100%; }http://unstoppablerobotninja.com/entry/fluid-images/
  • 35. Media Queries •CSS •JavaScript
  • 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. Separate CSS Stylesheets<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css"rel="stylesheet" />
  • 38. JavaScripthttp://code.google.com/p/css3-mediaqueries-js/
  • 39. More Information http://abookapart.com
  • 40. Pros•Can be a great starting place•Adaptable for screens of all sizes
  • 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. TypoScriptThe purest TYPO3 method
  • 43. Original Site
  • 44. Original vs. Final
  • 45. TypoScriptConditions
  • 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. Useragent StringCondition[useragent = agent]
  • 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. 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. iPhone useragentcondition[useragent = *iPhone*]
  • 51. Our mobile useragentcondition[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]||[useragent = *OperaMini*]||[useragent = *BlackBerry*] ## Mobile information[end]
  • 52. User Functions[userFunc = function(parameter)]
  • 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. User FunctionCondition[userFunc = mobile_check(appleDevices)]
  • 55. Our user functioncondition[userFunc = mobile_check(appleDevices)]||[userFunc = mobile_check(androidDevices)] ## Mobile information[end]
  • 56. Loading Mobile CSSwith TypoScriptWhy did we just learn conditions?
  • 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. 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. Updating TypoScriptObjectsHarnessing the power of TYPO3.
  • 60. Common Objects toUpdate •Images •Menus •Generated HTML
  • 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. 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. 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. Bring it all together
  • 65. Adding a Link to theDesktop VersionSome people still want the whole experience.
  • 66. Global Variablehttp://example.com/index.php?id=73&full=1
  • 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. 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. 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. 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. Bring it all together
  • 72. TemplaVoilaSubtemplatesCreating a mobile HTML template.
  • 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. Page TSConfig
  • 75. Page TSConfigTCEFORM.tx_templavoila_tmplobj.rendertype.addItems.mobile = Mobile version
  • 76. Create newtemplate object
  • 77. Setup subtemplate
  • 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. Original vs. Final
  • 80. Mobile Site Redirect
  • 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. 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. TrinityChurch.org
  • 84. Contact Me:email: jeremy@vin56.comtwitter: @jgreenawaltwww: pocketrevolutionary.comslides: slideshare.net/jeremygreenawalt