Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

3,345 views

Published on

Published in: Technology, Design
  • Be the first to comment

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

  1. Responsive UXOne size fits all
  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. Hashtag#FluidUX
  4. What is Responsive UX?The use of Media Queries, FluidGrids and Adaptive LayoutsResponding to the users display andcapabilities.
  5. History of Responsive UXEthan Marcotte - Responsive Web Designhttp://alistapart.com/articles/responsive-web-design/Luke Wroblewski - Mobile Firsthttp://lukew.com/
  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. Where can I use it? *sorry IE.
  8. Why use it?One URL.M.brandname.comOne site to maintain.Cater to the userUtilize device capabilities
  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. Doing it wrongMajority of ResponsiveUX sites scale desktopsize images to mobile.Avg. desktopconnection 3-5 mps.3G speed - 795kps
  11. Doing it wrong2 Megabyte download Desktop - 3MB/per sec 5 second download Mobile - 720kb/per sec 21 second download
  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. Testing PerformanceWeb Page Testhttp://www.webpagetest.org/Pingdomhttp://tools.pingdom.com/fpt/Blaze - mobile site performancehttp://www.blaze.io/mobile/
  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. 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. 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. 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. Fluid Grid - Browser View
  19. Image scalingimg {     max-width: 100%;}.myImg{min-width: 60%;}
  20. Boston Globe
  21. Boston Globe
  22. Forefathers Group
  23. FortySeven Media
  24. Colly.com
  25. Cleanairchallenge.com
  26. Development TipsLoad time testing. Browser testing.Modify interactions for the deviceTake advantage of device features.Store locator eliminated.
  27. Code example
  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. Thank you! Any questions?Twitter: @kirkballouEmail: kirk.ballou@touchtitans.comSite: http://touchtitans.com

×