SlideShare a Scribd company logo
Responsive Web Design
e a ubiquidade da web




Eduardo Shiota Yasuda
@shiota | www.eshiota.com
Uma (breve) História
do Design na Web
Tim Berners-Lee
Pai do HTTP, HTML, diretor da W3C, e cavaleiro.
Primeira página da Web
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Primeira Página do UOL
23/12/1996 - archive.org
EVIL
HTML » Print » Table » Tableless » Standards » ?
http://1to1interactive.net/blog/?p=1718
http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
Jeremy Keith's — @adactio — Instagram
HTML » Print » Table » Tableless » Standards »
     Responsive Web Design
Responsive Web Design
   Solução agnóstica à plataforma, browser e dispositivo
UOL
           Close, but no cigar.




Desktop   iPad Portrait    iPad Landscape   iPhone       iPhone
                                            Portrait   Landscape
UOL
          Close, but no cigar.




Desktop                          Desktop?
The Boston Globe
                Responsivelicious




Desktop       iPad Portrait   iPad Landscape   iPhone       iPhone
                                               Portrait   Landscape
1. Design flexível
         +
2. Media Queries
         +
3. Ajustes e plugins
Flexible Web Design
     Tipografia, grid & conteúdo
Golden rule
Target ÷ Contexto = Dimensão
Tipografia
   `em`
70px/80px




    24px/32px




14px/21px
body {
  font: normal normal 14px/21px "cabin", sans-serif;
}

.headline h1 {
  font: normal bold 70px/80px "enriqueta", serif;
}

.headline p {
  font-size: 24px;
  line-height: 32px;
}
body » font-size: 100%
  (16px na maioria dos browsers)
body {
  font: normal normal 100%/1.5 "cabin", sans-serif;
}
target (70px)




       target (24px)




                       CONTEXTO » body (16px)




target (14px)
Target ÷ Contexto = Dimensão

  70px ÷ 16px = 4.375em
 80px ÷ 70px = 1.142857143

    24px ÷ 16px = 1.5em
   32px ÷ 24px = 1.333333
body {
  font: normal normal 100%/1.5 "cabin", sans-serif;
}

.headline h1 {
  /* 70px ÷ 16px & 80px ÷ 70px */
  font: normal bold 4.375em/1.142857143 "enriqueta", serif;
}

.headline p {
  font-size: 1.5em; /* 24px ÷ 16px */
  line-height: 1.333333; /* 32px ÷ 24px */
}

.blog-post .post-content {
  font-size: .875em; /* 14px ÷ 16px */
}
Grids
 %
1000px


65px




       20px




660px         320px
#container {
  width: 1000px;
}

.main-content {
  float: left;
  width: 660px;
  margin-right: 20px;
}

.side-content {
  float: left;
  width: 320px;
}
Contexto (1000px)


Target (65px)


    Target (20px)




Target (660px)      Target (320px)
Target ÷ Contexto = Dimensão

       1000px = 100%

   660px ÷ 1000px = 66%
    20px ÷ 1000px = 2%
   320px ÷ 1000px = 32%
#container {
  width: 100%;
}

.main-content {
  float: left;
  width: 66%; /* 660px ÷ 1000px */
  margin-right: 2%; /* 20px ÷ 1000px */
}

.side-content {
  float: left;
  width: 32%; /* 32px ÷ 1000px */
}
Conteúdo
max-width: 100%
img, embed, object, video

     (IE6 => width: 100%)
525px


        210px
.blog-post .alignright {
  float: right;
  margin: 0 0 20px 16px;
}

.blog-post .alignright img {
  /* + 2px border + 2px padding = 210px */
  width: 206px;
}
Contexto (525px)


                   Target (210px)
Target ÷ Contexto = Dimensão

    210px ÷ 525px = 40%
.blog-post .alignright {
  float: right;
  margin: 0 0 20px 16px;
  width: 40%;
}

