Maquetar web responsive

[kisquian]

Buenas, quería debatir un tema, o mas bien orientarme..

Estoy creando mi sitio personal que en definitiva es un porfolio, el cual tambien tiene un blog y demas. La cuestión es que quiero que sea 100% responsive, por lo que he estado jugando con bootstrap. Pero al ser un sitio web algo complicado de diseño, se me está haciendo bastante "rompe-cocos" el laburo..

¿Como hacen para maquetar algo responsive? ¿Lo han hecho a mano metiendo mediaqueries a su antojo? Como les ha ido? Se ha visto bien cross-browser? O.. ¿es mejor trabajar con un framework aunque cueste trabajo?

Solamente quería saber su opinión acerca de como crear responsives layouts... Como les ha dado resultado

Un abrazo desde Montevideo

[carlosloaiza21]

Hola kisquian mira te recomiendo que utilices mediaqueries y que pongas un:

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 

Y que manejes minimo 3 distintos rangos de tamaños en las ccs/mediaquery

Saludos

[carlosantonio_]

Te recomendaría antes de trabajar con un framework, intentes aprender lo básico del responsive design ya que es muy variable.

[doctype]

Hola, te dejo algunos tips que te pueden ayudar.

1) Porcentajes: Te recomiendo utilizar porcentajes para los anchos de tus contenedores. De esta forma, al meter las media queries, solo tendras que ajustar lo que no se ajusta. Un ejemplo seria crear una clase contenedora que sea:

Código CSS:

.contenedor {
width:100%;
max-width:980px;
}
 

2) Etiquetas, no te olvides de meter las etiquetas para que se vea bien en todos los dispositivos:

Código HTML:

<!-- Responsive -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
 

3) Imagenes responsive: Si quieres hacer que una imagen se ajuste al ancho del contenedor, te dejo una clase que utilizo yo, que iria seguida de la que contiene la ruta a la imagen:

Código CSS:

.box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
.box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }
 

Y luego la llamas asi:

Código HTML:

<div class="box-responsive box-header"></div>
 

Está en dos clases para que te sea facil crear varias imagenes responsive.

4) Bootstrap te puede ayudar, pero a mi me parece recargar mucho la pagina, al menos que sea un proyecto super grande. Si es una pagina basica, te recomiendo crearla vos desde cero.

5) Te aconsejo crear algunas clases especiales para jugar con los mediaqueries. Si por ejemplo, creas una clase que sea .desaparece la puedes utilizar para cosas que quieras que no se vean en determinadas resoluciones (imagenes grandes que son solo para adornar, y que en pantallas de movil por ejemplo, no harian mas que molestar).
Si quieres que algo desaparezca cuando la resolucion es menor a 620 pixeles, utilizarias:

Código CSS:

@media (max-width: 620px) { 
.desaparece { display:none !important; }
}
 

Espero te sirva, saludos!

[kisquian]

Muchas gracias!!! Me ha servido de maravilla, era la respuesta que esperaba.

Si tienen mas tips, por favor compartan :d

Gracias nuevamente!!! :)

[nanotime]

Adjunto a lo que ha dicho Doctype, que de hecho me ha servido un montón (gracias!), te recomiendo que si quieres usar un framework, uses uno que sea OOCSS, como inuit.css que se basa directamente en ser un framework puramente hecho para ser extendido y sin estilos, todo es estructural y no te recarga nada, no te hace sobreescribir estilos ni te rompe la vida con esas cosas por default, que si colores o tipografías, todo lo defines tu de manera limpia, y el código está tan bien comentado (hasta con ejemplos) que no necesitas docu externa.

Lo bonito de esto es que ya tiene media-queries definidos que cubren casi todas las necesidades (y te explica como usarlos), además de que tiene un sistema de grids super sencillo también, muy simple de usar. De verdad hay de todo y es bien simple, te recomiendo mirarlo.

Esto te servirá para proyectos de cualquier tamaño, todo dependerá de como te organices ;)

[kisquian]

Gracias hermano! :)

[Lola Lola]

3) Imagenes responsive: Si quieres hacer que una imagen se ajuste al ancho del contenedor, te dejo una clase que utilizo yo, que iria seguida de la que contiene la ruta a la imagen:

Código CSS:

.box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
.box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }
 

Y luego la llamas asi:

Código HTML:

<div class="box-responsive box-header"></div>
 

Está en dos clases para que te sea facil crear varias imagenes responsive.


Hola doctype

Lo que mencionas en el punto 3, deben crearse tantos llamados de este tipo como imagenes haya en la web? Ejemplo:

box-responsive box-header
box-responsive box-logo
box-responsive box-landscape, etc??

Saludos y gracias!

Lola