| Diseño de las páginas de inicio
Para una homogeneización adecuada de las páginas de inicioa de las webs de ULMA se regularán los siguientes contenidos de las páginas de inicio.
| Logo
| Título
| Favicon
| Logo de ULMA
Los logotipos de ULMA en las webs de los Negocios y promociones deberán respetar las pautas del Manual de Identidad Corporativo aplicando en las webs los márgenes correspondientes a los logotipos. Los logotipos tendrán que tener una buena resolución evitando siempre pixelizaciones.
En caso de introducir el logo con el nombre de Negocio, se realizará de la siguiente manera (directriz tomada del manual de identidad corporativa):
A continuación mostramos algunos ejemplos de lo expuesto en los logos de algunos de los Negocios del grupo:
En caso de que algún Negocio opte por no introducir el nombre de Negocio en la parte inferior del logotipo tendrá que respetar el área de respeto. Por ejemplo:
| Títulos de las páginas de inicio de los sitios Web
El modelo que se debe utilizar en los títulos de las webs es el siguiente:
ULMA Negocio – Actividad
Por tanto debemos respetar las mayúsculas, minúsculas, espacios y signos. Un ejemplo de uno de nuestros Negocios:
ULMA Packaging – Máquinas de envase y embalaje
Para configurar los títulos, hay que editar las etiquetas “title” que figuran en el código HTML de la página Web. Nuestra recomendación es que se intente ediat el título desde el gestro de contenidos que dispongamos. Si no tenemos acceso a un gestor de contenidos para gestionar la web de nuestro Negocio o delegación, tendremos que modificar directamente el código HTML de la página.
Dentro de la home en algún punto entre las etiquetas <head></head> hay una etiqueta <title>. Se trata de modificar el texto y guardar los cambios:
| Erróneo: <title>ULMA – ARCHITECTURAL SOLUTIONS</title>
| Correcto: <title>ULMA Architectural Solutions</title>
| Correcto: <title>ULMA Architectural Solutions – Máquinas de envase y embalaje</title>
Como se comenta más adelante en esta misma página, los títulos (además de otros parámetros y del contenido, por supuesto) también tienen mucha importancia a la hora de que los buscadores indexen adecuadamente nuestras páginas.
| Favicon
Un favicon, también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente. Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas. (Fuente: Wikipedia)
Al igual que los títulos de las páginas de inicio, también se deberá introducir el favicon del símbolo de ULMA. Para introducir el símbolo en el sitio web, seguiremos los siguientes pasos:
| Descargar el Favicon. DESCARGAR
| Guardar el icono en una de las carpetas del sitio web.
| Copiar el código que aparece a continuación en la home en algún punto entre las etiquetas <head></head>
<link rel=”shortcut icon” type=”image/x-icon” href=”introducir la dirección (path) donde hemos guardado la imagen” />
Como ejemplo, mostramos el código HTML correspondiente a la página web de ULMA Packaging:
<head>
<link rel=”shortcut icon” type=”image/x-icon”
href=”http://www.ulmapackaging.com/favicon.ico” />
</head>
Como resultado, se puede observar la siguiente imagen:
| Recomendaciones para las páginas de inicio
Es importante y recomendable que cada página web disponga de un título y una descripción que puedan ser leídos por los buscadores. En concreto, recomendamos que las páginas de inicio de cada Negocio tengan configuradas estas opciones, que se traducen en etiquetas meta en el código HTML de la página. Estas etiquetas no son visibles para los visitantes de las páginas, pero sí para los buscadores. De esta manera estamos ayudando a los buscadores a que indexen adecuadamente nuestras páginas. Hacemos esta recomendación sobre todo para las páginas de inicio de los sitios web de los distintos JNegocios, pero debería hacerse extensible a cada página web que forme parte de nuestros sitios: toda página web debería tener su propio título y descripción. Si no es posible aportar esta información desde el gestor de contenidos que dispongamos, recomendamos que el Negocio en cuestión se ponga en contacto con el departamento o la empresa que gestiona su web.
Si tomamos como ejemplo el sitio web de ULMA Handling Systems, podemos ver que en el código HTML de la página de inicio están especificados:
| El título de la página. En este caso, el Negocio ha decidido incluir en el título una frase con palabras clave: “Soluciones logísticas para distribución y fabricación automática”. Es una opción muy recomendable para mejorar la visibilidad de las páginas:
<title>ULMA Handling Systems – Soluciones logísticas para distribución y fabricación automática </title>
| La descripción de la página:
<meta name=”description” content=”Ingeniería Integral en Material Handling Systems. Soluciones logísticas dirigidas al ámbito de la Distribución y de la Fabricación Automática.” />
Ambas etiquetas se pueden observar en el código HTML de la página:
Esta información es importante porque va a ayudar a los buscadores a clasificar mejor nuestras webs y también porque es una información que es muy visible en los resultados de las búsquedas. Si, por ejemlo, búscamos en Google “ULMA Handling”, el primer resultado es, logicamente, la página web del Negocio. Lo que vemos en los resultados de búsqueda es, precisamente, el título y la descripción de la página. Por tanto, elegir un buen título y una buena descripción para nuestras páginas ayuda a mejorar su visibilidad de cara a los buscadores y a los usuarios:
También es muy importante que las direcciones de nuestras páginas sean legibles, no pensando en los usuarios pero sí en los buscadores. La dirección es un elemento muy importante a la hora de que los buscadores indexen bien nuestras páginas, junto con el título y la descripción de las mismas. Siguiendo con el ejemplo anterior, la dirección de la página web es:
http://www.ulmapackaging.com/maquinas-de-envasado/termosellado/scorpius-600
Esta dirección es perfectamente legible e incluye palabras clave. Para lograr direcciones legibles, amigables, es conveniente que nos pongamos en contacto con el departamento o la empresa que gestiona nuestra web.
A nivel de usabilidad, algunas recomendaciones básicas pero importantes pueden ser:
| El logo del Negocio debe ser clickable y debe conducir siempre a la página de inicio de la web, en el lenguaje que haya elegido el usuario en el caso de que se trate de un sitio multilingüe.
| Las opciones para cambiar de idioma deben estar siempre presentes y fácilmente accesibles. Es recomendable que se encuentren en la esquina superior derecha.
| Cuando el usuario cambie de idioma en la web, debe ser redirigido a la versión traducida de la página que está viendo, nunca a la página de inicio en el idioma seleccionado.
| En la medida de lo posible, el menú principal no debería ofrecer muchas opciones (se sule considerar un límite de 7 opciones de primer nivel), con objeto de no confundir al usuario.
| Se puede mejorar la navegación dentro del sitio proporcionando al usuario las llamadas “migas de pan” que le indican en todo momento dónde está y cómo puede volver rapidamente hacia atrás. Como ejemplo mostramos una página del sitio de ULMA Packaging en la que las migas de pan indican dónde está el usuario: “Usted está aquí: Inicio → Máquinas de Envasado → Termosellado → SCORPIUS 600”
| Por último, el diseño de las páginas web debe ser coherente. Hay que usar los mismos colores, tipografías, maquetación, etc. en todas las páginas que componen el sitio web.
También es recomendable que los enlaces hacia los perfiles en redes sociales del Negocio o delegación aparezcan en la cabecera de la página de inicio, a través de iconos que identifiquen facilmente las distintas redes sociales. Como ejemplo mostramos la página web de ULMA Construcción, en la que los enlaces a sus perfiles en redes sociales (Scribd, YouTube y Linkedin) aparecen debajo de la imagen de cabecera:
