This is my milestone project which is a web page for renting a cottage in the Yorkshire dales, you can check it out here: https://bandyp.github.io/cottage/
The original website is here http://holidayhouseyorkshire.com/. I felt I could do a better job of it. It was both a way to practise and to learn about the tech out there to help build websites; as well as building a functional page. While not intended for comercial use, It might be used as a stepping stone to similar projects.
The design is simple with a few slight pieces of CSS magic and hover effects. It is a mobile first page, aimed at enticing user to book the cottage for a holiday.
My idea was to make it familiar for users as it is similar to an Air BNB page, yet I have put my own design into it. The page is designed to allow people to book easily while also selling the experience of cottage life, the town and the surrounding areas. I wanted to include a number of pictures to help the user see the cottage.
Each page in itself is not large, so it is easy to navigate a single page. Also, navigating from page to page is straight forward. The mobile first design is very simple. As the screen gets larger, photos and booking section appear. Both these are accessible via the navigation bar when in mobile view.
I used balsamiq to do up my very first wire frame. There is no mobile wire frame, however I did put it in the notes to the side.
As I started to develope the page a made some changes to this, mainly changing the carousel to thumbnails in the gallery page. This made the pages more consistant.
https://balsamiq.cloud/skog808/pjinvz2/r9648
- HTML
- CSS
- Balsamiq - used for wire frame
- Bootstrap
- booking modal
- review section
- alert box
- thumbnails
- Font Awesome - all icons
- Hover.css - for Nav bar items and images
Index page - The first page the user sees. The logo image is the biggest selling point. Here it is the master bedroom. I porposefully did not uses the outside image as this isn't a great selling point, the cottage looks far better inside to what it might appear outside.
The nav bar at the top is straight forward for the user, bulging slightly as the user hovers over them. I've used different terminolgy from what the user might be expecting. This is an attempt to get the user to click further.
The image in the heading page is of a blue sky, to give the ideallic lifestyle image.
The middle section gives the essentials for a user looking for accomodation. Once they are happy with this they will delve further into the page. Checking out positive reviews and where it is on the map.
On the left hand side are the images so they can see at a quick glance the different rooms, these pop out as the user hovers over them. On the right is a quick form to check availbility for the dates the user is looking to book. No commitment needed, just a quick alert stating if the cottage is already booked. In future versions this would be linked to a booking database or the owner gets a email to check. The call to action comes in the next button, by pressing this, a modal appears for the user to fill out to book. These details would save on a booking database and the owner alerted. For the moment though this button does nothing.
The red bubble on the far right is there to make an obvious selling point, it is designed to be the same colour as the booking button.
In the footer a link gives an opportunity for the user to email the owner directly for more information.
As the user navigates to the other pages the layout remains the same and familiar. The main information on the amenities comes up in the "Good Life". This is what the typical user would look for next in booking a property.
On the local guide page the images change to represent the local attractions. There is a quick passage to read for those who would like to understand what a typical day in the Dales is like and what the area offers. All with handy stylish links to make any bookings or to just learn more about the area. This is intended to make the user imagine they are in the Dales, hiking through the country side, have a pint in the pub and coming home to a warm cosy cottage.
The 'great views' page has all the images in one place. This is handy in the mobile view as they do not show otherwise. This means the loading time on the other pages is quicker on mobile.
The 'Book Now' in the nav bar also brings up the booking modal. The font is bolder than the rest to make it stand out, as it is the main call to action in the mobile view.
This website is hosted by GitHub pages. The GitHub link is here: https://github.com/bandyp/cottage . In the initial stages alot of work went into the content and a large physical part of the index page was completed then pushed onto GitHub. After that there uploads were far more frequent.
Heavy use of dev tools on Chrome. Alot of issues with padding and margins needed ironing out. Adding in the bootstrap modal form and review section were straight forward. The Nav bar caused some problems when on mobile size screen and then on tablet. I wanted it to stay at the top of the screen, or the alignment just become unstuck. I had to do a duplicate code which dissapears when not needed. Otherwise the heading would sit above the bar when scrolling down. Tested each page and button for functionality. The footer caused some issues on very large screens, but ironed that out.
Some code was copied and pasted with some changes by me:
- Navigation bar/logo - Code institute, from resume project.
- Photos - My wife, Jess, took the photos of the cottage. Other photos were from the relative business' websites and tourist boards
- Icons - FA
- Content - from original page - Terry Brennan. I wrote the guides about the town and the area.
- Reviews from emails suppied by owner Fiona Brennan
- Modal/buttons/reviews - Bootstrap copy and pasted with some alterations to CSS by myself
- Map - google maps
- Hover effects - hover.css