Diseño líquido CSS (fluido) frente a responsive-design. max-width, min-width, max-height, min-height (CU01053D)

Resumen: Entrega nº53 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01053D

 

 

DISEÑO LÍQUIDO FRENTE A RESPONSIVE DESIGN

Con el auge del acceso a internet a través de tablets, smartphones, smartTVs, etc. ha surgido el problema de que las páginas web deben mostrarse en pantallas de muy diferente tamaño. Conseguir que la misma página web se vea bien en dispositivos muy distintos es algo que no es sencillo de resolver.

css

 

Una primera aproximación o intento de resolver este problema es el denominado diseño líquido o fluido. Se dice que una página web tiene diseño líquido cuando la anchura de sus elementos está definida utilizando porcentajes. Supongamos que tenemos una cabecera cuyo ancho fijamos en el 100 %, una columna lateral cuyo ancho fijamos en el 25 % y una parte principal de contenidos cuyo ancho fijamos en el 75%. El resultado será que al visualizarse en distintos dispositivos la anchura de los elementos será un porcentaje de la anchura disponible. Veamos algunos ejemplos:

Dispositivo

Dimensiones pantalla en pixeles

Ancho que tomará la columna lateral (25 %)

Ancho que tomará la parte principal (75%)

Un TV Full HD

1.920 x 1080 px

480 px

1440 px

Un ordenador portátil

1280 x 800 px

320 px

960 px

Tablet Samsung Galaxy Tab

800 x 1280 px

200 px

600 px

iPhone

640 x 960

160 px

480 px

 

 

Supongamos que establecemos un ancho “fijo” para nuestra página web de 900 px y que para el contenedor que conforma la columna lateral definimos #columnaLateral {widht: 225px; } y para el contenedor del espacio principal definimos #espacioCentral {width: 675px;}. Con estas reglas decimos que el diseño no es fluido porque no se adaptarán al ancho disponible de pantalla. En la TV Full HD de nuestro ejemplo el ancho disponible es de 1920 px, mientras que el ancho total que ocuparemos con la definición indicada es de 900 px. Esto supone que 1920 – 920 = 1000px de la pantalla del televisor quedará libre, con lo que la sensación será que la página web se ve muy pequeña y se desaprovecha la pantalla.

Por el contrario, si consideramos el iPhone del ejemplo, su ancho disponible es de 640 px mientras que nuestra página web tiene 900 px de ancho. Como la página web no cabe en la pantalla, aparecerá cortada y para poder ver las partes no visibles aparecerán unas barras de scroll. La sensación será que la página web se ve muy grande y cortada.

Pasamos ahora al diseño fluido. Para ello definiríamos las anchuras en porcentajes. Fíjate que siempre hablamos de anchuras porque se entiende que las páginas web en vertical son muy largas y el usuario ya está acostumbrado a tener que subir y bajar por ellas. En cambio, tener que moverse lateralmente es algo que suele considerarse “desagradable”.  En el diseño fluido definiríamos los anchos de esta manera: para la columna lateral #columnaLateral {widht: 25%; } y para el contenedor del espacio principal #espacioCentral {width: 75%;}.

Parece una solución ideal. Ahora el tamaño de la página web se ajustará a la pantalla y no se desaprovechará ninguna parte de las pantallas grandes ni aparecerán barras de scroll lateral en las pantallas pequeñas. ¿Qué ocurre en la práctica? En la práctica esta solución no es ideal ni mucho menos. Nos encontramos que ocurre lo siguiente: en las pantallas grandes, un párrafo que en una pantalla de un ordenador mediano se ve en 5 líneas se verá quizás en una sola línea ya que el ancho disponible es muy grande. El efecto es una línea muy larga que resulta desagradable de leer. Por el contrario, cuando un párrafo consta de una sola línea corta, en una pantalla muy grande se verá en el lateral izquierdo mientras que a su derecha queda un gran espacio en blanco. En general, el diseño fluido dará lugar a una deformación de contenidos que quedan muy a lo largo o demasiado cortos, y la impresión general es mala.

En las pantallas pequeñas como las de un smartphone, el diseño fluido hará que la página web “se comprima” para ocupar el ancho disponible que es muy poco. Cuando la pantalla es realmente pequeña, el efecto que se genera es de “miniaturización” o que todo se ve “diminuto”, tan pequeño que prácticamente no se puede leer. Por ello en la práctica es más habitual establecer estas anchuras principales en pixeles antes que en porcentajes.

La solución a obtener una correcta visualización en páginas web puede pasar por distintas vías:

a) Utilizar lo que se denomina “responsive design” que se podría traducir como “diseño sensible al dispotivo” aunque muchas veces en español se habla simplemente de “diseño responsive”. Esta técnica trata de usar un único HTML y CSS pero mediante la detección del dispositivo en que se va a visualizar la página, ofrecer un diseño adecuado para cada tipo de dispositivo (esto obliga a escribir diferentes reglas según el tipo de dispositivo en que se vaya a visualizar la web).

b) Utilizar diferentes dominios para el acceso con dispositivos pequeños o dispositivos grandes. Por ejemplo el dominio http://www.iberia.com/ está destinado a dispositivos de pantallas medianas o grandes mientras que http://iberia.mobi/ está destinado a tablets, smartphones y similares. Los diseños son distintos: más simples para los dispositos pequeños. Puede utilizarse la detección de dispositivo para redirigir del dominio principal al .mobi.

c) Definir ancho en pixeles, que como indicamos al hablar de medidas CSS podría considerarse una medida híbrida entre relativa y absoluta y es la que suele ofrecer un mejor resultado “intermedio”.

d) Utilizar otras técnicas.

 

En general cuando hablamos de las diferentes técnicas que se pueden emplear hay algunas propiedades CSS que suelen resultar útiles y que son: max-widht, min-width, max-height y min-height.

 

 

PROPIEDAD MAX-WIDTH

Esta propiedad permite definir la anchura máxima de un elemento, indicada en una unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.

Si se usa un porcentaje, se refiere al ancho del elemento contenedor.

En el diseño fluido, nos puede servir para evitar que en las pantallas muy grandes la página web se expanda demasiado lateralmente. De este modo podemos permitir que se vea más grande, pero con un límite máximo. Ejemplo: #columnaLateral {width: 25%; max-widht: 420px; } #espacioCentral {width: 75%; max-widht: 1680px;}.

 

 

PROPIEDAD MIN-WIDTH

Esta propiedad permite definir la anchura mínima de un elemento, indicada en una unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.

Si se usa un porcentaje, se refiere al ancho del elemento contenedor.

En el diseño fluido, nos puede servir para evitar que en las pantallas muy pequeñas la página web se miniaturize. De este modo podemos permitir que se vea más pequeña, pero con un límite mínimo. Ejemplo: #columnaLateral {widht: 25%; max-widht: 420px; min-widht: 180px; } #espacioCentral {width: 75%; max-widht: 1680px; min-width: 720px; }.

 

 

PROPIEDAD MAX-HEIGHT

Esta propiedad es análoga a max-widht, pero menos usada ya que como hemos indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), columnas de tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.

 

 

PROPIEDAD MIN-HEIGHT

Esta propiedad es análoga a min-widht, pero menos usada ya que como hemos indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), columnas de tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación