The aim of this project is to bring the poetry of Galway city to students, city residents, and tourists by offering each visitor an engaging virtual literary tour of the city.

1. This is an educational project that’s aimed to appeal to students and make learning about the literature of the city where they live more interesting. I’ve included appealing images and iconic poems that can be easily found, as well as resources so that students can learn more.

2. This project is also for residents of Galway city who want to explore their town through poetry. I’ve included links in the footer so that locals can access more works by the featured authors in local bookstores. Visitors to the site can reach out to the site owner directly to get involved/receive newsletters about this project and literary events in the city.

3. As Galway is known world-wide as a literary city/city of culture, this project is built to appeal to tourists visiting the city. The imagery on the homepage evokes city landmarks (known and lesser known). There’s also an online shop where visitors to the city can order products with poems about Galway printed on them.

Poems Around Galway is ultimately a website for visitors to learn more about the literary history of Galway city. This site is accessible to users of all ages, using any device type, and is aimed at anyone who loves poetry and wants to learn more.

I started working on this project by identifying 5 user stories, which were created to address features of the site that were required to appeal to different types of users. I originally had more complex user stories, which would have required JavaScript to deploy. In this case, I editing the user stories to fit the scope of the first Milestone Project.

One examples of this are User Story 1. The original feature was an interactive search bar, which populates results while a user types a search query. I even built a search bar and was trying to figure out the JavaScript, but this was taking too much time out of the rest of the project. Instead, I simplified the story to reflect a more basic requirement that a teacher may have: interactive online content such as images and an author bio to go with the poems.

The other user story I adapted is User Story 5. I wanted to build a newsletter pop-up that appears on the homepage. I searched Bootstrap for examples of how to build this without JavaScript/with their JavaScript. In the end I decided that a short form in the footer would do provide a similar user experience, since it would still be noticeable and appear on every page.

I’ve included my user stories and I what I built to accompany each story below.

Aoife is a secondary school teacher. Aoife wants an interactive place where her students read and learn more about poetry in Galway city. She thinks the students will respond best to images with the poems, as well as author bios.

Charles is a poet. He wants a way to feel connected with the source material for the poems. He wants images of the places where the poems were written.

Dominic loves to read poetry for fun, but his eyesight isn’t as good as when he was younger. Dominic wants a way to play audio of the poems so he can listen to them instead.

Amy is visiting Galway for the first time as a tourist. She wants to know where she can buy books of poetry, so she needs links to local book shops.

Sarah is interested in reading as a hobby and likes to keep track of different literary sites on poetry. She wants a feature where she can sign up to get newsletters for updates on the site.

Before I started on the wireframes, I brainstormed the logo design, business objectives, and customer needs on Miro. I've included links to this brainstorm.

Miro branstorming

I've included links to the sitemap and a wireframe for each page of the site.

Sitemap

Homepage

Poetry Page

About

Contact

Shop

The first colour I choose for the design of this site is maroon. This is the city colour for Galway. This is reflected in the logo, icons throughout the site, and in the background colour for the quote banners on the Home and Poetry Pages.

The rest of the colour scheme includes shades of blue. There's dark blue on the Home, Contact, and Shop Page to make the images/forms stand out. There's lighter blue in the background of the Poetry and About Pages, so that the written content is easier to read against dark text. I used a cooler/neutral blue in the header/footer of the site.

The main reasoning behind this blue theme is because it contrasts well with the red. Also, Galway is built on rivers, canals, and Galway Bay. The blue evokes a city surrounded by water.

My mentor suggested that I build my design palette on https://coolors.co/

View the full palette here

The fonts I choose were chosen because they're easy to read. I mainly used Arial and Open Sans to make the site more accessible to users with dyslexia as suggested in this article

I also chose to use Trocchi in some headings because I was inspired by its use on https://poets.org/

This feature is actually the bulk of the Poetry Page of the site. This was created with Bootstrap, Custom CSS, free stock images, and research about the poems/authors. All content used on this page is cited below.

I created a gallery of images of iconic places in Galway. These images correspond with the poems. I actually asked my friend Charles, who is a poet from Galway what he would most like to see on the site. So I created this gallery navigation of the places that go with the poems (more or less) on the homepage.

