DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
17-10-2013

Uno de los grandes retos para los diseñadores web es lograr adaptar las aplicaciones web para que se visualice correctamente en la inmensa cantidad de dispositivos que cuentan con un navegador web incorporado; ustedes se podrian preguntar ¿porque es esto tan importante?, la respuesta a esta pregunta reside en el hecho de que el tráfico móvil engulle más del 17% y se prevé que esta cifra seguirá en aumento.

El diseño web responsivo nos permite adaptar nuestras aplicaciones web a distintos tamaños de pantalla (PC, tablet, teléfonos inteligentes, televisores, etc) aplicando solo CSS (o casi todo); sin la necesidad de crear una página para cada dispositivo o tamaño de pantalla.

Básicamente debemos de adaptar todo el contenido en una pagina web para que se vea "bien" en todos los dispositivos, sin que aparezca el muy molesta scroll horizontal; es decir se reajusta el contenido de toda la página web.

En esta técnica utilizamos principalmente los media queries y tamaños de los elementos en porcentajes, todo con CSS (o casi todo); los media queries nos permite activar y desactivar secciones del CSS según el tamaño de pantalla; nos permite definir nuevos estilos al sitio para ajustarse a las diferentes resoluciones de pantalla:

@media screen and (max-width: 1024px) {
/* ventanas de menos de 1024px */
}
@media screen and (max-width: 480px) {
/* ventanas de menos de 480px */
}
@media screen and (max-width: 320px) {
/* ventanas de menos de 320px */
}

Publicidad

Give me for a beer!

Algunos artículos que te pueden interesar

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015

Creando un proyecto con Api.ai (parte 1)

Creando un proyecto con Api.ai (parte 1)

En esta entrada veremos como crear los agents, entities y intents desde el portal de api.ai para poder emplearlos desde nuestras aplicaciones.

Andrés Cruz 05-03-2015

¿Cómo mostrar páginas web con WebView en Android?

¿Cómo mostrar páginas web con WebView en Android?

La clase WebView permite mostrar páginas web dentro de una aplicación Android.

Andrés Cruz 19-02-2015