La mayoría de di­se­ña­do­res web conocen la im­po­r­ta­n­cia y los be­ne­fi­cios del diseño re­s­po­n­si­vo. Si has optado por convertir tu proyecto online en uno re­s­po­n­si­vo, será necesario realizar pruebas en las pantallas de los di­fe­re­n­tes di­s­po­si­ti­vos (es­cri­to­rio, po­r­tá­ti­les, tablets, sma­r­t­pho­nes) durante el proceso de de­sa­rro­llo. Estos re­s­po­n­si­ve tests deben rea­li­zar­se, a más tardar, durante la fase final de im­ple­me­n­ta­ción, con el fin de de­te­r­mi­nar ex­te­n­si­va­me­n­te errores e in­co­n­si­s­te­n­cias que se puedan presentar en el futuro. A co­n­ti­nua­ción pre­se­n­ta­mos 7 he­rra­mie­n­tas de diseño web para comprobar si tu web es re­s­po­n­si­va.

Dominios web
Compra y registra tu dominio ideal
  • Domina el mercado con nuestra oferta 3x1 en dominios
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis
  • Registro privado y gratis para mayor seguridad

Test re­s­po­n­si­ve desde el navegador

Todas las he­rra­mie­n­tas que pre­se­n­ta­mos a co­n­ti­nua­ción se ejecutan en el navegador y pueden uti­li­zar­se de forma gratuita sin necesidad de registro. Solo necesitas in­tro­du­cir el URL de la web re­s­po­n­si­va que deseas comprobar y la he­rra­mie­n­ta se encarga de todo lo demás. Estas apli­ca­cio­nes web simulan la re­pre­se­n­ta­ción de una página web en una o varias pantallas y te permiten navegar por ella como si lo hicieras desde el navegador. Así, estas he­rra­mie­n­tas de diseño web no solo permiten la vi­sua­li­za­ción de la página de inicio, sino que facilitan la na­ve­ga­ción en di­fe­re­n­tes re­so­lu­cio­nes.

Mozilla Firefox Tool

Si utilizas Firefox como navegador web, es bastante fácil comprobar si tu web es re­s­po­n­si­va. En el menú de na­ve­ga­ción, haz clic en la opción “De­sa­rro­lla­dor Web” y luego en “Vista de Diseño Adaptable” o utiliza la co­m­bi­na­ción de teclado [Ctrl] + [Mayús] + [M]. La página web se mostrará sobre un fondo negro y en la parte superior izquierda podrás elegir el tamaño de pantalla pree­s­ta­ble­ci­do del re­s­po­n­si­ve test. También puedes cambiar la re­so­lu­ción agra­n­da­n­do o re­du­cie­n­do el marco de las esquinas con tu ratón.

Screenfly

Esta apli­ca­ción web prueba el diseño re­s­po­n­si­vo de una web mediante una amplia gama de re­so­lu­cio­nes estándar re­pre­se­n­ta­das por los iconos en la parte inferior de la barra de di­re­c­cio­nes del navegador. Entre las opciones se incluyen pantallas de es­cri­to­rio, tablets, sma­r­t­pho­nes y te­le­vi­so­res. Screenfly también permite comprobar re­so­lu­cio­nes in­di­vi­dua­les, lo que la convierte en una apli­ca­ción pa­r­ti­cu­la­r­me­n­te versátil.

re­s­po­n­si­ve­px

Esta he­rra­mie­n­ta funciona de manera parecida a Screenfly. re­s­po­n­si­ve­px permite ampliar el ancho y la altura de la pantalla virtual a un máximo de 3.000 píxeles.

Scree­n­che­ck de Cyber Crab

Otra apli­ca­ción muy flexible para realizar un re­s­po­n­si­ve test es Scree­n­che­ck fue pro­gra­ma­da por los de­sa­rro­lla­do­res de software de cybercrab.com y puede ser utilizada di­re­c­ta­me­n­te desde su página web.

De­mo­n­s­tra­ti­ng Re­s­po­n­si­ve Design

En De­mo­n­s­tra­ti­ng Re­s­po­n­si­ve Design el usuario solo tiene a su di­s­po­si­ción tres tamaños de pantalla (la versión de sma­r­t­pho­ne y tablet también incluye su vi­sua­li­za­ción ho­ri­zo­n­tal). Sin embargo, esta he­rra­mie­n­ta facilita el cambio rápido y claro entre los di­fe­re­n­tes formatos.

Re­s­po­n­si­na­tor

Re­s­po­n­si­na­tor simula la re­pre­se­n­ta­ción de la web en un total de seis di­s­po­si­ti­vos móviles di­fe­re­n­tes, cada uno con orie­n­ta­ción vertical y ho­ri­zo­n­tal. Este re­s­po­n­si­ve test incluye di­fe­re­n­tes versiones de iPhone, Android e iPad.

Am I Re­s­po­n­si­ve?

La apli­ca­ción web Am I Re­s­po­n­si­ve? ofrece la si­mu­la­ción en cuatro di­s­po­si­ti­vos Apple: desktop (Re­so­lu­ción: 1600 x 992 píxeles), laptop (1280 x 802 píxeles), tablet (768 x 1024 píxeles) y mobile (320 x 480 píxeles). Una de las ventajas de este test es que los tamaños se pueden comparar di­re­c­ta­me­n­te.

En resumen
Si estás im­ple­me­n­ta­n­do el diseño re­s­po­n­si­vo en tu página web y quieres comprobar si lo estás haciendo co­rre­c­ta­me­n­te, tienes a tu di­s­po­si­ción numerosas he­rra­mie­n­tas de diseño web con las que puedes realizar di­fe­re­n­tes pruebas có­mo­da­me­n­te desde de tu navegador. Sin embargo, no siempre es re­co­me­n­da­ble confiar ple­na­me­n­te en este tipo de apli­ca­cio­nes. El mejor re­s­po­n­si­ve test consiste en probar tu página web pe­r­so­na­l­me­n­te en el mayor número de di­s­po­si­ti­vos posible, pues al final, los in­s­tru­me­n­tos me­n­cio­na­dos an­te­rio­r­me­n­te son úni­ca­me­n­te si­mu­la­do­res. La razón principal es que algunos de los elementos de una web re­s­po­n­si­va no pueden ser co­m­pro­ba­dos mediante una si­mu­la­ción online. Además, este tipo de apli­ca­cio­nes son más una he­rra­mie­n­ta de diseño web que un in­s­tru­me­n­to para medir la usa­bi­li­dad de la web, un aspecto fu­n­da­me­n­tal en el de­sa­rro­llo de cualquier proyecto web re­s­po­n­si­vo. Un re­s­po­n­si­ve test también debe evaluar el impacto de factores como la potencia del equipo, los di­fe­re­n­tes na­ve­ga­do­res web o la operación de una pantalla táctil en la ex­pe­rie­n­cia del usuario. Además, la re­pre­se­n­ta­ción de una página web re­s­po­n­si­va puede verse afectada por elementos del navegador como, por ejemplo, la barra de de­s­pla­za­mie­n­to, algo que no está presente en los di­s­po­si­ti­vos móviles.   Sin embargo, el uso de estas apli­ca­cio­nes web es, cie­r­ta­me­n­te, una parte im­po­r­ta­n­te dentro de un test global. Para los di­se­ña­do­res web resulta de gran utilidad el uso de he­rra­mie­n­tas que se im­ple­me­n­ten fá­ci­l­me­n­te y aceleren el proceso de prueba.
Ir al menú principal