50 útiles herramientas de diseño web sensibles para los diseñadores
Durante los últimos días, le mostramos algunos de los mejores temas de respuesta de WordPress y Joomla que puede descargar y usar en su sitio. Hoy te vamos a dar las herramientas. Al incluir marcos, servicios y scripts descargables, creemos que serán de gran ayuda cuando se trata de un desarrollo web sensible..
Para que sea más fácil bajar la lista completa de herramientas, las hemos categorizado en las siguientes secciones:
- Grid & Frameworks
- Hojas de croquis y estructuras de alambre
- Plugins de JavaScript y jQuery
- Pruebas y vista previa
- Deslizadores
- Otros
Grid & Frameworks
[Volver arriba]
Columnal
Columnal es un proyecto Pulp + Pixels, que ha sido tomado de cssgrid.net, mientras que algunas inspiraciones de código se han tomado de 960.gs. Columnal lo ayuda mucho en su diseño web sensible, al hacer que sus cuadrículas sean flexibles para cambiar dinámicamente cuando se cambia el tamaño de la ventana del navegador.
Esqueleto
Skeleton es un marco de CSS simple y poderoso, que gusta principalmente a desarrolladores y diseñadores debido a su simplicidad y eficiencia. No hay un trabajo pesado con Javascript aquí, solo CSS bueno y puro con documentación limpia.
LessFramework 4
Less Framework es más o menos un framework, en nombre de su creador. Es un sistema de cuadrícula de CSS adaptable basado en el uso de consultas de medios de CSS en línea, lo que facilita mucho el desarrollo de sitios web receptivos.
Sistema de rejilla semántica
El sistema de cuadrícula semántico se utiliza para diseñar diseños de cuadrícula receptivos. Utiliza extensiones CSS preprocesadas como LESS, SCSS o Stylus para ofrecer la máxima eficiencia. Puede seleccionar los anchos de columna y canal, elegir el número de columnas y cambiar entre píxeles y porcentajes..
Sistema Golden Grid
Golden Grid System es un sistema de cuadrícula fluida que sirve como punto de partida de su diseño web sensible. Permite que el sitio web sirva páginas atractivas que van desde 240 a 2560px.
320 y más
320 and Up es una plantilla de consultas de medios CSS, que sirve como plantilla de inicio para su diseño receptivo. Sigue un enfoque completamente inverso al de las otras calderitas disponibles..
Inuit.css
Inuit.css es un marco CSS, que es extremadamente fácil de usar, incluso para los principiantes. Tiene un enfoque minimalista, por lo tanto, solo necesita lidiar con las cosas que se necesitan, pero si es necesario, también puede ampliarse con un puñado de complementos disponibles..
Sin rejilla
Gridless es una plataforma para crear sitios web con capacidad de respuesta y de navegador cruzado con una hermosa tipografía. Esta herramienta se enfoca en el desarrollo progresivo de un proyecto y sirve como punto de partida de cualquier diseño..
1140 CSS Grid
1140 CSS Grid es un excelente sistema de cuadrícula CSS diseñado por el diseñador de Melbourne Andy Taylor, que permite que su diseño se ajuste perfectamente a 1140px para monitores grandes y su diseño fluido se adaptará perfectamente a otras resoluciones más pequeñas con muy poco trabajo adicional.
1KBCSSGrid
1KB CSS Grid diseñado por Tyler Tate, es un generador de Grid CSS simple y ligero. Le permitirá establecer el número de columnas, el ancho de la columna y el ancho de la canaleta, y puede obtener un CSS descargable para la cuadrícula de su sitio web..
Oreja
Bootstrap, creado y mantenido por Mark Otto y Jacob Thornton en Twitter, es un excelente conjunto de elementos de interfaz de usuario, diseños y herramientas de javascript, disponibles de forma gratuita para que los descargue y utilice en sus proyectos de diseño web..
Calculadora de rejilla fluida
Esta sencilla herramienta le ayudará a obtener rápidamente el CSS de su diseño de sitio web de cuadrícula fluida.
Rejillas fluidas
Fluid Grid es un marco de cuadrícula fluida simple pero útil, que crea diseños receptivos basados en 6, 7, 8, 9, 10, 12 o 16 columnas..
Flurid
Flurid es un marco de cuadrícula CSS de navegador cruzado simple y muy útil con hasta 16 columnas. Y además no oculta los píxeles en los márgenes..
Cuadrícula
Gridset es una herramienta para hacer cuadrículas de cualquier tipo, tales como, columnar, asimétrica, fija, relación, compuesto, sensible y más. Esta herramienta de Mark Boulton, todavía está en versión beta, pero resulta ser prometedora. Y si lo mencioné, usarlo es tan simple como insertar un enlace.
Gridpak
Gridpak es un generador de cuadrícula de respuesta en línea, donde se puede cambiar el número de columnas, el relleno y el margen y se pueden agregar puntos de interrupción personalizados. El CSS es generado por la herramienta y listo para descargar. También proporciona plantillas de cuadrícula PNG, que se pueden usar para propósitos de diseño en Photoshop.
SimpleGrid
SimpleGrid, desarrollado por Michael Kuhn, es un marco CSS muy sencillo y directo para crear diseños infinitos basados en cuadrículas. Por defecto, SimpleGrid está preparado para 4 rangos distintos de tamaños de pantalla.
Susy
Susy de Oddbird, es similar en acción al Sistema de cuadrícula semántica. No utiliza marcado adicional ni ninguna otra clase especial, sino que está dirigido únicamente a los usuarios de Saas y su extensión Compass..
Tiny Fluid Grid
Tiny Fluid Grid es una aplicación web impresionante, que puede ayudarlo a determinar el sistema de red de su sitio web de forma interactiva. Puede establecer el número de columnas, el porcentaje de canal, el ancho mínimo y máximo del diseño de su sitio web y obtener un CSS descargable para él.
Sistema de rejilla variable
El sistema de cuadrícula variable está diseñado y desarrollado por SprySoft y se basa en el sistema de cuadrícula 960. Permite a los desarrolladores y diseñadores generar la cuadrícula personalizada y luego descargar el archivo CSS que se adjunta en base a esa cuadrícula.
Hojas de croquis y estructuras de alambre
[Volver arriba]
Diseño web responsivo Hojas de croquis
Esta herramienta es útil para trazar las ubicaciones de varios elementos en el diseño de su sitio web en varios dispositivos. Con la ayuda de este dispositivo, puede tener una idea de dónde colocar los elementos necesarios de un sitio web para diferentes tamaños de pantalla y resoluciones..
Wireframes responsivos
Responsive Wireframes es una herramienta experimental creada por James Mellers de Adobe. Está construido con solo HTML y CSS (no se usaron imágenes o JS) que puede usar para visualizar cómo se vería su diseño sensible en los navegadores reales de varios equipos de escritorio y dispositivos móviles.
StyleTiles
Style Tiles le da una forma de desarrollar una idea de cómo se vería un sitio web, independientemente de los estilos complicados que entran en juego. Le brinda la oportunidad de un flujo de trabajo de diseño con capacidad de respuesta perfecta y también la capacidad de integrar los comentarios de los clientes.
Plugins de JavaScript y jQuery
[Volver arriba]
Adapt.Js
Adapt.js es una solución de Javascript y una excelente alternativa a las consultas de medios CSS. Usar el enfoque de @media es una buena práctica, pero esto no funciona para todos los navegadores. Nathan Smith, el creador de 960 Grid System, lanzó Adapt.js, una biblioteca javascript muy ligera para superar este problema.
Isótopo
Isotope es un increíble complemento de jQuery, que resulta ser muy útil al diseñar un diseño sensible. No solo ayuda a reorganizar los elementos de una página cuando la ventana del navegador cambia de tamaño o el tamaño de la pantalla es más pequeño, sino que también ayuda a filtrar esos elementos..
Albañilería
La mampostería es un excelente complemento de jQuery, que se utiliza para crear diseños dinámicos y adaptativos. Este complemento ayuda a reorganizar los elementos en su diseño sensible, para que puedan encajar mejor en los puntos abiertos de la cuadrícula.
Respond.js
Respond.js es un script rápido y liviano (3 Kb minimizado y 1 Kb comprimido comprimido), cuyo objetivo principal es habilitar un diseño web sensible en aquellos que no admiten las Consultas de Medios CSS3, como los navegadores IE.
TinyNav.js
TinyNav.js es un complemento pequeño y ligero de jQuery, de solo 362 bytes, que convierte las grandes listas de navegación en pequeños menús desplegables para pantallas más pequeñas..
Wookmark jQuery Plugin
Wookmark es un complemento de jQuery que detecta el tamaño de la ventana del navegador y organiza automáticamente los elementos de la página en columnas. También puede ver una vista previa en vivo en la parte inferior de la página.
Pruebas y vista previa
[Volver arriba]
ProtoFluid
ProtoFluid es una herramienta de creación de prototipos basada en la web que le permite probar los prototipos de su sitio web en varios tamaños de pantalla y resoluciones. Simplemente escriba la URL, seleccione el dispositivo (o cualquier dimensión personalizada) y presione iniciar. Ya que es una herramienta basada en web, también le permite usar otras extensiones como FireBug.
Responsive.Is
Responsive.Is es creado por TypeCast, otra herramienta emuladora de navegador, que puede utilizar para probar su diseño responsivo. Solo ingrese una URL, y cambiará automáticamente su tamaño dependiendo del dispositivo que elija.
Responsivepx.Com
ResponsivePx es una herramienta increíble para probar el diseño de su sitio web sensible. La característica principal que lo distingue de los demás, es su capacidad para cambiar el tamaño del sitio web píxel por píxel. Esta característica impresionante, le permitirá identificar los puntos de ruptura y también probar cómo funcionan las consultas de medios CSS en su sitio.
Herramienta de prueba de diseño web sensible
Una herramienta de prueba impresionante, que puede permitirle ver su sitio web sensible en varios tamaños de pantalla simultáneamente en una sola pantalla, mientras los construye o diseña. Me gusta esta herramienta principalmente porque muestra todas las resoluciones de pantalla una al lado de la otra, lo que facilita la depuración..
ReView.Js
ReView es un sistema de visualización dinámica, desarrollado en JavaScript puro, que le brinda una experiencia de visualización fantástica para su diseño web sensible.
Mosca de la pantalla
Screenfly by QuirkTools, es una herramienta increíble que le permitirá ver su sitio web sensible en una variedad de dispositivos: Escritorio, Tableta, Móvil y TV. También tiene opciones para habilitar o deshabilitar el desplazamiento o incluso para rotar la pantalla.
Screenqueri.es
Screenqueri.es es una herramienta de prueba de diseño sensible al píxel perfecto. Simplemente ingrese la dirección del sitio web que desea verificar y esta herramienta mostrará el sitio web en varios tamaños de pantalla según el dispositivo. También puede cambiar manualmente el tamaño del píxel por píxel para identificar los puntos de interrupción.
El responsable
Pruebe su sitio en varios dispositivos, desde un iPhone y un iPad, a un Kindle y en Android en el Responsinator. También muestra su sitio tanto en modo vertical como horizontal. Me gusta esta herramienta mucho más debido a los contornos de los dispositivos que se muestran en la página, lo que aporta más significado a todo el proceso..
Deslizadores
[Volver arriba]
Arándano
Blueberry es un fantástico control deslizante de imagen jQuery de código abierto, que está escrito para funcionar específicamente para diseños fluidos o sensibles.
Elastislide
¿Quiere un carrusel que se ajustará automáticamente al tamaño de la pantalla cuando se cambie el tamaño de la ventana del navegador o cuando esté en una pantalla más pequeña? Elastislide es el complemento jQuery más adecuado para sus necesidades.
Control deslizante CSS3 sensible
Este es un control deslizante CSS3 que puede adaptarse a cualquier tamaño de pantalla y resolución de pantalla con facilidad. Lo bueno de este control deslizante es que las flechas van dentro del cuadro cuando el tamaño de la pantalla del dispositivo es lo suficientemente pequeño. No se necesita JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js es un complemento jQuery muy simple y extremadamente liviano (solo 1Kb) que crea un control deslizante sensible que usa listas desordenadas. Funciona en una amplia gama de navegadores, también en IE6 y superiores.
Otros
[Volver arriba]
Imágenes adaptativas
Adaptive Images es una herramienta en línea para el diseño web sensible, que detecta el tamaño de la pantalla de los visitantes y crea, almacena en caché y entrega imágenes reescaladas, según el tamaño y la resolución de la pantalla..
FitText.Js
FitText.js es una pequeña herramienta javascript, que permite el cambio de tamaño automático de texto y titulares cuando se cambia el tamaño de la ventana del navegador. No más preocupaciones de desajuste de tamaño de texto con esta herramienta a bordo.
FitVid.Js
¿Quiere volver a escalar los videos incrustados cuando la ventana del navegador cambia de tamaño o el dispositivo tiene una resolución menor? FitVid.Js puede ayudarte a lograr esto. Es un complemento jQuery ligero, simple y fácil de usar que se utiliza para lograr videos incrustados de ancho fluido.
Imágenes de la retina
Retina Images es una solución javascript impresionante, que servirá automáticamente a 2X imágenes más grandes y de alta resolución cuando se vea en la pantalla de retina. Todo lo que necesita hacer es poner una versión de alta resolución de cada imagen, y administrará el resto..
Rejilla de fotos sensible sin fisuras
La cuadrícula de fotos responsiva perfecta muestra las imágenes de borde a borde en el navegador, sin espacios entre las imágenes. Las fotos están en mosaico y fluyen de izquierda a derecha a lo largo de la página en columnas. El número de columnas se ajusta de acuerdo con el tamaño de la ventana del navegador.
SlabText
SlabText es un complemento o herramienta de jQuery de Brian McAllister basado en el algoritmo slabText, que divide los titulares en filas antes de cambiar el tamaño de cada fila para llenar el espacio disponible. Es bastante similar al complemento FitText.Js en acción.
Zurb - ResponsiveTables
¿Alguna vez se ha preguntado cómo tratar con las tablas de big data en un diseño receptivo? Zurb, un combo CSS / JS te da la respuesta; toma las tablas de datos y las modifica para que no rompan el diseño receptivo en dispositivos de pantalla más pequeños.
Categorizar
Categorizr es un script PHP muy pequeño, que proporciona a sus visitantes una experiencia web más específica. Le ayudará a entregar diseños específicos de dispositivos para Tableta, TV, Móvil o Escritorio.
Bookmarklet Media Query
Bookmarklet de consulta de medios le muestra el tamaño que tiene la ventana gráfica actual y qué consulta de medios acaba de activarse..
La calculadora sensible
La Calculadora responsiva es una herramienta en línea muy simple que puede ayudarlo a convertir los píxeles en porcentajes al diseñar su sitio web receptivo.
Hasta la próxima semana
En la segunda semana de esta serie, le presentaremos tutoriales que realmente lo introducirán en Diseño Web Responsivo (RWD).
No te lo pierdas.
