mersenneforum.org  

Go Back   mersenneforum.org > Great Internet Mersenne Prime Search > PrimeNet

Reply
 
Thread Tools
Old 2014-09-22, 17:01   #1
Madpoo
Serpentine Vermin Jar
 
Madpoo's Avatar
 
Jul 2014

31×107 Posts
Default Primenet web design

I'm starting this thread to move the current discussion in the "server problems" thread which I guess has gotten off topic.

To summarize from there, the www.mersenne.org website is going through some proposed design changes to update the style and "feel".

You can try out some of the new pages by going to:
http://www.mersenne.org/default.mock.php

Don't anyone *dare* bookmark that page... LOL Because if/when these go live, the "mock" pages will go away and simply become the new default. I've blocked them from being crawled and set the canonical link on each one to point to the live version, so these are really just for gathering some feedback and testing.

They point to the live database, so anything you do on there to your account/team and assignments/results are in fact the real deal.

Style-wise, it's a centered page, currently 1000 pixels wide. The menu has switched from the javascript expand/collapse to a simpler CSS flyout design (colors of the menus still to be decided, but sticking with the old day-glo colors for now).

I'm going through the pages bit by bit, pretty much working my way down the left hand menus. I've got the main navigation bits mocked up as well as all the stuff in "My Account", plus a few other popular ones like the "Primenet summary -> work distribution map" and "Results queries -> known primes"

Besides layout/menu changes, I'm tidying up some of the lingo here and there but content-wise it's pretty much the same. I might tweak a table width or graph here or there to get it to fit-pretty, but that's about it.

Spending some time spelunking through the site navigation also makes me think that some things should be easier to find than they are now. Like that "known primes"... it's a list of the Mersenne primes found by GIMPS and others and it's a nice historical overview of the project, but it's hidden in a weird submenu. Things like that (and looking at the types of Google searches that people do) should give me an idea of which pages should bubble up to become more visible, with some nice home-page placements and optimized menu layout.

There are some other under the hood changes that are meant to help search engine visibility... adding distinct and specific meta descriptions to each page, sectioning and using h2/h3/etc. tags to mark up content, and so forth.

If you have feedback on any of the mocked up pages (you'll know you're on one if the URL has "default.mock.php" in it) like it's broken in your browser or looks funny or whatever, let us know. Suggestions may not make it into any final design, but I'm trying to keep an ear out for ideas on making things useful and also still pleasing to the eyeballs.
Madpoo is offline   Reply With Quote
Old 2014-09-22, 17:44   #2
kracker
 
kracker's Avatar
 
"Mr. Meeseeks"
Jan 2012
California, USA

32×241 Posts
Default

Nice... I like the new "ClearType" font on the menus... although I see a small cosmetic bug atm: (Using Chrome 37)
Attached Thumbnails
Click image for larger version

Name:	Untitled.png
Views:	209
Size:	31.2 KB
ID:	11756  
kracker is offline   Reply With Quote
Old 2014-09-22, 17:58   #3
Xyzzy
 
Xyzzy's Avatar
 
Aug 2002

22·3·17·41 Posts
Default

A bit of fun: http://www.dejavu.org/emulator.htm
Xyzzy is offline   Reply With Quote
Old 2014-09-22, 18:20   #4
garo
 
garo's Avatar
 
Aug 2002
Termonfeckin, IE

22·691 Posts
Default

I like the changes. But the whit background to the text hurts my eyes. Any reason why you chose grey margins and a white background? Is making the whole background grey an option?
garo is offline   Reply With Quote
Old 2014-09-22, 18:49   #5
Batalov
 
Batalov's Avatar
 
"Serge"
Mar 2008
Phi(4,2^7658614+1)/2

963310 Posts
Default

