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
Llegiu abans:
Desenvolupament multiplataforma
I recomano l'article de Google:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=es
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):
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/
Extret de:
http://www.ticplace.es/que-es-eso-del-responsive-design/
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:
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
Vegeu Accesibilitat. Per garantir l'accessibilidad de la finestra gràfica:
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
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).
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
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.
é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
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:
Vegeu l'article HTML tables l'apartat HTML_tables#Responsive_tables
Resources:
Vegeu Datatables i:
https://datatables.net/extensions/responsive/ http://exisweb.net/responsive-table-plugins-and-patterns
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
Acacha Wiki<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
Exemple:
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: