Technical design of the website

Introduction

Make sure your screen is wide enough to view the contents, for example by holding your smartphone horizontally.
webtech This web page describes the technical design and realization of the website and the problems and solutions encountered during development. The reader should have some basic knowledge of HTML and CSS. HTML contains content. It uses tags to link the content with formatting and styles defined in CSS.


The aim is that the website functions properly and is visibly attractive on the following platforms: PC, laptop, tablet and smart phone (in landscape and portrait position), in different web browsers Firefox, Edge, Google Chrome and Safari. The biggest challenge is given by smartphones with their limited screen sizes and two very different aspect ratios and sometimes different browsers.
What is it about? Firstly, it's about screen layout, secondly to realize a well-functioning menu system to navigate within the website, both with mouse and touch control. Last but not least, it is about flexible solutions for different screen formats, enabling screen layout, text, images and menus to be well visible or reachable and any limited space is used well. In case multiple applications are visible on a screen, the word 'screen' should be interpreted as the window.
In order to judge the result, the web pages can best viewed on a laptop or PC, where the size of the window is varied: narrow, wide, high, low, etc. Web browsers also support simulation of all kind of tablets and smartphones. Use control-shift-i to get this support (Firefox. Chrome and Edge). Everything can be demonstrated with this page, except for the welcome page. In order to view the HTML and CSS code via the web browser, put view-source: in front of the url, either manually, or via the command control-u.
The main technical sources of information are w3schools and the web developer tools in Firefox and Chrome. As context sensitive code editor Notepad++ has been used, and sometimes BlueGriffin.

Setup and layout

This website consists of about twenty web pages (half in English, half in Dutch). There is one HTML file per web page. All use the common CSS file, style.css. Scripting is not used.
The layout of the pages is shown in the following four figures, where the light-blue background indicates a screen or window.
 

header

si-de me-nu




main




footer

Generic page

 icon
header text
header text
top menu


main


footer



Welcome page

icon
header text
top menu


si-
de
me-
nu



main


footer

Other pages
wide screen



icon

S
header
text
top
menu

main



footer

si-
de
me-
nu




Other pages
  narrow screen
 
A generic web page of this website consists of a header, the main part, a small footer. There is optionally a side menu to the left of the main part. A header consists of the icon, header text and top menu. The exact header structure is different for the home page (called welcome page) and other pages. On narrow screens, the top menu (and header text) breaks up into two rows instead of one. Also, for a narrow screen the optional side menu is out of view by default, leaving more room for main. When the left side of the screen is touched the side menu shifts in view, over the left side of main. Also, the small side menu icon S can be touched. It indicates with its presence that there is a side menu to the left of the screen.

The welcome page

The welcome page is simpler in structure than the others. It has no side menu and the header is always right above the main part, moving together in case of scrolling. The text in the header is more elaborate than on the other pages. The welcome page is quite short and the top menu is in the in the middle, the navigation is nearby.

Problem: On a narrow screen, in particular on a smartphone in portrait position, the icon is too small and header text is messy.
Solution: Let the icon and text box partially overlap in the welcome header, as the rightmost figure above also shows. The text now wraps around the icon's figure. This overlap is done with a negative margin-left.
Detail: this does not work in a td tag but in a div tag it does work, hence the text box in the td is wrapped in a div block.

Other pages

To save space, the header of the other pages has a smaller height than in the welcome page, less header text and the top menu is nearly on top of the page. As already mentioned, the side menu can move to the left outside of the screen to give main more space.

Problem: When scrolling down the top menu disappears quickly out of view, navigation is out of reach.
Solution: The header gets position: fixed. Now the header with the top menu is pinned at the top of screen, always visible. When scrolling down, main moves underneath the header. That's why the header is drawn above with thick borders, and the top border of main is omitted. The side menu also gets position: fixed so you can always navigate within the page. Before that, the side menu may first have to shifted in view from the left in case of a narrow screen.

