+ 30 Herramientas Útiles de Diseño Web Responsive - Eduarea's Blog

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog
Eduarea's Blog
La Empresa y los Medios de Comunicacin Social
Redes Sociales en la Empresa

infografias
Presentacin
E-business, E-commerce, Social Media y Redes Sociales
Redes Sociales
facebook
web 2.0
Inicio > Herramientas Web 2.0 > + 30 Herramientas tiles de Diseo WebResponsive
RSS feed
Twitter
+ 30 Herramientas tiles de Diseo WebResponsive

31 de agosto de 2012
Eduardo Area
Go to comments
Deja un comentario
Con la gran popularidad de las tablets y los telfonos inteligentes, la demanda de diseo de sitios
web Responsive es ms demandado que nunca. En este momento, los sitios web que ms y
ms personas estn adoptando los diseos
Responsive y esta tendencia se espera
que sea ms intensa a medida que el
porcentaje aumente de los usuarios de
Internet mvil. Este desarrollo ha creado
una enorme demanda de los servicios de
diseadores y desarrolladores web con
dominio en este sistema altamente
adaptable de diseos de pgina web. Ya
podemos ver que responden a temas de WordPress, disponibles en proveedores de las
principales temticas que respondan a los retos de la adopcin de diferentes tamaos de
pantalla.
Como era de esperar, algunas tiles herramientas que respondan al diseo web han surgido
recientemente para apoyar el proceso de diseo y desarrollo de sitios web Responsive. Gracias
a la gran comunidad de desarrolladores talentosos que hicieron todos estos recursos disponibles.
Usted puede preguntar qu es exactamente una herramienta de diseo web Responsive para
utilizarse? Qu herramientas necesitamos para estar por delante del juego Responsive? Si eres
un diseador web o programador considerando la posibilidad de explorar y posiblemente
especializarse en el diseo web Responsive, ha venido al lugar correcto. Estamos compartiendo
con ustedes algunas de las herramientas ms tiles y recursos para ayudarle a construir una
caja de herramientas de diseo Responsive.
Mi Google+
Google+
Autor
Blog dedicado al Ebusiness, E-commerce y

Social Media
RSS - Entradas
RSS - Comentarios
Suscripcin por correo electrnico

Escribe tu direccin de correo electrnico para
suscribirte a este blog, y recibir notificaciones
de nuevos mensajes por correo.
nete a otros 5.447 seguidores
Sign me up!
Buscar en este blog

Buscar
agosto 2012
L
10
11
12
19
13
14
15
16
17
18
20
21
22
23
24
25
27
28
29
30
31
jul
26
sep
ltimos Artculos
Qu es el Conectivismo?: Teora del
Aprendizaje Para la EraDigital
El cuadrante de los lderes en Software
Social (LibroBlanco)
Evaluar Digitalmente el TrabajoEscrito
La Evolucin y 10 Primeros Juegos
Cambiadores de los Medios Sociales en
unaInfografa
Puede encontrar valiosas herramientas de ayuda, las herramientas de diseo de prototipos,
generadores de cdigo, e incluso una coleccin de inspiracin en diseos de sitios web que
responden en este artculo. Esperamos que esta coleccin le pueda ayudar a entrar en el mundo
del diseo Responsive y marcar la diferencia. Si te gusta este artculo, por favor aydenos a
difundir la palabra haciendo clic en los botones de los medios sociales. Tambin estaremos
encantados de recibir sus comentarios, sugerencias y adiciones a esta coleccin de herramientas
tiles.
El diseo Web Responsive (RWD) es un enfoque de diseo web en el que se hace a mano un
sitio para proporcionar una visualizacin ptima en la experiencia de navegacin con fcil lectura
y con un mnimo de cambio en el tamao, velocidad, desplazamiento y-a travs de una amplia
variedad de dispositivos (desde el ordenador de sobremesa a los telfonos mviles).
200 Factores Ranking de Google, la

Lista Completa en unaInfografa
Seguir
Aprende E-business
Seguir Eduarea's Blog

