SlideShare a Scribd company logo
1 of 30
Responsive UX
One size fits all
Hello.
•   Kirk Ballou
    CEO of TouchTitans
    Mobile Experience Studio
•   Platforms: iOS, Android,
Windows Phone, Symbian
•   Target devices:
Smartphones, Tablets and Set
Top Box
•   Mobile UX, Design and
Development
•   Mobile Monday Dallas
founder - momodfw.com

                         Our Clients
Hashtag
#FluidUX
What is Responsive UX?




The use of Media Queries, Fluid
Grids and Adaptive Layouts

Responding to the users display and
capabilities.
History of
    Responsive UX

Ethan Marcotte - Responsive Web Design
http://alistapart.com/articles/responsive-
web-design/

Luke Wroblewski - Mobile First
http://lukew.com/
Principles
Total width based on average browser size from W3c.
1280 so 1140pixels wide for browser size. Others target
960px wide.

The screen sizes you target should be based on what
your audience is using. Check your analytics.

Divide your site into columns. For each column grab
pixels wide.
285 px (left panel) / 1140 (site width) use this
percentage instead of defining the left panel as 285px
wide.

  .leftcol {
   width: 25%;
        }
Where can I use it?




    *sorry IE.
Why use it?

One URL.
M.brandname.com

One site to maintain.

Cater to the user

Utilize device capabilities
Why use it?
No Redirects for Mobile and Tablet
users.

Many brands maintain several mobile
and tablet sites.

The most overlooked benefit
Improve Load Times for mobile!
Doing it wrong

Majority of Responsive
UX sites scale desktop
size images to mobile.

Avg. desktop
connection 3-5 mps.

3G speed - 795kps
Doing it wrong
2 Megabyte download

 Desktop - 3MB/per sec
 5 second download

  Mobile - 720kb/per sec
 21 second download
Methods to avoid
 lag on mobile
Jquery Lazy loader
http://www.appelsiini.net/projects/lazyload

Default mobile size images.. switch for
desktop either via CSS3 or Javascript.

CSS Tricks 9 ways to switch images
http://css-tricks.com/css-image-
replacement/
Testing
     Performance
Web Page Test
http://www.webpagetest.org/

Pingdom
http://tools.pingdom.com/fpt/

Blaze - mobile site performance
http://www.blaze.io/mobile/
Media Queries

/* iPads (portrait and landscape)
----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles for iPad go here */
}
Media Queries -
       iPad 3
/* the ‘new’ iPads (portrait and
landscape) ----------- */
@media only screen
and (min-device-width : 1536px)
and (max-device-width : 2048px)
and (-webkit-min-device-pixel-ratio:2){
/* Styles for ‘new’ iPad go here */
}
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%;
}
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>
Fluid Grid - Browser View
Image scaling
img {
     max-width: 100%;
}

.myImg{
min-width: 60%;
}
Boston Globe
Boston Globe
Forefathers Group
FortySeven Media
Colly.com
Cleanairchallenge.com
Development Tips

Load time testing. Browser testing.

Modify interactions for the device

Take advantage of device features.
Store locator eliminated.
Code example
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.com



1
Thank you!
     Any questions?
Twitter: @kirkballou

Email: kirk.ballou@touchtitans.com

Site: http://touchtitans.com

More Related Content

What's hot

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
More Generators Tds March 2010
More Generators Tds March 2010More Generators Tds March 2010
More Generators Tds March 2010
Ann Walker Smalley
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
Four Kitchens
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
CK Yang
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
Andrelma
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
Edna17
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
emedomimgues
 
Beckett steven project4
Beckett steven project4Beckett steven project4
Beckett steven project4
Steven Beckett
 

What's hot (20)

Webworks
WebworksWebworks
Webworks
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Mobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboidMobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboid
 
Hogyan tegyük a vásárlást élménnyé egy webáruházban?
Hogyan tegyük a vásárlást élménnyé egy webáruházban?Hogyan tegyük a vásárlást élménnyé egy webáruházban?
Hogyan tegyük a vásárlást élménnyé egy webáruházban?
 
More Generators Tds March 2010
More Generators Tds March 2010More Generators Tds March 2010
More Generators Tds March 2010
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
How to build a website... the accessible way
How to build a website... the accessible wayHow to build a website... the accessible way
How to build a website... the accessible way
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Tech Talk #2: Android app performance tips
Tech Talk #2: Android app performance tipsTech Talk #2: Android app performance tips
Tech Talk #2: Android app performance tips
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Blogs como gerenciar
Blogs como gerenciarBlogs como gerenciar
Blogs como gerenciar
 
