Bueno, un poco a marchas forzadas, acabo de enviar el ejercicio correspondiente a la cuarta semana del curso: An Introduction to W3C’s Mobile Web Best Practices.
Se trataba de personalizar el contenido según el dispositivo del usuario, es decir, si una persona se conecta a nuestra web desde un móvil, debemos entregarle contenido ajustado a su dispositivo (por ejemplo debemos reducir el número de imágenes, utilizar una maquetación más sencilla…), pero si se conecta desde un ordenador o navegador «normal», debe poder aprovechar al máximo las capacidades del mismo (debe poder ver vídeos, flash, utilizar ajax…).
Para este ejercicio debíamos basarnos en el de la semana pasada y debíamos modificar el menú, el tamaño y formato de las imágenes.
En resumen lo que hice fue:
- Eliminar la imagen decorativa principal de Beethoven.
- Crear dos css, una para los móviles y otra para el resto de los dispoisitivos.
- Ajustar el tamaño del contenido principal y pintar el menú de navegación flotando a la derecha para aquellos dispositivos que no sean móviles.
Podéis consultar el resultado en:
- dot.mobi bruno rico assignment for week 4.
- direct link to exercise about Beethoven site.
A partir de aquí, una pequeña traducción al inglés de lo realizado.
- I’ve removed the big image in the main content.
- Created two css one for mobile the other for screen media.
- On the screen media I made a floating right navigation menu. In order to display ok the content I adjusted the width of the main content.
You can see the result in:
- dot.mobi bruno rico assignment for week 4 direct link.
- direct link to exercise about Beethoven site
I’ve tried to insert the big image like background in the screen.css, but I noticed that in small resolutions contrast between text and image is not enough.