Entradas con la etiqueta ‘responsive’

Resoluciones móviles

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web, JavaScript | 2 comentarios »

A la hora de maquetar nuestro sitio responsive, necesitamos saber las dimensiones de los dispositivos que hay en el mercado, para saber donde situar los puntos de corte.

Hay infinidad de dispositivos, resoluciones y densidades de pixel, y puede parecer un infierno a primera vista 🙁

Lo primero que tenemos que hacer es colocar esta etiqueta en nuestro html:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Con ella le indicamos a nuestro html que tome como anchura de la pantalla la anchura de nuestro dispositivo.

Cada dispositivo tiene unas dimensiones, pero también tiene una densidad de pixeles, sin embargo a la hora de maquetar debemos tratarlos como si de densidad simple se tratase.

Por ejemplo un iPad 1 tiene como dimensiones de pantalla 1024 x 768 (132 ppp),.
Un iPad 3 retina, tiene el doble de densidad de pixels (264 ppp) y tiene unas dimensiones de pantalla de 2048 x 1536.
Sin embargo, ambos se tratan de igual manera en nuestras media queries, tomando ambos como 1024 x 768

Tengo una página para obtener fácilmente las dimensiones de pantalla:

http://yporqueno.es/lab/mobile/

Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
 

 

CSS – Mis Media Queries

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web | Los comentarios están cerrados.

Estas son MIS media queries para hacer un site responsive y distinguir entre la versión por defecto de escritorio, la versión de tablet y la versión de móvil.

Ver ejemplo (redimensionar la ventana y probarlo en diferentes dispositivos)

<style>
 
	/* Desktop */
	/*---------------------------------------------------------------------------*/
	body:after {
		content: 'Desktop';
		font-size: 28px;
	}
 
 
 
	/* Tablet */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) {
 
		body:after {
			content: 'Tablet';
		}
 
	}
 
 
 
	/* Tablet Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) and (orientation: landscape) {
 
		body:after {
			content: 'Tablet Landscape';
		}
 
	}
 
	/* Tablet Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 800px) and (orientation: portrait) {
 
		body:after {
			content: 'Tablet Portrait';
		}
 
	}
 
 
 
 
 
	/* Mobile */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px) {
 
		body:after {
			content: 'Mobile';
		}
 
	}
 
	/* Mobile Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px),
	only screen and (max-device-width : 600px) and (orientation: landscape) {
 
		body:after {
			content: 'Mobile Landscape';
		}
 
	}
 
 
	/* Mobile Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 400px),
	only screen and (max-device-width : 400px) and (orientation: portrait) {
 
		body:after {
			content: 'Mobile Portrait';
		}
 
	}
 
 
</style>
En el ejemplo voy cambiando el contenido de la etiqueta after para que vaya indicando en qué dispositivo se encuentra pero solo es con fines didácticos.
  • Desktop: La idea es que todo lo que esté por encima de los media queries sea la versión de escritorio.
  • Tablet: por debajo de 1024 muestra la versión de tablet en un ordenador de sobremesa. Así mismo, si es una tablet también entraría en esta query.
    max-device-width en iPad es 768 siempre, independientemente de si está en vertical u horizontal, sin embargo Android si que diferencia la anchura si está en horizontal o vertical. Un Nexus 7 por ejemplo da unas medidas de 966×603. Para unificar estos comportamientos, compruebo también la orientación. Y le doy un poco de margen para tabletas algo mas grandes, hasta 1100px.
    La versión vertical la he puesto a 800px, un poco mas delos 768px del iPad.
  • Móvil: Tomo como medida máxima en horizontal 600px y en vertical 400px.

He querido distinguir entre tablet y tablet horizontal y vertical porque la mayoría de las veces no necesitaremos especificar tanto, pero por si acaso necesitamos concretar mas pues ahí las tenemos.

A veces utilizo max-width en lugar de max-device-with porque este último no se comprueba si la ventana del navegador se redimensiona así como al girar el dispositivo, y en determinadas ocasiones no informa bien del cambio de orientación.

No se debe maquetar para dispositivos concretos, sino para que se adapte a diferentes resoluciones. A veces maquetamos o programamos especificamente para iPad o iPhone. ¿y si mañana aparece un dispositivo nuevo con unas dimensiones ligeramente diferentes?
Estas medidas que he puesto son para tener una referencia de cuando pasamos de un tamaño a otro, pero dentro de estas referencias los diseños deberían fluir.

Webflow

Publicado por Iván Gajate el 1 de agosto de 2013 en Desarrollo Web | Los comentarios están cerrados.

No se si este tipo de herramientas terminarán cuajando, pero buena pinta si que tiene para editar un site responsive de forma mas o menos fácil.

http://www.webflow.com/

Y aquí se puede jugar con la demo:

https://webflow.com/demo