Share
A medida que avanzamos en 2015, es el momento perfecto para abordar "El estado del diseño web sensible".
Vamos a revisar lo que sabemos sobre RWD, lo que se ha dejado en el pasado en los últimos tiempos, los nuevos trucos que podemos incorporar a nuestro juego de hoy y lo que se avecina en el horizonte..
Antes de comenzar, comencemos por definir lo que realmente queremos decir cuando decimos "Diseño web sensible".
Cuando Ethan Marcotte originalmente acuñó el término hace cinco años en su artículo sobre A List Apart, citó cuadrículas fluidas, imágenes flexibles y consultas de los medios como tres "ingredientes técnicos" de RWD..
La ilustración inmortal que acompaña a Kevin Cornell.Sin embargo, inmediatamente calificó estas especificaciones diciendo:
"... pero también requiere una forma diferente de pensar".
Desde ese artículo de 2010, hemos visto una evolución continua en la tecnología que utilizan las personas para acceder a Internet, así como la aparición de varios nuevos ingredientes técnicos que se pueden agregar a nuestro kit de herramientas de desarrollo..
Todavía utilizamos cuadrículas fluidas, imágenes flexibles y consultas de medios, pero esas tres cosas por sí solas ya no forman una imagen completa de lo que implica el diseño web sensible..
Las tecnologías y las técnicas de diseño web están en un estado de flujo perpetuo, por lo que la definición de RWD nos debería dar una forma diferente de pensar eso será igual de aplicable después de otros cinco años de cambio como lo es hoy.
En mi opinión, esa forma de pensar se puede resumir de la siguiente manera:.
“El diseño web sensible es un enfoque para crear sitios web que pueden responder a todos los dispositivos de navegación web conocidos, con Entrega de contenido e interacción UI optimizada en el mayor grado posible para todos los visitantes ".
Al centrarnos en la manera de pensar en Diseño Web Responsivo subyacente en lugar de en ingredientes técnicos específicos, seguimos siendo libres de esforzarnos por encontrar las mejores formas de crear sitios receptivos en el panorama en constante cambio de nuestra industria..
Si bien ciertamente hay muchas cosas que han cambiado en RWD, también hay varias cosas que se han mantenido básicamente igual y que muchos desarrolladores estarán de acuerdo en ser una buena práctica..
Estos son algunos de los aspectos más ampliamente aceptados de la RWD actual como la conocemos..
Todos sabemos que tenemos que atender una lista de posibles resoluciones de pantalla siempre y cuando su brazo, las densidades de píxeles múltiples y los distintos tamaños de ventanillas.
Tenemos que atender múltiples métodos de entrada, por ejemplo. decir adiós a la dependencia del mouse y hacer que los elementos de la interfaz de usuario sean amigables.
Necesitamos utilizar Media Queries para implementar ajustes en nuestros diseños cuando sean necesarios..
Sabemos que los puntos de interrupción deben colocarse no a anchos predeterminados, sino en el punto en el que el diseño se "rompe" y garantiza el ajuste.
Nuestras imágenes deben tener un tamaño fluido para que no sean ni demasiado grandes ni demasiado pequeñas en varios tamaños de pantalla.
Otros medios, como los reproductores de video y audio, también deben comportarse de la misma manera fluida.
Tenemos que incluir una metaetiqueta de viewport (y, mirando hacia adelante, el equivalente de CSS) para que nuestros diseños se comporten de la manera que esperamos:
Existen algunas filosofías y tecnologías que, en el pasado, se han incorporado al diseño web sensible o, al menos, no están totalmente excluidas, pero ahora están siendo eliminadas gradualmente por mejores alternativas.
Considere la siguiente colección de dispositivos de navegación web:
Tenga en cuenta que esta lista se compone en su totalidad del mundo real, los casos de uso actuales..
Digamos que mi sitio tiene un conjunto de características más pequeñas, fáciles de tocar y específicas para dispositivos móviles, y características de diseño más grandes, dependientes del mouse y específicas de escritorio. ¿A qué ancho debo configurar las consultas de medios para implementar mis características "móviles" y "de escritorio" para que todos los usuarios de estos dispositivos tengan una experiencia de primera clase??
Nuestra lista cubre un puñado de ejemplos diferentes, pero hay cientos, si no miles, de casos de uso adicionales por ahí que lanzan llaves adicionales a las obras..
La realidad es que hoy en día ya no hay una distinción clara entre dispositivos móviles y de escritorio, por lo que la mejor manera de avanzar es atender simultáneamente todos los métodos conocidos de navegación web..
Si sus sitios están construidos desde cero para responder perfectamente a cada caso de uso conocido, no solo a los que tradicionalmente se definen como móviles y de escritorio, usted habrá creado la forma de respuesta más amplia posible..
Primero, dejamos de intentar hacer diseños basados en píxeles fijos completamente en Photoshop porque no eran lo suficientemente fluidos o flexibles para manejar el espectro emergente de los requisitos de las vistas..
Ahora, también estamos empezando a dejar de hacer diseños de píxeles fijos en nuestro código, casi por la misma razón. En cambio, construyendo nuestros diseños utilizando una combinación de movimiento rápido del ojo, em y % Valores, nuestros sitios siempre siguen siendo totalmente escalables y flexibles..
Con el enfoque de unidad flexible, los diseños se pueden escalar hacia arriba y hacia abajo uniformemente cambiando un solo valor base. Las configuraciones de fuente y zoom del navegador de los usuarios pueden ser totalmente respetadas y compatibles. Varios problemas de tamaño de la vista pueden ser resueltos inmediatamente. Lo más importante es que la legibilidad y la accesibilidad del contenido siempre se pueden mantener..
Los marcos frontales "Big 2" ya están desembarcando en The Good Ship PX y están abordando sus vuelos a Flexible Unit Land.
Bootstrap 4 está en las obras y será enteramente movimiento rápido del ojo / em / % basado, dejando atrás el px Diseños basados en Bootstrap 3. Y Foundation 5 ya ha completado su transición al trabajo con unidades flexibles..
Los días de la vieja unidad de px que todos hemos conocido tan bien a lo largo de los años están llegando a su fin..
Puede muy pronto encontrarse en una cómoda silla en la casa de retiro, junto a sus viejos amigos de los días de gloria., Soporte IE6 y encabezados animados de flash.
Hablando de flash ...
Claro, podríamos haber visto desaparecer los encabezados animados de Flash hace algún tiempo, pero seguimos viendo videos, presentaciones de diapositivas y juegos dependientes de Flash de forma bastante regular. Tampoco estoy hablando de sitios de pequeños aficionados: veo sitios importantes y de gran tráfico que aún muestran este mensaje si no usa Flash e intenta ver su material de video:
Es muy común que los dispositivos móviles no admitan Flash, por lo que confiar en él para entregar contenido no es el enfoque más seguro.
De hecho, por razones de seguridad y estabilidad, los navegadores web están empezando a alejarse de los complementos compatibles como Flash, Silverlight y Java, en favor de una tecnología alternativa que funcione únicamente a través de las inclusiones de los navegadores nativos..
Ha llegado el momento de comenzar a dejar que los medios basados en complementos se deslicen y pasar a una nueva era de técnicas de visualización de medios..
Algunas de estas tecnologías son casi nuevas, y algunas han existido por un tiempo, pero están mejorando continuamente, pero todas tienen una cosa en común: son participantes en el mundo de RWD que van más allá del enfoque original en cuadrículas flexibles, imágenes fluidas y consultas de medios.
El hecho de que Flash y sus contrapartes estén en el lado negativo, no significa que todavía no podamos tener cosas buenas. El video, el audio, la animación e incluso los juegos en 3D y completos aún están muy mezclados gracias a HTML5 y CSS3 y los elementos de JavaScript que trae a la mezcla..
Donde una vez tuvimos complementos de navegador, ahora tenemos reproductores de audio y video HTML5 nativos, animación CSS3, herramientas como Google Web Designer, Canvas, WebGL y una lista cada vez mayor de novedades interesantes..
El nuevo elemento HTML5 y elementos.
Nos permite realizar verificaciones del tamaño de la ventana gráfica y la densidad de píxeles del dispositivo y luego cargar la versión más adecuada de una imagen según los resultados.
Todavía no está completamente soportado de forma nativa en los navegadores, sin embargo, existe un polyfill muy sólido llamado Picturefill (por Scott Jehl, el hombre detrás de Responsible Responsive Design) que permite
Lea más sobre cómo funciona todo esto en Consejo rápido: cómo usar la “imagen” HTML5 para imágenes receptivas.
¿Por qué tener íconos de tamaño fijo cuando puede tener una libertad de cambio de tamaño completa, todo con un cambio a una única configuración de tamaño de fuente en CSS??
A través de increíbles bibliotecas de fuentes web como Font Awesome, Entypo, Typicons y más, puede tener todo tipo de imágenes en sus sitios, desde cohetes hasta clips de papel y logotipos de redes sociales. Pero como se entregan como fuentes y no como imágenes, puede cambiar el color y cambiar su tamaño a través de CSS.
Esto significa que puede asegurarse de que sus iconos respondan bien al tamaño de la ventana gráfica en la que se encuentran, siempre que sea agradable y fácil de ver e interactuar según sea necesario.
Flexbox está preparado para resolver muchos de los principales dolores de cabeza que los diseñadores web han intentado sofocar durante años.
Solo hay un problema: las tasas de uso de los navegadores que no lo admiten son todavía demasiado importantes en muchos casos de uso para que Flexbox funcione correctamente. Si está trabajando en un proyecto que descarta la compatibilidad con IE8, IE9 y Opera Mini, intente hacerlo..
Sin embargo, CanIUse.com fija el porcentaje de uso global de esos tres navegadores en 3.18%, 2.13% y 2.82% respectivamente. Tampoco hay un respaldo confiable para Flexbox en el momento. Eso significa que en un sitio con tráfico mediano a intenso, usted está viendo a cientos o miles de usuarios que se ejecutan en un sitio roto mensualmente..
Todos queremos que Flexbox se convierta en el estándar en la gestión de diseño para que podamos dejar de imaginar formas de realizar lo que deberían ser tareas de diseño relativamente simples, y tan pronto como las tres marcas rojas restantes en este cuadro de CanIUse se desvanezcan, está listo para suceder.
Hablamos sobre los componentes web hace poco, y aún siguen avanzando hacia nosotros como el camino del futuro, acercándose cada vez más a la corriente principal..
Anteriormente mencionamos el vídeo, audio y imagen Los elementos y lo útiles que son para el diseño web responsivo. Cuando los componentes web entren en vigor, cada uno de nosotros podrá crear elementos personalizados como estos, para cualquier propósito que necesitemos completar. Además de eso, los componentes web serán compartibles, lo que significa que hay una cantidad prácticamente ilimitada de nuevos elementos de respuesta que pueden ser utilizables en nuestros diseños..
Esto esencialmente democratiza HTML, que es algo enorme.
Si hay un nuevo elemento que el mundo realmente podría hacer un gran uso, no tendremos que esperar a la implementación del navegador, solo necesitamos ver a un desarrollador de código abierto que reúna algo y tome la generosa decisión de compartir su trabajo..
Por ejemplo, mencionamos anteriormente que RWD requiere una ubicación de medios flexible, y eso incluye permitir que los medios incrustados de iframe como los videos de YouTube puedan escalar y mantener su relación de aspecto.
El desarrollador Joselito Junior ha creado y abierto un componente web que hace precisamente eso, utilizando este simple HTML:
Lea más sobre esta fascinante nueva tecnología en Cómo crear sus propios elementos HTML con componentes web.
Debido a que la tecnología siempre está cambiando a cada minuto, es extremadamente importante para nosotros mantenernos enfocados en los objetivos subyacentes del diseño web sensible y no estar demasiado apegados a ninguna forma de hacer las cosas. De esta manera, nos aseguramos de estar siempre abiertos a descubrir nuevas formas de crear mejores experiencias para las personas que usan nuestros sitios..
Para que eso suceda, debemos mantener siempre nuestros oídos al suelo, escuchando los últimos desarrollos en dispositivos de navegación web y técnicas de diseño web..
Si desea repasar sus propias técnicas de diseño web receptivo, le gustaría revisar mi curso Diseño web responsivo revisado. En solo un poco más de dos horas, le mostraré todo lo que necesita saber para crear un sitio web completo y sensible con las técnicas más avanzadas. Los primeros dos videos son gratuitos, así que adelante, obtenga una vista previa del sitio que va a crear y todo lo que aprenderá..
Tenga un excelente 2015, y aquí está el diseño web adaptable en constante evolución.!
Accentsconagua