Enlightened Publishing is the responsive landing page of Prof. Curt Rice offering workshops on academic publishing for early-career researchers, such as PhD students and postdoctoral researchers. It is expected to launch in May 2024.
The site provides an internet presence for the client, allowing him to reach senior academics (e.g. rectors or deans) interested in commissioning him for a workshop for their junior colleagues.
Interested academics can gain an overview of how the workshop solves common problems in academic publishing, why the client is highly qualified to educate about these, and the means to get in touch with him.
Developer: Dr. Sylvia Blaho
View the deployed page on Github Pages
This repository was cloned from academic-publishing.
- User Experience (UX)
- Design
- Features
- Technologies used
- Deployment
- Testing
- Credits
You can also navigate the document structure by clicking the list icon in the top right corner.
The client is an accomplished academic researcher and university leader, who wants to branch out to high-level training and consulting. The project to be launched with this website is a workshop for early-career academics on how to navigate the complexities of academic publishing.
Publishing metrics are paramount for a researcher's career trajectory, but there is very little accessible information on rules and best practices. This is the knowledge gap that the current project aims to fill.
Important
Even though the workshop itself is tailored to junior academics, the target audience of the website is their senior peers: institution or faculty leaders such as rectors, vice-rectors or deans.
This cohort typically belongs to a higher age group (40-70 years old), and makes browsing and purchasing decisions along the lines of B2B patterns. In addition, individuals in these positions tend to have extremely busy schedules and a lot of demands on their time and attention.
This has implications on the features and [design] (#design) of the website, as detailed in the respective sections below.
Project goal and scope development throughout the project (click for details)
At the start of the project in February 2024, the client had the following goals:
- create an online presence specifically for this workshop
- add subscribers to his email list
- have universities commission him for the workshop
- direct users to Substack
- have users download the client's ebook on Academic Publishing
- direct users to the client's blog on Gender Bias
The importance/feasibility matrix was determined as follows:
Initial Importance/Feasibility matrix (5: most, 1: least, not included in release)
| Goal | Importance | Feasibility |
|---|---|---|
| add subscribers to email list | 5 | 5 |
| have customers reach out by email | 5 | 4 |
| get commissioned | 5 | 5 |
| direct users to Substack | 5 | 5 |
| have users download ebook | 2 | 5 |
| 3 | 3 |
Some deliverables have not been completed by the "friends & family" release date of the 1st version of the website (14th of March 2024):
- Substack account
- 1st draft of the ebook on Publishing
- blog on Gender Bias
Accordingly, the list of goals was modified as follows (not included in release, new goal):
- create an online presence specifically for this workshop
add subscribers to his email list- have potential customers contact the client by email
- have potential customers book a meeting with the client
- have universities commission him for the workshop
direct users to Substack- direct users to the client's blog on Open Access Publishing
- direct users to the client's social media accounts (Twitter/X, LinkedIn)
have users download the client's ebook on Academic Publishingdirect users to the client's blog on Gender Bias
The importance/feasibility matrix was determined as follows:
Updated Importance/Feasibility matrix (5: most, 1: least, not included in release, new goal)
| Goal | Importance | Feasibility |
|---|---|---|
| create an online presence | 5 | 5 |
| 4 | 1 | |
| have potential customers email | 5 | 4 |
| have users book meetings | 5 | 5 |
| get commissioned | 5 | 5 |
| 5 | 1 | |
| direct users to Publishing blog | 3 | 5 |
| direct users to social media | 3 | 5 |
| 2 | 1 | |
| direct users to Gender blog | 3 | 1 |
In addition to the business goals detailed under Project goal and scope development throughout the project in the Background section, client goals also include aspects of accessibility and marketing goals. The complete list is as follows:
- [CL1] I want to create an online presence specifically for this workshop.
- [CL2] I want to offer potential customers an easy-to-navigate layout.
- [CL3] I want to visually appeal to the target audience, conferring approachability and competence.
- [CL4] I want potential customers to contact me by email.
- [CL5] I want potential customers to book a meeting with me.
- [CL6] I want customers to commission me for holding this workshop.
- [CL7] I want to direct users to my blog on Open Access Publishing.
- [CL8] I want to direct users to my social media accounts (Twitter/X, LinkedIn).
- [CL9] I want to reach potential clients outside my professional network.
- [VI1] I want my junior colleagues to receive support in navigating academic publishing.
- [VI2] I want to view the site on various-sized devices.
- [VI3] I want to easily navigate between the different parts of the site.
- [FI1] I want to quickly get an overview of the website's purpose.
- [FI2] I want to get informed about the problem the workshop is offering to solve.
- [FI3] I want to know how the workshop proposes to solve the problem.
- [FI4] I want to get an overview of the client's relevant experience in the field of academic publishing.
- [FI5] I want to request more information about the workshop.
- [RE1] I want to ascertain that the client's experience makes him an expert on the topic.
- [RE2] I want to read the client's blog on Publishing.
- [RE3] I want to book a meeting with the client.
- [RE4] I want to request more information about the workshop.
- [FR1] I want to book a meeting with the client.
- [FR2] I want to find the client's social media information
As detailed in the UX section, the target audience for this website is typically a more senior and B2B-minded cohort, with busy workloads and packed schedules. Consequently, the design is skewed towards minimalism, being clear-cut and avoiding unnecessary visual clutter, such as excessive borders and shadows, elements of very different shapes, background images behind normal text, and auto-moving elements of all kinds.
This aligns perfectly with accessibility considerations, as detailed in the Accessibility section.
It also plays on associations with Norway (where the client is based) and Scandinavia in general: minimalism, clean design, straightforwardness and efficiency.
The site is designed to be responsive, to provide an equivalent viewing experience on most commonly used devices.
The color scheme is inspired by the client's background in Norway, most notably, in the arctic town of Tromsø, which experiences a 2-month-long polar night without the sun rising, and spectacular displays of northern lights.
The dark night and bright lights also serve as a metaphor for the workshop shining a guiding light into the darkness of complicated rules and procedures in academic publishing.
The metaphor is reflected in the site's title: Enlightened Publishing.
The site's color arrangement was inspired by https://inclusiveleadership.solutions/ and https://youpreneur.com/, using two salient but contrasting colors, combined with white and gray.
The two salient colors chosen for this site are a dark petrol (#9FFFCB) and a light mint (#004e64). These colors represent the arctic night sky and northern lights, respectively.
Turning to the supporting colors used, white, evocative of the ubiquitous snow in the arctic, is used in the design. In the spirit of minimalism and to offset the salience of the 2 main colors, simple, pure white (#FFFFFF) is used.
The gray in this color palette has tones of blue-green, reminiscent of ice, and providing a bridge between the two salient colors.
A 5th color, a darker shade of gray, was introduced during accessibility testing, to make sure that there is sufficient contrast between background and text everywhere (see the Accessibility testing section for more detail).
This resulted in the following color palette.
Color variables were used instead of hard-coding colors for each element, so that the overall color scheme can easily be modified in the future if needed. This was based on the W3Schools tutorial on variables, a resource pointed out by my mentor. This design also enabled me to easily and quickly make adjustments to the color scheme during accessibility testing (see the Accessibility testing section for more detail).
The color variable names used in the project are as follows:
| color name | HEX code |
|---|---|
| dark | #004E64 |
| white | #FFFFFF |
| light | #9FFFCB |
| gray | #537D88 |
| dark-gray | #3C5158 |
The client heavily preferred a continuous website rather than separate clickable pages, citing results that show that user engagement drastically decreases after each time a user has to click. In accordance with this, the website consists of 3, visually separate sections that can be continuously scrolled through:
- Problems & Solutions section
- About/Credentials section titled "Why me?"
- Contact section
While it is customary to put the About information first on a site, we decided on an approach that centers the problems the workshop aims to solve and their solutions, as the client wants to reach users that might not know him professionally. Therefore, while his name and professional credentials are important information, they were deemed secondary to the goal of the workshop.
To ease navigation, the header remains visible throughout.
The hero image shows an arctic landscape with mountains, water, snow, and northern lights. It alludes to the client's professional background in Norway. The northern lights evoke a sense of awe and hope (light in the darkness).
The Problems subsection features grayscale images tinted dark with one of the main colors of the website.
The first image shows a huge pile of papers stacked in a haphazard fashion, symbolizing the large amount of academic publications on the one hand, and the multitude of journals and publishers on the other hand.
The second image shows a person in front of a computer in a frustrated pose, illustrating a frequent reaction to the current state of affairs in academic publishing. I chose a picture of a female-read person of color, as these groups are underrepresented in academia (and in general).
The Solutions subsection features colored images, only slightly tinted with the website's light main color.
The first image shows a modern, spacious, brightly lit library, symbolizing a more open and more efficient future to come. This picture also illustrates the multitude of information and aptitudes that can be acquired during this workshop.
The second image shows the client on stage, giving a speech, in a dynamic and engaging pose. This evokes a sense of participating in the workshop given by the client.
The About section shows the client in a confident pose in front of a graffiti wall. It centers the client as both competent and approachable. The image has been re-colored to fit the site's color scheme.
The second and third parts of this section have a lot of interactivity (flip cards and a video), so no images are included here to avoid overwhelm.
The Contact section does not feature any images. This is a conscious choice to adhere to minimalism and simplicity: as this section has the most interactive elements (the Calendly widget and the email contact form), I wanted to minimize user distractions while interacting with these.
The header embodies the goals of minimalism in design: only uses the 2 hero colors and no background images. Since the header is "sticky", that is, present at all times regardless of how far down the user scrolls, keeping it as simple as possible was of utmost importance.
For highlighting active links on hover, white is used – again, choosing the simplest possible option to keep the page uncluttered.
The hero image features the main tagline of the project with the mint salient color on a slightly transparent dark gray background, centered. This ensures the legibility of the tagline at the same time as letting the hero image shine.
This section is distinguished from other parts of the site by a gray background color, which remains consistent throughout the section.
The two subsections comprising the section are visually distinguished from each other by the coloring of the contentful elements (text+image boxes, as described in Layout below).
The Problems subsection features a dark color scheme, grayscale images with a dark tint, and images suggesting overwhelm. This alludes to long dark arctic nights, a parallel to the seemingly hopeless endeavor of navigating the intricacies of academic publishing.
The Solutions subsection has a bright colored background and full-color images that are only slightly tinted with the same bright color. These suggest the image of northern lights in the dark night sky, evoking feelings of brightness and hope.
Each subsection consists of 2 text boxes, each with an accompanying image. The text appears below the image on mobile, and next to it on tablets and larger screens.
For the side-by-side arrangement, every second image-text pair is reversed, so that the image appears alternately on the left and the right side of the image.
In the Problems subsection, the cut-off point between the image and text is at the same place. In the Solutions subsection, the text/image width ration is the same in the two boxes. Both arrangements create a similar but subtly different symmetry.
This section details the relevant past experience of the client. Since the client is an accomplished scholar and university leader with decades of experience, visual cues and user interaction elements were used to break up the information into digestible chunks to avoid overwhelm.
Leaning into the visual separation of the different sections of the website, this section features a bright background with the mint salient color (#9FFFCB), and a colorful image (modified to fit the site's color scheme) with the client's name and tagline. The text background is slightly transparent, to have a more organic connection with the image.
The image of this section is full width, with the text on the image changing position depending on the device size:
- mobile: full width and on the bottom half of the image
- tablet: full height, on the right hand side of the image, extending to the right end
- laptop/desktop: full height, on the right hand side of the image, with some space on the rightmost end of the image
The image is followed by a short introductory text summarizing the client's relevant experience, the different jobs/positions/experiences are presented in a responsive grid (based on the Love Running Project). By default, only the institution and position title is visible; details are uncovered on tap (mobile, tablet) or hover (laptop/desktop). This keeps information easy to take in at a glance, but interested users can also find out more.
The last item in the section is a YouTube video of the client giving a talk. This gives the opportunity for users to see the client presenting to a larger group.
This section features 2 very interactive elements (the Calendly widget and contact form), so it is kept the most minimalistic to avoid overwhelm: it has no images, and features the most plain color palette (also used in the header): dark background and light text.
One core principle of B2B marketing is to offer as many possibilities for connecting with the company as possible. In the spirit of this, the website features both a Calendly widget for scheduling meetings with the client, and a contact form for getting in touch by email.
The footer has additional contact links to the client's social media profiles.
The Calendly widget is integrated into the site, and styled in alignment and color. In larger screens, there is a white margin around the calendar element, which disappears on smaller screens. To keep the widget distinct, I have added a white border to it for smaller screens. Users can view the client's available meeting times and set up a meeting with an automatic Google Meet link using the widget.
The second part of this section contains the contact form, where users can submit their name, email address and workshop preferences to the client. For the present implementation, this is set up to result in the Code Institute confirmation screen rather than connected to the client's CRM (Customer Relationship Management) system, so that the Code Institute assessors can easily evaluate the functionality of the form. For the public launch (planned for May 2024), this will be changed so that the client will receive these data in his CRM system.
Note
The contact form is temporarily hidden until the client's CMS migration is completed.
The footer also features a minimalist design (similarly to the header). It consists of two, visually distinct parts, the top one containing the social media links, and the bottom one the copyright information.
Both of these parts have a two-tone color scheme and no background images, to maximize efficiency and minimize distractions (again, paralleling the header).
As the footer is intended to be less salient than the header, the footer background colors used are the two shades of gray.
To round out the parallels between the footer and the header, the same color-changing hover effect is used on the links in both elements.
The parallels between the two elements aid in the recognition of functionalities, and reduce cognitive load.
Google Fonts are used in this project. The client chose Roboto Slab for headings, and Lato for normal text. These are professional, approachable, and easy to read.
Wireframes were prepared using Balsamiq.
Wireframe for mobile | Problems & Solutions section
Wireframe for mobile | About/Credentials section
Wireframe for mobile | Contact section
Wireframe for laptop | Problems & Solutions section
Wireframe for laptop | About/Credentials section
Wireframe for laptop | Contact section
In accordance with the target audience and the user stories (see the User Experience section), the features are focused on efficient navigation, information transfer and contact options.
The header contains the logo and the nav bar (more on these in their respective sections).
Because the header houses the most important site navigation elements, it is always visible, regardless of how far the visitor scrolls down the site (also called "sticky"). This implementation is based on the Love Running Project.
The header and its elements are responsive, adapting to the viewport size.
Since there is no separately designed logo for the project yet, the site features the title of the project in a large font and in the most prominent place, the top left corner.
The logo also doubles as a navigation element: clicking it takes the visitor back to the top of the page. On devices with pointer capabilities (e.g. mouse or trackpad), the logo changes color and is underlined when hovered over (see video below).
The nav bar (or navigation bar in long-form) ensures that visitors can quickly and easily navigate between various parts of the site. This is especially important given that the website is a continuous one, rather than being broken up into different html files.
Rather than using generic names like About or Home in the nav bar, I decided to go with more meaningful ones: Solutions and Credentials.
Note
Solutions points to the beginning of the Problems & Solutions section rather than the beginning of the Solutions subsection. This is a deliberate choice, as putting Problems & Solutions in the nav bar would have made it too cluttered, so I decided on the positive-sounding Solutions as the nav link for the whole section.
The nav bar is responsive to the type of device the site is viewed on: it appears as an expandable "hamburger" icon on smaller devices.
This functionality is based on the nav bar implementation of the Love Running Project. However, instead of expanding the nav bar and putting the nav elements under the logo, I have chosen to have them appear right under the hamburger icon, so that the user action (tapping the hamburger icon) and the result (the nav elements appearing) is closer together.
On larger screens, the navigation bar shows the links to the 3 main sections of the site side by side.
On devices with pointer capabilities (e.g. mouse or trackpad), the links in the navigation bar change color and are underlined when hovered over.
Because the site is a continuous one, rather than consisting of separate html files, there is no highlighting of the current section the user is in in the nav bar. To offset this, color schemes are used to indicate different sections (see the Design section for more details).
This section features the hero image, defining the feel and color scheme of the website, as well as the main tagline of the project.
This section features descriptions of the issues the client is trying to solve, and the means to solve them. The information is displayed in responsive boxes containing a block of text and an image each.
This section provides information to visitors about the client's professional experience in academic publishing.
The first part of the section introduces the client, showing a full-width picture, his name, tagline and basic professional information.
The client's relevant experience is displayed on individual cards to avoid creating a large block of text and break up the information into smaller, digestible pieces.
The cards are arranged in a responsive grid using Flexbox, similarly to the "running times" section of the Love Running Project.
Additionally, the information within each card is divided into 2, and presented as a result of user interaction:
- By default, each card shows the name of the institution/organization, the position the client held there.
- When the user taps or hovers over a card (depending on the type of device used), this information is replaced by a more detailed description of the client's experience.
In accordance with my mentor's suggestion, I have added explicit text to tap or hover for more information. I have decided to add this text to each card rather than just adding it once above the card block, because I consider it better for accessibility. The tap/hover text is also visually different from the rest of the text on the card, to make the functionality more explicit.
The last element of the section is a video of the client giving a recorded talk in front of an audience. This provides a more hands-on proof of his speaker capabilities.
The contact section features two ways of getting in contact with the client: the Calendly widget and the contact form.
The widget enables users to schedule a video meeting with the client. It uses JavaScript, which is provided by Calendly. The widget is styled to fit the color scheme and responsive layout of the site.
The contact form enables users to submit their name, email address and workshop preferences to find out more about the client's offering.
Note
The contact form is temporarily hidden until the client's CMS migration is completed.
The name and email fields are text input fields, while the workshop preferences are registered by using radio buttons. All 3 of these are required, and the user is advised to fill these in correctly when clicking the Send button.
In addition, the email field requires the presence of an @ symbol, as well as some characters before and after the symbol.
These are the built-in capabilities of the form HTML element family.
The contact form is styled to fit the color scheme and responsive layout of the site.
The footer contains links to the client's social media accounts (LinkedIn, Twitter/X and his blog), as well as the copyright information for the site. These are visually separated by different background colors for additional ease of navigation. The arrangement of footer icons is also responsive.
The navigation links in the footer consist of universally recognisable icons. These change color on hover on devices with pointer capabilities (e.g. mouse or trackpad). This implementation is based on the Love Running Project.
Contrary to other links on the site, the footer links are not underlined, as this would be very unusual for the icons used.
Since the footer links point to external resources, they open in a new tab.
The features of the website were assigned to planned releases as follows:
| Feature | March 14 | May | Q4 |
|---|---|---|---|
| navigation bar | 👍 | ||
| social media links | 👍 | ||
| description of problems | 👍 | ||
| description of workshop | 👍 | ||
| home page & tagline | 👍 | ||
| About information | 👍 | ||
| About picture | 👍 | ||
| relevant experience | 👍 | ||
| email contact form | 👍 | ||
| meeting scheduler | 👍 | ||
| download link for ebook | 👍 | ||
| link to Substack | 👍 | ||
| testimonials (general) | 👍 | ||
| link to Gender blog | 👍 | ||
| videos (from workshops) | 👍 | ||
| testimonials (from workshops) | 👍 |
As a consequence of designing for an older and more straightforward-minded demographic (see Background in the User Experience section), the site avoids visual clutter, such as excessive borders and shadows, elements of very different shapes, color gradients, background images behind normal text, and auto-moving elements of all kinds.
These elements tend to cause problems for a variety of users (e.g. those with visual impairment, executive functioning impairment, vertigo, etc.), so steering clear of these chimes in perfectly with accessibility goals.
The content of the site is structured with semantic tags, and Aria labels are used for sections without headings.
Alt text is used for embedded visual elements.
The color scheme was designed to ensure sufficient contrast for legibility, and modified where necessary to ensure that color combinations meet WCAG AAA standards (see the Accessibility testing section for more detail).
The font choices verge on the conservative side, prioritizing legibility over eccentricity.
External links open in a new tab.
The embedded video does not start auto-playing.
- HTML
- CSS
- Markdown
- Am I Responsive? – to show the website on a range of devices
- Atom – code editor
- Balsamiq – wireframes
- Birme – resize images and convert to
webpformat - Coolors.co - color palettes
- Favicon.io – create the favicon
- FontAwsome – icons for the nav bar and hamburger menu
- Git – version control
- GittHub – store the source files
- GitHub Desktop – GitHub UI
- GitHub Issues – project management (web design and development details, issue tracking, used solo)
- GitHub TOC generator
- GitHub web editor - the only way (known to me) to add videos to the README
- GitPod – Integrated Development Environment (not really used for this project)
- Google Developer Tools – troubleshoot, test responsivity and styling
- Google Docs – edit text copy provided by client
- Google Fonts - import fonts used on the website
- Google Meet – client communication
- Google Sheets – prepare Importance/Feasibility matrix and Features/Releases table
- GrayScaleImage
- Lipsum, loremipsum.io – Lorem Ipsum generators (not used in final version)
- MacDown – Markdown editor
- Pixelied –
jpgtowebpconverter - Preview – cropping images
- Slack – client communication
- TinyPNG – compress images
- WebAIM – color contrast checking
- Wrike – project management (text copy, high-level design questions and specifications in collaboration with the client)
To view the site on your local machine (laptop or desktop), follow these steps:
- click the following link to download the zipped project folder from GitHub.
- double click on the downloaded zip file
enlightened-publishing-main.zipto unzip it. - in the folder
enlightened-publishing, double click onindex.htmlto open it in your browser.
Important
Do not take index.html out of the folder, or change the folder structure in any way, as this may break the file paths defined in the project.
You can fork the repository by following these steps:
- Log in to GitHub (if you don't have a GitHub account yet, you can create one for free).
- Navigate to the project website https://github.com/blahosyl/enlightened-publishing.
- Click on Fork in the upper right part of the screen.
- On the next page you have the possibility to change the repository name. To do this, simply write your desired name in the text field in the center part of the screen. You can also leave the name as it is.
- Click Fork in the bottom right part of the screen.
Tip
If you do rename the repository, make sure to keep the GitHub naming conventions in mind.
The site was deployed on GitHub pages using the steps below. You can follow the same steps to deploy it on your GitHub account after you have forked the repository.
- Log in to GitHub (if you don't have a GitHub account yet, you can create one for free).
- Navigate to the project website https://github.com/blahosyl/enlightened-publishing.
- Click on Settings in the top right of the screen.
- On the left-hand menu, click Pages.
- In the center of the page under Branch, select main from the dropdown menu, then click Save.
- After the site refreshes automatically, a message appears in the top center part of the screen, displaying the link to the deployed site: "Your site is live at https://blahosyl.github.io/enlightened-publishing/".
Note
The link will look stlightly different for you, containing your GitHub username instead of blahosyl.
Note
If you have renamed the repository when forking it, your chosen repository name will appear instead of enlightened-publishing in the deployment link.
Issues and bugs are tracked in GitHub Issues. Some were manually copied from the original repository academic-publishing, as the original repository may not be modified until Q4 2024. See also the Issues of the original repository for solved issues.
Assets related to testing (Lighthouse reports, screenshots and videos) can be found in the testing folder in the repository.
The html file of the project was regularly tested by the W3C validator. The issues discovered during validation are tracked in GitHub Issues.
In the current version of the site, no errors or warnings were found during validation.
The css file of the project was regularly tested by Jigsaw. The issues discovered during validation are tracked in GitHub Issues.
In the current version of the site, no errors or warnings were found during validation.
Lighthouse performance tests were carried out throughout development. Most warnings and improvement suggestions were related to externally embedded elements such as the YouTube video, Google Fonts, FontAwesome or Calendly.
One significant performance issue that was tackled during development is described in Issue #20 (of the original repository).
The current performance score is 88 on mobile and 99 on desktop.
The details of the Lighthouse accessibility audit are found in Issue #19 (of the original repository) and the Automated accessibility testing section below.
This section provides an overview of user stories, and which features facilitate particular user stories. The user stories were introduced in the section User stories above, and are repeated here for the reader's convenience.
For visual illustrations of how individual features work (and that they work as intended, see the Features and Full testing of functionalities sections.
- [CL1] I want to create an online presence specifically for this workshop.
- [CL2] I want to offer potential customers an easy-to-navigate layout.
- [CL3] I want to visually appeal to the target audience, conferring approachability and competence.
- [CL4] I want potential customers to contact me by email.
- [CL5] I want potential customers to book a meeting with me.
- [CL6] I want customers to commission me for holding this workshop.
- [CL7] I want to direct users to my blog on Open Access Publishing.
- [CL8] I want to direct users to my social media accounts (Twitter/X, LinkedIn).
- [CL9] I want to reach potential clients outside my professional network.
| Goal | Feature |
|---|---|
| CL1 | the whole website |
| CL2 | header with logo and nav bar |
| CL2 | visual separation of sections |
| CL3 | color scheme |
| CL3 | About section picture |
| CL4 | contact form |
| CL5 | Calendly widget |
| CL6 | contact form |
| CL6 | Calendly widget |
| CL6 | footer with social media links |
| CL7 | footer with link to blog |
| CL8 | footer with social media links |
| CL9 | the whole website |
| CL9 | Problems & Solutions in the focus position of the website |
| CL9 | SEO meta tags in the html code |
- [VI1] I want my junior colleagues to receive support in navigating academic publishing.
- [VI2] I want to view the site on various-sized devices.
- [VI3] I want to easily navigate between the different parts of the site.
| Goal | Feature facilitating the goal |
|---|---|
| VI1 | the whole website |
| VI1 | responsive design of the whole website |
| VI3 | header with logo and nav bar |
| VI3 | visual separation of sections |
- [FI1] I want to quickly get an overview of the website's purpose.
- [FI2] I want to get informed about the problem the workshop is offering to solve.
- [FI3] I want to know how the workshop proposes to solve the problem.
- [FI4] I want to get an overview of the client's relevant experience in the field of academic publishing.
- [FI5] I want to request more information about the workshop.
| Goal | Feature facilitating the goal |
|---|---|
| FI1 | hero image & text |
| FI2 | Problems subsection |
| FI3 | Solutions subsection |
| FI4 | Credentials image and tagline |
| FI4 | Credential cards (front) |
- [RE1] I want to ascertain that the client's experience makes him an expert on the topic.
- [RE2] I want to read the client's blog on Publishing.
- [RE3] I want to book a meeting with the client.
- [RE4] I want to request more information about the workshop.
| Goal | Feature facilitating the goal |
|---|---|
| RE1 | Credential cards (back) |
| RE1 | Video (expertise in being a speaker) |
| RE1 | footer with link to LinkedIn profile |
| RE2 | footer with link to blog |
| RE3 | Calendly widget |
| RE4 | contact form |
- [FR1] I want to book a meeting with the client.
- [FR2] I want to find the client's social media information
| Goal | Feature facilitating the goal |
|---|---|
| FR1 | Calendly widget |
| FR2 | footer with social media links |
The website was tested on all emulators available on Chrome Developer tools. In addition, it was tested on the following devices:
- iPhone 12 Pro, iOS 17.2.1
- iPad Pro, iPadOS 17.3.1
- iPhone XR, iOS 17.4
- iPhone 15 Pro, iOS 17.3.1
- iPhone 13 mini, iOS 17.13.1
- Huawei P30, Android
- Lenovo10 tablet, Android
- Macbook Air M2, Mac OS Sonoma 14.3.1
- Macbook Air M1, Mac OS Sonoma 14.3.1
- Samsung TV, Tizen browser v3.1.11260
Additional screen shots from the tested devices can be found in the devices folder.
The site was tested on the following browsers:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Opera
The video below demonstrates the responsivity of the site: the arrangement of elements changes along with the viewport size change (click to play):
test-responsivity.mp4
The video below demonstrates how certain elements of the site respond to hover: (click to play):
test-hover.mp4
The video below demonstrates the following features of the header elements (click to play):
- the header is sticky
- header links change color when hovered over
- nav bar links take the user to the respective section on click
- header link takes the user to the top of the page on click
test-nav-bar.mp4
Note
The contact form is temporarily hidden until the client's CMS migration is completed.
The video below demonstrates the following features of the contact form (click to play):
- the Name field is required
- the Email field is required
- the Email field requires the input to contain an @ symbol with characters before and after it
- the radio button choice is
- the form is correctly set up and sends the entered information to the Code Institute infrastructure
test-contact-form.mp4
The video below demonstrates the following features of the Calendly widget (click to play):
- users can see the available meeting slots of the client
- users can select a time slot
- users can enter their name, email address and additional information
- users can book a meeting with an automatic Google Meet link
test-calendly.mp4
The video below demonstrates the following features of the header elements (click to play):
- the links in the footer change color on hover
- the links to the client's social media accounts open in a new tab.
test-footer.mp4
The website was audited for accessibility using Lighthouse. The results and fixes of the test are detailed in Issue #19 of the original repository.
The site in its current form has an accessibility score of 100 for both mobile and desktop.
The WebAIM was used to ensure that the text and background color of each section provides sufficient contrast for legibility.
In the instances where this was not the case, the colors themselves or their arrangement was changed to ensure that accessibility standards are met. Related issues are #47 and #19 of the original repository.
The resulting color scheme is as follows:
The color variable names used in the project are as follows:
| color name | HEX code |
|---|---|
| dark | #004E64 |
| white | #FFFFFF |
| light | #9FFFCB |
| gray | #537D88 |
| dark-gray | #3C5158 |
The paired colors have the following contrasts:
| color 1 | color 2 | contrast | WCAG AAA | comments |
|---|---|---|---|---|
| light | dark | 7.75:1 | ✅ | |
| light | dark gray | 7.02:1 | ✅ | |
| dark | white | 9.23:1 | ✅ | |
| dark gray | white | 4.5:1 | ✅ | only used for large text |
| gray | light | 3.78:1 | ✅ | only used for graphical objects |
Known and solved bugs/enhancements are tracked in the GitHub Issues of this repository and the GitHub Issues of the original repository (as the original repository may not be modified until Q4 2024).
Open issues relating to testing with physical devices (outside Chrome Dev Tools) are #9, #10, #12 and #13.
- Variables
- Recommended image sizes, 2
- Make the header sticky
- Pseudoclasses (credential cards)
- Media query re. pointing device (mouse/trackpad) (credential cards):
- Push 1 paragraph to to bottom of container without affecting the rest (credential cards)
filter(not used in final version)- hue-rotate, 2 (not used in final version)
- calculate filter, 2 (not used in final version)
iframe- Embedding YouTube videos
- Writing on GitHub
- Linking GitHub commits to issues
The text copy on the site was provided by the client and edited by me.
- The books favicon comes from Favicon.io, licensed under CC-BY 4.0
- FontAwesome icons are used for the hamburger menu in the header navigation bar and the footer social media links.
- Hero image by Benjamin Suter on Pexels.
#millionsimage in the Problems & Solutions section by Christa Dodoo on Unsplash, converted to grayscale using Grayscale Image.#frustratedimage in the Problems & Solutions section by Mizuno K on Pexels, converted to grayscale using Grayscale Image.#learn-listimage in the Problems & Solutions section by Sara Kurfeß on Unsplash.#presentationimage in the Problems & Solutions section by Benjamin Ward, provided by the client, modified to reduce optical noise (with permission) by Peter Litauszki.- Client image in the About/Credentials section by Benjamin Ward, provided by the client, colors modified to fit the site's color scheme (with permission) by Peter Litauszki.
The video featured on the site is provided by the client, and is publicly available.
The following READMEs have served as guidance and a template:
- Creating your first README with Kera Cudmore by Code Institute
- Creating your first README by Kera Cudmore
- Bully Book Club by Kera Cudmore
- Bodelschwingher Hof by Ana Runje
- Travel World by Pedro Cristo
- Sourdough Bakes by Siobhan Gorman
- Horizon Photo by Rory Patrick Sheridan
I would like to thank Curt Rice for agreeing to the tight deadlines of this project, and creating the chance for us to work together again after almost a decade 💪
I am also grateful to my mentor Rory Patrick Sheridan for his excellent advice and relaxed, calming presence, which I certainly appreciated on such a packed schedule 🤓
I also want to thank my cohort facilitator, Kristyna Wach, for smoothing out my learning journey, Adam Kestell and Erick Bandelt for helping with all the questions and administrative issues prior to starting the course, and all Code Institute team members working behind the scenes to ensure a productive learning experience 🎉
Last, but certainly not least, I want to thank Peter Litauszki for his support in a range of technical and non-technical matters, from photo editing to supplying a variety of snacks 🧡 21