Taking Your Website Mobile with TYPO3

Taking Your Website
Mobile with TYPO3
Jeremy Greenawalt

I live in Dallas with my
beautiful 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.com
twitter: @jgreenawalt

What We’re
Talking 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 you
optimize for mobile
devices?
Mobile design happens on a spectrum.

The Mobile
Development
Spectrum
Desktop Native
Website App

The Mobile
Development
Spectrum
Desktop Native
Website App
Compatible
Design

The Mobile
Development
Spectrum
Desktop Native
Website App
Compatible Mobile
Design Template

The Mobile
Development
Spectrum
Desktop Native
Website App
Compatible Mobile Mobile
Design Template Content

The Mobile
Development
Spectrum
Desktop Native
Website App
Compatible Mobile Mobile Mobile
Design Template Content Version

Mobile Best Practices
First, we learn from everybody else.

Mobile is about
context.
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 =
44x44
Apple 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 Mobile
Devices
•Responsive web design

•Pure TypoScript

•TemplaVoila Subtemplates

•External mobile site (redirect)

Responsive Web
Design
The 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 Images
img,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" />

JavaScript
http://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

TypoScript
The purest TYPO3 method

Example Condition
[browser = msie]

page.headerData.30.value = <link rel="stylesheet"
type="text/css" href="ﬁleadmin/templates/
common_ie.css">

[else]

type="text/css" href="ﬁleadmin/templates/common.css">

[end]

Useragent String
Condition
[useragent = agent]

What is a useragent
string?
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0
like Mac OS X; en-us) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5
Mobile/8A293 Safari/6531.22.7

iPhone useragent
condition
[useragent = *iPhone*]

Our mobile useragent
condition
[useragent = *iPhone*]||[useragent = *iPod*]||
[useragent = *Android*]||[useragent = *Opera
Mini*]||[useragent = *BlackBerry*]
## Mobile information
[end]

User Functions

[userFunc = function(parameter)]

Adding a user function
to 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 Function
Condition
[userFunc = mobile_check(appleDevices)]

Our user function
condition
[userFunc = mobile_check(appleDevices)]||
[userFunc = mobile_check(androidDevices)]
[end]

Loading Mobile CSS
with TypoScript
Why 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 = TEXT
type="text/css" href="ﬁleadmin/templates/css/mobile.css" />
[end]

Updating TypoScript
Objects
Harnessing the power of TYPO3.

Common Objects to
Update
•Images

•Menus

•Generated HTML

Updating an image
*Android*]||[useragent = *Opera Mini*]||[useragent = *BlackBerry*]

page.headerData.30.value = <link rel="stylesheet" type="text/css"
href="fileadmin/templates/css/mobile.css" />

lib.logo.file = fileadmin/templates/logo_mobile.png

lib.mainMenu >
lib.mainMenu = HMENU
lib.mainMenu {

entryLevel = 0

wrap = <ul id="menu-area">|</ul>

1 = TMENU

1.NO.allWrap = <li class="menu-item">|</li>
}

[end]

Bring it all together
*Android*]||[useragent = *Opera Mini*]||[useragent = *BlackBerry*]

page.headerData.30.value = <link rel="stylesheet" type="text/css"
href="fileadmin/templates/css/mobile.css" />

lib.logo.file = fileadmin/templates/logo_mobile.png

lib.mainMenu >
lib.mainMenu = HMENU
lib.mainMenu {

entryLevel = 0

wrap = <ul id="menu-area">|</ul>

1 = TMENU

1.NO.allWrap = <li class="menu-item">|</li>
}

[end]

Adding a Link to the
Desktop Version
Some people still want the whole experience.

Global Variable
http://example.com/index.php?id=73&full=1

Set the link variable
conﬁ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]


lib.footerLink {
value = Full Version
typolink {
parameter.data = page:uid
addQueryString = 1
addQueryString.exclude = id
additionalParams = &full=1
}
}

[end]

Check global variables



lib.footerLink {
typolink {
addQueryString = 1
}
}

[end]

Add link to full site



lib.footerLink {
typolink {
addQueryString = 1
}
}

[end]

Bring it all together



lib.footerLink {
typolink {
addQueryString = 1
}
}

[end]

TemplaVoila
Subtemplates
Creating 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
TCEFORM.tx_templavoila_tmplobj.rendertype.
addItems.mobile = Mobile version

TypoScript Setup
[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]

“...if the user goals for your mobile site are
more limited in scope than its desktop
equivalent, then serving different content
to 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]

Contact Me:
email: jeremy@vin56.com
twitter: @jgreenawalt
www: pocketrevolutionary.com
slides: slideshare.net/jeremygreenawalt

Taking Your Website Mobile with TYPO3

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Taking Your Website Mobile with TYPO3

Editor's Notes