On johnwintheriversen.eu/ I made a page, which uses advanced CSS. It is inspired by a page from csszengarden, which is called 'Steel' and is made by Steffen Knoeller. It looked fun, so I decided to dive into it.
'Steel' has several problems concerning browser compatibility, so I had a long fight adapting it to use as my homepage. I am happy with the result, even if I may never actually make anything like this again. It seems a long fight for a flashy result, which may not be all that requested, and which does not stick to simple, safe functionality.
But I had fun fitting it to my whims, so that counts as a success :-)
I decided in advance to make a new stylesheet for every 25% increase in screen size. Then I ran into problems at the high end and made extra stylesheets to adjust.
The page is quite simple on small screen sizes. Below 330 px it is basically just text in the font Verdana. I am not aware of a reason why someone would look at my page through a browser window that size, but there it is, assuming very little of the device.
Above 329px width, A little more is assumed of the browser/device, and at 650 width, I start adding graphics to make the page a little nicer looking. VGA is at 640 x 480, so those devices won't see it. WGA is wider than 650 pixels, so it will show on those devices, and as far as I can read from statistics, there are actually devices in use with widths between 650 and 800 pixels. My mothers IPhone and my Samsung S7 has resolutions just beneath 1000 px, and they see the page in this way too, although slightly adjusted. Beneath 1000 pixels, I have increased the size of the text to compensate for the way the pixel density is typically higher on a smartphone.
The next major change comes at 1250 pixels (and higher). The most widely used browser display size according to w3schools is 1366 x 768, and that has been the dominant resolution for some years now. I expect that people viewing my page on PC screens will likely see it in this resolution.
At 1550 pixels and above the page starts looking more impressive. We are into the range for HD+ and Full HD screens. I suspect these users may appreciate something more entertaining, as they have invested in a computer with relatively high resolution, possibly even what can be called a gaming PC. My CSS keeps adjusting the page up to a screen size of 3050 pixels. I suspect that not many will look at it through a screen with a width higher than 3050 pixels.
The inspiration for the graphical elements is sci-fi. Compared to the graphics of the csszengarden theme, which relies on an industrial age theme, I decided to go with the space age. Partly because space is an interest of mine, partly because I thought this could give a visual expression to something I once wrote and still have in my mind, and partly because it signals high tech and future, and I aim to be a high tech professional on the edge of the future.
The graphical elements are meant to give the impression that you are looking at something in space, maybe even that you are in space in person. On the smartphones the viewer sees the blue see-through screens, which are still some way off into the future for most of us IRL. On screens above 1550 pixels in width, you get the feeling that you push around screens in a space that has been intelligently designed. This serves to create the illusion that you are in a sci-fi environment. I have chosen the font 'Rationale', a google-font. It can be fetched by the viewing device, and it feels more electronics-like than other fonts, so it supports the illusion of a tech environment.
The language in the background (at screen sizes above 1550 pixels) that you may not recognise is actually Vietnamese. One of my neighbours were kind enough to translate for me. I have included it partly because of my interest in foreign languages, partly because it adds a feeling of internationality to the scene. Chinese signs would have been more believable (and a lot more recognisable), but I felt that the Chinese signs clashed with the Latin letters, so I did not bother with them.
At screen sizes above 1550 pixels, I have placed three areas along the left side of the screen, which can be expanded by placing the mouse above them. These areas have caused me some headaches. Partly because some of the text disappears, if the ratio of the screen is more than about 16:9 (it varies), partly because they cannot function with large amounts of text. There may be ways around that, but so far I have not tried to find one, except that I added a more finely grained control over them in the CSS.
The areas that expand from the top of the screen work considerably better, and if I venture into something like this again, I might only use areas expanding from the top.