Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
More than media queries: What you need to bring your sites to all devices
- 1. More Than Media Queries what you need to know to bring your sites to all devices http://www.flickr.com/photos/adactio/6153481666 #mtmq | @yuda
- 2. Semantic HTML http://www.flickr.com/photos/dullhunk/3525013547/ #mtmq | @yuda
- 5. WAI-ARIA http://www.flickr.com/photos/_madolan_/5102397050/ #mtmq | @yuda
- 7. Managing focus http://www.flickr.com/photos/mdales/6602332085/ #mtmq | @yuda
- 9. Media Queries http://www.flickr.com/photos/31081559@N04/3275001259/ #mtmq | @yuda
- 10. 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
- 11. That’s all. @yuda | john@yuda.org #mtmq | @yuda
Notes de l'éditeur
- * 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