Diseñar una web desde cero

A la hora de realizar un diseño web son muchos los factores que deben ser tenidos en cuenta para garantizar que el contenido resultante está en sintonía con los requerimientos del cliente, del mercado y optimizado para múltiples dispositivos. En esta entrada aprenderemos a diseñar una web desde cero.

Cualquier desarrollador web ya sabrá que en el momento que realizamos el volcado de una web a su servidor final surgen cientos de problemas no previstos respecto a la web que teníamos previamente alojada de manera local o en un servidor de pruebas.

En esta entrada de nuestro blog vamos a ofrecer una extensa lista de pasos, aplicaciones, programas y herramientas que os ayudarán tanto a optimizar el proceso de diseño web como a comprobar la capacidad de respuesta de un sitio web que ya está activo.

Se trata de la propia checklist que en CitySEM empleamos con cada proyecto de diseño web para asegurarnos que el contenido que se le entrega al cliente es de la máxima calidad posible.

1. Determinar el soporte para el diseño web

Cuando nos llega un nuevo proyecto de diseño web por lo general tenemos que visualizar en conjunto cuales son los requerimientos del cliente más allá de lo que él nos cuenta.

En este sentido a la hora de afrontar el desarrollo web recomendamos usar el siguiente esquema:

1.1 CMS

Los CMS son una de las opciones más socorridas a la hora de plantear un proyecto de diseño web. Cualquier desarrollador web sabe utilizarlos, disponen de una interfaz ideal para el cliente inexperto y además, la mayoría, cuentan con una gran comunidad que intercambia recursos, trucos, herramientas y servicios complementarios.

Existen infinidad de CMS que pueden ser empleados para el diseño web. Aquí os desglosamos los principales y sus características.

1.1.1 WordPress

Se trata del gestor de contenidos más popular en el mundo del diseño y desarrollo web. Es el CMS en el que se han desarrollado más páginas web del mundo y algunos de los sitios más populares de Internet están desarrollados en esta plataforma (Marca por ejemplo).

Su popularidad supone al mismo tiempo grandes ventajas y grandes inconvenientes. Por una parte un desarrollo web realizado en WordPress contará con la garantía de ser fácilmente editable por cualquier persona, permite que el cliente pueda gestionar su web con una formación bastante elemental y además garantiza que cualquier otro desarrollador web pueda realizar modificaciones aunque no fuese el responsable del diseño web en un primer momento.

WordPress parte además de una comunidad de desarrolladores bastante extensa, lo que hace que existan infinidad de plugins que aumentan la funcionalidad de WordPress hasta cubrir prácticamente las mismas prestaciones que cualquier web a medida. El desarrollo de estos plugins requiere de un conocimiento avanzado de PHP y JS, pero cualquier con dominio de estos lenguajes puede desarrollar y escalar la funcionalidad de las web basadas en WordPress hasta el infinito.

Pero no todo es positivo. El hecho de que se trate de la plataforma de desarrollo web más popular hace que sea también la más vulnerable. Muchas personas tienen acceso a su código base, muchas webs están basadas en WordPress, y la existencia de los plugins además añade puertas traseras o “backdoors” que pueden poner en compromiso la integridad de la web.

1.1.2 Prestashop

Se trata del CMS para tiendas online más popular en Europa. Al igual que WordPress, Prestashop es un CMS completamente gratuito, lo cual lo convierte en una opción muy económica para tiendas online de todo tipo.

Como WordPress, también incluye multitud de módulos, unas veces gratuitos, otras veces de pago, que amplían el número de funciones, la escalabilidad de la web y las opciones que ofrece  de cara al cliente y al usuario.

De cara a su gestión, Prestashop es bastante intuitivo a la hora de realizar un mantenimiento periódico (añadir o quitar productos, modificar precios, añadir descuentos, editar categorías enteras de productos…) lo cual hace que tanto para el diseñador web como para el cliente sea un CMS muy cómodo.

A nivel de desarrollo, no obstante, plantea una mayor complejidad que una web basada en WordPress. No olvidemos que una tienda online por lo general tiene mucho más contenido que una web estándad, lo cual hace que haya que estar pendiente de más elementos que van desde el número de pasos del proceso de conversión a la taxonomía de navegación de una web con miles de elementos posibles, pasando por las hipotéticas combinatorias de características.

Esto hace que a la hora de plantear un desarrollo web en Prestashop haya que hacer un diagrama previo de contenidos para garantizar que la estructura lógica de navegación cumple a su vez con la función de ser intuitiva y fácilmente escalable.