Problem: On a shallow screen such as a smartphone in landscape position, the side menu is partially out of sight. Scrolling does not help because it is 'fixed'.
Solution: On a shallow screen, the side menu is raised close to the icon. Also, the space between the buttons is reduced to fit up to 4 buttons. If there are more than 4 buttons in the menu, these are subdivided into sub-menus. On a shallow screen, this sub-menu extends to the right, on a narrow screen it extends right next to the side menu downwards. These screen width/height dependencies are realized with @media only screen statements in CSS.

Menus

A menu is essentially a row of buttons each containing a link. By clicking or tapping on a button the web browser navigates to another place within the website. The appearance of a button also changes when you click/tap or touch it.
The top menu is for navigating between web pages. In addition to a link, each top menu button also has a sub-menu that is normally invisible. The sub menu consists of a row of buttons that provide direct access to different locations in the other pages (or a wider choice of web pages). A sub menu of a button appears when the button is touched with a mouse or finger.
The side menu serves to jump directly to certain locations (called anchors) within the page. A side menu button also has a sub-menu in case there are many anchors, e.g. in engpraktijk.html). This prevents lengthy side menus due to too many buttons.
The realization of a menu or sub-menu follows next. Each menu is a row of buttons. This row in HTML is a list ul, in which each list item li contains a button (a link a) and optionally a sub-menu. A sub-menu button has no sub-sub-menu of its own. The appearance and style of the menu and buttons and the effect after touching a button, is determined by the CSS class used. The top menu uses the navigation class. The side menu uses the linavigation class. The location of the side menu is determined by id leftsidemenu. It is also defined in CSS.
Touch in HTML and CSS is called hover. Touching a top- or side menu button changes the display property of the sub-menu list from none (invisible) into block (visible). At the same time, this expands the touch-sensitive area with the sub-menu list because it has now become visible. This allows the mouse or finger to click a sub-menu button. When the touch sensitive area is exited, hover stops, the display property of the sub-menu list changes back to its standard value, none (invisible). The touched menu button also returns to its standard appearance.
Jumping to an anchor is done by a smooth vertical scrolling movement. This is realized by the html tag in CSS with scroll-behavior: smooth, if supported (in case not, details are explained in CSS).

Narrow screen menus

If the screen is not wide enough, the top menu will continue the remainder of the buttons in a second row (see figure 'Other pages narrow screen'). The header then becomes higher. The side menu is placed to the left out of vision, giving main the full screen width. The side menu appears in its normal position (on top of the widened main) by touching the screen on the left side, or by touching the side menu icon S. The latter is located on the border of main and header on the left side.
When a @media only screen statement in CSS recognizes a wide screen it makes room for a permanently visible side menu in main.
The sliding variant of the side menu is realized in CSS with the classes side menu popup, side menu popup, and ids leftsidemenu and leftsidemenutop. It works in a similar way to how a sub-menu appears after touching a menu button. Only now the touch does not replace display: none by display: block, but margin-left: -8.5em (to the left outside view) by margin-left: 10px (normal position, on top of main). The touch-sensitive area is also larger than with menu buttons: the entire left side of main. Shifting the side menu from outside view to inside view can be animated as a gradual transition, using transition: margin-left 0.4s. It clarifies where the side menu comes from, rather than a sudden appearance.
For entertainment, the small sidebarbutton S makes a half rotation during the shifting, as if it were pulling the side menu to the visible position. This is realized with an transform: rotate animated with an transition: transform 0.6s.
Detail: After half a rotation, the shadow effect of S also has moved to the opposite side. That looks very strange. An additional action is needed to return the box-shadow shadow effect to the normal side. Also this transition of the shadow effect (transition box-shadow) needs a timing that corresponds with the rotation (namely half the rotation time) so as not to get weird transient effects, like suddenly an opposite shadow at the beginning or end of the rotation.

Main: problems due to the 'fixed' header

