Muchos ya conocemos la increíble ventaja que representan los diseños web adaptables y responsive, podemos remitirnos a artículos de nuestra web para saber más de su definición y proceso e historia del diseño web en general; pero ya entrando en datos técnicos como se programa una página web responsive?, a continuación una introducción al respecto. Aunque pareciera un aspecto bastante complicado, todo parte del principio fundamental de adaptabilidad en páginas que es muy básico: Debemos consideras 3 anchos de pantalla como mínimo: uno para smartphones, uno para tablets y otro para pantalla completa, en algunos casos será necesario considerar un ancho extra más que es el de las pantallas de notebooks pequeños que a veces nos dan inconvenientes si sólo consideramos un ancho completo ya que es muy diferente una pantalla de 980 pixeles de ancho a una de 2000 pixeles de ancho, ya que hay que considerar que cada vez más usuarios acceden desde pantallas grandes por un lado, y por otro mucho más creciente aún, lo usuarios ya tienen acceso a internet móvil y poseen smartphones, además necesitan acceder a la información bastante rápido.
Para eso sirven los media queries y hay algunas maneras de añadirlos, se pueden llamar por separado desde el archivo HTML respectivo o ser pueden ingresar en el mismo archivo, a continuación les expongo un ejemplo en el cual pensamos en 4 tipos de pantallas, acá se intuye que ya tenemos un código para el ancho completo y para especificar en el css los respectivos paquetes los delimitamos con el siguiente bloque de código:
@media screen and (max-width: ?px) { Bloque de código del ancho respectivo }
En donde ? es el punto máximo en hasta el cual el código es aplicado, luego de rebasar ese ancho pasa al siguiente bloque de css y así sucesivamente, algunos recomiendo empezar con cómo se vé el ancho más pequeño e irlo cada vez agrandando, entre más específicos sean los detalles de cada sección, mejor será la adaptabilidad de los diversos componentes, en este ejemplo tenemos sólo dos elementos, pero con esta misma estructura podemos asignar más elementos, considerando que muchas páginas tienen un header (sección superior), un slider (banners cambiantes) y un footer (sección inferior), sin contar los menús, recuerde que el div respectivo debe nombrado, para realizarle el respectivo llamado desde CSS.
/* smaller than 980 */
@media screen and (max-width: 980px) {
/* content */
#contenido {
width: 60%;
padding: 3% 4%;
}
/* sidebar */
#barra-lateral {
width: 30%;}
}
/* smaller than 650 */
@media screen and (max-width: 650px) {
/* content */
#contenido {
width: auto;
max-width:450px;
float: none;
margin: 20px 0;
}
/* sidebar */
#barra-lateral {
width: 100%;
max-width:650px;
text-align:center;
margin: 0;
float: none;
}
#barra-lateral img {
width: 100%;
max-width:450px;
margin: 0;
float: none;
} #barra-lateral .widget {
padding: 3% 4%;
margin: 0 0 10px;
}
/* smaller than 560 */
@media screen and (max-width: 480px) {
#contenido {
width: auto;
max-width:300px;
text-align:center;
float: none;
margin: 20px 0;
}
/* sidebar */
#barra-lateral {
width: 100%;
max-width:350px;
text-align:center;
margin: 0;
float: none;
}
#barra-lateral img {
width: 100%;
max-width:350px;
text-align:center;
margin: 0;
float: none;
} Es necesario algo de práctica para dominar la técnica y tener conocimientos en HTML y CSS previos para poder realizar la maqueta correctamente, la mejor versión para maquetar el archivo .html sería por supuesto HTML5 que ya viene optimizado para funcionar en dispositivos móviles y tablets, para tener una buena interactividad es necesario incorporar además Javascript en nuestro sitio, recuerde que para diseñar webs cada vez será más importante pensar en los usuarios, por lo cual el diseño es bueno enfocarlo hacia la experiencia que tendrán los usuarios con las páginas web.
Artículos Recientes
Galería