A good idea (garo's) (and in time for a CSS updates and such) is to use some themes... and even bind them to user's preferences once s/he is logged in.

Like ProjectEuler has two: 'day' and 'night'. (not really bound to the time of the day ; bound to the user's choice )
Batalov is offline   Reply With Quote
Old 2014-09-22, 19:29   #6
sdbardwick
 
sdbardwick's Avatar
 
Aug 2002
North San Diego County

2B716 Posts
Default

Quote:
Originally Posted by Batalov View Post
A good idea (garo's) (and in time for a CSS updates and such) is to use some themes... and even bind them to user's preferences once s/he is logged in.

Like ProjectEuler has two: 'day' and 'night'. (not really bound to the time of the day ; bound to the user's choice )
+1 for 'night' themes. Arstechnica.com also allows sticky user selection of light (ugh!) and dark (yay!) themes.
sdbardwick is offline   Reply With Quote
Old 2014-09-22, 20:26   #7
CRGreathouse
 
CRGreathouse's Avatar
 
Aug 2006

3·1,993 Posts
Cool

Quote:
Originally Posted by Batalov View Post
Like ProjectEuler has two: 'day' and 'night'. (not really bound to the time of the day ; bound to the user's choice )
I rather like the idea (that you weren't suggesting) of tying the choice of style to the user's local time. Light theme 6 AM - 6 PM, dark theme 6 PM - 6AM.
CRGreathouse is offline   Reply With Quote
Old 2014-09-23, 02:41   #8
Madpoo
Serpentine Vermin Jar
 
Madpoo's Avatar
 
Jul 2014

1100111101012 Posts
Default

Quote:
Originally Posted by sdbardwick View Post
+1 for 'night' themes. Arstechnica.com also allows sticky user selection of light (ugh!) and dark (yay!) themes.
It should be easy enough to style the main section's background color. It's just tied to the <article> section of the HTML.

There's the lightish gray background to overlay the dead space, the darker gray of the header section, white on the nav bar. That pretty much makes up the templated stuff that each page would share.

The main content section of each page is broken into a <main> section, just the title part of the page really. Has that grayish-blue hue. Then one or more <article> sections with white.

I was sticking to a neutral-ish color palette. The actual colors can be changed later but it was about nailing down the layout aspects first. I don't know that I have much of an eye for the colors... if I did anything I'd only be copying from somewhere else.

EDIT: Bear in mind, I'm copying some of the existing colors and what nots from the existing setup. :)

Last fiddled with by Madpoo on 2014-09-23 at 02:43 Reason: Oh yeah
Madpoo is offline   Reply With Quote
Old 2014-09-24, 04:41   #9
Madpoo
Serpentine Vermin Jar
 
Madpoo's Avatar
 
Jul 2014

31·107 Posts
Default

Well, I got all the pages mocked up (I think I got all of them).

If you go to http://www.mersenne.org/default.mock.php you should be able to navigate around since I switched all of the menu links to the new mock pages.

I didn't update links found on the pages themselves, so if you click on any of those you'll wind up back on the regular page.

The one set of pages I couldn't fully test yet were some of the team pages since I don't have a team account (or didn't, until today). The main team summary page with the graphs only just started showing anything, so there are probably some layout issues to address, like I did with the individual account summary page.

The old page shows 3 graphs side by side, and it just too wide for the goal of 1000px I plucked out of the air... but I adjusted spacing on the individual account to at least make it look orderly. I need to do that on the team page now I guess.

A few pages had some real challenges with tables, especially. The existing design took full advantage of however wide a browser window is (or would just scroll side-to-side). I mean, some tables were ridiculously wide.

I addressed one really challenging one on the CPU benchmark page by rotating the headers, but let me tell you, doing that in CSS is not exactly easy to figure out, with skewing, rotating, offsetting, etc.

I think I may look at some of the Jquery options for making tables look REALLY pretty, with click to sort, scroll left/right and up/down, and even paging features so you don't have a browser window that's 20,000 pixels tall.

ATTN: GPU72
When mocking up the manual assignment/result pages, I *tried* to keep certain comment blocks and structures untouched since I know the GPU72 spider is probably keying on certain things in the HTML.

I'll message Chris separately to get his feedback on that, and I even created a slimmed down/minimized version of the manual assignment page that doesn't have the header/footer/nav sections so it's just less overhead.

Now I just need to do some fine tuning here and there, and most importantly make sure George and Scott are happy with it.

And I will be taking some of your input into consideration... colors and even the overall width of the page are still things to look at, and I'm even toying with making the menu bar a top-nav instead of sidebar, or making the sub-menus of a section "sticky" if you're already on a page in that section (so you don't have to go and hover over it again to get reports or whatever).

But that's all icing stuff... it's in a more or less compartmented and somewhat CSS'ified state right now so things like that can hopefully be changed easily at a more global level.
Madpoo is offline   Reply With Quote
Old 2014-09-24, 04:45   #10
Madpoo
Serpentine Vermin Jar
 
Madpoo's Avatar
 
Jul 2014

31×107 Posts
Default

Quote:
Originally Posted by kracker View Post
Nice... I like the new "ClearType" font on the menus... although I see a small cosmetic bug atm: (Using Chrome 37)
Yeah, I gave the menu text a slight drop shadow. It's subtle, but if you're in the Chrome dev tools and toggle it on/off, you'll be like "Oh, yeah!"

I *think* I fixed the cosmetic issue your screenshot showed... I rushed through the alignment of the hover menus and I was off by a couple due to borders, so it was overlapping a bit on the submenu. I think I got it all squared away. The tricky part was getting it just right, so you don't lose focus on the main menu as you transition to the submenu. Too much gap and the submenu disappears before you can click anything. LOL

It's great you can do that in pure CSS, but yeah, you're limited, like you can't have a hover delay (I don't think). Jquery plugins might offer something... it's funny, the site already loads jquery but besides maybe the table sorting feature on a few pages, I'm not sure what else would use some of those features.
Madpoo is offline   Reply With Quote
Old 2014-09-24, 05:39   #11
srow7
 
Jul 2014

22×13 Posts
Default

the colorful menus (my account, my team,etc)
do not work on mobile browsers (ios/safari)
because cannot hover a curser.
srow7 is offline   Reply With Quote
Reply

Thread Tools


Similar Threads
Thread Thread Starter Forum Replies Last Post
Database design xilman Astronomy 1 2017-04-30 22:25
Theoretical Experiment Design c10ck3r Homework Help 7 2015-02-03 08:54
Digital Logic Design henryzz Puzzles 9 2014-12-04 20:56
new intel design tha Hardware 5 2007-04-19 11:38
design factoring algorithms koders333 Factoring 14 2006-01-25 14:08

All times are UTC. The time now is 11:06.


Thu Dec 9 11:06:59 UTC 2021 up 139 days, 5:35, 0 users, load averages: 1.42, 1.50, 1.37

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.

This forum has received and complied with 0 (zero) government requests for information.

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation.
A copy of the license is included in the FAQ.