Alexandre Marreiros

The Trainner

• CTO @ INNOVAGENCY• Tech Trainner & Speaker as

Idependent• Tech and Buis Consultant as

Independent@alexmarreiros

Digitalmindignition.com

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

Alexandre Marreiros

http://commons.wikimedia.org/wiki/File:Architecture_Cologne.jpg

Web work is a all different story

Alexandre Marreiros

Resolutions and sizes

User’sDevices

Browser’s

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 examplehttp://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=XYV0qATsyts

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

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

Responsive Web Design

Alexandre Marreiros

Responsive Web Design

Alexandre Marreiros

Table with the most common resolutions

Responsive Web Design

Alexandre Marreiros

Table with the most common resolutions

Responsive Web Design

Alexandre Marreiros

Table with the most common resolutions

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