Your SlideShare is downloading. ×
magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caDG6: Responsive DesignOne Web...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveWHY MOBILE?WHY RESPONSIVE?Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveSales: Q1 2013 vs Q1 2012Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveIDC - http://www.idc.com/getdoc.jsp?containerI...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveGlobaliPhone Sales+29%IDC - http://www.idc.com...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore Q1 2013 - “Mobile Future In F...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive1 in 3 minutes Spent Onlineis on a Mobile Devi...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive“Mobile-Only” Internet Access (US)source: Harv...
Multi Device Usagesource: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.htmlFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive?Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNative AppsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNative AppsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveConsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive$$$ConsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive$$$ $$$Cons$$$Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive<www>?Native AppsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive<www>?Native AppsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivem.website.comDedicated Mobile SitesFriday, Jun...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<Safari 6.1 on...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<Safari 5 on i...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<IE 11 on XBOX...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePros: Dedicated MobileCan have a highly optimi...
ConsBad for SEO: GoogleDoesn’t like multipleduplicated contenthttp://wtfmobileweb.com/Content Parity withDesktop can be ha...
ConsBad for SEO: GoogleDoesn’t like multipleduplicated contenthttp://wtfmobileweb.com/Content Parity withDesktop can be ha...
Responsive DesignBostonglobe.comFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEDEVICE CHOOSESB...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive DesignFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive Design“Default” ApproachLeast expen...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMOBILE FRIENDLYFUTURE FRIENDLYFriday, June 7, ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveHOW DO WEBUILD FOR THEFUTURE?Friday, June 7, 2...
RESPONSIVEDESIGNFriday, June 7, 2013
RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)Friday, June 7, 2013
RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)Friday, June 7, 2013
RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)F...
RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)P...
RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)P...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePROGRESSIVEENHANCEMENT(coding structure)Friday...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEDEVICE CHOOSESB...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL ...
Responsive: Client SideWEB SITEALL LAYOUTSALL MEDIASHARED LAYOUTSTEXT CONTENTDETECT FEATURESDEVICE CHOOSESBEST LAYOUTFrida...
Responsive: Client SideSITEBig PicturesSmall PicturesTouch Controlsxbox styledlayoutYOUTSMEDIALAYOUTSONTENTDETECT FEATURES...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProgressive EnhancementExample: Slide Showhttp...
Old Blackberry:(No Javascript)Basic ExperienceSmall ImagesFriday, June 7, 2013
Large ImagesEnhanced w/ AnimationExtra UI ElementsFriday, June 7, 2013
Large ImagesEnhanced w/ AnimationExtra UI ElementsFriday, June 7, 2013
Add Touch / SwipeRetina ImagesFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMOBILE FIRST(design strategy)Friday, June 7, 2...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile First - Design Strategyhttp://abookapar...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIFriday, Ju...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIMultipleSt...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIMultipleSt...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIFriday, June...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIMultipleStep...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIMultipleStep...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALClean UI Tasks IdentifiedFriday, June ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALClean UI Tasks IdentifiedFriday, June ...
Friday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveCONTENT STRATEGY(structured content)Friday, Ju...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile DesignDesktop DesignFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile DesignDesktop DesignContent FirstDesign...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured ContentFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Produ...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttps://vimeo.com/47171001#at=0http://responsi...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttp://karenmcgrane.com/2012/09/04/adapting-ou...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePERFORMANCE BUDGET(core value)Friday, June 7, ...
Page Load TimeSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, ...
Page Load Time0 2 4 6 8 1010410.1Seconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=...
Page Load Time0 2 4 6 8 1010410.1Seconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=...
Page Load Time0 2 4 6 8 1010410.1 InstantSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/...
Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www...
Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersSeconds“Breaking the 1000ms Time to Glass Mobile Barrier...
Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersNo Longer Able to Focus on TaskSeconds“Breaking the 1000...
Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersNo Longer Able to Focus on TaskSeconds“Breaking the 1000...
http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic(2011 Stats)Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttp://gigaom.com/2012/05/23/the-growing-epide...
Friday, June 7, 2013
PICK APERFORMANCEBENCHMARKFriday, June 7, 2013
PICK APERFORMANCEBENCHMARK3G 3-4sFriday, June 7, 2013
Performance BudgetFriday, June 7, 2013
Performance BudgetTotal File SizeNumber of AssetsFriday, June 7, 2013
Performance BudgetTotal File SizeNumber of AssetsCash in AccountFriday, June 7, 2013
Performance BudgetTotal File SizeNumber of AssetsCash in Account# of TransactionsFriday, June 7, 2013
Performance BudgetTotal File SizeNumber of AssetsCash in Account# of Transactions(Horrible extrafees over limit)Friday, Ju...
CHEAP EXPENSIVEFriday, June 7, 2013
CHEAPTextEXPENSIVESmall ImageVideo(no auto-play)Friday, June 7, 2013
CHEAPTextEXPENSIVESmall ImageBig ImageLots of SmallImages3rd party WidgitsVideo(no auto-play)Friday, June 7, 2013
Don’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
Don’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
Don’t Spend Your Budget onLow Priority Content$$$$Friday, June 7, 2013
Don’t Spend Your Budget onLow Priority Content$$$$$ $ $Friday, June 7, 2013
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4....
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNot Just a Development ProblemDesigners Contro...
12sDon’t Ignore the budget! (Fix the design)Friday, June 7, 2013
12sDon’t Ignore the budget! (Fix the design)Friday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePROCESSFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStrategies For Implementationhttp://implementi...
Conventional “Waterfall” WorkflowFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchConventional “Waterfall” WorkflowFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
DiscoveryVisual DesignCodingLaunchConventional “Waterfall” WorkflowFriday, June 7, 2013
Friday, June 7, 2013
Friday, June 7, 2013
HomeFriday, June 7, 2013
HomeCase StudyFriday, June 7, 2013
HomeCase StudyBlog ListFriday, June 7, 2013
HomeCase StudyBlog ListBlog PostFriday, June 7, 2013
HomeCase StudyBlog ListBlog PostResourcesFriday, June 7, 2013
Friday, June 7, 2013
Let’s Make that shadeof blue a bit darkerFriday, June 7, 2013
Let’s Make that shadeof blue a bit darker$!@&$@#!Friday, June 7, 2013
TIME.COM Responsive RedesignFriday, June 7, 2013
TIME.COM Responsive Redesign200+ PS CompsFriday, June 7, 2013
TIME.COM Responsive Redesign200+ PS CompsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveTIME.COM Responsive Redesignhttp://www.youtube...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveDesign 1-2 pages“Just enough to get to code”Fr...
Friday, June 7, 2013
DiscoveryLaunchFriday, June 7, 2013
DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content...
Get Team’s Feedback on real devicesFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveAgile Software DevelopmentVideo (15 min)http:/...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMany Smaller IterationsFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveBreak Down SilosMany Smaller IterationsFriday,...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveBreak Down SilosMany Smaller IterationsDeliver...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveI UNDERSTAND THESE PROCESSCHANGES ARE A LOT TO...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveLet’s Wrap it upFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveCoder’s have it easyFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveDesign(ers) Need to ChangeFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveAbandoning 20 years of websitepublishing pract...
magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMost difficult changes areorganizational - Stake...
Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
-1.4%-0.7%0%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
-1.4%-0.7%0%-0.7%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
-1.4%-0.7%0%-0.7%-1.4%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
-20%-10%0%10%20%30%40%50%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
-20%-10%0%10%20%30%40%50%-13%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
-20%-10%0%10%20%30%40%50%-13%45%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
-20%-10%0%10%20%30%40%50%-13%45%8.9%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
Friday, June 7, 2013
magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caTHANK YOUQuestions?Friday, Ju...
magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caTHANK YOUQuestions?(In case s...
Upcoming SlideShare
Loading in...5
×

Responsive Design For Publishers: What it takes to make Mobile-Friendly, Future-Friendly Websites.

4,186

Published on

Responsive Design alone doesn't create great mobile experiences. We need to combine other ideas together to make mobile friendly, future friendly websites. This "code free" presentation outlines how ideas like mobile first, progressive enhancement, Structured Content, and Performance budgets are all important components for building websites that support current devices along with future ones.

---
Originally Presented at Magnet 2013 - Canadian Magazine Publisher's Conference. "Responsive Design - One website for Many Devices"
---

Video recording of the session: http://www.slideshare.net/afoster0/responsive-design-for-publishers-what-it-takes-to-get-mobile-friendly-future-friendly

Published in: Design, Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,186
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Design For Publishers: What it takes to make Mobile-Friendly, Future-Friendly Websites."

  1. 1. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caDG6: Responsive DesignOne Website for Many DevicesAidan Foster - Project Manager & Responsive Design SpecialistFriday, June 7, 2013
  2. 2. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  3. 3. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveWHY MOBILE?WHY RESPONSIVE?Friday, June 7, 2013
  4. 4. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future In Focus”Canadian Internet UsageFriday, June 7, 2013
  5. 5. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future In Focus”Canadian Internet UsageFriday, June 7, 2013
  6. 6. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future In Focus”Canadian Internet UsageAvg 41.3 hrs / month#2 world wideFriday, June 7, 2013
  7. 7. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore 2013 - “Canada Digital Future In Focus”Canadian Internet UsageAvg 3731 pages / month#1 World WideAvg 41.3 hrs / month#2 world wideFriday, June 7, 2013
  8. 8. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveSales: Q1 2013 vs Q1 2012Friday, June 7, 2013
  9. 9. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveIDC - http://www.idc.com/getdoc.jsp?containerId=prUS24065413#Global PCshipments-18.3%Sales: Q1 2013 vs Q1 2012Friday, June 7, 2013
  10. 10. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveGlobaliPhone Sales+29%IDC - http://www.idc.com/getdoc.jsp?containerId=prUS24065413#Global PCshipments-18.3%Sales: Q1 2013 vs Q1 2012statista - http://www.statista.com/statistics/12743/worldwide-apple-iphone-sales-since-3rd-quarter-2007/Friday, June 7, 2013
  11. 11. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivesource: comScore Q1 2013 - “Mobile Future In Focus”Friday, June 7, 2013
  12. 12. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive1 in 3 minutes Spent Onlineis on a Mobile Devicesource: comScore Q1 2013 - “Mobile Future In Focus”37%63%Desktop MobileFriday, June 7, 2013
  13. 13. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive“Mobile-Only” Internet Access (US)source: Harvard Business Review / PEW Research 2012http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.htmlAccess Cellular Internet (All)Primarily Use Mobile (All)Primarily Use Mobile (18-34)30% 60%45%34%55%Friday, June 7, 2013
  14. 14. Multi Device Usagesource: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.htmlFriday, June 7, 2013
  15. 15. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  16. 16. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive?Friday, June 7, 2013
  17. 17. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNative AppsFriday, June 7, 2013
  18. 18. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNative AppsFriday, June 7, 2013
  19. 19. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsFriday, June 7, 2013
  20. 20. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsFriday, June 7, 2013
  21. 21. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
  22. 22. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
  23. 23. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProsChimeNew ContentFriday, June 7, 2013
  24. 24. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveConsFriday, June 7, 2013
  25. 25. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive$$$ConsFriday, June 7, 2013
  26. 26. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive$$$ $$$Cons$$$Friday, June 7, 2013
  27. 27. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive<www>?Native AppsFriday, June 7, 2013
  28. 28. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractive<www>?Native AppsFriday, June 7, 2013
  29. 29. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivem.website.comDedicated Mobile SitesFriday, June 7, 2013
  30. 30. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  31. 31. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  32. 32. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<Safari 6.1 on OSX>Friday, June 7, 2013
  33. 33. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  34. 34. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  35. 35. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<Safari 5 on iOS>Friday, June 7, 2013
  36. 36. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  37. 37. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITEFriday, June 7, 2013
  38. 38. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveServer SideDESKTOPSITEMOBILESITE<IE 11 on XBOX ONE???>?Friday, June 7, 2013
  39. 39. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePros: Dedicated MobileCan have a highly optimized UIPerformancerelated: http://www.queness.com/post/13899/which-is-better-dedicated-or-responsive-mobile-designaFriday, June 7, 2013
  40. 40. ConsBad for SEO: GoogleDoesn’t like multipleduplicated contenthttp://wtfmobileweb.com/Content Parity withDesktop can be hardCost (multiple sites)Friday, June 7, 2013
  41. 41. ConsBad for SEO: GoogleDoesn’t like multipleduplicated contenthttp://wtfmobileweb.com/Content Parity withDesktop can be hardCost (multiple sites)Friday, June 7, 2013
  42. 42. Responsive DesignBostonglobe.comFriday, June 7, 2013
  43. 43. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
  44. 44. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
  45. 45. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIAFriday, June 7, 2013
  46. 46. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEDEVICE CHOOSESBEST LAYOUTALL LAYOUTSALL MEDIAFriday, June 7, 2013
  47. 47. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive DesignFriday, June 7, 2013
  48. 48. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive Design“Default” ApproachLeast expensive way tosupport more devicesFriday, June 7, 2013
  49. 49. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  50. 50. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMOBILE FRIENDLYFUTURE FRIENDLYFriday, June 7, 2013
  51. 51. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  52. 52. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  53. 53. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  54. 54. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  55. 55. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  56. 56. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  57. 57. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  58. 58. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  59. 59. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  60. 60. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  61. 61. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  62. 62. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveHOW DO WEBUILD FOR THEFUTURE?Friday, June 7, 2013
  63. 63. RESPONSIVEDESIGNFriday, June 7, 2013
  64. 64. RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)Friday, June 7, 2013
  65. 65. RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)Friday, June 7, 2013
  66. 66. RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)Friday, June 7, 2013
  67. 67. RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)PERFORMANCE BUDGET(core value)Friday, June 7, 2013
  68. 68. RESPONSIVEDESIGNPROGRESSIVEENHANCEMENT(coding structure)MOBILE FIRST(design strategy)CONTENT STRATEGY(structured content)PERFORMANCE BUDGET(core value)Friday, June 7, 2013
  69. 69. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePROGRESSIVEENHANCEMENT(coding structure)Friday, June 7, 2013
  70. 70. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
  71. 71. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideFriday, June 7, 2013
  72. 72. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIAFriday, June 7, 2013
  73. 73. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEDEVICE CHOOSESBEST LAYOUTALL LAYOUTSALL MEDIAFriday, June 7, 2013
  74. 74. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIAFriday, June 7, 2013
  75. 75. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIAFriday, June 7, 2013
  76. 76. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIASHARED LAYOUTSTEXT CONTENTFriday, June 7, 2013
  77. 77. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIASHARED LAYOUTSTEXT CONTENTDEVICE CHOOSESBEST LAYOUTFriday, June 7, 2013
  78. 78. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveResponsive: Client SideWEB SITEALL LAYOUTSALL MEDIASHARED LAYOUTSTEXT CONTENTDETECT FEATURESDEVICE CHOOSESBEST LAYOUTFriday, June 7, 2013
  79. 79. Responsive: Client SideWEB SITEALL LAYOUTSALL MEDIASHARED LAYOUTSTEXT CONTENTDETECT FEATURESDEVICE CHOOSESBEST LAYOUTFriday, June 7, 2013
  80. 80. Responsive: Client SideSITEBig PicturesSmall PicturesTouch Controlsxbox styledlayoutYOUTSMEDIALAYOUTSONTENTDETECT FEATURESBig PicturesLOAD ONLYWHAT’S NEEDEDDEVICE CHOOSESBEST LAYOUTFriday, June 7, 2013
  81. 81. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveProgressive EnhancementExample: Slide Showhttp://abitgone.github.io/jQuery-Plugins/Carousel/Friday, June 7, 2013
  82. 82. Old Blackberry:(No Javascript)Basic ExperienceSmall ImagesFriday, June 7, 2013
  83. 83. Large ImagesEnhanced w/ AnimationExtra UI ElementsFriday, June 7, 2013
  84. 84. Large ImagesEnhanced w/ AnimationExtra UI ElementsFriday, June 7, 2013
  85. 85. Add Touch / SwipeRetina ImagesFriday, June 7, 2013
  86. 86. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMOBILE FIRST(design strategy)Friday, June 7, 2013
  87. 87. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile First - Design Strategyhttp://abookapart.com/products/mobile-firstvideo (60min) https://vimeo.com/64313805Friday, June 7, 2013
  88. 88. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)Friday, June 7, 2013
  89. 89. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIFriday, June 7, 2013
  90. 90. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIMultipleStepsSiftingContentFriday, June 7, 2013
  91. 91. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOAL(Task / Content)ClutteredUIMultipleStepsSiftingContentFriday, June 7, 2013
  92. 92. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)Friday, June 7, 2013
  93. 93. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIFriday, June 7, 2013
  94. 94. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIMultipleStepsSiftingContentFriday, June 7, 2013
  95. 95. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMY GOAL(Task / Content)ClutteredUIMultipleStepsSiftingContentFriday, June 7, 2013
  96. 96. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALFriday, June 7, 2013
  97. 97. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALClean UI Tasks IdentifiedFriday, June 7, 2013
  98. 98. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveUSER GOALClean UI Tasks IdentifiedFriday, June 7, 2013
  99. 99. Friday, June 7, 2013
  100. 100. Friday, June 7, 2013
  101. 101. Friday, June 7, 2013
  102. 102. Friday, June 7, 2013
  103. 103. Friday, June 7, 2013
  104. 104. Friday, June 7, 2013
  105. 105. Friday, June 7, 2013
  106. 106. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveCONTENT STRATEGY(structured content)Friday, June 7, 2013
  107. 107. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile DesignDesktop DesignFriday, June 7, 2013
  108. 108. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMobile DesignDesktop DesignContent FirstDesignFriday, June 7, 2013
  109. 109. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured ContentFriday, June 7, 2013
  110. 110. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  111. 111. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  112. 112. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  113. 113. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  114. 114. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  115. 115. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  116. 116. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  117. 117. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  118. 118. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStructured Content1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  119. 119. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttps://vimeo.com/47171001#at=0http://responsivedesignworkflow.com/Friday, June 7, 2013
  120. 120. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttp://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/http://www.abookapart.com/products/content-strategy-for-mobileFriday, June 7, 2013
  121. 121. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePERFORMANCE BUDGET(core value)Friday, June 7, 2013
  122. 122. Page Load TimeSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  123. 123. Page Load Time0 2 4 6 8 1010410.1Seconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  124. 124. Page Load Time0 2 4 6 8 1010410.1Seconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  125. 125. Page Load Time0 2 4 6 8 1010410.1 InstantSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  126. 126. Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  127. 127. Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  128. 128. Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersNo Longer Able to Focus on TaskSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  129. 129. Page Load Time0 2 4 6 8 1010410.1 InstantFreely MovingMind WandersNo Longer Able to Focus on TaskSeconds“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSMFriday, June 7, 2013
  130. 130. http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic(2011 Stats)Friday, June 7, 2013
  131. 131. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivehttp://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/Website Obesity Is GrowingFriday, June 7, 2013
  132. 132. Friday, June 7, 2013
  133. 133. PICK APERFORMANCEBENCHMARKFriday, June 7, 2013
  134. 134. PICK APERFORMANCEBENCHMARK3G 3-4sFriday, June 7, 2013
  135. 135. Performance BudgetFriday, June 7, 2013
  136. 136. Performance BudgetTotal File SizeNumber of AssetsFriday, June 7, 2013
  137. 137. Performance BudgetTotal File SizeNumber of AssetsCash in AccountFriday, June 7, 2013
  138. 138. Performance BudgetTotal File SizeNumber of AssetsCash in Account# of TransactionsFriday, June 7, 2013
  139. 139. Performance BudgetTotal File SizeNumber of AssetsCash in Account# of Transactions(Horrible extrafees over limit)Friday, June 7, 2013
  140. 140. CHEAP EXPENSIVEFriday, June 7, 2013
  141. 141. CHEAPTextEXPENSIVESmall ImageVideo(no auto-play)Friday, June 7, 2013
  142. 142. CHEAPTextEXPENSIVESmall ImageBig ImageLots of SmallImages3rd party WidgitsVideo(no auto-play)Friday, June 7, 2013
  143. 143. Don’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
  144. 144. Don’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
  145. 145. Don’t Spend Your Budget onLow Priority Content$$$$Friday, June 7, 2013
  146. 146. Don’t Spend Your Budget onLow Priority Content$$$$$ $ $Friday, June 7, 2013
  147. 147. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority Content$$$$$ $ $Friday, June 7, 2013
  148. 148. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority Content$$$$$ $ $Friday, June 7, 2013
  149. 149. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority Content$$$$$ $ $Friday, June 7, 2013
  150. 150. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
  151. 151. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority ContentFriday, June 7, 2013
  152. 152. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority Content$$$$Friday, June 7, 2013
  153. 153. 1. Navigation2. News / Products(2-3 products w/ call to action)3. Promoted Content(New Pricing, New Series,Download APP)4. Wishlist: Products5. Account Functions6. Social FollowDon’t Spend Your Budget onLow Priority Content$$$$Friday, June 7, 2013
  154. 154. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  155. 155. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveNot Just a Development ProblemDesigners Control theDeveloper’s RequirementsFriday, June 7, 2013
  156. 156. 12sDon’t Ignore the budget! (Fix the design)Friday, June 7, 2013
  157. 157. 12sDon’t Ignore the budget! (Fix the design)Friday, June 7, 2013
  158. 158. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  159. 159. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractivePROCESSFriday, June 7, 2013
  160. 160. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveStrategies For Implementationhttp://implementingresponsivedesign.comVideo (5 min) http://www.youtube.com/watch?v=fd_T8i0uQ2QFriday, June 7, 2013
  161. 161. Conventional “Waterfall” WorkflowFriday, June 7, 2013
  162. 162. DiscoveryVisual DesignCodingLaunchConventional “Waterfall” WorkflowFriday, June 7, 2013
  163. 163. DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
  164. 164. DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
  165. 165. DiscoveryVisual DesignCodingLaunchSite Architect / Project ManagerFriday, June 7, 2013
  166. 166. DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
  167. 167. DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
  168. 168. DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
  169. 169. DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
  170. 170. DiscoveryVisual DesignCodingLaunchUX / Design TeamFriday, June 7, 2013
  171. 171. DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
  172. 172. DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
  173. 173. DiscoveryVisual DesignCodingLaunchDevelopers / QAFriday, June 7, 2013
  174. 174. DiscoveryVisual DesignCodingLaunchConventional “Waterfall” WorkflowFriday, June 7, 2013
  175. 175. Friday, June 7, 2013
  176. 176. Friday, June 7, 2013
  177. 177. HomeFriday, June 7, 2013
  178. 178. HomeCase StudyFriday, June 7, 2013
  179. 179. HomeCase StudyBlog ListFriday, June 7, 2013
  180. 180. HomeCase StudyBlog ListBlog PostFriday, June 7, 2013
  181. 181. HomeCase StudyBlog ListBlog PostResourcesFriday, June 7, 2013
  182. 182. Friday, June 7, 2013
  183. 183. Let’s Make that shadeof blue a bit darkerFriday, June 7, 2013
  184. 184. Let’s Make that shadeof blue a bit darker$!@&$@#!Friday, June 7, 2013
  185. 185. TIME.COM Responsive RedesignFriday, June 7, 2013
  186. 186. TIME.COM Responsive Redesign200+ PS CompsFriday, June 7, 2013
  187. 187. TIME.COM Responsive Redesign200+ PS CompsFriday, June 7, 2013
  188. 188. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveTIME.COM Responsive Redesignhttp://www.youtube.com/watch?v=X7YZXgGs6oA&list=PLAcXjRKDmFScQ6LdW_oDvcnvMGgweMRd3Friday, June 7, 2013
  189. 189. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveDesign 1-2 pages“Just enough to get to code”Friday, June 7, 2013
  190. 190. Friday, June 7, 2013
  191. 191. DiscoveryLaunchFriday, June 7, 2013
  192. 192. DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
  193. 193. DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
  194. 194. DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
  195. 195. DiscoveryVisual Design CodingLaunchReviewFriday, June 7, 2013
  196. 196. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  197. 197. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  198. 198. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  199. 199. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  200. 200. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  201. 201. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  202. 202. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  203. 203. DiscoveryVisual Design CodingLaunchReview1. Navigation2. News / Products(2-3 products w/ call toaction)3. Promoted Content(New Pricing, NewSeries, Download APP)4. Wishlist: Products5. Account Functions6. Social FollowFriday, June 7, 2013
  204. 204. Get Team’s Feedback on real devicesFriday, June 7, 2013
  205. 205. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveAgile Software DevelopmentVideo (15 min)http://www.youtube.com/watch?v=502ILHjX9EE&list=FLJrbylC1-rtzJ1emF8EsNwAFriday, June 7, 2013
  206. 206. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  207. 207. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMany Smaller IterationsFriday, June 7, 2013
  208. 208. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveBreak Down SilosMany Smaller IterationsFriday, June 7, 2013
  209. 209. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveBreak Down SilosMany Smaller IterationsDeliverables will not be “perfect”Friday, June 7, 2013
  210. 210. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  211. 211. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveI UNDERSTAND THESE PROCESSCHANGES ARE A LOT TO TAKE INIT WAS HARD FOR ME TOOFriday, June 7, 2013
  212. 212. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveLet’s Wrap it upFriday, June 7, 2013
  213. 213. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveCoder’s have it easyFriday, June 7, 2013
  214. 214. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveDesign(ers) Need to ChangeFriday, June 7, 2013
  215. 215. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveFriday, June 7, 2013
  216. 216. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveAbandoning 20 years of websitepublishing practices is not easyFriday, June 7, 2013
  217. 217. magnet.magazinescanada.ca @MagNetCanada #MagNet13aidan foster - @finteractiveMost difficult changes areorganizational - Stakeholders &Management TeamsAbandoning 20 years of websitepublishing practices is not easyFriday, June 7, 2013
  218. 218. Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
  219. 219. -1.4%-0.7%0%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
  220. 220. -1.4%-0.7%0%-0.7%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
  221. 221. -1.4%-0.7%0%-0.7%-1.4%Weekday SundayUS News Distribution Oct 2012-April 2013Friday, June 7, 2013
  222. 222. Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
  223. 223. -20%-10%0%10%20%30%40%50%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
  224. 224. -20%-10%0%10%20%30%40%50%-13%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
  225. 225. -20%-10%0%10%20%30%40%50%-13%45%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
  226. 226. -20%-10%0%10%20%30%40%50%-13%45%8.9%Weekday circulation April 2012-April 2013Print Digital TotalFriday, June 7, 2013
  227. 227. Friday, June 7, 2013
  228. 228. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caTHANK YOUQuestions?Friday, June 7, 2013
  229. 229. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13@finteractivelinkedin.responsivedesign.caTHANK YOUQuestions?(In case something comes up later...)Friday, June 7, 2013

×