3/5 - (1 voto)
[vc_custom_heading text=»¿Qué es un diseño web adaptable o responsive?» use_theme_fonts=»yes»]

Un diseño web responsive o adaptable es aquel que se adapta -si me permitís la redundancia- a cualquier dispositivo que visualice la página en un navegador web.

En un lenguaje más llano y menos técnico, tu página se verá bien en un monitor de PC, un portátil grande y pequeño, una tablet puesta en horizontal y vertical, y un teléfono móvil.

Es un concepto sencillo, pero que para los diseñadores web tiene su miga implementarlo en una página web.

[vc_custom_heading text=»Cómo implementar una página web responsive…» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

La implementación de un sitio web responsive no es simple, pero tampoco es una tarea superdifícil y con un poco de organización, podremos hacerla cada vez más mecánica y sencilla.

Primero de todo, decir que depende del tipo de página que estemos diseñando: página estática con HTML5 y CSS3 ó una plantilla personalizada en una instalación WordPress.

[vc_custom_heading text=»Diseños web con HTML5 y CSS3″ font_container=»tag:h4|text_align:left» use_theme_fonts=»yes»]

La manera más sencilla de implementar una página web responsive con un diseño web en HTML5, CSS3 y Javascript es con las media queries de CSS3.

Las media queries son condiciones que se imponen a las reglas de estilo (CSS) dependiendo de varios factores, en nuestro caso, la anchura del dispositivo donde se va a visualizar la página web. Si tenéis más curiosidad sobre los posibles condicionantes dentro de las media queries, podéis leeros este artículo de la Mozilla Developer Network.

Así, cada condición dentro de nuestro CSS tiene una relación directa con el dispositivo donde se va a visualizar nuestra página web. Ahora bien, ¿cuántas condiciones/dispositivos son necesarios?

Serán necesarias tantas condiciones como posibles dispositivos, pero como mínimo son tres: PC de escritorio, tablet y smartphone.

[vc_custom_heading text=»PC de Escritorio» font_container=»tag:h5|text_align:left» use_theme_fonts=»yes»]

Una pantalla de PC puede comenzar en una resolución de 1024 píxeles de ancho, para pantallas modernas, pero si queréis ser más compatibles con pantallas antiguas, deberéis bajar la condición del ancho de pantalla a 768 píxeles y mayores.

[vc_custom_heading text=»Tablet» font_container=»tag:h5|text_align:left» use_theme_fonts=»yes»]

Una pantalla de tablet está condicionada por dos factores, el valor que le hayamos dado a mínimo ancho de pantalla en el PC de escritorio (768px) y el máximo ancho de pantalla para visualizar nuestra web en un smartphone, que como veremos más adelante será de máximo 480 píxeles.

Así, la visualización en tablets será entre un ancho de pantalla de 480 y 768 píxeles.

[vc_custom_heading text=»Smartphone» font_container=»tag:h5|text_align:left» use_theme_fonts=»yes»]

Como hemos adelantado en el apartado anterior, un ancho de pantalla para representar nuestro diseño en un smartphone es de 480 píxeles como máximo.

Además, ahora también tendrás que hacer que tus imágenes sean responsive con el nuevo elemento de HTML5 <picture>. Aquí te explican muy bien cómo usarlo nuestros amigos de Tuts+.

[vc_custom_heading text=»Diseños web con plantillas personalizadas de WordPress» font_container=»tag:h4|text_align:left» use_theme_fonts=»yes» css=».vc_custom_1476370285759{margin-top: 40px !important;}»]

Normalmente, a estas alturas, todas las plantillas de WordPress son responsive. Así, una página web basada en Wordpress no necesita implementar los tamaños de los dispositivos, porque ese trabajo ya lo ha hecho el diseñador de la plantilla.

Entonces, ¿por qué no hacemos todas las webs con WordPress? Pues bien, podríamos, pero a ciertos clientes no les gusta tener una web parecida a ninguna otra y necesitan un diseño web original y especializado. Ahí es donde entra el diseño en HTML5 y CSS3, con Bootstrap, con jQuery, con plugins de jQuery… etc.

Un ejemplo de esto, son las páginas que aparecen en la web Awwwards, muy recomendable para inspiraros en lo que podéis llegar a conseguir diseñando webs.

[vc_custom_heading text=»Qué ventajas obtienes con una web responsive…» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes» css=».vc_custom_1476370681373{margin-top: 40px !important;}»]

Bien, una web adaptada a todos los posibles dispositivos de visualización tiene muchas ventajas:

[vc_custom_heading text=»Mejor legibilidad en dispositivos con pantallas pequeñas» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476371508938{margin-top: -20px !important;}»]
[vc_custom_heading text=»Mayor audiencia potencial en dispositivos portables» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476379902350{margin-top: -20px !important;}»]
[vc_custom_heading text=»Google nos premia y mayor rapidez de carga» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476383722284{margin-top: -36px !important;}»]
[vc_custom_heading text=»Contenidos exclusivos para cada dispositivo» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476380313957{margin-top: -20px !important;}»]
[vc_custom_heading text=»Menor consumo de datos con imágenes adaptables» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476382429606{margin-top: -20px !important;}»]
[vc_custom_heading text=»Conseguimos una buena experiencia de usuario» font_container=»tag:h4|text_align:center» use_theme_fonts=»yes» css=».vc_custom_1476382897204{margin-top: -14px !important;}»]

Dejar respuesta

Please enter your comment!
Please enter your name here