I wanted to evoke dinnseanchas or lore of places in this project to show the connection between where a poem is set and the written word. Plus I think this navigation makes a more visually stunning homepage and works to explain the project.

For example, the image for the poem Galway is of the canal, looking over Il Vicolo restaurant.

The image of the old Rahoon cemetery was taken by me. Though less iconic on a city-wide basis, this is an important place in James Joyce’s personal lore that’s featured in his more famous short story: “The Dead”.

‘On Nimmo’s Pier’ features the well-known red-sailed Galway hookers docked in the pier. I used this image because these boats are docked in the pier during the summer. So the boats are strongly connected to this area of the city.

For ‘Men with Tired Hair’ I couldn’t get a good image of Prospect Hill, since it is largely a commercial area of the city. I considered taking a picture of my doctor’s office that’s located in this area of the town. However, any picture I tried to take of the hill looked awkward and a bit less vibrant than some of areas of the city with more colourful shopfronts and pubs. So I used an image of Eyre Square and its flags of the 12 tribes. Eyre Square is located at the bottom of the hill, so sitting out on Prospect Hill, one would look out over this square.

Finally, I added an overlay that appears when you hover over the images, so that a user knows to click on the image to go directly to the Poems page.

I added audio elements to the poem page, placing each element directly below each poem.

To get the audio files, I used an external microphone. My husband and I read the poems out loud and recorded our readings.

Then, I added the audio files to the audio elements.

I added footer links to three bookshops in Galway: Charlie Byrnes, Easons, and Kenny’s. The links can be used by anyone: local resident or tourist to buy books online/locate these bookshops in the city.

There were a few reasons why I wanted to add a tourism element to this site. One reason is because I came to this city I now live in for the first time as a student and a tourist, so I understand how this city draws in people with writing, musical, artistic, or other creative backgrounds.

Tourism is also a major industry. As this is a project built around a specific community, it makes sense to point traffic from tourists that visit this site looking to learn more about local literature to local businesses.

I added a newsletter sign up form to the footer of the site. As a broader goal, I would use this form to stay in touch with writers in the city to notify them of literary events happening in town.

General:

• Logo- gives the user an idea of what the site is about
• Navigation links- allows the user to navigate the site
• Mobile navigation icon- hides the navigation on mobile until you click the icon
• Header button- draws attention to the link to the online shop
• Social links- uses FontAwesome icons to allow the user to visit social media sites/contact us

Contact Page:

• Form- allows the user to get in touch with me regarding any more depth questions they have about the project or getting involved.
• Text links to email/phone- allows users to contact me directly by clicking these links

About Page:

• Accordion FAQ dropdown- allows the user to click to learn the answers to frequently asked questions about the project

• Fully working shop/forms- when I have JavaScript experience, I'd like to make these features fully usable
• Search feature- this is a feature I'd like to implement with JavaScript

• JIRA

  • I built my original user stories and started the Strategy Plane on a JIRA board

• Trello

  • I used a Trello scope/strategy board to visualise the development process/map out the Strategy and Scope Planes

• Miro

  • I used Miro to map out my business objectives and consider my logo design

• Basalmiq

  • My wireframes were all built on Balsalmiq

• Free Logo Design

  • My logo was created on this tool

• GitPod

  • I built the site on GitPod

• GitHub

  • I stored and managed by code on GitHub
  • The site is deployed on GitHub Pages

• HTML5

  • This project uses HTML5 to build the 5 pages on the site

• CSS3

  • I used CSS to style the HTML

• Bootstrap CSS

  • I used Bootstrap CSS to style buttons on the site. I also used Bootstrap grids to create the structure of my pages and to allow the site to resize responsively on different devices

• Bootstrap JavaScript

  • I used Bootstrap JavaScript to workaround writing JavaScript. This was used for the mobile navigation bar and for the Accordion dropdown on the About Page.

• Popper

  • The mobile navigation bar also uses Popper

• Ajax

  • This was also used for the mobile navigation bar

• Google Fonts

  • Trocchi and Open Sans were added to the project using Google Fonts

