Love Light Photography - Project Portfolio 1 - HTML & CSS

Love light photography is a small profesional photography business that offers a wide range of photography services. This site targets the average individual who is looking to capture their event with high quality photography, in a professional but friendly and approachable manner, with a means to see samples of work done and contact to contact the business directly.

You can view the live site here - Love Light Photography

Contents

• Objective
• User Experience
  • Target Audience
  • User Stories
  • Site Aims
  • Design Wireframes
  • Site Structure
  • Design Choices
  • Colour Scheme
  • Typography
• Features
  • Navigation Menu
  • Home Page
  • About Page
  • Packages Page
  • Gallery Page
  • Contact Page
  • Thank You Page
  • Footer
• Future Features
• Technologies Used
• Testing
  • Code Validation
  • Lighthouse Testing
  • Responsive Testing
  • Accessibility Testing
  • Manual Testing
  • Bugs Fixed
• Deployment
• Credits
• Acknowledgements

Objective

The aim of this project is to deliver a professionaly developed website for users to access a friendly but professional photography service.

Back to top

User Experience (UX)

Target Audience

• Users that are looking for a professional but inviting photography service to cover their event or celebration.
• Users that are looking for a professional photographer to cover their business event

User Stories

• A user should be able to determine the site's purpose immediately
• A user should be able to easily and intuitively navigate the site
• A user should be able to identify the content of each page easily
• A user should feel comfortable contacting the business for more information or to book an event

Site Aims

• To provide the user with all the information needed to contact the business to book an event/photographer
• To offer a clear method to contact the business
• To sell the business to the user in a warm, friendly and inviting manner
• To provide information on the photographer
• To supply a visual portfolio of work done
• To deliver a starting guide to the cost of services

Design Wireframes

The design and structure for this website was created in Adobe XD. The designs produced were low fidelity wireframes for desktop versions only. The final designs and structure differ from the wireframes due to developments during the construction of the website.

Site Structure

Love Light Photography consists of 5 page website with 4 pages that the user can navigate between via the navigation bar. The Home page is the default loading page. The Logo is centered and is also linked to the Home Page. On the left hand site of the logo are two navigation links of Home and Packages. And on the right side of the logo are another two navigation links of Gallery and Contact.

Design Choices

Colour Scheme

The final colour scheme chosen was a dark teal with an off white text, as well as an off white and light grey to segment pages. Two lighter teal colours were used on the navigation bar to highlight the active page and for the hover effect. This colour scheme is very on trend with the clean and modern look but still has that hint of warmth by sticking to the warmer tones of teal, greys and whites.

Typography

There were two types of fonts chosen for this website. 'EB Garamond' was used for the body of the text and 'Cormorant Garamond' for the headings, which is a slightly different version Garamond than the body text to provide emphasis. Both fonts fall back to 'sans-serif'. The Garamond fonts have a slightly luxurious feel to them and the serif detail, provides a small bit of complexity to the design but with making use of letter spacing and line heights to still keep it in line with the clean look.

Back to top

Features

Love Light Phtography is designed and structured like a typical website, making it very natural and intuitive to use to entice the user to explore further.

Each page, except the Home Page, has a clear heading when landing on the page and short paragraph introducing the content. The language, colour and design used is intended to be friendly and easy to understand.

Navigation

• The navigation menu is featured at the top of the page and contains the links to main content.

• The logo is centered in the navigation bar and is clickable and links back to the homepage.

• There are three variations of the navigation bar for different screen sizes, and each keep the same colour and design styles with only the structure changing to keep the user experience as smooth as possible.

Home Page

• The Home Page is the landing page of the website and the first part that the user will see. It is designed to be welcoming and the purpose of the website easily determined.

• There is a large hero image chosen for its' style, colour scheme and tone to match the website itself and it's immediately visible. Overlayed on the hero image is site name and a catchy slogan.

• There is a bit of content peeking just above the fold to show users that there is more information on the page. This is a quote and it's designed to give off a particular feel of the website to the user; essentially the ethos of by which the business stands by.

• There is a section "Meet the Photographer" which is a succint About Me section intended to put the user at ease, keep the welcoming vibe whilst still imparting useful information and engaging with the user.

• The last seection on the Home Page is a Stories section, which provides three different testimonials.

• The aim of each of these sections of the Home Page is to create a feeling of welcoming and friendliness and to encourage the user to explore the website in the hopes of hitting that Contact Page.

• Each section is fully responsive, with the multiple column content naturally falling into single column content.

Packages Page

• The packages page is as described in its navigation link. It lists the available services in a clear manner.

• There is a list of the available packages, using clear alternate colour design elements to distinguish the different packages, as well as headings, images and text.

• It is fully responsive and each package section contents naturally fall into a single column, with the same clear colour design elements to distinguish each package.

• This page is intended to impart the idea that this service is welcoming, friendly and the perfect fit for what the user is looking for but that the business can be approached for more information related to their particular event/occasion.

Gallery Page

• The Gallery page provides the user with some sample photography from the photographer. It gives a mix of different events and occasions in one large gallery.

