Jump to content

Mobile responsive forum for InvisionFree


Recommended Posts

user posted image

 

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.

Link to comment

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.

 

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

Link to comment

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.

Link to comment
Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...