Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Taking Your Website Mobile with TYPO3 (again
Ähnlich wie Taking Your Website Mobile with TYPO3 (again (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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