Friday, 2 March 2018

Johnwintheriversen.eu - study of technicalities

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.

Thursday, 5 January 2017

JohnRadio - Logo

Creating a logo to be displayed at all (or many) pages on a site gives an instant recognisability to the page, and a good logo can do more, such as create a good feeling in the viewer or signal the values of the organisation represented by the site. Sometimes the logo is the only thing a visitor sees before surfing on to the next page.
So... It is a good idea to take time to come up with a suitable logo.
For JohnRadio I wanted something simple, yet also a bit elegant. It was pretty daunting, as the connections between music and graphical expression is not a simple one.
Nonetheless I arrived at a logo, which can be seen in two forms on the following page:
http://johnwintheriversen.eu/johnradio/logo.html
These logos have not yet been optimised for use on the web.

The first logo is grey and represents a neutral version of the logo. It may eventually be used in environments where it is not supposed to stand out. The second logo is supposed to have a certain feel to it, associating it with salsa music. I intend to have this version of the logo on select pages dealing with salsa music.
I have chosen the font Colonna MT, as it is easily readable as well as elegant. A further advantage is that this font is readily available on Windows. At present, the logo is a picture, but if need be, the font can be applied to a text. It is also easy to recognise for other designers.

I have slanted the letters to make them appear more dynamic, and increased their height-to-width ratio considerably to make them look more elegant. Letters written in Colonna MT seem calm and robust to me, and I was looking to change that, while still keeping the elegance and readability of this font. I considered raising some of the letters from the baseline, however it seemed to me that it made the logo too chaotic, and it hurt readability. I feel that I have arrived at a good balanced expression with this design. And it deviates from the ubiquitous rectangular look, I am trying to avoid on this site.

Ahead of me lies a challenge with regards to colours. The associations between musical genres and colours typically aren't possible. I have chosen a cyan colour for chill, and orange-ish for dance music. However, some decisions regarding colours for other genres just have to be made and stuck with.

Wednesday, 19 October 2016

JohnRadio - Development of Pages for Artists

I found myself pretty unprepared for this. I am used to seeing every text written on lines in a rectangular block. I wanted to break from that.
And so I set out to find other shapes, because I have found that text without shape makes it difficult to figure out what is communicated. It seemed that I would have to keep writing left to right, and let the lines of text be underneath each other.
Consequently I was looking for wavy, round or polygonal shapes. Or at least something that would be slanted. I wouldn't even rule out a bit of randomness at this point.
The tricky part then was to figure out what to do, because descriptions of artists don't just have the same length. If I was to go for wavy or round, I would need an algorithm to tell me where to split lines of text.
Normally the browser splits the text. But that only works with the rectangular areas.

Another problem was the adjustment for small viewports. If the viewport is too small, it probably makes little sense to try to avoid the rectangular shape. I quickly decided to allow small viewports to just show the common rectangular blocks of text.

I came up with this solution: http://johnwintheriversen.eu/johnradio/artists/mylenefarmer.html
Further examples can be found here: http://johnwintheriversen.eu/johnradio/artists.html
Currently there are 7 examples.
This is sort of a 'proof of concept'. At some later point, this could be based on contents of a database.

This layout wastes a lot of space on the screen. On the other hand it is often visually appealing to use space.
This layout works best on a white background, as it relies heavily on colours. The use of light grey as white is something I can see as visually appealing. Using shades of red on red seems less appealing to me, as does any other combination I have checked out. It also clashes with expectations, as we are used to seeing letters on a white background.

Although I aimed to give the central text a circular shape, I had to accept some deviation. It might be possible to adjust my way out of it, but already now it is complicated to adjust for the varying ways in which a text can be written. My current method has serious limitations to the way the text can be written:
- I have only seen it work for texts between 400 and 550 letters (including blank spaces).
- Long words threaten to make it difficult to find out when to move to the next line. A refinement of my method could be the addition of hyphens, but this soon becomes complicated.
- A long word first or last may not be possible to fit in at the top or bottom of the circle.
- I have chosen the font Georgia due to aesthetic considerations. A monospace font might make it easier to adjust the length to the space inside the circle.
- Everything pretty much has to be written with latin script. I have experimented with a mixture of scripts (greek, cyrillic, japanese, korean, traditional chinese). Example: http://johnwintheriversen.eu/DJen_anbefaler/. It doesn't mix well aesthetically (IMHO). And it makes it even more complicated to adjust the length of the text so that it remains inside the circle.

Nonetheless I like this solution. Soon I will have feedback from people testing it, and this of course will allow me to improve (or reject) this layout.

Tuesday, 11 October 2016

JohnRadio - Brainstorm

