v.4: Frontpage


Advanced search

Message boards : Website : v.4: Frontpage

Author Message
Profile Janus
Volunteer moderator
Project administrator
Avatar
Send message
Joined: 16 Jun 04
Posts: 4461
Credit: 2,094,806
RAC: 0
Message 12837 - Posted: 16 Jun 2014, 18:09:17 UTC
Last modified: 16 Jun 2014, 18:32:09 UTC

Hey everyone!

This is the first post in a series of posts where the point is to present and discuss a major website overhaul done to improve the website a bit and bring it up-to-date.

The first page to open up is the front page. You can visit the page on the test server over at http://test.burp.renderfarming.net. Maybe you want to compare it to the current frontpage and post back your experience and comments in this thread. If you hit any link on the test server that hasn't been opened yet you will be taken back to the normal BURP site.
From time to time a new page will be opened up and a new thread will open with them. Please stay as much on topic as possible.

The primary reason that got me started on redesigning the frontpage was a discussion I had with a team captain at one of the BOINC conferences several years ago. His idea was to spend more of the frontpage talking about content, events etc. and less about technical stuff. You'll see that it has become much more visual than the old page - with focus intended to be more on major user content milestones rather than the release of Blender version X.YZ (which is going to be moved to the client forum).
A small list of changes:


  • Changed focus to content rather than just news
  • Removed the development RSS feed since it was causing timeouts from time to time and generally didn't make much sense to non-devs anyways
  • Fixed an issue with the RSS icon
  • Made the introduction box simpler
  • Removed the "Upgrade to Beta" box since we now assume that if you add machines to the project it is because you want to participate
  • Improved formatting of news entries
  • Rather than showing several years of entries, just show the most recent ones
  • Removed the "Monday Maintenance" box since most maintenance is now done without affecting the service. Extended maintenance is reported in the server subforum as usual.



Since this is the first page to be opened up to public scrutiny I'd also like to add a few notes on some extra things that will be common to the next pages: dynamic layout and the navigation system.

Navigation
Based on logfile analysis there is a very clear pattern to how people browse this site. There's a bunch of maybe 3 or 4 pages that are extremely well visited and then there's all the rest. Part of the new design is a restructure of the left sidebar which is being cleaned up a great deal and split into two parts: one for stuff that is used all the time (which is at the top of the page) and one for less used items (at the bottom of the page). Some items, like "donations", are being completely removed and other items, like "Upload Session" are being changed.
Some of the links that previously lead to seperate pages, like top participants/computers/teams/stats are being combined into one where the target pages are then interlinked instead. This may not make much sense right now when the only thing visible is the frontpage, but it will make much more sense once some of the new combined pages are opened up, so let's skip navigation discussion until that happens.
A small list of some of the changes:


  • "Rules and policies" moved to footer
  • "Getting started" removed, being added to frontpage and a help box until your first workunit completes
  • "Account settings" renamed to "My Account"
  • "Submit session" merged into "My Account" in a session control panel, as well as a link in "My Gallery"
  • "Message Boards" renamed to "Forums"
  • "Session Gallery" renamoted to "Gallery"
  • "Hall of Fame" not decided yet. Will probably be removed and replaced with a visual identifier in "Gallery" - like the trophy icon - as well as frontpage exposure for really nice stuff like Vetri and Sunflower
  • "Teams - create/join" and "Participant profiles" moved to community section in footer. More focus on teams in actual site content rather than the menu.
  • All stats links combined into "Statistics"
  • "Known problems" moved to development portal bug tracker, moved to footer
  • "Serverstatus" combined into "Statistics"
  • "Help us code" and "Donations" removed, will be reposted in the forums




Dynamic Layout
All of the redesigned pages make extensive use of dynamic CSS3 layouts. This is known under many names: "responsive design", "adaptive layouting", "mobile ready" blah blah blah. What it really means is that the layout will change if you give it less space - go ahead and try to change the width of your browser window and see for yourself what happens.
I have been really annoyed at how difficult it is to use the existing site from my tablet and phone. I check the forums, the server status and the gallery a lot to see what's been going on and I kept having to constantly zoom in and out to read things or hit the links. On the other hand I really like to have a lot of content on the screen at once when I browse from my desktop. Back when BURP v.0.3.0 was made it wasn't possible to get both, today it is.
The new site tries to use your browser settings when it comes to content display - if your system is set up to use a large font, then the website will show with a large font instead of the hardcoded fontsize of 11px that the current site uses, which in many cases is slightly too small for my taste.
One last thing is that all images are now much higher resolution and have been recompressed using better compression - logo etc. all support multiple DPI settings and should look much more sharp and well-defined with fewer JPEG artifiacts.
One drawback from using this much CSS is that some browsers will be unable to handle all of it - like Internet Explorer 8. Mostly these browsers will show something that at least looks something like the new site, so it is still useable, but all the advanced features will be unavailable. Since IE11 is available for free there's really no reason to keep full support for 6 and 7 as it is a serious pain to do so.

There we go - comments welcome!

