0
Alexandre Marreiros
The Trainner                          • CTO @ INNOVAGENCY                          • Tech Trainner & Speaker as           ...
“The control which designers know in the printmedium, and often desire in the web medium, issimply a function of the limit...
http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg                                              Alexandre Mar...
Web work is a all different story                   Browser’s    Resolutions    and sizes                  User’s         ...
Landscape / Portrait    •   http://www.sermonaudio.com/new_details.asp?ID=30996                                           ...
Web Client desires“Almost every new client these days wants a mobile version oftheir website. It’s practically essential a...
So is just to Be Flexible ?    http://academiafabiocosta.blogspot.pt/2011/06/faca-exercicios-para-melhorar-sua.html       ...
Flexible Web DesignEthan Marcotte Flexibel Design examplehttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flex...
Flexible Web Design     There still a problem to solve     •User expetation     •And sizes design/cross devices     “…no d...
“responsive architecture”http://www.youtube.com/watch?feature=player_embedded&v=XYV0                                      ...
Responsive Web Design“This is our way forward. Rather than tailoring disconnecteddesigns to each of an ever-increasing num...
Responsive Web Design• Flexible Images (  http://www.flexiblewebbook.com/bonus.html)<h1 id="logo"><a href="#"><img src="si...
Responsive Web Design• Fluid Grids (http://www.alistapart.com/articles/fluidgrids/)                                       ...
Responsive Web Design• Media Queries (http://www.w3.org/TR/css3-mediaqueries/ )                                           ...
Responsive Web Design Examples               http://mdcraftbeerfestival.com/                                     Alexandre...
Responsive Web Design Examples                  http://www.formfett.net/                                  Alexandre Marrei...
Responsive Web Design Examples                http://forefathersgroup.com/                                    Alexandre Ma...
Media Queries• Part of the CSS3 specification• Allows us to target not only certain device classes, but to  actually inspe...
Media Queries• Example: @media screen and (max-device-width: 480px)  {      .column { float: none; }  }                   ...
Responsive Web DesignFirst we target what our conditional with the attribute                           @mediaExamples:@med...
Responsive Web DesignTable with the most common resolutions                                         Alexandre Marreiros
Responsive Web DesignTable with the most common resolutions                                         Alexandre Marreiros
Responsive Web DesignTable with the most common resolutions                                         Alexandre Marreiros
Responsive Web Design• Let’s build some responsiviness. Hands on Lab 1st part                                   http://www...
Responsive Frameworks                        Alexandre Marreiros
Mobile Boilerplate• a responsive template that puts the focus on mobile devices,  namely those running Android, iOS, Black...
SkeletonIs a light collection of CSS and JavaScript files that make   designing responsive sites based on the 960px grid e...
BluCSS•   CSS framework that, as usual, uses a flexible grid to facilitate responsive design.    One feature that stands o...
Less•   Is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide    mobile sizes — based on a gr...
Twitter BootstrapTwitter Bootstrap includes a responsive grid system in additionto tons of stellar pre-styled elements lik...
Foundation             Alexandre Marreiros
Responsive Web Design• Let’s use responsive frameworks, hands on lab part 2                                  http://www.te...
Final References• http://www.mrgeek.me/?s=bootstrap• http://www.abookapart.com/products/mobile-first• http://www.abookapar...
Upcoming SlideShare
Loading in...5
×

Edit open day responsive design frameworks

841

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

13-1-2013

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

No Downloads
Views
Total Views
841
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×