IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Responsive web design aka rwd o Disseny web adaptable és un terme definit per primer cop al 2010 per Ethan Marcotte a http://alistapart.com vegeu l'article:

http://alistapart.com/article/responsive-web-design/
https://uxplanet.org/responsive-design-best-practices-c6d3f5fd163b

Repos

Introducció

Llegiu abans:

Desenvolupament multiplataforma

I recomano l'article de Google:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=es

Tipus de Responsive Designs amb exemples de webs 1

Nou link Google samples: https://github.com/googlesamples/web-fundamentals/tree/gh-pages/fundamentals/design-and-ui/responsive
https://responsivedesign.is/patterns/

Llista de patrons utilitzats (extret de https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns?hl=es):

  • Tiny tweaks: tècnica bàsica en que no es modifica el layout sinó que només es realitzen "petits ajustaments" com modificar mida de lletra, paddings i marges, etc . Exemple: https://acacha.github.io/responsive-examples/tiny-tweaks.html
  • Mostly fluid: tant aquest patró com Column drop es basen en mostrar "stackat"/apilat el contingut (columnes) en mobils i a mesura que hi ha més espai mostrar el contingut en columnes. En el cas de mostly-fluid s'anomena així per que no ocupem tot el ampla de la pantalla amb les columnes quan tenim espai (mostly) sinó que deixem un marge als laterals (i/o fiem la mida màxima del contingut central). És a dir quan parlem d'un disseny fluid parlem d'un disseny que ocupa tota la pantalla a mesura que disposa de més espai.
  • Column drop: similar a l'anterior però amb un disseny fluid.
  • Layout shifter: similar als dos anteriors però a més a modificació d'ordre (shift) del layout. S'utilitza típicament Flexbox (que suporta indicar l'ordre) o altres tècniques com les opcions push/pull de boostrap per reproduir aquest esquema.
  • Off canvas: sistema responsive que consisteix en amagar (a distància d'un click) el contingut secundari com per exemple menús de navegació/sidebar. Molt utilitzat en aplicacions mòbils (menús dels tres punts tipics a Action Bars Android) i en frameworks com Bootstrap amb el típic menú accessible via una hamburger icon.
  • Altres patrons responsive:

Vegeu també Flexbox i Bootstrap 4.

Recursos:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/?hl=en
https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/?hl=es
https://carlosazaustre.es/blog/los-5-patrones-del-responsive-design/

Tipus de Responsive Designs amb exemples de webs 2

Extret de:

http://www.ticplace.es/que-es-eso-del-responsive-design/
  • Adaptándose al ancho: Este tipo de diseño es uno de los más comunes, que se distingue por no mover en exceso los elementos de la web e intentar que se adapten al ancho de pantalla reduciendo el menú (a veces cambiando la disposición), redimensionado las imágenes y poco más, como ejemplos pongo los siguientes: Mejorando.la (ja no existeix porta a http://platzi.com) y Xitrus.
  • Cascada de columnas: En este caso tenemos una web con varias columnas, que al visualizarse en pantallas estrechas se pondría una debajo de la otra seguidamente, por ejemplo: Modernizr y Wee Nudge.
  • Reestructuración: Como el propio título indica en esta variante cambiamos la estructura de los elementos disponiéndolos de una forma distinta según el tamaño de ventana y se puede hacer de muchas formas (hay solo depende del diseño que queramos) por ejemplo: CSS-Tricks y Food Sense.
  • Cambio del diseño visual: Esta se podría decir que no es una forma de estructurar el contenido para hacerlo más fácil de manejar fuera del navegador de escritorio, sino que según el tamaño de la ventana adapta el diseño de una forma u otra por motivos estéticos, y suele usarse en las típicas web que te dan la información sobre algo de forma rápida y concisa, como en las siguientes: Neovada y Design made in Germany.

Viewport

http://www.html5rocks.com/en/mobile/mobifying/?redirect_from_locale=es#toc-meta-viewport
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=es
http://ghepting.github.io/resizer/

Un Viewport en computer graphics és un polygon viewing region és a dir una regió en forma poligonal (el polígon més habitual un quadrat) on es mostra quelcom. Aka finestra gràfica

Farem referència al browser viewport és a dir al viewport del navegador, vegeu uns exemples gràfics del que és:

https://www.google.es/search?q=browser+viewport&client=ubuntu&hs=K6u&channel=fs&source=lnms&tbm=isch&sa=X&ei=6_xgVMuyHdLPaN7igdAC&ved=0CAgQ_AUoAQ&biw=634&bih=267

Es posa típicament:

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

On:

width=device-width:

A la web:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=es

Podeu trobar exemple amb viewmport i sense.

Vegeu un exemple sense:

https://googlesamples.github.io/web-fundamentals/samples/fundamentals/design-and-ui/responsive/fundamentals/vp-no.html
http://www.w3schools.com/css/example_withoutviewport.htm

I un amb:

https://googlesamples.github.io/web-fundamentals/samples/fundamentals/design-and-ui/responsive/fundamentals/vp.html
http://www.w3schools.com/css/example_withviewport.htm

Recursos:

Exemples adaptació mida pantalla

vegeu vídeo del widget de forecast a:

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=es
https://googlesamples.github.io/web-fundamentals/samples/fundamentals/design-and-ui/responsive/fundamentals/vp-no.html

O el següent exemple de Bootstrap:

http://acacha.org/~sergi/bootstrap-example/grid-ejemplo1.html

On les diferents files s'adapten segon l'ampla del viewport i segons les 4 mides de cuadricules de Bootstrap. Vegeu Bootstrap Grid

Accesibilitat

Vegeu Accesibilitat. Per garantir l'accessibilidad de la finestra gràfica:

  • minimum-scale
  • maximum-scale
  • user-scalable

Que pot inhabilitar l'opció de fer zoom provocant problemes d'accessibilitat. Atenció a les aplicacions híbrides solen desactivar el zoom:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,width=device-width">

NOTA: Amb Emmet el viewport s'estableix per aplicacions híbrides amb meta:vp més tabulador

Bootstrap

A Bootstrap com podeu veure a:

http://getbootstrap.com/examples/starter-template/

S'estableix:

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

És a dir l'ampla adaptat a la mida del dispositiu i amb una escala inicial 1 (sense zoom ni ampliant ni reduint).

Aplicacions híbrides

Cordova desabilita el zoom:

 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,width=device-width">

NOTA: Amb Emmet el viewport s'estableix per aplicacions híbrides amb meta:vp més tabulador

Viewport sizes

La següent pàgina mostra una llista amb la mida del viewport en dispositius reals:

http://viewportsizes.com/

Per veure la mida del viewport per a qualsevol dispositiu podeu entrar a la web:

http://viewportsizes.com/mine/

Des del dispositiu que us interessi.

Chrome plugin

és un plugin que us mostrarà la mida del viewport quan esteu canviant la mida de la finestra.

https://chrome.google.com/webstore/detail/viewport-dimensions/kchdfagjljmhgapoonapmfngpadcjkhk

CSS media queries

Vegeu CSS media queries

When developing a mobile site with a meta viewport tag, it’s easy to accidentally create page content that doesn’t quite fit within the specified viewport. For example, an image that is displayed at a width wider than the viewport can cause the viewport to scroll horizontally. You should adjust this content to fit within the width of the viewport, so that the user does not need to scroll horizontally.

Since screen dimensions and width in CSS pixels vary widely between devices (e.g. between phones and tablets, and even between different phones), content should not rely on a particular viewport width to render well.

Setting large absolute CSS widths for page elements (such as the example below), will cause the div to be too wide for the viewport on a narrower device (e.g. a device with a width of 320 CSS pixels, such as an iPhone). Instead, consider using relative width values, such as width: 100%. Similarly, beware of using large absolute positioning values that may cause the element to fall outside the viewport on small screens.

Recursos:

Tables

Vegeu l'article HTML tables l'apartat HTML_tables#Responsive_tables

Table stack

Resources:

Datatables

Vegeu Datatables i:

https://datatables.net/extensions/responsive/
http://exisweb.net/responsive-table-plugins-and-patterns

Tests

Eines i exemples

Laravel Elixir i BrowserSync

Imatges adaptables

El nou element picture de HTML5 el suport:

http://caniuse.com/#search=picture

Es pot afegir suport amb polyfill//Shim:

https://github.com/scottjehl/picturefill 
<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>


Resources


Boostrap images

Exemple:

Eines

RESS. Responsive Web Design with Server-Side Component

Vegeu RESS i Responsive Web Design with Server-Side Component. Amb Laravel recomano:

https://github.com/jenssegers/agent

Un paquet laravel que incorpora un objecte $agent amb un munt de funcions per detectar el tipus de navegador.

Recursos:

Vegeu també

Enllaços externs