Responsive

[mayazir]

Hola, necesito su opinion y consejos.

aqui les dejo link: http://www.portalmaya.com/test3.html
le puse 3 diferentes css - para movil, para tablet, y normal.

mis preguntas:

1. estan correctos los tamaños q he elegido:
only screen and (min-width:800px)
only screen and (max-width:800px)
only screen and (max-width:600px)

2. porque el boton INICIO no se ajusta bien al centro?

3. mas sugerencias, errores e ideas?

gracias

[Zeromm]

¿Porque usas 3 archivos css? ¿porque no usas solo uno con mediaqueries?

[mayazir]

no se, me parecio mas logico crear 3.
no tengo mucha practica en esto, por lo tanto ahora me toca probar y aprender cometiendo errores y corregiendolos.

como entonces seria mejor hacerlo?

[Zeromm]

Solo un archivo css, y dentro metes mediaqueries cuando el diseño se rompa.

Es decir, no establezcas solo 3 "arreglos". Tienes que ir redimensionando el navegador, y cuando veas que algo se rompe o no se ve bien en la web, metes un mediaquery... y así hasta que tengas todas las resoluciones bien cubiertas.

Por ejemplo, ahora mismo la web en un ancho de 910px no se ve el telefono ni el menú de contacto...

[mayazir]

yo lo veo bien con 910px.
pero bueno, lo q me dices es meter todo en un solo css, ok, entiendo, lo hare asi mas tarde, pero el resto?
estan correctas las demensiones?

[mayazir]

tampoco entiendo donde esta error y porque el boton INICIO no se ajusta.
a veces tampoco se ajusta el segundo boton.

[Zeromm]

Iniciado por mayazir

estan correctas las demensiones?

No. Basicamente porque no tienes que trabajar con ningunas dimensiones fijas. Es más, olvidate totalmente de dimensiones fijas. Cada diseño requiere ajustes en unas dimensiones cioncretas. Es lo que te dije.

Abres la web en el navegador y lo vas redimensionando, cuando lo redimensionas un poco y ves que desde ese ancho (pongamos por ejemplo un ancho de 910px) hacia abajo el contenido de la derecha va a empezar a dejar de verse, metes un mediaquery de 910px y arreglas esos elementos que se van a perder.... cuando los hayas corregido sigues redimensionando el navegador, y cuando llegues a otro ancho en el que los elementos se vayan a empezar a dejar de ver o a verse mal (por ejemplo a los 850px) metes un mediaquery a 850px arreglando esos problemas... cuando los hayas corregido sigues redimensionando el navegador, y cuando llegues a otro ancho en el que los elementos se vayan a empezar a dejar de ver o a verse mal (por ejemplo a los 710px) metes un mediaquery a 710px arreglando esos problemas... y así hasta que llegues a 320px.

[mayazir]

muchas gracias. voy a probar hacer lo q dices.
otra cosa, porque no se me ajusta el primer boton, y a veces tb el segundo?
no logro encontrar la causa.

[Zeromm]

Eso es por los floats, tienes que "limpiarlos" con "clear: both" o el ahora más usado clearfix

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}

[mayazir]

muchas gracias otra vez.

[pzin]

Realmente lo más recomendado es trabajar al revés, empezar por resoluciones pequeñas e ir aumentando. Hay mucha ciencia detrás de esto. Puedes buscar artículos que hablen de mobile first.
Aparte de esto, es bastante importante tener las ideas claras antes de empezar, mock-ups, apuntar las ideas y conceptualizar las cosas. Básicamente una buena planificación ayuda mucho y te vas a ir menos por las ramas. Descarta Photoshop, coge un lápiz y un papel.

Lo de los tamaños alguna vez lo hablamos en el foro, pero realmente al final depende totalmente del diseño. Y si lo tienes todo pensado a grandes rasgos, vas a identificar fácilmente tres o cuatro medidas que vas a querer usar.

Cosas que vi:

• Entre 800 y 1000 píxeles la web se ve cortada, con scroll horizontal.
• A más de 1000 píxeles, y hasta 2000 y seguramente en 2500, la web se ve igual (luego no está optimizada para pantallas de más de 1000 píxeles ya que se ve igual)
• El menú es exagerado en resoluciones pequeñas, demasiado grande. Además mejor en un dropdown, para que no moleste al primer vistazo.
• Resolución grande, fuente muy pequeña, resolución pequeña, fuente muy grande. ¿? Algo más homogéneo y armonioso estaría mejor.

Échale un ojo a preprocesadores CSS, al menos SASS te puede ayudar mucho en cuando a media-queries.

[Zeromm]

Iniciado por pzin

Realmente lo más recomendado es trabajar al revés, empezar por resoluciones pequeñas e ir aumentando. Hay mucha ciencia detrás de esto. Puedes buscar artículos que hablen de mobile first.

¿Cuales son las ventajas de trabajar con la idea de Mobile First?

Yo, aparte de una utilidad de saber jerarquizar mejor los elementos y beneficiar al diseño (que esto también es muy discutible, ya que al final dependerá de la capacidad del diseñador) no le acabo de ver más beneficios que el sistema RWD típico. Es más, tienes que tener una cosa en cuenta a mayores que antes no había que tener tan en cuenta, el hecho de tener que añadir un archivo javascript más para que las versiones antiguas del explorer detecten los mediaqueries, ya que si no en esas versiones te va a cargar siempre la versión movil.

Realmente el concepto importante es el RWD, el comenzar por versiones moviles o versiones de sobremesa pienso que ya va al gusto de cada uno y que no tiene tanta importancia como se le está dando.