Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Desarrollo Web / Introducción al Diseño Web Adaptable (Responsivo)

Introducción al Diseño Web Adaptable (Responsivo)

Por jc mouse domingo, abril 5, 2015

El diseño web adaptable (Responsive Web Design) va evolucionando como una filosofía de diseño y desarrollo de paginas web bajo el concepto de «One Web» es decir, construir una web que sea accesible por cualquier dispositivo dado el incremento de estos en el mercado ( tabletas, smartphones, portátiles, PCs).

¿Como funciona?

En los comienzos de la WWW las páginas web se desarrollaban solo pensando en computadoras de escritorio, con el surgimiento de otros dispositivos se vio la necesidad de adaptar estos a la resolución de pantalla de cada dispositivo en particular, entonces lo que se hacia era crear una versión del sitio web para cada uno de ellos, estos era ineficiente porque incrementaba el tiempo de desarrollo, costos y de mantenimiento de cada versión por lo que se pensó que era mucho mejor  usar solo una versión de HTML/CSS para todas las resoluciones de pantalla

responsivo

¿Y como debo implementarlo?

En la actualidad existen una gran variedad de dispositivos, debemos implementar el Diseño Responsivo a los más usados.

Resolución de pantalla más comunes:

Escritorio

  • 1366×768
  • 1024×768
  • 1280×1024
  • 1280×800
  • 1920×1080
  • 1920×1080
  • 800×600

Tablets y celulares

  • 768×1024
  • 320×480
  • 480×320

Ventajas

  • El uso de dispositivos móviles va en aumento año tras año por lo que tener una web que ea visible correctamente desde este tipo de dispositivos es esencial para tu negocio.
  • Es más fácil de administrar y de mantener
  • Google da preferencia a sitios web con diseño responsivo

 Desventajas

  • El tiempo de desarrollo es mayor que el diseño tradicional ya que no lleva mucho tiempo y aun no se a estandarizado al 100%
  • Su mantenimiento y actualización tienen un costo mayor que uno de diseño tradicional
  • Se pierde libertad para el diseño web ya que se deber de incluir menos imágenes para no aumentar mucho el peso de la web y que su carga no sea excesivamente lenta.

 Conclusión

Las personas se conectan a la red cada vez más desde su teléfono móvil o su tableta, en Bolivia 1.93 millones de moviles tienen acceso a internet casi tres veces más que el año 2013 (ATT), este y otros motivos obligan a que los sitios web deban saber adaptarse a las nuevas modalidades de conexión. Cada dispositivo tiene características y resoluciones de pantalla propias que hacen que la visualización de un sitio web sea diferente. El diseño web adaptable es definitivamente una solución para las empresas y para todo aquel que quiera tener presencia en Internet.

Template free html5

Demo | Descargar

Tags

Artículos similares

Blog MVC – El theme y primer controlador [p3]

Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega[...]

Utiliza 2 bases de datos diferentes en una aplicación parte I

Cuando se desarrolla una aplicación, puede ser un requisito que este tenga soporte para varias tipos de base de datos, s[...]

Impresión de reportes

Existen diferentes métodos par imprimir reportes hechos con JasperReport en aplicaciones hechas en java, en este post te[...]

Khipu Agenda Personal gratis

Completa agenda para organizar tu vida personal y/o profesional, si te olvidas de acontecimientos familiares, citas de t[...]

Cliente Retrofit – Web Service

Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí[...]

Agregar tablas a los items de un JComboBox

En este post personalizaremos un componente JComboBox para que sus elementos acepten tablas (JTable) en lugar de texto s[...]