W3C MWBP 5th Week Assignment: Redesign a Real Site

Bueno, con esta práctica se acaban los ejercicios obligatorios del curso: An Introduction to W3C’s Mobile Web Best Practices.

Se trataba de escoger una página de un sitio y rehacerla de manera que validase su código (xhtml, css) y se solucionasen los problemas que pudiera tener cuando se navegaba desde un dispositivo móvil.

Para este ejercicio elegí rediseñar este nuestro blog, y de paso hacer varios cambios que tenía en la cabeza:

  1. Solucionados los problemas que no permitían validar el xhtml. Ahora mismo la plantilla del libro de apuntes  es xhtml 1.0  Transitional ok.
    Ahora sólo queda revisar todos los posts para solucionar el código que genera el editor de texto rico de wordpress (que no genera xhtml válido…).
  2. Creada una css para dispositivos móviles libro de apuntes Mobile CSS2.1 compliant. De esa manera si te conectas desde un móvil, el contenido aparecerá maquetado de otra manera (evitando algunos errores). Lo principal es que no carga ni la imagen de la cabecera ni lo bullets de las listas y que el menú de la izquierda se muestra al final del último post.
  3. Revisada la css para eliminar las medidas absolutas. Se han cambiado todos los px a em, para lo que fue de gran ayuda el EmCalculator, una calculadora para pasar medidas absolutas a relativas (de px a em). Además también valida libro de apuntes screen CSS2.1.
  4. Se han solucionado algunos problemillas de accesibilidad, con lo que ahora la plantilla cumple el nivel AA de WAI (comprobado mediante el TAW).
  5. Añadidas varias anclas que únicamente se ven si navegas desde dispositivos móviles. La intención facilitar la navegación (acceso al menú, saltar al contenido y volver al principio).

Los emuladores de dot.mobi, no muestran la css apropiada, sin embargo sí podemos comprobarlo desde nuestro teléfono real, desde Firefox con la web developer toolbar o utilizando el opera mini emulator.

Por otra parte la plantilla no valida mobileok validator principalmente por el tamaño total de la página (160KB!!), porque es xhtml transitional y no se marcan el tamaño de las imágenes…

Debería también personalizar el contenido que se muestra cuando navegas desde el móvil, a que por ejemplo no tiene mucho sentido ver la nube de tags en la minúscula pantalla del teléfono.

A continuación, la traducción a inglés de lo realizado.



I’ve just uploaded the redesign of my personal site Libro de Apuntes de Bruno Rico.
You can see it on dot.mobi emulator.

It’s under wordpress and the main things I’ve done are:

  1. Fixed some xhtml errors (mainly unscapped urls, javascript not well defined, forms). The home validates ok, now I need to review all posts because the editor is not xhtml strict so it makes no clean code (if you use the rich text editor). libro de apuntes xhtml 1.0  Transitional ok.
  2. Created a mobile css. libro de apuntes Mobile CSS2.1 compliant.
    1. Adapted not to load images (big heading one and bullet images).
    2. Adapted to a liquid layout: displays «right menu» at the bottom.
  3. Fixed css errors and changed absolute units(px) by relatives (em). Now it validates ok. To make this changes I used EmCalculator (px to em). You can see the final css in  libro de apuntes screen CSS2.1.
  4. Arranged some accessibility issues. Now it validates WAI AA Level (validated using TAW).
  5. Added some anchors to top, content and menu to make it easy to mobile users.

The dot.mobi emulators still shows the big images but when I use my real phone, firefox web developer toolbar or the opera mini emulator it renders ok.

The site does not validate mobileok (size 160KB!!!) so maybe I will remove some elements or to create a mobileok template for wordpress, because it loads some content not important to mobile users (like tag cloud, translate posts, javascript text to speech…).

chevron_left
chevron_right

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentario
Nombre
Correo electrónico
Web

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.