The header of other pages is 'fixed' meaning that the top menu is always available at the top of the screen. In order for main to be completely visible, the top part (where the header is) must be skipped. This could be done by using margin-top in main. However, the height of the header varies, because the top menu and the header text consist of 1 or 2 rows, depending on the width of the screen.

Problem: Main requires two different values of margin-top, depending on the screen width.
Solution: This value is dynamically adjustable by using of @media only screen statements in CSS.
Note that main of the welcome page overwrites margin-top with a fixed value because it does not have this problem.

Problem: Standard jumping to an anchor (from the side menu or top sub-menu) means that the web browser scrolls the anchor to the top of the screen, hidden under the fixed header.
Solution: The solution consists of two elements: let the browser believe that the anchor is higher than it really is, and making this extra height dynamically adjustable depending on the screen width.
The first is done by prefixing each anchor with an empty span tag of class anchored. This will trick the browser into the idea that he has to scroll to a higher position so that the anchor is lower and ends up right under the header. The exact operation is commented in CSS. Secondly, the size of the adjustment is dynamically controlled by @media only screen statements in CSS.
(Perhaps the same could be realized by the property scroll-margin-top, although w3schools says nothing about it and the web says at several places that this feature doesn't always work.)

Main: internal scalability

The main part is divided into chapters, with h2 formatting for the chapter title. A chapter title typically has an anchor to support navigation. The external scalability of the main part is determined by what the side menu and header leave over as space for main. As described above: the side menu can be positioned left from the screen providing more width to main, and when the top menu in the header is distributed over two rows, there is less room for main at the top. The main part internally can deal in several ways with variable widths/heights and limited space of the screen, which is the subject of the rest of this chapter.
Words can be hyphenated at the end of a line and continued on the next line. Hyphenation is set for English in tag html with lang="en". If this doesn't work well in a word the cut-off point can be indicated with the so-called soft-hyphen ­.
For some visitors, more information may be of interest on specific points. You can proved this information optionally on the same web page as a pop up or drop down. After touching, the content of the pop up floats above the text. This is implemented with the class combination popup, popup-content, for example, see Example of HTML near the top of this page. Similarly, the content of the drop down is added temporarily to the text. This is implemented with the class combination dropdown, dropdown-content.
Problem: How to display pictures when there is little room available.
Solution 1: Pictures can grow and shrink with screen width by making the width a percentage of the background, e.g. width: 15%. Also pictures should not be too big or too small, these limits can be included in a style or class as follows: max-width:30% and min-width: 30px. A handy combination is defined in the righttopkwart class. It positions a picture on the right side, giving a maximum width of a quarter.
Solution 2: With decreasing width, images can move from next to the text to below the text. Wrap around by using the style display: flex; flex-wrap: wrap; flex-direction: row;. Solution 2 is only preferred if details of the picture are important.

Sometimes a smartphone in portrait is simply too narrow for what is displayed. Then an alternate content is shown, typically with the advice to turn the smartphone in landscape position. This behavior is realized with local style definitions in HTML, by display: none or display: inline depending on screen width (using @media only screen statements). To see this in action: watch this page with a smartphone in portrait and then in landscape.

Finally

It is fun to make a website only from HTML and CSS, and to discover that it works well on so many systems and web browsers. The advantage of this approach is that everything is under your own control, everything is adaptable. HTML and CSS is well documented and not really difficult. Accumulation of more technologies, like adding templates and scripting, enlarges complexity considerably.
The development process is iterative with insights advancing after every emerging problem. Thanks also to feedback from others. Of course improvements are always possible, that's why suggestions remain welcome.
Should the website in the future also use data entry from the user, then scripting (e.g. JavaScript or php) can no longer be avoided. Now interacting with the user is by e-mail, telephone or a meeting.

The most important part of a website has remained unmentioned so far. These are good texts, pictures: content. How do you briefly explain the essence of your message in a pleasant way to the target group. Also here suggestions are welcome.

Ton Kostelijk, Veldhoven 2022.