A1 Accessibility Inclusiveness Mobile Web

  • 1,504 views
Uploaded on

As more and more people turn to smartphones to access the web, institutional web managers are presented with a number of challenges. …

As more and more people turn to smartphones to access the web, institutional web managers are presented with a number of challenges.

In this session we will examine the role of the mobile web versus apps, and how - we can begin to form a solution - by focusing on the needs of our users, combined with the principles of responsive design.

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Accessibility, Inclusiveness and the Mobile Web Institutional Web Managers Workshop 2011http://www.flickr.com/photos/emayoh/3452555292/ CC BY-NC
  • 2. What is accessibility?“Accessibility is treating everyone, no matter what their abilitythe same.” - TOM HUGHES-CROUCHER 1. We need to extend the definition of accessibility. 2. To consider all the access needs of an audience. 3. Audiences with different devices and connection speeds. 4. When we do this, we begin to think in a truly inclusive way.25: Accessibility Basics (Hughes-Croucher, 2008)
  • 3. Why is the mobile web important?1. Massive increase in the use of smartphones.2. People regularly browser the web, using their smartphone.3. ‘Internet access via.. mobile phone (in some countries)...outpaces wireless access from a... PC’Mobile Phones Could Soon Rival the PC As the World’s Dominant Internet Platform (Wright, 2006)
  • 4. We’re not talking about... A manufacturer or device.http://www.flickr.com/photos/bas-boerman/4679839422
  • 5. We’re talking about... The needs of your audience.http://www.flickr.com/photos/brandoncwarren/5819368603 CC BY-NC
  • 6. Focus on what’s important.1. The audience and what they want to achieve.2. The content they need to be served.3. The functionality which will help them achieve their goals.4. Most appropriate technology to achieve this.5. Implement web standards.6.Create an inclusive approach.
  • 7. University websitehttp://xkcd.com/773/ CC BY-NC
  • 8. The importance of context?“ If you’re a blockbuster movie, desktop users probably want an immersive experience, includingtrailers and production details. On mobile, they probably just want to know... the nearest theater(and)... showing (time) ”- JEFF CROFT 1. Agree with Jeff’s comments to degree. 2. However, we can’t imply context from a device. 3. Although we can make certain assumptions. 4. Which will benefit users regardless of the device. 5. Focus on what’s important to audience. 6. Lightweight.On “Responsive Web Design” and the Mobile Context (Croft, 2010)
  • 9. Vital statistics! “ 35 percent of US Android/iPhone users interact with non-voice applications... before getting out of bed.” From Apps To Everyday Situations (Ericsson, 2011) 25: Accessibilhttp://www.flickr.com/photos/hckyso/2173442792 CC BY-NC
  • 10. Vital statistics! 64 percent of US Android/iPhone users interact with non-voice applications in the late evening” From Apps To Everyday Situations (Ericsson, 2011)http://www.flickr.com/photos/sparktography/74973169 CC BY-NC
  • 11. Mobile first“ One of the longest standing issues in Web design has beenthe everything including the kitchen sink problem.” - LUKE WROBLEWSKI 1. Mobile is exploding 2. Mobile forces you to focus 3. Mobile extends your capabilities.Mobile First (Wroblewski, 2009)Mobile First Helps with Big Issues (Wroblewski, 2010)
  • 12. What’s important?“ It’s no longer about patterns and standards and all abouthow (we) facilitate the users experience.” - ALLISON HOUSE 1. Identify the primary goal. 2. Group and assign value. 3. Arrange elements. 4. Be open to change.How To Arrange Interface Elements (House, 2011)
  • 13. Approaches to the Mobile web.Mobile stylesheets.Mobile only websites.Responsive websites.Native phone apps.http://www.flickr.com/photos/28634332@N05/5413389700/ CC BY-NC
  • 14. The answer? Responsive web design.http://www.flickr.com/photos/brandoncwarren/5797967542 CC BY-NC
  • 15. What is responsive design?“We can craft sites that are not only... flexible... (they) adapt tothe media that renders them.” - ETHAN MARCOTTEThe ingredients: 1. A flexible, grid-based layout 2. Flexible images and media. 3. Media queriesResponsive Design (Marcotte, 2010)
  • 16. How does it work?1. target ÷ content = result2. img { max-width: 100% }3. media queries
  • 17. Target ÷ content = results 960 p!"#$ 633 p!"#$ 306 p!"#$ 633 ÷ 960 = 65.9375% 306 ÷ 960 = 31.875%
  • 18. img { max-width: 100% }
  • 19. Resolution breakpoints. Screen size Description 320 pixels For small screen devices, like phones, held in portrait mode. 480 pixels  For small screen devices, like phones, held in landscape mode.  Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook 600 pixels (600×1024), held in portrait mode. 768 pixels   Ten-inch tablets like the iPad (768×1024) held in portrait mode. Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, 1024 pixels netbook, and desktop displays. 1200 pixels    For widescreen displays, primarily laptop and desktop browsers. Marcotte, (2011 pp.158-159)
  • 20. Examples of responsive design.
  • 21. Browser support for media queries. Chrome Internet Explorer 9 Firefox 3.5+ Safari 3+ Opera 7+ + + Mobile Webkit Opera Mobile
  • 22. Native apps Vs. Mobile web?“There is no debate at all. The mobile Web is not going to dieand app stores are not going anywhere. ” - DAN ROWINSKI 1. Native apps Vs. Mobile - false dichotomy. 2. Decision should be based on the needs of your audience. 3. And best technological fit. 4. Mobile web and apps have different purposes.Web vs. Native Mobile App? Forrester Says Do Both (Rowinski, 2011)
  • 23. Bring it all together (sort of).“Not every mobile device will have your app on it but everymobile will have a browser.”- JASON GRIGSBY @GRIGS
  • 24. SpeakersRichard Prowse BSc (Hons) Sharon Steeples BA (Hons)Richard Prowse is a graduate of the University of Leicester and now works as Sharon Steeples started work in the Web and Learning Technology office at theproject team leader and web developer at Bournemouth University, delivering the University of Essex in 2001. Working as part of a team, her responsibilities includeduniversitys new content management system and corporate website. maintenance and development of the University corporate pages, Web site design, Web support and Web related training for staff.Richard is a creative technologist: passionate about higher education, webstandards, user experience and technology. He was recently shortlisted for BUs Since 2008, Sharon has worked for the "Dark Side", (a.k.a. ManagementVice-Chancellors Unsung Hero of the Year, 2011 for his contribution to the Information Systems) as a Web Analyst Programmer, and therefore has a uniqueuniversitys web development. perspective on the opportunities of MIS/Web team collaborative working. Her special interests are the Mobile Web, ASP.Net, and CSS. Sharon is addicted to gadgets and kittens, and was a professional London theatre director before settlingWeb Developer at Bournemouth University down to her life in Essex.rprowse@bournemouth.ac.uktwitter @richprowse Web Analyst Programmer at University of Essex sharon@essex.ac.uk twitter @sharonsteeples
  • 25. References.Croff, J., 2010. On “Responsive Web Design” and the Mobile Context [online] Available at: <http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/> [Accessed 22 July 2011].Ericsson., 2011. From Apps To Everyday Situations [online] Available at: <http://www.ericsson.com/res/docs/2011/silicon_valley_brochure_letter.pdf > [Accessed 22 July2011].House, H., 2011. How To Arrange Interface Elements. [online] Available at: <http://thinkvitamin.com/design/how-to-arrange-interface-elements-4/> [Accessed 22 July2011].Hughes-Croucher, T., 2008. 25: Accessibility Basics. [online] Available at: <http://dev.opera.com/articles/view/25-accessibility-basics/> [Accessed 22 July 2011].Marcotte, E., 2011 Responsive Design [online] Available at: ,http://www.alistapart.com/articles/responsive-web-design/ > [Accessed 22 July 2011].Marcotte, E., 2010. Responsive Web Design. New York: A Book Apart.Rowinski, D., 2011. Web vs. Native Mobile App? Forrester Says Do Both. [online] Available at: <http://www.readwriteweb.com/archives/web_vs_native_mobile_app_forrester_says_do_both.php> [Accessed 22 July 2011].Wright. A., 2006. Mobile Phones Could Soon Rival the PC As World’s Dominant Internet Platform [online] Available at <http://www.ipsos-na.com/news-polls/pressrelease.aspx?id=3049> [Accessed 22 July 2011]/Wroblewski, L., 2009. Mobile First. [online] Available at <http://www.lukew.com/ff/entry.asp?933> [Accessed 22 July 2011].Wroblewski, L., 2010. Mobile First Helps with Big Issues. [online] Available at <http://www.lukew.com/ff/entry.asp?1117> [Accessed 22 July 2011].