Knightoffaith
Send message
Joined: 23 May 14
Posts: 9
Credit: 0
RAC: 0
Message 12838 - Posted: 17 Jun 2014, 0:15:54 UTC

Well, the overall design is generally nice, clean, modern, and pretty. :)

Perhaps a more glass-looking look on the top navigation bar, as it looks like the buttons themselves are grey, not clear over a background (grey is boring for buttons IMO). Outlined the area here: http://prntscr.com/3tk0cq

Dynamic layout works very well, though the font you use looks slightly odd to me with a smaller window.

Profile Janus
Volunteer moderator
Project administrator
Avatar
Send message
Joined: 16 Jun 04
Posts: 4461
Credit: 2,094,806
RAC: 0
Message 12839 - Posted: 17 Jun 2014, 6:10:48 UTC - in response to Message 12838.

Well, the overall design is generally nice, clean, modern, and pretty. :)

Thanks! A lot of effort went into it already, I'm happy it wasn't too bad.

Perhaps a more glass-looking look on the top navigation bar, as it looks like the buttons themselves are grey, not clear over a background (grey is boring for buttons IMO).

Frosted, tinted glass. Great suggestion! I think it is doable, I'll give it a shot when I get near a computer tomorrow.

Dynamic layout works very well, though the font you use looks slightly odd to me with a smaller window.

Where and how? We're quite limited to what we can do with fonts:

  • Relative size
  • With or without serifs
  • Bold, italic or normal
  • Justification


Apart from that we're constrained to the viewer's selected default font; for instance we cannot change the font to Windings or Helvetica even if we wanted to.
Do you have any specific solutions or suggestions on what to do about it?

funkydude
Send message
Joined: 23 Dec 13
Posts: 275
Credit: 2,478,281
RAC: 0
Message 12841 - Posted: 17 Jun 2014, 11:12:02 UTC

Looks good to me. The only thing that comes to mind currently is that I'm struggling a little (colour, not size) to make out the navigation text at the bottom against the background.

Profile Janus
Volunteer moderator
Project administrator
Avatar
Send message
Joined: 16 Jun 04
Posts: 4461
Credit: 2,094,806
RAC: 0
Message 12842 - Posted: 17 Jun 2014, 17:17:56 UTC
Last modified: 17 Jun 2014, 17:20:44 UTC


  • Contrast increased a bit in the footer.
  • Added a frosted, tinted look to the nav bar in most browsers (not IE for some reason, there it is only tinted).



I couldn't find a good colour for the buttons that also worked well with the other states that they can be in (hover, loading, selected). Instead they now curve a bit so that they aren't entirely grey.
If someone comes up with some truly nice colours for the buttons and the text please say so!

ps. Whenever the style updates on the test site you may need to do a full refresh (Ctrl+Shift+R in most browsers, Ctrl+R in some, CMD+R in others) to be able to see the changes.

Knightoffaith
Send message
Joined: 23 May 14
Posts: 9
Credit: 0
RAC: 0
Message 12845 - Posted: 17 Jun 2014, 21:55:36 UTC - in response to Message 12838.

Frosted, tinted glass. Great suggestion! I think it is doable, I'll give it a shot when I get near a computer tomorrow.

Looks nice.

Apart from that we're constrained to the viewer's selected default font; for instance we cannot change the font to Windings or Helvetica even if we wanted to.
Do you have any specific solutions or suggestions on what to do about it?

Well, here's what I'm looking at: http://prntscr.com/3turh6

I didn't know of any such font constraint, so I can't really help there. The font itself just looks odd in that instance to me. *Shrugs*

Profile Janus
Volunteer moderator
Project administrator
Avatar
Send message
Joined: 16 Jun 04
Posts: 4461
Credit: 2,094,806
RAC: 0
Message 12872 - Posted: 19 Jun 2014, 17:45:42 UTC - in response to Message 12845.

I'm a bit of a font retard, so if you can put some words on it then maybe there's something that can be done about it.

In the meantime the next page has been revealed

Knightoffaith
Send message
Joined: 23 May 14
Posts: 9
Credit: 0
RAC: 0
Message 12878 - Posted: 20 Jun 2014, 19:43:06 UTC - in response to Message 12872.

I'm a bit of a font retard, so if you can put some words on it then maybe there's something that can be done about it.

In the meantime the next page has been revealed


I'm not much better lol. Lets see if I can explain.

http://prntscr.com/3utkfj

Compare the top font to the one on the bottom. I'm thinking more along the lines of the top one. Closer to Ariel than Times New Roman, straighter text as opposed the thinner text with the 'extensions' at the end.

But, take my opinion for what it's worth, which is limited :P.

Profile Janus
Volunteer moderator
Project administrator
Avatar
Send message
Joined: 16 Jun 04
Posts: 4461
Credit: 2,094,806
RAC: 0
Message 12880 - Posted: 20 Jun 2014, 20:16:49 UTC - in response to Message 12878.

Tried out a sans-serif font (that's what "without those extensions at the end" is called). It certainly makes it look different. Better or not, I have no idea =)


Post to thread

Message boards : Website : v.4: Frontpage