Accessibility, Inclusiveness

and the Mobile WebInstitutional Web Managers Workshop 2011

http://www.flickr.com/photos/emayoh/3452555292/ CC BY-NC

What is accessibility?

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)

“Accessibility is treating everyone, no matter what their ability the same.”- TOM HUGHES-CROUCHER

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)

We’re not talking about...

http://www.flickr.com/photos/bas-boerman/4679839422

A manufacturer or device.

The needs of your audience.

We’re talking about...

http://www.flickr.com/photos/brandoncwarren/5819368603 CC BY-NC

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.

University website

http://xkcd.com/773/ CC BY-NC

The importance of context?

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)

“ If you’re a blockbuster movie, desktop users probably want an immersive experience, including trailers and production details. On mobile, they probably just want to know... the nearest theater (and)... showing (time) ”- JEFF CROFT

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)

http://www.flickr.com/photos/hckyso/2173442792 CC BY-NC

25: Accessibility Basics (Hughes-Croucher, 2008)

Vital statistics! 64 percent of US Android/iPhone users interact with non-voice applications in the late evening”

http://www.flickr.com/photos/sparktography/74973169 CC BY-NC

From Apps To Everyday Situations (Ericsson, 2011)

Mobile first

1. Mobile is exploding2. Mobile forces you to focus3. Mobile extends your capabilities.

“ One of the longest standing issues in Web design has been the everything including the kitchen sink problem.”- LUKE WROBLEWSKI

Mobile First (Wroblewski, 2009)

Mobile First Helps with Big Issues (Wroblewski, 2010)

What’s important?

1. Identify the primary goal.2. Group and assign value.3. Arrange elements.4. Be open to change.

“ It’s no longer about patterns and standards and all about how (we) facilitate the users experience.”- ALLISON HOUSE

How To Arrange Interface Elements (House, 2011)

Approaches to the Mobile web.

http://www.flickr.com/photos/28634332@N05/5413389700/ CC BY-NC

Mobile stylesheets.

Mobile only websites.

Responsive websites.

Native phone apps.

Responsive web design.

The answer?

http://www.flickr.com/photos/brandoncwarren/5797967542 CC BY-NC

What is responsive design?

The ingredients:

1. A flexible, grid-based layout2. Flexible images and media.3. Media queries

“We can craft sites that are not only... flexible... (they) adapt to the media that renders them.”- ETHAN MARCOTTE

Responsive Design (Marcotte, 2010)

How does it work?

1. target ÷ content = result2. img { max-width: 100% }3. media queries

Target ÷ content = results

960 p!"#$

633 p!"#$ 306 p!"#$

633 ÷ 960 = 65.9375% 306 ÷ 960 = 31.875%

img { max-width: 100% }

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.

600 pixels  Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.

768 pixels   Ten-inch tablets like the iPad (768×1024) held in portrait mode.

1024 pixels Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.

1200 pixels    For widescreen displays, primarily laptop and desktop browsers.

Marcotte, (2011 pp.158-159)

Examples of responsive design.

Browser support for media queries.

Safari 3+Internet Explorer 9Chrome Firefox 3.5+ Opera 7+

Opera MobileMobile Webkit

+ +

Native apps Vs. Mobile web?

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.

“There is no debate at all. The mobile Web is not going to die and app stores are not going anywhere. ”- DAN ROWINSKI

Web vs. Native Mobile App? Forrester Says Do Both (Rowinski, 2011)

Bring it all together (sort of).

“Not every mobile device will have your app on it but every mobile will have a browser.”- JASON GRIGSBY @GRIGS

Speakers

Richard Prowse BSc (Hons)Richard Prowse is a graduate of the University of Leicester and now works as project team leader and web developer at Bournemouth University, delivering the university's new content management system and corporate website.

Richard is a creative technologist: passionate about higher education, web standards, user experience and technology. He was recently shortlisted for BU's Vice-Chancellor's Unsung Hero of the Year, 2011 for his contribution to the university's web development.

Web Developer at Bournemouth Universityrprowse@bournemouth.ac.uktwitter @richprowse

Sharon Steeples BA (Hons)Sharon Steeples started work in the Web and Learning Technology office at the University of Essex in 2001. Working as part of a team, her responsibilities included maintenance and development of the University corporate pages, Web site design, Web support and Web related training for staff.

Since 2008, Sharon has worked for the "Dark Side", (a.k.a. Management Information Systems) as a Web Analyst Programmer, and therefore has a unique 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 settling down to her life in Essex.

Web Analyst Programmer at University of Essexsharon@essex.ac.uktwitter @sharonsteeples

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 July 2011].

House, H., 2011. How To Arrange Interface Elements. [online] Available at: <http://thinkvitamin.com/design/how-to-arrange-interface-elements-4/> [Accessed 22 July 2011].

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].