Responsive Design: One Website to Rule them All
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Design: One Website to Rule them All

  • 9,852 views
Uploaded on

Presentation on responsive design... where it came from, what it is, how to get started

Presentation on responsive design... where it came from, what it is, how to get started

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
9,852
On Slideshare
9,851
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
39
Comments
0
Likes
0

Embeds 1

http://www.scoop.it 1

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Dawn of Mankind = Back in the Day =Age of Enlightenment =
  • 2. A Brief History of{ } « Pre-1995: white noise and modems Dawn of Mankind = Back in the Day = Age of Enlightenment = The Future = 6 months from now »
  • 3. Computers Evolved. Room.
  • 4. Desktop.
  • 5. Pocket.
  • 6. Google glasses...Well, I just did a search for “Mainepizza” and your restaurant didn’t comeup on my glasses... and I’m, like, threeblocks away. What’s up with that?
  • 7. Apple’s iBall TouchSiri, bring up a map to that new pizzaplace on Congress Street.I found a map for you. Please blinktwice to start route guidance
  • 8. What the %@#*! is going onhere?• over 400 web-enabled devices in themarketplace.• average American spends over 400 hours a year online• 25 percent of internet time is dedicated to social mediasites• tablet users account for about 20 percent of Americanadults.• Apple owns 97% of the tablet market• 5.9 billion mobile subscribers globallyMobile isn’t just “here to stay” ... it’s taking over...
  • 9. mobile first. desktop prejudice is stinkin’ thinkin’ mobile is no longer second-class delivery
  • 10. The first answer was the obvious one... build a completely separate website for your iPhone visitors... hey, that was easy!
  • 11. but then more devices came along... BlackBerry, Kindle Fire, iPads, Nooks... Screen sizes were all over the place. Screen resolutions were all over the place.
  • 12. Answer two was a more general mobile platform that would work on many devices...jQTouch, Sencha Touch, jQuery Mobile, Dojo Mobile, iPhone apps... created mobile-specific experiences
  • 13. And if your website is truly meant to be used only when you’re mobile? This is the answer...Mobile platforms provide bullet-proof, pre-coded frameworks for rapid development: buttons, menus, templates.
  • 14. Early on, websites used “device detection” to automatically redirect visitors to the mobile website (They hated it.)
  • 15. We are evolving as users to always be online
  • 16. We are evolving as users to always be online
  • 17. blame Facebook.
  • 18. There is no one left in this galaxy who is not on Facebook. If you are not on Facebook yet? Just wait.
  • 19. Okay. So we’re all online... all the time. What are we looking at? Dawn of Mankind: jpegs, gifs, text, html code Back in the day: jpegs, gifs, text, html code, CSS, javascript, flash, youtube movies, blogs, early user interaction (comments, bulletin boards) cgi- scripts Age of jpegs, gifs, text, html5 code, CSS3, javascript, flash, Enlightenment: youtube movies, vimeo, blogs, early user interaction (comments, bulletin boards), twitter feeds, facebook widgets, open graph tags, social media integration from over 100 different services, jQuery, AJAX, mootools, geolocation, embedded maps, live chat, games, etc.so just when the screen got really, really tiny... we added more stuff than ever before? Gotcha!
  • 20. Okay. So we’re all online... all the time. What are we looking at? Dawn of Mankind: jpegs, gifs, text, html code Back in the day: jpegs, gifs, text, html code, CSS, javascript, flash, youtube movies, blogs, early user interaction (comments, bulletin boards) cgi- scripts Age of jpegs, gifs, text, html5 code, CSS3, javascript, flash, Enlightenment: youtube movies, vimeo, blogs, early user interaction (comments, bulletin boards), twitter feeds, facebook widgets, open graph tags, social media integration from over 100 different services, jQuery, AJAX, mootools, geolocation, embedded maps, live chat, games, etc.so just when the screen got really, really tiny... we added more stuff than ever before? Gotcha!
  • 21. Let’s say I want to read astory at the Huffington Post.The story is in the yellowblock.Just the extra social goodies are inpink.
  • 22. Let’s say I want to read astory at the Huffington Post.The story is in the yellowblock.Just the extra social goodies are inpink.
  • 23. This is all Iasked for { }
  • 24. We are sinking in social.Desperate to make sure we don’t miss a single opportunity for engagement,and unable to decide what’s important and what isn’t, we’re throwingeverything on the page...and ignoring the fact that a greater percentage ofour visitors are frustrated - waiting for our web pages to load on slow wificonnections. We pretend that people are sitting at desktop computers withethernet connections.It’s a lie. And we know it.
  • 25. Stop theinsanity
  • 26. Clean up Your Act
  • 27. Clean up Your Act
  • 28. Organize
  • 29. Prioritize
  • 30. Upgrade your definition of your customer.
  • 31. Your typical customer back in the day...
  • 32. Your typical customer today? Maybe the cat. She’s on the road...
  • 33. Here’s your customer
  • 34. And here...
  • 35. mobile first.because we are all mobile and websites need to be responsive to this fact. and yes, that’s a gratuitous cat. because I like cats.
  • 36. mobile first.because we are all mobile and websites need to be responsive to this fact. and yes, that’s a gratuitous cat. because I like cats.
  • 37. Which brings us to Responsive Design,because this is not a mobile rant... althoughit probably feels like one. ;-)Responsive design is a flexible grid,optimized images and video, andstylesheets that format web pagesautomatically based upon the size of thescreen on the device in the hand of theuser. * got it? Okay, we’re done...
  • 38. Huh? Let me show you...http://www.vivelohoy.com/iPhone iPad DesktopEven larger monitors
  • 39. Architectural Engineeringhttp://a-e-l.co.uk/iPhone iPad DesktopEven larger monitors
  • 40. Bryan Connorhttp://bryanconnor.com/iPhone iPad DesktopEven larger monitors
  • 41. United Pixelworkershttp://www.unitedpixelworkers.com/iPhone iPad DesktopEven larger monitors
  • 42. btwGrab your web browser window by the lower right cornerand drag it slowly inward to narrow the screen and youcan see the effect immediately on any responsive websiteeven if you’re not on a smaller device... Explore: http://mediaqueri.es/
  • 43. what dark magic is this? 1.A flexible grid 2.Flexible images and video 3.Media queries. it’s not dark magic...
  • 44. ( and, seriously, it’s more like this... but let’s take it apart...)
  • 45. Flexible Grid Bootstrap is a 12 column grid that’s 940 pixels wide.
  • 46. <div class="row"> { <div class="span12">...</div></div> {<div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div></div>
  • 47. Flexible VideoFitvidsjs.comSimple jQuery script for video embedding and automatic resizing.Flexible ImagesAdaptive images script (.htaccess/php)http://adaptive-images.com/Create a style: img.resize {height: auto;max-width: 96%;}For internal photos/images, create pictures that are no wider than300px so they will flow naturally within your grid.Ethan Marcotte’s script:http://unstoppablerobotninja.com/entry/fluid-imagesThe high res-lo res image optionhttps://github.com/filamentgroup/responsive-images
  • 48. Media Queries /* Hardboiled CSS3 Media Queries by Andy Clarke: http://stuffandnonsense.co.uk/blog/about/ hardboiled_css3_media_queries/ */ /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device- width : 480px) { .header {...} .nav {...} .content { ...} }
  • 49. Media Queries /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { }
  • 50. Media Queries /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device- width : 1024px) { } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device- width : 1024px) and (orientation : landscape) { } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device- width : 1024px) and (orientation : portrait) { }
  • 51. Media Queries /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 and high pixel ratio devices ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
  • 52. And finally, add this to your htmlpage: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Responsive Website</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta name="description" content=""> <meta name="author" content="">
  • 53. Oh, man... that sounds like a lot of work...
  • 54. Start with a responsive frameworkSkeletonSkeleton is a light-weight framework that ONLY uses CSS.As the screen size gets smaller, columns collapse in sizeand reshuffle. Great for simple websites that dontrequire a lot of extra features and websites where youwant to create very different looking browsingexperiences based upon device sizePro: control freak friendly, lightweightCon: load all your own jQuery responsive scripts Explore: http://getskeleton.com/
  • 55. ...because half of the work is done foryouBootstrapCreated by Twitter. Employs jQuery to handle some ofthe responsive work. Pre-programmed CSS filled withhigh value user interface elements: nav bars, modalwindows, CSS buttons, great looking tables. Well thoughtout, rapid deployment tool.Pro: loads of jQuery already baked inCon: If you have to do a lot of customizing, it’s 4,000+ lines of code toedit Explore: http://twitter.github.com/bootstrap/
  • 56. so you don’t have to re-style thewheel.FoundationSimilar to bootstrap. Seems to make more of a distinctionbetween mobile design and responsive design. Feature-rich alternative to Bootstrap.Pro: loads of jQuery already baked inCon: If you have to do a lot of customizing, it’s 4,000+ lines of code toedit Explore: http://foundation.zurb.com/
  • 57. Media queries grab bagMedia Queries ScriptThank you Wouter van der Graaf for http://code.google.com/p/css3-mediaqueries-js/ . No, I mean it. Love you, man! This scriptmakes browsers that don’t offer native support for media queriesparse, test and apply those queries.Hardboiled Media Querieshttps://gist.github.com/1362209Painless jQueryGoogle’s jQuery CDN (Content Delivery Network)https://developers.google.com/speed/libraries/devguideMight as well code in HTML5...ModernizerMakes older web browsers HTML5 friendly http://modernizr.com/
  • 58. btw... is there any web browser thatdoesn’t support all this groovy stuff?
  • 59. I find your lack ofbrowser support
  • 60. Internet Explorer, my old friend... For pre-IE9 browsers? Add the media queries script and modernizer.IE9 is more web standards compliant than ever (for what that’s worth...)
  • 61. How standards compliant is yourbrowser?Give it the Acid Testhttp://acid3.acidtests.org/
  • 62. There are loads of responsive jQueryscripts, goodies, PSD files, articles,wordpress themes, etc. Tons. Loads.Way too many to list here...all youhave to do is find them...
  • 63. BrainsurfI am online roughly10-14 hours a day. Each evening Iscan over 300 articles on industry topics: web design,CSS, HTML5, etc.By the end of the year, that’s over 4,000 hours and wellover 50,000 articles. Those resources I want to save andreview later, I publish to my twitter feed#hollyworks2goMy twitter research feed. Looking just for responsive tweets? UseSnapBird http://snapbird.org/ to search my twitter feed by“responsive” or “bootstrap” or “jQuery” or “photoshop” or “css3”...you get the idea.
  • 64. Holly Valero www.hollyworks.comhttp://www.facebook.com/HollyWorks http://twitter.com/hollyworks2go