Your SlideShare is downloading. ×
0
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
More than media queries: What you need to bring your sites to all devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

More than media queries: What you need to bring your sites to all devices

2,055

Published on

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,055
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
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
  • * Personal Intro and disclaimer\n* The problem: many screen sizes and capabilities\n* Future problem: Audio-only interfaces (Siri + VoiceOver), Google HUD eyeglasses, multi-screen devices\n* Design for devices like we design for disabled users\n* Four concrete techniques you can use right away\n
  • * Guide the browser in how a document is divided and structured, and how it should be navigated\n* Why do this during design phase? This is code\n * Help us think about relative importance of pieces of content and how they fit into the overall picture\n * understanding how a machine will parse content can help us think through structure in a different way than thinking about how users will think about it\n * helps with handoff to dev team - fewer questions/uncertainty, make sure the site functions as intended\n\n
  • \n
  • * Main headlines -- maybe most important for semantic structure\n* HTML5 goodness -- article, aside\n* Small details useful for machines -- time, address\n* begin to see how it might work across media. Asides flow after main content or onto second screen\n
  • ARIA: Accessible Rich Internet Applications\n* Started in 2006 to make Ajax apps more accessible\n* Landmarks: semantic structure to site\n - some overlap with HTML5 - use both, broader support \n* Roles: used to describe complex widgets semantically\n* States and properties - describe complex states (related to roles)\n\nLive regions\n* off, polite, assertive\n* aria-atomic: present entire region or just changes to user?\n* aria-relevent: what changes are relevant to user? additions, removals, text\n\n
  • * discussion and headlines both live regions. polite? assertive?\n\n
  • Have you ever tapped a link or button on your phone and had nothing happen, only to zoom out and see that a dialog box opened off-screen? That was poorly-managed focus.\n* Keeps the right thing on screen on small devices\n* Makes sure non-visual media are where we think in the app\n* Helps with non mouse/touch inputs\n
  • Click the button to comment. What happens?\n* Typically spec would describe the modal popup and what it looks like\n* Add elements to describe what should happen with focus. What gets focus after the click? What gets focus if you click to comment, or click to cancel?\n
  • * Not just screen size\n* color, aspect ratio, orientation, resolution, scan (progressive vs interlace), grid displays \n* still in development, so more may come (for example, touch-enabled?)\n* best when you work closely with dev team: design, prototype, test, iterate\n* use decisions made about HTML / structure to guide decisions here\n
  • Don’t scribble down. I’ll share my slides\n
  • \n
  • Transcript

    • 1. More Than Media Queries what you need to know to bring your sites to all deviceshttp://www.flickr.com/photos/adactio/6153481666 #mtmq | @yuda
    • 2. Semantic HTMLhttp://www.flickr.com/photos/dullhunk/3525013547/ #mtmq | @yuda
    • 3. WAI-ARIAhttp://www.flickr.com/photos/_madolan_/5102397050/ #mtmq | @yuda
    • 4. Managing focushttp://www.flickr.com/photos/mdales/6602332085/ #mtmq | @yuda
    • 5. Media Querieshttp://www.flickr.com/photos/31081559@N04/3275001259/ #mtmq | @yuda
    • 6. Resources • Mozilla Developer Network http://developer.mozilla.org/ • WhatWG Human-readable HTML5 specification http://developers.whatwg.org/ • Introduction to ARIA (Gez Lemon) http://dev.opera.com/articles/view/introduction-to-wai-aria/ • Media queries (Ethan Marcotte) http://www.alistapart.com/articles/responsive-web-design/ #mtmq | @yuda
    • 7. That’s all. @yuda | john@yuda.org #mtmq | @yuda

    ×