SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
Responsive,
user driven,
mobile.

 Internet Librarian,
 Monterey, CA
 23 October, 2012

  Bill Helman and Juan-Francisco Reyes,
  University of Baltimore Langsdale
Library
                           twitter.com/pacoreyes
                           http://xentido.com
What to expect in the next 25
minutes

1.  Introduction (this slide)

2.  User Centered Design philosophy (the next few slides)

3.  Technologies and methods (what's under the hood)

4.  Responsive design in practice (screen size matters)

5.  Resources (our code on GitHub along with book and
    link suggestions)
                                                 photo by flicker user leynik
Can you build us a mobile...
"something?"




                          photo by flicker user statelibrarynsw
One-size-fits-all
does not make sense
for mobile.




             photo by flicker user jdhancock
Your community is like a snowflake.
Treat it that way.




                              photo by flicker user elifayse
1. How does this solve a problem my
users are having?

2. Does this solution makes sense in
a mobile context?




                              photo by flicker user elifayse
Do user needs assessment
on the cheap.
    •  Observations of users in the wild
    •  Whiteboard survey questions
    •  Focus groups and gamestorming




                                           photo by flicker user elifayse
Gamestorming: design the
box
Learn new skills and put them,
immediately, into practice
•    jQuery Mobile   •  ColdFusion
•    HTML5           •  XML
•    CSS3            •  Aleph
•    JavaScript
•    JSON
A list of common ingredients:
Book locator:
translating shelves
into pixels
One response to panic
screamsscreens
now test and adjust (then repeat)
Resources we used and our code

 All our code is belong to you: github.com/whelman

 Head first html5 programing.
http://www.worldcat.org/oclc/706018590

 Gamestorming: A playbook for innovators, rulebreakers,
and changemakers.
http://www.worldcat.org/oclc/471816034

 Head first mobile web.
http://www.worldcat.org/oclc/744291335

 jQuery Mobile: http://jquerymobile.com/test/ (this is an
awesome site to get you up and running)
Contact us
 and keep the conversation going.


Find this presentation at: slideshare.net/whelman


William Helman
    twitter.com/thinkpol
    http://whelman.com


Juan Francisco Reyes
   twitter.com/pacoreyes
   http://xentido.com

Más contenido relacionado

Similar a Mobile UX: Responsive Design & Tips - Internet librarian 2012

Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Mobile or immobile? (responsive design, cookies and kiosks) html5css3Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Mobile or immobile? (responsive design, cookies and kiosks) html5css3William Helman
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCChristian Heilmann
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileJeff Gothelf
 
HPAI Class 2 - human aspects and computing systems in ai - 012920
HPAI  Class 2 - human aspects and computing systems in ai - 012920HPAI  Class 2 - human aspects and computing systems in ai - 012920
HPAI Class 2 - human aspects and computing systems in ai - 012920melendez321
 
The Age of Responsive Design
The Age of Responsive DesignThe Age of Responsive Design
The Age of Responsive DesignDenise Jacobs
 
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...Sten Govaerts
 
Usability is dead...
Usability is dead...Usability is dead...
Usability is dead...James Kelway
 
CSTA2015 Blocks-based Programming: Toolboxes for Many Occasions
CSTA2015  Blocks-based Programming: Toolboxes for Many OccasionsCSTA2015  Blocks-based Programming: Toolboxes for Many Occasions
CSTA2015 Blocks-based Programming: Toolboxes for Many Occasions Josh Sheldon
 
Software Architectures, Week 1 - Monolithic Architectures
Software Architectures, Week 1 - Monolithic ArchitecturesSoftware Architectures, Week 1 - Monolithic Architectures
Software Architectures, Week 1 - Monolithic ArchitecturesAngelos Kapsimanis
 
Wits idea visualization-v0.1
Wits idea visualization-v0.1Wits idea visualization-v0.1
Wits idea visualization-v0.1riedlc
 
Rapid eLearning
Rapid eLearning Rapid eLearning
Rapid eLearning Yum Studio
 
Next Generation Media - Wolter
Next Generation Media - WolterNext Generation Media - Wolter
Next Generation Media - WolterCodemotion
 
Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!SMART DevNet
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve Poole
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve PooleDevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve Poole
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve PooleJAXLondon_Conference
 
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"Daniel Bryant
 

Similar a Mobile UX: Responsive Design & Tips - Internet librarian 2012 (20)

Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Mobile or immobile? (responsive design, cookies and kiosks) html5css3Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Mobile or immobile? (responsive design, cookies and kiosks) html5css3
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and Agile
 
