Continuing from the previous article, this covers further site design changes — specifically the new features added as part of the design update.
UI and UX.
This article briefly covers the features added during the design update. The terms UI and UX were understood in the abstract, but hadn't been consciously applied to this site before. Working through the design changes with the visitor's convenience in mind, these concepts turned out to be exactly what the thinking was pointing toward.
The features added in this design update:
- Language switching from every page, supporting both Japanese and English
- In-page anchors and jump links to ease scrolling through long articles and make re-reading easier
- Simplified in-page links placed in the footer as an alternative to global navigation
- A full-screen background image (hero content) to establish the site's visual identity
There is still plenty of room for improvement and many experimental elements, but the plan is to continue refining the design toward a more usable site.
1. Language switching
Every page on this site is available in both Japanese and English. Language switching was originally handled only through the top menu, but a language switcher link has now been added to the top of every page — including just below the title of the current page.
This feature also uses Bootstrap's btn-group class, with aria-current page set on the active language. Rather than using Drupal's built-in translation feature, the bilingual setup here uses separate content types for Japanese and English. This was a workaround conceived early on with limited understanding of Drupal's features — using a single content type with the translation feature would be the better approach for both structure and ongoing management.
To be revised
There are several items like this — workarounds set up early on that need revisiting now that Drupal's features are better understood. The plan is to address these when migrating from Lightsail to EC2.
<div class="btn-group mb-3">
<a class="btn btn-outline-dark btn-sm" href="/ja/creation/learn033">Japanese</a> <a class="btn btn-outline-dark btn-sm active" href="#" aria-current="page">English</a>
</div>2. Placing anchor links
Most articles on this site cover situations encountered while working with Drupal — problems solved and things worth noting. The primary purpose is to keep a personal record while providing a reference for others who run into similar situations. The content tends to run long and isn't always the easiest read.
Given the length, it's likely that readers need to scroll back and re-read sections to follow the content. Relying on the browser scrollbar alone makes that awkward, so anchor links have been added to the article headings to enable in-page navigation, along with jump links to move between them. The anchors are also linked from the fixed footer menu.
2-1. Anchors and jump links
A div with a class is used for the anchor rather than a plain anchor element because the top menu is set to fixed-top. A straightforward anchor placement would result in the page top being hidden beneath the menu. By adding a top margin to the anchor class, the section content remains visible below the menu even when navigating directly to an anchor link.
Jump links also use Bootstrap's btn-group class, just like the language switcher. Adding them is simply a matter of specifying the class and setting the anchor link — straightforward to implement.
Anchors are placed on headings, but the separate jump links serve two purposes: they allow navigation to the previous or next heading, and by assigning a number here, the footer menu (described later as an alternative to global navigation) can reference headings by number to enable in-page navigation.
// Place anchor on heading
<div class="anchor">
<div class="anchor_pad" id="an-link">
<h3>
Anchor and Jump Links
</h3>
</div>
</div>
// Jump links
<div class="btn-group mb-3">
<a class="btn btn-outline-secondary btn-sm" href="#"><< Prev</a> <a class="btn btn-outline-dark btn-sm active" href="#1" aria-current="page">Topic #01</a> <a class="btn btn-outline-secondary btn-sm" href="#2">Next >></a>
</div>Anchor and Jump Links
Bootstra5 Button Group documentation
The Button Group component provided by Bootstrap5 is used here. Reading this documentation alongside the Button component documentation will give a better understanding of how to use it.
3. Global navigation
Tech articles commonly feature heading links in a side menu — this is what's known as global navigation, a feature that lets readers move through the article via heading links in the sidebar. The Bootstrap documentation pages referenced throughout these articles have a list of heading links on the right side — that's global navigation.
Global navigation was considered for this site as well. On mobile, global navigation typically collapses into something like a burger menu and moves to the top. Since the design update was motivated in part by the annoyance of having to open a burger menu, the preference here is to use a fixed menu instead.
When listing headings in a side menu, the wording of each heading becomes important. The challenge with these articles is that conveying the content concisely tends to produce headings that read more like sentences. When headings overflow a single line, the global navigation in the side menu becomes hard to read and visually untidy.
Alternative approach
For these reasons, rather than placing global navigation in a side menu, a more practical alternative was sought. The solution is a fixed footer menu with links for in-page navigation.
The challenge is that a fixed footer with too many links takes up space and makes the article harder to read. The solution is to assign a simple number to each anchor set in the headings, then link to those numbers in the footer — keeping the footer compact.
Experimental interface
First-time visitors may not immediately understand what the links do, but clicking one makes the function obvious right away. For readers who have read multiple articles or visit the site repeatedly, it quickly becomes a familiar part of the site's interface — which is why this approach was chosen.
Since it looks different from conventional global navigation, it may not be immediately recognized as such — but using it ends up being functionally similar. This is an experimental feature, so it may be replaced if a better interface comes along.
Sticky bottom
The footer menu described above as an alternative to global navigation uses Bootstrap's nav component with the sticky-bottom class. In these articles, sticky-bottom functions as a fixed footer — but at the end of the article it becomes a regular footer and stops appearing as the page is scrolled further. This is achieved by using Drupal's Block Layout to display a related articles View at the bottom of the page. Writing the footer directly into the content means it ceases to be a fixed footer once the content finishes rendering.
It is something of a puzzle to think through, but this behavior is achieved by combining Drupal's functionality with Bootstrap's component behavior.
There are many places in this site built with similar thinking — not strictly correct in terms of feature usage, but functional in practice.
<nav class="navbar navbar-dark sticky-bottom p-1 pb-0" style="background-color:#ffffff;">
<div class="container-fluid">
<p class="menu">
Topic : <a class="button_anchor" href="#">Top</a> <a class="button_anchor" href="#1">#01</a> <a class="button_anchor" href="#2">#02</a> <a class="button_anchor" href="#3">#03</a>
</p>
<p class="menu">
Article : <a class="button_Article" href="/en/term-article-drupal">Drupal</a> <a class="button_Article" href="/en/term-article-web">Web</a> <a class="button_Article" href="/en/term-article-macbook">Mac</a> <a class="button_Article" href="/en/term-article-aws">AWS</a>
</p>
</div>
</nav>4. Hero content
Hero content (a full-screen image with the page title at the top) has been added to the Top page and to the Views and Taxonomy pages that list articles. Originally a text-based site, adding some visual identity and branding was the motivation. The background images are personal photos rather than specifically branded imagery, so the branding effect is limited — it's part of the web design rather than a deliberate brand statement. The effect is probably modest, but it may help first-time visitors get a feel for the site's character.
The hero content added this time is a placeholder for now and may change. Typically, images that match the article content are used, and royalty-free stock photos are probably the most common choice.
License and fully original content
A core principle of running this site is that all content — including all materials — is original and the license is held personally. Photos used on the site are taken by the site owner and feature only the owner or the owner's possessions. Articles are similarly written entirely in the owner's own words from personal experience. The personal photos are self-portraits taken using a tripod.
The hero content here uses personal photos, so the license is fully held here — but whether a personal photo relates to a Drupal article is a reasonable question. This is a design concept issue worth working through, and the plan is to think about creating more relevant imagery.
The actual implementation
Hero content sounds like something complex, but it is essentially just a near-full-screen image with text overlaid — nothing that needs to be overthought.
It is built using CSS and Bootatrap's classes. The CSS and HTML involved would make this article too long, so the specifics will be covered in a future article.
The implementation uses Drupal's standard features. Multiple hero content blocks are created for different purposes and called via Block Layout as needed. One thing to note: the top menu on this site is fixed. Without accounting for the top margin, part of the image can end up hidden behind the menu. While a baseline top margin for the body and core layout is defined in the CSS, each type of content — regular articles, hero content, anchor-based pages — requires individual top margin adjustment. Without this, titles and headings get hidden.
For the hero content added here, top margin adjustment is handled by adding a one-line comment that matches the height of the top menu, in addition to the standard top margin.
Because this site has been built incrementally while learning, existing elements and newly added features require this kind of fine-tuning. It reflects a pattern of adding new elements as knowledge grows — which is something to be more careful about. It is also a consequence of running the site as both a staging environment and a live site simultaneously.
The site is currently built on AWS Lightsail with Bitnami's Drupal instance. A migration to EC2 and RDS is planned for the near future, at which point the lessons from current experience will be applied — starting with a more deliberate site design before going live.
Conclude
These two articles have covered the design changes. Building the site while learning Drupal meant design was consistently pushed to the back — so taking a closer look at it this time was a worthwhile exercise. That said, the current design is far from finished, and a more readable and usable version is possible. Changes will be made as issues come up.
This article has covered the changes made and touched briefly on Bootstrap usage. The details of Bootstrap component integration and CSS writing have been kept brief to avoid making the article too long, but these are important topics for UI/UX — a more detailed explanation will be covered when the opportunity arises.
An update was run on Drupal CMS, which had been left untouched since dealing with installation errors. Errors and warnings appeared, making the update impossible to complete — so a reinstall was carried out to resolve the situation.