| Homepage Design
For adequate homogenization of ULMA homepages, the following homepage content shall be regulated:
| Logo
| Title
| Favicon
| ULMA logo
The ULMA logos on the Company websites and promotions shall respect the guidelines of the Corporate Identity Manual, applying the logos on the margins of websites. Logos must have good resolution, always avoiding pixelation.
If inserting the logo with the Company name, it shall be done in the following way (instructions taken from the corporate identity manual):
Next, we will show some examples of some Companies’ logo display in the Group:
If any Company opts to not insert the Company name on the lower part of the logo, they must honor the respect area. For example:
For any question about the use of the ULMA logo, we suggest consulting the Corporate Identity Manual.
| Website homepage titles
The model that must be used in the website titles is the following:
ULMA Company – Activity
Therefore, we must respect the upper case, lower case, spaces and symbols. An example of one of our Companies:
ULMA Packaging – Packing and Packaging Machines
To configure the titles, the “title” labels must be edited that appear on the HTML code on the webpage. Our recommendation is that the title be edited from the content manager that we offer. If we do not have access to a content manager to manage the webpage of our Company or delegation, we will have to directly modify the HTML code for the webpage.
Within the home at any point between the <head></head> labels there is a <title> label. It has to do with modifying the text and saving the changes:
| Incorrect: <title>ULMA – ARCHITECTURAL SOLUTIONS</title>
| Correct: <title>ULMA Architectural Solutions</title>
| Correct: <title>ULMA Architectural Solutions – Packing and Packaging Machinery</title>
As mentioned later on this page, the titles (in addition to other parameters and the content, of course) also are very important when search engines properly link to our pages.
| Favicon
A favicon, also known as a webpage icon, is a small image associated with a page or website in particular. Browsers usually show the favicon of the webpage visited, if available, on the toolbar and on the header of the corresponding tab. In addition, they are used to more easily identify the pages, presenting them along with their respective titles, on the list of bookmarks or favorites, in the history of webpages visited and recent browsing, and each time must refer to the webpages. (Source: Wikipedia)
In the same way as the start pages, the favicon must also insert the ULMA symbol. To introduce the symbol on the website, we will follow these steps:
| Download the Favicon. Download
| Save the icon in one of the website folders.
| Copy the code that appears below on the homepage at some point between the <head> </head> labels
<link rel=”shortcut icon” type=”image/x-icon” href=”insert the path where we saved the image” />
As an example, we show the corresponding HTML code for the ULMA Packaging webpage:
<head>
<link rel=”shortcut icon” type=”image/x-icon”
href=”http://www.ulmapackaging.com/favicon.ico” />
</head>
As a result, you should see the following image:
| Recommendations for homepages
It is important and recommended that each webpage provides a title and description that may be read by the search engines. Specifically, we recommend that each Company’s homepage has these options configured, which are translated on meta labels in the HTML code of the webpage. These labels are not visible to webpage visitors, but are visible to search engines. In this way, we are helping search engines properly link to our pages. We are recommending this especially for the different Companies’ homepages, but should be extended to each webpage that forms part of our sites: each webpage should have its own title and description. If it is not possible to provide this information from the content manager that we offer, we recommend that the Company in question contact the department or business that manages their website.
If we take the ULMA Handling Systems as an example, we have to look at the HTML code of the homepage, where it specifies:
| Webpage title.
In this case, the Company has decided to include a phrase with key words in the title: “Logistical solutions for distribution and automatic manufacturing.” It is a recommended option to improve the page visibility:
<title>ULMA Handling Systems – Logistical solutions for distribution and automatic manufacturing </title>
| Webpage description
<meta name=”description” content=”Total Engineering for Material Handling Systems. Logistical solutions specialized for Distribution and Automatic Manufacturing.” />
Both labels may be seen in the webpage HTML code:
This information is important because it is going to help search engines better classify our webpages and also because it is information that is very visible in search results. If, for example, we search for “ULMA Handling” on Google , the first result is, logically, the Company’s webpage. Specifically, we see the title and page description in the search results. Therefore, choosing a good title and a good description for our pages helps to improve their visibility to search engines and users:
It is also very important that the paths of our pages are legible, not so much to users but more for search engines. The address is a very important element when search engines link to our pages, along with their title and description. Along the lines of the previous example, the web address is:
http://www.ulmapackaging.com/maquinas-de-envasado/termosellado/scorpius-600
This web address is perfectly legible and includes keywords. To get friendly, legible web addresses, it is helpful to contact the department or company that manages our webpage.
At the level of usability, some basic, but important, recommendations may be:
| The Company logo must be clickable and should always lead to the homepage, in the language that the user has chosen if it is a multi-lingual site.
| The options to change the language should always be present and easily accessible. It is recommended that they are in the upper right corner.
| When the user changes webpage language, they should be re-directed to the translated version of the page they are looking at, never to the homepage in the selected language.
| The greatest degree possible, the main menu should not offer too many options (7 options at the first level is generally considered to be the limit), in order to not confuse the user.
| Browsing within the site may be improved by providing the user with a “site map” telling them where they are at all times and how they can quickly go back. As an example, we will show the ULMA Packaging website where the site map tells the user where they are: “You are here: Start → Packaging Machinery → Thermo-sealed → SCORPIUS 600″
| Lastly, the webpage design must be coherent. They same colors, fonts, desktop publishing, etc. must be used on all pages that make up the website.
It is also recommended that the links to the profiles on the social networks of the Company or delegation appear on the heading of the homepage, through icons that easily identify the different social networks. As an example, we will show the webpage of ULMA Construcción, in which the links to their profiles appear on social networks (Scribd, YouTube and Linkedin) under the header image:
