Ambrosius Topor

Notiz — 2021-08-14

Website: Styling Overhaul

I was thinking about how I used to build websites in the past, how much effort I put into details. Concerned — besides mobile viewport sizes, of course — about different output formats (primary printer styles).

Ideas came up for this site: I could enhance on the styling, polish the design. I could have some kind of animated/interactive restyling in place, or just provide different themes (thinking of something like CSS Zen Garden).

In a sense of preparation, I decided to first clean up the styling/structure.

Actually there are several contexts one might consider:

Additionally, these might be important:

Quick wins: Tweaks, Optimizations

For the application teaser I have remove the separate link button, and made the whole component clickable.

Context: Mobile Viewport Size

I didn't have to do much here, but getting rid of the duplicate rendering of the navigation for desktop and mobile was more effort than expected: Not only does it look completely different, but it should also work with JavaScript disabled.

Mobile Navigation with JavaScript disabled
Navigation in mobile viewport size with JavaScript disabled.
Mobile Navigation with JavaScript enabled, closed state
Mobile Navigation with JavaScript enabled, opened state
Navigation in mobile viewport size with JavaScript enabled: closed state on the left, opened state on the right.

Context: No Styling

This is a big one.

Site in default (screen) context
Site in unstyled context


I first had to refresh my knowledge about best practices for the navigation elements, access keys. I've added the "Skip navigation" link to directly jump to the content.
For now, only the "Home" link has an access key set, according to a standard I found.

Sections, Headings

I cleaned up the semantic structure a bit, replacing DIV elements with SECTION elements. Also, headings were added for areas which had a visual separation in the styled context (e.g. the profession ("Tätigkeit") and knowledge ("Kenntnisse"), application teaser keywords).


To keep the design clean, I've used short expressions for the buttons (e.g. "more" ("Mehr")). A tooltip is shown (using the title attribute) for clarity. In the unstyled context, I'm using the full/long text. To accomplish this, I've used a combination of "screen reader only" styles and the attribute rendering of the short text using CSS.


There is more to optimize; for now, I've only focused on the homepage. Especially the "no JavaScript" context is difficult (not applicable) for the tours ("Touren") page.



There are no comments yet.

Thanks for your contribution!
Your comment will be visible once it has been approved.

An error occured—please try again.

Add Comment