Everything you can imagine in a website can be real
I redid one of the best rated Google Sites website on the web
Embedded Files
Redesigning the website for Brugge's historical Flanders Hotel
Redesigning the website for Brugge's historical Flanders Hotel
After creating my own website on the Google Sites platform, I was curious to know what others have come up with. So, I set about looking for some examples.
Finding 28 examples of Google Sites websites
Finding 28 examples of Google Sites websites
I found the above blog on sitebuilderreport.com, where I came across the "Flanders Hotel, Bruges" website. They are spelling it in small-case for some reason. Anywho, having worked on hospitality websites at the beginning of my career, it piqued my interest a bit. So, I decided to try and create a better version of their homepage design.
Here's how the Flanders Hotel homepage looks like on the live website👇🏻
Desktop
Mobile
As you can see, the breakup of sections is not very smooth and the cumulative layout shift is on the higher side. The elements are misaligned and look dated. From an SEO perspective the webpage lacks valuable information. The footer menu design is simply terrible to say the least. Here's what I came up with👇🏻
Landing with Panache
Landing with Panache
Landing
Rooms
Location
The new homepage is structured on the principle of user discovery and tells a story about the hotel and the city of Brugge. I have added content laced with SEO keywords and included possibilities for internal linking within the content. The map section represents a static image linked to Google Maps location of the flanders hotel bruges.
Adding a Vimeo embed
Adding a Vimeo embed
The discover Brugge section has come out really nice, with a Vimeo video embed playing in loop, without any sound. Here's the code if you would like to embed a Vimeo video in a similar, responsive format.
<div style="padding:56.25% 0 0 0;position:relative;"><iframe id="projectplayer" src="https://player.vimeo.com/video/[Your Video ID]?api=1&background=1&mute=0&loop=0&quality=360p"h=362bc0b8ad&color=D0D9AD&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Do note that you will need a plus subscription or higher to hide the frame and video controls.
Updating the footer menu design
Updating the footer menu design
Finally, I worked on the footer menu to include the address and privacy policy links. I also created custom social media icons to fit within the responsive setup of Google Sites. Now the footer looks much better and the icons reflow effortlessly on desktop and mobile.
Are you small hotel or restaurant looking for a starter website? Let's connect!
Report abuse