design work in progress…

…on this very site.

Have been “designing live” on this site since the start back in January.2011, and don't expect to finish anytime soon. That is not because I am a particularly slow designer/coder, but because this is a project I do for fun and want to last.

I actually hope, and think, tweaking of this project will last for as long as new software and devices enter the market and are in need of design‐upgrades and tweaking – a very long time.

I have written enough elsewhere about what this site will contain and how it is supposed to work, so not much of that here. This is mainly notes I have made for myself about this and that during the design process. Many of these notes only exist on paper for now, and it will be good to have them collected in one place.


19.jun.2012: Print/projection styles are more or less as intended.

24.jun.2012: Styles for small and regular screens (480 upwards) are more or less as intended.

24.jun.2012: Styles for mobile devices are more or less there, but need a thorough clean-up operation in the “below 480” stylesheet.

25.jun.2012: Added a few missing styles to print/projection. Mainly for aligning centered images properly – copied most from screen stylesheet.

25.jun.2012: Mobile stylesheet updated same as print/projection stylesheet. Good to go now.

26.jun.2012: Finetuned the “split” down the middle in addendum for widest windows.
Finetuned 'box-shadow' on main elements for various window widths, for clearer (less gray) divisions.

27.jun.2012: “Sharpened” headlines with text-shadow for improved legibility.
IE8 got its own styles in an @media hacked stylesheet…
@media \0screen {/*IE8 styles*/}
…which of course isn't valid, but it works.

29.jun.2012: Played around with new divider/separator rules in blocks of text. One set of rules and images for regular screens and another without images for SSR.
Styled a more clear “You are here” navigation button.

04.jul.2012: Redefined support for IE8, and dumped all styles it needs into IE8 only stylesheets. Gives me better control over other browsers.

05.jul.2012: Total @media‐query split between SSR and regular screens. Browsers that do not support my use of @media‐query end up in the “minimal support” group – basically unstyled, unless I find suitable “back doors” to wide‐range screenstyles for them.

06.jul.2012: Had a problem with misalignment of headlines when they carry both a relative positioned separator styled in via ::before – the decoration seen in the sidenotes, and a regular floating image. Fixed it permanently by applying the old floats that take up no space technique on the separator. Strange that such old techniques still work best.

24.jul.2012: First version of the CSS driven addendum sketchbook launched. Far from optimized yet, but appears and works as intended in latest browser versions. Basic method borrowed from W3C's CSS3 selector test suite.

04.feb.2013: Checked CSS for this site in the W3C CSS validator, and corrected 4 flaws, of which one was fatal. Stylesheets don't validate now either – counting 50 ERRORS and 20 WARNINGS, but all ERRORS and WARNINGS present at date are intentional – they are deliberate browser hacks to keep old and new browser versions somewhat in line. Don't ask me why so many non-valid solutions are needed to make (most) browsers play ball on this site. I don't make browsers.

26.feb.2013: Installed IE10 (64bit version) on window 7 for cross‐browser checking. Had to override a number of hacks targeting IE9 since IE10 pick them up too, but otherwise no serious problems.
Have observed a few potential IE10 bugs, but have to confirm these through thorough local testing before deciding if and how to correct.

25.aug.2013: Got fiber‐optic based broadband at home today. Sure has been a long time coming.
Having access to proper broadband will change how I work on‐line, but not right away.

08.nov.2013: CSS forked for new HTML5 template as well as existing XHTML 1.0 template – regular and SSR. Some specificity conflicts, but no real problems other than seriously growing file sizes.
IE8 and older not given forked CSS yet.

09.nov.2013: Added “skip to navigation” link top/‍right in page, positioned from bottom of source‐code inside #base. Welcome addition me thinks.
Modified “skip to navigation” link for SSR too while I was at it.

10.nov.2013: Tweaked page‐width for SSR. Think I have gotten it stable with no overflow now.

14.feb.2014: Added an image in source-code on HTML5 pages only, with styles to check lineup across browser-land.

17.feb.2014: Tweaked Addendum INPUT size and position in separate IE10 stylesheet. One of those strange cases where IE size some elements much too large compared to what other browsers do.
Have not checked how IE9 and IE11 behaves yet, since I don't have those versions.

03.jul.2015: While preparing design to span wider (changed from 77em to 84em max-width), side-notes was width-limited to 444px to prevent it from expanding indefinitely. To make this work the faux-column also had to be width-limited. All in all a major design-change behind the scene.

clean‑up operations.

23.jun.2012: Stripped out unnecessary verbose selector chains from main screen stylesheet - 1KB gone. Lowers specificity in that stylesheet and leaves more strength to various @media­query alternatives.