.blog-post .alignright img {
  max-width: 100%;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
$(function () {
  $(“#site-content”).find(“.main-content”).fitVids();
});
$(function () {
  $(“#site-content”).find(“.main-content”).fitVids();

  // FitText's formula:
  //
  // fontSize = elementWidth / (compressor * 10)
  // fontSize = 70
  // elementWidth = 1000
  // compressor = 100/70 = 1.428571429
  $("#site-content")
     .find(".headline h1")
     .fitText(1.428571429, {
       minFontSize: "36px",
       maxFontSize: "96px"
     });
});
Media Queries
    Tipos e features
Tipos
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv




Features
color                                    (min | max-)width
color-index                              grid
(min | max-)aspect-ratio                 monochrome
(min | max-)device-aspect-ratio          orientation
(min | max-)device-height                (min | max-)resolution
(min | max-)device-width                 scan
(min | max-)height                       -webkit-(min | max-)device-pixel-ratio
Sintaxe
[only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]*
[, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ]




Uso
<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” />



ou
@media screen and (max-width: 1200px) {
  /* insert styles here */
}
Exemplos
@media print and (max-width:21cm) {}

@media all and (max-width: 1024px) {}

@media only screen and (orientation:landscape)
              and (min-device-width:768px)
              and (max-device-width:1024px),
       only screen and (-webkit-device-aspect-ratio:1.5) {}
Exemplos
@media only screen and (orientation:landscape)
              and (min-device-width:768px)
              and (max-device-width:1024px),
       only screen and (-webkit-device-aspect-ratio:1.5) {}

   device-width: 1024px                     -webkit-device-aspect-ratio: 1.5
                                            (novo iPad)




                                            device-height: 768px

                                           orientation: landscape
@media screen and (max-width: 1024px) {
  // Diminuir a fonte do menu
}

@media screen and (max-width: 960px) {
  // Diminuir Header, logo e H2
  // Galeria de fotos em 3 colunas
  // Nav fixo à esquerda
  // Search input maior
}

@media screen and (max-width: 840px) {
  // Diminuir H2, nav e campo de busca
  // Formatação de data simples
}

@media screen and (max-width: 767px) {
  // Uma coluna ao invés de duas
}
Retina Display
The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
16 x 1 physical pixels
16 x 1 virtual pixels
device-pixel-ratio: 1    Normal displays




32 x 2 physical pixels
16 x 1 virtual pixels
device-pixel-ratio: 2    “Retina” displays
Display: Mostra physical pixels

 CSS: Interpreta virtual pixels
Physical Pixels: Imagens 4x maiores (2x width / 2x height)

Virtual Pixels: Dimensões virtuais, imagens redimensionadas
57px


240px
Normal display

                 sprite.png


                                  130px




                          260px
Normal display
#site-header h1 a {
    display: block;
    width: 240px;
    height: 57px;
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    background-position: -10px -10px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
“Retina” display
          sprite@2x.png




                                  260px




                          520px
“Retina” display
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #site-header h1 a {
        width: 240px; /* Virtual pixels, continua igual */
        height: 57px; /* Virtual pixels, continua igual */
        background-image: url(../images/sprite@2x.png);
        background-position: -10px -10px; /* Virtual pixels, continua igual */
        -webkit-background-size: 50% 50%; /* Dimensionando os Physical */
           -moz-background-size: 50% 50%; /* Pixels da imagem para os   */
            -ms-background-size: 50% 50%; /* Virtual Pixels do browser */
             -o-background-size: 50% 50%;
                background-size: 50% 50%;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
    }
}
“Retina” display
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #site-header h1 a {
        background-image: url(../images/sprite@2x.png);
        -webkit-background-size: 50% 50%;
           -moz-background-size: 50% 50%;
            -ms-background-size: 50% 50%;
             -o-background-size: 50% 50%;
                background-size: 50% 50%;
    }
}
Responsive Images
3008 x 2000
FAIL
<div data-picture data-alt="A beautiful kitty">
    <div data-src="jamie_small.jpg"></div>
    <div data-src="jamie_medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="jamie_large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="jamie_extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/jamie_small.jpg" alt="A beautiful kitty">
    </noscript>
</div>
Responsive Images
HiSRC
Usa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img>
https://github.com/teleject/hisrc

Adaptive Images
Server-side, usa .htaccess e PHP
http://code.google.com/p/css3-mediaqueries-js/

Picturefill
Usa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images
(tag <picture>)
https://github.com/scottjehl/picturefill

Outros
O Chris Coyier, do CSS-Tricks, fez um excelente comparativo entre as diferentes técnicas
(link em inglês)
http://css-tricks.com/which-responsive-images-solution-should-you-use/
WARNING
Nenhuma Media Query funciona no IE6–8 sem plugin. =/
Fallback para IE
Obrigado!
@shiota | www.eshiota.com

More Related Content

What's hot

Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
GetSource
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angular
David Amend
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
Nathan Smith
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha
 
Images and PWA in magento
Images and PWA in magentoImages and PWA in magento
Images and PWA in magento
Rrap Software Pvt Ltd
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
tothepointIT
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web Components
Rachael L Moore
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
Rachael L Moore
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
Ting Lv
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
Pablo Godel
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Mark
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
Jay Phelps
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
ambiescent
 
Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
Dirk Ginader
 
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
Sencha
 
Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
Cyril Balit
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
Sandino Núñez
 

What's hot (20)

Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angular
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 
Images and PWA in magento
Images and PWA in magentoImages and PWA in magento
Images and PWA in magento
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsCreating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web Components
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.jsAngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
 
Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Intro to Ember.JS 2016
Intro to Ember.JS 2016Intro to Ember.JS 2016
Intro to Ember.JS 2016
 

