Your SlideShare is downloading. ×
Responsive Design for Digital VU Month 2011
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

Responsive Design for Digital VU Month 2011

143
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
143
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
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
  • \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’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 “one web”\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’ll work.\ndevelop mobile friendly content ... in most cases, this is the content your desktop users want anyway\nsite is at it’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’ll use it’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’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’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’s nice to have the content at the top so you don’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’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’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’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’t use them. Learn the reasons for the patterns chosen. (this one is very well documented.)\n
  • \n
  • “mobile context” causes user to have significantly different needs (be sure it’s really true!)\neverything would be a hack\napp-like functionality (webapp or native)\nwilling to devote resources to maintain multiple entities.\n
  • \n
  • Transcript

    • 1. RESPONSIVE WEB DESIGNPractical Techniques for Building Device-Agnostic Sites Ryan Huber VUMC Strategic Marketing SOM Web Development
    • 2. The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of the limitationof the printed page. We should embrace thefact that the web doesn’t have the sameconstraints, and design for this flexibility. Butfirst, we must “accept the ebb and flow ofthings.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
    • 3. THE EBB AND FLOW http://www.flickr.com/photos/manager_2000/4862175587/
    • 4. EBB.
    • 5. FLOW.
    • 6. MOBILE WEBCONSOLE WEB EBOOK WEBTABLET WEB IPHONE WEB RANDOM WEB ENABLED DEVICE WEB
    • 7. WE’VE GOTTEN OURSELVES INTO THIS MESS.http://dandelionhaven.blogspot.com/2010_04_01_archive.html
    • 8. IT’S TIME TO TAKE A FEW STEPS BACK.
    • 9. The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of the limitationof the printed page. We should embracethe fact that the web doesn’t have thesame constraints, and design for thisflexibility. But first, we must “accept the ebband flow of things.” JOHN ALLSOPP “A DAO OF WEB DESIGN”
    • 10. ONE WEB
    • 11. RESPONSIVE DESIGN
    • 12. TWO PATHS
    • 13. MOBILE FIRST
    • 14. browser t capable est, leas mallS MOBILE FIRST
    • 15. THE BASICSYou already know these.
    • 16. 1. Meaningful HTML2. Valid HTML3. Separate content and style4. Quality content5. Lean as possible
    • 17. FORGET 960.at least, for a moment...
    • 18. PRETTY MARKUP
    • 19. ADD BASIC STYLE
    • 20. (Here comes the magic part...)
    • 21. THIS PARTMAY BE ABIT NEW Brace yourself.
    • 22. THE MEDIA QUERY
    • 23. @media only screen and(min-width: 410px) { h1.sitetitle { float: left; }}
    • 24. ... AN EXCEPTION YOU GUESSED IT...
    • 25. <SCRIPT SRC="JS/RESPOND.JS"></SCRIPT> https://github.com/scottjehl/Respond
    • 26. CHALLENGES
    • 27. IMAGES
    • 28. FLUID IMAGESHTTP://UNSTOPPABLEROBOTNINJA.COM/ENTRY/FLUID-IMAGES/
    • 29. RESPONSIVE IMAGES http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image
    • 30. INTERACTIVE CONTENT
    • 31. DATATABLES HTTP://CSS-TRICKS.COM/9096-RESPONSIVE-DATA-TABLES/
    • 32. CONTENT ORDERING
    • 33. $(document).ready(function(){ $(window).resize(function() { w = $(this).width(); if(w>599){ // Do neat things. } }); $(window).resize();});
    • 34. DEALING WITH LOW /POTENTIALLY EXPENSIVEBANDWIDTH
    • 35. MOCKUPS / PROTOTYPING
    • 36. HANDY TOOLS http://rodneymeunier.blogspot.com/2011/05/coloured-work-finally.html
    • 37. MODERNIZR www.modernizr.com
    • 38. MODERNIZR www.modernizr.com
    • 39. <html class=" js flexbox canvas canvastext webgl no-touchgeolocation postmessage websqldatabase indexeddbhashchange history draganddrop websockets rgba hslamultiplebgs backgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimations csscolumnscssgradients cssreflections csstransforms csstransforms3dcsstransitions fontface generatedcontent video audiolocalstorage sessionstorage webworkers applicationcache svginlinesvg smil svgclippaths" lang="en">
    • 40. BOILERPLATES
    • 41. AND FINALLY...
    • 42. THE ARGUMENT FOR A MOBILE SITE / APP
    • 43. RYAN HUBERRYAN.HUBER@VANDERBILT.EDU GO DESIGN SOMETHING WONDERFUL.

    ×