Now it was time for brainstorm, getting ideas. With 5 challenge statements to brainstorm, there was enough to think about.
In the beginning there's the possibility that the developer can find inspiration in similar sites. So I decided to take a look at the sites of some radio stations.
I was not impressed. Radio Viborg, Radio Alfa, Radio 100, Groovera and Radio Nova weren't really helpful.
Last.fm and Radio24syv seemed to be more interesting, but I didn't really see something which impressed me.

And so I progressed to a classic brainstorm. I simply sat down with a lot of post-its and each of the 5 challenge statements and thought things over, making sure to follow the 4 main guidelines recommended by my method.
- Defer judgment
- Keep getting ideas until you run dry
- Build on previous ideas and connect ideas
- Seek novelty

After a couple of hours, I felt that no more ideas were coming forth. I wasn't really happy with the result though, so I wanted to go further. I was a bit unsure how to continue, so I thought things over.
The conclusion was that I would repeat the brainstorm, but this time I would rethink each challenge statement, while combining them with main focus areas, which I was then to identify.
I identified five main focus areas:
- Aesthetics
- User actions
- Navigation
- Content
- Permeating phenomena

Obviously I got the same ideas again, but this time some extra ideas came to my mind. And it really looked better now. But I felt energetic, so i decided to push on after a short break.

The next kind of brainstorm I tried was one where I look at some pictures (one at a time) and then ask myself how this picture can be related to each of the challenge statements. This is supposed to increase the probability of getting ideas, which are non-obvious. It worked that way for me too.


After some hours and three brainstorms, I had 37 post-it's with ideas. It is difficult to say how many ideas that was, because a bunch of ideas isn't really an easily quantifiable thing.
Now was the time to figure out which ideas to take to the next step (the next step is to develop on the ideas). I am not going to promise that I don't go back to my pool of ideas at a future point, but here are some of the ideas I thought I would take with me to the next step:
- Navigation by emotion
- Avoid the rectangular layout
- Quiz/labyrinth
- Present artists
- What the visitor can do to find this locally
- Let this be partially about other aspects of my fictional club
- Entertaining language
- Articles
- Themes

Many of these ideas are new to me, so I guess there will be enough to think about. It seems to me that I will probably get more ideas as I develop on these ideas.

Monday, 26 September 2016

JohnRadio - Definition

I decided to make a site for a radio station. This was prompted by a desire to do something for min fictitional club, and at the same time it was also because I used to stream music from my computer at home, so that I could hear it elsewhere. I wanted to revisit this phenomenon.

There's a story to this, if you will indulge me. Some years back volunteers had built an internet café in my neighbourhood as part of a public project aimed at immigrants. When I was there, volunteering to man it, I would sit at a computer, put on the headphones and listen to my own stream, while at the same time I played Age of Empires 2.

Once in a while I looked around on the faces of those using the internet café. And once in a while I had to do something because people were coming or going or asking me something.

But on some of the nights it was the most leisurely volunteer work I ever did :-)



Well, some years back I found a series of lectures by an american lecturer, who teaches creativity. It was a toolkit for situations, in which creative thinking was needed. I decided to make this website about the radio station by following some of the tools he presented. I will be putting together my own method, picking from his tools as I go along. This was sort of what he was calling for anyway.

If I may oversimplify, he suggests four steps: (1) Define, what you want to achieve. This should be formulated as one or more so-called 'challenge statements'. Then (2) you brainstorm in different ways, based on the challenge statements. Then(3) you develop some of the ideas from the brainstorming sessions. Finally (4) you implement the things that seemed to be good ideas.



To get started, I decided to follow a method called 'webbing'. In this method, you start with your intial thought, and then you explore this idea, by repeatedly asking (1) why you want to do this, and (2) what's stopping you from doing it. By repeatedly asking these two questions, you get a web of reasons and problems. You then figure out, what you want to make the basis for a brainstorm. The things you want to brainstorm over should be relatively broad questions. As an example: By asking, why I want to make this website, I found out that I would like to do something fun. Asking what was holding me back, I found out that I needed ideas on how to do that. I phrased that as a question: How can I make this fun?

By doing this I found five challenge statements, which I will be brainstorming over one of the coming days:

1. How can I make this fun?

2. How can this add to the life of my fictional club?

3. How can this show that I have skills?

+ two more, which I will not mention here.

It is a bit of a dark art to get to the right challenge statements. If you keep asking why you want to do something, you soon trail off into reasons that isn't really suited for brainstorm, such as "I want to make money on this". This is too broad. On the other hand you can also make challenge statements too specific.
The same goes for the questions about what is stopping you. Answers such as "I don't have the time for this" lead to questions such as "How can I make time for this?", and that may be outside the scope of what you are working with.

I am nonetheless confident that I have found five good challenge statements, which has defined to me, what it is I want to get ideas about. I will be brainstorming in a few days time.