This is the website of La Rosa restaurant, a newly opened restaurant in County Limerick, IRELAND. The website will serve as a vital online hub for new and returning customers to gain information about the new restaurant, and for local customers to consider it as a prominent option for eating out.
The main aim of this project is to construct an aesthetic, easily-navigable, responsive and modern website which greatly helps the marketing potential of the newly opened restaurant. It will be constructed using HTML & CSS web coding methods.
The main goal for the business owner is to have this website serve as an online hub of information for prospective new customers, to engage the new customers and provide all the necessary information such as opening hours & business location, typical daily menus served, and easy to find contact methods. It also serves as a reminder for returning customers, who can check any altered opening hours or more importantly, what foods are on the menu on a particular day.
- The user can easily find all the necessary information that one would expect when viewing a restaurant website.
- The user can easily find the contact methods if they need to ask business about extra information
- The returning user can quickly access the menu section of the site to view what particular foods are available on a given day.
- The returning user can view information about the owners and history of the business if they are satisfied previous customers and take a keen interest in this.
- I would like to use this website as a marketing tool to spread as much information as possible about my new business.
- I would like to be able to change any information as necessary, such as updating the menu choices of a particular day.
- I wish for this website to be an easy to use point of contact between me and my current and/or potential customers.
- I would like visit this site and easily find all necessary information relating to food choices on menus.
- I would like to easily find the contact details and opening hours of the restaurant.
- I would like to efficiently engage with the business owners if I have any futher questions or requests.
- I would like to return to the website to check on any changed or recently added new menu items.
- I would like to browse the site and see if there is any new information such as special offers or discounts for special occasions (Valentines Day etc).
- I would like to use the contact form to book a table or check availability of certain types of foods.
The following image shows a wireframe of each of the 4 pages of the site. These wireframes were created using Balsamiq Wireframes.
In terms of general structure throughout the website, the common elements across all 4 pages are the Header and Footer sections
- The Header - This section will appear at the top of all pages and contains a Logo which stacks to the left, and the navigation menu which is positioned on the right. Both logo and menu will respond accordingly to differing screen sizes. The navigation menu will display which page is currently selected on the site, giving the user good feedback as to their whereabouts.
- The Footer - This section appears on the bottom of all pages and will contain some copyright information and a date specifying how recently the site has been updated, again giving the user good feedback that this site is actively maintained.
- Banner Image - This section replaces the hero image on the homepage and therefore appears on just 3 pages. It will give the user an extra visual clue of the page content and will appear just below the main page text heading of each page.
This is the landing page of the site which is what the user first sees on loading, and therefore needs to be visually appealing to gain the users attention. This page is comprised of the following elements:
- Hero Image - This section spans the full page width and will have relevant image content to give the user a nice first impression of the restaurant. It will have a minimally invasive animation added to attract more attention. Some informative text will be overlayed.
- Welcome Text - This section lies underneath the hero image and will be a short description of the restaurant.
- Call-to-action Boxes - This is the third and final section of content that is unique to the homepage. A trio of boxes with related image content and a suitable link to each section of the site (About Us, Menu, Contact Us). This will enhance the user experience by showing them clearly what other content areas are available on the website, and giving them another option to browse rather than just using the main navigation menu.
This is the second page of the website and serves as a description of the owners and history of the restaurant. 2 medium sized images showing the owner and the premises will be placed alongside the relevant description text. This gives the user a good feel for what the business is all about by showing the point of contact (the owner), and displaying the person(s) behind the company.
This page will display a typical daily menu of food on offer at the restaurant. It is important to be visually pleasing and readable by the user, and comprehensive in its display of food choices. The sections will be divided under the following headings:
- Breakfast
- Lunch
- Dinner
- Desserts
This page content has a lot of scrolling so a "Back to Top" button is needed to scroll back to top of page.
This page clearly displays the contact details of the restaurant and also a contact form should the user wish to submit any queries in that manner.
This page appears only after the user has submitted a request using the contact form, and gives the user good visual feedback that the form has submitted. A link is present to enable the user to navigate back to the home page.
This page is used to catch any errors caused by the user entering a URL that does not exist on the website.
The following is a list of the various technologies employed to build this project
- HTML5 - Hypertext markup language used to give the website its overall structure and semantic value.
- CSS3 - Cascading Style Sheets used to apply consistent styles across all sections of the application.
- Google Fonts - Font is embedded into the website by way of importing the correct google font link into the linked CSS file.
- Font Awesome - Fontawesome toolkit imported into HTML files and its icons used to show social media links.
- Git, Github & Gitpod - Used to continuously develop and deploy the incremental versions of the application.
- Balsamiq Wireframes - Downloadable software to create the wireframe mockups.
- GIMP - GNU Image Manipulation Program, used to resize, crop & optimize the image content for embedding on the website.
I have tested this website across the 3 main web browsers used today, Google Chrome, Microsoft Edge & Mozilla Firefox. The site loaded consistently across all 3 and no discrepancies were detected.
I tested the site across differing devices, such as the Nokia 4.2 smartphone with Android 11, Lenovo Ideapad 3 laptop with different browsers on Windows 11, and on a Dell Studio laptop with different browsers on a Linux Mint operating system. No issues were reported between these devices.
During development of this application, I regularly tested the responsiveness of the site using Google Chromes Developer tools. In my CSS media query rules, I used 3 separate break points to design the site for different screen sizes.
- 800px width and below (medium screen size)
- 600px width and below (small screen size)
- 400px width and below (ultra small screen size)*
*Originally I had intended to use just the first 2 screen size breakpoints, however the main menu was not appearing as required using the 600px breakpoint so I added a smaller 400px rule.
The header of the site, comprising of logo and navigation bar, spans the full width of the page on higher screen sizes above 800px, however once the viewport reduces to below this width, the menu stacks underneath the logo, with the necessary padding and margins adjusted so it looks well on even smaller viewports below 600 and 400px widths.
The footer of the website is a very simple feature with a text paragraph only and this responds well to various screen sizes, the text simply moving onto multiple lines on the smaller viewports.
The banner images which appear on all pages except for the homepage, resize naturally on different screen sizes due to a width of 100% being applied to the image. However, I felt that on smaller screen sizes this squashed the image too much, and made it far too small to view. Thus, on the smaller viewports I made sure this banner image had a minimum height and also had the "object fit" property so that it scaled without any skewing or distortion of the original image.
The hero image on the homepage resizes automatically for smaller viewports, the caption text and padding that is overlayed also resizes due to reduced font size and padding.
The introductory text section of homepage (image below, left) scales nicely to smaller screen widths as it is just centered text with paddings and margins adjusted accordingly. The Call To Action section of the homepage (image below, right) originates as a panel with 3 columns showing images and links, but on less than 800px screen widths, this changes to a single column with all 3 boxes stacked vertically.
 |
 |