Similar to Responsive Web Design e a Ubiquidade da Web

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
zainm7032
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
EPAM
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
soovor
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
betabeers
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
Salesforce Developers
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Estelle Weyl
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Scott DeLoach
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by Maqbool
Navin Agarwal
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
 
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 MinutesRetro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
Rachel Chartoff
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 

Similar to Responsive Web Design e a Ubiquidade da Web (20)

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Lect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptxLect-4-Responsive-Web-06032024-082044am.pptx
Lect-4-Responsive-Web-06032024-082044am.pptx
 
Responsive design
Responsive designResponsive design
Responsive design
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Adaptive theming using compass susy grid
Adaptive theming using compass susy gridAdaptive theming using compass susy grid
Adaptive theming using compass susy grid
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
Formatting Images with CSS in MadCap Flare - MadCap webinar, Scott DeLoach, C...
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by Maqbool
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 MinutesRetro Responsive: From Fixed-Width to Flexible in 55 Minutes
Retro Responsive: From Fixed-Width to Flexible in 55 Minutes
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

More from Eduardo Shiota Yasuda

Front-end Culture @ Booking.com
Front-end Culture @ Booking.comFront-end Culture @ Booking.com
Front-end Culture @ Booking.com
Eduardo Shiota Yasuda
 
The anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia WorkshopThe anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia Workshop
Eduardo Shiota Yasuda
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
Eduardo Shiota Yasuda
 
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a websiteInternationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Eduardo Shiota Yasuda
 
Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browser
Eduardo Shiota Yasuda
 
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
Eduardo Shiota Yasuda
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Eduardo Shiota Yasuda
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
Eduardo Shiota Yasuda
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
Eduardo Shiota Yasuda
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Eduardo Shiota Yasuda
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da Programação
Eduardo Shiota Yasuda
 

More from Eduardo Shiota Yasuda (12)

Front-end Culture @ Booking.com
Front-end Culture @ Booking.comFront-end Culture @ Booking.com
Front-end Culture @ Booking.com
 
The anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia WorkshopThe anatomy of an A/B Test - JSConf Colombia Workshop
The anatomy of an A/B Test - JSConf Colombia Workshop
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
 
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a websiteInternationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
 
Web Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browserWeb Audio Band - Playing with a band in your browser
Web Audio Band - Playing with a band in your browser
 
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
 
O Design e a Interface no mundo da Programação
O Design e a Interface no mundo da ProgramaçãoO Design e a Interface no mundo da Programação
O Design e a Interface no mundo da Programação
 

Recently uploaded

GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Zilliz
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 

Recently uploaded (20)

GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 

Responsive Web Design e a Ubiquidade da Web

  • 1. Responsive Web Design e a ubiquidade da web Eduardo Shiota Yasuda @shiota | www.eshiota.com
  • 2. Uma (breve) História do Design na Web
  • 3. Tim Berners-Lee Pai do HTTP, HTML, diretor da W3C, e cavaleiro.
  • 4. Primeira página da Web http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 5. Primeira Página do UOL 23/12/1996 - archive.org
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. EVIL
  • 12.
  • 13. HTML » Print » Table » Tableless » Standards » ?
  • 17. Jeremy Keith's — @adactio — Instagram
  • 18. HTML » Print » Table » Tableless » Standards » Responsive Web Design
  • 19. Responsive Web Design Solução agnóstica à plataforma, browser e dispositivo
  • 20. UOL Close, but no cigar. Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  • 21. UOL Close, but no cigar. Desktop Desktop?
  • 22. The Boston Globe Responsivelicious Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  • 23. 1. Design flexível + 2. Media Queries + 3. Ajustes e plugins
  • 24.
  • 25. Flexible Web Design Tipografia, grid & conteúdo
  • 26. Golden rule Target ÷ Contexto = Dimensão
  • 27. Tipografia `em`
  • 28.
  • 29. 70px/80px 24px/32px 14px/21px
  • 30. body { font: normal normal 14px/21px "cabin", sans-serif; } .headline h1 { font: normal bold 70px/80px "enriqueta", serif; } .headline p { font-size: 24px; line-height: 32px; }
  • 31. body » font-size: 100% (16px na maioria dos browsers)
  • 32. body { font: normal normal 100%/1.5 "cabin", sans-serif; }
  • 33. target (70px) target (24px) CONTEXTO » body (16px) target (14px)
  • 34. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em 80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  • 35. body { font: normal normal 100%/1.5 "cabin", sans-serif; } .headline h1 { /* 70px ÷ 16px & 80px ÷ 70px */ font: normal bold 4.375em/1.142857143 "enriqueta", serif; } .headline p { font-size: 1.5em; /* 24px ÷ 16px */ line-height: 1.333333; /* 32px ÷ 24px */ } .blog-post .post-content { font-size: .875em; /* 14px ÷ 16px */ }
  • 37. 1000px 65px 20px 660px 320px
  • 38. #container { width: 1000px; } .main-content { float: left; width: 660px; margin-right: 20px; } .side-content { float: left; width: 320px; }
  • 39. Contexto (1000px) Target (65px) Target (20px) Target (660px) Target (320px)
  • 40. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷ 1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  • 41. #container { width: 100%; } .main-content { float: left; width: 66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */ } .side-content { float: left; width: 32%; /* 32px ÷ 1000px */ }
  • 42. Conteúdo max-width: 100% img, embed, object, video (IE6 => width: 100%)
  • 43. 525px 210px
  • 44. .blog-post .alignright { float: right; margin: 0 0 20px 16px; } .blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px; }
  • 45. Contexto (525px) Target (210px)
  • 46. Target ÷ Contexto = Dimensão 210px ÷ 525px = 40%
  • 47. .blog-post .alignright { float: right; margin: 0 0 20px 16px; width: 40%; } .blog-post .alignright img { max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
  • 48.
  • 49.
  • 50. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); });
  • 51.
  • 52.
  • 53. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); // FitText's formula: // // fontSize = elementWidth / (compressor * 10) // fontSize = 70 // elementWidth = 1000 // compressor = 100/70 = 1.428571429 $("#site-content") .find(".headline h1") .fitText(1.428571429, { minFontSize: "36px", maxFontSize: "96px" }); });
  • 54. Media Queries Tipos e features
  • 55. Tipos all, braille, embossed, handheld, print, projection, screen, speech, tty, tv Features color (min | max-)width color-index grid (min | max-)aspect-ratio monochrome (min | max-)device-aspect-ratio orientation (min | max-)device-height (min | max-)resolution (min | max-)device-width scan (min | max-)height -webkit-(min | max-)device-pixel-ratio
  • 56. Sintaxe [only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]* [, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ] Uso <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” /> ou @media screen and (max-width: 1200px) { /* insert styles here */ }
  • 57. Exemplos @media print and (max-width:21cm) {} @media all and (max-width: 1024px) {} @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {}
  • 58. Exemplos @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {} device-width: 1024px -webkit-device-aspect-ratio: 1.5 (novo iPad) device-height: 768px orientation: landscape
  • 59. @media screen and (max-width: 1024px) { // Diminuir a fonte do menu } @media screen and (max-width: 960px) { // Diminuir Header, logo e H2 // Galeria de fotos em 3 colunas // Nav fixo à esquerda // Search input maior } @media screen and (max-width: 840px) { // Diminuir H2, nav e campo de busca // Formatação de data simples } @media screen and (max-width: 767px) { // Uma coluna ao invés de duas }
  • 60. Retina Display The New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
  • 61. 16 x 1 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 1 Normal displays 32 x 2 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 2 “Retina” displays
  • 62. Display: Mostra physical pixels CSS: Interpreta virtual pixels
  • 63. Physical Pixels: Imagens 4x maiores (2x width / 2x height) Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  • 65. Normal display sprite.png 130px 260px
  • 66. Normal display #site-header h1 a { display: block; width: 240px; height: 57px; background-image: url(../images/sprite.png); background-repeat: no-repeat; background-position: -10px -10px; overflow: hidden; text-indent: 100%; white-space: nowrap; }
  • 67. “Retina” display sprite@2x.png 260px 520px
  • 68. “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/sprite@2x.png); background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 50% 50%; /* Dimensionando os Physical */ -moz-background-size: 50% 50%; /* Pixels da imagem para os */ -ms-background-size: 50% 50%; /* Virtual Pixels do browser */ -o-background-size: 50% 50%; background-size: 50% 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; } }
  • 69. “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { background-image: url(../images/sprite@2x.png); -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -ms-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; } }
  • 71.
  • 73. FAIL
  • 74.
  • 75. <div data-picture data-alt="A beautiful kitty"> <div data-src="jamie_small.jpg"></div> <div data-src="jamie_medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="jamie_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="jamie_extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/jamie_small.jpg" alt="A beautiful kitty"> </noscript> </div>
  • 76. Responsive Images HiSRC Usa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img> https://github.com/teleject/hisrc Adaptive Images Server-side, usa .htaccess e PHP http://code.google.com/p/css3-mediaqueries-js/ Picturefill Usa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images (tag <picture>) https://github.com/scottjehl/picturefill Outros O Chris Coyier, do CSS-Tricks, fez um excelente comparativo entre as diferentes técnicas (link em inglês) http://css-tricks.com/which-responsive-images-solution-should-you-use/
  • 77. WARNING Nenhuma Media Query funciona no IE6–8 sem plugin. =/
  • 79.
  • 80.