Post on 23-Jan-2015
description
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