Tuesday, 10 July 2018

Navigation at the new homepage for Dalgaarden

The "Jobcenter" has sent me to Dalgaarden to help them with their website. I have happily accepted, as this could be a good experience. Dalgaarden is a treatment centre for children and young people, who for some reason cannot live at home. In my opinion, the old website for Dalgaarden was well made for the most part, but time has changed, and I see the need for another site. As the budget does not allow for much, Dalgaarden got the site started relatively cheaply, and contacted the "Jobcenter" to get an unemployed person with an education in communication (they settled for a web developer, which is of course not a bad substitute). And so here I was, making their website better. The old website for Dalgaarden was split into three parts; one for children, one for relatives and one for professionals. Each part had its own top menu. This may have made sense at that some point in the past, however, as could be predicted, this meant that most of the information was in at least three places on the website, and Dalgaarden did not manage to update the three parts of the site with the same information when required. This is a common problem with websites, where the same information is written in multiple places. On top of that, the text reflected the way the employees see the work with children as something where most things influence most other things, so even inside one part of the site, things of importance would be written over and over to illustrate the interconnectivity of various phenomena.

I did not want to get into the task of straightening out the descriptions of the interconnected nature of things, because I actually think that in this particular case, it is fine, even if it leads to the same information being written in different places. But I decided to suggest that we got rid of the division into three parts and aimed for an integrated site. Partly because the children at the time the website was made was mostly 5 - 12 years old, while nowadays and in the foreseeable future they are mostly 7 - 15. This means that the need for a particular area aimed at children is lessened. The integration could also be good because, as previously mentioned, they did not manage to keep updating in three or more places on the website. On top of that, the people making the foundation for the new website chose a WordPress with the uncode theme and a heavy reliance on the Page Builder from WPBakery. They made one single top menu. The three parts of the old website had 13, 16 and 17 pages, and that could possibly make for monstrous navigation. The children/young at Dalgaarden and their parents are not stupid or retarded or anything like that, but on the other hand, 46 pages from a single menu typically results in a need for submenus to submenus, which is probably not a good thing in this case.

I reduced the 46 pages on the old site to 22 pages (due to the structure I inherited from those laying the foundation of the website, more pages would be added, which would come to aid navigation). This reduction in the number of pages was mainly achieved by writing the information from similar pages into one page with a mostly neutral tone. The new menu has the following six items:

Børn og unge with four items in the submenu. These four pages were retained from the part for children of the old site. Three of these pages did not have counterparts in the part for relatives and the part for professionals, and the last one was one, which DID have counterparts, but the counterpart from the part for professionals was very different. These four pages retain a sense that they are directed at the children/young people living at Dalgaarden.

Husene with four items in the submenu. These pages reflects 4 pages in the menus in each of the three parts of the old website. It describes most of the physical surroundings, in which the children/young live. (12 pages were reduced to 4)

Skolen with four items in the submenu. These four pages describe the school at Dalgaarden, and reflect 4, 4 and 3 pages from the three parts of the old website. (11 pages were reduced to 4)

Forældresamarbejde with four items in the submenu. These four pages are about the way Dalgaarden cooperate with the relatives of the children/young, and they reflect 4 pages from each of two parts of the old website (8 pages were reduced to 4)

For professionelle with three items in the submenu. These pages are meant for pedagogues and professionals within national and public organizations (particularly the "kommune"). The texts here tend to have long words, specialised vocabulary and philosophical content, as it is common when professionals communicate to their professional peers. The three pages reflect three pages, which were only in the part for professionals on the old website. This part of the menu is deliberately left a bit short, because my contact at Dalgaarden said that one of the things happening in the future might be that they want to add content about their professional principles.

Om Dalgaarden with three items in the submenu. This is the place, where those pesky pages that do not fit anywhere else has been placed. One page is a summary of the different groups of professionals, who are employed at Dalgaarden. Another page is where the contact info is. The third page is where job openings are mentioned.

Some pages, which had little content on the old website have been merged into other pages. And I am happy that I managed to avoid making new pages to make the transformation possible. All in all the menu now has six items, each with a submenu with 3 or 4 items. This is very satisfactory.

After the text on a page, there are two or three coloured "bubbles", which serve as navigation to the two or three other pages on the same topic. The thinking behind this is that since the user have already chosen to read about the school (or another subject), he might be interested in the other things we have written about the school (or whatever other subject, he has chosen). These bubbles also serve as a prominent part of the aesthetics of the website.

There are still some open questions, most prominently the footer, which could very well be used for navigation.

There will be a bit more about the navigation in my next blog post, which deals with the aesthetics of the new website for Dalgaarden.

Thursday, 7 June 2018

The Test of Gallery Plugins for WordPress

As I ran across a gallery plugin, when I downloaded a theme, and was unsatisfied with this gallery, I thought it could be a good idea to test some galleries.

Test of a Modula gallery, free version
Test of a NextGEN gallery, free version
Test of a Foo Gallery, free version
Test of a photo gallery by WD, free version
Test of a photo gallery by Supsystic, free version

The gallery plugin that disappointed me was Envira Gallery Lite (presumably a free version), which I have replaced by now.

In general, these gallery plugins get the job done, and they are not too shabby. Honestly I don't want to go into details about them on this occasion, because they each have their strengths and weaknesses, and their paid versions are reasonably priced. The paid versions may fix some issues, so it's just a very complicated situation. I suppose you pick a gallery plugin which seems to be updated fairly often and get to know it, and if a special need arises, you can then study the others.

As I suspected, the gallery plugins don't handle GIFs with transparent backgrounds in the same way. If I want some of those on a web page, I need to be cautious. Even Windows has a hard time with this. I have had a problem with image file types on a Prestashop as well. I had to go with a .png to solve that.

The gallery plugins make responsive galleries, and so they depend on the layout of the theme. This makes the study of galleries even more complicated. The paid versions of the gallery plugins in my test have plenty of configuration options, some even allows CSS to be written, so they are all usable with many aesthetic choices. It definitely counts as a plus that aesthetic choices don't have to fit to one of a limited number of gallery layouts.

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