1. Craft+Story
Taking Your Website
Mobile with TYPO3
(again)
Jeremy Greenawalt

2. Craft+Story
Hi.
• I’m Jeremy Greenawalt
• I own Craft+Story
• We build products
• We love mobile
• I live in Texas with a beautiful
wife, dog, and espresso machine
• Favorite Scotches: Lagavulin and
Bruichladdich

3. Craft+Story
Today...
• What is mobile web design?
• Discovery + mobile
• Design + mobile
• Development + mobile

4. Craft+Story
What we talk about when
we talk about mobile.

5. Craft+Story
Mobile is
not...
• Desktop sites squeezed
(unusably) into a small browser
• A limited experience
• An afterthought

6. Craft+Story
Only a mobile context
Mobile is
not...

7. Craft+Story
Mobile
is...
lots of tiny decisions that add up
on a whole website

8. Craft+Story
We push for mobile on
every project

9. Craft+Story
Good
• Makes the client’s boss happy
• Future-proof
• Big market, fewer competitors

10. Craft+Story
Bad
• Change process
• More expensive and takes
longer
• Spend more time on each
piece
• More technical learning and
skills required
• More bad news about clients
wacky design ideas

11. Craft+Story
Discovery

12. Craft+Story
Questions
to Ask
• Who are we trying to reach?
• What about maintenance?
• Will the client need extra
training?
• What is the real budget?

13. Craft+Story
What do we need to
build?

14. Craft+Story
Mobile
App
The Trinity Church app pulls
feeds from their TYPO3 site.

15. Craft+Story
Mobile
Site
PLR.org manages a separate
page tree in TYPO3 for mobile.

16. Craft+Story
Mobile
Template
TrinityChurch.org uses browser
detection in TYPO3 to load a separate
template and image resources.

17. Craft+Story
Responsive
Design
CedarLake.net

18. Craft+Story
Responsive
Design
CraftAndStory.com

19. Craft+Story
RESS
• Responsive Design + Server
Side Components
• Adaptive layouts for templates
• Server side optimization of
components

20. Craft+Story
Design

21. Craft+Story
Static
Comps
• Fluid grids broke everything
• Client has to “imagine” sizes
• Arbitrary breakpoints
• Don’t encounter real-world
problems

22. Craft+Story
Responsive
wireframe
• Sketch first
• Simplest HTML5 possible
• CSS = Sass + frameworks +
mixins
• Example:
• craftandstory.com/
wireframe/
• jeremy@craftandstory.com

23. Craft+Story
Style
Tiles(ish)
• Show repeating elements
• Show unique elements
• Demonstrate typography
(headers and body)
• Can be mixed and matched for
final design

24. Craft+Story
CedarLake.net

25. Craft+Story
CraftAndStory.com

26. Craft+Story
Responsive
Mockups
• HTML/CSS/JavaScript
• Media queries
• Flexible images
• Fluid grids(?)
• Responsive typography
What?

27. Craft+Story
Responsive
Mockups
• Transfers directly to template
• No time wasted
• Shows real-world examples of
styles and layout
• Testable on devices
• Shows content hierarchy in
action
• Start solving real problems
Why?

28. Craft+Story
Responsive
Mockups
• Start with the responsive
wireframes
• Update HTML with real data
• Add style decisions to Sass
• Create 1-2 content or section
pages (for us)
• Create home page (for decision
makers)
How?

29. Craft+Story
Development

30. Craft+Story
Template
Iterations
• Transfer mockup code to
template system with few
changes
• Clean up CSS, but don’t
optimize
• Look for server-side
optimizations
• Look for content elements to
customize

31. Craft+Story
TypoScript
Conditions
• slideshare.net/
jeremygreenawalt
• Useragent strings and user
functions for TS conditions
• Update images, menu,
generated HTML
• Mobile site redirect

32. Craft+Story
Images
• SVG
• Adaptive Images
• Picturefill
• HiSRC
• Adaptive profiles
• A host of other options...

33. Craft+Story
SVG
• Support in about 84% of active
browsers
• Vector-based images only
• Might need to update graphics
process for editorial images
• Works best for template
graphics

34. Craft+Story
Adaptive
Images
• adaptive-images.com
• Uses a simple JS to detect
maximum size and set a cookie
• Uses GD lib to resize images to
maximum sizes
• Caches resized images
• Uses .htaccess to redirect all
image queries to appropriate
cached images
• Requires no work from editors
• Based on screen-size, not
browser or column width

35. Craft+Story
Picturefill
<div data-­‐picture data-­‐alt="banner">
<div data-­‐src="small.jpg"></div>
<div data-­‐src="medium.jpg" data-­‐media="(min-­‐width: 400px)"></div>
<div data-­‐src="large.jpg" data-­‐media="(min-­‐width: 800px)"></div>
<div data-­‐src="extralarge.jpg" data-­‐media="(min-­‐width: 1000px)"></div>
<!-­‐-­‐[if (lt IE 9) & (!IEMobile)]>
<div data-­‐src="medium.jpg"></div>
<![endif]-­‐-­‐>
<!-­‐-­‐ Fallback content for non-­‐JS browsers. Same img src as the initial,
unqualified source element. -­‐-­‐>
<noscript>
<img src="external/imgs/small.jpg" alt="banner">
</noscript>
</div>
github.com/scottjehl/picturefill

36. Craft+Story
HiSRC
JavaScript:
$(document).ready(function(){
$(".hisrc img").hisrc();
})
HTML:
<h1>HiSRC Images</h1>
<div class="hisrc">
<img src="200x100.png" data-­‐1x="400x200.png" data-­‐2x="800x400.png">
</div>
<h2>Regular images</h2>
<img src="400x200.png">
github.com/teleject/hisrc

37. Craft+Story
Adaptive
Profiles
• Handles column adjustments
and images
• Ron is coming up next

38. Craft+Story
Content Layout

39. Craft+Story
My Job
• Depends on clients (obviously)
• Make a dummy-proof system
• They never have to think about
layout of elements
• Don’t need to “mobilize” their
content

40. Craft+Story
Page
Layout
• HTML/CSS templates
• Reasonable defaults
• Adaptive profiles
• Ability to override layout
decisions

41. Craft+Story
Content
Elements
• Extensions
• Flexible Content Elements
• Fluid elements
• wec_contentelements

42. Craft+Story
Image
Sliders
Fluid layout using JavaScript to resize
dynamically and CSS for major
transitions.

43. Craft+Story
Image
Sliders
Choose scale mode (fit or fill), base
size, and images

44. Craft+Story
Video
Choose video service and locations
(ID, link, local, or director)

45. Craft+Story
TLDR

46. Craft+Story
Wrap-Up
• Mobile design = lots of small
decisions
• Discovery + mobile = what do
we need to build?
• Design + mobile = skip the
comp; go straight to
wireframes, style decisions, and
mockups
• Development + mobile =
images, layout, and content
elements

47. Craft+Story
Questions?

48. Craft+Story
Contact
Me:
@jgreenawalt (Twitter + ADN)
jeremy@craftandstory.com
craftandstory.com
slideshare.net/jeremygreenawalt