Responsive Web Design. PROCEDIMIENTOS HABITUALES EN EL DISEÑO ADAPTABLE.

1. Pasos para diseñar un sitio responsive

1.1. Antes de comenzar se tiene claro el objetivo del sitio.

1.1.1. Se ha hecho un prototipo en papel o cualquier otra herramienta de prototipado

1.1.2. Tanto el cliente como el desarrollador han llegado a un consenso sobre cómo debe ser la web y qué elementos debe contener

1.1.3. Ser bastante concisos con los contenidos que se deben mostrar, eliminando aquello que sea superfluo o innecesario

1.1.4. Racionalizar el contenido que debe tener la web.

1.1.5. Comenzar por montar la web para que se vea bien en móviles.

1.2. 1) Crear un HTML con el contenido que deseamos mostrar

1.2.1. Debemos partir de un mismo HTML. El contenido se escribe en HTML, y debe ser común para todos los tipos de dispositivos.El lenguaje CSS es el que nos permite aplicar un formato adecuado para la presentación de ese contenido y allí es donde podremos aplicar nuestras reglas, que permitirán que el diseño se adapte a cada tipo de sistema

1.2.2. Desarrollar con HTML distinto para lo cada tipo de sistema, móvil, tablet, ordenador de escritorio, etc.

1.2.3. El HTML tiene que ser bastante semántico, sencillo. En este se habra situado el contenido completo de tu sitio y aquellas interfaces para las funcionalidades necesarias,principalmente los bloques de contenido.Tener también imágenes de cabecera o pie, como el logo , iconos sociales, barras de navegación, etc. Todo lo que se ha acordado en el prototipo se debe incluir en la página web a construir. Se debe centrar primero en encajar todo en las pantallas pequeñas.

1.3. 2) Aplicar CSS

1.3.1. El CSS sirve para aplicar un formato a la página, tanto en lo que respecta a la posición de los elementos como al estilo o aspecto que deben tener. Se aplican los estilos necesarios a la página. Cear un CSS optimizado que nos permita crear un layout adaptable. No todos los navegadores entienden las mismas reglas de estilos, y aquellas que no soporta, simplemente las ignora. Podemos aplicar principalmente dos flujos de trabajo diferentes.

1.3.1.1. A) Recursos de diseño estéticos Son aquellos estilos que se agregan para mejorar la estética de un sitio, como fuentes tipográficas especiales, cajas con esquinas redondeadas, sombras en textos o cajas, etc. Este tipo de elementos no requieren una especial adaptabilidad. No van a afectar a la accesibilidad de un contenido.Hacen que un sitio se vea bonito. Lo más importante de una web es el contenido, que sea accesible desde cualquier sistema.

1.3.1.2. B) Diseño de layout Son aquellos estilos que se encargan de presentar la información con una estructura definida, por columnas, cabecera, pie, etc. El layout,es como plantilla, nos permite jerarquizar la información y desplegarla de manera que el usuario la pueda entender mejor, y centrarse en lo necesario.Lo importante es el contenido. Si la estética de una web no es igual en todos los navegadores no representa mayor problema. Sin embargo, si hay diferencias de layout éstas pueden provocar que el contenido no sea accesible, o entendible, y eso sí representaría un problema que se debe corregir.

2. Aproximaciones para resolver los problemas de compatibilidad del CSS

2.1. Los problemas de layout derivados de las diferencias de navegadores y su soporte con CSS, estas técnicas pueden ayudar a encontrar vías de solución de problemas estéticos. Las variaciones diferentes sirven para resolver un mismo problema, las incompatibilidades en el CSS: Progressive Enhancement o Graceful Degradation. Son conceptos y técnicas importantes. Estas técnicas no son algo específico de Responsive Web Design.

3. Progressive Enhancement Vs Graceful Degradation

3.1. Progressive Enhancement y Graceful Degradation,son aproximaciones para solucionar problemas de compatibilidad entre HTML, CSS y Javascript. No se usan solamente en el diseño responsive. Solucionan las diferencias entre navegadores cuando interpretan un mismo código. Ante las diferencias de navegadores, sus versiones y los sistemas operativos donde funcionan, para hacer un contenido accesible para todos ellos, se ve la necesidad de aplicar estas técnicas, que permiten que un contenido se vea correctamente en todos los sistemas posibles. Ambas técnicas pueden funcionar. Depende de las preferencias o necesidades del desarrollo.

4. Graceful degradation

4.1. Se desarrollas el CSS atendiendo a las características más actuales de los navegadores. Hacer un sitio web tal como se va a ver, con todos los detalles de diseño. Se prueba la web en un navegador actual, aplicando todo tipo de reglas, Una vez satisfecho con el diseño se prueba el sitio web en navegadores menos avanzados.Es una tarea de adaptación de la web para sistemas, incluyen la instalación de algún script Javascript que permita que los navegadores antiguos entiendan características de las CSS. Se define estilos alternativos que deben aplicarse solo a los navegadores que no entienden los estilos que se aplican al principio. Los scripts Javascript que sirven para suplir las carencias de los navegadores antiguos estos se llaman "Polyfills", la estrategia correcta para su instalación es únicamente en navegadores donde se necesiten.

5. Mobile First

5.1. "Mobile First" Es diseñar pensando en los dispositivos con pantallas más pequeñas y generalmente con menor ancho de banda disponible para la navegación.Se debe tener una enorme cantidad de contextos donde el contenido va a ser consumido. Conseguir una solución optimizada para todo el mundo se debe aplicar Mobile First. Desde la elección del contenido, quedándose con la información más esencial y rechazando lo superfluo, hasta las etapas de la ejecución de un diseño.