Aprende E-business
Recibe cada nueva

Me gusta
publicacin en tu buzn de
correo electrnico.
nete a otros 5.447 seguidores
Introduce tu direccin de correo electrnico
Un sitio diseado con RWD utiliza CSS3 con preguntas a los medios, una extensin de la regla @
media, para adaptar el diseo al entorno de visualizacin, junto con fluidos a base de
proporcin-redes e imgenes flexibles.
http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]
Suscrbeme

Las consultas a los medios de comunicacin permiten a la pgina utilizar diferentes reglas
de estilo CSS basadas en las caractersticas del dispositivo cuando el sitio est siendo
mostrado, ms comnmente en la anchura del navegador.
Ofrecido por WordPress.com
El concepto de red lquida pide al elemento de la pgina el tamao para estar en las
unidades relativas como porcentajes o EMS, no en unidades absolutas como pxeles o puntos.
Las imgenes flexibles son tambin de tamao en unidades relativas, como para evitar que
se muestre fuera de su elemento contenedor.
Diseos Responsive, Responsively Wireframed
A 619 personas les gusta Aprende E-business.
Plug -in social de Facebook
Mis Tweets
SlideShare el Gigante Silencioso para el
Marketing de Contenidos wp.me/pZIcS20R via @EduareaTweeted 1dayago
sta es una demostracin de James Mellers, ilustra cmo una serie de pginas que pueden
trabajar a travs de estos diferentes dispositivos, mediante la simulacin de cmo el diseo de
cada pgina cambiara con Responsive, para adaptarse al contexto. Slo tienes que utilizar los
botones de arriba a la derecha para alternar entre las presentaciones de escritorio y el mvil y
ver la diferencia.
Responsive Web Design Sketch Sheets
La Importancia de la Creacin de
Conexiones Humanas con su Marca en
los Medios Sociales wp.me/pZIcS-21n
via @EduareaTweeted 1dayago
Qu es SCORM & Tincan?
wp.me/pZIcS-22k via
@EduareaTweeted 1dayago
Con WhatsApp, Facebook Construye una
Conglomerada Infraestructura Social
wp.me/pZIcS-22a va
@EduareaTweeted 1dayago
7 consejos de retroalimentacin.
Feedback is an essential element in the
teaching/learning process.
pinterest.com/pin/9527934834Tweete
d 3daysago
Posts Ms Vistos
23 Ejemplos de Grandes Sitios de
Diseo Web Responsive
Top 24 Plugins Gratis para WordPress
+25 Plugins Asombrosos de Resbalador
jQuery Responsive
20 de los Mejores Plugins para
WordPress de Comercio Electrnico o
Cesta de la Compra
10 Consejos Impresionantes para
OneNote que Debe Utilizar Todo el
Tiempo [Windows]
+ 30 Herramientas tiles de Diseo Web
Responsive
Nuevo Marketing: De las 4 P a las 4 C y
de ah a las 4 V
Aprendizaje Para la Era Digital
Esta herramienta es una ayuda til para trazar la ubicacin de los elementos a travs de diversos
dispositivos. Con esta herramienta, puede tener una idea de dnde colocar los elementos de la
pgina web en diferentes tamaos de los navegadores.
20 Mejores Herramientas para Enviar

Archivos Grandes a los Clientes o Socios
Qu es el Upselling?: Upsells-cmo
venderle ms a sus clientes
Etiquetas
Android Aplicaciones Apple
Less Framework 4
blogs Brian Solis Business Community
Articulos Artculos Bing Blog

Manager
CRM Digg Diseo e-business e-
commerce ebooks ERP
Facebook
Flickr
Google Google Analytics
herramientas HTML HubSpot Inboud

Marketing
Infografia
infografias infographic
infographics Infographie Internet

Internet Marketing iPhone Lead
Nurturing
LinkedIn marcas
Marketing Medios de
comunicacin Social medios

sociales multimedia MySpace
Noticias palabras clave PayPal

