Passa al contingut principal

Responsive Design: estructura adaptable

Responsive Design


Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más “clásicas”, pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten “casi” perfectamente al ancho de pantalla).



Viewport




Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte de móviles de gama media y baja).

Su uso es totalmente necesario, ya que sino el navegador establece el ancho con el que prefiere visualizar una página en lugar de usar el ancho del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no usamos esta meta-etiqueta).


Este es un ejemplo de como usarla, es el que yo recomiendo, ya que es la configuración más habitual (hay que añadirlo en el <head>):



<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Se pueden usar los siguientes parámetros (separados por comas):



  • Width: ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que dispone).

  • Height: alto de la página, actúa igual que el width.

  • Initial-scale: escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores como 1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).

  • Minimum-scale: zoom mínimo que podemos hacer en la página.

  • Maximum-scale: zoom máximo que podemos hacer en la página.

  • User-scalable: establece si está permitido o no hacer zoom (yes/no).


Parámetros CSS básicos para el Resposnive Design


Para lograr que se adapte nuestra web a los anchos de pantalla debemos de poner en práctica ciertas cosas necesarias:



  • La primera, y la más importante es dejar de usar píxeles en todos los sitios y usar porcentajes (por ejemplo: width:60%).

  • Que establezcamos el ancho de la página con el 100% no significa que queramos que sea este en una pantalla con alta resolución y para limitar el ancho (o alto si se terciara) debemos de usar el parámetro max-width o si quisiésemos establecer un alto máximo max-height (y para establecer el mínimo sería min-width y min-height, aunque no será demasiado necesario usarlo).

  • No usar posiciones absolutas ni fijas (menos cuando hagan falta), para crear una barra lateral donde tendremos un menú, por ejemplo, lo mejor es flotarlo con float:left/right, aunque esto sería lo básico puede que este ejemplo no se ajustase a nuestras necesidades, pero es una técnica muy usada.

  • Un diseño sensible deja de serlo en el momento que la imagen de fondo (de tenerla) se repita y no debiera de hacerlo, para eso debemos de escoger una imagen mejor o saber adaptarla (siendo una imagen de fondo lo mejor sería usar @media queries, que explicaré más abajo).

  • Las imágenes y vídeos hay que hacer que no sobresalgan de la estructura, sino aparecerá un scroll lateral en los dispositivos móviles que reventará totalmente el diseño (en la próxima parte de la guía os contaré como hacer ambas cosas).


@media queries


Ya hace tiempo hablamos en Genbeta Dev sobre las @media queries (de una forma muy completa) por lo que yo voy a hacer un breve resumen con lo más importante sin entrar en detalles.


La regla @media es un elemento que podemos usar dentro del CSS y podemos configurar de una forma u otra para que su contenido sea visible para según que dispositivo (pantallas, móviles, proyectores… aunque nosotros ya que tenemos un diseño que se adapta a todo usaremos all, ahora lo veréis) o también podemos establecer ciertos parámetros del dispositivo que lo visualiza (como alto, ancho, ratio de la pantalla, orientación…).


En este ejemplo le daremos a una etiqueta div un ancho del 100%, un alto automático y un margen izquierdo de 10 píxeles cuando lo visualicemos con cualquier dispositivo pero que su ancho no supere los 600 píxeles (si tiene un ancho superior la pantalla no se ejecutará la regla CSS ):



@media all and (max-width: 600px){ div{ width:100%; height:auto; margin-left:10px; } }

Esta es la forma básica de adaptar detalles específicos según el tamaño de la pantalla, usar el max-width y min-width (puede que las necesidades nos requieran hacer algo más específico, pero con esto nos debería de valer).


Voy a poner un ejemplo que podría ser funcional, que se basa en un menú que hay en una cabecera y consta de cinco links que mandan a las distintas partes de la web y actuará de la siguiente forma los elementos <a>:



  • En principio tendrá el siguiente código, que mantendrá a los cinco elementos en línea.





a.menu { display:inline-block; padding:0px 12px; margin:0px 8px; }


  • Cuando el ancho de pantalla sea inferior a 1200 píxeles (lo que podría ser el ancho máximo de la página) los elementos del título se juntan para que no sobresalgan de la cabecera.





@media all and (max-width: 1200px) { a.menu { display: inline-block; padding:0px 6px; margin:0px 4px; } }


  • Cuando el ancho de ventana sea inferior a 840 píxeles se reestructurarán los elementos y pasaran de estar en línea a estar en cascada uno debajo del otro y tomarán un pequeño margen a su izquierda.





@media all and (max-width: 840px) { a.menu{ margin:0px; padding:0px; padding-left:5%; display:block; float:none; text-align:left; } }


  • Y por último a los 520 píxeles imaginamos que para que se adapte a anchos estrechos el resto de la página ha cambiado de estructura, por lo que ahora dispone el menú de todo el ancho y lo añadiremos un margen izquierdo superior.





@media all and (max-width: 520px) { a.menu{ padding-left:20%; } }

En Genbeta Dev | Introducción al Responsive Design














via Genbetadev http://www.genbetadev.com/desarrollo-web/responsive-design-estructura-adaptable

Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...
1 comentari
Més informació

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...
Publica un comentari a l'entrada
Més informació

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...
Publica un comentari a l'entrada
Més informació