Página principal

Diseño web adaptable

https://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable

El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos, desde ordenadores de escritorio a tablets y móviles.

Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.

¿En qué consiste el diseño responsive?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.

Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y utiliza código media-queries de CSS3 y no javascript (programación) para dicho propósito, ya que no siempre el javascript de los usuarios está activado y CSS3 permite perfectamente cumplir dicho objetivo.

El DWR permite reducir el tiempo de desarrollo de sitios web, evita los contenidos duplicados (tres o cuatro páginas de la misma empresa, persona o producto para dispositivos diferentes), y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural en las redes sociales, desde y hacia los dispositivos móviles.

Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario la forma más similar posible en todos los dispositivos, pero no igual, no el mismo diseño mas chico y mas grande, sino, de acuerdo la lógica de cada aparato, que asegure su correcta interpretación utilización y legibilidad del sitio en cada dispositivo que el usuario utilice.

El diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web. Aunque como tiene sus pros y contras, la web responsive es considerada hoy en día la mejor práctica posible en el diseño web.

Puntos a tener en cuenta a la hora de hacer tu web responsive

Que será mejor: ¿Web responsive? ¿Web móvil? Cada una tiene sus ventajas e inconvenientes.

Las opciones para ofrecer nuestra web a los usuarios que nos visitan desde dispositivos móviles son varias: web móvil, app nativa y web responsive. Cada una tiene sus pros y sus contras y a priori, la que más fuerza está cogiendo es la web responsive por un tema sencillo: es la más barata y rápida. Y no por ello la más sencilla, que podría parecer que si.

Esta técnica ha modificado totalmente la forma en la que se diseña. Ha modificado el patrón. Ya no solo esta técnica sino que realmente el propio usuario y sus hábitos de navegación y consumo ha cambiado las reglas.

No me voy a meter demasiado en porque el diseño responsive es la mejor opción de todas que para mi están claras, sino que vamos a hablar de algunas cosas que debes saber y tener bien claras antes de decidirte por esta opción. Como ya explicamos en los consejos para mejorar el SEO móvil de tu web, el propio Google, recomienda el diseño responsive antes que crear una página web móvil completa. Los motivos son claros y los compartimos en su totalidad: la experiencia de usuario mejorará considerablemente, evitamos posibles problemas de contenido duplicado y le damos al usuario una imagen consistente.

Sin embargo, aunque Google lo recomiende, puede que tu web no tenga que tener un diseño responsive. Por ejemplo, si tienes una landing page y estás totalmente centrado en conversión, puede que necesites un diseño totalmente diferente en móvil y esta técnica por lo tanto no encaje ya que quieres mostrar otra información.

Algunos puntos que debes tener muy en cuenta antes de hacer tu web responsive.

Carga de página

Uno de los grandes problemas que nos encontramos cuando hacemos una auditoría es que en los diseños responsive no se diferencia a nivel de servidor la carga de elementos. Esto es un gran problema en la carga de página ya que al hacer la web responsive se cargan exactamente los mismos recursos que para tu web de escritorio.

Para solucionarlo, trata de utilizar librerías que te permitan hacer una carga de página condicional, evitando cargar recursos innecesarios cuando la gente te visita desde móvil.

Ojo con los tamaños de pantalla

Hay que tener mucho cuidado a la hora de diseñar. Se recomienda diseñar con el patrón mobile-first para evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles. La gran cantidad de dispositivos y pantallas que existen en el mercado hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.

Guía para el desarrollo web móvil (inglés)

Evita los efectos

Algunos de los efectos que usas en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no haces una comprobación multi dispositivo-plataforma puede que te encuentres que sorprendentemente el tiempo por visita desde móvil es extrañamente bajo. Esto pasa mucho, por ejemplo, cuando el “leer más” de una noticia aparece en el hover. El hover no existe en móvil por lo que el usuario no podrá continuar su visita.

No olvides medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil.

Ten en cuenta todas estas cosas antes de lanzarte, así como el diseño responsive mejora la experiencia de usuario, como hemos visto, no siempre tiene que ser así.

Los diferentes Tamaños de pantalla según diversos dispositivos

La caja contenedora de la página web en medidas porcentuales.

1-Usar un ancho en porcentajes, el el body o en el div contenedor principal.

Ejemplo

div#contenedor {

