Sustainable Strategies for The Mobile Web
Upcoming SlideShare
Loading in...5
×
 

Sustainable Strategies for The Mobile Web

on

  • 2,812 views

 

Statistics

Views

Total Views
2,812
Views on SlideShare
2,798
Embed Views
14

Actions

Likes
5
Downloads
32
Comments
2

5 Embeds 14

http://paper.li 6
http://www.linkedin.com 3
http://a0.twimg.com 2
http://us-w1.rockmelt.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sustainable Strategies for The Mobile Web Sustainable Strategies for The Mobile Web Presentation Transcript

  • Sustainablestrategies for themobile web
  • This session
  • Strategy,not <code />.
  • Designers &developers beware.
  • Internets, not intranets.
  • Slides available online.
  • About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora / linkedin / etc.
  • OverviewPresent Challenges of the traditional model.FutureWhyHowMobile firstBut
  • OverviewPresentFuture A responsive alternative.WhyHowMobile firstBut
  • OverviewPresentFutureWhy The benefits of a universal web.HowMobile firstBut
  • OverviewPresentFutureWhyHow A look at the techniques.Mobile firstBut
  • OverviewPresentFutureWhyHowMobile first Why you should design mobile first.But
  • OverviewPresentFutureWhyHowMobile firstBut Really? I’m Cinderella too?
  • The traditional model
  • The traditional model‘Desktop’ + ‘mobile’ version
  • The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized
  • The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized+ App
  • ChallengesContent duplication
  • ChallengesContent duplicationVersion specific links
  • ChallengesContent duplicationVersion specific linksSEO issues
  • Unsustainable costs
  • Unsustainable costsDesktop version
  • Unsustainable costsDesktop version‘Mobile’ version
  • Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized version
  • Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) version
  • Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)
  • Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?
  • Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?Internet enabled fridge version?
  • You want updates with that?(I know, you get the point).
  • Don’t assume contextfrom device.
  • There is no mobile web.(But it makes for greatpresentation titles).
  • @stephenhay“There is no Mobile Web. There is only The Web,which we view in different ways. There is also noDesktop Web. Or Tablet Web. Thank you.”
  • The words we useinfluence our thinking.
  • The alternative approach
  • Aim for universal access.
  • Make no assumptions.Or try not to.That goes for accesibility too.
  • Design and build foreverything in between.
  • Design and build foreverything in between.Including the next device.
  • Lancaster University
  • Wide screen
  • Narrow
  • Tablet sized
  • Smartphone
  • Why?
  • BenefitsReduced costs for multiple platforms.
  • BenefitsReduced costs for multiple platforms.Sustainable.
  • BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
  • BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
  • Solves our challenges.One article = one url.
  • Solves our challenges.One article = one url.Update content once.
  • Solves our challenges.One article = one url.Update content once.Maintain one platform only.
  • 34% more buzzwords perproject.Nah, not really.
  • How?
  • A combination of techniquesand web standards
  • Responsive webdesignFlexible grids
  • Responsive webdesignFlexible grids+ media queries
  • Responsive webdesignFlexible grids+ media queries+ adaptive media
  • Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
  • Adaptive webdesign?
  • A design approach
  • Design for mobile first.
  • Mobile extends yourcapabilities.
  • Mobile is exploding.
  • Mobile first provides focus.
  • Expand from that focus.
  • I’m Cindarella too, really?
  • Different context (might)require different solutions.
  • An example: The event site
  • One shoe never fits all.But try it on first.
  • You might be Cindarella too.
  • More sources‘Responsive Webdesign’, Ethan Marcotte.‘Mobile First’, Luke Wroblewski.‘A New Canon’, Mark Boulton.Links online.
  • Thank you.slideshare.net/woeldiche
  • PhotosStone tablet: http://www.flickr.com/photos/mendhak/2181341370/1984: http://www.flickr.com/photos/colindunn/4229983412/Superheroes: http://www.flickr.com/photos/ari/2567524938/Why: http://www.flickr.com/photos/tonikaarttinen/5687056556/Cindarella: http://www.flickr.com/photos/tonyj1961/6047893889/Nightclub: http://www.flickr.com/photos/30691679@N07/4423432834/Another Cindarella: http://www.flickr.com/photos/tonyj1961/6036010920/
  • Responsive web designLinkshttp://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/responsive-web-design/http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
  • Mobile firstLinkshttp://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?1137http://www.lukew.com/ff/entry.asp?1393http://www.abookapart.com/products/mobile-first
  • A New CanonLinkshttp://2011.newadventuresconf.com/audio/mark.htmlhttp://vimeo.com/29991675http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts-and-grid-systems