Foros del Web » Creando para Internet » CSS »

Maquetar web responsive

Estas en el tema de Maquetar web responsive en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/08/2013, 07:20
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 12 años, 8 meses
Puntos: 8
Pregunta Maquetar web responsive

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
  #2 (permalink)  
Antiguo 05/08/2013, 07:22
Avatar de carlosloaiza21  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Maquetar web responsive

Hola kisquian mira te recomiendo que utilices mediaqueries y que pongas un:
Código HTML:
Ver original
  1. <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
__________________
La vida de un hombre es mas interesante si ha fracasado, por que eso quiere decir que ha intentado superarse
  #3 (permalink)  
Antiguo 06/08/2013, 14:48
Avatar de carlosantonio_  
Fecha de Ingreso: agosto-2013
Ubicación: Hidalgo, Mexico
Mensajes: 5
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Maquetar web responsive

Te recomendaría antes de trabajar con un framework, intentes aprender lo básico del responsive design ya que es muy variable.
  #4 (permalink)  
Antiguo 08/08/2013, 09:01
 
Fecha de Ingreso: agosto-2013
Ubicación: Buenos Aires
Mensajes: 26
Antigüedad: 8 años, 3 meses
Puntos: 8
Respuesta: Maquetar web responsive

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:
Ver original
  1. .contenedor {
  2. width:100%;
  3. max-width:980px;
  4. }

2) Etiquetas, no te olvides de meter las etiquetas para que se vea bien en todos los dispositivos:
Código HTML:
Ver original
  1. <!-- Responsive -->
  2. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  4. <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:
Ver original
  1. .box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
  2. .box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }

Y luego la llamas asi:
Código HTML:
Ver original
  1. <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:
Ver original
  1. @media (max-width: 620px) {
  2. .desaparece { display:none !important; }
  3. }

Espero te sirva, saludos!
  #5 (permalink)  
Antiguo 09/08/2013, 18:14
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 12 años, 8 meses
Puntos: 8
Respuesta: Maquetar web responsive

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

Si tienen mas tips, por favor compartan :d

Gracias nuevamente!!! :)
  #6 (permalink)  
Antiguo 12/08/2013, 11:58
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 10 años, 1 mes
Puntos: 6
Respuesta: Maquetar web responsive

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 ;)
  #7 (permalink)  
Antiguo 24/09/2013, 19:09
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 12 años, 8 meses
Puntos: 8
Respuesta: Maquetar web responsive

Gracias hermano! :)
  #8 (permalink)  
Antiguo 01/04/2014, 07:05
 
Fecha de Ingreso: agosto-2007
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 3
Respuesta: Maquetar web responsive

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:
Ver original
  1. .box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
  2. .box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }

Y luego la llamas asi:
Código HTML:
Ver original
  1. <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

Etiquetas: framework, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 16:51.