21 excelentes herramientas para el diseño web receptivo
Como diseñador web, sabemos que el diseño web receptivo llegó para quedarse. Se ha tomado su tiempo para construir un sitio web muy hermoso y sólido, con una cantidad considerable de tráfico a su sitio desde los motores de búsqueda. Entonces, llegas a la realidad de los dispositivos. ¿Qué dispositivo se utilizará para abrir su sitio web?. ¿Qué pasa con la altura y el ancho del dispositivo? Hay miles de dispositivos, junto con varias dimensiones y ventanas gráficas.
Como diseñadores web, sabemos que nuestro diseño será visto desde varios dispositivos y navegadores, y al mismo tiempo nuestros bloques de código serán ejecutados por varios dispositivos.
Ha habido un aumento masivo en la cantidad de dispositivos habilitados para la web, junto con una gran cantidad de densidad de píxeles, interacción, resolución, etc. Además, a juzgar por las tendencias actuales en tecnología, habrá más dispositivos con los que las personas pueden acceder a la web.
El hecho de que el diseño web receptivo sea necesario para cada web no significa que sea tan fácil como eso, considerando el hecho de que debe tener en cuenta varios dispositivos, así como las dimensiones y las ventanas gráficas. El desafío es que tenemos que crear una interfaz que se adapte a prácticamente todos los dispositivos, desde pantallas pequeñas hasta pantallas grandes en la sala de cine.
Esto simplemente hizo imperativo que todos los sitios web respondieran a varios dispositivos para facilitar la navegación y mejorar la experiencia del usuario.
Si ha visto una de nuestras publicaciones anteriores sobre la útil caja de herramientas de diseño web receptivo, entonces sabe que hay muchas herramientas en la web para el diseño web receptivo. Pero, a partir de mis muchos años de experiencia como diseñador web, desarrollador y consultor, junto con una investigación exhaustiva que hice, compartiré 21 excelentes herramientas y recursos para el diseño web receptivo. Eso sí, para los diseñadores que aún no han llegado a un acuerdo con el diseño web receptivo. Recomiendo leer Importancia y Razones para el Diseño Web Responsivo, también puedes hacer tu pregunta, y un experto te responderá a través de tu dirección de correo electrónico. Después de lo cual puede continuar aquí con 21 excelentes herramientas para el diseño web receptivo.
01 Fundación ZURB
ZURB Foundation es uno de los marcos más aceptados y avanzados del mundo para un sitio receptivo. ZURB había gastado muchos recursos en el marco, además de varios esfuerzos que se habían destinado al proyecto de código abierto en el marco.
ZURB Foundation tiene una gran estrategia de mejora, ya que se le permite aumentar la complejidad de la capa según el tamaño de la pantalla y las capacidades de diseño. No solo eso, también encontrará una biblioteca completa que consta de varios componentes de la interfaz de usuario, lo que le facilitará la creación de prototipos de cualquier interfaz que pueda imaginar.
02 correa de chorro
Hubo un cambio masivo en el proceso de diseño de bodas, ya que la estructura alámbrica no muestra cómo se verá un diseño en particular en varios entornos web. Y se requiere conocimiento de codificación para hacer uso de algunas herramientas de creación de prototipos.
Aquí es donde viene Jetstrap. Permite al diseñador ensamblar prototipos rápidamente simplemente arrastrando y soltando componentes desde la interfaz de usuario al lienzo. No se requieren habilidades de desarrollo frontend para comenzar, y terminará con una página web que respira. Solo necesita usar las herramientas de arrastrar y soltar en la interfaz.
03 Diseño receptivo semanal
El desarrollador web Justin Avery dedica tiempo a enviar boletines dedicados a recursos, herramientas y técnicas para el diseño web receptivo. Como diseñador, paso parte de mi tiempo en Twitter leyendo feeds sobre diseño web receptivo. Algunas de las fuentes incluyen los últimos recursos y consejos útiles sobre cómo crear un diseño web receptivo. Unirse a la discusión sobre diseño web receptivo de LinkedIn seguramente mejorará sus habilidades y le brindará las últimas ideas sobre las tendencias actuales en diseño web receptivo.
04 Estilo Prototipo
El prototipo de estilo es una página HTML que muestra el estilo de los botones, la tipografía, el color, el estilo de la fotografía, el rollover y otros elementos para un sitio propuesto.
Uno de los propósitos principales del prototipo de estilo es crear entregables que sean útiles y replicables. Si bien no hay reglas para crear un prototipo de estilo, debe incluir algunos elementos básicos, como estilo de botón, tipografía, color y rollover, además de otros elementos que se pueden incluir.
El prototipo de estilo le permite agregar animación, color y otros elementos en el entorno web.
05 collages de elementos
Al crear maquetas de página completa, una de las cosas más difíciles que tenemos que enfrentar como diseñadores es el diseño del minuto de cada página. Profesionalmente, es recomendable pasar más tiempo diseñando los mensajes de héroe en la página de inicio que pasar más tiempo en el resto de las páginas.
Como diseñador, no es aconsejable crear maquetas de su sitio en Photoshop con las tendencias actuales en la industria del desarrollo web, ya que tiene muchas otras cosas que hacer.
El fundador de la agencia SuperFriendly Dan Mall había ido un paso más allá al simplificar las cosas con Element Collages.
Element Collages tiene una interfaz de usuario muy buena para la exploración visual de los componentes de la interfaz. Collages lo ayuda en la dirección visual y no tiene que crear todo el componente usted mismo, considerando el hecho de que no está diseñando para un solo dispositivo.
06 peras
Algunos beneficios importantes de las guías de estilo de frontend incluyen, permitir pruebas más fáciles, un mejor flujo de trabajo, vocabulario compartido y servir como referencia para volver. Pears es un tema de wordpress de código abierto creado por Dan para crear una guía de estilo de interfaz.
Pears facilita a los diseñadores el uso de una biblioteca común para un sistema de diseño consistente.
07 Icomoluna
Retina y otras pantallas de alta resolución se están convirtiendo rápidamente en el orden del día, los iconos de mapa de bits no se escalan muy bien con estos dispositivos de alta resolución. Afortunadamente, la industria del desarrollo web está a la altura de la tarea.
La solución eficaz para esto es crear un icono independiente de la resolución, que se puede lograr creando una fuente de icono personalizada e incrustándola con CSS @font-face.
Iconmoon simplemente facilita el proceso de creación y visualización de fuentes de iconos. Podrá elegir entre una biblioteca de iconos, con opciones para cargar su icono. A partir de ahí, puede generar su fuente de icono personalizada y descargar un paquete que incluye la fuente y el CSS adecuado. Cuando se trata de crear un ícono independiente de la resolución, Iconmoon es una herramienta importante.
08 Prospectiva.js
Varios dispositivos tienen diferentes formas de mostrar imágenes de mapa de bits, pero como diseñador, debe tener en cuenta que cargar imágenes de alta resolución puede aumentar el peso de la página. Foresight.js detecta tiene la capacidad de detectar la pantalla y la conectividad del dispositivo para determinar si se deben cargar componentes de alta resolución o no.
09 Detector
La detección y el perfilado de dispositivos pueden ser complicados a veces, ya que la biblioteca de dispositivos es difícil de administrar. Dado que la detección de características se basa en la detección del lado del cliente, por lo que depender únicamente de ella puede generar cierta limitación en la flexibilidad al brindar funcionalidad a una amplia gama de dispositivos.
Esto lleva a la creación del detector por parte de Dave Olsen, utilizando un script PHP y un navegador basado en Javascript, junto con una gran cantidad de bibliotecas de detección de funciones. Los usuarios de la biblioteca se modernizan y detectan agentes de usuario para determinar las clases de dispositivos. Detector tiene la capacidad de adaptarse a nuevos dispositivos y navegadores por sí solo sin necesidad de extraer información de la base de datos central del navegador.
10 Enquire.js
Todo diseñador conoce la importancia de usar consultas de medios en CSS. Entonces, ¿qué sucede cuando quieres alterar algunas experiencias en un punto determinado? Estos se pueden lograr fácilmente con el script Enquire.js.
El script Enquire.js usa matchmedia para ejecutar condicionalmente algunas funciones y cargar algún script si se cumplen ciertas condiciones. Con esto, puede esperar una mejor experiencia de usuario y fácil de los usuarios.
La carga de widgets para compartir en redes sociales como Facebook, Twitter y Google requiere 19 widgets de solicitud HTTP y agrega 246,7 KB adicionales al peso de las páginas, lo que a menudo aumenta el tiempo de carga de las páginas web y consume más ancho de banda.
Zach Leatherman lo abordó creando una solución liviana, llamada conteo social. Es un pequeño script que carga de forma diferida los widgets sociales, para que los usuarios no sean penalizados en absoluto.
12 FitVids
Varios objetos multimedia, incluidos los videos, son diferentes cuando se comparan con las imágenes, en el sentido de que no mantienen parte de su relación de aspecto después de cambiar el tamaño. Esto crea un problema de escala al ver videos desde una gran cantidad de diferentes dispositivos habilitados para la web.< br/> Chris y otros diseñadores lograron desarrollar un complemento llamado FitVids.js. El complemento puede detectar y usar la proporción correcta de video o cualquier objetos multimedia al cambiar el tamaño. Con esto, puede obtener la relación de cambio de tamaño correcta cuando se cambia el tamaño de su video y, como resultado, obtener objetos multimedia finamente mostrados, incluidos videos en sus aplicaciones.
13 CSS móvil compatible con IE
Todo diseñador sabe lo importante que son las consultas de medios, pero el hecho es que Internet Explorer no admite consultas de medios. Al mismo tiempo, como diseñador, no puede decidir eliminar la consulta de medios solo porque desea admitir el antiguo IE. Este problema se puede superar fácilmente usando Sass. Sass nos ayudará con los estilos móviles primero y, al mismo tiempo, proporcionará estilos de escritorio apropiados para la versión anterior de IE.
14 puestos de trabajo.
Como diseñador, si consulta en línea para buscar herramientas de prueba de ventana gráfica, encontrará muchas herramientas de prueba de ventana gráfica. Pero el problema es que la mayoría de las herramientas de prueba de ventana gráfica se basan en anchos de dispositivos populares como 320, 768, 1024, etc.
Clasifique y resalte los rangos generales (pequeño, mediano, grande, etc.) solo para asegurarse de que resalte el espectro de resolución general.
15 consultas de medios proporcionales
Algunos diseñadores siguen utilizando valores de píxeles para establecer puntos de interrupción, mientras que nosotros hemos estado utilizando anchos, medidas y unidades de fuente en relación con el punto de vista de varios dispositivos. Lyza Gardner dio un buen tutorial que explica cómo podemos usar unidades relativas para puntos de interrupción para crear una mejor experiencia de usuario.
16 MQTest.io
Como diseñador, a veces, puede ser de alguna manera desalentador rastrear las consultas de medios que admite un navegador en particular. Esto se resuelve fácilmente usando MQTest.io desarrollado por Viljami Salminen. La herramienta lo ayudará a reconocer y analizar varias consultas de medios a las que responde un navegador web diferente. Con esto, también puede utilizar consultas de medios que no se usan comúnmente.
17 Marcapáginas de consulta de medios de Sparkbox
Sparkbox es un bookmarklet de consulta de medios que ayuda a determinar las consultas para los medios actuales o los medios en uso. Es imperativo que los diseñadores tengan acceso a las dimensiones de la pantalla, ya que ahorra tiempo y también ayuda a determinar consultas de medios proporcionales.
Como diseñador, sabemos lo costoso, desafiante e incluso desalentador que puede ser cuando se trata de realizar pruebas en una pila representativa de navegadores y dispositivos. Esto se soluciona fácilmente cuando hacemos uso de BrowserStack.
La pila del navegador proporciona acceso remoto a varios dispositivos y entornos, lo que le permite realizar algunas pruebas de control de calidad. BrowserStack es tan impresionante como cualquier otra cosa, ya que también es efectivo cuando se prueba en versiones antiguas de Internet Explorer.
19 Mobitest
El rendimiento es uno de los aspectos más esenciales del diseño web. Con Mobitest, podrá ver el rendimiento de sus diseños con algunos análisis.
Al probar su diseño en Mobitest, solo necesita ingresar una dirección web, luego de lo cual la herramienta muestra el sitio en un dispositivo real y, al mismo tiempo, le brinda muchas estadísticas de rendimiento, ya que también podrá saber carga tiempo y tamaño de página promedio junto con otras estadísticas.
20 Adobe Edge Inspeccionar
La importancia de probar en un dispositivo real no se puede enfatizar demasiado para un diseñador web, ya que necesita ver y analizar el tipo de rendimiento que su diseño brindará a un usuario antes de publicarlo. Adobe Edge Inspect hizo que las pruebas en dispositivos reales fueran muy fáciles y directas, ya que la herramienta actualiza automáticamente todos los dispositivos conectados. También puede probar el código en una amplia gama de dispositivos.
21 Codepen Pro
CodePen es una herramienta que ayuda rápidamente a demostrar patrones y técnicas de respuesta. Es una herramienta que también ayuda a la ejecución de nuestros diseños en diferentes dispositivos y computadoras, mientras se sigue escribiendo.
CodePen es una poderosa herramienta que lo ayuda a ver los resultados de su código en múltiples dispositivos y computadoras mientras escribe.
Conclusión
Todas las 21 herramientas mencionadas anteriormente son buenas para el diseño web receptivo. Pero, cada una de las herramientas tiene una funcionalidad diferente, personalmente, no tengo ninguna preferencia, ya que todas las herramientas son efectivas, aunque con una interfaz y funcionalidad diferente. La decisión es tuya.