Skip to content

A responsive landing page for workshops on academic publishing | Portfolio Project 1 | CodeInstitute

Notifications You must be signed in to change notification settings

blahosyl/academic-publishing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Enlightened Publishing

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

Mockup image of the page on various devices

View the deployed page on Github Pages

GitHub last commit GitHub contributors GitHub language count

Contents

You can also navigate the document structure by clicking the list icon in the top right corner.

Navigate the document by clicking the list icon

User Experience (UX)

Background information

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)
Initial stage

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
direct users to Gender blog 3 3
Current stage

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 Publishing
  • direct 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
add subscribers to email list 4 1
have potential customers email 5 4
have users book meetings 5 5
get commissioned 5 5
direct users to Substack 5 1
direct users to Publishing blog 3 5
direct users to social media 3 5
have users download ebook 2 1
direct users to Gender blog 3 1

User stories

Client goals

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.

Visitor goals

  • [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.
First-time visitor goals
  • [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.
Returning visitor goals
  • [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.
Frequent visitor goals
  • [FR1] I want to book a meeting with the client.
  • [FR2] I want to find the client's social media information

Design

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.

Color scheme

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 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

Flow

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:

  1. Problems & Solutions section
  2. About/Credentials section titled "Why me?"
  3. 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.

Imagery

Hero image

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).

Hero image

Problems & Solutions section imagery

Problems imagery

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.

Problems section image 1

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).

Problems section image 2

Solutions imagery

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.

Solutions section image 1

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.

Solutions section image 2

About/Credentials section imagery

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.

Solutions section image 2

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.

Contact section imagery

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.

Header design

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.

Header design

Hero image design

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.

Hero section design

Problems & Solutions section design

Colors and images | Problems & Solutions section

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.

Layout | Problems & Solutions section

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.

Problems & Solutions section design

About/Credentials section design

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.

Colors and images | About/Credentials section

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.

Layout | About/Credentials section

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

About/Credentials section image design

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.

Credential cards design

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.

Video design

Contact section design

Colors and images | Contact section

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.

Layout | Contact section

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.

Calendly widget design

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.

Contact form design

Footer design

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.

Footer design

Typography

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

Wireframes were prepared using Balsamiq.

Wireframe for mobile | Problems & Solutions section

Wireframe mobile | Problems & Solutions section

Wireframe for mobile | About/Credentials section

Wireframe mobile | About/Credentials section

Wireframe for mobile | Contact section

Wireframe mobile | Contact section

Wireframe for laptop | Problems & Solutions section

Wireframe laptop | Problems & Solutions section

Wireframe for laptop | About/Credentials section

Wireframe laptop | About/Credentials section

Wireframe for laptop | Contact section

Wireframe laptop | Contact section

Features

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.

Header

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.

The header is responsive and sticky

Logo

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).

Nav bar

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.

The "hamburger" navigation functionality

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).

Hero section

This section features the hero image, defining the feel and color scheme of the website, as well as the main tagline of the project.

Hero section is responsive

Problems & Solutions section

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.

The Problems & Solutions section is responsive

About/Credentials section

This section provides information to visitors about the client's professional experience in academic publishing.

Credentials image and tagline

The first part of the section introduces the client, showing a full-width picture, his name, tagline and basic professional information.

The Why me? image is responsive

Credential cards

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 credential cards are responsive

Video

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 video is responsive

Contact section

The contact section features two ways of getting in contact with the client: the Calendly widget and the contact form.

Calendly widget

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 Calendly widget is responsive

Contact form

The contact form enables users to submit their name, email address and workshop preferences to find out more about the client's offering.

Note

To facilitate assessment of this project, the contact form is not connected to the client's email system in its current implementation, but rather to Code Institute form testing capabilities.

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 Contact form is responsive

Footer

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.

The footer is responsive

Since the footer links point to external resources, they open in a new tab.

Future implementations

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) 👍

Accessibility

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.

Technologies used

Languages used

  • HTML
  • CSS
  • Markdown

Frameworks, Libraries & Programs Used

  • Am I Responsive? – to show the website on a range of devices
  • Atom – code editor
  • Balsamiq – wireframes
  • Birme – resize images and convert to webp format
  • 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
  • Pixeliedjpg to webp converter
  • 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)