Pinterest plugins Posicionamiento
PPC publicidad recursos Redes
Sociales responsive ROI RSS
Search engine optimization SEM
SEO Sitio Smartphones SMM Social
Less Framework es un sistema de red de CSS para disear sitios web adaptativos. Contiene 4
diseos y 3 juegos de tipos de tipografa, todo ello basado en una nica red.
Multi-Device Layout Patterns
Media social media Social media
marketing Social network social networking
Twitter vdeos Web web 2.0

Wikipedia WordPress
Yahoo
YouTube
Wordpress
Twitterme
Aprendizaje Para la Era Digital |
@scoopit sco.lt/7DIGGX 4daysago
Aprendizaje Para la Era Digital
nblo.gs/UYHAs 4daysago
Aprendizaje Para la Era Digital - Qu es
el Conectivismo?: Teora del...
tmblr.co/Z9lghv1AZALyv 4daysago
Aprendizaje Para la EraDigital
wp.me/pZIcS-26h 4daysago
El cuadrante de los lderes en Software
Social (Libro Blanco) | @scoopit
sco.lt/7Wy8Pp 5daysago
Bookmarks del.icio.us
Blogroll
Blog de Eduardo
Documentation
Eduarea\s Blog
Los dispositivos multi-patrones de diseo son conjuntos de patrones populares utilizados por los
diseadores para hacer diseos Resposive. Se muestra cmo los sitios web se adaptan a
diferentes resoluciones de pantalla y cmo se muestran los elementos de la pgina con la
variacin de tamaos de pantallas.
Fluid Grids
Plugins
Suggest Ideas
Support Forum
Themes
WordPress Blog
WordPress Planet
Fluid Grid Calculator es una buena herramienta que se puede utilizar para generar CSS para el
diseo de una red de fluidos. Todo lo que tienes que hacer es introducir el nmero de columnas
y el tamao de las columnas y los canales de comunicacin.
Simple Grid
Crear el cdigo en su parrilla debe ser el menor de sus problemas en la construccin de un sitio.
Es por eso Simple Grid mantiene las cosas simples y directas con poco marcado y clases como
sea posible. Incluso las ranuras de la rejilla de anidacin no requiere clases adicionales.
Simple Device Diagram
Este dispositivo es una herramienta muy til en la planificacin de Responsive en el diseo web.
Simplifica el proceso de elegir qu amplitudes de dispositivo para disear. Describe el ancho
ideal para el diseo de los sitios de disposicin 3, 4 sitios de diseo, etc.
ProtoFluid
Protofluid es una herramienta que permite hacer prototipos rpidos de diseos fluidos, CSS y
diseo adaptable Responsive. ProtoFluid simplifica el desarrollo de diseos de fluidos y CSS
adaptativo utilizando preguntas en los medios. Funciona dentro de su sitio web, aplicacin HTML5
o un juego en forma de un nico JavaScript incluido.
1140 CSS Grid
1140 CSS Grid encaja perfectamente en un monitor de 1280. En monitores ms pequeos, se

