SlideShare a Scribd company logo

Edit open day responsive design frameworks

•Download as PPT, PDF•
•
Alexandre Marreiros
Alexandre Marreiros

Slides that was the base of a workshop i gave at the event open day in EDIT. The main goal of the workshop was to give a solid knowledge about responsive and how we can use frameworks to optimize our work 13-1-2013

1 of 34
Alexandre Marreiros
The Trainner • CTO @ INNOVAGENCY • Tech Trainner & Speaker as Idependent • Tech and Buis Consultant as @alexmarreiros Digitalmindignition.com Independent amarreiros@gmail.com Alexandre Marreiros
“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 web and flow of things.” John Allsopp, “A Dao of Web Design” Alexandre Marreiros
http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg Alexandre Marreiros
Web work is a all different story Browser’s Resolutions and sizes User’s Devices Alexandre Marreiros
Landscape / Portrait • http://www.sermonaudio.com/new_details.asp?ID=30996 Alexandre Marreiros
Web Client desires “Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.” Kayla Knight Alexandre Marreiros
So is just to Be Flexible ? http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html Alexandre Marreiros
Flexible Web Design Ethan Marcotte Flexibel Design example http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html Alexandre Marreiros
Flexible Web Design There still a problem to solve •User expetation •And sizes design/cross devices “…no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended.” Alexandre Marreiros
“responsive architecture” http://www.youtube.com/watch?feature=player_embedded&v=XYV0 Alexandre Marreiros
Responsive Web Design “This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” Ethan Marcotte Alexandre Marreiros
Responsive Web Design • Flexible Images ( http://www.flexiblewebbook.com/bonus.html) <h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a></h1> Alexandre Marreiros
Responsive Web Design • Fluid Grids (http://www.alistapart.com/articles/fluidgrids/) Alexandre Marreiros
Responsive Web Design • Media Queries (http://www.w3.org/TR/css3-mediaqueries/ ) Alexandre Marreiros
Responsive Web Design Examples http://mdcraftbeerfestival.com/ Alexandre Marreiros
Responsive Web Design Examples http://www.formfett.net/ Alexandre Marreiros
Responsive Web Design Examples http://forefathersgroup.com/ Alexandre Marreiros
Media Queries • Part of the CSS3 specification • Allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work • Are conditional styles Alexandre Marreiros
Media Queries • Example: @media screen and (max-device-width: 480px) { .column { float: none; } } Alexandre Marreiros
Responsive Web Design First we target what our conditional with the attribute @media Examples: @media only screen and (max-width:1023 px)  small screens @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: landscape)  ipad landscap @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: portrait)  ipad portrait Alexandre Marreiros
Responsive Web Design Table with the most common resolutions Alexandre Marreiros
Responsive Web Design Table with the most common resolutions Alexandre Marreiros
Responsive Web Design Table with the most common resolutions Alexandre Marreiros
Responsive Web Design • Let’s build some responsiviness. Hands on Lab 1st part http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
Responsive Frameworks Alexandre Marreiros
Mobile Boilerplate • a responsive template that puts the focus on mobile devices, namely those running Android, iOS, Blackberry and Symbian software. Alexandre Marreiros
Skeleton Is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Alexandre Marreiros
BluCSS • CSS framework that, as usual, uses a flexible grid to facilitate responsive design. One feature that stands out is its responsive images, something many of these frameworks leave out; apply a class to your images and they’ll scale with your design. No need to include multiple files at multiple sizes, though be wary of unnecessary load on mobile devices with this approach.. Alexandre Marreiros
Less • Is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide mobile sizes — based on a grid system Alexandre Marreiros
Twitter Bootstrap Twitter Bootstrap includes a responsive grid system in addition to tons of stellar pre-styled elements like forms, uttons, navigation menus and more. Alexandre Marreiros
Foundation Alexandre Marreiros
Responsive Web Design • Let’s use responsive frameworks, hands on lab part 2 http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
Final References • http://www.mrgeek.me/?s=bootstrap • http://www.abookapart.com/products/mobile-first • http://www.abookapart.com/products/responsive-web- design • http://www.smashingmagazine.com/responsive-web-design- guidelines-tutorials/ • Workshops exercises based on canonical web examples: – Alexandre Marreiros

More Related Content

Edit open day responsive design frameworks

  • 2. The Trainner • CTO @ INNOVAGENCY • Tech Trainner & Speaker as Idependent • Tech and Buis Consultant as @alexmarreiros Digitalmindignition.com Independent amarreiros@gmail.com Alexandre Marreiros
  • 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 web and flow of things.” John Allsopp, “A Dao of Web Design” Alexandre Marreiros
  • 5. Web work is a all different story Browser’s Resolutions and sizes User’s Devices Alexandre Marreiros
  • 6. Landscape / Portrait • http://www.sermonaudio.com/new_details.asp?ID=30996 Alexandre Marreiros
  • 7. Web Client desires “Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.” Kayla Knight Alexandre Marreiros
  • 8. So is just to Be Flexible ? http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html Alexandre Marreiros
  • 9. Flexible Web Design Ethan Marcotte Flexibel Design example http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html Alexandre Marreiros
  • 10. Flexible Web Design There still a problem to solve •User expetation •And sizes design/cross devices “…no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended.” Alexandre Marreiros
  • 12. Responsive Web Design “This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” Ethan Marcotte Alexandre Marreiros
  • 13. Responsive Web Design • Flexible Images ( http://www.flexiblewebbook.com/bonus.html) <h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a></h1> Alexandre Marreiros
  • 14. Responsive Web Design • Fluid Grids (http://www.alistapart.com/articles/fluidgrids/) Alexandre Marreiros
  • 15. Responsive Web Design • Media Queries (http://www.w3.org/TR/css3-mediaqueries/ ) Alexandre Marreiros
  • 16. Responsive Web Design Examples http://mdcraftbeerfestival.com/ Alexandre Marreiros
  • 17. Responsive Web Design Examples http://www.formfett.net/ Alexandre Marreiros
  • 18. Responsive Web Design Examples http://forefathersgroup.com/ Alexandre Marreiros
  • 19. Media Queries • Part of the CSS3 specification • Allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work • Are conditional styles Alexandre Marreiros
  • 20. Media Queries • Example: @media screen and (max-device-width: 480px) { .column { float: none; } } Alexandre Marreiros
  • 21. Responsive Web Design First we target what our conditional with the attribute @media Examples: @media only screen and (max-width:1023 px)  small screens @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: landscape)  ipad landscap @media only screen and (min-device-width: 481px ) and (max-device width:1024 px) and (orientation: portrait)  ipad portrait Alexandre Marreiros
  • 22. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 23. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 24. Responsive Web Design Table with the most common resolutions Alexandre Marreiros
  • 25. Responsive Web Design • Let’s build some responsiviness. Hands on Lab 1st part http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
  • 26. Responsive Frameworks Alexandre Marreiros
  • 27. Mobile Boilerplate • a responsive template that puts the focus on mobile devices, namely those running Android, iOS, Blackberry and Symbian software. Alexandre Marreiros
  • 28. Skeleton Is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Alexandre Marreiros
  • 29. BluCSS • CSS framework that, as usual, uses a flexible grid to facilitate responsive design. One feature that stands out is its responsive images, something many of these frameworks leave out; apply a class to your images and they’ll scale with your design. No need to include multiple files at multiple sizes, though be wary of unnecessary load on mobile devices with this approach.. Alexandre Marreiros
  • 30. Less • Is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide mobile sizes — based on a grid system Alexandre Marreiros
  • 31. Twitter Bootstrap Twitter Bootstrap includes a responsive grid system in addition to tons of stellar pre-styled elements like forms, uttons, navigation menus and more. Alexandre Marreiros
  • 32. Foundation Alexandre Marreiros
  • 33. Responsive Web Design • Let’s use responsive frameworks, hands on lab part 2 http://www.techdigest.tv/2012/07/tech_pentathlon.html Alexandre Marreiros
  • 34. Final References • http://www.mrgeek.me/?s=bootstrap • http://www.abookapart.com/products/mobile-first • http://www.abookapart.com/products/responsive-web- design • http://www.smashingmagazine.com/responsive-web-design- guidelines-tutorials/ • Workshops exercises based on canonical web examples: – Alexandre Marreiros