width:90%;

}

No especificar el alto, así se adapta a la cantidad de texto y al tamaño de cada pantalla.

-------------------------------------------

para que no quede demasiado ancho o angosto en ciertas pantallas, debemos espexcificar el ancho y el largo máximo y mínimo.

div#contenedor {

width: 980%;

max-width: 1500px;

min-width: 300px;

}

-----------------------------------------------------------------------------------------------------------------------------------------

un ejemplo básico

<!DOCTYPE html>

<html>

<title>Responsive web 1</title>

<style>

div#contenedor {

width: 95%;

max-width: 1500px;

min-width: 300px;

}

.container1{

background-color:#222;

color:#f5f5f5;

}

.container2{

background-color:#f5f5f5;

}

</style>

<body>

<h1>Mi paraiso</h1>

</div>

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>

</div>

<p>información personal a pie de página</p>

</div>

</body>

</html>

ver online con editor

ver online sin editor

Otras formas de escribir el código de la CSS

<style>

div#contenedor {

width: 95%;

max-width: 1500px;

}

</style>

<style>

.contenedor {

width: 95%;

}

.container.limit {

max-width: 1200px;

}

</style>

<style>

.contenedor {

width: 95%;

}

.container.limit {

max-width: 1200px;

min-width:450px;

}

</style>

el fundamental que las imágenes tengan también el mismo porcentaje de ancho

(ejemplo_ a la imagen agregarle: style="width:95%" )

-------------------------------------------

Mi técnica

Prefiero poner el style y class en el body y la imagen, eso me da mas control sobre lo que estoy haciendo.

<!DOCTYPE html>

<html>

<head>

<title>Web Responsive</title>

</head>

<h1>Mi Paraíso</h1>

</div>

<p>Lorem ipsum, lorem ipsum. Lorem ipsum, lorem ipsum. Lorem ipsum, lorem ipsum. Lorem ipsum, lorem ipsum.<br>

Lorem ipsum, lorem ipsum. Lorem ipsum, lorem ipsum.

</p>

<p>Información a pie de página</p>

</div>

</body>

</html>

El layout, también debe ir en medidas porcentuales

Necesitamos trabajar con porcentajes para que el layout también sea fluido ya sea el tamaño de dispositivo que el usuario utilice para visualizar la página.

.columna-izquierda {

float:left;

width:70%;

}

.columna-derecha {

float:left;

width:30%;

}

-------------

Ejemplos de layout fluido

ejemplo 1

.columna-izquierda {

float:left;

width:60%;

}

.columna-derecha {

float:left;

width:40%;

}

---------

ejemplo2

.columna{

position:relative;

float:left;

}

.columna.izquierda{

width:75%;

}

.columna.derecha{

width:25%;

}

--------------

ejemplo3

.contenedor{

width:100%;

max-width:800px;

}

.encabezado{

width:100%;

}

.columna{

float:left;

width:20%;

}

Los textos deben ir en Em

Para textos en responsive design se usan unidades relativas

Las unidades relativas no tienen un tamaño fijo, varían según el tipo de dispositivo o según los tamaños de otros elementos de una web.

Especiales para el Responsive Design, podemos usarlas y variando una sola, todas las demás conseguirán adaptarse (con ayuda de @media queries por ejemplo).

Estas son las medidas relativas más relevantes:

em: esta medida es relativa al tamaño de la letra, y aunque suene redundante lo que hace es tomar el tamaño que debería de tener esta letra y lo multiplica. Si una letra, según el estilo de la letra de una página es de 14px y a un elemento le damos 2em multiplicaremos por dos ese tamaño.
rem: esta medida es idéntica a la anterior, pero depende del tamaño del texto del elemento html (en el CSS).

