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:
- Desktop viewport size
- Mobile viewport size
- No styling (no CSS)
- Printer view
Additionally, these might be important:
- Reduced animation
- Coloring issues (contrast, selection of colors)
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
Context: No Styling
This is a big one.
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.
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.