Craft+StoryTaking Your WebsiteMobile with TYPO3(again)Jeremy Greenawalt
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
Craft+StoryToday...• What is mobile web design?• Discovery + mobile• Design + mobile• Development + mobile
Craft+StoryWhat we talk about whenwe talk about mobile.
Craft+StoryMobile isnot...• Desktop sites squeezed(unusably) into a small browser• A limited experience• An afterthought
Craft+StoryOnly a mobile contextMobile isnot...
Craft+StoryMobileis...lots of tiny decisions that add upon a whole website
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?
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?
Craft+StoryTemplateIterations• Transfer mockup code totemplate system with fewchanges• Clean up CSS, but don’toptimize• Look for server-sideoptimizations• Look for content elements tocustomize
Craft+StoryTypoScriptConditions• slideshare.net/jeremygreenawalt• Useragent strings and userfunctions for TS conditions• Update images, menu,generated HTML• Mobile site redirect
Craft+StoryImages• SVG• Adaptive Images• Picturefill• HiSRC• Adaptive profiles• A host of other options...
Craft+StorySVG• Support in about 84% of activebrowsers• Vector-based images only• Might need to update graphicsprocess for editorial images• Works best for templategraphics
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
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