Older & Wider is a humorous (and real) podcast, where two friends chat and share their day-to-day experiences as older women. It is hosted by retired television producer/writer, Judith Holder, and award-winning comedian, Jenny Eclair.
The purpose of the website is to give interested parties insights and information about the podcast, and will include an embedded podcast player, details on live events, and access to the popular Instagram page; it also provides a way to contact the podcast directly, share stories, and make suggestions for the show.
There are several references scattered across the site which refer back to items that are regularly mentioned, or discussed, on the podcast:
- Older & Wider Listeners are called OWLs.
- Anyone listening to the podcast is regarded as "part of the gang", or a "gang member".
- Snore Law is invoked by either Jenny or Judith when they feel the conversation has got too boring; this is usually accompanied by a loud snoring noise.
- Jenny and Judith both love coleslaw, and it is mentioned frequently.
- When people contact the podcast, Jenny and Judith insist that people include their age with fractions; for example, "This email is from Sarah who is 59 and three quarters" (this is why the age field on the contact form is a text input).
- Jenny and Judith have stated that a Breton top is the de facto uniform of an OWL.
- Jenny and Judith regularly refer to the podcast Instagram page as the "message board".
- There are a couple of regular podcast features:
- Culture corner - Jenny and Judith discuss any books they are reading, television they've enjoyed, visits to art galleries, etc.
- Taste sensations - Jenny and Judith discuss any amazing meals they may have had in the previous week.
The Github Pages live site can be accessed here.
- Overview
- User Experience Design
- Testing
- Deployment
- Credits and References
- Technologies Used
- Acknowledgements
-
Target audience
- Women over 60 (but anyone welcome).
- Are mature individuals, with lots of life experience.
- May have children and grandchildren.
- Might still be working or retired.
- Could be anyone looking for information about the podcast.
- An accessible and responsive website.
- Relevant information that is easily found.
- Simple website navigation.
- A way to get in touch with the podcast, to share experiences.
- An experience that matches existing expectations of what to expect from a website; for example, links are easy to identify and function as expected.
- An appealing visual design.
-
First time visitor goals:
- "What is the Older & Wider podcast about?"
- "Who is Jenny Eclair?"
- "Who is Judith Holder?"
- "Where can I listen to the Older & Wider Podcast"
- "When are episodes of the Older & Wider podcast released?"
-
Returning visitor goals:
- "I want to find out more background information about the Older & Wider podcast"
- "What was mentioned during the 'Culture Corner' segment of this week's show?"
- "Has the podcast won any awards?"
- "What is the 'Message Board' - it was mentioned by Jenny and Judith in this week's episode, but where can I access it?"
-
Frequent visitor goals:
- "How can I contact Jenny and Judith to share my experiences, or comment on an item that was mentioned in the show?"
- "Is there any podcast merchandise available?"
- "Can I watch the podcast being performed live?"
-
General
- All pages will be responsive at different screen sizes, and change layout accordingly and appropriately.
- All screenshots shown in this section were taken from the desktop site, to give the clearest examples possible (apart from the Header section which also shows the header as seen on mobile devices, with a hamburger menu).
-
Browser Tab Icon:
-
A custom HTML favicon will be shown to aid users' identification of the site. It will also appear whenever someone adds the site as a bookmark or favourite.
-
-
Header:
-
Fixed at the top of each page - contains the site name and navigation.
-
The header allows the user to identify where they are on the site.
-
Plain background colour with contrasting text.
-
Site name will be centred in the first row, and link back to the home page when clicked.
-
Navigation bar will be centred in the second row, beneath the site name, and contain links to:
- Home - this takes the user back to the home page when clicked.
- About - this takes the user to a page with information about the podcast and both hosts.
- Message Board - this takes the user to a page with the podcast's embedded Instagram profile.
- Contact - this takes the user to a contact form that can be completed to send a message to the podcast hosts.
-
The currently active page is indicated on the navigation bar.
-
The header as it appears on desktops:
-
The header as it appears on mobile:
-
and with expanded hamburger menu:
-
-
Footer:
-
Fixed at the bottom of each page - it contains the social media icons, and legal information.
-
The footer allows the user to jump to the social media properties of the podcast.
-
Plain background colour with contrasting text.
-
Social media icons are centred in the first row.
-
Legal information is centred in the second row.
-
On hover, each social media icon will change colour, and also when clicked. The legal links only change colour on hover:
-
-
Home (index):
-
This is the first page a user sees when they enter the site. It contains all pertinent information regarding the podcast, with links to other pages where required.
-
The home page allows the user to get a good overview of the purpose of the podcast and gives them glimpses of associated activities.
-
The page has an introduction to the podcast, a carousel of images, a podcast player, information about the live shows, a link to an external merchandise website, and a mailing list signup form.
-
The live shows section has an explanation of the live shows, and a button that, when clicked, will open a new tab to the ticket site.
-
The merchandise section has a button that, when clicked, takes the user to the merchandise website via a new tab.
-
In the mailing list section, the user has the opportunity to sign-up for a regularly released newsletter.
-
-
Mailing List Completion:
-
A custom completion page appears once 'Send' is clicked on the mailing list signup form on the home page, with suggested links to other parts of the site.
-
The page will add humour to the site while offering suggested links to other pages on the site.
-
After 30 seconds, the page will redirect automatically to the home page.
-
-
About:
-
This section contains more detailed information about the podcast's purpose and the people behind it. It helps the user to understand the motivations behind the creation and continuation of the podcast.
-
Sections are:
- Information about the podcast.
- Biography of Jenny Eclair.
- Biography of Judith Holder.
-
-
Message Board:
-
The "message board" page allows the user to read posts on the Instagram page without having to navigate away from the site, so keeping them on the site for longer.
-
The podcast's Instagram profile is embedded on this page.
-
-
Contact:
-
The 'Contact' page allows the user to send a message to the podcast hosts, helping them to feel involved in the podcast, it contains:
- First Name field - for user's first name.
- Last Name field - for user's last name.
- Age field (a text input that allows people to enter their age as, for example, "58 and a half" – a running joke on the podcast).
- Message field - for users to enter their message.
- Send button - users can click this button to send their message.
- Reset button - users can click this button to clear any information already entered on the form.
-
All fields have validation where appropriate.
-
Text input fields all have placeholder text.
-
All inputs are required.
-
-
Contact Completion:
-
A custom completion page appears once 'Send' is clicked on the Contact page, with suggested links to other parts of the site.
-
The page will add humour to the site while offering suggested links to other pages on the site.
-
After 30 seconds, the page will redirect automatically to the home page.
-
-
Custom 404:
-
A custom 404 error page appears whenever a user attempts to navigate to a non-existent page.
-
The page will add humour to the site while offering suggested links to other pages on the site.
-
After 30 seconds, the page will redirect automatically to the home page.
-
- The addition of a website forum would allow fans of the podcast to interact, discuss the show, and share their life experiences.
This diagram shows how the user may interact and navigate through the website; dashed lines indicate optional routes.
After I created the wireframes, and was bulding the site, I altered the layout of the header and footer so that the logo was replaced by a centred site title in the header but removed from the footer.
The hamburger menu (shown in the header on smaller mobile devices) was also centred on the screen.
The wireframes presented here show my initial ideas:
The following colours have been used to add interesting backgrounds to site sections, with white (#FFF) as a contrasting colour, which is also used for all text:
For the the hover and active link states of each social media icon I used:
- Facebook Light Blue (#17A9FD) and Facebook Dark Blue (#0165E1).
- Instagram Rose (#E1306C) and Instagram Purple Red (#C13584).
The colours used are taken from palette 389 of the Sarah Renae Clarke Colour Catalogue, Volume 2.
Fonts were chosen from Google Fonts:
- Marcellus was used for H1 and H2 tags.
- Pontano Sans was used for all other body text.
All images used on the site have been taken from the Older & Wider podcast Instagram page and merchandise website.
For the image carousels that appear on index.html and about.html, I used RespImageLint to advise about creating alternates for all images, that would be appropriate at different screens sizes. This was then implemented using the HTML img srcset attribute for each image used.
All page content was initially written by myself, inspired by the sources listed in the credits, and then polished using Copilot in Microsoft Edge.
- Please refer to TESTING.md for details.
The site was deployed using GitHub Pages, as follows:
- Navigate to the GitHub repository.
- Click 'Settings'.
- Under 'Code and automation', select 'Pages'.
- On the 'GitHub Pages' section, under 'Build and deployment > Source' select 'Deploy from a branch'.
- Ensure that the 'main' branch has been selected, and then click 'Save'.
To copy the repository to your own GitHub account, so you can make changes without affecting the original version, you can fork it:
- Navigate to the GitHub repository.
- Just above the 'About' section, on the right of the page, click the 'Fork' button.
To deploy the project on your own computer you can clone it:
- Navigate to the GitHub repository.
- Click the green '<> Code' button above the list of project files.
- From the 'Local' tab, select either HTTPS, SSH, or GitHub CLI as the method of cloning, and copy the associated link.
- Open the terminal or Bash prompt.
- Navigate to the directory where you want to store the cloned copy.
- At the prompt, type
git cloneand add the string copied earlier. - Press 'Enter' to create the copy.
When using Gitpod, you can click the button below to create a workspace from this repository, which also requires that you install the Gitpod browser extension.
All images on this site are taken from either the podcast's Instagram page or merchandise website. Links to live sites are also used for the social media icons, and in the footer. This is done to help promote the podcast, and as a mark of respect for all the work that has gone into it. Once this project has been assessed, my intention is to get in touch with the podcast to let Jenny and Judith know about it.
The following references were used for general advice and help in implementing specific functionality on the website:
- Duckett, J. (2011) HTML & CSS - Design and Build Websites. Indianapolis: John Wiley & Sons, Inc. - general coding advice.
- Microsoft Edge Copilot - coding advice, particularly around CSS rules of ingeritance.
- How to create a copyright symbol - creating the copyright symbol in the footer.
- How to set a favicon in GitHub Pages - setting a favicon on GitGub Pages.
- W3 Schools CSS :visited Selector and CSS-Tricks :visited - styling the navigation links after they had been visited.
- Background on semantic HTML5 elements - ordering semantic HTMl elements.
- Redirect to custom form completion page - creating a redirect from the website's custom completion pages.
- How to Implement ARIA Tags for Better Accessibility - how and where to use ARIA tags.
- Using Media queries - creating media queries to control
bodypadding at different screen sizes. - Creating a custom 404 page for your GitHub Pages site - implementing a GutHub Pages custom 404 page.
- How To Change the Color of the Bootstrap 5 Mobile Menu Icon - altering the colour of the hamburger menu on mobile devices.
- How to use srcset and sizes for responsive images - making the website's image carousels more responsive.
- The Only Markdown Cheatsheet You Need - creating the README.md and TESTING.md documentation.
References used to gain a general understanding about the podcast, and for creating website content:
- Jenny Eclair's website
- Jenny Eclair's Wikipedia page
- Interview in The Guardian with Jenny Eclair
- Jenny Eclair's Amazon author profile
- Judith Holder's website
- Interview in The Guardian with Judith Holder
- Interview in Readers Digest with Judith Holder
- Judith Holder's Amazon author profile
- Wikipedia entry about 'Grumpy Old Women'
- The Older & Wider Facebook
- Older & Wider Live! Avalon Press Release #1
- Older & Wider Live! Avalon Press Release #2
- Older & Wider Live! Theatre at The Tabard
- What's On Stage - Older & Wider Live!
- UKTW - Older & Wider Live!
- The Lowry - Older & Wider Live!
- See Tickets - Older & Wider Live!
Links to the podcast, on various platforms:
- The website was built using HTML, CSS, and Bootstrap.
- JavaScript was not specifically used except where it was required for Bootstrap, particularly in making responsive menus work on mobile devices.
- Google Chrome Developer Tools was used for website troubleshooting, and testing (including Lighthouse reports).
- Google Chrome was used for website testing.
- The Responsive Viewer extension was used in all browsers (except Firefox, which does not seem to support it) to create images of the website's pages on a variety of devices.
- The GoFullPage extension was used in all browsers (except Firefox, which does not seem to support it) to capture full-sized images of the website's pages.
- Microsoft Edge was used for website testing.
- Firefox was used for website testing.
- Opera was used for website testing.
- Safari was used for website testing, and mobile screenshots ofan iPhone 12 Pro Max and iPad Pro (12.9-inch) (2nd generation).
- Figma was used to create the wireframes and the user flow diagram.
- Elfsight was used to create the Instagram embed code for message-board.html.
- Sarah Renae Clarke's Colour Catalogue V2 was used to determine the website's colur scheme.
- Font Joy was used to determine font pairings.
- Google Fonts was used to source the Marcellus and Pontano Sans fonts.
- Brand Palettes was used to source the correct Instagram and Facebook colours.
- Microsoft Photos was used to edit all images.
- RespImageLint was used to ensure all website images were fully responsive.
- To WebP was used to compress images into webp format.
- FontAwesome was used for social media icons.
- GitHub was used for version control.
- GitHub Pages was used to host the website.
- Gitpod was used as an online IDE.
- Markdown was used to create the README.md and TESTING.md documentation.
Thanks to my mentor, Juliia Konovalova, my cohort facilitator, Lewis Dillon, and fellow student cohorts, in particular Luke McCall, for their support and advice.
Extra special thanks to Andrew Parton, for always being there.