Image Generators
Image GeneratorsImage Generators
Image Generators
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
Beckett steven project4
Beckett steven project4Beckett steven project4
Beckett steven project4
 

Viewers also liked (6)

Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App. Innotech Presentation: Designing a Mobile App.
Innotech Presentation: Designing a Mobile App.
 
Fifo y lifo
Fifo y lifoFifo y lifo
Fifo y lifo
 
Fifo (First in First out)
Fifo (First in First out)Fifo (First in First out)
Fifo (First in First out)
 
Fifo
FifoFifo
Fifo
 
9.6 The First In First Out (FIFO) system
9.6 The First In First Out (FIFO) system9.6 The First In First Out (FIFO) system
9.6 The First In First Out (FIFO) system
 
Inventory management
Inventory managementInventory management
Inventory management
 

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

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal Access
Kate Walser
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 

Similar to Responsive UX - One size fits all @BigDesign conference #BigD12 (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal Access
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Device aware web frameworks for better programming
Device aware web frameworks for better programmingDevice aware web frameworks for better programming
Device aware web frameworks for better programming
 
Tips para crear aplicaciones .net maui sorprendentes.pdf
Tips para crear aplicaciones .net maui sorprendentes.pdfTips para crear aplicaciones .net maui sorprendentes.pdf
Tips para crear aplicaciones .net maui sorprendentes.pdf
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Optimizing content for the "mobile web"
Optimizing content for the "mobile web"Optimizing content for the "mobile web"
Optimizing content for the "mobile web"
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based LayoutsCIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 

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

  • 2. Hello. • Kirk Ballou CEO of TouchTitans Mobile Experience Studio • Platforms: iOS, Android, Windows Phone, Symbian • Target devices: Smartphones, Tablets and Set Top Box • Mobile UX, Design and Development • Mobile Monday Dallas founder - momodfw.com Our Clients
  • 4. What is Responsive UX? The use of Media Queries, Fluid Grids and Adaptive Layouts Responding to the users display and capabilities.
  • 5. History of Responsive UX Ethan Marcotte - Responsive Web Design http://alistapart.com/articles/responsive- web-design/ Luke Wroblewski - Mobile First http://lukew.com/
  • 6. Principles Total width based on average browser size from W3c. 1280 so 1140pixels wide for browser size. Others target 960px wide. The screen sizes you target should be based on what your audience is using. Check your analytics. Divide your site into columns. For each column grab pixels wide. 285 px (left panel) / 1140 (site width) use this percentage instead of defining the left panel as 285px wide. .leftcol { width: 25%; }
  • 7. Where can I use it? *sorry IE.
  • 8. Why use it? One URL. M.brandname.com One site to maintain. Cater to the user Utilize device capabilities
  • 9. Why use it? No Redirects for Mobile and Tablet users. Many brands maintain several mobile and tablet sites. The most overlooked benefit Improve Load Times for mobile!
  • 10.
  • 11. Doing it wrong Majority of Responsive UX sites scale desktop size images to mobile. Avg. desktop connection 3-5 mps. 3G speed - 795kps
  • 12. Doing it wrong 2 Megabyte download Desktop - 3MB/per sec 5 second download Mobile - 720kb/per sec 21 second download
  • 13. Methods to avoid lag on mobile Jquery Lazy loader http://www.appelsiini.net/projects/lazyload Default mobile size images.. switch for desktop either via CSS3 or Javascript. CSS Tricks 9 ways to switch images http://css-tricks.com/css-image- replacement/
  • 14. Testing Performance Web Page Test http://www.webpagetest.org/ Pingdom http://tools.pingdom.com/fpt/ Blaze - mobile site performance http://www.blaze.io/mobile/
  • 15. Media Queries /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles for iPad go here */ }
  • 16. Media Queries - iPad 3 /* the ‘new’ iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 1536px) and (max-device-width : 2048px) and (-webkit-min-device-pixel-ratio:2){ /* Styles for ‘new’ iPad go here */ }
  • 17. 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%; }
  • 18. 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>
  • 19. Fluid Grid - Browser View
  • 20. Image scaling img {      max-width: 100%; } .myImg{ min-width: 60%; }
  • 27. Development Tips Load time testing. Browser testing. Modify interactions for the device Take advantage of device features. Store locator eliminated.
  • 29. 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.com 1
  • 30. Thank you! Any questions? Twitter: @kirkballou Email: kirk.ballou@touchtitans.com Site: http://touchtitans.com

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n