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)
• No JavaScript
• Printer view

Additionally, these might be important:

• Accessibility
• 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

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.

Context: No Styling

This is a big one.

Navigation

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

Buttons

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.

Conclusion

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.

References

• CSS Zen Garden
• WebaIM