Cuando llegue a Trilce a fines de verano de 2014, estaban tratando de usar un diseño responsivo de su sitio web, este ya lo tenían listo, solo faltaba plasmarlo en la práctica.
CAMBIOS
Además de los problemas sencillos que enfrenta un diseño responsivo, algunas zonas han demostrado ser más dificiles que otras.
_ Todos los menues tenían que adaptarse a donde estuvieren, además de mostrar otro diseño para dispositivos angostos.
_ Las secciones principales de la página sacarón a luz diversos problemas, entre ellos la redimensión de las imágenes, el slider de locales o la caja de youtube.
_ Hacer responsivo el plugin de facebook fue una tarea titánica.
_ Hacerlo para Internet Explorer 8 (22% del mercado)
SOLUCIÓN
Se tuvierón que tomar decisiones de diseño de menor importancia.
El menú se descompone debajo de los 768 pixels.
Cada problema se trataba primero con una solución css, si está no era óptima se pasaba a Javascript.
DESCRIPCIÓN TECNICA
Tecnologías
. HTML5 _ Se usó la semántica de las etiquetas.
. CSS3 _Mejoras visuales CSS3 tales como esquinas redondeadas, sombras y gradientes se utilizan para reducir el número de componentes de la imagen necesarios para el diseño.
Librerías
Además de código personalizado, se usó algunas bibliotecas para este proyecto.
Modernizr ._ Propone soluciones a los navegadores antiguos ofreciendo uniformidad con html5.
Jquery ._ La librería más usada del mundo de Javascript.
Lazy Load ._ Las imágenes no se cargan al inicio de la web, esto hace que se reduzca el tiempo de carga del sitio.
Greensock._ Ofrece funcionalidades de animación superiores a jquery.
respond.js ._ Soporte para media querys en navegadores antiguas de Microsoft internet Explorer.
Fancybox ._ Para los emergentes.
CAMBIOS
Además de los problemas sencillos que enfrenta un diseño responsivo, algunas zonas han demostrado ser más dificiles que otras.
_ Todos los menues tenían que adaptarse a donde estuvieren, además de mostrar otro diseño para dispositivos angostos.
_ Las secciones principales de la página sacarón a luz diversos problemas, entre ellos la redimensión de las imágenes, el slider de locales o la caja de youtube.
_ Hacer responsivo el plugin de facebook fue una tarea titánica.
_ Hacerlo para Internet Explorer 8 (22% del mercado)
SOLUCIÓN
Se tuvierón que tomar decisiones de diseño de menor importancia.
El menú se descompone debajo de los 768 pixels.
Cada problema se trataba primero con una solución css, si está no era óptima se pasaba a Javascript.
DESCRIPCIÓN TECNICA
Tecnologías
. HTML5 _ Se usó la semántica de las etiquetas.
. CSS3 _Mejoras visuales CSS3 tales como esquinas redondeadas, sombras y gradientes se utilizan para reducir el número de componentes de la imagen necesarios para el diseño.
Librerías
Además de código personalizado, se usó algunas bibliotecas para este proyecto.
Modernizr ._ Propone soluciones a los navegadores antiguos ofreciendo uniformidad con html5.
Jquery ._ La librería más usada del mundo de Javascript.
Lazy Load ._ Las imágenes no se cargan al inicio de la web, esto hace que se reduzca el tiempo de carga del sitio.
Greensock._ Ofrece funcionalidades de animación superiores a jquery.
respond.js ._ Soporte para media querys en navegadores antiguas de Microsoft internet Explorer.
Fancybox ._ Para los emergentes.
0 comentarios:
Publicar un comentario