El Significado y el Propósito de Responsive Web Design – SitePoint

El siguiente es un exclusivo extracto de nuestro nuevo libro, Jump Start el Diseño Web Responsivo, 2ª Edición, escrito por Chris Ward. Las copias se venden en las tiendas de todo el mundo, o usted puede comprar en ebook desde aquí.

Solía ser tan simple: se podría diseñar un sitio web o una aplicación para un 15 pulgadas de monitor, y las incompatibilidades entre navegadores dejando de lado a los que fueron realizados.

A continuación, los teléfonos móviles con navegadores de internet llegó y arruinado nuestras fácil vidas. Lo peor de todo, a la gente le encantaba navegar por la Web en ellos! En 2016, la navegación web en dispositivos móviles superó navegación de escritorio por primera vez.

Como desarrolladores y diseñadores se acostumbraron a la construcción de sitios web para teléfonos, tabletas, relojes, Televisores, automóviles, cristales, grandes pantallas de escritorio, pantallas de alta resolución, e incluso de los navegadores web construido en las paredes. (Bueno, he hecho esto último.) El apoyo a este torrente interminable de nuevos dispositivos es cada vez más difícil.

Entonces, ¿cómo podemos apoyar esta creciente gama de dispositivos? La respuesta es responsive web design, que aprovecha las tecnologías que permiten a los sitios web a adaptarse a las pantallas de todos los tamaños.

Muchos de los sitios web más antiguos, o los proyectos que mantienen las personas con poco tiempo libre, no responden. Por ejemplo, el sitio para el Vasallo motor de juego:

En muchos otros sitios, como SitePoint.com son totalmente sensible:

Responsive web design (RWD) se suscribe a la popular de desarrollo de la máxima de “Don’t Repeat Yourself” (normalmente abreviado como “SECO”). En lugar de mantener varias lineas de codificación para cada dispositivo que usted desea apoyar, RWD se propone el uso de una sola base de código que se adapta adecuadamente a cada dispositivo. El uso de RWD técnicas, se escribe un conjunto de HTML, CSS y JavaScript, y los elementos de la pantalla de forma apropiada para cada plataforma. Muchos de estos estilos y elementos, incluso, pueden ser reutilizados o construido en cuenta para la máxima eficiencia del código.

Suena bien? Para empezar, vamos a retroceder en el tiempo un par de años.

La historia

“Capacidad de respuesta” el diseño no es necesariamente nueva, y es un término que puede significar diferentes cosas para diferentes personas, por lo que su historia exacta difícil de localizar.

En teoría, los desarrolladores han ido creando sensible diseños, ya que había más de un navegador. Los navegadores han tenido siempre sutiles (y no tan sutil) de representación de las diferencias entre ellos, y los desarrolladores han estado aprendiendo a lidiar con estas peculiaridades durante décadas. Si eres nuevo(er) en el desarrollo web, estar agradecidos de que el dominio de Internet Explorer versiones anteriores mayormente. Los días de tratar con sus peculiaridades eran oscuras.

Desde 2004, responsive design ha adoptado la más significado específico de la adaptación de sus diseños para adaptarse a un usuario de dispositivo de su elección—que generalmente se basa en el tamaño de la pantalla, sino también otras capacidades. Los conceptos para el diseño de respuesta que se solidifican en 2008, pero el término también se refiere como “flexible”, “líquido”, “líquido”, y “elástica” de diseño.

Era la inclusión de preguntas de los medios en la especificación de CSS3 que dio responsive design el potencial necesario para ser un auténtico y más útil el concepto. Vamos a cubrir preguntas de los medios en detalle en el Capítulo 2, pero, en resumen, que permiten cambiar lo que se muestra en una página web basada en pre-definido tamaños de pantalla o tipos. Ethan Marcotte formalmente acuñó el término “responsive web design” en un artículo para Una Lista Aparte en 2010.

Esto llevó a un crecimiento y consolidación de otras técnicas y tecnologías, junto a preguntas de los medios, como imágenes flexibles y cuadrículas, todos de los cuales trataremos en este libro.

Para mí, el “responsive design” es una especie de combinación de todas estas ideas y principios. No se acaba de adaptar un diseño a tamaños de pantalla, pero también a otros factores tales como la profundidad de color, el tipo de medios (por ejemplo, la pantalla de un ordenador, o un lector) o la ubicación.

Jump Start Responsive Web Design image

Las escuelas de Pensamiento Dentro de Responsive Design

Hay muchas escuelas de pensamiento acerca de cómo utilizar responsive design, ya que hay interpretaciones de la misma. Algunos han venido y se han ido, y otros se han estancado. No vamos a cubrir en cualquier detalle explícitamente en este libro, pero vamos a tocar sus aplicaciones prácticas. Vamos rápidamente a cubrir un par de ellos ahora.

Mejora Progresiva

Cuando después de la más tradicional principio de mejora progresiva, su principal objetivo es hacer que el contenido del sitio disponible para todos los usuarios, a pesar de lo simple de su dispositivo o la lentitud de su conexión. A continuación, las características adicionales—tales como más sofisticado, el diseño y la funcionalidad—se agregan para los dispositivos que puede utilizar.

La Degradación De La

La proliferación de la navegación móvil se ha invertido la más tradicional ruta de diseño. En el pasado, se inició un diseño en la plataforma en la que usted trabajó en (habitualmente una computadora) y, a continuación, despojado de estilo y funcionalidad para soportar dispositivos con pantallas más pequeñas o menos apoyo para ciertas funciones.

Mientras que la degradación se aplica normalmente a la falta de compatibilidad del navegador con características particulares, también se puede pensar que es más general. Su principio es que usted comienza con una completa versión de un sitio ejecutando en el dispositivo ideal y el navegador, además de asegurar que la funcionalidad esencial de trabajo para cualquier usuario en cualquier (con soporte) dispositivo, incluso si pierden en buena cuenta.

En Primer Móvil

En primer móvil es similar a la progresiva mejora, pero más específicas para el diseño sensible. Se propone comenzar con su más pequeño o menos capaz dispositivo compatible (normalmente un teléfono, cuando el principio fue creado) y, a continuación, agregar la funcionalidad y el estilo a medida que aumente el dispositivo de escala.

Como un término, “primer móvil” puede ser confuso, especialmente a los no-diseñador/desarrollador de audiencias, dando una impresión sesgada de la prioridad que el móvil va a recibir en un proyecto.

En teoría, la práctica asegura que los dispositivos más pequeños no terminan consiguiendo el segundo mejor—de que todos los dispositivos son tratados con la misma importancia.

¿Qué Necesita Apoyo?

Antes de iniciar o mejorar cualquiera de proyectos basado en web, es importante saber si vale la pena, y para evaluar la (potencial) de la base de usuarios por todo su trabajo duro.

Si usted tiene un sitio web existente, puede ser vale la pena analizar el tráfico del sitio web para ver qué tipos de dispositivos que sus visitantes están utilizando para acceder a su sitio web. Si el 90% de los visitantes de manera consistente han visitado en una máquina de escritorio, esto muestra que su experiencia móvil es pobre, o que sus visitantes no son grandes usuarios de dispositivos móviles. Usted podría embarcarse en una extensa investigación para averiguar la respuesta exacta, o simplemente el uso de responsive design técnicas para construir un móvil muy fácil de utilizar y que puede atraer a nuevos visitantes.

Si usted está trabajando en un nuevo proyecto, el análisis de las necesidades de sus potenciales usuarios, es igual de importante. Esto puede ser hecho usando el tradicional mercado de técnicas de investigación, la creación sencilla de sitios de prueba, o mirando a sus competidores para construir una imagen de lo que sus clientes estarán.

Equipos

A pesar de la lenta disminución en las ventas, todavía hay un montón de computadoras de escritorio y portátiles, y de ahí muchos de los navegadores web que se ejecutan en ellos. Estos equipos incluyen todo, desde los de baja calidad (y de baja resolución) de 11 pulgadas netbooks para alta potencia de sobremesa con 28 pulgadas, de alta resolución de los monitores en una variedad de proporciones y orientaciones, todos los cuales afectan en gran medida el área de la pantalla que usted tiene que trabajar con.

Teléfonos Móviles

El porcentaje de personas que visitan los sitios web en los teléfonos móviles ha llegado a la paridad con la navegación de escritorio, por lo que de catering para los usuarios de navegadores móviles está en igualdad de condiciones (y probablemente, creciente) importancia. Para más detalles sobre el auge de la navegación web móvil, te recomiendo el Smart Insights informe sobre Marketing Móvil Estadísticas y Statcounter del escritorio y móviles y el uso de la comparación.

En iOS, la navegación móvil es generalmente a través de un navegador, y el dispositivo de tallas son más consistentes.

Android tiene una gran variedad de navegadores y las dimensiones de la pantalla disponible. El creciente número de dispositivos que se ejecutan en sistemas operativos móviles también tienen alta densidad de pantallas de distintas resoluciones.

También es necesario considerar que los usuarios son en gran parte de la navegación con toque y no de punto-y-clic en dispositivos, lo que afecta el comportamiento de una gran cantidad.

Tabletas

La tableta de ventas puede ser reduciendo, pero todavía hay una importante base de usuarios para el futuro previsible, y usted no debe pensar en tabletas como grandes teléfonos móviles o escritorios pequeños. Además, los usuarios pueden estar utilizando pantallas táctiles o los ratones para interactuar con tu sitio.

Dispositivos Híbridos

Si el manejo de los ordenadores y las tabletas no es suficiente, ahora hay dispositivos híbridos, tales como Microsoft Surface Pro, que puede cambiar entre un ordenador y una tableta. Mientras que cada uno de los modos pueden ser tratados de forma discreta, vale la pena señalar que los usuarios pueden cambiar el contexto, mientras que el uso de su sitio.

Wearables

La mayoría de los wearables son sin embargo para obtener un navegador web, pero puede suceder. Mientras tanto, todavía es posible reutilizar partes de su contenido en wearables, y estos deberán ser entregados en ráfagas cortas con un fácil seguimiento de la acción.

TV

Smart Tv y dispositivos relacionados, tales como el Apple TV con simplificado de los navegadores web, y los usuarios en general se utilizan ellos para la navegación de sitios particulares, pero son cada vez más populares. Televisores tienen muy pantallas de gran tamaño, a menudo con baja resolución, por lo que sitios que ver en ellos la necesidad de ser lo suficientemente clara como para ver correctamente, y también se puede utilizar desde una distancia.

Coches

De verdad? Sí, la verdad. Este es un territorio nuevo, pero un creciente número de coches que ahora tienen cuadros de mando con acceso a internet en alguna forma o de otra. Por el momento, los sitios prestados en los salpicaderos de los automóviles deberán presentar la información claramente en una pantalla pequeña, y estar diseñados para no distraer o abrumar a un conductor y provocar un accidente. Sin embargo, muchos de los coches ahora tienen pantallas para los pasajeros, que tendrán más acceso a la web y a los contenidos.

Las Consolas De Juego

La mayoría de las modernas consolas de juego que se dediquen parte de su tiempo conectados a internet, y algo de ese tiempo con un navegador web. Esto es generalmente para el consumo de medios y redes sociales. Los navegadores de estos dispositivos es probable que sea limitado, y un teclado físico puede no estar disponible. Para las consolas de sobremesa, los principios de diseño de la TV va a aplicar, y para computadoras de mano, una limitada experiencia móvil.

En resumen, usted no puede predecir cómo y donde nadie va a ver tu sitio web, a fin de construir a ser adaptable, flexible y sensible.

Imprimir

Jump Start Responsive Web Design book

Imprimir? No es este un libro de diseño web? Sí, pero en las versiones impresas de sus páginas web todavía se accede con frecuencia, ya sea para la física real de impresión o para la prestación de su contenido en lectores offline como Instapaper o Pocket. Para determinados contenidos, “imprimir” todavía es relevante.

Mi libro publicado recientemente Saltar de Inicio, Diseño Web Responsive, ahora está disponible en SitePoint. Se persigue el objetivo de empezar la comprensión y el uso de la suite de CSS y HTML herramientas disponibles para responder a este nuevo mundo de dispositivos. Es muy práctico, con multitud de ejemplos a lo largo, que abarca:

  • El Significado y el Propósito de Responsive Web Design
  • Los Bloques de Construcción de Diseño de respuesta
  • Mejor Sensible Estructuras con Sistemas de red
  • Sensible De Texto
  • Sensible Imágenes y Vídeo
  • Respondiendo al Contexto del Usuario

Mi libro es adecuado para principiantes-nivel de los diseñadores y desarrolladores con conocimiento de HTML y CSS. Algunos de JavaScript experiencia es útil para los capítulos posteriores.

DISEÑO WEB MARBELLA MUSICA RELAJACIÓN YOUTUBE

Deja un comentario