Author: David O'Gara
This is the unaltered original version of this project, created for the Code Institute Full Stack Software Developer course.
Flat by the Cemetery is an interactive Front-End web application using HTML and CSS to present a portfolio website that showcases the visual work of an artist/illustrator.
Users of the site will be able to find information on the artist, see examples of their work, and get in touch via a contact form or social media links. The target audience of the website are people, like-minded to the author and potential clients or collaborators that may wish to learn more about the work or follow any future developments. The project goal for the site owner is to drive engagement and interest with the artist's work by providing a visual demonstration/overview of the work. An additional goal is to build and demonstrate skill regarding HTML and CSS based web design for the site author.
Flat by the Cemetery via Github Pages.
Github Repository.
Here is a PDF of the wireframes put together at the sites inception. Adobe photoshop was used to visually plan the sites look and layout using an iPhone Xs (375x812) and a Dell laptop (1920x1080) as reference for viewport size/ratio.
- The first thing a user will take notice of is the large background image that dominates the index page. This will immediately give the user an idea what the site is about and sets the tone stylistically for the content within.
- A short line of description 'Art and illustration by David C. O’Gara. Based in Derbyshire, UK" is in front of the image in varying positions dependent of screen size. This will let the user know the subject of the site if they weren't already aware. The container has a black background at half transparency to aid in readability and contrast against the page's background image.
As this is the only content that is featured exclusively on the landing/index page the user should have their attention drawn to the header, displaying the sites title and its navigation menu.
- The title for the site, 'Flat by the Cemetery' was chosen simply due to the fact the the sites author has lived for some years in an apartment building across from and old cemetery and had been using it already as an Instagram handle where much the artwork is already shared.
- The colour scheme follows on from this theme in direct homage to a poster of the Luci Fulci film 'House by the Cemetery' that was displayed in the apartment after moving in. This color scheme is black (#000000) for the background, white (#ffffff) for the text and red (#ff0000) for highlights such as headings and active links. A grey colour (#888888) was chosen for emphasis of subtitles and the gallery's additional navigation menu.
- Originally the red highlight used was a darker shade (#990000) out of personal preference but this was changed to aid in contrast and readability.
The font choice for the site is the serif font Palatino as this resembles the text of a paperback novel and fits within the sites themes of horror-fiction.
- The navigation bar sits below the sites h1 title in the header and displays in text the links for 'Home, Gallery, About and Contact'. Active and highlighted (hovered over) links will be displayed in red with the hovered-over links underlined while standard links are the sites default white with no extra adornment.
- The order of the links reflect the visual nature of the site, users are encouraged to explore further after their encounter with the 'Home' page and presumably intend to check out more of the work directly at the 'Gallery'. Then if interested in the work the 'About' page offers a place they can visit next to learn a little more about the artist. Finally in the interest of further interaction the user can submit a message to the artist directly using the 'Contact' page.
- The h1 title at the top of the page also acts as a link to the home page as I feel from a user perspective I expect website titles and headers to act in this way, always providing a clear return to the beginning if sense of navigation is lost.
- The footer sits at the bottom of every page in a fixed position and provides social media links for ease of access as this is often a user preferred mode of following work and communicating with individual creatives or small businesses and from a site-owner perspective this should drive engagement with social media accounts.
- The social links chosen were Instagram and YouTube and were illustrated using icons from font-awesome. These social links are aligned center. At the wireframe stage the social icons were intended to be fixed to the right but this proved to be visually less appealing.
- Underneath the social links is displayed a copyright reminder as users will be viewing images of an artists work. This is simply to discourage unorthorised use of the images. This is aligned center also for the same reasons as the social links.
- Gallery section consists of a main menu page in which users can select from an option of 4 gallery collections, each on their own page.
- For extra ease of navigation users are given a second navigation bar under the initial nav-bar that provides text links to the main gallery page and the four collection pages (This was later removed for smaller device screens).
- The links are illustrated using specially made thumbnail images that give a glimse of the artwork that will be inside each collection. Plain text giving the links a title such as 'Collection 01' sits on top of the thumbnails.
- This combination of both thumbnail images with text overlaid is to remove any ambiguity from a user perspective on where links will lead.
- Each collection page follows the same format as the main gallery page with links to four different image pages being illustrated by specially made thumbnails images hinting at the works content and plain text giving the links a description of 'image 01' etc.
- The final piece of the gallery section is the pages for each individual image, 16 in total.
- I chose to do this as individual pages to give the user an opportunity to look closely at the work and in a decent size depending on the screen used.
- The pages consist of the image/artwork, followed by the works title and a short line of description on the origin, idea or intended use of the artwork/design.
- Two of the pieces were later changed to videos to display another aspect of the author's work. The videos play on a loop automatically and allow a user to interact with the choice of turning the audio on/off due to videos playing with audio automically being considered bad practice.
- About section contains a paragraph which gives an overview of the artist and their work as well as links to Instagram, Youtube and Linkedin.
- The section is also decorated with the same image use as the index background, used here as an aside to the text.
- This page is intended to give the audience an introduction to the author and suggest ways in which they can interect or connect in addition to the on-site contact form.
- The 'Contact' page contains a form in which the user can get in touch with the artist.
- Form elements include text inputs for name, email and subject and a text field for message content.
- A submit button, styled in red follows.
- All fields except Subject will be required for submission.
- Upon completing the form and hitting submit, the form (for the time being) will make use of CodeInstitutes form dump link given in the lessons leading up to the first project. This will open a link in a new window confirming the form was successful.
- In the future the form should send the data given to the site's author via email message (this, however is currently out of the scope of this project and course learning stage).
- A custom 404 error page was created in the style of the rest of the site with the header and footers from the other pages.
- This provides the user with the navigation options to return to the start or another page without the error seeming too jarring or frustrating.
- A fix of the contact form to allow for fully functional email capabilities.
- A blog page/section would be a great fit for a site that follows the work of an artist/creative allowing for periodic updates of activity in greater detail than offered in social media posts.
- A shop for selling prints of artwork or related goods would also be ideal.
I tested all the navigation links on the deployed site to check they perform as expected.
- All links lead to expected location
- All external links open in new window (this includes form result)
- All links accessible by tab key
- Attempted to submit form without any input:
- Attempted to submit form without valid email input:
- Attempted to submit form without message text field input:
- Submitted form with all valid inputs:
- Result returned:
For the sake of responsivity the site was frequently tested against various screen sizes for appearance and to guide media query values. The sizes used at this stage are the default device sizes offered as part of Google Chrome's Dev Tools as well as the browser size provided by the Windows Laptop I use. This provided great variety for responsive testing, so I ensured the site looked acceptable on each of these dimensions.
| Device | Dimensions |
|---|---|
| iPhone SE | 375x667 |
| iPhone XR | 414x896 |
| iPhone 12 Pro | 390x844 |
| Pixel 5 | 393x851 |
| Samsung Galaxy S8+ | 360x740 |
| Samsung Galaxy S20 Ultra | 412x915 |
| iPad Air | 820x1180 |
| iPad Mini | 768x1024 |
| Surface Pro 7 | 912x1368 |
| Surface Duo | 540x720 |
| Galaxy Fold | 280x653 |
| Samsung Galaxy A51/71 | 412x914 |
| Nest Hub | 1024x600 |
| Nest Hub Max | 1280x800 |
| Windows laptop | 1920x1080 |
In testing the site over time there were many challenges that presented themselves, especially when testing across devices and viewport sizes. These provided opportunities to tweak various aspects of the code to ensure the site looks appropriate across platforms.
This included;
- The second navigation bar introduced in the gallery pages, while allowing for an even clearer version of the links otherwise presented as images, proved to take up valuable viewport space needed on small devices such as the Galaxy Fold, Galaxy S8+ or Huawei P30. The decision was made to remove the secondary nav-bar from display on screens of this size (below 375px width) and free up that space for page content.
- The two videos displayed in the gallery had been encoded with an anamorphic setting. This didn't appear to be an issue as the videos displayed in the intended aspect ratio on all the emulated viewports in Chrome's Dev Tools. However, upon testing with the Mac os via browserstack the videos appeared squashed into a square aspect ratio. The solution taken was simply to republish the videos with a fixed 16.9 aspect.
- I found the images unresponsive to screen size changes at one time and found that my css was targeting the pictue element. Changing the target to the img element fixed the issue.
.picture-frame picture{
width: 100%;
}
to
.picture-frame img{
width: 100%;
}
To make sure that the site looked good and responded properly across multiple different devices, browsers and operating systems I used the site Browserstack to live test multiple devices I wouldn't otherwise have access to. Here's a list of combinations that I confirmed the site looked and function properly on. Included is my own personal devices used to create the project.
| Device | OS | Viewport | Browser | Browserstack Screenshot |
|---|---|---|---|---|
| Dell Laptop | Windows 10 | 1920x1080 | Firefox, Chrome, Edge | N/A |
| iPhone Xs | ios16.5.1 | 375x812 | Firefox, Safari, Chrome, Edge | N/A |
| iPhone 14 | ios16.5 | 390x664 | Safari | bs-screen-01 |
| Galaxy S23 | An13.0 | 393x786 | Chrome | bs-screen-02 |
| Redmi Note | And12.0 | 390x873 | Chrome | bs-screen-03 |
| Pixel 6 Pro | An13.0 | 412x778 | Edge | bs-screen-04 |
| iPad 10th | ios16.0 | 393x786 | Safari | bs-screen-05 |
| Moto g71 | An11.0 | 412x797 | Chrome | bs-screen-06 |
| P30 | An9.0 | 360x657 | Chrome | bs-screen-07 |
| Mac | macOS Ventura | 1920x927 | Safari16.3 | bs-screen-08 |
In choosing which combinations of device, operating system and browser to test with I used information from Statcounter to assess which browsers devices and operating systems were most popular. This suggested I make sure to include Chrome as a browser, Samsung Android phones and Apple ios devices.
-
Market share stats for Device Vendor
-
Market Share stats for Browser
- Deployed website passed through official W3C Validator service for HTML link
- Attatched PDF displays screenshots for each page's test
- Deployed website passed through official W3C Validator service for CSS link
Used Google Chromes 'Lighthouse' dev tool to assess the deployed site for Performance, Accessibility, Best Practices and Search Engine Optimisation. During development, I periodically checked the lighthouse assessment and made the occasional change as directed.
This included:
- Changing the red highlight colour to a brighter red to improve contrast with the background.
- Switching to newer web formats (webp/webm) for images and video to improve performance.
- Adding meta data of 'userscalable=yes' and 'maxscale=10' so users have more control over page zoom.
- Making sure all images have an 'alt' attribute.
The lighthouse results for the deployed site are as follows:
| Page | Performance | Accessibility | Best Practice | SEO | Screenshot |
|---|---|---|---|---|---|
| index | 99 | 100 | 100 | 100 | lighthouse-screen-01 |
| gallery | 100 | 100 | 100 | 100 | lighthouse-screen-02 |
| collection01 | 99 | 100 | 100 | 100 | lighthouse-screen-03 |
| collection02 | 100 | 100 | 100 | 100 | lighthouse-screen-04 |
| collection03 | 100 | 100 | 100 | 100 | lighthouse-screen-05 |
| collection04 | 100 | 100 | 100 | 100 | lighthouse-screen-06 |
| about | 99 | 100 | 100 | 100 | lighthouse-screen-07 |
| contact | 100 | 100 | 100 | 100 | lighthouse-screen-08 |
| gallery-image-01 | 92 | 100 | 100 | 100 | lighthouse-screen-09 |
| gallery-image-02 | 100 | 100 | 100 | 100 | lighthouse-screen-10 |
| gallery-image-03 | 92 | 100 | 100 | 100 | lighthouse-screen-11 |
| gallery-image-04 | 92 | 100 | 100 | 100 | lighthouse-screen-12 |
| gallery-image-05 | 100 | 100 | 100 | 100 | lighthouse-screen-13 |
| gallery-image-06 | 100 | 100 | 100 | 100 | lighthouse-screen-14 |
| gallery-image-07 | 100 | 100 | 100 | 100 | lighthouse-screen-15 |
| gallery-image-08 | 98 | 100 | 100 | 100 | lighthouse-screen-16 |
| gallery-image-09 | 100 | 100 | 100 | 100 | lighthouse-screen-17 |
| gallery-image-10 | 100 | 100 | 100 | 100 | lighthouse-screen-18 |
| gallery-image-11 | 100 | 100 | 100 | 100 | lighthouse-screen-19 |
| gallery-image-12 | 99 | 100 | 100 | 100 | lighthouse-screen-20 |
| gallery-image-13 | 94 | 100 | 100 | 100 | lighthouse-screen-21 |
| gallery-image-14 | 91 | 100 | 100 | 100 | lighthouse-screen-22 |
| gallery-image-15 | 100 | 100 | 100 | 100 | lighthouse-screen-23 |
| gallery-image-16 | 100 | 100 | 100 | 90 | lighthouse-screen-24 |
No known bugs remain unfixed.
The website is deployed on Github using GithubPages. The instructions for this are as follows:
- Navigate to the settings tab in the Github repository.
- In the left hand menu, navigate to 'Pages', under 'Code and Automation'.
- Select 'main' as the branch in the dropdown menu under 'Build and Deployment' and hit 'Save'.
- Once ready the url for the deployed site will be available at the top of the page.
- HTML
- CSS
- Adobe Dreamweaver
- Adobe Photoshop (for images and wire-frames)
- Adobe Premiere Pro (for videos in gallery)
- Git
- Github
-
The Icons for Instagram and Youtube were sourced from the Font Awesome website.
-
Multi Device Image in README generated with 'Am I Responsive?'
- Used a tutorial to create a flex-grid that allows content to be arranged in a grid in a responsive manner.
- link to tutorial
- My css code:
/* setting a flex grid for about section */
/* learning from https://www.taniarascia.com/easiest-flex-grid-ever/ */
#about-section {
margin-top: 100px;
margin-bottom: 100px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#portrait {
text-align: center;
flex-basis: 100%;
padding-top: 50px;
color: #888888;
}
#portrait img {
width: 80%;
padding-bottom: 10px;
}
#about-text {
line-height: 200%;
padding: 50px;
flex-basis: 100%;
}
/*media query for flex grid */
/* learning from https://www.taniarascia.com/easiest-flex-grid-ever/ */
@media screen and (min-width: 1500px) {
#portrait {
flex: 3.5;
}
#about-text {
flex: 6.5;
}
}
All images and video used are the author's own work.
- Much of the learning and code framwork is inspired by the html and css essentials and Love-Running modules in the Code Institute Software Development Course.
Malia Havlicek
David C. O'Gara 2023