Taking Your Website Mobile with TYPO3

Taking Your WebsiteMobile with TYPO3Jeremy Greenawalt

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&$(&.*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

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 devices using CSS, TypoScript, and TemplaVoila.

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 Compatible Mobile Design Template

The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Design Template Content

The MobileDevelopmentSpectrumDesktop NativeWebsite App Compatible Mobile Mobile Mobile Design Template Content Version

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 keyboards or mice

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.•Don’t rely on hover or drop-down behavior.

Navigation•Highlights most helpful links for mobile users•Provides large buttons for highlighted links•Provides link back to desktop version http://lifechurch.tv

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 ﬁelds•HTML5 and autoﬁll helpers http://trinitychurch.org

Layout•Reduce multi-column layouts•Use simple design to highlight content•Mimic mobile design patterns from native apps (sometimes)

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.designinﬂuences.com/ﬂuid960gs/

Responsive Layouts http://hicksdesign.co.uk/

Flexible Imagesimg,object { max-width: 100%; }Internet Explorer:img { width: 100%; }http://unstoppablerobotninja.com/entry/ﬂuid-images/

Media Queries •CSS •JavaScript

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

Separate CSS Stylesheets<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css"rel="stylesheet" />

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 full desktop site

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="ﬁleadmin/templates/common_ie.css">[else]page.headerData.30.value = <link rel="stylesheet"type="text/css" href="ﬁleadmin/templates/common.css">[end]

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 Gecko) Version/4.0.5Mobile/8A293 Safari/6531.22.7

iPhone useragentcondition[useragent = *iPhone*]

Our mobile useragentcondition[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]||[useragent = *OperaMini*]||[useragent = *BlackBerry*] ## Mobile information[end]

User Functions[userFunc = function(parameter)]

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; } }

User FunctionCondition[userFunc = mobile_check(appleDevices)]

Our user functioncondition[userFunc = mobile_check(appleDevices)]||[userFunc = mobile_check(androidDevices)] ## Mobile information[end]

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-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 { ﬂoat: none; width: 100%;}

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="ﬁleadmin/templates/css/mobile.css" />[end]

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*]||[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]

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]

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 variableconﬁg.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]

Check global variablesconﬁg.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]

Add link to full siteconﬁg.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]

Bring it all togetherconﬁg.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]

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"> <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>

Page TSConﬁg

Page TSConﬁgTCEFORM.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] || [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]

Original vs. Final

Mobile Site Redirect

“...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/

TypoScript Redirect[useragent = *iPhone*] && [globalVar = GP:full<1] || [useragent= *iPod*] && [globalVar = GP:full<1] || [useragent = *Android*]&& [globalVar = GP:full<1]conﬁg.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]

TrinityChurch.org

Contact Me:email: jeremy@vin56.comtwitter: @jgreenawaltwww: pocketrevolutionary.comslides: slideshare.net/jeremygreenawalt

http://jainishsenjaliya.wordpress.com	132
http://pinterest.com	9
http://mjnext.com	4
http://www.php-talks.com	1
http://webcache.googleusercontent.com	1

Taking Your Website Mobile with TYPO3

by Jeremy Greenawalt on Jun 11, 2011

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 147

Statistics

Taking Your Website Mobile with TYPO3 Presentation Transcript