6. Diseño

6.1. La etapa creativa es cuando se diseña la interfaz, ya sea en papel durante el prototipado o en HTML + CSS en la ejecución, también se hace comenzando por aquello que veríamos cuando la web se consulta desde un móvil.Es sencillo diseñar una web para un móvil, ya que tiene muy pocos elementos. Es bueno empezar a diseñar en elementos pequeños así se sabrán qué cosas son las que entran en el diseño y qué cosas son prescindibles. En HTML + CSS se reduce la ventana del navegador para acomodar los elementos. Se necesita prescindir de elementos que son difíciles de acomodar.La experiencia de navegación es mucho más buena cuando se ve lo que se está desarrollando m. Una el diseño se vea bien en una ventana con anchura reducida, entonces se ira estirando la ventana hasta que el diseño se vea feo. Entonces se pone un "breakpoint" (punto de ruptura) y se define la media que se quiere para pantallas que tengan dimensiones mayores que esa anchura.

6.1.1. Mobile First es una cuestión de comodidad, pues este diseño va de menos a más y por tanto gradualmente se acomoda a las cosas y se adapta el layout a las necesidades de cada anchura de pantalla.Es mucho más fácil comenzar por una pantalla pequeña donde aparecen pocos elementos y pocos detalles e ir agregando cosas a medida que van cabiendo en el layout.

7. Problemática de la web de hoy

7.1. Al diseñar "páginas web" tenemos que conseguir que éstas sean adaptables a cualquier tipo de situación.

7.2. Existen dispositivos que se conectan con un sitio web y que los desarrollos deben poder verse correctamente en todos.

7.3. Esa variedad de ordenadores y dispositivos tienen unas características muy distintas, se debe buscar la adaptabilidad de la página en estos dispositivos.

8. Flujo de desarrollo de un sitio responsive.

8.1. En la creación de un "layout responsive hay muchas técnicas que deberemos conocer para poder producirlos, ya en código, debemos estudiar los posibles procesos de diseño. Esto se refiere al procedimiento con el que se puede construir un sitio, desde su concepción hasta su ejecución es decir las filosofías o estrategias posibles para solucionar los problemas de la web de hoy.

9. Progresive Enchancement

9.1. Se diseña un sitio web centrándose en los sistemas más anticuados, y por tanto con menos soporte, nos debemos preocupar en que el contenido sea accesible.Implementar más complejidad al diseño, aplicando CSS que soportan los navegadores estándar actuales. Como último paso aplicamos CSS para que se pueda ver en las versiones punteras de los navegadores. Se parte de un mismo HTML y se va agregando capas. Se va agregando nuevas capas que aprovechan las características más novedosas. Esta técnica produce una mejora progresiva de los sitios web, visible en los navegadores que la soporten, manteniendo un producto de base accesible para los navegadores menos actuales.

10. ¿Cuál es la mejor? ¿Y los tamaños de pantalla?

10.1. Progressive Enhancement tiene flujos de trabajo que están más optimizados, parte de la base de un diseño básico y accesible. A medida que se va disponiendo de tecnología se añaden capas por encima al producto anterior, con nuevos estilos que solo se verán en los navegadores más modernos y avanzados. Graceful Degradation ya comienza con un nivel de complejidad grande y consigue un diseño que se vea correctamente en navegadores antiguos se realiza en base de que el desarrollo se adapte también a navegadores antiguos. Progressive Enhancement mira hacia adelante en el flujo de desarrollo, mientras que Graceful Degradation empieza delante y mira hacia atrás. En el futuro nuevos clientes web con nuevas características sería más fácilmente incorporadas en el diseño con una aproximación Progressive Enhancement, añadiendo simplemente una capa por encima a nuestro CSS. Añadir una capa por encima no es más que añadir al final del código CSS nuevos estilos, esa capa de estilos nuevos mandarán sobre los anteriores.

10.2. Las técnicas Progressive Enhancement / Graceful Degradation tienen relación con el diseño adaptable. Lo hacen en el sentido de diseño "Mobile First" o"Desktop First", osea, si se diseña pensando en el móvil al principio y luego en ordenadores de escritorio, o bien se diseña primeramente para pantallas grandes y se va adaptando a pantallas pequeñas. En este caso "Mobile First" sería más próxima a Progressive Enhancement y "Desktop first" más próxima a Graceful Degradation.

11. Contenido

11.1. En un móvil no cabe toda la información del mundo y no tiene sentido que un usuario deba hacer un scroll casi infinito hasta encontrar aquello que resulta de importancia. Mobile First realiza una "especificación del contenido" de una página, contiene simplemente un listado en palabras de todos los contenidos que se engloban dentro de una página, ya sea la home o una de las páginas interiores del sitio. La especificación del contenido no es nada gráfico, ni siquiera a esquemas de información,jerarquías, secciones del sitio en el árbol de contenido o site maps,tampoco a wireframes o prototipos donde se distribuya la información. Es simplemente un listado de elementos que se pueden escribir con letras en un block de notas. Es un inventario de elementos. En la cabecera en un móvil igual no cabe el logotipo + navegador + formulario de login + buscador. Entonces se debe intentar reducir todo aquello que es superfluo o prescindible. Se puede sustituir por un icono de "opciones" .