Taking Your Website Mobile with TYPO3 (again)


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Taking Your Website Mobile with TYPO3 (again)

  1. 1. Craft+StoryTaking Your WebsiteMobile with TYPO3(again)Jeremy Greenawalt
  2. 2. Craft+StoryHi.• I’m Jeremy Greenawalt• I own Craft+Story• We build products• We love mobile• I live in Texas with a beautifulwife, dog, and espresso machine• Favorite Scotches: Lagavulin andBruichladdich
  3. 3. Craft+StoryToday...• What is mobile web design?• Discovery + mobile• Design + mobile• Development + mobile
  4. 4. Craft+StoryWhat we talk about whenwe talk about mobile.
  5. 5. Craft+StoryMobile isnot...• Desktop sites squeezed(unusably) into a small browser• A limited experience• An afterthought
  6. 6. Craft+StoryOnly a mobile contextMobile isnot...
  7. 7. Craft+StoryMobileis...lots of tiny decisions that add upon a whole website
  8. 8. Craft+StoryWe push for mobile onevery project
  9. 9. Craft+StoryGood• Makes the client’s boss happy• Future-proof• Big market, fewer competitors
  10. 10. Craft+StoryBad• Change process• More expensive and takeslonger• Spend more time on eachpiece• More technical learning andskills required• More bad news about clientswacky design ideas
  11. 11. Craft+StoryDiscovery
  12. 12. Craft+StoryQuestionsto Ask• Who are we trying to reach?• What about maintenance?• Will the client need extratraining?• What is the real budget?
  13. 13. Craft+StoryWhat do we need tobuild?
  14. 14. Craft+StoryMobileAppThe Trinity Church app pullsfeeds from their TYPO3 site.
  15. 15. Craft+StoryMobileSitePLR.org manages a separatepage tree in TYPO3 for mobile.
  16. 16. Craft+StoryMobileTemplateTrinityChurch.org uses browserdetection in TYPO3 to load a separatetemplate and image resources.
  17. 17. Craft+StoryResponsiveDesignCedarLake.net
  18. 18. Craft+StoryResponsiveDesignCraftAndStory.com
  19. 19. Craft+StoryRESS• Responsive Design + ServerSide Components• Adaptive layouts for templates• Server side optimization ofcomponents
  20. 20. Craft+StoryDesign
  21. 21. Craft+StoryStaticComps• Fluid grids broke everything• Client has to “imagine” sizes• Arbitrary breakpoints• Don’t encounter real-worldproblems
  22. 22. Craft+StoryResponsivewireframe• Sketch first• Simplest HTML5 possible• CSS = Sass + frameworks +mixins• Example:• craftandstory.com/wireframe/• jeremy@craftandstory.com
  23. 23. Craft+StoryStyleTiles(ish)• Show repeating elements• Show unique elements• Demonstrate typography(headers and body)• Can be mixed and matched forfinal design
  24. 24. Craft+StoryCedarLake.net
  25. 25. Craft+StoryCraftAndStory.com
  26. 26. Craft+StoryResponsiveMockups• HTML/CSS/JavaScript• Media queries• Flexible images• Fluid grids(?)• Responsive typographyWhat?
  27. 27. Craft+StoryResponsiveMockups• Transfers directly to template• No time wasted• Shows real-world examples ofstyles and layout• Testable on devices• Shows content hierarchy inaction• Start solving real problemsWhy?
  28. 28. Craft+StoryResponsiveMockups• Start with the responsivewireframes• Update HTML with real data• Add style decisions to Sass• Create 1-2 content or sectionpages (for us)• Create home page (for decisionmakers)How?
  29. 29. Craft+StoryDevelopment
  30. 30. Craft+StoryTemplateIterations• Transfer mockup code totemplate system with fewchanges• Clean up CSS, but don’toptimize• Look for server-sideoptimizations• Look for content elements tocustomize
  31. 31. Craft+StoryTypoScriptConditions• slideshare.net/jeremygreenawalt• Useragent strings and userfunctions for TS conditions• Update images, menu,generated HTML• Mobile site redirect
  32. 32. Craft+StoryImages• SVG• Adaptive Images• Picturefill• HiSRC• Adaptive profiles• A host of other options...
  33. 33. Craft+StorySVG• Support in about 84% of activebrowsers• Vector-based images only• Might need to update graphicsprocess for editorial images• Works best for templategraphics
  34. 34. Craft+StoryAdaptiveImages• adaptive-images.com• Uses a simple JS to detectmaximum size and set a cookie• Uses GD lib to resize images tomaximum sizes• Caches resized images• Uses .htaccess to redirect allimage queries to appropriatecached images• Requires no work from editors• Based on screen-size, notbrowser or column width
  35. 35. Craft+StoryPicturefill<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. 36. Craft+StoryHiSRCJavaScript:$(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. 37. Craft+StoryAdaptiveProfiles• Handles column adjustmentsand images• Ron is coming up next
  38. 38. Craft+StoryContent Layout
  39. 39. Craft+StoryMy Job• Depends on clients (obviously)• Make a dummy-proof system• They never have to think aboutlayout of elements• Don’t need to “mobilize” theircontent
  40. 40. Craft+StoryPageLayout• HTML/CSS templates• Reasonable defaults• Adaptive profiles• Ability to override layoutdecisions
  41. 41. Craft+StoryContentElements• Extensions• Flexible Content Elements• Fluid elements• wec_contentelements
  42. 42. Craft+StoryImageSlidersFluid layout using JavaScript to resizedynamically and CSS for majortransitions.
  43. 43. Craft+StoryImageSlidersChoose scale mode (fit or fill), basesize, and images
  44. 44. Craft+StoryVideoChoose video service and locations(ID, link, local, or director)
  45. 45. Craft+StoryTLDR
  46. 46. Craft+StoryWrap-Up• Mobile design = lots of smalldecisions• Discovery + mobile = what dowe need to build?• Design + mobile = skip thecomp; go straight towireframes, style decisions, andmockups• Development + mobile =images, layout, and contentelements
  47. 47. Craft+StoryQuestions?
  48. 48. Craft+StoryContactMe:@jgreenawalt (Twitter + ADN)jeremy@craftandstory.comcraftandstory.comslideshare.net/jeremygreenawalt