Las medidas absolutas (cm, mm y pt o px) no sirven para el diseño web, responsive (salvo las plantillas que se usarán para imprimir (ejemplo mi Curriculum Vitae y es necesario que se visualice en tamaño folio independientemente de la pantalla - tamaño o medida absoluta).

Estas medidas en el Responsive Design debemos de evitarlas en mayor medida, aunque es imposible ya que nos ayudarán a marcar los tamaños relativo en nuestra web, con las siguientes unidades relativas.

Unidades absolutas solo para textos que deban imprimirse

Las medidas absolutas (cm, mm y pt, por ejemplo) no son recomendables usarlas en el diseño web, salvando excepciones como contenidos destinados a ser impresos (por poner un ejemplo mi Curriculum Vitae está destinado a tal fin o a que se visualice en tamaño folio en cualquier pantalla).

Estas medidas en el Responsive Design debemos de evitarlas en mayor medida, aunque es imposible ya que nos

ayudarán a marcar los tamaños relativo en nuestra web, con las siguientes unidades relativas.

Leer el siguiente tutorial para el uso de textos en RWD.

http://www.cristalab.com/blog/la-tipografia-en-tiempos-de-responsive-c112999l/

Las imágenes

Usar imágenes SVG

SVG (Scalable Vector Grafic) es un nuevo formato de imagen para HTML5 que ofrece imágenes vectoriales que pueden redimensionarse hasta el infinito sin perder calidad (evitando el pixelado y que las imágenes de la web sean muy pesadas para cargar las páginas ).

Usar archivos SVG nos ayudarán a reducir el tamaño de nuestra web y mantener una buena calidad en estas imágenes, ya sea en un móvil pequeño o en un monitor de alta resolución.

Ventajas

SVG está basado en XML y se puede comprimir fácilmente en las transmisiones, lo que ayuda a reducir el tamaño de carga en los móviles.

Los archivos SVG se pueden usar de varias formas:

-Como un elemento más en la página HTML (copiando tal cual el SVG)

-Añadiendo un objeto SVG

-Añadiendo una imagen con formato SVG.

Diferencia entre SVG y una imagen normal

-Las imágenes de mapa de bits (jpg, png o gif) almacenan la información de cada uno de sus píxeles.

-Las imágenes vectoriales (como SVG) almacenan líneas, curvas, degradados y el resto de información necesaria para crear la imagen como formulas matemáticas, y el propio programa que lo visualiza es el que crea luego la información de cada píxel para que lo veamos(se crea en tiempo real en la pantalla, es decir que no está cada pixel de la pantalla guardado en memoria).

Esta característica hace los vectores perfectos para el Responsive Design, ya que podemos redimensionar iconos o imágenes sin perder calidad.

Voy a mostrar un pequeño esquema de la arquitectura de Von Neumann, que está hecho con SVG y se adapta a cualquier tamaño de pantalla.

Podemos tener imágenes que no pierden calidad al redimensionarse, como podemos ver a continuación comparando una imagen SVG con una PNG.

SVG

PNG

En este otro ejemplo se puede ver una imagen vectorial más compleja y que mantendrá su calidad con cualquier tamaño.

Cómo usar una imagen SVG

Hay distintas formas de usar las imágenes vectoriales, pero la más simple es la de usar un archivo SVG como si de una imagen cualquiera se tratase.

Ejemplo 1

Ejemplo 2

SVG no soportado.

</object>

Ejemplo 3

</svg>

También se puede usar como imagen de fondo a través de CSS, igual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tamaño de los archivos que recibe nuestra página para funcionar (y así no usar grandes imágenes de fondo (muy pesadas).

También evitamos el uso de imágenes de baja calidad colo las gif y jpg muy comprimido, que se usaban para bajar el peso de la página.

Todo ello conduce a una web más de mayor calidad visual, y más ligera y adaptable.

Compatibilidad

SVG tiene un gran soporte por parte de todos los navegadores, pero en algunos antiguos (ya sean de escritorio o móviles) pueden no tener compatibilidad, por lo que es buena idea tener un as en la manga si esto nos pasa, por ejemplo: usando pictografías, que son vectores con iconos que actuan como letras (por poner un ejemplo, en la barra lateral de este blog encontraréis los iconos sociales que son pictografías).

Es buena idea empezar a usar SVG en los diseños para tener una calidad óptima sin incrementar el tamaño de los archivos.

Puedes conseguir imágenes vectoriales en plataformas como Freepik o Flat Icon, y podréis editarlos con aplicaciones como Inskape o Illustrator.

Usar pictografías

http://xitrus.es/blog/58/Pictograf%C3%ADas

Las media queries

http://xitrus.es/blog/125/Utiliza_media_queries_en_JavaScript_con_matchMedia

Más sobre DWR

https://www.ernestojimenez.net/art/tipografia-web-responsive-tamano-interlineado/

https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=es