website responsive template

[raymond]

Hello,

make the website responsive (working well also with smartphone and tablets).

thanks

[SirVer (sirver)]

could you help with that? We have not much frontend knowlege in our portfolio right now.

[raymond (raymondv)]

I do not have spare-time to doing this.

You can make an announcement on the website searching for help making the website responsive?

[kaputtnik (franku)]

I was thinking a long time about that, but i haven't a smartphone or tablet, so i haven't experience with such mediums and also couldn't test the results...

[GunChleoc (gunchleoc)]

I think this is important because so many people surf with smartphones these days. I personally don't use the things though, so I don't know what's important except for big buttons to push for navigation.

[Trimardio (trimardio)]

Kaputtnik, you should know there is now a function in chrome that allow to see your website in different format:

ctrl + shift + m

I saw there is already a branch being worked on for more responsiveness, but I would have done it a bit differently:

use of media query (notably for the menu)
use of flex and % rather than em

[kaputtnik (franku)]

Most browsers have functionality to show a website in different formats. At least Firefox and Opera :-)

Trimardio, i would be glad if you can help with this. When i had started the branch i had only an idea on how to do a responsive layout, so the branch was only some sort of playground. In the meantime i managed to get my own homepage responsive, but the widelands homepage is much bigger, and i think some of the css needs a general overhaul by a specialist. E.g using of html5 tags "header", "nav", "article", "section", "aside".

Using media queries is definitely right. About % vs. em i don't know. I think for stuff which depends on the font size, using em is the right decision.

Currently i'am working on a new implementation of the search, and i don't know when i will find the time to work on a responsive layout.

[Trimardio (trimardio)]

I agree with all your point, but why the need for betters tags? Those are good for referencing from search engine or readability for some special device (like kindles or screen for blinds), aren't they? I didn't know they had influence on the layout actually...

And should I create a new branch or start from yours?

[kaputtnik (franku)]

Isn't creating a barrier-free website a good goal?

Anyway i think using those tags could also be used to get a clean html structure to get better readability. E.g.:

<header> instead of <div id="header">
<nav> instead of <div id="topmenu">
<aside> instead of <div id="rightColumn" class="posRight">

and so on.

Just a suggestion :-)

[Trimardio (trimardio)]

Ohhh! Ok, I though you were implying these tags could influence the css and that bugged me. Yeah I think that's a good idea otherwise! It's simply good practice :P

Just to my question though, should I use the branch you qualified as "a playground" ?

[kaputtnik (franku)]

Sorry, forgot to answer your question :S

It should make no difference, but maybe better make a fresh branch from trunk. Didn't know anymore what kind of changes i have made and a fresh branch reduce the possibility of diverged branches.

Thanks for working on this :-)

[Trimardio (trimardio)]

No problem!

I'm testing with the menu. And I was wondering, is there any set of icon I could use? There doesn't seems to be any in the website currently. But those icons could be very hepful for some specific aspect (for example put all the menu in a single icon, or put the search bar into a single icon)

I don't understand a lot of the different license to use. Is any one in this wiki acceptable? https://commons.wikimedia.org/wiki/Comparison_of_icon_sets

The problem of icons is that it will render the website heavier for the user of course. We can however remove the unused icon from the sets.

[Trimardio (trimardio)]

Other question. How can I create a fake db for the forum and the wikis, so I can test a bit those part of the website too?

[kaputtnik (franku)]

If icons are really needed i think we should first try to use our own icons that we have in the game. Just look into the data folder under the folder images/wui. But i am in favor to use as less images as possible for navigating. Images are bad for screenreaders.

I think the menu is a big problem and had a thought to split it somehow. So on small screens it shows not that many entries. We may should think what kind of information are the most interesting ones when using the website. E.g. downloading a map is maybe useless on smartphones (as long widelands isn't playable on small devices) Whereas the forum is likely the most interesting thing one wants to use on a small device.

Additionally the right boxes are maybe problematic. I think the most interesting thing here is the 'Last Posts' box which should be somehow at the top on very small devices.

This is really a difficult task...

Some other webpages use a different url for smartphones. I am not sure if this would be a better solution for us, nor how this could be implemented. Somewhere i read that google does not recommend such serverside url switching.

Fake db:
You are using a sqlite3 db right now. Of course without content... Take a look into you local_settings.py, there you could find your database settings. If you are using the default the database is stored in the file dev.db.

[GunChleoc (gunchleoc)]

Just a quick not for accessibility:

Above the navigator, add
something like this:

 <div class="invisible"><a href="#contentarea"
accesskey="n" class="invisible">Skip navigation</a></div>

And the css
looks like this:

/* For accessibility */
.invisible {
 width: 0px;

height: 0px;
 margin:0px;
 padding:0px;
 border:0px;
 overflow: hidden;

font-size: 0px;
}

This will allow people who use screen readers to skip
the menu.

[Trimardio (trimardio)]

kaputtnik:
What about svg icons? Those are more lightweight! :D

Hidding things in the menu is really easy. I agree with you we could remove some entries, but apart from download, I can't see what.

For the other tasks, I removed floats and added more flex-boxes. I find it far easier to use. Here is the test branch:

lp:~trimardio/widelands-website/wlwebsite_responsive
I'm not fan of the menu yet. And it's buggy on mobile touch devices.

I don't think we would need a different url. I think the interest of doing it so, is mainly for the images to load. But we don't have a lot images so I think we'll be cool!

GunChleoc:
Pretty nice trick, thanks! I'll add that!

[kaputtnik (franku)]

Add the images you want. We can discuss the using later on.

On small devices i think those menu entries can be omitted:

- THE GAME: Downloads, Maps, Widelands Development Team (this is also in the DEVELOPMENT menu), Maybe also: Artwork
- WIKI: Creating Game Content, Recent Changes
- CHAT: Imho useless at all
- DEVELOPMENT: Documentation, Widelands Bugtracker, Website Bugtracker

Open for discussion though :-)

Some of the menu entries and wikipages are a bit messed up. Means there is no clear structure, imho. But this out of the scope of this bug report :-D

[kaputtnik (franku)]

The actual state looks promising :-)

[kaputtnik (franku)]

IMHO it isn't needed to have a responsive template for all the website pages in one branch. If you have a basic version we should merge that one. Otherwise it's quite complicated to check new changes against responsibility.

If something on the page isn't responsive, we could add that later on. What do you think?

[GunChleoc (gunchleoc)]

Breaking a big problem down into smaller problems is always good if it can be done, so I'd be OK with a partial branch :)

[Trimardio (trimardio)]

>Breaking a big problem down into smaller problems is always good if it can be done, so I'd be OK with a partial branch :)

Good point and that's why I preferred to restart from zero. Now only focusing on making the menu responsive. Then add some accessibility. Then add proper tags.

Checking back my branch I found out I simply had destroyed too many basic features.

[Trimardio (trimardio)]

@kaputtnick

Is this branch still updated? Do you want us to start from here for the responsive menu?
lp:~widelands-dev/widelands-website/responsive_website

[kaputtnik (franku)]

No, that branch is quite old and it was only an approach.

I am currently very busy with real life, so i do not have much time for the website right now ...

[GunChleoc (gunchleoc)]

Issue moved to https://github.com/widelands/widelands-website/issues/181