Contenido
- Herramientas para empezar
- 01. Hojas de croquis de diseño web adaptable
- 02. Cuaderno de bocetos de diseño receptivo
- 03. Wireframes receptivos
- 04. Patrones de diseño de dispositivos múltiples
- 05. Azulejos de estilo
- Herramientas para una rejilla flexible / fluida
- 06. Sistema de cuadrícula dorada
- 07. Foldy960
- 08. SimpleGrid
- 09. La cuadrícula CSS de 1140px
- 10. Sistema de cuadrícula CSS de columnas
- 11. Sistema de cuadrícula semántica
- 12. SUSY
- 13. Gridpak
- 14. Gridset
- 15. Una mejor cuadrícula de Photoshop para RWD
- 16. Rejillas fluidas
- 17. Calculadora receptiva
- Herramientas para imágenes receptivas (y texto)
- 18. Imágenes receptivas
- 19. Imágenes adaptables
- 20. Sencha.io Src (anteriormente Tinysrc)
- 21. FitText
- 22. slabText
- Herramientas para consultas de medios
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Categorizr
- Placas de calderas de diseño receptivo (y móviles)
- 27. 320 y superiores
- 28. Gridless
- 29. Esqueleto
- 30. Bootstrap
- Complementos, suplementos y polyfills
- 31. Complemento receptivo
- 32. Derrocamiento
- 33. MediaTable
- "Probando, probando: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Pruebas de diseño receptivo
- 37. El respondedor
- 38. Responsive.is
- 39. Screenqueri.es
- 40. Aptus
- 41. Bookmarklet de diseño adaptable
- 42. Bookmarklet de prueba de diseño adaptable
- 43. Screenfly
- 44. Indicador de consulta de medios
- 45. Calce
- 46. Drive-In
- 47. Adobe Shadow
- 48. Opera Mobile Emulator + depuración remota
- Más inspiración
- 49. MediaQueri.es
- 50. @RWD
- ¿Me gusto esto? ¡Lee esto!
Como lo presentó / acuñó Ethan Marcotte tanto en su artículo "Responsive Web Design" como en su libro más vendido, se necesitan tres elementos para que un sitio sea receptivo:
- Una rejilla flexible / fluida
- Imágenes receptivas
- Preguntas de los medios
Hay muchos otros artículos excelentes que cubren motivos, conceptos y técnicas con respecto al diseño web receptivo, por lo que mantendremos el enfoque de este artículo en algunas de las principales herramientas que lo ayudarán a ser receptivo de manera responsable.
Herramientas para empezar
Antes de comenzar con la construcción de su sitio, es mejor esbozar cómo se adaptarán los elementos de la página para adaptarse a los diferentes tamaños de navegador de los distintos dispositivos en los que se verán, y para evitar la desconexión que a menudo proviene de pensar principalmente en el diseño del escritorio y el resto de las iteraciones receptivas como una ocurrencia tardía (ver especialmente el comentario de Stephanie (Sullivan) Rewis).
01. Hojas de croquis de diseño web adaptable
Este conjunto de hojas de boceto receptivas, de Jeremy P Alford, es un excelente punto de partida para comenzar a trazar cómo las secciones de la página cambiarán en diferentes resoluciones.
02. Cuaderno de bocetos de diseño receptivo
Si prefiere mantener todos sus bocetos en un solo lugar, entonces puede considerar este libro encuadernado con alambre de 50 hojas de bocetos receptivos de la compañía App Sketchbook.
03. Wireframes receptivos
Una de las dificultades de crear sitios web receptivos es utilizar wireframes para mostrar cómo funcionará el diseño receptivo. James Mellers de Adobe ha creado esta herramienta experimental para mostrar cómo puede funcionar el wireframing receptivo de diseños complejos.
04. Patrones de diseño de dispositivos múltiples
Al planificar un diseño receptivo, es útil ver cómo otras personas lo han abordado antes que usted, por lo que los patrones de diseño de dispositivos múltiples de Luke Wroblewski, que enumera patrones populares con enlaces a ejemplos, es un excelente lugar para comenzar.
05. Azulejos de estilo
Style Tiles de Samanatha Warren proponen una nueva técnica para el diseño en la era receptiva; en lugar de maquetas de diseño de ancho fijo, son como muestras o moodboards que muestran el enfoque de diseño general sin entrar en detalles granulares.
Herramientas para una rejilla flexible / fluida
Como se indicó anteriormente, el primer componente necesario para un diseño receptivo es una rejilla flexible / fluida.Los siguientes ya están prediseñados: solo necesita descargarlos y rápidamente estará en camino hacia un sitio más receptivo.
06. Sistema de cuadrícula dorada
Joni Korpi, quien también desarrolló Less Framework, ha lanzado recientemente esta nueva versión de un sistema de cuadrícula confiable para un diseño receptivo. Considerado como "plegable", ya que se adapta fácilmente de 16, a ocho, a cuatro columnas, el sistema Golden Grid también cuenta con una pequeña superposición del navegador que expone la cuadrícula en sus páginas para realizar pruebas.
07. Foldy960
Los talentosos caballeros de Paravel, Inc. han lanzado la cuadrícula 960.gs modificada que utilizan como base para sus proyectos receptivos.
08. SimpleGrid
SimpleGrid, de Conor Muirhead, se creó con capacidad de respuesta incorporada, por lo que es fácil comenzar a ejecutar su proyecto de sitio web receptivo.
09. La cuadrícula CSS de 1140px
Otro gran sistema de cuadrícula sensible es el CSS Grid de 1140px del diseñador de Melbourne Andy Taylor, que va desde una amplia resolución de escritorio hasta dispositivos móviles.
10. Sistema de cuadrícula CSS de columnas
El sistema de cuadrícula Columnal, creado por Pulp + Pixels, también conocido como el director creativo Nick Gorsline, se basa en el sistema de cuadrícula de 1140px, pero con algunas ventajas adicionales, como un kit de diseño con hojas de boceto y plantillas de estructura de alambre, así como estilos de depuración CSS.
11. Sistema de cuadrícula semántica
Las extensiones CSS preprocesadas como Sass y LESS se están volviendo cada vez más populares, y el sistema de cuadrícula semántica de Tyler Tate las usa con el máximo efecto en este sistema de cuadrícula que afirma no usar clases o elementos innecesarios. Más información en coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
Al igual que el sistema de cuadrícula semántica, SUSY de Oddbird creó un sistema de cuadrícula que no usa marcas adicionales ni clases especiales, pero SUSY está dirigido solo a usuarios de Sass (y su extensión, Compass).
13. Gridpak
Gridpak, de Erskine Design, es uno de los generadores de red receptivos más nuevos que existen. Le permite configurar sus columnas y medianiles en varios puntos de interrupción, luego genera archivos CSS, JavaScript y PNG para que todo su equipo trabaje desde el mismo punto de partida.
14. Gridset
Todavía hay un ligero aire de misterio sobre Gridset ya que, en el momento en que escribo esto, aún no se ha lanzado. Pero la herramienta de Mark Boulton Design promete sistemas de cuadrícula personalizados y no prescriptivos y una forma de guardar y administrar sus cuadrículas en línea.
15. Una mejor cuadrícula de Photoshop para RWD
Elliot Jay Stocks propone abandonar el antiguo estándar de cuadrícula de facto de 960 píxeles y trabajar desde una base de 1000 píxeles, lo que facilita el trabajo con todos los cálculos de porcentaje. Si está de acuerdo, ha creado un PSD para que empiece a trabajar.
16. Rejillas fluidas
Si su diseño es altamente especializado y necesita crear su propia cuadrícula personalizada, puede hacerlo con la calculadora de cuadrícula fluida del brillante recién llegado nominado a los premios .net Harry Roberts.
17. Calculadora receptiva
Otra calculadora de píxeles a porcentajes, pero esta de Stu Robson va un paso más allá que otras al generar todas las reglas CSS para usted, lo que significa que puede copiarlas y pegarlas en sus hojas de estilo.
Herramientas para imágenes receptivas (y texto)
Otro componente crucial del diseño web receptivo son las imágenes fluidas. Si bien la técnica para lograr imágenes fluidas es sencilla, la optimización del rendimiento y la carga de la página para diferentes dispositivos parece ser uno de los mayores desafíos en el diseño web receptivo. A continuación, se muestran algunos recursos para abordar el problema.
18. Imágenes receptivas
Filament Group ideó una forma de enviar una imagen de tamaño adecuado según la resolución de la pantalla. Este experimento con imágenes de dispositivos móviles que se escalan de manera sensible y responsable requiere tener dos imágenes de diferentes tamaños como referencia.
19. Imágenes adaptables
Matt Wilcox se inspiró en la herramienta Responsive Images para crear Adaptive Images, que usa PHP y un poco de JavaScript para entregar imágenes apropiadas al dispositivo del usuario sin requerir ningún marcado adicional.
20. Sencha.io Src (anteriormente Tinysrc)
Sencha proporciona un servicio en la nube que envía versiones optimizadas de imágenes alojadas para el tamaño del dispositivo que las solicita. Para saber cómo usarlo, consulte docs.sencha.com/io/src/.
21. FitText
Otra joya más de Paravel, Inc es FitText.js, un complemento de jQuery para hacer que el tipo web de los titulares responda al diseño y al dispositivo. Para obtener más información, consulte trentwalton.com/2011/05/10/fit-to-scale/.
22. slabText
Inspirado por FitText y el algoritmo SlabType, slabText de Brian McAllister es un complemento de jQuery que crea bloques de texto en negrita que cambian de tamaño de manera receptiva mientras se mantienen en un ancho definido.
Herramientas para consultas de medios
Ahora que tiene una idea de cómo cambiará su diseño para diferentes dispositivos, una cuadrícula fluida e imágenes fluidas, necesita consultas de medios para cambiar los elementos de la página a un estado de capacidad de respuesta.
23. Respond.js
El único problema con el diseño receptivo es que los navegadores que no pueden leer las consultas de medios se quedan atrás. Puede que esto no sea un problema para su público objetivo, pero sigue siendo una buena práctica adaptarse a los usuarios de navegadores más antiguos. Respond.js, de Scott Jehl, solo admite propiedades min-width y max-width.
Para obtener más información, consulte filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js, de Wouter van der Graaf, permite que versiones anteriores de IE y otros navegadores prueben y apliquen eficazmente todo tipo de consultas de medios.
25. Adapt.js
Nathan Smith, autor del sistema de cuadrícula 960.gs original, ha escrito Adapt.js, un script que detecta las dimensiones del navegador y sirve solo las hojas de estilo requeridas, como consultas de medios pero sin consultas de medios, lo que significa que también funciona en navegadores más antiguos.
26. Categorizr
Esta es la detección de dispositivos enfocada desde el ángulo opuesto: el script Categorizr de Brett Jankord supone que los dispositivos son móviles a menos que se detecten como computadoras de escritorio o tabletas, lo que le permite ofrecer recursos a los navegadores de manera comprensiva.
Placas de calderas de diseño receptivo (y móviles)
Con el espíritu de un flujo de trabajo eficaz y receptivo, los modelos estándar facilitan el proceso de mover diseños al navegador más temprano que tarde. La mayoría de estos modelos combinan lo mejor de las herramientas mencionadas anteriormente en un paquete ordenado: una cuadrícula flexible mejorada con scripts, al tiempo que implementa las filosofías de contenido móvil primero.
27. 320 y superiores
Andy Clarke's 320 and Up es un modelo estándar para dispositivos móviles que se integra con muchas otras herramientas modernas de diseño web, como LESS y Bootstrap (consulte el n. ° 30). Es una forma ligera y ágil de poner en marcha un sitio rápidamente. Consulte también nuestra entrevista con Andy, en la que nos cuenta más sobre la nueva versión.
28. Gridless
Gridless es un modelo estándar de HTML5 y CSS3 que puede servir como base para sus diseños receptivos, con un enfoque en la tipografía y la compatibilidad integrada entre navegadores.
29. Esqueleto
A diferencia de los dos modelos anteriores, cuyo punto de partida es con la resolución más pequeña, el kit de desarrollo Skeleton, creado por Dave Gamache, se basa en el sistema de cuadrícula 960.gs y se reduce a dispositivos móviles. Skeleton también cuenta con un excelente marco de estilo para que los desarrolladores creen estilos encima.
30. Bootstrap
Creado por Twitter y ahora de código abierto, Bootstrap es un marco y una serie de componentes para hacer que un sitio esté en línea rápidamente y, a partir de la versión dos, todas sus partes principales funcionan de manera receptiva.
Complementos, suplementos y polyfills
Aunque los navegadores y el software modernos tienden a estar preparados para responder, a veces tenemos que usar herramientas adicionales para brindar una experiencia consistente.
31. Complemento receptivo
Marios Lublinski ha escrito un complemento de WordPress que promete convertir cualquier tema de WP actual en uno receptivo. Cómo funciona esto, aún no lo sé, ya que no se ha publicado en el momento de escribir este artículo, pero si está a la altura de su promesa, debería ser muy útil.
32. Derrocamiento
El manejo del desbordamiento de contenido funciona bien en los navegadores de escritorio, pero los navegadores móviles más antiguos lo manejan de manera inconsistente. El polyfill Overthrow del laborioso Filament Group agrega una degradación elegante y consistente en todos los dispositivos, lo que garantiza que todos los usuarios móviles obtengan la mejor experiencia posible.
33. MediaTable
El complemento jQuery de Marco Pegoraro, MediaTable, funciona con Respond.js para ayudarlo a solucionar el problema de cómo mostrar tablas de datos grandes en dispositivos de pantalla pequeña, creando columnas receptivas y agregando un interruptor de mostrar / ocultar donde sea adecuado.
"Probando, probando: 1-2-3 ..."
Otro aspecto del flujo de trabajo receptivo es conocer sus dispositivos y resoluciones de destino y luego probarlos.
34. resizeMyBrowser
resizeMyBrowser, del desarrollador de frontend Chen Luo, tiene varias dimensiones preestablecidas para que la ventana de su navegador pruebe páginas diseñadas de manera receptiva o cree una nueva configuración preestablecida si no puede encontrar la que se ajuste a sus necesidades.
35. responsivepx
Al igual que resizeMyBrowser, responsivepx, creado por Remy Sharp, carga sus páginas en una ventana donde puede probar el ancho y el alto para determinar qué tan bien se están activando sus consultas de medios y dónde están los puntos de interrupción en el diseño.
36. Pruebas de diseño receptivo
Una herramienta increíblemente útil del diseñador y desarrollador Matt Kersley: simplemente ingrese la URL de su sitio receptivo en Pruebas de diseño receptivo para ver cómo se representa en varios tamaños de navegador.
37. El respondedor
Ingrese una URL y The Responsinator le mostrará cómo se muestra en muchos tamaños de dispositivos comunes, con una eficiencia robótica despiadada. Tama Pugsley y Andy Hovey son los responsables de este.
38. Responsive.is
Otro emulador de dispositivo en la página, Responsive.is le permite escribir una URL y luego cambiar su tamaño rápidamente entre una variedad de ajustes preestablecidos diferentes. Está hecho por el equipo detrás de la próxima aplicación Typecast.
39. Screenqueri.es
Una herramienta más de dimensiones del navegador, pero Screenqueri.es de Mandar Shirke se diferencia por tener un extenso conjunto de ajustes preestablecidos para dispositivos móviles y tabletas, así como una cuadrícula y reglas que facilitan mucho la medición fina.
40. Aptus
Otra aplicación para probar sitios en varios tamaños definidos, pero Aptus es nativa de Mac. Está disponible a través de la Mac App Store, y ser nativo trae características adicionales como capturas de pantalla fáciles y soporte fuera de línea.
41. Bookmarklet de diseño adaptable
Victor Coulon ha creado un bookmarklet muy simple pero efectivo; cuando lo activa en cualquier página web, agrega una barra de herramientas que le permite cambiar entre cuatro dimensiones de pantalla comunes para que pueda ver cómo se representa su sitio en diferentes tamaños.
42. Bookmarklet de prueba de diseño adaptable
Este bookmarklet de Benjamin Keen permite una mayor personalización al permitirle definir sus propios tamaños de dispositivo, y tantos o pocos como desee. Cuando se activa, muestra el sitio en todos los tamaños seleccionados, uno al lado del otro para facilitar la comparación.
43. Screenfly
Screenfly, de QuirkTools, le permite probar un sitio en diferentes resoluciones en computadoras de escritorio, tabletas, dispositivos móviles y televisión. Las pruebas de escritorio se limitan actualmente a Safari, mientras que la tableta y el móvil tienen más opciones para dispositivos y navegadores. La televisión se limita a Opera.
44. Indicador de consulta de medios
Johan Brook ofrece una forma de CSS puro para probar cuando el navegador ha activado una consulta de medios. Media Query Indicator es otra buena herramienta para probar y jugar con los puntos de ruptura del diseño.
45. Calce
Shim, una de las herramientas utilizadas en el rediseño del Boston Globe, el modelo del movimiento RWD, es una aplicación Node.js que ejecuta una página web en varios dispositivos en la misma red Wifi, lo que hace que las pruebas entre dispositivos sean mucho más fáciles. .
46. Drive-In
Si no tiene un servidor Node.js para ejecutar Shim, Scott Jehl ha creado una versión más simple llamada Drive-In que funciona fundamentalmente de la misma manera, pero usando PHP, Apache y un archivo .htaccess.
47. Adobe Shadow
Adobe continúa su impulso hacia las tecnologías web con esta herramienta de depuración remota. Instale Shadow y la extensión de Chrome en Mac o Windows, además del cliente Shadow en Android o iPhone, y podrá compartir páginas web entre muchos dispositivos diferentes.
48. Opera Mobile Emulator + depuración remota
Una forma más fácil de depurar páginas móviles es instalar Opera y Opera Mobile Emulator y conectar los dos con su opción de depuración remota. Simple y rápido de configurar, y tiene el beneficio adicional de probar en más de WebKit.
Más inspiración
¿Quiere tener una idea de cómo otros están haciendo que sus diseños sean receptivos?
49. MediaQueri.es
Si aún no lo ha visto, el sitio Mediaqueri.es tiene un número cada vez mayor de sitios que se han pasado al lado receptivo.
50. @RWD
Ethan Marcotte tiene una cuenta de Twitter que trae las últimas noticias, herramientas y exhibiciones del mundo de RWD.
Denise Jacobs adora ser oradora, autora, entrenadora de diseño web y evangelista de la creatividad, mientras que Peter Gasston es el autor de The Book of CSS3 y un desarrollador web veterano que escribe blogs en Broken Links.
¿Me gusto esto? ¡Lee esto!
- Consejos profesionales para crear un sitio web móvil
- Principales técnicas de CSS y JavaScript
- Cómo crear una aplicación
- Las mejores fuentes web gratuitas para diseñadores
- Descubra lo que sigue para la realidad aumentada
- Descarga texturas gratis: alta resolución y listas para usar ahora
