Your SlideShare is downloading. ×
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.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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


Published on

Published in: Technology, News & Politics

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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 devices #mtmq | @yuda
    • 2. Semantic HTML #mtmq | @yuda
    • 3. WAI-ARIA #mtmq | @yuda
    • 4. Managing focus #mtmq | @yuda
    • 5. Media Queries #mtmq | @yuda
    • 6. Resources • Mozilla Developer Network • WhatWG Human-readable HTML5 specification • Introduction to ARIA (Gez Lemon) • Media queries (Ethan Marcotte) #mtmq | @yuda
    • 7. That’s all. @yuda | #mtmq | @yuda