Edit open day responsive design frameworks


Published on

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


Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Edit open day responsive design frameworks

  1. 1. Alexandre Marreiros
  2. 2. The Trainner • CTO @ INNOVAGENCY • Tech Trainner & Speaker as Idependent • Tech and Buis Consultant as@alexmarreirosDigitalmindignition.com Independentamarreiros@gmail.com Alexandre Marreiros
  3. 3. “The control which designers know in the printmedium, and often desire in the web medium, issimply a function of the limitation of the printedpage. We should embrace the fact that the webdoesn’t have the same constraints, and designfor this flexibility. But first, we must “accept theweb and flow of things.” John Allsopp, “A Dao of Web Design” Alexandre Marreiros
  4. 4. http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg Alexandre Marreiros
  5. 5. Web work is a all different story Browser’s Resolutions and sizes User’s Devices Alexandre Marreiros
  6. 6. Landscape / Portrait • http://www.sermonaudio.com/new_details.asp?ID=30996 Alexandre Marreiros
  7. 7. Web Client desires“Almost every new client these days wants a mobile version oftheir website. It’s practically essential after all: one design forthe BlackBerry, another for the iPhone, the iPad, netbook, Kindle— and all screen resolutions must be compatible, too. In thenext five years, we’ll likely need to design for a number ofadditional inventions. When will the madness stop? It won’t, ofcourse.” Kayla Knight Alexandre Marreiros
  8. 8. So is just to Be Flexible ? http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html Alexandre Marreiros
  9. 9. Flexible Web DesignEthan Marcotte Flexibel Design examplehttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html Alexandre Marreiros
  10. 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
  11. 11. “responsive architecture”http://www.youtube.com/watch?feature=player_embedded&v=XYV0 Alexandre Marreiros
  12. 12. Responsive Web Design“This is our way forward. Rather than tailoring disconnecteddesigns to each of an ever-increasing number of web devices,we can treat them as facets of the same experience. We candesign for an optimal viewing experience, but embed standards-based technologies into our designs to make them not onlymore flexible, but more adaptive to the media that rendersthem. In short, we need to practice responsive web design.” Ethan Marcotte Alexandre Marreiros
  13. 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. 14. Responsive Web Design• Fluid Grids (http://www.alistapart.com/articles/fluidgrids/) Alexandre Marreiros
  15. 15. Responsive Web Design• Media Queries (http://www.w3.org/TR/css3-mediaqueries/ ) Alexandre Marreiros
  16. 16. Responsive Web Design Examples http://mdcraftbeerfestival.com/ Alexandre Marreiros
  17. 17. Responsive Web Design Examples http://www.formfett.net/ Alexandre Marreiros
  18. 18. Responsive Web Design Examples http://forefathersgroup.com/ Alexandre Marreiros
  19. 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. 20. Media Queries• Example: @media screen and (max-device-width: 480px) { .column { float: none; } } Alexandre Marreiros
  21. 21. Responsive Web DesignFirst we target what our conditional with the attribute @mediaExamples:@media only screen and (max-width:1023 px)  smallscreens@media only screen and (min-device-width: 481px ) and (max-devicewidth:1024 px) and (orientation: landscape)  ipad landscap@media only screen and (min-device-width: 481px ) and (max-devicewidth:1024 px) and (orientation: portrait)  ipad portrait Alexandre Marreiros
  22. 22. Responsive Web DesignTable with the most common resolutions Alexandre Marreiros
  23. 23. Responsive Web DesignTable with the most common resolutions Alexandre Marreiros
  24. 24. Responsive Web DesignTable with the most common resolutions Alexandre Marreiros
  25. 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. 26. Responsive Frameworks Alexandre Marreiros
  27. 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. 28. SkeletonIs a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Alexandre Marreiros
  29. 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. 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. 31. Twitter BootstrapTwitter Bootstrap includes a responsive grid system in additionto tons of stellar pre-styled elements like forms, uttons,navigation menus and more. Alexandre Marreiros
  32. 32. Foundation Alexandre Marreiros
  33. 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. 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