convierte en lquido y se adapta a la anchura del navegador. Ms all de un cierto punto que
utiliza preguntas a los medios para servir a una versin mvil, que esencialmente apila todas las
columnas en la parte superior de uno al otro por lo que el flujo de informacin sigue teniendo
sentido. Aunque la resolucin lo mejor para esta rejilla CSS es una de 1280px, todava funciona
igual de bien con pantalla de 1024px, ya que todo se puede ver al igual que en la pantalla de
1280px y todo el camino hasta las pantallas de los mviles. Es una gran herramienta para los
diseadores, con un diseo, es decir, de 1280px que se adapta a todos los tamaos de pantalla.
No hay necesidad de declarar tamaos en lnea para las imgenes a medida que se redimensiona ms pequeo.
Tiny Fluid Grid
Tiny Fluid Grid es una aplicacin basada en web increble que le puede ayudar a determinar el
sistema de red de su diseo. Al establecer el nmero de columnas, el porcentaje de los extremos
y mnimo y las anchuras mximas de su diseo, la aplicacin puede dar una CSS descargable de
la red Responsive.
Gridless
Gridless es una opcin en HTML5 y CSS3 para hacer Responsive para el mvil, los sitios Web
de navegador lo vern con una tipografa hermosa.
Responsive Design Sketchbook
Rpidamente puede trazar su sitio Responsive con el cuaderno de bocetos de diseo Responsive.
Inspirado porResponsive Web Design de Ethan Marcotte, este nuevo cuaderno de dibujo tiene
una portada multi-red de bocetos en miniatura de ventanas mltiples. La ltima pgina es una
pgina de un solo modelo con indicadores de quiebro.
Responsive PX
Esto funciona mediante la carga de su sitio web y la visualizacin de la parte visible en diferentes
tamaos de pantalla. Se puede ajustar la anchura y la altura de la pantalla para simular la
resolucin de diferentes dispositivos.
The responsinator
The Responsinator ayuda a los responsables del sitio web rpidamente a obtener una
indicacin de como responde su sitio y como se ver en los dispositivos ms populares. No
precisamente replica el aspecto que tendr, para la prueba exacta pruebe siempre en los
dispositivos reales.
Screenfly
Screenfly le permite ver su sitio web en una variedad de pantallas de dispositivos y

resoluciones. Escriba una direccin URL y haga clic en GO para empezar.
Responsive Web Design Testing Tool
Otra herramienta de prueba que le puede proporcionar una visin de su sitio web en tamaos de
pantallas diferentes, es sta una aplicacin web. Se muestra la pgina web al mismo tiempo,
una vez que haya ingresado su direccin URL. Le puede ayudar a ayudar con las pruebas de sus
sitios web Responsive mientras diseas y construyes con ellas.
Adobe Shadow
Adobe Shadow es una nueva herramienta de inspeccin y de vista previa que permite a los
desarrolladores y a los diseadores web para trabajar ms rpido y con mayor eficiencia
mediante la racionalizacin del proceso de vista preliminar, por lo que es ms fcil de
personalizar los sitios web para dispositivos mviles.
Golden Grid System
Golden Grid Systeme tiene una rejilla plegable que se puede utilizar como punto de partida en
el diseo web Responsive.Golden Grid Systeme (GGS) divide la pantalla en 18 columnas,
incluso. Las columnas ms a la izquierda y ms a la derecha se utilizan como los mrgenes
exteriores de la rejilla, lo que deja 16 columnas para su uso en el diseo. Las 16 columnas se
pueden combinar, o doblar, en 8 columnas para el tamao de las pantallas de las tablets, y en 4
columnas para el tamao de los mviles. De esta manera GGS puede cubrir fcilmente cualquier
tamao de pantalla desde 240 hasta 2560 pxeles. El autor, Joni Korpi, tiene un muy buen
consejo a sus usuarios. No utilice SGG como es. Tmalo aparte, tome las piezas que ms te
gusten, y adaptarlas a su propia manera de trabajar, eso es lo que dijo.
Gridpak
Gridpak es el momento de punto de partida para sus proyectos Responsive, mejorar su flujo
de trabajo y el ahorro. Crear un sistema de red de respuesta una vez utilizando la interfaz simple
y dejar a Gridpak que haga todo el trabajo mediante la generacin de archivos PNG, CSS y
JavaScript.
Columnal
Columnal es un sistema sensible CSS rejilla ayuda a los navegadores de escritorio y a los
mviles a que jueguen muy bien juntos. Es 1140px de ancho, pero dado que es fluido,
responder a la anchura de la mayora de los navegadores. Si el navegador se pone lo
suficientemente estrecho-delgado, el sitio se mostrar en un formato mvil de forma fcil.
Skeleton
Skeleton es una pequea coleccin de archivos CSS y JS que pueden ayudarle a desarrollar
rpidamente los sitios para que se vean hermosos en cualquier tamao, ya sea una pantalla de
17 de un ordenador porttil o un iPhone.
Bootstrap
Bootstrap ofrece HTML simple y flexible, CSS y Javascript para conocidos componentes de
interfaz de usuario y las interacciones. En otras palabras, es un conjunto de herramientas de
front-end para acelerar el desarrollo. Creado y mantenido porMark Otto y Jacob Thornton en
Twitter.
320 and Up
La prctica comn en el diseo web Responsive es empezar con el escritorio de tamao

completo como punto de partida y de all hacer escalas en pantallas de menor tamao. Los
creadores de 320 and Upq lo tienen en el reverso. Ellos dijeron que debe comenzar a disear en
los navegadores pequeos y desde entonces ser su forma de trabajo. La versin actualizada de
las caractersticas de 320 and Up versin cinco, CSS3 con incrementos de consulta al medio:
480, 600, 768, 992 y 1382px, atmsfera de diseo (color, textura y tipografa) separados del
diseo, los estilos de arranque para los botones, los formularios, las tablas y ms.
FitText
FitText hace los tamaos de fuente flexibles. Use este plugin en su diseo Responsive para
lograr titulares escalables que llenen el ancho del elemento padre. Este plugin jQuery funciona
inflando el tipo web para llenar su elemento padre. Es por eso que todava puede obtener un
texto de anchura completa que no importa cul sea el tamao de su pantalla. Funciona bien con
Lettering.js, o cualquier otra propiedad CSS3 que usted se lanza en ella.
inuit.css
inuit.css es un framework CSS equipado con plugins llamados igles, que amplan el marco
bsico para agregar funcionalidad ms especfica. Tiene un constructor de cuadrcula como
sistema personalizado para la creacin de igls de malla fija o fluido del sistema.
Mobile Boilerplate
Mobile Boilerplatees una plantilla base creada por los desarrolladores de HTML5 Boilerplate,
para ayudar a los desarrolladores a crear aplicaciones mviles para web mvil rpidamente.
Cuenta con cross-browser para la vista de optimizacin para Android, iOS, IE Mobile, Nokia y
Blackberry. Tambin soporta el almacenamiento en cach del servidor Apache, la compresin y
los dems valores predeterminados de configuracin.
Respond.js
Respond.js es rpido y ligero para min/max-ancho CSS3 Preguntas de Medios (para Explore 68, y ms). El objetivo de este script es proporcionar un rpido y ligero (3 kilobyte minified / 1
kilobyte gzipped) script para permitir diseos de web Responsive en los navegadores que no
apoyan Media Query CSS3 en particular, Explorer 8 e inferior. Este script remendar
probablemente el soporte a otros navegadores que no apoyan esta propiedad.
Adapt.js
Adapt.js es un archivo de peso ligero en JavaScript que determina qu archivo CSS puede
cargar antes de que el navegador vea una pgina. Si el navegador se inclina o se cambia el
tamao, Adapt.js simplemente comprueba su ancho, y sirve slo el CSS que se necesita,
cuando es necesario.
mediaQuery Bookmarklet
mediaQuery Bookmarklet proporciona una representacin visual de las actuales dimensiones

de visualizacin y consulta a los medios de comunicacin.
Responsive Data Table Roundup
sta coleccin de mesa comisariada por Chris Coyier, discute cmo las tablas deben aparecer
cuando el tamao de la pantalla se reduce. Se completa con ejemplos y cdigos fuente que se
puede ver como una ayuda para su propio diseo web Responsive.
Adaptive Images
Adaptive Images detecta el tamao de pantalla de su visitante y automticamente crea,

cachs y entrega a los dispositivos apropiados a escala con reversiones de las imgenes
apropiadas en HTML empotradas en su pgina web. No hay cambios de mrgenes necesarios. Se
pretende para el uso con los diseos Responsive para ser combinado con las tcnicas fluidas de
imagen.
Seamless Responsive Photo Grid
Seamless Responsive Photo Grid es una cuadrcula que se puede utilizar para hacer que las
imgenes muestren borde a borde en la ventana del navegador sin espacios. La idea detrs de
este truco de Chris Coyier es tejar las fotos y hacer el flujo en una serie de columnas de
izquierda a derecha a lo largo de toda la pgina. Al establecer el ancho de imgenes a 100%, se
ocupar exactamente de la anchura de una columna. El nmero de columnas depende del
tamao del navegador. A medida que el tamao de la pantalla se hace ms pequeo, la red
funciona por tener preguntas a los medios para probar el ancho del navegador y ajustar el
nmero de columnas en consecuencia. Puede cambiar el tamao de su navegador a su alrededor
y ver las cosas que se mueven muy rpido.
Slabtext
Slabtext es un plugin de jQuery para la produccin de grandes titulares, negrita y capacidad de

respuesta Responsive. En pocas palabras, el guin se divide en filas de titulares antes de
cambiar el tamao de cada fila para llenar el espacio horizontal disponible. El nmero ideal de
caracteres para establecer en cada fila se calcula dividiendo la anchura disponible por el tamao
de fuenteCSS la secuencia de comandos utiliza entonces este recuento del carcter ideal para
dividir el ttulo en combinaciones de palabras que se muestran como lneas separadas de texto.
Convert a Menu to a Dropdown for Small Screens
Chris Coyier explica cmo hacer un men de navegacin para convertir en una lista desplegable
cuando se navega por el sitio web en una pantalla pequea. Esa es una mejor opcin que un
vnculo muy pequeo.
Media Queries
Media Queries cuenta con una importante coleccin de diseos web Responsive que se
pueden ver como una inspiracin para su diseo.
Bibliografa:
Responsive Web Design with HTML5 and CSS3 por Ben Frain
WordPress Meet Responsive Web Design por Michael Pick
Delivering Web to Mobile por Mark Power
Responsive Design Guide porMatt Crist, Alec Francesconi, Andrew Paradise, George White
GoMobile por Jason Wilson
Mobile-First Responsive Web Design
Responsive Web Design por Tim Davison
Responsive Web Design: Enriching the User Experience por Brett S. Gardner
How to Build a Mobile Website: Know Your Options
Responsive Web Design Increases Sales
Responsive Design and Small Screen Optimization por Patrick Hamann
Artculos relacionados:
33 Estupendos Temas de Comercio Electrnico para WordPress

24 Plantillas Responsive Bootstrap por ThemeForest
10 plantillas excelentes para OpenCart que sus clientes no pueden resistirse
Los Mercados Online de Envato: ebooks, tutoriales, vdeos, cursos, temas para
WordPress y App
Compartir esto:
Facebook
141
Correo electrnico
StumbleUpon
Google
Pinterest
LinkedIn
25
Twitter
123
Ms
Google+
Eduardo Area
Relacionado
La verdad detrs de diseo Web

Responsive: Es la prxima gran
esperanza o todo es un bombo?
En "Diseo Responsive"
23 Ejemplos de Grandes Sitios de

Diseo Web Responsive
En "Redes Sociales"
+25 Plugins Asombrosos de
Resbalador jQuery Responsive
En "plugins"
Herramientas Web 2.0

CSS, css3, desarrolladores web, diseo de sitios web, diseo web, herramientas, HTML5,
responsive, usuarios de internet, Web
Deja un comentario
Trackback
31 de agosto de 2012 en 6:13 PM | #1
Trackbacks (0)
Comentarios (14)
Responder | Cita
Responsive web design es un enfoque que sugiere que el diseo web debe
responder al comportamiento del usuario y al medio ambiente sobre la base del
Eduarea

tamao de pantalla, la plataforma y la orientacin.
El diseo Responsive le permite llenar los espacios en blanco en las clases de
dispositivos a travs de la aplicacin de las redes de fluidos, imgenes flexibles,
y (cuando sea posible) las consultas de los medios.
Las rejillas de fluido se refieren a diseos de fluido donde las unidades de rejilla
cambian el tamao segn el tamao de la pantalla. Se trata de definir sus
propios parmetros para varios objetos del cdigo como columnas, el espacio y
los contenedores. El tamao y el espacio son los dos componentes principales
que se centran en la creacin de su sistema de red flexible. Ya sea que est
usando un sistema de red prefabricado o crear una solucin personalizada,
utilizando porcentajes (o EMS) en lugar de pxeles como sus unidades de
medida.
Las imgenes de movimiento flexible y escala con la red flexible. Esto significa
que la escala est en funcin de los atributos HTML de altura y anchura para el
contenido ms el texto en dispositivos ms pequeos. La otra forma de las
imgenes de escala se les recorta con la ayuda de la propiedad de
desbordamiento de CSS. Los recipientes alrededor de las imgenes cambiarn
para adaptarse a los nuevos entornos de visualizacin. Una forma ms est
cargando diferentes versiones de imagen a un servidor y la visualizacin de la
versin de tamao adecuado y dinmico en funcin del dispositivo utilizado.
Consultas de medios de comunicacin (Media Queries) permiten a los
diseadores crear mltiples diseos utilizando los mismos documentos HTML de
forma selectiva que sirve al estilo basado en las caractersticas de la aplicacin
del usuario, tales como el tamao de la ventana del navegador, la orientacin, la
resolucin de pantalla, el color. Actan como los comentarios condicionales que
son capaces de indicar el dispositivo utilizado y envan un cdigo diferente para
los diferentes atributos del dispositivo, en otras resoluciones de pantalla
diferentes las palabras objetivo con diferentes estilos.
Las resoluciones de pantalla: Las resoluciones comunes incluyen 320px de
anchura de retrato y 480px la anchura de paisaje para los smartphones, 768px
de anchura de retrato y 1024px la anchura de paisaje para las tablets (y
resoluciones netbook tpicas) as como varias resoluciones de monitor de
escritorio. Una disposicin que slo provee alimentacin para resoluciones
predeterminadas a menudo es referida como siendo adaptable, mientras que
una disposicin realmente sensible ser construida usando EMS o porcentajes,
permitiendo a un nivel infinito del escalamiento.
31 de agosto de 2012 en 7:16 PM | #2
Audiv
Produccions
Responder | Cita
La informacin aportada tanto en este post como en vuestro BLOG es muy

valiosa.
Solo hara el aporte de que Responsive web Design est siendo muy valorado
por Google para el buen posicionamiento en buscadores .
Pueden ver el articulo de posicionamiento en buscadores en el siguiente enlace:
http://audivproduccions.blogspot.com.es/2012/08/mas-informacion-sobreresponsive-web.html
Un saludo
2 de septiembre de 2012 en 8:11 AM | #3
Amedar
Consulting
Group
I like the helpful info you provide in your articles. Ill bookmark your blog and
check again here frequently. I am quite sure I will learn many new stuff right
here! Good luck for the next!
2 de septiembre de 2012 en 10:16 PM | #4
El blog
de Roco
Responder | Cita
Reblogged this on El blog de Roco Romn.
Diseo
web
Responder | Cita
Responder | Cita
Hola creo que estos sitios web nos ayudan a adquirir ms conocimientos y a
tener herramientas bsicas a la hora de implementar estrategias en un negocio
gracias.
Saludos
Responder | Cita
Muy buena coleccin de herramientas, slo echo a faltar el framework

Sandra
Diseo
Web
Foundation 3.0, por lo dems est genial. Screenfly es excelente!
19 de noviembre de 2012 en 1:59 PM | #7
DOS
ESTUDIO
Excelente informacin! Gracias por este resumen tan completo, vi un par de

cositas que me pueden ser muy tiles. Muchas gracias por compartir esta
informacin. Estar atenta a sus nuevas publicaciones. Saludos!
29 de diciembre de 2012 en 11:55 AM | #8
Ivn
Responder | Cita
Gran post con elementos casi imprescindibles si queremos empezar a realizar

diseo adaptable. Creo que sera interesante aadir Modernizr, es de gran
ayuda para detectar las funcionalidades de los browser que nos visitan y poder
actuar en consecuencia (cargar o no scripts necesarios, csss alternativos) etc
29 de enero de 2013 en 12:20 PM | #9
Alberto
Responder | Cita
Responder | Cita
Si ya en 2012 todo apuntaba hacia ella, 2013 ser el ao de la tecnologa

responsive. Ha dejado de ser optativo para ser algo bsico en los diseos de los
sites.
Tomo nota de algunas herramientas que no conoca. Muchsimas gracias!
11 de marzo de 2013 en 5:04 PM | #10
Myles
Responder | Cita
I would like to appreciate the actual efforts you get on paper this informative
article.
I am hoping a similar best performance of your stuff in the future
too. In reality your creative composing abilities offers influenced
me to begin my very own BlogEngine blog site right today.
Actually the blogging and site-building will be dispersing its means rapidly. The
article is really a great illustration of this.
1 de mayo de 2013 en 6:05 AM | #11
Cristian
Bonilla
Muy buena informacin. Gracias.

http://www.mercadeowebefectivo.com
5 de mayo de 2013 en 10:20 AM | #12
Abeled
Responder | Cita
Hay una herramienta que me pasaron en la universidad: http://herramientasonline.com/responsive/responsive-design-test-online.php sirve para hacer un
test a las pginas web moviles con responsive design.
12 de marzo de 2014 en 3:17 PM | #14
PC Users
Responder | Cita
En http://www.haztuweb.es estn todos pasos para crear una pgina web gratis
con Blogger y en pocos minutos. Est muy bien explicado, sencillo y fcil.
30 de mayo de 2013 en 10:06 PM | #13
Carlota
Responder | Cita
Responder | Cita
PC Users :
Excelente, es siempre una buena opcin utilizar plantillas para iniciar
tus proyectos.
http://www.pcuserspanama.com
Deja un comentario
Cmo Utilizar las Piezas del Telfono Mvil Roto Como Herramientas de
Supervivencia[infografa] Introduccin a la Automatizacin de Marketing Social[Infografa]
Blog de WordPress.com. El tema INove.
Arriba

+ 30 Herramientas Útiles de Diseño Web Responsive - Eduarea's Blog

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

+ 30 Herramientas Útiles de Diseño Web Responsive - Eduarea's Blog

Cargado por

Copyright:

Formatos disponibles

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

La Empresa y los Medios de Comunicacin Social

Redes Sociales en la Empresa

E-business, E-commerce, Social Media y Redes Sociales

+ 30 Herramientas tiles de Diseo WebResponsive

Blog dedicado al Ebusiness, E-commerce y

Suscripcin por correo electrnico

Buscar en este blog

200 Factores Ranking de Google, la

Seguir Eduarea's Blog

Recibe cada nueva

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Ofrecido por WordPress.com

Diseos Responsive, Responsively Wireframed

A 619 personas les gusta Aprende E-business.

Plug -in social de Facebook

Responsive Web Design Sketch Sheets

20 Mejores Herramientas para Enviar

Android Aplicaciones Apple

blogs Brian Solis Business Community

Articulos Artculos Bing Blog

CRM Digg Diseo e-business e-

commerce ebooks ERP

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Google Google Analytics

herramientas HTML HubSpot Inboud

infographics Infographie Internet

comunicacin Social medios

Noticias palabras clave PayPal

SEO Sitio Smartphones SMM Social

Multi-Device Layout Patterns

Media social media Social media

marketing Social network social networking

Twitter vdeos Web web 2.0

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Simple Device Diagram

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

1140 CSS Grid

1140 CSS Grid encaja perfectamente en un monitor de 1280. En monitores ms pequeos, se

Tiny Fluid Grid

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Responsive Design Sketchbook

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Screenfly le permite ver su sitio web en una variedad de pantallas de dispositivos y

Responsive Web Design Testing Tool

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

Golden Grid System

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

http://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

+ 30 Herramientas tiles de Diseo Web Responsive | Eduarea's Blog

La prctica comn en el diseo web Responsive es empezar con el escritorio de tamao