1.1.3 Magento

Magento es el CMS para tienda online más empleado en EEUU. Al igual que Prestashop ofrece un sinfín de posibilidades en cuanto a la elaboración de tiendas online, con cientos de módulos gratuitos y otros de pago.

Hay una gran diferencia no obstante entre Prestashop y Magento. La curva de aprendizaje de Magento es mucho más lenta que la de Prestashop. A nivel de desarrollo requiere de un mayor conocimiento de los lenguajes de programación PHP y JS.

Magento tiene una mayor complejidad aunque es cierto que en sus últimas versiones ha reducido bastante la distancia que lo separaba de Prestashop en cuanto a herramientas para desarrollo y diseño.

Si bien tanto Prestashop como Magento son CMS pensandos para tiendas online, y ambos cumplen con esa función, en sus fundamentos hay una diferencia capital.

Magento está pensado para tiendas online que un volumen enorme de ventas (Nike) mientras que Prestashop fue conebido para tiendas online con menor actividad.

1.1.4 Drupal

Es el rey en cuanto a seguridad de los CMS. Drupal es un gestor de contenidos de código abierto 100%. Esto hace que cualquier desarrollador web pueda personalizar el gestor de contenidos para conseguir exactamente el tipo de funcionalidades que el cliente requiere.

Este nivel de personalización consigue que Drupal sea, con certeza, el CMS más seguro que hay actualmente en el mercado.

Otra de sus grandes ventajas es la opción de incluir usuarios con diferentes roles, los cuales pueden tener acceso restringido a determinados contenidos. Esto hace de Drupal el CMS más completo cuando queremos realizar una gestión interna de cara a aspectos requeridos por cada empresa (contabilidad, contenidos, noticias, secciones, productos… etc).

Se puede usar indistintamente para webs corporativas, informativas y tiendas online. Pero tiene dos grandes inconvenientes.

En primer lugar, si deseamos desarrollar una App móvil basada en una web hecha en Drupal debemos, por necesidad, emplear Symfony, por tanto para determinados proyectos es aconsejable trabajar directamente sobre Symfony antes que sobre Drupal.

Y tal vez, el que sea su problema principal, es que es un CMS pensado para desarrolladores con un conocimiento muy avanzado de codificación y programación. Si a priori esto no es un problema para una agencia de diseño web, si lo es de cara al cliente, ya que el tiempo necesario para realizar un desarrollo en Drupal es superior y por ende, más caro.

1.2 DESARROLLO A MEDIDA

El desarrollo a medida es aquel que se realiza desde cero y a base de código puro. Esto tiene grandes ventajas en cuanto a seguridad, escalabilidad, personalización, velocidad de carga y sobre todo, porque no se incluyen librerías, registros en bases de datos ni contenido que no es necesario, lo cual hace que sea relativamente sencillo conseguir páginas rápidas, responsivas y que se ajusten a todos los requisitos de calidad del diseño web contemporáneo.

Las web a medida son más seguras que ninguna otra ya que, al diseñar los contenidos manualmente, es más difícil dar con puertas traseras o vulnearabilidades que puedan ser introducidas por plugins de terceros o por fallos de diseño. Un ataque a una web a medida es válido sólo para esa web.

No obstante el desarrollo a medida por lo general requiere de un mayor dominio del diseño y el desarrollo web que hace que los costes de una web básica codificada a mano sean mucho mayores que aquellos que se basan en un CMS conocido.

Por este mismo motivo, es muy complicado escalar una web a medida, adaptarla o rehacerla si no eres el desarrollador original. Lo cual hace que para muchos clientes no sea una buena opción cuando subcontratan los servicios de desarrollo web.

2. Contenido de la web

Una vez tenemos claro cómo vamos a desarrollar nuestra web debemos preocuparnos de obtener el contenido que va a tener.

En muchas ocasiones será el propio cliente el que os ofrezca estos contenidos. Mientras que en otras tendremos que preocuparnos nosotros de desarrollar este contenido de acuerdo a las necesidades del cliente.

En este punto vamos a indicar qué debemos revisar de cara al contenido y cómo optimizarlo para su uso web-

2.1 Texto

El texto es la parte más importante de una web, gracias a éste el contenido general del dominio adquiere relevancia semántica para un determinado sector, gracias precisamente a la iteración de palabras clave y semántica relacional. Si bien no todos los proyectos van a ser optimizados para SEO es aconsejable cumplir con los siguientes criterios de cara al cliente.

Así garantizaremos que el producto que le ofrecemos es de la máxima calidad posible:

