6 Características de una página web de calidad. 1 – La interfaz gráfica

Desde que empezó la actividad de seisefes varias han sido las razones que nos han movido. Podríamos decir que la primera razón por la que decidimos empezar fue para intentar mejorar la calidad de Internet.  Nuestra aportación consiste en la creación de páginas web que destaquen por su agradable, sencilla y correcta experiencia de navegación.

Consideramos que una página web de calidad ha cumplir ciertas características. En concreto seis:

1. Interfaz gráfica.

Para poder empezar a valorar como usuarios si una web es de alta calidad lo primero es su interfaz gráfica. La página ha de ser agradable a la vista a la vez que funcional. La estructura del contenido ha de ser lógica y optimizada. Se debe realizar un uso óptimo del espacio útil de cada pantalla y resolución. Se conseguirá de esta manera una mayor predisposición del usuario a entender y navegar con éxito la web.

El número de clics necesarios para lograr los distintos objetivos o funcionalidades ha de ser el mínimo. El uso de barras de desplazamiento ha de ser optimizado para evitar la posible falta de visibilidad de información importante, evitando así posibles abandonos u objetivos incumplidos.

La estética debe ser acorde a su finalidad, unitaria y que case con la imagen corporativa. Si la estética de la página es original o cuenta con algún tipo de juego en su navegación que le otorgue kansei, ayudará a los usuarios a recordarla logrando así extender la sensación agradable más allá de su navegación.

Para poder entender mejor que consideramos una interfaz gráfica correcta vamos a comparar dos webs de empresas que se dedican a la misma actividad, dos imprentas online, Igrafic y Vistaprint.

La primera hace un uso correcto del espacio útil de la pantalla, quizá se excede en demasiado reducido pero de esta manera logran ser compatibles con la mayoría de resoluciones, no existen barras de desplazamiento innecesarias y la navegación parece intuitiva. Hace un uso correcto de las tipografías, cumple una unidad y aplica firmemente la imagen corporativa. Estéticamente es una página armoniosa y agradable.

La segunda cuenta con demasiada información, llega hasta a duplicar parte de la misma, hace uso de barras de desplazamiento con lo que no apreciamos la totalidad de la información. Se compone de demasiados enlaces, esto les ayudará con el posicionamiento SEO pero les perjudica a nivel visual e intuitivo, existen otras maneras de conseguir buen posicionamiento sin hacer al usuario sentirse abrumado en un mar de enlaces.

Problema compatibilidad con los temas de wordpress en ie 8

Hola.

logotipo de wordpress con efecto antiguo

Escribo este artículo porque es posible que mucha más gente este teniendo estos problemas. El problema al que me refiero no es exclusivo de wordpress sino que es un problema de compatibilidad que tiene Internet Explorer 8 con algunos aspectos de CSS3, en concreto con Media Queries. Con ellas se pueden realizar maquetaciones condicionadas, por ejemplo, para que los contenedores se posicionen de una u otra manera en función del ancho del navegador donde se esté mostrando.

Nos hemos encontrado este problema justo en la creación de este blog donde pudimos comprobar que internet Explorer no era capaz de entender estás media queries y la maquetación aparecía de la manera en la que se debería mostrar solo en el caso de que la ventana fuera de un ancho inferior a 768 px, aun cuando la ventana fuera superior. Esto era debido a que Internet Explorer no estaba interpretando la Media Querie que aparecía en el css @media only screen and (min-width:768px)

Para solucionar este tipo de problemas podemos usar una librería de javascript que hará que las media queries se apliquen en Internet Explorer así como en versiones anteriores. Su uso es muy sencillo ya que solo tenemos que incluir el script en nuestras páginas.

En el caso de wordpress los pasos a seguir para incluir esta librería serían:

  1. Descargar el archivo css3-mediaqueries.js y almacenarlo en la carpeta /wp-content/themes/[El-Theme-Que-Estemos-Usando]/scripts/
  2. Editar el archivo header.php que se encuentra en /wp-content/themes/[El-Theme-Que-Estemos-Usando]/
  3. Añadir la linea <script src=”/[Subcarpeta-Donde-Esté-El-Blog]/wp-content/themes/simplemarket/scripts/css3-mediaqueries.js”></script> por ejemplo tras la etiqueta <head>. Ten en cuenta que si tu blog está alojado directamente en el dominio principal no será necesario incluir la subcarpeta
Espero que con esto puedas solucionar este problema de compatibilidad.