16/01

Build in HTML//JS/SVELTE

First I started "slicing" the amount of webinars to 4 items maximum, otherwise the page would be too long. After that I retrieved the data from the URL and loaded it in with a LET statement. I also added a joins line because there are multiple tables in our database.

 // Retrieves other data from diffrent tables through let and a joins structure
    let newestWebinars = data.webinars.slice(0,4).map(webinar => ({
    title: webinar.title,
    speaker: webinar.speakers.map(s => s.avl_speakers_id.fullname).join(', '),
    date: webinar.date,
    thumbnail: webinar.thumbnail,
    slug: webinar.slug
  }));

Right after I wrote the HTML, it's an unordered list with 4 list items in there. Theres also an href link with a slug so every item is redirecting to the right webinar page. In the heading is the title of the webinar visible and paragraph elements share the speaker and date.

<div class="watch-next">
    <h2>Watch next</h2>
    <ul class="carousel">
      {#each newestWebinars as webinar}
        <li>
          <a href="/webinars/{webinar.slug}">
            <img src="https://fdnd-agency.directus.app/assets/{webinar.thumbnail.id}?width=384&fit=cover&format=avif" alt={webinar.title} width="384" height="384" loading="lazy">
            <div>
              <h3>{webinar.title}</h3>
                <p>{webinar.speaker}</p>
                <p>{webinar.date}</p>
            </div>
          </a>
        </li>
      {/each}
    </ul>
  </div>

CSS

For the mobile version I used a carousel similar to the other ones on the website so it feels familiar for the user. Desktop users have a sidebar on the page with a list of items. I gave the cards a standard size of 80 percent because of the calc function. This is a nice addition because it's clear for the user that the carousel works and that multiple webinars are available. I also added scroll snap and a transition so it feels smooth.

For the sidebar I used a grid to align the items on the side, for the mobile version I used a display: flex.
This is changed in a media query.

//MOBILE
.watch-next{
    height: auto;
    max-width: 500px;
    width: 90vw;
    margin: 0 auto;
    position: relative;
    z-index: 99;
  }
  .watch-next a{
    text-decoration: none;
  }
  .watch-next ul{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;
    scroll-behavior: smooth;
    margin: 0 auto;
    gap: 10px;
    padding: 10px 0;
    transition: all .3s ease;
  }
  .watch-next li{
    flex: 0 0 calc(100% - 20%);
    scroll-snap-align: start;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .watch-next img{
    grid-area: a;
    height: auto;
    width: 200px;
    border-radius: 10px;
  }

//DESKTOP

 .watch-next{
      grid-row: 4;
      grid-column: 2;
    }

    .watch-next ul{
      display: grid;
    }

    .watch-next li{
      display: flex;
      justify-content: start;
      align-items: center;
    }

    .watch-next p, h3{
      margin: 10px 0px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      word-break: break-all;
      overflow: hidden;
      color: var(--text-color);
      transition: .2s;
      text-overflow: ellipsis;
    }
    
    .watch-next a{
      text-decoration: none;
      margin: 10px 0;
      transition: .2s;
      border-bottom: 2px solid var(--primary-color);
    }

    .watch-next a:hover h3,
    .watch-next a:hover p {
      color: var(--hover-state-color);
    }

    .watch-next img{
      width: 384px;
      height: auto;
    }

Testing

After building I did some tests, including a lighthouse and user test.

Lighthouse

First I executed a lighthouse test. Because some performance items were already improved (see testing/fix phase 1) our score was already quite high. After doing a second test the performance is at a score of 98 and the accessibility at 95. There are a few small things we need to fix yet but they are on other parts of the site.

HTML/CSS Validator

The next step was a W3C test for the HTML and CSS. Apart from the obvious svelte, webkit and data errors my HTML and CSS passed without any problems at all.

Browser/responsiveness TEST

I also tested this component in those different browsers:

Microsoft EDGE
FIREFOX
Chrome Canary
Safari

The component is responsive as well, see the images below:

User test

In the end I did an user test as well, see the results in the text and link below:

#112

English

Scenario

As a user, I would like to get more information about radiotherapy for the head and neck area. I also want to leave a comment because some things are still unclear. After the webinar has ended, I want to quickly move on to the next one. How can I do this as quickly and efficiently as possible?

Task List

Find a webinar that falls under "head and neck."
Leave a comment under the video.
Quickly switch to another webinar when you are done watching.

Results

The webinar was easy to find through the categories, so "head and neck" was located very quickly. The thumbnail and category also made it very clear what it was about. The comment was left immediately because the Q&A section is easy to find on the page (visual hierarchy). Switching to another webinar was a bit less smooth because it required navigating back to the main page before selecting a new webinar. This was because the "watch next" section was not immediately visible. Apart from that, everything was clear.

Nederlands

Scenario

Als gebruiker wil ik graag meer informatie krijgen over radiotherapie voor het hoofd en nek gedeelte. Ook wil ik een comment achterlaten omdat sommige dingen nog onduidelijk zijn. Nadat de webinar is afgelopen wil ik snel de volgende zien. Hoe kan ik dit als gebruiker zo snel en efficient mogelijk doen?

Takenlijst

Zoek een webinar die onder "hoofd en nek" valt.
Laat een comment achter onder de video
Wissel snel naar een andere webinar wanneer je klaar bent met kijken

Resultaat

De webinar was goed te vinden door de categorieën, dus head en neck was erg snel te vinden. De thumbnail en categorie maakt het ook erg duidelijk waar het over gaat. De comment werd meteen achtergelaten omdat de q-a sectie goed te vinden is op de pagina (visuele hiërarchie). Het wisselen van webinar ging iets minder vlot omdat er eerst terug naar de pagina werd genavigeerd voordat er een nieuwe webinar werd uitgekozen. Dit omdat de watch next sectie niet als eerste zichtbaar was. Voor de rest was alles duidelijk.

Sectie "Watch Next" aanmaken. #87

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions