Responsive Web Design
Que es Responsive web design o Diseño web adaptable ?
Es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria, entre otras. Esta tecnología pretende que con un solo diseño web, se tenga una visualización adecuada en cualquier dispositivo.
Lenguajes usados
Usando HTML y CSS logramos una sola version que cubre todas
las resoluciones de pantalla, por lo que el sitio web creado es accesible desde
todo tipo de dispositivo.
Ventajas
La anchura y las imágenes se
ajustan, se redimensionan y se desplazan automáticamente según lo exige la
resolución de pantalla. Esta técnica permite una visualización óptima evitando
la pérdida de la información vital de la web.
El diseño web adaptativo es una
solución estratégica a largo plazo porque permite responder a una búsqueda de
manera más rápida visualizando sólo los elementos más pertinentes a los
internautas móviles.
Con el diseño web adaptativo ya
no hay preocupación por la redirección de los enlaces. Una vez implementado el
diseño web adaptativo, sólo hay poco mantenimiento que realizar y el costo de
desarrollo es más interesante que un sitio móvil especializado. Al fin y al
cabo estamos usando gran parte del código en vez de reprogramar desde cero.
Con el diseño web adaptativo se
tiene la seguridad de que la URL no varia, lo cual es perfecto para campañas de
marketing. De hecho, el no adaptar el sitio web al soporte de navegación del
usuario puede afectar grandemente la experiencia de navegación de usuarios
móviles, repercutiendo de manera negativa en el tráfico de visitantes o en la
pérdida de ventas en un e-commerce.
Desventajas
La mayoría de las veces, los
usuarios se encuentran en la obligación de descargar de manera inútil un código
HTML/CSS. De igual manera, las imágenes son a menudo simplemente alargadas y redimensionadas
provocando un impacto negativo en el tiempo de descarga. Si el código está bien
optimizado, esta descarga de información extra será imperceptible para el
usuario. Las imágenes si que deben adecuarse en tamaño y sobre todo en peso
(kb) para reducir la máximo su carga con velocidades de conexión lentas.
Por otra parte, el diseño web
adaptativo no permite ajustar fácilmente los títulos, las descripciones y otros
contenidos en los teléfonos móviles. Además, el desarrollo del sitio web
adaptativo exige más tiempo. Obliga a una descarga de todos los elementos que
constituyen la página pudiendo ocasionar un rendimiento menor. Existen
definitivamente más dificultades en cargar el contenido de un sitio web
adaptativo que el contenido de un sitio móvil especializado. Al trabajar con
diseños webs adaptables deberemos olvidarnos de las anchuras y tamaños en
píxeles y pensar en %. Lo mismo pasa con los tamaños de letra. Ya no podrán
tener un tamaño definido sino que deberán crecer y reducirse en función de la
pantalla.
Ejemplos de paginas Web con Responsive Desing
Si aun no has visto alguna pagina responsive desing aqui te dejo un par para que
conoscas de que se trata esta tecnologia , prueba haciendo el navegtador mas chico
para ver como se adapta la pagina a la ventana.
Les recomiendo que prueben con pingendo este es un editor de pagina web con responsive
design es muy facil de utilizar.
Videos Tutoriales
Aqui les dejo un video de un tuturial para que te animes a probar esta nueva
tecnnologia en tu pagina web.
No hay comentarios.:
Publicar un comentario