Proyecto ShinFDuran Home: Día 5 retoques

Ayer ya empecé a echar de menos el no haber realizado el wireframing de versiones más amplias que la mínima del móvil.  Ya incluí algunas media queries pero sobre todo después de hacer el deploy en Nodejitsu y mirarlo más a fondo ví algunas carencias.



Al no haber tenido en cuenta las resoluciones mayores he comprobado que la estructura html no es la adecuada para hacer una adaptación responsive correcta, así que habrá que agregar algunos div adiciona.es

Footer

Mi idea inicial es que sirviera de delimitador y el ancho fuera del 100% pero aquí me topo con 2 problemas:
    - El ancho está limitado por el wrapper, con lo cual debo sacar el footer del wrapper o bien crear uno externo (que estaría al 100% pero sería de cara a posibles cambios futuros) y otro interno o bien sacar el footer del div#wrapper.
    - Cuando se está en versión móvil no hay problema, ocupa el 100% y rellena bien, sin embargo, a tamaños más grandes no sólo surge el problema anterior, sino que además una vez salta el último media querie se ve el fondo de la página quedando como un simple rectángulo en medio.

Solución: Cambiar el fondo de página al color del footer y posteriormente retocar lo superior.
Voy a usar la siguiente  paleta de colores, que me gusta como queda y se ajusta bien al estilo: http://www.colourlovers.com/palette/27905/threadless.

Iconos sociales

Problema: Al crear un listado de iconos sociales usando awesome icons, al pasar el ratón por encima no cambia todo el contenedor sino una pequeña parte.






Solución:  Revisando la web de Font Awesome me he dado cuenta, que en lugar de usar un listado lo que usan es un conjunto de divs.  Reajusto y queda bastante mejor, para destacarlo cuando el div está hover cambio el fondo a naranja y le agrego un ligero border-radius.

Terminando el footer

Añado una flecha para ir al inicio de la página ya que a lo largo de la página no hay una opción rápida para cambiar de sección.

Para que el footer no quede tan excaso añado mi copyright, que queda decente.  A tamaños pequeños los muestro en diferentes líneas, pero superado cierto ancho meto ambos bloques en la misma línea.  Con esto, me doy por satisfecho con el footer, de momento.

Texto central

Sólo el texto de contenido queda muy soso, habrá que añadirle algo de contenido extra en forma de imágenes para que sea un tanto más dinámico.  Igualmente habrá que dedicarle más tiempo a la sección de contacto y sobre todo portfolio.

Navegador

Cambio el color azul oscuro por el de la paleta que puse anterior de colour lovers, no hay mucha diferencia pero parece ligeramente mejor.  Después agrego un delineado para separar el nav de los otros bloques con lo típico, 1px solid black.  Los iconos los veo un tanto simples, pero son viables.

La versión móvil me parece bien, pero tras el breakpoint de 960 pixels no me termina de convencer.  Le añado un borde de 1px negro a todo, redondeo los laterales para que parezca una especie de elipse y centro las opciones.  Se ve mejor, pero el alto del menú me parece mucho, retocaré el padding de los li para hacerlo más pequeño el alto.

Ya se porque no me cuadraba, el padding es con respecto a las letras, sin embargo las imágenes sobresalen por arriba, así que he puesto diferente padding arriba y abajo para que esté más centrado respecto al icono, en lugar de respecto a la letra (esta se verá que tiene más hueco por arriba que por abajo, pero la imagen "pesa" más).

Nav terminado, como todo no descarto cambios en el futuro, pero actualmente el resultado es aceptable.

"Malos" hábitos

Tengo un hábito, de momento no se hasta que punto es bueno o malo, entiendo que si hago diseño responsive y me pongo ha estirar la página en NINGÚN momento debe aparecer la barra horizontal abajo.  Es posible que se de en intervalos pequeños que no se van a dar realmente, pero es algo que me molesta, una de las ventajas de modular el código es que me permite comentar bloques enteros de código.

Me surge ese problema y comentando el layout he visto que el problema está justamente en break2.styl.  Seguramente en el momento en que cambio el breakpoint e indico que el wrapper tiene un tamaño fijo de 960 pixels, debe haber ahí algún margin o padding que me la está liando.

De momento en Chrome reviso cómo se vería para la resolución de 960x640 que es el equivalente a un iPhone girado y... se ve bien, es el pixel 961 donde se va al carajo.  La siguiente resolución típica es 1024x768 correspondiente a un iPad, se ve bien, de momento lo dejo pero apunto la matrícula para el futuro retocarlo.

Ahora le toca a los heads, bufff... sólo pensar en elegir colores ya me da pereza. Aunque no haya dedicado mucho tiempo cortaré por aqui, habiendo hecho algunos cambios interesantes.  La versión móvil es medio decente y queda tal que así: