Después de haber hablado de los principios del diseño web adaptable y los modelos de diseño adaptable existentes, llegamos a la tercera y última parte del tutorial, con algunas prácticas a tener en cuenta para que el código sea legible en cualquier dispositivo. Como ya sabéis, tenéis el resto de entradas disponibles en el tab Responsive Web Design, para acceder a cada entrada de forma sencilla.
Para los que estáis acostumbrados a usar HTML o XHTML, o incluso HTML5, muchas de estos buenos quehaceres ya los tendréis arraigados, aunque al tratarse de un lenguaje de marcado, y depender de la “subjetividad” de los exploradores que lo codifican, deja un ancho margen de error, que nos interesa reducir lo máximo posible.
Índice de contenido
Utilizar Plantillas
Como bien sabréis, cada vez que queremos hacer una página web o una aplicación, hay una serie de etiquetas o funciones que se repiten constantemente. Muchos de nosotros, tendemos por tanto a copiar un proyecto antiguo y empezar con él, modficando todo lo que hay que modificar. El resultado es bueno, pero rizando el rizo, existen ya plantillas que vienen posiblemente mejor preparadas que lo que nosotros tengamos hecho.
Algunas de los más conocidas son SwitchToHTML5, Shikiryu generator. Sin olvidarnos del excelente HTML5 Boilerplate.
Compatibilidad
Es importante, sobre todo si diseñamos en HTML5, estar al tanto de las compatibilidades actuales en este lenguaje para el resto de navegadores. Por regla general, se tiende a programar para navegadores como firefox, opera, safari y chrome, que son los que mejor preparados están, y luego adaptar el código al maldito Internet Explorer, que va a su royo. Es muy importante que se tenga en cuenta este punto, ya que aunque buena parte de la sociedad usa navegadores distintos, hay que tener en cuenta que mucha gente, por desconocimiento, sigue usando internet explorer.
Tener a mano una chuleta con los elementos del lenguaje
No es estrictamente necesario, pero tiende a salir rentable. Tenéis por internet mil y un ejemplos de buenas chuletas para según que lenguaje, y con 10 seg que le dediquéis ya habréis visto varias decentes, como tags,event handler o soporte en navegadores para HTML5, que además se actualizan a los nuevos estándares.
Seguir las reglas del lenguaje
Escribir <hola> en vez de </hola> puede parecer lo mismo, pero genera errores que aunque todos los navegadores depuran, hacen que la web o aplicación se cargue más lenta. Optimizar el código, y estar al tanto de cómo se debe escribir todas y cada una de las etiquetas es importantísimo para mejorar la eficiencia.
Validar el código
El paso anterior lleva como es de esperar a éste, y es que un código con errores es un código mal diseñado, y cuando nuestro objetivo es que sea totalmente accesible desde donde se quiera, tenderá a hacer justamente lo contrario. Un código validado correctamente, tiene muchísimas menos posibilidades de fallar en un dispositivo o navegador en especial, ya que cumple en mayor o menor medida, todos los puntos anteriores.
Y con esto hemos hecho un minirepaso del diseño web adaptable. Tenéis el resto de entradas sobre Responsive Web Design en Guía del diseño web adaptable.