• The gallery is easy to use, with a hover function on the images drawing the users eye to the cursor.

• The Gallery page is fully responsive and as the screen reduces in size the columns of images reduce until the images are full width in mobile devices.

Contact Page

• The Contact page is should be where the user ends up. As there is no booking system or online store to purchase a package the aim is for them to reach out to the business.

• The contact form is modelled off the usual contact form layout, with four input fields; First Name, Last Name, Email Address and Your Message.

• The contact form cannot be submitted unless the fields are filled correctly using the required attribute.

• The form also uses a GET function to link to a Thank You page to mimic the effect of actually submitting the form . There is no actual information submitted when the user completes the form and the thank you page is purely to show how the user will interact with the form.

• Beside the contact form there are practical contact details such as a dummy phone number and email. The email has a mailto link which opens to the users default mail software on their device, againing using a dummy email for the purpose of user experience.

• There is also a google map iframe beneath the Location section.

• The page is fully responsive with the sections stacking upon each other as the screen size is reduced, keeping the same design elements which distinguish between the different sections.

Thank You Page

• The Thank You page cannot be accessed by the user from any links on the website. It can only be accessed by submitting the contact form on the Contact page which uses a GET function to retrieve the page to imitate the contact form submission.

• The style and design of the website is consistent, with the navigation bar on top and footer on the bottom so as to allow the user to navigate back to the main website.

Footer

• The Footer contains the social media links.

• For better UX design, each of the social media links open in a new tab.

• The Facebook, Instagram and Youtube links are purely for the educational purposes of the website and only navigate to the home page of each of the sites.

• It also contains an email link which uses a mailto function to open the devices preferred email software. The email used is just a dummy email to show how the user interacts with the link.

Back to top

Future Features

• The Stories section on the Home Page could be made a bit more interactive with more stories that could be rotated through with only 3 stories showing at a time on the homepage.

• The gallery can be expanded whereby a lightbox function can be implemented to achieve a greate user experience and interactivity with the images.

• The gallery could also be categorised by event/occasion for better UX, to allow the user to navigate directly to photos of interest to them.

• A Log In could be added whereby clients would have access to the photos of their event in a private gallery, will will provide a swifter service for the business, cutting out another physical meeting with clients to choose their photos.

• The mobile navigation menu could be changed into a burger menu.

• An eccomerce online shop could be added for the sale of stock prints.

Technologies Used

• HTML5 - Delivers the structure and content for the website.
• CSS3 - Provides the styling for the website.
• Adobe XD - Used to create wireframes for the website
• Adobe Illustrator - Used to create the Logo and social media assets for the website.
• Adobe Photoshop - used to resize images and export them as progressive JPEG files.
• Adobe Color - Used to test the contrast and a blind safe colour check for the colour palette used.
• Adobe Lightroom - Used to optimise and resize images for screen.
• Tiny PNG - Used to further compress optimised images.
• Gitpod - Used to develop the website.
• GitBash - Terminal used to push changes to the GitHub repository.
• Github - Used to host and deploy the website.

Back to top

Testing

Code Validation

Love Light Photography has been validated via W3C HTML Validator and the W3C CSS Validator. There were 8 minor errors that came up for all of the pages. This was immediately corrected and documented down below in Bugs Fixed.

Lighthouse Testing

The website was also put through Lighthouse testing via Chrome Devtools which tests a site under 4 different headings; Performance, Accessibility, Best Practices and SEO and it tests it under mobile and desktop criteria.

Accessibility Testing

A11y was used to check the colour contrast on the website for accessibility purposes which it passed.

Adobe Color was also used to test that the colour scheme was accessible for those with different types of blindness which it also succeded in doing.

Responsive Testing

Responsiveness was tested via a few different mediums manually, including Chrome Devtools, The Viewport Resizer chrome extension and The Responsive Design Checker website.

Manual Testing

In addition to the automated process above, manual testing was carried out on the site as well.

• Naviagtion Menu

  • Verified that all the links link to the appropriate page with no broken links on all pages.
  • Verified that the logo when clicked links back to the Home Page.
  • Verified that the logo image has an alt text and fallback image for non browser support of the svg file.
  • Verified that the hover effects are consistent on all links.
  • Verified that the active page is highlighted.
  • Verified that the navigation bar is full responsive.

• Home Page

  • Verified that the Hero image is not pixelated and is fully responsive.
  • Verified that all images on the home page are optimised and have alt functions.
  • Verified that all the elements are fully responsive

• Packages Page

  • Verified that all the images are optimised and have alt texts.
  • Verified that all the elements are fully responsive.

• Gallery Page

  • Verfied all the images are optimised and have alt texts.
  • Verified that all elements are fully responsive.

• Contact Page

  • Verified that contact form cannot be submitted without the required information (First Name, Last Name and Email Address)
  • Verified that once the information is submitted via contact form, that the GET function works correctly and retrieves the thank you page.
  • Verified that the mailto function works correctly on the email link.
  • Verified that the page is fully responsive.

• Thank You Page

  • Verified that the thank you page is linked correctly to the contact form.
  • Verified that the Thank You Page is fully responsive.

