SlideShare uma empresa Scribd logo
1 de 47
Dr. Yeliz Yesilada Human Centred Web Lab (HCW) Information Management Group University of Manchester, UK Developing and Delivering Content for Mobile Web
This Talk has…. ,[object Object],[object Object],[object Object],[object Object]
PART I:  Mobile Web: Opportunities and Challenges
Surf…Surf…Surf…Surf Super surfers oust couch potatoes!!!
Where is the Web? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
So Web is mobile …one Web… ,[object Object],[object Object]
From a Browser’s Perspective:  Opera Mini ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],See: http://www.opera.com/mobile_report/2008/09/
Is the Web Really Mobile? Small Screen Limited Battery Cost!! No mouse Small keypad Limited memory Limited CPU
Is the Web Really Mobile?
Challenges…. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PART 2:  Technical Solutions
What can we do? ,[object Object],[object Object],[object Object]
Option 1: Do nothing!  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Option 2: Separate Mobile Site  ,[object Object],[object Object],[object Object],[object Object],[object Object]
Option 3: One Site for All  ,[object Object],[object Object],[object Object]
Comparing Options One Site for All! Separate site! Do nothing!    User experience    Context aware    Usable content    Useful content High High Low Cost for designer Low Low High Cost for user
Best Option! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PART 3:  Hands on Session
Mobile Web Best Practices ,[object Object],[object Object]
About the World Wide Web Consortium (W3C) ,[object Object]
Mobile Web Best Practices ,[object Object],[object Object],[object Object]
(1) Design for One Web Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.
(1) Design for One Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
(2) Rely on Web Standards ,[object Object]
(2) Rely on Web Standards ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
(3) Stay Away from Known  Hazards ,[object Object]
(3) Stay Away from Known  Hazards ,[object Object]
(4) Be cautious of device  limitations ,[object Object],[object Object]
(4) Be cautious of device  limitations ,[object Object],[object Object],[object Object]
(5) Optimize navigation ,[object Object]
(5) Optimize navigation “ [BALANCE]  Take into account the trade-off between having having too many links on a page and asking the user to follow too many links to reach what they are looking for. ”
(6) Checks graphics & colors Images, colors, and style brighten content, but require care: device may have low-contrast screen or may not support some formats.
(6) Checks graphics & colors “ [BACKGROUND IMAGE READABILITY]  When using background images make sure that content remains readable on the device. ”
(7) Keep it small Smaller sites make users happier by costing less in time and money.
(7) Keep it small “ [PAGE SIZE LIMIT]  Ensure that the overall size of page is appropriate to the memory limitations of the device.
(8) Use the network sparingly ,[object Object]
(8) Use the network sparingly ,[object Object],[object Object]
(9) Help & guide user input ,[object Object]
(9) Help & guide user input ,[object Object],[object Object],[object Object]
(10) Think of users on the go ,[object Object]
(10) Think of users on the go “ [SUITABLE]  Ensure that content is suitable for use in a mobile context.
PART 4:  Good Design Benefits All
Best Practice Benefits All! ,[object Object],[object Object],[object Object],[object Object]
Common User Experiences http://www.w3.org/WAI/mobile/experiences Limited keyboard and mouse Motor disability Free text entry, long text Noisy and public places Deaf or hard of hearing  Audio only prompts (e.g., errors, warnings) Poor lighting (sunny day), limited device Color-blind or visually disabled people Information conveyed using color Mobile Context Disability Context Content
Conclusions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Acknowledgement ,[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile AnymoreETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile AnymorePaul Hibbitts
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingTechWell
 
Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective
 Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective
Canada MoodleMoot 2013 - Mobile Learning: A User Experience PerspectivePaul Hibbitts
 
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...Paul Hibbitts
 
Introduction to mobile accessibility
Introduction to mobile accessibilityIntroduction to mobile accessibility
Introduction to mobile accessibilityJon Gibbins
 
Summary Guidelines
Summary GuidelinesSummary Guidelines
Summary Guidelinestwoplayer
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsAidan Tierney
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
One Laptop Per Child Project3224dewe
One Laptop Per Child Project3224deweOne Laptop Per Child Project3224dewe
One Laptop Per Child Project3224deweu083133
 

Mais procurados (11)

Test your website for Web Accessibility
Test your website for  Web AccessibilityTest your website for  Web Accessibility
Test your website for Web Accessibility
 
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile AnymoreETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility Testing
 
Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective
 Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective
Canada MoodleMoot 2013 - Mobile Learning: A User Experience Perspective
 
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course...
 
Introduction to mobile accessibility
Introduction to mobile accessibilityIntroduction to mobile accessibility
Introduction to mobile accessibility
 
Summary Guidelines
Summary GuidelinesSummary Guidelines
Summary Guidelines
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & Trends
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
One Laptop Per Child Project3224dewe
One Laptop Per Child Project3224deweOne Laptop Per Child Project3224dewe
One Laptop Per Child Project3224dewe
 

Destaque

Prosumers And Accessibility: How to Ensure a Productive Interaction
Prosumers And Accessibility: How to Ensure a Productive InteractionProsumers And Accessibility: How to Ensure a Productive Interaction
Prosumers And Accessibility: How to Ensure a Productive InteractionYeliz Yesilada
 
Understanding Web Accessibility and Its Drivers
Understanding Web Accessibility and Its DriversUnderstanding Web Accessibility and Its Drivers
Understanding Web Accessibility and Its DriversYeliz Yesilada
 
Accessible and Mobile Web: Same Problems, Same Solutions?
Accessible and Mobile Web: Same Problems, Same Solutions?Accessible and Mobile Web: Same Problems, Same Solutions?
Accessible and Mobile Web: Same Problems, Same Solutions?Yeliz Yesilada
 
Hypertext 2015 Conference Introduction
Hypertext 2015 Conference IntroductionHypertext 2015 Conference Introduction
Hypertext 2015 Conference IntroductionYeliz Yesilada
 
A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...Yeliz Yesilada
 

Destaque (7)

Prosumers And Accessibility: How to Ensure a Productive Interaction
Prosumers And Accessibility: How to Ensure a Productive InteractionProsumers And Accessibility: How to Ensure a Productive Interaction
Prosumers And Accessibility: How to Ensure a Productive Interaction
 
Englesiz bilisim-2012
Englesiz bilisim-2012Englesiz bilisim-2012
Englesiz bilisim-2012
 
W4A2015
W4A2015W4A2015
W4A2015
 
Understanding Web Accessibility and Its Drivers
Understanding Web Accessibility and Its DriversUnderstanding Web Accessibility and Its Drivers
Understanding Web Accessibility and Its Drivers
 
Accessible and Mobile Web: Same Problems, Same Solutions?
Accessible and Mobile Web: Same Problems, Same Solutions?Accessible and Mobile Web: Same Problems, Same Solutions?
Accessible and Mobile Web: Same Problems, Same Solutions?
 
Hypertext 2015 Conference Introduction
Hypertext 2015 Conference IntroductionHypertext 2015 Conference Introduction
Hypertext 2015 Conference Introduction
 
A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...A Web Design Framework for Improved Accessibility for People with Disabilitie...
A Web Design Framework for Improved Accessibility for People with Disabilitie...
 

Semelhante a Public Sector Talk by Yeliz Yesilada

Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Henny Swan
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsersArpan Baishya
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingGreg SHIN
 
How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsWoody Pewitt
 
Building Mobile Friendly Websites
Building Mobile Friendly WebsitesBuilding Mobile Friendly Websites
Building Mobile Friendly WebsitesCittrex
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile webChris Love
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicitymStoner, Inc.
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meetbrucelawson
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug Gapinski
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions Sachin Bhosale
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationTom Deryckere
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdfTECHCENTRAL3
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computingguestc37919f
 

Semelhante a Public Sector Talk by Yeliz Yesilada (20)

mobile browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?
 
Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsers
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross Browsing
 
How To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile ClientsHow To Create Web Sites For Mobile Clients
How To Create Web Sites For Mobile Clients
 
Building Mobile Friendly Websites
Building Mobile Friendly WebsitesBuilding Mobile Friendly Websites
Building Mobile Friendly Websites
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile web
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Mobile Cloud Computing
Mobile Cloud ComputingMobile Cloud Computing
Mobile Cloud Computing
 

Public Sector Talk by Yeliz Yesilada

  • 1. Dr. Yeliz Yesilada Human Centred Web Lab (HCW) Information Management Group University of Manchester, UK Developing and Delivering Content for Mobile Web
  • 2.
  • 3. PART I: Mobile Web: Opportunities and Challenges
  • 5.
  • 6.
  • 7.
  • 8. Is the Web Really Mobile? Small Screen Limited Battery Cost!! No mouse Small keypad Limited memory Limited CPU
  • 9. Is the Web Really Mobile?
  • 10.
  • 11. PART 2: Technical Solutions
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. Comparing Options One Site for All! Separate site! Do nothing!    User experience    Context aware    Usable content    Useful content High High Low Cost for designer Low Low High Cost for user
  • 17.
  • 18. PART 3: Hands on Session
  • 19.
  • 20.
  • 21.
  • 22. (1) Design for One Web Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. (5) Optimize navigation “ [BALANCE] Take into account the trade-off between having having too many links on a page and asking the user to follow too many links to reach what they are looking for. ”
  • 32. (6) Checks graphics & colors Images, colors, and style brighten content, but require care: device may have low-contrast screen or may not support some formats.
  • 33. (6) Checks graphics & colors “ [BACKGROUND IMAGE READABILITY] When using background images make sure that content remains readable on the device. ”
  • 34. (7) Keep it small Smaller sites make users happier by costing less in time and money.
  • 35. (7) Keep it small “ [PAGE SIZE LIMIT] Ensure that the overall size of page is appropriate to the memory limitations of the device.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41. (10) Think of users on the go “ [SUITABLE] Ensure that content is suitable for use in a mobile context.
  • 42. PART 4: Good Design Benefits All
  • 43.
  • 44. Common User Experiences http://www.w3.org/WAI/mobile/experiences Limited keyboard and mouse Motor disability Free text entry, long text Noisy and public places Deaf or hard of hearing Audio only prompts (e.g., errors, warnings) Poor lighting (sunny day), limited device Color-blind or visually disabled people Information conveyed using color Mobile Context Disability Context Content
  • 45.
  • 46.
  • 47.

Notas do Editor

  1. In this talk we will talk about mobile Web and how to design pages for mobile Web. By the end of today, you will be familiar with the mobile Web design and you will learn better insights. Who here design Web sites? Have you used the mobile Web? Who here designs or codes Mobile Web sites? D o we need a mobile site now phones can view the “ n ormal web”?