• Font Awesome

  • I added icons from Font Awesome to the site header, mobile navigation icon, and footer.

• Audacity

  • I used this tool to record audio versions of the poems on my Blue Yeti and saved the recordings to MP3 files

• GIMP

  • I edited images on this tool

1. Logo

   The logo was added to the Homepage before anything else. It was originally added to the centre of the site, but this didn’t work well when I placed the navigation on the left.

   I also didn’t understand the Bootstrap grid fully at first, and used only col-6 so this caused the logo to stack above the navigation and added extra space to the navigation. In this case I decided to move the logo to the right of the page.

   My mentor pointed out that the original design of the logo, which had the logo text below the image, made the height of the header quite large and distracting from the rest of the content on the site.

   I edited the logo in an image editor so that the text was to the left of the image, then was able to decrease the header height.

   Tablet and Mobile:

   I used a media queries to adjust the size of the logo to be smaller on tablet and mobile view.

2. Navigation

   To create the navigation, I followed the suggestions in the Code Institute test projects. I built the navigation with an <ul> and used CSS to float the list items to the left, then hid the bullet points, and add spacing between the links.

   I decided to add a button link to the header to bring attention to the Shop Page. To do this, I originally used a <button> with a combination of Bootstrap styles and my own CSS. I placed an <a> element inside the button. This worked, but caused an Error when I ran my code through the W3C validator. To fix this, I used the Bootstrap CSS/my own classes to style the <a> element as a button and removed the <button> element.

   Tablet and Mobile:

   The mobile version of the site has a hamburger icon to hide/reveal the navigation links when clicked on.

   This was built with a Font Awesome icon and code from W3 Schools that uses Bootstrap JS, Popper, and Ajax.

   I originally used another set of W3 Schools code with JavaScript, but removed the code because JavaScript is outside the scope of this project. This code was on the site for some time so that I could test out how the mobile icon would look.

   With the working mobile navigation, I tried to stack the hamburger icon below the logo, so that the whole section slid down. My mentor pointed out that this made the mobile header too large, so adjusted the navigation to be back beside the logo with Bootstrap.

3. Banner

   For the banner image, I tried to add an image directly to the HTML, then use CSS to stretch it across the screen. This stretched out the image itself.

   I then used Background image CSS to add the image in as a background image and size it on the screen.

   Tablet and Mobile

   For desktop view, I used a large image that didn’t scale well on mobile and cropped the image awkwardly. I added media queries so that a different image appears on smaller screens.

4. Newsletter- User Story 5

   To create the Newsletter, I created a <form> with an Email input and Submit button. I considered using a MailChimp form so that it would fully work, but thought this was too much outside code to add to the project.

   For this reason, the form can be clicked on when filled out, but doesn’t send to a storage option or show a post-submit message. I’ve left the form action set to # so that the form resets when submitted. My mentor pointed out that this is fine, since we’re not required to use JavaScript on the first Milestone Project.

   To stand out from the Contact Page form, I styled this form to only show the bottom border of the Email input. This gives it a minimalist style. I styled the Submit button with Bootstrap and used the same button code on the Contact Page form, for consistency.

   Tablet and Mobile

   The submit button stacked below the Email input in mobile. To fix this, I removed the label for the Email input and added a form placeholder.

5. Bookshop links- User Story 4

   These links were built the same way as the main navigation with an <ul> . The links go to external sites run by Irish booksellers. All links work when clicked on and open in a separate window with target=”_blank”.

   Tablet and Mobile:

   These links stack to the right of the screen on tablet and in the links stack in the centre of the footer elements—one on top of the other—on mobile.

6. Social Links

   The social links were created using the same method as the Bookshop Links. I used Font Awesome icons instead of text.

   For accessibility, I added aria-labels to the icons, but the labels returned Warnings on the W3C HTML validator. I used this Font Awesome guide’s instructions to remove the warning.

   Tablet and Mobile:

   These links are styled to stack below the other footer elements on smaller screens. On tablet view, white padding appeared to the bottom sides of the footer. To fix this, I used a media query to increase the footer height on tablet screens.