• Footer

  • Verrified that the email asset links properly with the mailto function.
  • Verified that the social media links are all linked properly to the releveant social media home pages.
  • Verified that all the social media links open in a new tab.

• Browser Testing

  • Love Light Photography has been manually tested in Google Chrome, Microsoft Edge, Mozilla Firefox and Safari on both desktop and mobile.
  • Verified that all images worked correctly
  • Verified that design and structure was consistent across all browsers.
  • Verfied responsiveness across all browsers.

Bugs Fixed

HTML Validation

The following error was presented once the website was placed through W3C HTML Validator.

It said that the width and height attributes in the footer images produced " Expected a digit but saw p instead". Once I removed the px from the width and height attributes, it cleared that error up.

CSS Validation

The following error cropped up when the site was initially put through CSS validation.

While no problems were indicated in the CSS file in GitPod, it did show up in validation. To fix this error, in the font-family declaration, I changed all the double quote around the font family to single quotes and the error cleared.

Lighthouse Testing

The first error that cropped up with lighthouse testing with regards Best Practices and thus affecting also the Performance section. This error was across all pages and had to do with external links and security.

It was recommended to add the rel=noopener to any external links, which cleared the error.

As well as this, the initial scores were fluctuating between the low greens to the orange on a few of the pages. Upon further inspection, these were on the pages which held a large quantity of images, mainly the Gallery Page and Packages Page. Both these results were in the mobile and desktop testing.

The errors shown were:

1. Serve images in next-gen formats
2. Properly sized images
3. Serve static assets with an efficient cache policy
4. Image elements do not have specific width and height

• Problem 1 -Serve images in next-gen formats

  • Serving images in next-gen file formats like webp would improve the score however upon research, it was best to leave my images as JPEG files, as this is the best file format for colour, depth and clarity of photos which is extremely important for a photography business website. The images however were exported as progressive JPEG files to allow the browser to load a simple version of the image before loading the full resolution photo. A lot of next-gen file formats are also currently not supported by a lot of browsers.

• Problem 2 - Properly sized images

  • This problem was initially addressed by running the photos through lightroom and exporting them for screen and compressing them using Tiny.png. This was still not enough, however so they were brought into photoshop and were cropped to exact sizes, exported as progressive JPEG files and compressed again via tiny.png. This cleared the warning.

• Problem 3 - Serve static assets with an efficient cache policy

  • Caching is a problem that could not be solved as it's the host's issue, in this case Github pages controls the problem.

• Problem 4 - Image elements do not have specific width and height

  • This was fixed by adding width and height attributes to image tags and thus the warning was cleared.

SVG Logo File

A logo for the site was created using Adobe Illustrator and it was exported as a SVG file, done so for the repsonsive ability of the svg file and the sharpness and quality of the image itself.

However there were issues with it showing up with a size of 0px in browsers.

The fix was found here : (lokesh/lightbox2#552) and it corrected when an actual height and width was set to the img tag.

While this fixed the issue in Chrome and Mircrosoft Edge, it did not in Firefox.

Upon further study the width and height that was set to 100% had no point of reference and thus setting the height and width attribute in the html fixed the problem in firefox as the percentage widths in the CSS then had a point of reference.

Responsiveness

Chrome Devtools was initially used to test the responsiveness of the website. However it proved to be somewhat inconsistent with results despite no code being changed. Therefore another Chrome extension was used, Viewport Resizer and a website, Responsive Design Checker was used in conjunction with Chrome Devtools to make sure the website was fully responsive.

There were overflow issues that couldnt be determined easily once certain screen sizes were reached, particularly the mobile screen size. To help identify the overflow issues, the problem was googled and answer found in Stack Overflow and a piece of code was used to outline all the elements on a page, allowing the elements that didnt line up to be identified.

Back to top

Deployment

The website was deployed to GitHub pages via the following methods:

1. Navigate to the Settings tab in the GitHub repository for the project.
2. On the left hand side, scroll down to the pages tab.
3. Under the Source tab, choose the branch called Main and in the dropdown beside it select the folder called Root.
4. Click save.
5. The page automatically displays the deployed link at the top once save is clicked.
6. It can take up to 5 minutes to deploy.

Back to top

Credits

• Fonts were sourced from Google Fonts
• All images from the website were sourced from Pexels and Unsplash
• Images were compressed by Tiny Png
• Colour palette was created by coolors.co
• Flexbox system was learned via youtube video from LearnWebCode
• Flexbox Image grid from Kweku Adaboh
• CSS Grid code was learned via Traversy Media and CSS Tricks
• Code for CSS transform scale properties comes from Learn with Param
• Code for drawing a border inside a shape/image was from CodeLab
• Link to the quote by Destin Sparks
• Image optimisation was learned from Layout, Flywheel

Back to top

Acknowledgements

This site, Love Light Photography was designed and developed in conjunction with the Full Stack Software Developer Diploma course (eccommerce) at the Code Institute. I would like to thank my mentor, my cohort facilitator, the members of our cohort, the Slack community and Code Institute for all their support.

Back to top