Responsive Design for Digital VU Month 2011
•Als KEY, PDF herunterladen•
1 gefällt mir•746 views
This document discusses responsive web design techniques for building device-agnostic websites. It recommends embracing flexibility and designing for different devices rather than trying to control layout as in print. The key techniques include using fluid images, responsive tables, and media queries to dynamically change styles based on screen width. It also recommends starting with a mobile-first approach, using lean valid HTML and separating structure from presentation before adding basic styles and responsive exceptions using media queries.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Responsive Design for Digital VU Month 2011
Ähnlich wie Responsive Design for Digital VU Month 2011 (20)
Responsive Design for Digital VU Month 2011
- 1. RESPONSIVE WEB DESIGN Practical Techniques for Building Device-Agnostic Sites Ryan Huber VUMC Strategic Marketing SOM Web Development
- 3. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
- 4. THE EBB AND FLOW http://www.flickr.com/photos/manager_2000/4862175587/
- 8. EBB.
- 9. FLOW.
- 13. MOBILE WEB CONSOLE WEB EBOOK WEB TABLET WEB IPHONE WEB RANDOM WEB ENABLED DEVICE WEB
- 14. WE’VE GOTTEN OURSELVES INTO THIS MESS. http://dandelionhaven.blogspot.com/2010_04_01_archive.html
- 15. IT’S TIME TO TAKE A FEW STEPS BACK.
- 16. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
- 17. ONE WEB
- 19. TWO PATHS
- 20. MOBILE FIRST
- 21. browser t capable est, leas mall S MOBILE FIRST
- 22. THE BASICS You already know these.
- 23. 1. Meaningful HTML 2. Valid HTML 3. Separate content and style 4. Quality content 5. Lean as possible
- 24. FORGET 960. at least, for a moment...
- 25. PRETTY MARKUP
- 26. ADD BASIC STYLE
- 27. (Here comes the magic part...)
- 28. THIS PART MAY BE A BIT NEW Brace yourself.
- 29. THE MEDIA QUERY
- 30. @media only screen and (min-width: 410px) { h1.sitetitle { float: left; } }
- 31. ... AN EXCEPTION YOU GUESSED IT...
- 32. <SCRIPT SRC="JS/RESPOND.JS"></SCRIPT> https://github.com/scottjehl/Respond
- 33. CHALLENGES
- 34. IMAGES
- 36. RESPONSIVE IMAGES http://filamentgroup.com/lab/ responsive_images_experimenting_with_context_aware_image
- 38. DATA TABLES HTTP://CSS-TRICKS.COM/9096-RESPONSIVE-DATA-TABLES/
- 39. CONTENT ORDERING
- 40. $(document).ready(function(){ $(window).resize(function() { w = $(this).width(); if(w>599){ // Do neat things. } }); $(window).resize(); });
- 41. DEALING WITH LOW / POTENTIALLY EXPENSIVE BANDWIDTH
- 47. <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">
- 48. BOILERPLATES
- 49. AND FINALLY...
- 50. THE ARGUMENT FOR A MOBILE SITE / APP
- 51. RYAN HUBER RYAN.HUBER@VANDERBILT.EDU GO DESIGN SOMETHING WONDERFUL.
Hinweis der Redaktion
- \n
- The invention of the phrase - May 25, 2010 Ethan Marcotte\n
- \n
- \n
- Over the years, browsers have changed and gained speed and features\n
- computers have gotten faster and displays have gotten larger.\n
- ... except in some cases\n
- Really special needs. Create a separate presence for them, we&#x2019;ll call it mobile web.\n
- maybe a separate site for these guys, too?\n
- tricky... iPhone version? Mobile Version? Desktop Version? Or maybe a Tablet version?\n
- good grief.\n
- \n
- not to mention assistive devices (screen readers, braille displays, etc.) \n\nHow do you keep up with new technology, how do you maintain all of those presences?\n\nor, we ignore them, and hope for the best.\n
- really (really) old designs would work fine. \n\nwe started down the road table based designs, fixed width designs, designing in photoshop, user agent sniffing, etc.\n
- \n
- \n
- how could we accomplish this with &#x201C;one web&#x201D;\n
- Responsive design -- respond to your users capabilities, including their browser width.\n\nFluid width + magic.\n\nhttp://bostonglobe.com/\n
- Take a desktop design and make it work for mobile.\nOr, take a mobile design and make it work for desktop.\n
- \n
- start with the basics, you know they&#x2019;ll work.\ndevelop mobile friendly content ... in most cases, this is the content your desktop users want anyway\nsite is at it&#x2019;s meanest and leanest by default -- fast downloads and fast rendering on sloooowww devices and networks\n
- \n
- \nnice and accessible... not just to mobile devices\nsmall images\n
- \n
- https://medschool.vanderbilt.edu/ryan/responsive/basic.html\n
- For your default style... think lowest common denominator. No columns.\nhttps://medschool.vanderbilt.edu/ryan/responsive/basic2.html\n\nstay fluid\n
- \n
- \n
- CSS3 functionality that lets you target chunks of your CSS for different browser properties. In our case, we&#x2019;ll use it&#x2019;s ability to adjust based on width.\n
- https://medschool.vanderbilt.edu/ryan/responsive/index.html\n\nnote that larger ones will inherit styles set in the smaller ones\n
- We&#x2019;re counting on desktop browsers understanding media queries or else they get the dumbed down version. ... support is good, but we probably want IE8 and under also to work.\n\nIE 8 and under don&#x2019;t get media queries.\nNo big deal, just takes a bit of javascript (Respond.js by Filament Group)\n
- \n
- \n
- Wide images overflowing off the screen looks bad.\n\n
- technique is to put \nmax-width: 100%;\nand use his script to make sure browser image resizing looks ok in IE\n\nhttps://medschool.vanderbilt.edu/ryan/responsive/image1.html\n
- Scott Jehl. Uses .htaccess and some javascript. Default image loaded is small mobile-friendly size, if browser is wide enough, loads larger version.\n
- Look at this as an opportunity.\nDo feature detection and serve content based on capabilities (for example, video / audio tags, flash)\nSpecial opportunity: Serve touch friendly content when available\n\n
- Display as Block Content\nhttp://css-tricks.com/examples/ResponsiveTables/responsive.php\n\nConvert to chart at smaller sizes\nResponsive Tables - Chart\n\nConvert to link to full table at smaller sizes\nResponsiveble Tabularcation\n
- For screen readers and small screens, it&#x2019;s nice to have the content at the top so you don&#x2019;t have to scroll through the entire menu every time. But on the desktop, maybe you want the menu to come first. You can do a lot with css floats, etc... but sometimes you need a new trick...\n\nwindow.resize\n
- use this to move the navigation in the dom, and also to make the navigation interactive.\n\nhttps://medschool.vanderbilt.edu/ryan/responsive/index.html\n\n(I&#x2019;m using jquery, but not at all necessary)\n
- minimize your external resources (conditionally load them, combine, minify)\nplace scripts at the end so that the content isn&#x2019;t held up waiting for scripts to load\nprovide mobile friendly images in place of very large ones at the default\napplication cache (part of html5)\nserver side compression\n
- Faster to just do it live\n
- (bill o&#x2019;reilly) strong arguments for designing in the browser. the more you do it, the faster you get. and you never present clients something that will *never* look exactly like that mockup\n
- \n
- a script you include.\nmakes HTML5 elements styleable in IE. (alternative: html5shim)\nadds a bunch of really snazzy classes to your html tag for elements that the browser supports\nfunction for loading scripts conditionally when features are / are not supported\n
- \n
- Mobile Boilerplate (Paul Irish)\n\n320 and Up\nLOOK AT THESE even if you don&#x2019;t use them. Learn the reasons for the patterns chosen. (this one is very well documented.)\n
- \n
- &#x201C;mobile context&#x201D; causes user to have significantly different needs (be sure it&#x2019;s really true!)\neverything would be a hack\napp-like functionality (webapp or native)\nwilling to devote resources to maintain multiple entities.\n
- \n