Naar NL versie

Technical design of the website

Introduction

Make sure your screen is wide enough to view the contents, for example by holding your smartphone horizontally.

Ton Kostelijk, Veldhoven 2022, 2023.
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. Notepad++ is used as context sensitive code editor.

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 that contains classes. Scripting is not used. A class defines a combination of formatting, layout and color properties. Distance and size properties (e.g. width) are given absolute (e.g. 10px, px = pixels), relatively (e.g. 10%) or by an expression using calc, min and max. Next to classes a CSS file contains identities. An identity (id) is a class that appears at most once per page.

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 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, navigation to other pages is nearby. The rightmost element of the top menu shows an Dutch flag, to go to the the Dutch version of the website.
To deal with the limited space on small screens, the logo becomes smaller as the screen becomes narrower. Also, when the screen height drops below a certain value the height of the entire header is reduced, by means of a @media only screen declaration in the CSS file.

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).
For entertainment, the logo rocks gently after touching (dated Dec 2023). This is realized by making logo:hover trigger a rocking animation. It is defined by @keyframes, existing mainly of two rotates.

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.)

Improved display of the header text (dated Nov 2023)

The header text on the other pages started right next to the logo above the top menu. This is less attractive. It is nicer if this text is centered above the top menu. Also, this sentence should be stored on one location, not to be repeated on every other page. In addition, the hyphenation of the header text is not nice on a narrower screen. It can look like this:

Practice of Ton Kostelijk - For relaxation, pain relief and per-
sonal development

The solution is first to center the header text with text-align: center (in id headertext) after calculating the correct width of the top menu (see max-width). Secondly, to include the sentence in style.css in two half non-breakable sentences (using whitespace: nowrap). The more common solution by using   cannot be applied because it is displayed literally, it is not interpreted as a non-breakable space. If there is not enough space, the sentence breaks off exactly into the two halves. This must be triggered in the HTML code,

<div id="headertext"><span id="htxteng"> </span></div>,

by a crucial, well positioned space in front of </span>. Without the breakable space the whole sentence is non-breakable. (Yes, it's a bit subtle.) Using the selectors ::before and ::after, the two halves of the sentence can be defined in id htxteng. For the Dutch version the same is done in id htxt. The example above now looks as follows:


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 &shy;.
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 popup or dropdown. After touching, the content of the popup 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 dropdown is added temporarily to the text. This is implemented by reusing the class combination popup, popup-content, and changing the position of popup-content to relative.




Problem: Centering popups (dated Nov 2023)
Blocks or objects that are are placed on the left side look better when centered horizontally. Unfortunately, this is not easy to achieve: there is no such thing as 'align: center' that is generally applicable. The method to do this is to work with "margin: auto" if the width is known, or by explicitly calculating the left position and width of the object. Both of these methods have been used, respectively, in the classes touchable and popup-content. If the content has a limited maximum width (max-width) in HTML, the left position will also need a minimum left position, using the min function. Since pulldown is realized with popup classes, this solution works immediately for pulldown.

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 meant to be 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.

Stacking order problems (dated Oct 2023)

The stacking order of overlapping elements is supposed to be controled by the z-index. However, this seems to be an oversimplification, there are many more issues that affect stacking order. The webpage 4 reasons why your z-index is not working (and how to fix it) explains this issue very well. Now both topmenu and sidemenu are always on top of the content part.

Improving the footer (dated Sept 2023)

The footer text is changed into a set of buttons on every page. Contact can be made in 1 click. Implementation: an iframe to file contactinfo.html, containing buttons to call, email, app, and visit the practice. With a small screen the buttons should still be reachable, therefore the touchable area of the side menu (popup-zijmenu and popup-zijmenutop) is reduced in heigth from 100% to 60%.

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, 2023.