Implementation, development and maintenance.

During my internship at Metropolia’s Valovirta in 2001, I had the pleasure to start work with the National Museum of Finland on the website of the Metal 2022 hybrid conference. I took on the project to implement the work of Henri Eskelinen (website draft) and develop it further. Logo design by Allu Laitila.

I was honored to be asked to keep maintaining and developing the project after I graduated and am currently working on poster and rollup designs for the upcoming conference, as well as designing the visual appearance of the streaming platform, hosted by Liveto.

The website needed to be in English, responsive and accessible, following the rules of the WCAG 2.1. The purpose of the website was to be informational, with sign-up, payment methods and streaming services to be added on later.

In the Adobe XD draft I received, were fonts and colors that needed accessibility checking. The title font was Volkhov and body text Open Sans. No issues there.

My colour contrast checker of choice is the Paciello Group’s program CCA. I had two colors to check, besides white:

There were options to have a white background or grey background, but following the WCAG 2.1 guidelines, the blue green colour’s contrast ratio unfortunately failed on the grey background that required darkening, as I wished to retain the blue green color to highlight content and links. You may see the new darkened background colour #040202 as the background of the page you’re currently on.

As the client wished for a dark background, I needed to do adjustments to the header. Wishing to keep the menu background within the dark theme caused issues with the logos of the hosts needing white backgrounds. I resolved this by giving them their own white space above all other content and additionally, giving the threshold between the elements a more dynamic slant.

• Windows 10
• WordPress
• Local by Flywheel
• VS Code
• Firefox development tools
• WAVE Evaluation Tool
• NVDA screen reader

WordPress Plugins

• WPvivid Backup Plugin for version control and migration
• Code Snippets for the ease of turning code bits on and off
• WPForms Lite for contact forms and surveys
• Lightbox with PhotoSwipe as the most accessible lightbox plugin I could find
• Yoast SEO Rank Math SEO
• Cookie Notice & Compliance for GDPR / CCPA Complianz for the cookie consent banner
• Security plugins

WordPress Theme

Reykjavik

Problem-solving

Here are some issues I ran into and the ways I solved them.

I placed the big main heading backgrounds with CSS. However, this is not accessible. As a workaround, I placed thumbnails of the images in a way that they could be interacted with: either by opening them into a lightbox or reading the caption with a screen reader. I placed a little magnifying glass icon to show that the thumbnail is interactive. Added a little drop shadow under both thumbnail and magnifying glass to make it pop.

I registered a widget area for the thumbnail in order to place it into the “Notice” post category page:

/*** Register widget area to Notice page for title thumbnail: */
function noticepage_widgets_init() {
    register_sidebar( array(
        'name'          => 'Image Thumbnail for Notice Page',
        'id'            => 'custom-widget-noticepage',
        'before_widget' => '<div class="wp-block-group__inner-container">',
        'after_widget'  => '</div>',

    ) );
}
add_action( 'widgets_init', 'noticepage_widgets_init' );

/*Place noticepage widget to category page:*/
function widget_to_notices_page() {
    if ( is_category( 'notice' ) OR is_singular() ){
        if ( is_active_sidebar( 'custom-widget-notice' ) ) : ?>
            <aside id="custom-widget-notice" class="group-otsikkokuvake wp-block-group">	
                <?php dynamic_sidebar( 'custom-widget-noticepage' ); ?>
            </aside>
            <?php endif; 
    }
}
add_action('tha_entry_before', 'widget_to_notices_page');

I needed a color to differentiate between visited and unvisited links and for when you hover over them with the cursor. I ended up keeping the original blue green for the visited links and created a brightened version.

On white cards, I switched it up and made the original color as the default, with a darker color for visited links.

I added an additional underline on hover for improved clarity.

Additionally, I added a code snippet to mark external links with an icon (also seen on the top of this page) and an aria-roledescription of “external link”, so a screen reader would read “external link” instead of just link. The snippet also changed the links to open in a new window, which is not necessarily good usability. I disabled that feature on my site.

        function linkopener(a) {
            let trgt = a ? "_blank" : "_self";
            let link = document.links;
            for (let i = 0; i < link.length; i++) {
                if (link[i].href.search("metal2022.org") == -1) {
                    link[i].addEventListener("click", function() {
                        this.target = trgt;
                    });
                    link[i].target = trgt;
                    link[i].className += 'link-external ';
                    link[i].setAttribute('aria-roledescription', 'external link');
                }
            }
        };
        $(document).ready(function() {
            linkopener(true);
        });

Sliders were another wish of the client. I chose the plugin Smart Slider 3 as it was the most accessible slider plugin I could find.

By tweaking the settings and CSS, I could make it more accessible. Instead of bullets, a thumbnail gallery with titles at the bottom helps in visualizing what’s next. The previous/next arrows were a little hard to see as well, but that was a quick fix in CSS. They’re up/down arrows, because the sliding motion is as such.

Since my clients would be logging in, I decided to customize the WordPress login page to suit the event brand.

I edited the login page to fit the brand image by simply linking a custom stylesheet:

function custom_login_style(){
    wp_enqueue_style( 'style-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action('login_enqueue_scripts', 'custom_login_style');

I also changed the logo link to go to the Metal 2022 homepage instead of WordPress:

function change_loginheaderurl ( $url ) {
    $url = "https://www.metal2022.org/";
    return $url;
}
add_filter( 'login_headerurl', 'change_loginheaderurl');

I set up the streaming platform’s appearance and designed the posters and rollups for the conference, which was held successfully on the appointed week. Below is a visual representation of how the landing page (or lobby) of the platform looked like in desktop mode:

Since the emergence of WordPress 6.0 and block patterns, I see many things I would do differently if I were to start planning the site now. As it is now, it still works as intended, and has been a pleasure to work on.