• Ratio de texto-código: Es uno de los indicadores clave de la salud de una web. Cuando el volumen de código es muy superior al del texto tenemos un problema. Para cumplir con los estándares del 25% debemos de minificar el código, eliminar líneas de estilo innecesarias, agrupar las hojas de estilo en cascada y evitar en la medida de lo posbile la inclusión de Javascript en nuestra web. El volumen de texto puede ser algo arbitrario según en el sector que nos encontremos.

En términos de posicionamiento SEO podemos empezar a hablar de un volumen significativo de texto a partir de las 800 palabras.

• Estructura del texto: Dentro de cada categoría, servicio o página dentro de una web tenemos que tener clara la jerarquía de contenidos para estructurarlos de una manera lógica. Para esto os recomendamos que maquetéis las páginas web como si de un artículo científico se tratase:
  • H1: Título de la sección/servicio/página/entrada. Sólo uno por URL
  • H2: Elementos principales del índice. Si tomamos de ejemplo ésta entrada. Todos los puntos del 1 al 17 son H2
  • H3 en adelante: Es sencillo. Si un H2 tiene varios subíndices cada uno será un H3, si uno de estos H3 tiene a su vez varios encabezados que dividen el contenido serán H4 y así sucesivamente.
• Negritas cursivas y subrayado: Estos elementos visuales deben ser usados con un único objetivo. Permitir al lector identificar los puntos clave del contenido mediante una lectura diagonal. Es decir, permitirle identificar los elementos que responden a su necesidad informativa sin necesidad de leer todo el texto.
• Estracto y Metadescripciones: De cara a el buscador, el cliente y los usuarios en general debemos definir correctamente tanto el estracto como las metadescripciones de cada una de las URL de nuestra página web.
• Microformatos: Dentro del apartado textual, aunque es una cosa más de código, debemos tener en cuenta los microformatos. Se trata de pequeños descriptores cuya función es básicamente dejarle claro al buscador qué contiene cada elemento de una página. Si hablamos de una tienda online los microformatos indicarán al crawler cual es precio, la valoración media, cual es la descripción del producto, cual es la fecha de entrega y así un largo etcétera de ítems que deben ser correctamente identificados. Hay muchas normas de etiquetado de microformatos, Schema, JSON… Cada poco tiempo la tendencia de uso y su recomendación varía. Antes Schema era indispensable, ahora lo es JSON, sea cual sea el caso. El contenido debe estar perfectamente identificado mediante microformatos.

2.2 Fotos

El contenido visual es fundamental a la hora de diseñar una página web atractiva. Ya sea mediante fotografías, infografías, iconos o vectores, la inclusión de contenido audiovisual es necesario para garantizar mejores índices de permanencia en la web y para captar la atención del visitante.

A la hora de introducir imágenes en nuestro proyecto de diseño web recomendamos su optimización en cuanto a peso y tamaño. Para realizar esta optimización debemos:

• Asegurarnos de que ninguna imagen tenga una anchura o altura excesivas. Deberemos reescalar estas imágenes al tamaño máximo al que orientamos la web.
• Una vez que el tamaño es el adecuado, debemos optimizar su peso. Para esto recomendamos usar imágenes en JPG o PNG. El JPG parte de la base de que es el formato que más se puede comprimir. El PNG, por su parte, tiene un ratio de compresión bastante razonable, puede tener elementos transparentes y, además, su compresión no le hace perder calidad, al contrario que el JPG. Sea cual sea el formato escogido debemos, o bien manualmente, o bien mediantes programas de terceros como RIOT, comprimir las imágenes para garantizar que ocupan el mínimo espacio posible.
• Una vez subamos la imágenes a la web debemos asegurarnos de que, al igual que el texto, están correctamente etiquetadas, descritas y definidas con un título único, un título alternativo más extenso y una descripción de qué se ve en la imagen. Así permitimos, entre otras cosas, que una persona invidente que acceda a la web desarrollada podrá entender la información que aportan las imágenes al resto de contenido.

2.3 Imagen Corporativa

Otro de los elementos que debemos tener perfectamente controlado antes de lanzarnos al diseño web de un cliente. Su identidad corporativa comprende los elementos visuales, textuales y de estilo que permiten identificar fácilmente al cliente.

Es por tanto conocer, en caso de que la haya, todas las características de esta identidad corporativa para que la web esté acorde a la filosofía de la empresa. Debemos asegurarnos de que tenemos claro esto para poder integrar:

• El logotipo: Dentro de la web, fácilmente reconocible y legible
• Los colores empleados en el diseño web: Deben estar en sintonía con la empresa y con el resto de elementos visuales que use habitualmente
• Las llamadas a la acción: Deben, al igual que los colores, estar de acuerdo con la filosofía de la empresa y en sintonía con las vías de comunicación empleadas en otros medios.
• El lenguaje: Tenemos que tener claro cómo se comunica nuestro cliente para que la web sea un fiel reflejo de la estrategia de comunicación empleada a través de otros canales

3. Taxonomía de Navegación

Este punto es crucial a la hora de hacer un diseño web de calidad. En CitySEM nos encontramos a diario con problemas derivados de la taxonomía web precisamente porque ni cliente ni desarrolladores tienen ésto en consideración antes de embarcarse en la arquitectura de un nuevo sitio web.

La taxonomía no es ni más ni menos que la estructura de clasificación de los diferentes elementos que componen una página web.

Es fundamental que el desarrollador sea consciente de todas las características de la empresa del cliente para poder, en colaboración con éste, diseñar una taxonomía permanente de navegación que cumpla con las siguiente premisas.

• Lógica: La taxonomía debe responder a un criterio de clasificación lógico. Los elementos deben estar perfectamente clasificados de acuerdo al criterio de esta taxonomía. La forma ideal de diseñar una taxonomía es garantizando que los elementos contenidos en un subapartado pertenecen al apartado que lo contiene, de modo que, si eliminásemos la categoría inmediatamente superior, los elementos seguirían teniendo sentido en su nueva clasificación.
• Coherente: La estructura debe seguir un patrón lógico, pero además debe ser coherente, si en una tienda de zapatos tenemos zapatos de hombre y de mujer como categorías principales no tendría sentido que además, incluyésemos como categorías principales cuero, tela, para correr o de vestir. La jerarquía debe ser coherente con la estructura que pensemos. Para esto recomendamos como paso previo realizar un diagrama de flujo que determine la estructura lógica de la web, y en función de ese esquema, jerarquizar los contenidos.
• Escalable: Una taxonomía bien definida debe permitir el crecimiento de la página o tienda online y la inclusión de nuevos elementos sin necesidad de redefinir la taxonomía ni la ruta de navegación.

3.1 Secciones web

Una vez tenemos clara nuestra taxonomía debemos crear las diferentes secciones de nuestra página web. Estas deben estar jerarquizadas del modo que hemos visto antes y debemos asegurarnos que la estructura de enlaces internos es piramidal.

De este modo no sólo para el usuario, sino para los crawlers, dejaremos claro que la página principal, la home, es la página más relevante ya que es accesible desde toda la web. Seguidamente las categorías principales o secciones, que deben ser las segundas más enlazadas, y así sucesivamente.

Debemos cuidar esta jerarquía y asegurarnos de que elementos como las migas de pan, están habilitados, de modo que el usuario pueda tener perfectamente claro dónde está y cómo ha llegado ahí.

3.2 Menú de Navegación

Finalmente debemos configurar el menú de navegación que nos de acceso directo a cada una de las secciones que por jerarquía, ocupan el segundo e incluso tercer nivel de la pirámide.

Si bien en páginas pequeñas es posible que en el menú estén accesibles todas las diferentes secciones que tiene un sitio web, en una página con muchos elementos será imposible incluirlos todos el menú, principalmente por falta de espacio.

Para estos casos debemos tener claro los distintos niveles, permitir acceso directo a los ítems del segundo nivel y garantizar que desde estos se puede acceder al tercer nivel. Bajo ningún concepto es recomendable contener una web con contenido a más de tres niveles de navegación. A mayor número de clic para llegar a una página, mayor número de abandonos.

4. Contenido legal

Este punto es muy breve. Es necesario contener en nuestra web dos referencias legales de acuerdo a los requerimiento de la legislación vigente en España.

En primer lugar la política de Cookies. Por norma de cara a la legislación y a las recomendaciones de buscadores como Google, es necesario incluir una declaración de política de cookies que informe al usuario de los elementos que va a descargar y cómo se comportan estos de cara a su navegación y sus acciones.

En segundo lugar, el aviso legal. Por imperativo es necesario incluir un aviso legal en las páginas web que indiquen la propiedad, autoría, CIF y demás información referente a la empresa o particular propietaria de un sitio web.  En este punto se debe especificar qué información se recaba a través de la web, que derechos tiene el consumidor sobre esta información y cómo puede ejercerlos y además toda la información legal referente a los servicios, contenidos e informaciones presentes en la web (políticas de compra, derecho de rescisión etc)

5. Subida al servidor final

Ya hemos terminado nuestro proyecto de diseño web con todo el contenido optimizado. Antes de proceder a una revisión formal de la misma debemos subirla a su nuevo servidor. El motivo es simple. En ocasiones las páginas web tienen un rendimiento en nuestro servidor de prueba que luego no se ajusta a la realidad. Ya sea por el proveedor del hosting o por otro tipo de problemas.

Por este motivo recomendamos cargar las páginas web al servidor final antes de realizar la revisión de los contenidos, la estructura y el resto de indicadores que tenemos en nuestra checklist.

6. Revisión

Ya hemos alojado nuestra web, ha terminado la propagación de las DNS y ahora tenemos la web visible desde Internet. Es el momento de revisar que:

• Todos los enlaces apuntan a donde debieran
• Las imágenes se encuentran en donde deben
• Todos los botones funcionan desde todas las páginas
• La web se adapta a versión móvil, escritorio, tablet o cualquier otro formato.

Por supuesto debemos revisar el contenido textual, como haríamos con cualquier documento, para asegurarnos que no hay faltas, erratas, errores de relevancia o de los estilos aplicados.

Una vez que hemos comprobado que la web responde conforme a lo esperado debemos pasar al siguiente punto.

6.1. Optimización

Antes de cualquier otro paso debemos garantizar que la página web diseñada está completamente optimizada para garantizar que su primer crawling sea rápido.

En primer lugar realizaremos una optimización del rendimiento del sitio web. Para ello ya hablamos del peso de las imágenes en el punto dos. Pero hay otras actuaciones que debemos llevar a cabo con la página ya en el servidor final.

• Minificación de código: Tenemos que asegurarnos que hojas de estilo, código HTML o JavaScript se encuentran minificados. Esto quiere decir que no existen saltos de línea innecesarios, que se emplee una única hoja de estilos en vez de generar varias para distintos elementos y que no existe contenido redundante que aumente el ratio de código sin efectos reales en el rendimiento.
• Caché: Cuando desarrollamos una web en un CMS tenemos que tener en cuenta que éstos, por funcionales que sean, suelen hacer una llamada a miles de librerías que no siempre necesitamos. Por este motivo es muy recomendable que añadamos plugins de caché que nos permitan indicarle al navegador qué contenido debe ser cargado y cuál puede ser almacenado para ser reproducido en un nuevo acceso sin necesidad de recargar toda la web.

6.2 Análisis de rendimiento

Una vez hemos llevado a cabo toda la tarea de optimización debemos hacer un análisis exhaustivo mediante software de terceros para comprobar que la página funciona correctamente. Debemos comprobar:

• Velocidad de carga del servidor
• Responsiveness
• Velocidad de carga de la web en conexiones lentas
• Velocidad de carga de la web en escritorio y móvil
• Tiempo medio de respuesta de la web
• Existencia de posibles errores (404, 500 etc)

Una vez que comprobemos que la web que hemos diseñado responde debemos pasar a la última fase. Indexación y tracking.

7. Indexación

Para asegurarnos que la indexación de nuestra página web se realiza rápido y sin errores son tres elementos los que debemos configurar.

En primer lugar debemos crear un archivo robots.txt, este documento lo generan muchos CMS de manera automática, pero es necesario que, especialmente si hemos usado WordPress, Prestashop u otro CMS similar, restrinjamos determinadas URL a los distintos crawlers que visitarán la página.

Por ejemplo, si nuestro sitio está desarrollado en WordPress debemos asegurarnos de que determinadas URLs como wp-login o wp-admin o cualquier extensión con la que accedamos al panel interno de WordPress no es crawleada por los robots, así daremos un plus de seguridad.

Posteriormente configuramos el Sitemap de nuestro sitio web, o bien a mano (no debiera ser complicado si hemos establecido una jerarquía lógica) o bien mediante algún plugin.

Para finalizar incluimos el código del Tag Manager de Google. Esto nos facilitará el vincular el sitio a Google Analytics y Search Console. Sin desmerecer a otros buscadores, lo que nos interesa es que Google sepa que la web existe y que sus crawlers la analicen lo antes posible.

Tras realizar esta actuación tendremos que esperar a que el buscador rastree e indexe nuestra web, y, mediante Search Console de Google, podremos analizar cómo ven los crawlers la web y aquellos posibles errores de indexación, etiquetado o contenidos que tengamos (H1s o metadescripciones duplicadas, enlaces rotos y otros problemas).