Design revamp #2

Continuing from last time, we will explain the changes to the website design. This time, we will summarise the new features that have been added as part of the design changes.

UI and UX.

This time, I will briefly summarise the features that were added when the design was changed. Although I understood the terms UI and UX, I had never considered applying them to my own website before. When changing the design this time, I felt that considering the convenience of the viewers ultimately led me to these terms.

All pages on this website are available in Japanese and English. Previously, language switching was available from the top menu, but now language switching links have been added to the top of every page. Links are also available below the title of this page.

This feature also uses Bootstrap's btn-group class and specifies the page for aria-current in the relevant language. My page does not use Drupal's native translation feature, but instead supports two languages by preparing Japanese and English content types separately. This method was devised when I first started using Drupal and did not yet fully understand its features. Ideally, it would be better to use the translation feature with the same content type, as this would be more advantageous in terms of both construction and subsequent management.

Future revision.

We have identified several areas for improvement in the translation functionality we initially configured when we first started using Drupal. These changes have become apparent as we have gained a better understanding of the features Drupal provides. We plan to implement these changes when we migrate from Lightsail to EC2.

Language switching.

<div class="btn-group mb-3">
   <a class="btn btn-outline-dark btn-sm active" href="#" aria-current="page">Japanese</a> <a class="btn btn-outline-dark btn-sm" href="/en/en-creation/learn032">English</a>
</div>

It will be Displayed as follows.

Most of the articles on this site are based on my experiences with Drupal and things I found interesting. My main purpose is to create articles that serve as a reference for others who encounter similar situations. However, this can result in articles that are long and difficult to read.

Since the articles are long, I think there are many cases where readers need to go back and reread the article to understand the content. When rereading, it can be inconvenient to navigate within the page using only the browser's scroll bar, so I have added jump links to the article headings to make it easier to move within the page. The anchors I have added are also linked in the fixed menu in the footer.

2-1.Anchors and jump links.

The reason why we are using div for the anchor and setting the class is that the top menu is set to fixed-top, and if we simply set the anchor, the top of the page will be hidden under the top menu. By specifying the top margin for the anchor class, the page will not be hidden under the top menu even when the anchor link is clicked.

Jump links use the Bootstrap btn-group class, just like language switching. Installation is very easy, as you only need to specify the class and set the anchor link.

Anchors are designated as headings, but jump links have been added separately for two reasons: to enable navigation from the current heading to the previous or next heading, and to allow headings to be recognised as ‘No’ for the purpose of enabling navigation within the page from the footer menu, which serves as a substitute for the global navigation described later.

Anchors and jump links

// Set anchors in headings
<div class="anchor">
   <div class="anchor_pad" id="an-link">
       <h3>
           Anchors and jump links
       </h3>
   </div>
</div>
// jump link
<div class="btn-group mb-3">
   <a class="btn btn-outline-secondary btn-sm" href="#">&lt;&lt; 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 &gt;&gt;</a>
</div>

It will be displayed as follows. There is space because the top margin is set for the anchor.

When looking at tech-related articles, you often see links to article headings in the side menu. This is commonly referred to as global navigation, which allows users to navigate within an article using the headings as guides via links in the side menu. If you look at the Bootstrap documentation page we are discussing today, you will see a list of links to article headings on the right side of the page. This is what we refer to as global navigation.

I was considering adding this global navigation to my articles as well. Global navigation is typically converted to a burger menu on mobile devices and moves to the top menu. During the recent design change, we considered that the action of expanding the burger menu could be cumbersome, so we are considering using a fixed menu instead.

When arranging headings in the side menu, it is important to consider how to name them. One of the things I struggle with in my articles is the titles of the headings. When I want to concisely express the content of the article, the titles inevitably become more like sentences. This often results in headings that cannot fit into a single line, making the global navigation I have carefully placed in the side menu difficult to read and unattractive.

Alternative

For these reasons, we are considering a more user-friendly alternative to placing global navigation in the side menu. As an alternative, we will display a fixed menu in the footer with links to move within the page.

The problem is that when the area of the fixed footer containing the links becomes too large, it becomes difficult to read the article. To address this, we assign simple numbers to the anchors placed in the article as explained in the previous section, and then link these numbers in the footer to create a footer link that does not take up space.

Trial interface

Although it may be difficult for first-time visitors to understand what the site does, once you click on a link, the functions are simple and easy to understand. For those who read multiple articles or visit the site repeatedly, these functions are familiar features of our site's interface, so we have decided to keep them as they are.

This feature looks different from the usual global navigation, so readers may not immediately recognise it as global navigation. However, we believe that using this feature will ultimately provide a similar experience to global navigation. This feature is currently being tested, and we may change it if a better interface is found.

Sticky bottom

The footer menu that replaces the global navigation described above uses Bootstrap's nav component with the Sticky Bottom class specified. In my article, the Sticky Bottom functions as a fixed footer, but at the end of the article, it is set to function as a regular footer and no longer appears after scrolling. This is achieved using Drupal's block layout feature, which displays the ‘Related Articles’ view at the bottom of the page. By directly embedding the footer in the content, it no longer functions as a fixed footer once the content has finished loading.

It's more of a mental exercise or puzzle-like concept, but it's a feature that's achieved by combining the functionality of Drupal with the components provided by Bootstrap.

There are many parts of my website that were constructed based on this idea. Although these methods are not correct in terms of functionality or usage, they are valid concepts in practical use.

Alternative global navigation

<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="/term-article-drupal">Drupal</a> <a class="button_Article" href="/term-article-web">Web</a> <a class="button_Article" href="/term-article-macbook">Mac</a> <a class="button_Article" href="/term-article-aws">AWS</a>
       </p>
   </div>
</nav>

It will be displayed as follows.

The code specifies the sticky-bottom class, but the display here is not specified.

We have added Hero content (full-screen images and titles at the top of the page) to the View and Taxonomy sections that display a list of top pages and articles. Originally, the site was text-based, but we decided to add this feature to improve the site's image and branding. The background images are my own photos, so they do not have a branding effect, but we added them as part of the web design. While the effect is not very noticeable, we believe it helps first-time visitors get a sense of the site's image.

TopPage

List of articles created in View

List of articles created using taxonomy

The Hero content we have installed this time is just a temporary measure, so we may change it in the future. It is common to use photos that match the content of the site, and a common practice is to use licence-free stock photos.

License and Full Originality

One of the basic concepts behind my website is that all content, including materials, is original and licensed by me. The photos used on the site are also taken by me and are only used for myself or my own property. Naturally, all articles are written in my own words based on my own experiences. My photos are taken using a tripod and Lieca Photos App.

The Hero content this time also uses my own photos, which means I have the full copyright to the images. However, when I consider whether my photos are related to Drupal articles, it becomes a bit ambiguous. This is a theme that relates to a single design concept, so I will consider ways to create related images myself.

Actual installation

Hero content sounds like something special, but it's just an area where text is overlaid on an image that is close to full screen, so it's not that difficult to understand.

This was created using CSS functions and classes provided by Bootstrap. Since explaining CSS and HTML tags would make this article too long, I plan to introduce them in future articles if the opportunity arises.

The site is built using Drupal's standard features. The method involves creating multiple Hero content blocks as needed and calling them up and displaying them as required using block layouts. One important point to note is that the top menu on my site is fixed. As a result, if you do not consider the top margin, part of the image may be hidden by the top menu. While I have specified the top margin for the body and other basic layout elements in the CSS basic settings, it is necessary to adjust the top margin for each content type, such as regular articles, Hero content, and pages using anchors. If this is not done, the title or headings may be hidden.

The top margin of the Hero content installed this time is specified by adding a line of comments equal to the height of the top menu to the top margin and adjusting the height.

My website as I learn, so minor adjustments are necessary to align new additions with previous settings and structures. This is also a point of reflection for me, as it reflects my tendency to add new elements to the site as I gain knowledge. Additionally, the fact that my site is both in staging and live simultaneously is a drawback.

We are currently building a website using AWS Lightsail and Bitnami Drupal instances. We are considering migrating to EC2 and RDS in the near future, so we would like to take into account the lessons learned from our current project and establish a format for publishing the website after designing it from scratch.

Conclude

I have written two articles about design changes. As I have been building the site while learning about Drupal, I ended up putting off the site design, but I think this was a good opportunity to focus on it. However, I do not consider the current design to be final, and I believe there is room for improvement in terms of readability and usability. I will continue to make changes as needed.

In this article, we explain the changes made and provide a brief overview of how to use Bootstrap for design purposes. While we have kept the explanation of Bootstrap component implementation and CSS styling brief to avoid making the article too lengthy, these are important aspects related to UI/UX, so we plan to provide a more detailed explanation in the future if the opportunity arises.