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. Alexandre Marreiros

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

4. http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg
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

11. “responsive architecture”
http://www.youtube.com/watch?feature=player_embedded&v=XYV0
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