HPAI Class 2 - human aspects and computing systems in ai - 012920
HPAI  Class 2 - human aspects and computing systems in ai - 012920HPAI  Class 2 - human aspects and computing systems in ai - 012920
HPAI Class 2 - human aspects and computing systems in ai - 012920
 
why agile?
why agile?why agile?
why agile?
 
Get the flash outta here
Get the flash outta hereGet the flash outta here
Get the flash outta here
 
The Age of Responsive Design
The Age of Responsive DesignThe Age of Responsive Design
The Age of Responsive Design
 
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
Towards Responsive Open Learning Environments: the ROLE Interoperability Fram...
 
Usability is dead...
Usability is dead...Usability is dead...
Usability is dead...
 
CSTA2015 Blocks-based Programming: Toolboxes for Many Occasions
CSTA2015  Blocks-based Programming: Toolboxes for Many OccasionsCSTA2015  Blocks-based Programming: Toolboxes for Many Occasions
CSTA2015 Blocks-based Programming: Toolboxes for Many Occasions
 
Software Architectures, Week 1 - Monolithic Architectures
Software Architectures, Week 1 - Monolithic ArchitecturesSoftware Architectures, Week 1 - Monolithic Architectures
Software Architectures, Week 1 - Monolithic Architectures
 
Wits idea visualization-v0.1
Wits idea visualization-v0.1Wits idea visualization-v0.1
Wits idea visualization-v0.1
 
Rapid eLearning
Rapid eLearning Rapid eLearning
Rapid eLearning
 
Next Generation Media - Wolter
Next Generation Media - WolterNext Generation Media - Wolter
Next Generation Media - Wolter
 
Mobile html5 v2
Mobile html5 v2Mobile html5 v2
Mobile html5 v2
 
Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!Webgeek Keynote: Mobile Developers Rock!
Webgeek Keynote: Mobile Developers Rock!
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
Practical Usability
Practical UsabilityPractical Usability
Practical Usability
 
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve Poole
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve PooleDevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve Poole
DevOps and the cloud: all hail the (developer) king - Daniel Bryant, Steve Poole
 
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"
JAXLondon 2015 "DevOps and the Cloud: All Hail the (Developer) King"
 

Último

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
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...Miguel Araújo
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
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 educationjfdjdjcjdnsjd
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
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 WorkerThousandEyes
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 

Último (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 

Mobile UX: Responsive Design & Tips - Internet librarian 2012

  • 1. Responsive, user driven, mobile. Internet Librarian, Monterey, CA 23 October, 2012 Bill Helman and Juan-Francisco Reyes, University of Baltimore Langsdale Library twitter.com/pacoreyes http://xentido.com
  • 2. What to expect in the next 25 minutes 1.  Introduction (this slide) 2.  User Centered Design philosophy (the next few slides) 3.  Technologies and methods (what's under the hood) 4.  Responsive design in practice (screen size matters) 5.  Resources (our code on GitHub along with book and link suggestions) photo by flicker user leynik
  • 3. Can you build us a mobile... "something?" photo by flicker user statelibrarynsw
  • 4. One-size-fits-all does not make sense for mobile. photo by flicker user jdhancock
  • 5. Your community is like a snowflake. Treat it that way. photo by flicker user elifayse
  • 6. 1. How does this solve a problem my users are having? 2. Does this solution makes sense in a mobile context? photo by flicker user elifayse
  • 7. Do user needs assessment on the cheap. •  Observations of users in the wild •  Whiteboard survey questions •  Focus groups and gamestorming photo by flicker user elifayse
  • 9. Learn new skills and put them, immediately, into practice
  • 10. •  jQuery Mobile •  ColdFusion •  HTML5 •  XML •  CSS3 •  Aleph •  JavaScript •  JSON A list of common ingredients:
  • 12. One response to panic screamsscreens
  • 13. now test and adjust (then repeat)
  • 14. Resources we used and our code All our code is belong to you: github.com/whelman Head first html5 programing. http://www.worldcat.org/oclc/706018590 Gamestorming: A playbook for innovators, rulebreakers, and changemakers. http://www.worldcat.org/oclc/471816034 Head first mobile web. http://www.worldcat.org/oclc/744291335 jQuery Mobile: http://jquerymobile.com/test/ (this is an awesome site to get you up and running)
  • 15. Contact us and keep the conversation going. Find this presentation at: slideshare.net/whelman William Helman twitter.com/thinkpol http://whelman.com Juan Francisco Reyes twitter.com/pacoreyes http://xentido.com