The about us page content is 2 columns of 2 content boxes with alternating blocks of text and image on full size screen sizes, but on 800px and below the content stacks on top of each other into one column, with padding and margin adjustments to suit.
All content on these pages is positioned in one central column so only margin needed to be adjusted for smaller screen sizes. In the contact page, the form div needed its percentage width to be reduced accordingly. Also on the contact page, the social media icons and the submit/reset buttons stack underneath each other if the site is viewed on very small viewport sizes.
All user stories and journeys passed successfully as all required content was available for both first-time and returning users to the site. The navigation was clearly accessible on both desktop and mobile screen sizes, and all information was presented on clearly legible texts with contrasting backgrounds. Graphic elements, while enhancing the look of the site did not detract from the user experience or distract the user while browsing.
The one use case that needed a little extra testing was the contact form on the Contact page. The user enters the required details in the form, and if any of the fields were blank, the HTML5 validations would kick in as pictured below:
Once all details were entered and the form submitted, the user is directed successfully to the Thank You page.
The HTML of the website was tested using the validator at [https://validator.w3.org/]. The following bugs were discovered:
- Duplicate ID tags in Homepage "top-image" and "link-panel".
- Trailing closing anchor tags which were leftover from deleting a previous anchor tag in development.
- Duplicate ACTION attribute in the contact form html code, code was originally ACTION="POST" when it should have been METHOD="POST".
All of these errors were corrected and now the entire sites pages passes this validator.
The CSS was tested using the validator at [https://jigsaw.w3.org/css-validator/] and no errors were reported.
I tested the website performance using Lighthouse in Google Chrome Developer Tools, and was satisfied with the results, varying from 95 to 100%. Results are seen below:
During development I wanted to use only 2 CSS breakpoints using media queries at 800 and 600px sizes. However the main menu was not rendering properly on some screen sizes below 600px. One method to rectify this was to further reduce padding and text size, but I found doing this would make the link text extremely small on screen sizes on the lower end of the 600px breakpoint. Thus, I introduced an "ultra small" breakpoint for screen sizes 400px and below. The error in question is shown in following image:
This was rectified using the smaller breakpoint and the menu now displays properly on all viewports.
During development of the project, I began to consider a couple of methods on how to improve this application in the future and also perhaps use these methods in other future projects:
-
Use "Burger" style menu for mobile screen sizes. This would take away the need to style the menu links individually for each screen size, thus the solution would be one burger style menu for all sizes under 800px width.
-
Use Flexbox or Grid for site structure. Throughout this application I positioned elements using floats and percentage widths, with margins and paddings in rem units. While I feel I achieved the desired results, a quick research of using flexbox and grid position would have cut my development time and is certainly worth considering for future projects, depending on project size and scope.
-
Ideally the "Back to Top" button on the Menu page should only appear after the user has scrolled down the page some ways, and not always be visible as it is currently. From my research this would be solved using a lot of complex CSS which I felt was outside my timeframe, thus a solution using JavaScript would be an ideal fix in future.
-
In the footer, there is text showing when the website was last updated, this is just hardcoded at the moment, but in a future version this website could be connected to a backend with programming scripts to auto-populate this piece of text with the current time and date.
- I accessed the Code Institute template at [https://github.com/Code-Institute-Org/gitpod-full-template] and clicked on the "Use This Template" button.
- The next step was to give my repository a suitable name on Github, and create it thereafter.
- On the following page I clicked on the green Gitpod button, which is accessible having installed the Gitpod extension to Google Chrome browser.
- This created my development environment on Gitpod where I began to push the incremental changes to the live hosted site.
- To create the hosted site at Github Pages, I navigated to the Github repo settings tab and found the Github pages dedicated section.
- From there in the Source dropdown menu I clicked on "main", and then "Save", from which I was supplied a live link that would be ready in a few minutes. Live link is available here [https://kevinjohnkiely.github.io/la-rosa-restaurant-project-1/]
- Navigate to the Github repo at [https://github.com/kevinjohnkiely/la-rosa-restaurant-project-1]
- Click on the Code button, then Download ZIP.
- Extract the zip file to your local machine.
- Run the index.html file in any browser of your choice.
- The code for the hero image with animation on the homepage was taken and modified from the Love Running walkthrough project offered by Code Institute. Some small modifications were made to this code to suit my project.
- The code for the social icons section on the Contact Us page was also taken from the aforementioned Love Running walkthrough project, with some modifications to suit.
- The code for the contact form on the Contact Us page was taken and modified to suit from W3 Schools at: [https://www.w3schools.com/howto/howto_css_contact_form.asp]
All other HTML and CSS code was composed by myself.
All image content for the project was sourced from Pexels. The logo came from the ICONPACKS website Link
Just one font was used throughout the website, with varying weight for headings and body text. Raleway Font
The colours used throughout the website are (and their Hexadecimal code):
- Dark Pink #75003A
- Medium Pink #FF007F
- Light Pink #FF8AC4
- Dark Green #00705D
- Medium Green #008873
- Dark Grey (body text) #3a3a3a
The social media icons on the contact page were sourced from Font Awesome [https://fontawesome.com/]
All text content across the application was composed by myself from scratch.