24.jun.2012: Continued with stripping down alternative styles for regular screens of various sizes. 1KB gone, but I am far from finished cleaning up that stylesheet.

05.jul.2012: Major swap and cleanup operation in main screen stylesheets, to separate CSS 2, CSS 2.1 and CSS 3 capable browsers. With a bit of luck no bits will go missing in better browsers.

07.jul.2012: 3.5KB of overly verbose code erased from SSR stylesheet. Stylesheet launched for testing.


20.jun.2012: Styled vertical text that works in all browsers - even quite old ones. Had forgotten all about “word-wrap: break-word” and the letter-spacing and width trickery to make continuous wrapping to new line work reliably, until now.
HTML/CSS code, + demo, found in addendum.

22.jun.2012: All new Gecko browsers went mad on my laptop running windows 7, in that they broke my page-layout off-line but not on-line. Have no idea what happened to both latest Firefox (13.0.1) and Seamonkey, but they are clearly unstable.

26.jun.2012: Found a strange bug in IE8/9 only.
img {display: table;}
…makes images shrink into nothing on screen. Putting an outline on images confirms they are there but take up no space.

work in progress indeed.

I am documenting some code and methodology in addendum. Good to have it written down somewhere just in case.

Of course, only bits and pieces from the process will end up on pages like this. Most of the work just gets done without much attention being paid to writing down or documenting anything.

sincerely  georg; sign

Weeki Wachee 17.apr.2012
see notes v/dates in article.
last rev: 03.jul.2015

side notes.

responsive design.

Meaning: web design that responds to the environment – type/size of device and size of browser window for instance. The days when we had to decide whether to go for “fixed”, “fluid” or “elastic” web design, are definitely over.

Methodo­logy has evolved quite a bit in later years, but termino­logy has not changed all that much. A web site is still a web site – if we want it to be, most of us still use browsers, and screens are still fairly flat.

Will take a while to rid the world of old, and some new, browsers that won't play ball with slightly advanced CSS. But, in the mean time it isn't much of a problem to ignore all that and let browser vendors and end-users fix their own mess.

We can't fix it all from our end anyway, and progress in web design can't be halted by bad software / hardware and people hanging on to ancient technology.

responsive coding.

Looks like most who code responsive designs for screens, start at the bottom (small/narrow) or at the top (large/wide). And, often they use what I call “open‐ended @media‐queries” – all @media‐queries work on 'smaller‐then' or 'larger‐then' but not both.

The resulting double‐styling and cascading – letting more than one @media‐query kick in at any specific window/device type/size, makes the task of getting it right at each and every size harder for sites with slightly more than average styling‐complexity – in my opinion.

I prefer to start styling in the middle (medium size screens), with no width/size restriction. To that main stylesheet I add several “curbing @media‐queries”, that only kick in when screen/browser‐window has sizes in between two width‐values – actual set-up described in some details deep down in addendum.

Basically only two stylesheets for screens are active simultaneously. The wide range stylesheet for screens, and the stylesheet that targets a relative narrow range. All other stylesheets can be ignored while coding and debugging for that narrow range, as browsers do of course ignore them too.


As most browsers tend to go raving mad(!) when I start swinging my CSS sledge­hammer™, it makes sense to hit them hard first – give them all they can handle plus a bit more via the main stylesheet, and then hit them even harder at window/‍device sizes that are particularly troublesome.

That way the weak browsers get separated from the strong ones, and I get to know where to draw the line between which to support and which to ignore.

So, dividing the screen/window width range into @media‐query steps, for this site it comes out somewhat like this:

  • all screens: 0px to ∞
    (basics for obsolete browsers)
  • screens: 481px to ∞
    (min-width: 481px / max-width: 84em)
  • min/max query: 481px to 660px
    (min-width: 26em to force scrollbar when necessary)
  • min/max query: 661px to 800px
  • min query: 64em to ∞
    (at default font-size from 1024px up)
  • max query: 0px to 480px
    (min-width: 150px)

It is somewhat like breaking in horses – combine firmness with kindness for best result, to get all browsers to line up and do exactly as they're told. The main browsers are not doing too bad so far, but it is early days yet.

borrowed elements.

Have borrowed many design elements and solutions from the much older sister‐site and will continue to exchange elements and code back and forth as I see fit. Recycling is the name of the game these days…

If/when time permits I may upgrade the older site to something more in line with this. It isn't going anywhere and works just fine as is, so I feel no pressure to upgrade or tweak it right now. advice upgrade advice upgrade navigation