Mobile responsive forum for InvisionFree

[Orioni]

 

Reviewing our forums statistics, about 20% of our visitors use a mobile device (tablet+smartphone).

 

Our current forum design provides a sub-optimal experience. The design is not adapted for smaller screens, and also takes a rather long time to load.

 

To improve this I propose the following changes.

 

#1 Sidebar

Remove the sidebar on the right to create a wider screen. Reviewing clicks statistics, I noticed the sidebar is relatively un-used, contrary to the top horizontal navigation bar. Some links can be moved from the side to the top.

 

#2 Shoutbox

Remove the shoutbox at the bottom for faster loading of each page. (Vocenae indicated this several times.) The Shoutbox has seen relatively little use these past months. We can evaluate this change, and decide to reinstall it.

 

#3 Images

Most of the pageload time is spent on images. I have looked into replacing about 20 images with the more modern solution of an icon font. My  preference is Font-Awesome, which I have used for several years now. http://fontawesome.io

 

#4 Responsive design

This will prove to be the most difficult challenge. InvisionFree (our forum CMS) is built with tables, which are notoriously difficult to style. During these last weeks of research, I failed to find even a single example of responsive design. I will therefore take it upon myself to hack together a design that work for both larger and small screens.

 

Discussion

Since no man is an island, I would like to open this topic for discussion. I am looking forward to hearing about your own experiences and proposals to improve our overall user experience.

[Orioni]

As a trial I have hidden the sidebar and shoutbox. (I put their code in comments, so it is easy to restore.) From the looks of it this seems to have fixed the problem of minute-long pageloading times. What I will do next is re-enable each separately, find the culprit and figure out if and how to fix this.

 

Meanwhile I am still eager to hear your feedback about the above proposals.

[Orioni]

I continue to make good progress on the mobile theme.

 

I have started replacing images of buttons with CSS classes, which are lighter and faster and easier customisable. Please let me know what I can do to make these better.

 

I am starting to implement Font Awesome, to add some iconography next to each action.

[Afropa]

No doubt a lot faster than before.

 

I don't like the white icons on the overview.

 

Where is the chatbox?

 

That big yellow bar when I edit my own post looks ugly.

Edited August 17, 2016 by Afropa (see edit history)

[Sa Hara]

I don't really notice any difference, so I guess that is a good thing.