Diseño Web adaptable o flexible
Debido a que actualmente está muy de moda tener internet en distintos dispositivos como por ejemplo: ipads, iphones, smartphones, notebooks, etc… es importante saber o considerar estos dispositivos a la hora de crear páginas Webs.
Desde el punto de vista del programador o diseñador estamos hablando de «Responsive Design» que su traducción al español sería algo como diseño web adaptable o diseño web flexible.
El Responsive Web Design es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.
Nos tenemos que poner al día y adaptar fácilmente el diseño de una web a los diferentes dispositivos que se pueden usar para visitarla utilizando los media queries de CSS3.
Para ello deberemos incluir dentro del <head> un metatag «viewport» para adaptar la web a las diferentes resoluciones de los dispositivos móviles.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
De esta manera le decimos al navegador, que fuerze el ancho de la web al ancho de la pantalla.
El siguiente paso es añadir también en el <head> el siguiente script para solucionar la incompatibilidad de los media queries con Internet Explorer.
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Después tendremos que construir la estructura HTML de la web dentro del <body>:
<div id="page"> <div id="header">Cabecera</div> <div id="content">Contenido</div> <div id="sidebar">Lateral</div> <div id="footer">Pie de página</div> </div>
Creando una hoja de estilos con los estilos personalizables de la web:
#page {
width: 980px;
margin: 0 auto;
}
#header {
height: 150px;
background:#CCCCCC;
}
#content {
width: 680px;
float: left;
background: #0099CC;
min-height:150px;
}
#sidebar {
width: 300px;
float: right;
background: #00CC33;
min-height:150px;
}
#footer {
clear: both;
height: 50px;
background: #FF9900;
}
Ahora solo queda añadir las media queries en la hoja de estilos:
@media screen and (max-width: 980px) {
#page { width: 100%; }
#content { width: 70%; }
#sidebar {width: 30%; }
}
@media screen and (max-width: 700px) {
#content, #sidebar {
width: auto;
float: none;
}
}
En el ejemplo en funcionamiento podrás ver el efecto minimizando y maximizando la ventana del navegador.
Autor
¿Buscas trabajo de programador?
3 respuestas a “Diseño Web adaptable o flexible”
Deja una respuesta
[…] Otra forma de aproximarse a una solución ideal es la técnica denominada Responsive Web Design (RWD), que en español se conoce como Diseño Web Responsivo, Adaptable o Flexible. En mi caso personal prefiero esta última definición, Diseño Web Flexible. […]
[…] Otra forma de aproximarse a una solución ideal es la técnica denominada Responsive Web Design (RWD), que en español se conoce como Diseño Web Responsivo, Adaptable o Flexible. En mi caso personal prefiero esta última definición, Diseño Web Flexible. […]
[…] Otra forma de aproximarse a una solución ideal es la técnica denominada Responsive Web Design (RWD), que en español se conoce como Diseño Web Responsivo, Adaptable o Flexible. En mi caso personal prefiero esta última definición, Diseño Web Flexible. […]