THE AWARD-WINNING WEB DEVELOPMENT OF THE HOTEL EL PALACE BARCELONA 5*GL

This project consisted in the redesign of the Hotel El Palace Barcelona website, adapting it to the latest usability standards and improving especially the loading speeds and its visualization on mobile devices. Hotel El Palace Hotel El Palace asked us to redesign their website with these three main objectives:

• Branding: Renew the brand image, reflecting the current identity.

• UX and usability: To improve the user experience, the proposal should be focused on a User-Centric & Mobile-First navigation model.

• Web optimization: Fast loading times and good WPO scores.

The two main technological challenges proposed to us were the following:

• Improve the loading time to be less than 2 seconds on both mobile and desktop.

• Improve the WPO score, obtaining values between 90% and 100%.

The tool we used for this development project was Lighthouse, which seeks to improve the quality of the page and has audits of performance, accessibility, progressive web apps, SEO and more. Thus, we decided to work on the optimization in two stages: a first one of layout and a second one of programming and connection with our own development manager Jupiter CMS.

The first thing we did was to run the Google Lighthouse audit to perform the analysis of the website. Then, with the report we started to work point by point on the proposed recommendations until we got the desired score. The result was that we had a lot of work to do in the Performance and Progressive Web Applications sections. However, the results for Accessibility, Best Practices and SEO were very satisfactory from the start.

We got to work to solve the performance issues, it was about eliminating the resources that blocked the loading of the page. To do this, we executed a preload of the main styles of the web, as they are a type of file that are usually very heavy and take a long time to load. We did the same for the fonts, perform a preload and also set the "font-display" attribute to reduce the time of the loading block. And for the rest of the style files and javascripts we performed an asynchronous loading (defer loading), that is, let the files load in parallel with the HTML parsing to not slow down its loading.

Once these points were solved, the next step was to optimize the images well. The main changes were to start using webp formats and put a width and height in line, as this avoids layout changes when loading the page. We also used the Lazy Load library which allowed us to save loading time and improve the user experience. Finally, we set an image size suitable for the main screen resolutions.

Another key point that should always be taken into account is to check the external plugins of the website. These lower the score a lot because they require external requests. For this reason, we recommend using those that are really essential and will favor direct sales.

At Emexs we always aspire to excellence in all our projects, and the fact of being recognized through such prestigious awards as the Awwwards seemed to reward the effort we put in every step of the process. We received the nomination for this project, with design by Quim Fonoll and content by Julia Basquiat. However, that was not all. This project was the winner for Best Web at the second edition of the Beyond Luxury Awards. An honor that, without a doubt, we will always carry with us, and it feeds our desire to improve ourselves and to continue working.

We have managed to develop an intuitive website, easy to use for the user and in line with the corporate image of the hotel. In addition, the proposed challenges regarding load times and WPO scores have been more than achieved, taking into account the complexity of the design and the required animations.

And now? We continue to measure and analyze the results.