Your SlideShare is downloading. ×
0
Dawn of Mankind =  Back in the Day =Age of Enlightenment =
A Brief History of{                                        }    « Pre-1995: white noise and modems       Dawn of Mankind =...
Computers Evolved.        Room.
Desktop.
Pocket.
Google glasses...Well, I just did a search for “Mainepizza” and your restaurant didn’t comeup on my glasses... and I’m, li...
Apple’s iBall TouchSiri, bring up a map to that new pizzaplace on Congress Street.I found a map for you. Please blinktwice...
What the %@#*! is going onhere?• over 400 web-enabled devices in themarketplace.• average American spends over 400 hours a...
mobile first. desktop prejudice is stinkin’ thinkin’ mobile is no longer second-class delivery
The first answer was the obvious one... build a completely separate website for your iPhone                  visitors...   ...
but then more devices came along... BlackBerry, Kindle Fire, iPads, Nooks...        Screen sizes were all over the place. ...
Answer two was a more general mobile platform that would work on many devices...jQTouch, Sencha Touch, jQuery Mobile, Dojo...
And if your website is truly meant to be used only when you’re mobile? This is the answer...Mobile platforms provide bulle...
Early on, websites used “device detection” to automatically redirect visitors to the mobile website    (They hated it.)
We are evolving as users to always be online
We are evolving as users to always be online
blame Facebook.
There is no one left in this galaxy who is not on Facebook. If you are not on Facebook yet? Just wait.
Okay. So we’re all online... all the time. What are we looking at?          Dawn of Mankind:                        jpegs,...
Okay. So we’re all online... all the time. What are we looking at?          Dawn of Mankind:                        jpegs,...
Let’s say I want to read astory at the Huffington Post.The story is in the yellowblock.Just the extra social goodies are i...
Let’s say I want to read astory at the Huffington Post.The story is in the yellowblock.Just the extra social goodies are i...
This is all Iasked for                {                }
We are sinking in social.Desperate to make sure we don’t miss a single opportunity for engagement,and unable to decide wha...
Stop theinsanity
Clean up Your Act
Clean up Your Act
Organize
Prioritize
Upgrade your definition of your customer.
Your typical customer back in the day...
Your typical customer today? Maybe the cat. She’s on the road...
Here’s your customer
And here...
mobile first.because we are all mobile and websites need to be responsive to this fact.                 and yes, that’s a g...
mobile first.because we are all mobile and websites need to be responsive to this fact.                 and yes, that’s a g...
Which brings us to Responsive Design,because this is not a mobile rant... althoughit probably feels like one. ;-)Responsiv...
Huh? Let me show you...http://www.vivelohoy.com/iPhone                 iPad   DesktopEven larger monitors
Architectural Engineeringhttp://a-e-l.co.uk/iPhone                 iPad   DesktopEven larger monitors
Bryan Connorhttp://bryanconnor.com/iPhone                 iPad   DesktopEven larger monitors
United Pixelworkershttp://www.unitedpixelworkers.com/iPhone                 iPad          DesktopEven larger monitors
btwGrab your web browser window by the lower right cornerand drag it slowly inward to narrow the screen and youcan see the...
what dark magic is      this? 1.A flexible grid 2.Flexible images and video 3.Media queries.                               ...
( and, seriously, it’s more like this... but let’s take it apart...)
Flexible Grid                Bootstrap is a 12 column grid that’s 940 pixels wide.
<div class="row">                        {  <div class="span12">...</div></div>                        {<div class="row"> ...
Flexible VideoFitvidsjs.comSimple jQuery script for video embedding and automatic resizing.Flexible ImagesAdaptive images ...
Media Queries  /*  Hardboiled CSS3 Media Queries by Andy Clarke:  http://stuffandnonsense.co.uk/blog/about/  hardboiled_cs...
Media Queries  /* Smartphones (landscape) ----------- */  @media only screen and (min-width : 321px) {  }  /* Smartphones ...
Media Queries  /* iPads (portrait and landscape) ----------- */  @media only screen and (min-device-width : 768px) and (ma...
Media Queries  /* Desktops and laptops ----------- */  @media only screen and (min-width : 1224px) {  }  /* Large screens ...
And finally, add this to your htmlpage:  <!DOCTYPE html>  <html lang="en">   <head>    <meta charset="utf-8">    <title>My ...
Oh, man... that sounds like a lot of work...
Start with a responsive frameworkSkeletonSkeleton is a light-weight framework that ONLY uses CSS.As the screen size gets s...
...because half of the work is done foryouBootstrapCreated by Twitter. Employs jQuery to handle some ofthe responsive work...
so you don’t have to re-style thewheel.FoundationSimilar to bootstrap. Seems to make more of a distinctionbetween mobile d...
Media queries grab bagMedia Queries ScriptThank you Wouter van der Graaf for http://code.google.com/p/css3-mediaqueries-js...
btw... is there any web browser thatdoesn’t support all this groovy stuff?
I find your lack ofbrowser support
Internet Explorer, my old friend...  For pre-IE9 browsers? Add the media queries script and modernizer.IE9 is more web sta...
How standards compliant is yourbrowser?Give it the Acid Testhttp://acid3.acidtests.org/
There are loads of responsive jQueryscripts, goodies, PSD files, articles,wordpress themes, etc. Tons. Loads.Way too many t...
BrainsurfI am online roughly10-14 hours a day. Each evening Iscan over 300 articles on industry topics: web design,CSS, HT...
Holly Valero                  www.hollyworks.comhttp://www.facebook.com/HollyWorks     http://twitter.com/hollyworks2go
Responsive Design: One Website to Rule them All
Responsive Design: One Website to Rule them All
Responsive Design: One Website to Rule them All
Responsive Design: One Website to Rule them All
Responsive Design: One Website to Rule them All
Responsive Design: One Website to Rule them All
Upcoming SlideShare
Loading in...5
×

Responsive Design: One Website to Rule them All

10,961

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
10,961
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

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 of "Responsive Design: One Website to Rule them All"

    1. 1. Dawn of Mankind = Back in the Day =Age of Enlightenment =
    2. 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. 3. Computers Evolved. Room.
    4. 4. Desktop.
    5. 5. Pocket.
    6. 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. 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. 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. 9. mobile first. desktop prejudice is stinkin’ thinkin’ mobile is no longer second-class delivery
    10. 10. The first answer was the obvious one... build a completely separate website for your iPhone visitors... hey, that was easy!
    11. 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. 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. 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. 14. Early on, websites used “device detection” to automatically redirect visitors to the mobile website (They hated it.)
    15. 15. We are evolving as users to always be online
    16. 16. We are evolving as users to always be online
    17. 17. blame Facebook.
    18. 18. There is no one left in this galaxy who is not on Facebook. If you are not on Facebook yet? Just wait.
    19. 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. 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. 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. 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. 23. This is all Iasked for { }
    24. 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. 25. Stop theinsanity
    26. 26. Clean up Your Act
    27. 27. Clean up Your Act
    28. 28. Organize
    29. 29. Prioritize
    30. 30. Upgrade your definition of your customer.
    31. 31. Your typical customer back in the day...
    32. 32. Your typical customer today? Maybe the cat. She’s on the road...
    33. 33. Here’s your customer
    34. 34. And here...
    35. 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. 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. 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. 38. Huh? Let me show you...http://www.vivelohoy.com/iPhone iPad DesktopEven larger monitors
    39. 39. Architectural Engineeringhttp://a-e-l.co.uk/iPhone iPad DesktopEven larger monitors
    40. 40. Bryan Connorhttp://bryanconnor.com/iPhone iPad DesktopEven larger monitors
    41. 41. United Pixelworkershttp://www.unitedpixelworkers.com/iPhone iPad DesktopEven larger monitors
    42. 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. 43. what dark magic is this? 1.A flexible grid 2.Flexible images and video 3.Media queries. it’s not dark magic...
    44. 44. ( and, seriously, it’s more like this... but let’s take it apart...)
    45. 45. Flexible Grid Bootstrap is a 12 column grid that’s 940 pixels wide.
    46. 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. 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. 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. 49. Media Queries /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { }
    50. 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. 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. 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. 53. Oh, man... that sounds like a lot of work...
    54. 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. 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. 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. 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. 58. btw... is there any web browser thatdoesn’t support all this groovy stuff?
    59. 59. I find your lack ofbrowser support
    60. 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. 61. How standards compliant is yourbrowser?Give it the Acid Testhttp://acid3.acidtests.org/
    62. 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. 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. 64. Holly Valero www.hollyworks.comhttp://www.facebook.com/HollyWorks http://twitter.com/hollyworks2go
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×