Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Taking Your Website Mobile with TYPO3 (again)
Similaire à Taking Your Website Mobile with TYPO3 (again) (20)
Dernier
Dernier (20)
Taking Your Website Mobile with TYPO3 (again)
- 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
- 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.
- 19. Craft+Story RESS • Responsive Design + Server Side Components • Adaptive layouts for templates • Server side optimization of components
- 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
- 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?
- 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
- 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
- 48. Craft+Story Contact Me: @jgreenawalt (Twitter + ADN) jeremy@craftandstory.com craftandstory.com slideshare.net/jeremygreenawalt