0
Responsive UXOne size fits all
Hello.•   Kirk Ballou    CEO of TouchTitans    Mobile Experience Studio•   Platforms: iOS, Android,Windows Phone, Symbian•...
Hashtag#FluidUX
What is Responsive UX?The use of Media Queries, FluidGrids and Adaptive LayoutsResponding to the users display andcapabili...
History of    Responsive UXEthan Marcotte - Responsive Web Designhttp://alistapart.com/articles/responsive-web-design/Luke...
PrinciplesTotal width based on average browser size from W3c.1280 so 1140pixels wide for browser size. Others target960px ...
Where can I use it?    *sorry IE.
Why use it?One URL.M.brandname.comOne site to maintain.Cater to the userUtilize device capabilities
Why use it?No Redirects for Mobile and Tabletusers.Many brands maintain several mobileand tablet sites.The most overlooked...
Doing it wrongMajority of ResponsiveUX sites scale desktopsize images to mobile.Avg. desktopconnection 3-5 mps.3G speed - ...
Doing it wrong2 Megabyte download Desktop - 3MB/per sec 5 second download  Mobile - 720kb/per sec 21 second download
Methods to avoid lag on mobileJquery Lazy loaderhttp://www.appelsiini.net/projects/lazyloadDefault mobile size images.. sw...
Testing     PerformanceWeb Page Testhttp://www.webpagetest.org/Pingdomhttp://tools.pingdom.com/fpt/Blaze - mobile site per...
Media Queries/* iPads (portrait and landscape)----------- */@media only screenand (min-device-width : 768px)and (max-devic...
Media Queries -       iPad 3/* the ‘new’ iPads (portrait andlandscape) ----------- */@media only screenand (min-device-wid...
Fluid Grid                        CSS View.container {padding-left: 20px;padding-right: 20px;}.row {width: 100%;max-width:...
Fluid Grid                   HTML View<div class="container">	   <div class="row">	   	    <div class="onecol">	   	    	 ...
Fluid Grid - Browser View
Image scalingimg {     max-width: 100%;}.myImg{min-width: 60%;}
Boston Globe
Boston Globe
Forefathers Group
FortySeven Media
Colly.com
Cleanairchallenge.com
Development TipsLoad time testing. Browser testing.Modify interactions for the deviceTake advantage of device features.Sto...
Code example
Development and       Testing Tools    Coda    Dreamweaver CS6 - http://adobe.com    Fluid Grid Kit - http://cssgrid.net/ ...
Thank you!     Any questions?Twitter: @kirkballouEmail: kirk.ballou@touchtitans.comSite: http://touchtitans.com
Responsive UX - One size fits all   @BigDesign conference #BigD12
Upcoming SlideShare
Loading in...5
×

Responsive UX - One size fits all @BigDesign conference #BigD12

1,766

Published on

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

No Downloads
Views
Total Views
1,766
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Responsive UX - One size fits all @BigDesign conference #BigD12"

    1. 1. Responsive UXOne size fits all
    2. 2. Hello.• Kirk Ballou CEO of TouchTitans Mobile Experience Studio• Platforms: iOS, Android,Windows Phone, Symbian• Target devices:Smartphones, Tablets and SetTop Box• Mobile UX, Design andDevelopment• Mobile Monday Dallasfounder - momodfw.com Our Clients
    3. 3. Hashtag#FluidUX
    4. 4. What is Responsive UX?The use of Media Queries, FluidGrids and Adaptive LayoutsResponding to the users display andcapabilities.
    5. 5. History of Responsive UXEthan Marcotte - Responsive Web Designhttp://alistapart.com/articles/responsive-web-design/Luke Wroblewski - Mobile Firsthttp://lukew.com/
    6. 6. PrinciplesTotal width based on average browser size from W3c.1280 so 1140pixels wide for browser size. Others target960px wide.The screen sizes you target should be based on whatyour audience is using. Check your analytics.Divide your site into columns. For each column grabpixels wide.285 px (left panel) / 1140 (site width) use thispercentage instead of defining the left panel as 285pxwide. .leftcol { width: 25%; }
    7. 7. Where can I use it? *sorry IE.
    8. 8. Why use it?One URL.M.brandname.comOne site to maintain.Cater to the userUtilize device capabilities
    9. 9. Why use it?No Redirects for Mobile and Tabletusers.Many brands maintain several mobileand tablet sites.The most overlooked benefitImprove Load Times for mobile!
    10. 10. Doing it wrongMajority of ResponsiveUX sites scale desktopsize images to mobile.Avg. desktopconnection 3-5 mps.3G speed - 795kps
    11. 11. Doing it wrong2 Megabyte download Desktop - 3MB/per sec 5 second download Mobile - 720kb/per sec 21 second download
    12. 12. Methods to avoid lag on mobileJquery Lazy loaderhttp://www.appelsiini.net/projects/lazyloadDefault mobile size images.. switch fordesktop either via CSS3 or Javascript.CSS Tricks 9 ways to switch imageshttp://css-tricks.com/css-image-replacement/
    13. 13. Testing PerformanceWeb Page Testhttp://www.webpagetest.org/Pingdomhttp://tools.pingdom.com/fpt/Blaze - mobile site performancehttp://www.blaze.io/mobile/
    14. 14. Media Queries/* iPads (portrait and landscape)----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles for iPad go here */}
    15. 15. Media Queries - iPad 3/* the ‘new’ iPads (portrait andlandscape) ----------- */@media only screenand (min-device-width : 1536px)and (max-device-width : 2048px)and (-webkit-min-device-pixel-ratio:2){/* Styles for ‘new’ iPad go here */}
    16. 16. Fluid Grid CSS View.container {padding-left: 20px;padding-right: 20px;}.row {width: 100%;max-width: 1140px;min-width: 755px;margin: 0 auto;overflow: hidden;}.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right: 3.8%;float: left;min-height: 1px;}.row .onecol {width: 4.85%;}
    17. 17. Fluid Grid HTML View<div class="container"> <div class="row"> <div class="onecol"> <p>One column wide </p> </div> <div class="onecol"> <p>One column wide </p> </div> <div class="onecol"> <p>One column wide </p> </div> <div class="onecol"> <p>One column wide </p> </div> <div class="sixcol last"> <p>Six columns wide</p> </div> </div>
    18. 18. Fluid Grid - Browser View
    19. 19. Image scalingimg {     max-width: 100%;}.myImg{min-width: 60%;}
    20. 20. Boston Globe
    21. 21. Boston Globe
    22. 22. Forefathers Group
    23. 23. FortySeven Media
    24. 24. Colly.com
    25. 25. Cleanairchallenge.com
    26. 26. Development TipsLoad time testing. Browser testing.Modify interactions for the deviceTake advantage of device features.Store locator eliminated.
    27. 27. Code example
    28. 28. Development and Testing Tools Coda Dreamweaver CS6 - http://adobe.com Fluid Grid Kit - http://cssgrid.net/ Tiny Grid - http://tinyfluidgrid.com/ Adobe Shadow - http://labs.adobe.com1
    29. 29. Thank you! Any questions?Twitter: @kirkballouEmail: kirk.ballou@touchtitans.comSite: http://touchtitans.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×