Deployment

Local deployment

To view the site on your local machine (laptop or desktop), follow these steps:

  1. click the following link to download the zipped project folder from GitHub.
  2. double click on the downloaded zip file academic-publishing-main.zip to unzip it.
  3. in the folder academic-publishing, double click on index.html to 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.

Fork the repository

You can fork the repository by following these steps:

  1. Log in to GitHub (if you don't have a GitHub account yet, you can create one for free).
  2. Navigate to the project website https://github.com/blahosyl/academic-publishing.
  3. Click on Fork in the upper right part of the screen.
  4. 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.
  5. 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.

Deployment on GitHub Pages

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.

  1. Log in to GitHub (if you don't have a GitHub account yet, you can create one for free).
  2. Navigate to the project website https://github.com/blahosyl/academic-publishing.
  3. Click on Settings in the top right of the screen.
  4. On the left-hand menu, click Pages.
  5. In the center of the page under Branch, select main from the dropdown menu, then click Save.
  6. 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/academic-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 academic-publishing in the deployment link.

Testing

Issues discovered during testing are tracked in GitHub Issues.

Warning

Note: because of mistakenly starting issues in the wrong repository and later transferring them to the correct one, issue numbers in the commit messages up to commit nr. 325a625dc5de4d670ef58a9617ec092529db10f1 don't match the new issue numbers in the repository. Unfortunately, the numbering of the transferred issues cannot be changed anymore.

Tip

However, each issue has the corresponding commits linked, and these links work correctly. In addition, subsequent commit messages after 325a625dc5de4d670ef58a9617ec092529db10f1 point to correct issues.

Assets related to testing (Lighthouse reports, screenshots and videos) can be found in the testing folder in the repository.

Automated testing

HTML validation with theW3C validator

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.

HTML: no issues or warnings

CSS validation with Jigsaw

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.

CSS: no issues or warnings

Lighthouse

Lighthouse performance testing

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.

The current performance score is 88 on mobile and 99 on desktop.

Lighthouse accessibility testing

The details of the Lighthouse accessibility audit are found in Issue #19 and the Automated accessibility testing section below.

Manual testing

Testing user stories

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.

Client goals | testing

|header with logo and nav bar|

  • [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
Visitor goals | testing
  • [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
First-time visitor goals | testing
  • [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)
Returning visitor goals | testing
  • [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
Frequent visitor goals | testing
  • [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

Full testing of functionalities

Devices

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.

Browsers

The site was tested on the following browsers:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge
  • Opera
Responsivity testing

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
Hover effects testing

The video below demonstrates how certain elements of the site respond to hover: (click to play):

test-hover.mp4
Header testing

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
Contact form testing

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
Calendly widget testing

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
Footer testing

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

Accessibility testing

Automated accessibility testing

The website was audited for accessibility using Lighthouse. The results and fixes of the test are detailed in Issue #19.

The site in its current form has an accessibility score of 100 for both mobile and desktop.

Accessibility score: 100

Manual accessibility testing

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.

The resulting color scheme is as follows:

Color palette

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

Bugs

Known and solved bugs/enhancements are tracked in GitHub Issues.

Warning

Note: because of mistakenly starting issues in the wrong repository and later transferring them to the correct one, issue numbers in the commit messages up to commit nr. 325a625dc5de4d670ef58a9617ec092529db10f1 don't match the new issue numbers in the repository. Unfortunately, the numbering of the transferred issues cannot be changed anymore.

Tip

However, each issue has the corresponding commits linked, and these links work correctly. In addition, subsequent commit messages after 325a625dc5de4d670ef58a9617ec092529db10f1 point to correct issues.

Open issues delating to testing with physical devices (outside Chrome Dev Tools) are #60, #61, #62 and #66.

Credits

Code

Text content

The text copy on the site was provided by the client and edited by me.

Media

Images

Video

The video featured on the site is provided by the client, and is publicly available.

READMEs

The following READMEs have served as guidance and a template:

Acknowledgements

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 🧡

About

A responsive landing page for workshops on academic publishing | Portfolio Project 1 | CodeInstitute

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages