2024/homepage

From IndieWeb

2024 homepage is a series of initiatives to update the homepage.

Supporting Both Vector Skins

The year began with a smaller, tightly-focused project to make the homepage work with both MediaWiki Vector skins. This, in turn, enabled switching the website over to the newer, mobile-friendly skin.

Background

The site’s MediaWiki installation provides the following skins:

The site previously used the Vector legacy (2010) skin, with a number of customisations to the homepage. These made the homepage more visually appealing, but also removed some UI elements to make it work on mobile. These customisations didn’t work with the newer skin, and switching to it broke the homepage.

The new Vector (2022) skin is the default on English Wikipedia, making it familiar to many. It includes improvements to the mobile layout and reading experience, and incorporates changes developed over several rounds of prototyping, design and testing.

The primary goal of any initial redesign to the homepage in 2024 was to enable switching to the new skin for signed-out users, making the homepage (and the rest of the wiki) usable for users on mobile and small-screen devices.

Redesign Proposal

On 2024-01-19, Paul Robert Lloyd proposed a tightly-focused homepage redesign that would:

  • Keep the existing content and sections while merging the 2 pieces of content that provided a summary of what the IndieWeb is and showing them at the top of the page.
  • Reduce the size of ‘What is the IndieWeb’ heading (but keeping it for SEO) and increasing the font size of the answer below it. This would provide a lead in to the rest of the page.
  • Update the 3 concept icons to use updated icons and easier to maintain MediaWiki image templates.
  • Adjust the background colours to use pastel variants of the IndieWeb color palette, with section colours taken from the corresponding emoji used for each heading.
  • Add space between each section to complement the layout when the menu sidebar is shown.

In addition to homepage updates, he also proposed applying limited CSS changes so that the site used a larger type size for body text (16px instead of 14px), making content more legible and less intimidating, complemented the design of events.indieweb.org and looked distinct from Wikipedia.

Previous Design

On mobile:

  • While accommodations were made for smaller screens, the homepage still had layout issues.

    While accommodations were made for smaller screens, the homepage still had layout issues.

  • With Vector 2022 enabled, the logo was repeated and the search field misplaced.

    With Vector 2022 enabled, the logo was repeated and the search field misplaced.

  • The Vector 2010 skin doesn’t provide a mobile layout, so other pages appeared broken and difficult to read on smaller screens.

    The Vector 2010 skin doesn’t provide a mobile layout, so other pages appeared broken and difficult to read on smaller screens.

Desktop:

  • Homepage, with the default Vector 2010 (Legacy) theme.

    Homepage, with the default Vector 2010 (Legacy) theme.

  • Homepage, with the Vector 2022 theme.

    Homepage, with the Vector 2022 theme.

Updated Design

On mobile:

  • The redesigned homepage design on mobile.

    The redesigned homepage design on mobile.

  • Content page with tweaks to the typeface and larger body font size.

    Content page with tweaks to the typeface and larger body font size.

Desktop:

  • The redesigned homepage on desktop, with main menu hidden.

    The redesigned homepage on desktop, with main menu hidden.

  • The redesigned homepage on desktop, with main menu shown.

    The redesigned homepage on desktop, with main menu shown.

  • The redesigned homepage on desktop, with the Vector 2010 (Legacy) theme.

    The redesigned homepage on desktop, with the Vector 2010 (Legacy) theme.

Rollout

The changes were rolled out in stages:

Monday 12 February

Updated the design of the less visited language home pages. This gave us an opportunity to see the new styles in both Vector 2010 and Vector 2022 skins and spot any issues moving to the new design.

Tuesday 13 February

Updated the homepage to use the new styles, while maintaining Vector 2010 for a day.

  • Updated English language Main_Page to use new container styles
  • Updated MediaWiki:Common.css to
    • Remove old homepage rules (.home-content, #home-header ul, etc.)
    • #bodyContent, replaced by better targeted skin-vector-2022 #mw-content-text rule
    • #content .inverted and .inverted rules, as these rules were no longer used anywhere
    • Add Vector 2022 skin fixes
    • Add typography refinements

Wednesday 14 February

Switch default skin to Vector 2022

A few issues were spotted on the signed out homepage, which we weren’t able to test while Vector 2010 was the default skin:

  • By hiding the page toolbar, there was no longer any link to edit the home page. We added a link to the set of wiki resource links at the foot of each page.
  • By hiding the login link, it was no longer possible to sign into the wiki. We added a login link to the sidebar, and the foot of the home page as a temporary fix.

Friday 16 February

  • Login link is back, in the top right corner as before, consistently across the homepage and individual wiki pages

Outstanding issues

  • The sidebar menu is hidden by default for signed out users. We should investigate if this behaviour can be changed, or if we need to force it’s appearance for signed out users.
  • To reduce the number of CSS customisations, it may be possible to customise the links that show in the signed out login menu. With this change in place, we can remove the CSS that hides the login link.
    • What issue is remaining to be fixed to resolve this?
Retrieved from "https://indieweb.org/wiki/index.php?title=2024/homepage&oldid=93314"