→ Categories Blog
responsive-web-design

Responsive Web Design

| Enric Garcia

QUÈ ÉS EL RESPONSIVE WEB DESIGN?

El Responsive Web Design permet crear llocs web que s’adapten a l’ample del dispositiu en què s’estigui navegant, el que permet tenir un únic disseny per a PC, mobile i tauletes, és a dir, permeten a la nostra pàgina web adaptar-se al mitjà a través del qual un usuari accedeix a la mateixa.

AVANTATGES DE CREAR UN LLOC AMB RESPONSIVE WEB DESIGN

  • Reducció de costos. Es redueixen els costos ja que fins a hui es feia un portal per a la Web i un altre per a dispositius mòbils. Això origina majors costos de creació i manteniment de la informació.
  • Eficiència en l’actualització. El lloc només s’ha d’actualitzar una vegada i es veu reflectida a totes les plataformes. Quan tenim els portals independents per Web i Mobile s’ha de realitzar l’actualització dues vegades, el que crea la necessitat de major quantitat de recursos i possibilitat d’error.
  • Millora la usabilitat i conversió. Aquesta tecnologia aporta a la usabilitat i la conversió. S’han fet estudis que demostren que quan s’aprofita tota la pantalla del visitant augmentala conversió.
  • Impacte en el visitant. Aquesta tecnologia per ser nova genera impacte en les persones que la vegin en acció, el que permetrà associar a la marca amb creativitat i innovació.

A continuació veurem les diferents accions a tenir en compte a l’hora de crear un web responsive:

FLEXIBLE LAYOUT

  • Contingut fluid (%)
  • Grandària en percentatge = mida / total * 100
  • box-sizing: border-box. Inclou el padding i la vora en l’ample total (IE8 +)

TIPOGRAFIA

  • Utilitza em, rem,%
  • em = grandària en px/16px
  • 24px/16px = 1.5em

FLEXIBLE IMAGES CSS

Imatge s’ajusta a l’amplada del contenidor

img, embed, object, vídeo {
max-width: 100%;
overflow: hidden;
height: auto;
}

RESPONSIVE VÍDEOS

Plugin de jQuery que adapta la mida dels embeds de Youtube, Vimeo …

https://github.com/davatron5000/FitVids.js

MEDIA QUERIES

La regla @media ens permet especificar que cert conjunt de regles CSS només s’han d’aplicar a un cert tipus de dispositiu.

  • CSS 2.1

@media{media type:screen, handheld, print, all, tv, …}
{media feautures:width, orientation,…}
@media print{* {font-family: arial}}

  • HTML

<link rel=”stylesheet” media=”{media type} {media feautures}” href=”/example.css”/>
<link rel=”stylesheet” type=”text/css” media=”print” href=”/arial.css”>

 MEDIA FEAUTURES

Encara que les media queries  disposen de moltes propietats diferents, aquestes són les més importants:

  • width

@media screen and (min-width: 400px) and (max-width:700px){ … }

  • device width

@media screen and (device-width: 800px){…}

  • orientantion

@media all and (orientation:portrait) {…}
@media all and (orientation:landscape) {…}

TAMANYS BÁSICOS

/*Landscape phones and down */
@media(max-width: 480px) {
}
/*Landscape phones to portrait table */
@media(max-width: 767px) {
}
/*Portrait table to landscape and desktop */
@media(max-width: 768px) and (max-width:979px) {
}
/*Large desktop*/
@media (min-width: 1200px){
}

VIEWPORT

Els navegadors dels smartphones emulen la resolució de l’escriptori (800-980px) perquè deixin de fer-ho i agafin la mida real que indiquem cal afegir aquest meta:

<meta name="viewport" content="width-device-width, initial-scale=1"> 

Després d’assistir a la presentació de Javier Arques a Frontenders València, hem fet aquest article que és un esquema basat en la seva presentació per tenir en compte a l’hora de crear un lloc responsive. Per a més informació visiteu les fonts:

http://es.slideshare.net/JavierArquesHernndez

http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/