En el back-end hay sesudas discusiones sobre el uso de IoC, capas, .... que sólo tenemos los desarrolladores o arquitectos de software.
El front-end es más vistoso y el usuario es lo que termina viendo.
Cuántas veces hemos hecho un desarrollo bien organizado, con sus capas bien hechas, bien orgullosos de nuestro trabajo ... y cuando lo ve el usuario pone de cara de besugo diciendo "Esto qué es??!!" (Por favor, decidme que os pasado!)
Hay que decir que el front-end es algo más que poner iconos bonitos y colorines vistosos; hay que hacer una experiencia de usuario agradable, bonito y usable. He de reconocer de que es uno de mis puntos débiles, pero intento controlar la parte técnica, esperando que algún día mis niveles de dopamina lleven mi creatividad a un "estado normal" ;-)
Hoy voy a hablar del diseño web adaptable (RWD -Responsive Web Design- son sus siglas en inglés), que dicho en román paladino y resumiendo mucho, es hacer que nuestra página se vea en cualquier dispositivo (ordenador, tablet, smartphone, ....).
Para ello, haremos que nuestro contenido se redimensione y se coloque según las necesidades. Es decir, el contenido fluye utilizando media queries de CSS3.
Esto implica la necesidad de pararse a pensar un poco (bastante) el diseño antes de empezar a picar código, pero tiene la gran ventaja de que el mismo desarrollo sirve para cualquier dispositivo con la consiguiente ganancia en mantenibilidad de nuestro sitio y visibilidad de nuestros contenidos.
Es importante tener en cuenta eso de "el contenido fluye", que el contenido se coloque.
En el siguiente ejemplo, vemos que el contenido se redimensiona:
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>pruebasinRWD</title>
</head>
<body>
<div style="width:48%; background-color:aqua; float:left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit..
</div>
<div style="width:48%; float:left">
Li Europan lingues es membres del sam familie...
</div>
</body>
</html>
El resultado que obtenemos es:
Y si redimensionamos la pantalla
Vemos que el contenido se ha redimensionado correctamente, pero quizás debería haberse recolocado de otra manera para hacer la página más visible en cualquier dispositivo como vemos a continuación
No hay comentarios:
Publicar un comentario