7. Poetry Gallery- User Story 2

   The gallery on the homepage was created using Bootstrap and free stock images that I found online. I created the spacing of the gallery using CSS padding.

   The main issue I had with the gallery was how each image reacts when hovered over/clicked on. I tried a few different tools, including Bootstrap to style this hover effect.

   In the end, I found a simple CSS fix with filter: brightness(0.2); and this hover feature now works as expected.

   Next, I built anchor links from the Poetry Page, by creating unique IDs above the corresponding page section on the Poetry Page.

   If you go to the Home Page, hover over the gallery image, and click on the image, you will go to the correct poetry section on the Poetry Page.

   Tablet and Mobile:

   I used additional Bootstrap CSS and my own CSS padding to position the images on tablet and mobile view. The images stack one on top of the other on mobile view.

8. Layout of Poetry Page- User Story 1

   The original layout of the page had the poem/accompanying image side by side stacked on top of the author image/author bio, also spaced side by side.

   This created extra spaces on the page that made it look somewhat bulky. To fix this, I stacked the poetry image on top of the poem. This creates a sleeker look on the page, and brings more attention to the poetry text (which is now centred on the page).

   I left the author image/bio structure spaced side by side. To help the poem stand out as the main content on the page, I made the bio header smaller than the poem header.

   Tablet and Mobile:

   I added CSS to adjust the font sizes on mobile, so that the poems are still readable, but maintain the integrity of the line breaks (which is important in poetry).

9. Audio Blocks- User Story 3

   I used an <audio> element to add audio recordings to the Poetry Page. There are 4 individual .mp3 audio files used on this page. Each file is saved in an audio folder, nested in the assets folder of the project. I had a test file in place on the site while building out the Poetry Page. This test .mp3 showed an error on the W3C HTML validator because the file formatting was like this: audio file.mp3. When I added my own audio files from Audacity, I ensured no spaces were in the file name. These files passed the validator.

10. Accordion

    I mostly used Bootstrap JavaScript, credited below, to build the FAQ tool. I added this plugin because I think FAQ dropdowns are a sleek way of displaying information without taking up too much space.

    The accordion is custom styled with my own CSS.

11. Contact Form

    The contact form was built with text inputs, an email input and a textarea input. I added labels to designate between the different input types and aria-labels for accessibility.

    The form fields originally had different lengths. For consistency, I styled the form fields to be the same length on desktop, mobile, and tablet view.

    I don’t have experience with JavaScript, so the I left the action blank and didn’t add a post submit message. All fields are required and the form returns an error if submitted with any field not filled in.

12. Shop Page

    The Shop Page is built with similar Bootstrap and custom CSS as the homepage gallery. The Purchase buttons on the page refresh the page when clicked on. This is because I don’t yet have the skills to build a working shop, but wanted to show what I could build.

    Originally, I considered creating a stand in Redbubble or Etsy shop, but this proved to not be cost effective.

The site looks the same on Chrome, Firefox, and Safari. When I deployed the site, there was some spacing on Chrome that wasn't on the other browsers, but I used CSS to fix the spacing issue.

One notable difference between browser is that the audio element is grey on Firefox and Safari, but white on Chrome.

The form placeholder font was too light to read on Safari. I used this CSS to adjust the placeholder font colour.

While working on this project, I prefered to code on Chrome, but to use Firefox's developer tools. Chrome DevTools gave inconsistent results when testing on mobile view. I found Firefox to give accurate results for mobile styling. I worked between the two browsers.

I tested the mobile site on Safari and Chrome on my iPhone SE 2. The main change I made on the live site was to adjust a spacing issue with the logo that didn't appear in the preivew on GitHub.

All pages on the site score above 90% for Accessibility. This is because I added aria-labels to all the forms, buttons, and many site links. I also added alt text to all images.

All pages on the site score above 90% for Performance and Best Practices.

The mobile pages scored lower on Lighthouse because of image sizing issues that weren't happening on desktop. However, the images load correctly on mobile view. I decided to not edit the images on mobile because I don't quite understand the sizing issues listed in Lighthouse.

To deploy this project, I used GitHub Pages.

To do this I:

1. Logged into my GitHub account
2. Opened my repository for poems-around-galway
3. Went to the Settings tab of my repository
4. In the Options tab of the Settings, went to the GitHub Pages section
5. Selected Master as the Source from a dropdown
6. Selected the /(root) folder
7. Click Save
8. Opened the site in an private browser at this link: https://christine-gk416.github.io/poems-around-galway/

I followed this guide to deploy the site

Difference between deployed version and the GitHub preview:

• Internal links were updated to remove the url slug so they would work on the live site. For example /index.html became index.html
• Updated some images to use the relative path to the image
• Chrome had a white space on the far right side of the Homepage. I used this CSS to fix it
• Text links in the footer that went to Facebook and Instagram didn't have https://www. in the file path, so the links had to be edited to work on the live site

The live site can now be accessed at this link: https://christine-gk416.github.io/poems-around-galway/

1. The code for the FAQ Accordion on the About Page is almost entirely from this Bootstrap JavaScript Plugin

2. Much of the code and functionality for the mobile navigation came from this W3 Schools article

3. I used padding frequently to position elements on the site. I used this article as a reference for adding CSS padding correctly

4. The buttons on the site were styled using Bootstrap CSS from this article

5. I found the Bootstrap grid system to be somewhat confusing, so used this article for reference

6. This W3 Schools article was used to add the background images

7. I fixed an error with using alt to describe a background image following the suggestions here on StackOverflow

8. The hover CSS on the Homepage gallery images were added from this suggestion: filter: brightness(0.2); from this StackOverflow question

9. My mentor suggested that I use flex-direction to stack content on my Contact Page, so that content on the right stacks over content on the left on mobile. Here's the source

10. I built my user stories from the suggestions in this Atlassian article

• The text for the 'Galway' poem came from this site

• The author bio for Mary Devenport O'Neill came from another page on the same site here

• I also reference this Wikipedia article for O'Neill's bio

• The text from 'She Weeps Over Rahoon' comes from here

• Much of the James Joyce bio comes from here

• The sources for Ben Murphy's poem and author bio come from his volume On Nimo's Pier published by Claddagh Press in 2018

• The text for 'Men with Tired Hair' comes from the Salmon Press site

• I've found Rita Ann Higgin's bio here

• ben-murphy.JPG was taken by me from the front cover of his poetry volume On Nimmo's Pier
• eyre-square.jpg is from the Wikipedia article on The Tribes of Galway. It was taken by Eoin Gardiner
• galway-banner.jpg comes from Can Stock Photo. This comes from a licesne purchased for the image from the image creator yurkaimmortal
• galway-banner2.jpg comes from here on Unsplash. Rory Hennessey is the image owner
• galway-hookers.jpg is from this Pixabay page. Credit goes to coolpropix
• galway-poem.jpg is from Unsplash. And was taken by Ruby Doan
• galway-weir.jpg also comes from Pixabay here. xcoffeeelenax is the image owner
• jame-joyce.jpg is from this Irish Times article. This was sourced by Terence Killeen, a Joyce scholar who writes for the times. Here's his Irish Times bio
• mary-devenport-o-neill.jpg was found on this blog post by Jean Rathbone
• mileston-project-logo-2.png was designed and edited by my husband James Greaney on Free Logo Design or FLD
• mug-1.jpg comes from Unsplash here and was created by Marianne Krohn
• night-galway.jpg is an Unsplash image by Markus Voetter
• notebook.jpg is also from Unsplash here. Credt goes to Bookblock
• old-men.jpg is an Unsplash photo taken by Morgan Lane
• rahoon.JPG and she-weeps.JPG were taken by me in the old cemetary Rahoon on 16 June 2020
• rita-ann-higgins.jpg was sourced from this Times article and is credited to Andrew Downes
• tshirt-1.JPG comes from Burst and was created by Shopify partners

• All audio recordings used in this project were recorded by James Greaney and Christine Greaney-Kelley

• I got the original idea for this project from the Galway poetry trail. The trail is charted out on the website for Kenny's bookshop here
• The aesthetics: the colour palette and fonts were inspired by https://poets.org/
• Another site that inspired my design was https://poetryarchive.org/
• I also looked at the structure of: https://www.poetryfoundation.org/ and https://www.poetryireland.ie/