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 [url]www.mersenne.org[/url] 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:
[URL="http://www.mersenne.org/default.mock.php"]http://www.mersenne.org/default.mock.php[/URL]

Don't anyone *dare* bookmark that page... LOL :smile: 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.

Nice... I like the new "ClearType" font on the menus... although I see a small cosmetic bug atm: (Using Chrome 37)

A bit of fun: [url]http://www.dejavu.org/emulator.htm[/url]

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?

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 :smile:; bound to the user's choice )

[QUOTE=Batalov;383692]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 :smile:; bound to the user's choice )[/QUOTE]+1 for 'night' themes. Arstechnica.com also allows sticky user selection of light (ugh!) and dark (yay!) themes.

[QUOTE=Batalov;383692]Like ProjectEuler has two: 'day' and 'night'. (not really bound to the time of the day :smile:; bound to the user's choice )[/QUOTE]

I rather like the idea (that you weren't suggesting) of tying the choice of style to the user's local time. :smile: Light theme 6 AM - 6 PM, dark theme 6 PM - 6AM.

[QUOTE=sdbardwick;383693]+1 for 'night' themes. Arstechnica.com also allows sticky user selection of light (ugh!) and dark (yay!) themes.[/QUOTE]

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. :smile:

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

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

If you go to [URL="http://www.mersenne.org/default.mock.php"]http://www.mersenne.org/default.mock.php[/URL] 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. :smile:

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.

[QUOTE=kracker;383683]Nice... I like the new "ClearType" font on the menus... although I see a small cosmetic bug atm: (Using Chrome 37)[/QUOTE]

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.

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

[QUOTE=srow7;383748]the colorful menus (my account, my team,etc)
do not work on mobile browsers (ios/safari)
because cannot hover a curser.[/QUOTE]

On Android you can tap them and the sub menu opens up. Does that not work on ios?

[QUOTE=Mark Rose;383759]On Android you can tap them and the sub menu opens up. Does that not work on ios?[/QUOTE]

It should... it works on my Android. I should go try it on one of our QA team's iPhones, but I'm fairly certain it should work the same.

[QUOTE=srow7;383748]the colorful menus (my account, my team,etc)
do not work on mobile browsers (ios/safari)
because cannot hover a curser.[/QUOTE]
Same behavior on Windows Phone browser as well; submenu only visible when touching menu item. Tapping doesn't keep submenu open.
Then again, there are only about 3 other people using WP, so it may not be worth spending time to figure out.

[QUOTE=sdbardwick;383769]Same behavior on Windows Phone browser as well; submenu only visible when touching menu item. Tapping doesn't keep submenu open.
Then again, there are only about 3 other people using WP, so it may not be worth spending time to figure out.[/QUOTE]

If you lump them in with the BlackBerry users you should have at least 5 people though. That's gotta count for something.

Just an idea:

You could use [URL="http://getbootstrap.com/"]bootstrap[/URL] as basis and then use something like [URL="http://startbootstrap.com/template-overviews/sb-admin-2/"]this[/URL].
Thus you would combine ease of use with easy of "programming".

[QUOTE=sdbardwick;383769]Same behavior on Windows Phone browser as well; submenu only visible when touching menu item. Tapping doesn't keep submenu open.
Then again, there are only about 3 other people using WP, so it may not be worth spending time to figure out.[/QUOTE]

Phhbhbhbttt. That figures.

There should be a law... :smile:

I was going to use one of our dev iphones here but the darn thing wasn't charged up. Plugged in now so I'll try it later. We *might* have a Windows Phone device, but I won't hold my breath on that.

In the meanwhile let me ponder if there's a better way to implement the menus for mobile.

Not incidentally, I've got some stats now on what kinds of devices hit the site and mobile use is VERY low. Well below industry averages. What, there's no ARM version of Prime95? (could you imagine the battery life you'd get...)

[QUOTE=blip;383780]Just an idea:

You could use [URL="http://getbootstrap.com/"]bootstrap[/URL] as basis and then use something like [URL="http://startbootstrap.com/template-overviews/sb-admin-2/"]this[/URL].
Thus you would combine ease of use with easy of "programming".[/QUOTE]

I'm exploring just using some Jquery UI themes. Jquery's already on the site (maybe the old table sorting used it, or something else... unsure).

I was having fun with some jquery plugins for making nice scrollable tables.

The CPU benchmark table was still a huge bear to tackle since it just has way too much info to make it easy to deal with, but here's my first stab at it:
[URL="http://www.mersenne.org/report_benchmarks/tabletest.php"]http://www.mersenne.org/report_benchmarks/tabletest.php[/URL]

The plugin I'm using, [URL="http://www.tablefixedheader.com/"]http://www.tablefixedheader.com/[/URL], isn't entirely the best... that table for instance changes the # and order of rows based on certain things... in other words the way the page is designed makes it rather unwieldy to work with, but I just added in some PHP if/else branches just like the existing table design was using so I could try to keep column widths and sorting somewhat nice.

If anyone has a better idea or experience with dealing with tables and making them look pretty, I'm open to it.

FYI, the theme I used on that table test page is kind of ugly, I'll admit. Orange? But it was one of the themes from the example and I didn't bother finding a prettier one that still had good zebra colors for the rows. Deal with it. :smile:

[QUOTE=Madpoo;383782]

If anyone has a better idea or experience with dealing with tables and making them look pretty, I'm open to it.
[/QUOTE]
[URL]http://startbootstrap.com/templates/sb-admin-2/tables.html[/URL]

[QUOTE=blip;383787][URL]http://startbootstrap.com/templates/sb-admin-2/tables.html[/URL][/QUOTE]

Eh... I don't know anything about startbootstrap but Jquery seems more universally loved and supported, and there are TONS (literally?) of plugins for just about anything you want, plus TONS (again?) of pre-baked themes should that ever come to fruition.

I guess if I saw anything in there that looked any better than the dozens of Jquery plugins, I'd be more persuaded. :)

bootstrap goes on top of jquery and provides a decent framework for responsive design on virtually all (current) platforms. My last hint here: [URL]http://getbootstrap.com/javascript/[/URL]

As always, we could argue endlessly about (pros and cons of different) solutions. If you have what you need for your current task, just go on. I'm happy to see the final result :-)

[QUOTE=blip;383792]bootstrap goes on top of jquery and provides a decent framework for responsive design on virtually all (current) platforms. My last hint here: [URL]http://getbootstrap.com/javascript/[/URL]

As always, we could argue endlessly about (pros and cons of different) solutions. If you have what you need for your current task, just go on. I'm happy to see the final result :-)[/QUOTE]

See, you're *assuming* I know what I'm doing. LOL

All I know about jquery prior to a few days ago could fit on a single sticky notepad. So I'm at that learning-to-crawl phase and honestly I'm just amazed I could get anything working. I was feeling pretty proud of myself for getting something running with that table plugin and even modified it slightly so when sorting on a URL, it sorts by the anchor text and NOT the href. Good job, me!

Menu tests
 

Hmm... I did a little test with the Jquery plugin from [URL="http://www.smartmenus.org/"]http://www.smartmenus.org/[/URL] ... it's kind of cool I guess but I'm not entirely happy with it.

You can get a flavor of it on their demo page:
[URL="http://vadikom.github.io/smartmenus/src/demo/"]http://vadikom.github.io/smartmenus/src/demo/[/URL]

I used the vertical menu with the "sm-blue" theme which seemed fun, but also a little too comical with the colors. I wasn't taken with any of the other themes so I'd imagine making it look good would mean customizing one of those with less funky colors or something. The "sm-clean" theme seemed okay but was in the other direction, as in too bland. Probably easier to spruce that one up than tone down the other one.

I'll probably keep looking at some other fun menu options.

[QUOTE=Madpoo;383782]The CPU benchmark table was still a huge bear to tackle since it just has way too much info to make it easy to deal with, but here's my first stab at it:
[URL="http://www.mersenne.org/report_benchmarks/tabletest.php"]http://www.mersenne.org/report_benchmarks/tabletest.php[/URL]

FYI, the theme I used on that table test page is kind of ugly, I'll admit. Orange? But it was one of the themes from the example and I didn't bother finding a prettier one that still had good zebra colors for the rows. Deal with it. :smile:[/QUOTE]

I added a few selectable themes below that table and picked a better default (Humanity). Fiddle with it, enjoy. "Cupertino" is also pretty good. The others are really contrasty... makes my eyes bleed... I'd probably tone down the bright colors on the anchor tags.

Meanwhile I was thinking it'd be nice to get a table design with locking first column as well as the header row. There are some out there like that, so maybe later.

[QUOTE=Madpoo;383794]sticky notepad[/QUOTE]
Is that something like a tablet PC after you sneeze in front of it, or what? :shock:

[QUOTE=Madpoo;383806]Hmm... I did a little test with the Jquery plugin from [URL="http://www.smartmenus.org/"]http://www.smartmenus.org/[/URL] ... it's kind of cool I guess but I'm not entirely happy with it.
[/QUOTE]

Here's a link where you can see what the home page looks like with the smartmenus in use. Like I mentioned, I'm ambivalent... I like the method, but the overall look using their pre-cooked theme leaves me "meh". A better font would probably do wonders. Not sure what they were thinking with "PT Sans Narrow"/"Arial Narrow". Once I started tinkering with the Chrome dev tools with fonts/sizes/etc. they do start to shine up prettier.
[URL="http://www.mersenne.org/hometest.php"]http://www.mersenne.org/hometest.php[/URL]

[QUOTE]Here's a link where you can see what the home page looks like with the smartmenus in use[/QUOTE]
the menus work on ios now.

I must say those buttons completely clash with everything else :/ (not that I could do better)

[QUOTE]the menus work on ios now.[/QUOTE]and Windows Phone too :smile:

Do the buttons have to all be different colours?

[QUOTE=Mark Rose;383859]I must say those buttons completely clash with everything else :/ (not that I could do better)[/QUOTE]

Yeah, they're clashtastic for sure. Still, it gives you an idea of what's possible, at any rate.

I'm looking at a few more options... I do find myself paying more attention to the websites I visit and how they're menus work, so I can hopefully find something less ugly and more like what I see on other sites. IMDB for instance has some decent colors and fonts on their top menus, but then it blends with their site theme.

They are worse now. The text is overlapping and has a transparent background. In Opera.

[QUOTE=Uncwilly;383864]They are worse now. The text is overlapping and has a transparent background. In Opera.[/QUOTE]

You caught me in the middle of changes. :) Try now... I applied a different theme.

Much better now :)

[QUOTE=Madpoo;383857]Here's a link where you can see what the home page looks like with the smartmenus in use. Like I mentioned, I'm ambivalent... I like the method, but the overall look using their pre-cooked theme leaves me "meh". A better font would probably do wonders. Not sure what they were thinking with "PT Sans Narrow"/"Arial Narrow". Once I started tinkering with the Chrome dev tools with fonts/sizes/etc. they do start to shine up prettier.
[URL="http://www.mersenne.org/hometest.php"]http://www.mersenne.org/hometest.php[/URL][/QUOTE]You broke it. It used to work and now the sub-menus are useless.

Maybe it is worth stating that, in case you already didn't know, [b]standard HTML supports menus out-of-the-box without needing all that JS voodoo[/b]. It also gives a consistent method of access across all web pages. When pages start using custom JS for everything then we lose all that consistency and get into trouble with unexpected results or no results at all.

[QUOTE=retina;383870]You broke it. It used to work and now the sub-menus are useless.

Maybe it is worth stating that, in case you already didn't know, [b]standard HTML supports menus out-of-the-box without needing all that JS voodoo[/b]. It also gives a consistent method of access across all web pages. When pages start using custom JS for everything then we lose all that consistency and get into trouble with unexpected results or no results at all.[/QUOTE]

So, I have to ask... is disabling javascript entirely something you do out of an abundance of security? Should I ask what you know that we don't know? :)

As far as I'm aware, all of the jquery plugins for the menus should still fail somewhat gracefully even if the browser has text/javascript blocked or isn't CSS3 aware. The javascript is used to help apply the CSS themes and do some of the fades and delays, but the bulk of the styling is done with CSS.

I mean, I could be wrong, but it seems like it should still have functionality even if JS isn't present. You may have caught it during some of my tweaking, but I'll disable javascript and see what happens.

If it's a problem, I can put a section in the header that detects lack of javascript support and shows a message that says "Hi Retina". :) Because it's probably only you. LOL

retina's comments might be something to think about, but if you do decide to keep on the same path, might I insist on at least trying a vertical expanding menu like one of the ones here?: [url]http://jqueryui.com/accordion/#hoverintent[/url]

I realise that the above shows content panels and not menus, but I think it showcases the different styles well. There are plenty of jquery "accordion menus" out there for your choosing.

Maybe we can have a poll?

[QUOTE=Jayder;383873]retina's comments might be something to think about, but if you do decide to keep on the same path, might I insist on at least trying a vertical expanding menu like one of the ones here?: [url]http://jqueryui.com/accordion/#hoverintent[/url]

I realise that the above shows content panels and not menus, but I think it showcases the different styles well. There are plenty of jquery "accordion menus" out there for your choosing.

Maybe we can have a poll?[/QUOTE]

I was looking at some accordion menus earlier, so maybe.

FYI, the smartmenu plugin had a discussion about pure CSS fallback:
[URL="http://www.smartmenus.org/support/forums/#/discussion/748/fallback-if-javascript-is-disabled/p1"]SmartMenus CSS fallback[/URL]

Sigh...

Just add an exception to allow it for [url]www.mersenne.org[/url] and call it good. :)

[QUOTE=Madpoo;383872]So, I have to ask... is disabling javascript entirely something you do out of an abundance of security? Should I ask what you know that we don't know? :)[/QUOTE]

I usually surf with JS disabled by default, too. I've enabled scripts served from mersenne.org though. It makes the web so much faster. All the annoying ads disappear, too. I realize that progressive-enhancement won't happen on every site and I selectively enable scripts when needed.

[QUOTE=Mark Rose;383876]I usually surf with JS disabled by default, too. I've enabled scripts served from mersenne.org though. It makes the web so much faster. All the annoying ads disappear, too. I realize that progressive-enhancement won't happen on every site and I selectively enable scripts when needed.[/QUOTE]

AdBlock Plus with Chrome. Ads magically vanish. :)

My only problem with ABP is when I'm testing our websites at work and I forget to whitelist our own sites... "hey ad ops, the ads are all missing! Oh, wait, umm... never mind..."

[QUOTE=Madpoo;383878]AdBlock Plus with Chrome. Ads magically vanish. :)

My only problem with ABP is when I'm testing our websites at work and I forget to whitelist our own sites... "hey ad ops, the ads are all missing! Oh, wait, umm... never mind..."[/QUOTE]

Yeah, I've done that, too! Of the billions of page views we do, nearly all are 100% JavaScript+API. Thankfully I don't have to check customer sites in my role.

I have used NoScript, Ghostery, and AdBlock Plus in Firefox for a long time. I've gotten used to spotting when things are missing from a page. My response tends to be "Temporarily allow all this page" in NoScript, followed, if necessary by "Pause Blocking" in Ghostery. I rarely have to do anything to AdBlock, and I see very few ads, especially the extremely distracting "flashing and dancing" variety.

It has become automatic for me and makes for a much quieter browsing experience. I also run Norton Internet Security and Malwarebytes Antimalware Premium, with auto-updating and scheduled scans for both.

I wish NoScript would work on a per-script basis, too, not just per-domain. It's annoying when multiple sites are hosing something off s3.amazonaws.com...

[QUOTE=Mark Rose;383893]I wish NoScript would work on a per-script basis, too, not just per-domain. It's annoying when multiple sites are hosing something off s3.amazonaws.com...[/QUOTE]
I rather think it does. Am I misunderstanding your statement?

[QUOTE=Madpoo;383874]...
FYI, the smartmenu plugin had a discussion about pure CSS fallback:
[URL="http://www.smartmenus.org/support/forums/#/discussion/748/fallback-if-javascript-is-disabled/p1"]SmartMenus CSS fallback[/URL]

Sigh...

...[/QUOTE]

I added in the pure CSS fall through suggested in that post. It works now with JS disabled.

Although I'm feeling pranksterish and it occurred to me I should make the color scheme "puke green" or something for those people. Maybe mustard yellow text on a cyan background. Whaddya think?

Also, if you have JS disabled, the nice table layout plugins I'm testing will probably render horribly. I haven't tried it myself, but I can just imagine the table being all unstyled and busting out super-wide past the right edge. Oh well. The data will still show up so I'll call that a successful no-javascript fall through even if it's ugly.

[QUOTE=kladner;383895]I rather think it does. Am I misunderstanding your statement?[/QUOTE]

I'm using the Chrome version of NoScript. Firefox is horrendously slow on Linux in comparison.

[QUOTE=Madpoo;383872]So, I have to ask... is disabling javascript entirely something you do out of an abundance of security? Should I ask what you know that we don't know? :)[/QUOTE]Sure, I guess it is security. But really it is just that I don't like the idea of someone else controlling my computer. It's my computer so keep yur steenkin' code off of it, you punk. :boxer:[QUOTE=Madpoo;383872]If it's a problem, I can put a section in the header that detects lack of javascript support and shows a message that says "Hi Retina". :) Because it's probably only you. LOL[/QUOTE]That would be awesome. I wanna see that. :toot:

[QUOTE=retina;383901]Sure, I guess it is security. But really it is just that I don't like the idea of someone else controlling my computer. It's my computer so keep yur steenkin' code off of it, you punk. :boxer:That would be awesome. I wanna see that. :toot:[/QUOTE]

I'm curious too. Links of that?

EDIT: If you're saying/really mean javascript controls your computer... then I don't know what kind of life you [I]do[/I] have on the computer, lol.

[QUOTE=retina;383901]Sure, I guess it is security. But really it is just that I don't like the idea of someone else controlling my computer. It's my computer so keep yur steenkin' code off of it, you punk.[/QUOTE]

Well, I guess that's one way to look at it.... You do understand that websites aren't typically downloading a JAR file to you and asking you to install it, right? :smile:

It's just in-page stuff... it'll interact with the DOM and be able to modify things on the page you're viewing, but unless it's a bug in the engine it's not going to be able to do more than that.

Any particular reason you're still on FF 3.6.x? I'd imagine you could still upgrade to a newer version and still disable Javascript, but then boom you've got support for all the standard features introduced in the past 5-6 years. We're talking no more weird CSS extensions like -moz- or -webkit-

My only real exposure to this in the real world is overhearing our web devs and UI team (they're the ones who do all the styling and are CONSTANTLY encountering compatibility issues). There's an audible sigh of relief when a decision is made to no longer support browser X on version Y because it's usage dropped below some threshold. It means hundreds of lines of CSS hackiness can be removed and they can finally feel safe to upgrade some things without worrying they'll break it for IE7 or some other silliness.

When it comes to browsers with javascript disabled, we honestly don't even bother ourselves on whether they have a good experience or not. It's a business decision. We're not at the point where we throw out a page that says "Install Javascript" and that's it, but it really won't look good and most features won't work at all. We do add a little warning box that says:
"This site requires a Javascript-enabled browser, for more instructions click here."

The page it links to has some really helpful instructions on how to enable Javascript for IE 6/7, Firefox 1.x, Safari 1.x. See where I'm going there? It's instructions from 2008 for browsers we don't support anymore anyway. :)
---------------
EDIT: I thought of some examples of where Javascript is a big benefit over any pure CSS stuff.

Tables: column sorting and resizing. There are even table plugins that let you search and narrow the content. C'mon! How cool!

Theming: Changing themes at the click of a button (I don't *think* that can be done any other way/pure CSS or HTML)

Tracking: We all love to hate it, but without the stats from Google Analytics I'd have no way to get advanced browser stats like browser width/height and feature support. VERY useful for someone designing a site.

[QUOTE=Madpoo;383903]Well, I guess that's one way to look at it.... You do understand that websites aren't typically downloading a JAR file to you and asking you to install it, right? :smile:

It's just in-page stuff... it'll interact with the DOM and be able to modify things on the page you're viewing, but unless it's a bug in the engine it's not going to be able to do more than that.[/QUOTE]

Oh, and while I'm at it, I'll add that trusting .js files from the jquery library should be pretty safe. I was a bit alarmed a couple days ago that the jquery.com site got hacked, but they *insisted* that the repository was still safe. I don't care, I pointed the mersenne.org site to the asp.net CDN [URL="http://www.asp.net/ajax/cdn"]http://www.asp.net/ajax/cdn[/URL].

The Jquery CDN itself is REALLY slow (I think it's AWS which is not that great for speed) and anyone using it for anything but bleeding edge versions of Jquery are only hurting their site performance.

Unless you were to claim that Jquery is potentially harmful and could "haxor your box". :smile:

And ultimately, the only way to really secure your machine is by unplugging it from the network. Even then, hardware hacks exist. Unplug the power and you'll have a totally secure system that is also totally useless, representing that far end of the bell curve.

So a lot of comments about how a site looks bad, isn't cool or won't have feature X without JS. So my counter to that is I don't care. Your arguments are falling on blind eyes. Just show the content and I can use my brain and/or some native computer app to sort and filter whatnot if the need arises. Coolness, prettiness, featureitis are for ... umm ... I don't know who it is supposed to attract. Mersenne.org is nerdy to the extreme (right?), so do most of those nerds really care what colour something is, or how awesome a drop shadow looks in an accordion-animated-clock-tick-wasting submenu?

[size=1]And since I am reminded about it now. I turned off all animations in my Windows box because I found that waiting the extra half-second for the content to animate itself into position extremely annoying.[/size]

[QUOTE=Madpoo;383903]Any particular reason you're still on FF 3.6.x? I'd imagine you could still upgrade to a newer version and still disable Javascript, but then boom you've got support for all the standard features introduced in the past 5-6 years. We're talking no more weird CSS extensions like -moz- or -webkit-[/QUOTE]The reason is because I can no longer trust the FF folks not to screw it up. A previous upgrade turned my JS back on and removed the option in the dialogue box to control it, the bastards. That was the last straw for me and I [b]up[/b]graded back to 3.6.28 and turned off updates and now I get no more nasty surprises.

[QUOTE=retina;383909]So a lot of comments about how a site looks bad, isn't cool or won't have feature X without JS. So my counter to that is I don't care. Your arguments are falling on blind eyes. Just show the content and I can use my brain and/or some native computer app to sort and filter whatnot if the need arises[/QUOTE]

Well, to each their own.

I'll try to make sure the site will at least be usable even if it looks horrible and let you make it beautiful in your mind. :smile:

For everyone else I'll try to make it easy to use and appealing to the eyes.

... coming back to bootstrap, which is (mostly) a css framework and should releave from reinventing all those nifty effects. I fact, this is what it is all about... Of course you can use (lots of) fancy js and jquery, but you can also just stick to the defaults a given theme provides (and then concentrate on content)

Even for nerds: orderly and winsome presentation of stuff helps digesting it. I first learned about group theory as a kind of a moot glass bead game, and then someone enlightened me showing me all their geometric beauty.

[QUOTE=Madpoo;383912]I'll try to make sure the site will at least be usable even if it looks horrible and let you make it beautiful in your mind. :smile:[/QUOTE]And I do realise and appreciate what you are doing. My little feature-poor old-school no-frills bare-bones no-nonsense memory-leak-free [i]stable[/i] browser will thank you for it also.

I found the perfect menus...
 

I should *totally* use these menus!

Here's a demo:
[URL="http://www.script-tutorials.com/demos/272/index.html"]http://www.script-tutorials.com/demos/272/index.html[/URL]

Make sure you're not muted to really experience the full flavor. Yeah, it's like that.

[QUOTE=blip;383913]Even for nerds: orderly and winsome presentation of stuff helps digesting it. I first learned about group theory as a kind of a moot glass bead game, and then someone enlightened me showing me all their geometric beauty.[/QUOTE]

Speaking of learning things in a fun and interesting way... have any of you seen the awesome videos that demonstrate the different sorting algorithms?

Quick sort:
[URL="https://www.youtube.com/watch?v=ywWBy6J5gz8"]https://www.youtube.com/watch?v=ywWBy6J5gz8[/URL]

Merge sort:
[URL="https://www.youtube.com/watch?v=XaqR3G_NVoo"]https://www.youtube.com/watch?v=XaqR3G_NVoo[/URL]

Etc. Yeah... it's pretty much the most awesomest thing on the intertubes. :smile:

I kind of feel like when someone clicks to sort a table by a different column, it should play one of these videos so they appreciate what's really happening.

[U][URL]https://www.youtube.com/watch?v=es2T6KY45cA[/URL]

...and while looking around I found this: [url]https://www.youtube.com/watch?v=PYM-UYtLVDU[/url]
[/U]

No music while browsing please. The sounds over the menus might be cool.

How hard is it to make a dedicated mobile m.mersenne.org site for mobile friendly menus?

[QUOTE=TheMawn;383924]No music while browsing please. The sounds over the menus might be cool.

How hard is it to make a dedicated mobile m.mersenne.org site for mobile friendly menus?[/QUOTE]

That's kind of last decade. It's all about responsive design now.

[QUOTE=retina;383909]So a lot of comments about how a site looks bad, isn't cool or won't have feature X without JS. So my counter to that is I don't care.[/QUOTE]

The counter-argument is that a pleasing web site says to a new, prospective user: "the owners of this web page/project care enough to make your experience as pleasurable and up-to-date as possible". Such warm and fuzzy feelings increase the likelihood said prospective user joins in.

That said, content is king.

[QUOTE=Prime95;383929]The counter-argument is that a pleasing web site says to a new, prospective user: "the owners of this web page/project care enough to make your experience as pleasurable and up-to-date as possible". Such warm and fuzzy feelings increase the likelihood said prospective user joins in.

That said, content is king.[/QUOTE]

+1 to that. Most larger sites have separate people doing the content and design work, letting each group focus on their core competencies.

[QUOTE=Mark Rose;383927]That's kind of last decade. It's all about responsive design now.[/QUOTE]

+1 to that as well. We ditched our mobile specific pages about a year ago. Well, some of the pages still go to a mobile specific version, but the main meat of the site is all responsive design.

It's kind of fun to resize a browser and see the cut off points where below a certain width, poof, there goes that tab option, or this feature just moved from horizontal to vertical, etc.

it's pretty cool, but takes some doing. If you have a site where more than half the traffic is from feature phones (iPhone/Android and a smattering of Windows) then it's definitely worthwhile.

Having a separate m.dot site worked, but it didn't give a brand that cohesiveness... it meant two distinct (similar, but separate) ecosystems.

New top menu test page
 

Okay... I present, a new setup, with menus across the top:
[URL="http://www.mersenne.org/hometest.php"]http://www.mersenne.org/hometest.php[/URL]

It replaces the previous URL of the same name that had the test menuing stuff on the side. It seems like putting menus across the top is ideal because more width real-estate is available for content, and like George says, content is king.

The previous left-hand vertical menu had space there for the little quick stats box, so I'm not sure what to do with that now. Maybe a floater, or just leave that on the home page in it's own section. If you're drilling down into reports or account/team pages, I don't know if having that ever-present box in the menu area does much good, but it is nice to have at least on the home page?

I also re-arranged some menus to try and group it more logically, although I'm not entirely satisfied with the arrangement. I think it could be a little better, perhaps?

For instance, if you're logged in, under "get started" is a link to update your account info. If you're not logged in, that same placement says "Create Account". It's actually the same page, only the anchor text changes. :)

But I'm kind of thinking a good spot for that is in the top-right of the banner... like clicking on your username would take you to the account settings to update password, email address, etc. or have a link to create an account if you're not logged in. Something like that.

And I'll also point out for Retina's benefit, I *did* try these menus out with Javascript disabled and they *do* work. In fact they work a little snappier without the JS animation effects. No guarantee it'll look fine in FF 3.6, but it does have pure CSS functionality and it *should* be pretty backwards compatible.

Speaking of the animation effects:

The plugin I'm using comes from here:
[URL="http://apycom.com/"]http://apycom.com/[/URL]

They're free for non-profit use which is great, but the JS portion is obfuscated. I prettified it to the point where I was able to speed up the animation effects. They were actually much slower for whatever reason... fun to look at, not as much fun to use when each hover event had a 500 ms delay. Yuck.

I reduced the animation delays to 100-150ms which is snappy enough but still has some "dazzle"... just not *too much* dazzle I hope. If it's annoying I can tone it down even more.

The specific menu is this one:
[URL="http://apycom.com/menus/5-steel-blue.html"]http://apycom.com/menus/5-steel-blue.html[/URL]

I downloaded several and tried them out... with some, any transparency in the drop down tended to wash out the link text so I'd have to figure out how to tinker with the opacity.

Fortunately it's SUPER easy to swap out one style for another now that the list itself is marked up.

The submenus pop out reasonably quickly (probably your 150ms) but the top menus still seem to have a long'ish delay (500ms) when mousing over. If you could drop that to 100ms as well then I quite like the top menus.

So far I'm really liking this. The topside menus are wonderful.

[QUOTE=retina;383911]The reason is because I can no longer trust the FF folks not to screw it up. A previous upgrade turned my JS back on and removed the option in the dialogue box to control it, the bastards. That was the last straw for me and I [b]up[/b]graded back to 3.6.28 and turned off updates and now I get no more nasty surprises.[/QUOTE]You should look into Opera. It allows you to turn off JS, animations, etc. real easy in the current version. It also runs most of the FF add ons. Pandora is much nicer with Ad Block running.

[QUOTE=James Heinrich;383960]The submenus pop out reasonably quickly (probably your 150ms) but the top menus still seem to have a long'ish delay (500ms) when mousing over. If you could drop that to 100ms as well then I quite like the top menus.[/QUOTE]

Ah... I see what you mean.

I found where that's set in a certain hover function. It was set to 400ms so I knocked it down to 100ms. Much better now, I think.

Static resources on the site have a 7 day expiration, so I guess I'll add a version string to the js/css loads so that my tweaks can have a cachebuster whenever I update them. I already do that with the site's main stylesheet.

Give it a shot now, see if those initial drop downs are faster for ya.

EDIT: FYI, I have *no* idea why this thread is named "Primenet tangle design"... was I drunk or really tired when I started the thread? Some very strange autocorrect? I don't remember titling it that at all. :)

The title was changed by a moderator.

EDIT: On [url]http://www.mersenne.org/primenet/[/url] , I'd like to suggest having the plaintext table displayed in a table like on [url]http://www.mersenne.org/report_ecm/[/url] , except maybe with the columns being able to be sorted by things like the amount of factors found in the 1M ranges.

I really like the top menus. The look needs work, but the layout is much better this way.

The missing stats could go in a bar above the menu:

[code]<style>
#stats { font-size: 12px; font-family: sans-serif; }
div.stat { display:inline-block; min-width: 140px; }
div.stat span, div.stat b { display: inline-block; width: 70px; text-align: right; }
div.stat b:after { content: ':'; }
div.today { text-align: center; }
</style>

<div id="stats">
<div class="stat today">Today's Numbers</div>
<div class="stat"><b>Teams</b><span>746</span></div>
<div class="stat"><b>Users</b><span>126,996</span></div>
<div class="stat"><b>CPUs</b><span>986,158</span></div>
<div class="stat"><b>TFLOP/s</b><span>186.759</span></div>
<div class="stat"><b>GHz-Days</b><span>93,380</span></div>
</div>[/code]

The above could use some fiddling, but it's an idea.

There is a (Knuth's) CWEB meta-language, that consists of two parts: cwieve + ctangle. "Oh, what a tangled web we weave!" :smile:

[QUOTE=Prime95;383929]The counter-argument is that a pleasing web site says to a new, prospective user: "the owners of this web page/project care enough to make your experience as pleasurable and up-to-date as possible". Such warm and fuzzy feelings increase the likelihood said prospective user joins in.[/QUOTE]
In a sort of related subject to this:
Does anyone know the original source(s) of the image of Mr. Mersenne? If we could dig up the source that was used (maybe all the way back to the original image), it would be great to get a higher res version. There appears to be about 5 vintage likenesses of Marin Mersenne. It would be cool to get high quality versions of these images. These could then change at random on the website or to indicate some sort of status (like time since last new prime [he would get older as time passed], or a special picture would indicate a new prime has been reported and is being verified [or recently confirmed], or it could change when the user is logged in, or ??). The changing picture (if it changed at semi-random or according to time since last prime) would provide some enhanced interest.

On a :cmd: bent, if the image displayed on the main page were a gif, the image could rotate every prime number of seconds.

[QUOTE=Madpoo;383955]Okay... I present, a new setup, with menus across the top:
[URL="http://www.mersenne.org/hometest.php"]http://www.mersenne.org/hometest.php[/URL][/QUOTE]

I like the menus across the top. It leaves more real estate for content. Some minor suggestions -- others please give us your nitpicking suggestions too:

1) Change "GIMPS HOME" to "HOME"
2) The menu bar seems too tall to me.
3) I'm not sure I like ALL CAPS for the menu text.
4) Can we get a little more spacing between menubar items? The CNN page has a slightly different color vertical bar between menu bar items.
5) The Donate button and text seem too tall. Maybe move it to the banner?

The ALL CAPS in the menu bars is because of the style itself, in the source code it isn't, e.g. GIMPS Home. So it's the style itself that needs editing slightly to change this rather than the actual code of the website.

[QUOTE=legendarymudkip;383974]The title was changed by a moderator.

EDIT: On [url]http://www.mersenne.org/primenet/[/url] , I'd like to suggest having the plaintext table displayed in a table like on [url]http://www.mersenne.org/report_ecm/[/url] , except maybe with the columns being able to be sorted by things like the amount of factors found in the 1M ranges.[/QUOTE]

We're looking at doing that for the pre-baked hourly reports...turning them into actual tables.

Right now, those reports are generated by a SQL job once an hour that spits out pre-formatted text files, contained in a bit <pre> block.

What James, George and I have been discussing is to take that data and either spit out a CSV that the site will then read and turn into tables, spit the hourly data into a SQL table, or do the same thing it's doing now but add all the th/td/tr markup for the include file. That last one might be the easiest to do right away but it's not as elegant.

Stay tuned though because it's definitely on the agenda.

[QUOTE=Madpoo;383955]And I'll also point out for Retina's benefit, I *did* try these menus out with Javascript disabled and they *do* work. In fact they work a little snappier without the JS animation effects. No guarantee it'll look fine in FF 3.6, but it does have pure CSS functionality and it *should* be pretty backwards compatible.[/QUOTE]Works fine on my awesome browser without JS. But one minor thing is the first level menus where there are second level menus has links that point to # (it just adds a single # character to the URL) and thus go nowhere. Seems kinda untidy to have a non-functional link.

[QUOTE=Prime95;383978]1) Change "GIMPS HOME" to "HOME"[/QUOTE]

Done

[QUOTE=Prime95;383978]2) The menu bar seems too tall to me.[/QUOTE]
I'll have to check it further. Part of the men background comes from images so I'll have to see what's involved with shrinking it.

[QUOTE=Prime95;383978]3) I'm not sure I like ALL CAPS for the menu text.[/QUOTE]

Done. It was part of the style applied so I just commented out the "text-transform: uppercase"

[QUOTE=Prime95;383978]4) Can we get a little more spacing between menubar items? The CNN page has a slightly different color vertical bar between menu bar items.[/QUOTE]

I think that should be possible... I'll have to take a look. But you're right, I did notice that the different menu sections aren't quite distinct until you hover over them. There should be something to distinguish them for sure, even if it's just a border or something.

[QUOTE=Prime95;383978]5) The Donate button and text seem too tall. Maybe move it to the banner?[/QUOTE]

I took the existing donate button (well, I updated with the latest official Paypal images. They do have different sizes though. There might be plenty of room on the right-side of the menu bar to place the "donate" button there, or it could go on the banner, perhaps next to the image "2^p-1 may be prime".

Speaking of the logo image, did anyone notice that I updated it? I forgot to mention.

I tried to find something pre-made but didn't find anything. I actually constructed the logo using some HTML markup so closely match the color and style of the old logo, but smoother text now, not so blocky.

I thought it'd be more hassle than it's worth to worry about making sure the pure HTML version of the logo would always line up right so I just converted to a GIF in a few resolutions for any future use. If you want to see the HTML version of it: [URL="http://www.mersenne.org/logo.html"]http://www.mersenne.org/logo.html[/URL]

You can spot the font shadows better when it's larger than 80x101. I used the same colors for the yellow/red/gray as before and same plain sans-serif font, so I guess unless you were paying attention you might not notice it was different.

[QUOTE=retina;383982]Works fine on my awesome browser without JS. But one minor thing is the first level menus where there are second level menus has links that point to # (it just adds a single # character to the URL) and thus go nowhere. Seems kinda untidy to have a non-functional link.[/QUOTE]

You'd think so, but for whatever strange reason, a lot of the implementations of menu markups need at least a "#" for the href, otherwise they're not clickable and won't work on touch devices like phone/tablet. And they have to be <a> anchor tags for the hover effect.

If you have a mouse and click on them, yeah, your browser now has a # at the end of the URL but it's no big whoop, just a "do nothing" id marker basically.

[QUOTE=Madpoo;383983]...
I'll have to check it further. Part of the men background comes from images so I'll have to see what's involved with shrinking it.

I think that should be possible... I'll have to take a look. But you're right, I did notice that the different menu sections aren't quite distinct until you hover over them. There should be something to distinguish them for sure, even if it's just a border or something.

I took the existing donate button (well, I updated with the latest official Paypal images. They do have different sizes though. There might be plenty of room on the right-side of the menu bar to place the "donate" button there, or it could go on the banner, perhaps next to the image "2^p-1 may be prime"
....[/QUOTE]

Notes on those 3 things:
- Sure enough, the height is somewhat set by the 52px height of the background images. I can tinker with it more and see what can be done.

- I added gray left-borders between each menu section

- I tried out moving the "Donate" button to the menu, floated right. It's a nice prominent placement... rather than being a link straight from there, I think there's a possibility to have the hover on that button call out more text like "Make a tax deductible donation to GIMPS" or something. Otherwise it seems to look nice there... the image could be shrunk still, I left it the same dimensions for now.

Just a bit of nitpicking, but I think the donate button would look better if centered vertically. It just looks a bit out of place at the top to me.

[QUOTE=legendarymudkip;383987]Just a bit of nitpicking, but I think the donate button would look better if centered vertically. It just looks a bit out of place at the top to me.[/QUOTE]

Nitpicky is right! :smile:

Fine, I bumped it down 4 whole pixels. LOL

And, since the top menus seems like a real winner, I moved over all of the "mock" pages to use that format instead:

[URL="http://www.mersenne.org/default.mock.php"]http://www.mersenne.org/default.mock.php[/URL]

You can now navigate around on those mock pages and see how the menu and wider content section looks on all the pages.

I also widened the table on that CPU benchmark report page... I must admit, having a wider space for tables in particular is very nice. I'll have to check some of the other pages with tables and graphs because I think in a few spots I tweaked it to work in 830px but now they can be 994px wide, so bear with me if you see anything where there's a table that's not taking the full width.

Here's that CPU benchmark page again with the test of the table plugin, for anyone who missed it:
[URL="http://www.mersenne.org/report_benchmarks/tabletest.php"]http://www.mersenne.org/report_benchmarks/tabletest.php[/URL]

I'm hoping to switch other table designs to use that format.

[QUOTE=Uncwilly;383977]On a :cmd: bent, if the image displayed on the main page were a gif, the image could rotate every prime number of seconds.[/QUOTE]I made one that I posted here: [url]http://imgur.com/2Xr6PHd[/url] (it is too big for the forum limits.) It could be made much better.

[QUOTE=Madpoo;383991]Nitpicky is right! :smile:

Fine, I bumped it down 4 whole pixels. LOL

[/QUOTE]:smile:

Since you mentioned it, the donate image above the text is slightly off centre :razz:

The table looks great at the moment, besides the yellow colour scheme slightly clashing with the blue one. But in terms of layout it's a great improvement.

EDIT: Just noticed the theme buttons at the bottom.

[QUOTE=Madpoo;383991]
Here's that CPU benchmark page again with the test of the table plugin, for anyone who missed it:
[URL="http://www.mersenne.org/report_benchmarks/tabletest.php"]http://www.mersenne.org/report_benchmarks/tabletest.php[/URL]

I'm hoping to switch other table designs to use that format.[/QUOTE]

I do like the look of that, but I would get rid of the pagination/limit, show the full results, and remove the vertical and horizontal scrollbars. I hope that's not too much work :)

[QUOTE=Mark Rose;383999]I do like the look of that, but I would get rid of the pagination/limit, show the full results, and remove the vertical and horizontal scrollbars. I hope that's not too much work :)[/QUOTE]

The horizontal scroll bar is of particular use on that CPU benchmark page. It's just a really wide set of data with 16+ columns.

It *can* shrink the columns to fit but then it looks horrible... at least, I thought so. I did some experiments with angling the header row which worked okay, but it was so customized for each table to get the 45 degree tilt just right with skew/rotate, I didn't think it would scale well to do that for other tables. 90 degree header rotates are easier but I hated the way those looked.

I think all of the other tabular reports fit okay so there shouldn't be a horizontal scroller.

The vertical scrolling and pagination, well, I guess I'll open that to discussion. It comes down to what people use different reports for and how easy it is to do that.

I'm trying to guess at the use cases for the cpu benchmark report... are people just looking for the fastest thing for any particular size, or are they looking to see how their own CPU might rank? In either of those cases I don't know that seeing the full list without any vertical scrolling is terribly useful, although I can see a case for having a "rank" column so when they do find their CPU, it'll have a ranking from 1 to N (fastest to slowest)? I guess that would mean there would need to be some generic way of ranking, since the fastest at 1024K might not be the fastest at 4096K.

For now I could shrink the "CPU Model" column (the cpu names will wrap) until it fits horizontally and then see if it still looks decent or not. It might... the current old-style table is 912px wide or so, but doesn't have the thicker borders of the stylized table.

There was some table plugin that lets you click to hide certain columns, so maybe that would be helpful by unticking columns of info you're not interested in?

It's not a page I look at often. It's really a minor nitpick. :)

[QUOTE=Madpoo;383984]...your browser now has a # at the end of the URL but it's no big whoop, just a "do nothing" id marker basically.[/QUOTE]I think the point was not so much having the href=#, but the fact that the first two menu levels do nothing. I would also prefer to see all menu levels do [i]something[/i]. For example, under "Account/Team Info" top menu, if you click that top menu nothing happens except the first-level popdown. And if you click on "My Account" again nothing happens. You have to navigate to the third-level menu to get any functional link. Is it possible to link "My Account" to the same destination as "My Account -> Summary" without breaking the mouseover behavior, especially the equivalent behavior on touchscreen devices (e.g. phones)?

Failing that, you could (probably?) put a "cursor:default;" style over the non-functional menu entries to provide a visual clue that the menu item you're hovering is intentionally nonfunctional.

[QUOTE=Madpoo;384002]The vertical scrolling and pagination, well, I guess I'll open that to discussion.[/QUOTE]My browser has perfectly functioning scrollbar code for the outer page. So IMO there is no need to make a second scrollbar within the outer scrollable page. But that said, the page in question does not have a secondary scrollbar on my uberbrowser so I don't know what Mark Rose is seeing.

[QUOTE=James Heinrich;384004]I think the point was not so much having the href=#, but the fact that the first two menu levels do nothing. I would also prefer to see all menu levels do [i]something[/i]. For example, under "Account/Team Info" top menu, if you click that top menu nothing happens except the first-level popdown. And if you click on "My Account" again nothing happens. You have to navigate to the third-level menu to get any functional link. Is it possible to link "My Account" to the same destination as "My Account -> Summary" without breaking the mouseover behavior, especially the equivalent behavior on touchscreen devices (e.g. phones)?[/QUOTE]

I think that's the problem, is that having that submenu actually contain a link somewhere, it would break the touch device ability to open up that submenu without it actually opening that link.

[QUOTE=James Heinrich;384004]Failing that, you could (probably?) put a "cursor:default;" style over the non-functional menu entries to provide a visual clue that the menu item you're hovering is intentionally nonfunctional.[/QUOTE]

Hmm... I can look into that... the items that are only submenu headings do have the little arrow icon indicating there's something below it... I'll have to check and see if other websites do anything different with the cursor when hovering over submenu heads as opposed to links...

Maybe it's because I know what to expect, so the way it looks now makes perfect sense, but then that's why I was putting these test pages out there, to get different perspectives.

[QUOTE=Madpoo;384009]...
The items that are only submenu headings do have the little arrow icon indicating there's something below it... I'll have to check and see if other websites do anything different with the cursor when hovering over submenu heads as opposed to links...
[/QUOTE]

I was looking at [url]www.cnet.com[/url] and how they're menus are done. As I suspected, most sites with drop down menus, the top level actually has a link to a landing page. Like you can hover over "reviews" and get a drop down with the sub categories, but clicking on "Reviews" itself takes you to a different page with the same selections.

But not all of them are like that... for example, if you hover over the far right menu "US Edition", it's technically clickable, for touch device purposes I'm sure, but doesn't go anywhere, and the cursor is the same.

They have something in place that isn't using an href="#" ... I wonder how they're doing it. Might need to explore... I guess their styles don't require it for markup.

[QUOTE=Madpoo;384010]But not all of them are like that... for example, if you hover over the far right menu "US Edition", it's technically clickable, for touch device purposes I'm sure, but doesn't go anywhere, and the cursor is the same.

They have something in place that isn't using an href="#" ... I wonder how they're doing it. Might need to explore... I guess their styles don't require it for markup.[/QUOTE]

Answer: I [I]think[/I] it's javascript... there's a data-trigger going on there. Retina would not approve. :smile:

Makes sense that if you want to do something outside what HTML/CSS can do, Javascript can.

[QUOTE=Uncwilly;383996]I made one that I posted here: [url]http://imgur.com/2Xr6PHd[/url] (it is too big for the forum limits.) It could be made much better.[/QUOTE]

It's funny and clever, but I'm thinking a 360KB logo wouldn't work well. :)

[QUOTE=Madpoo;384014]It's funny and clever, but I'm thinking a 360KB logo wouldn't work well. :)[/QUOTE]Yes, it was a 'quick' attempt. I did not optomise the pictures first. Also, I could not find a way to reuse the images while changing the delay. But I still like the idea of the picture changing to reflect some sort of status.

[QUOTE=Uncwilly;384020]Yes, it was a 'quick' attempt. I did not optomise the pictures first. Also, I could not find a way to reuse the images while changing the delay. But I still like the idea of the picture changing to reflect some sort of status.[/QUOTE]

So, what you're saying is you don't think the site should have Clark Griswold instead of our good friend Marin? :smile:

I spent a little time looking for a better quality pic of Mersenne and that's when Google image search started showing similar pictures and Clark showed up... it was so funny to me, I picked that for the test pages and forgot to go back and look for Mersenne.

Those 2 images in the top left... the left-most pic of Mersenne is actually a link to primes.utm.edu and there actually wasn't a link to the home page of mersenne.org at all. When I updated the 2^p-1 logo I also made it a clickable link to "/", because somehow I think people expect a home page link in that position.

I'd need George to chime in before making any kind of change involving that prominent link to primes.utm.edu, but at any rate, I don't know that the logos are really limited to be the same size (80x101) they are now. Increasing the height may make the top banner *too* tall, but there's wiggle room I'm sure... 101 pixels high though, I wouldn't make a banner much taller. Wider image is fine.

[QUOTE=retina;384008]My browser has perfectly functioning scrollbar code for the outer page. So IMO there is no need to make a second scrollbar within the outer scrollable page. But that said, the page in question does not have a secondary scrollbar on my uberbrowser so I don't know what Mark Rose is seeing.[/QUOTE]

FYI, the reason you might want to have the table separately scrollable is if you want to keep the header row at the top of the table as you scroll down the list.

Some of the hourly report tables, in particular, are pretty long, so by the time you get down to row 4000, you've probably forgotten what each column is. :)

Few more changes
 

I'm at the point where I find myself just tweaking some little things here and there. I've done some shading on different background colors to avoid the flatness of boring gray. Nothing too drastic, I hope.

Also, you will now notice that on the hourly reports for top producers/teams, the data is in a genuine HTML table, not a preformatted block of un-pretty text. They're limited to the top 500 rows, so if you want more for now, the custom report option is still there but it prints out the table in the old block format.

I have a bit more work to do to make the tables styled... they are sortable, it's just not obvious you can click on the headers to do that, but there's a nice theme for the table sorter that I'm going to tack on.

For an example of that, see the updated CPU benchmark page:
[URL="http://www.mersenne.org/report_benchmarks/default.mock.php"]http://www.mersenne.org/report_benchmarks/default.mock.php[/URL]

That'll give you an idea. I'm not totally in love with the rounded buttons I put on there, I was just trying it out, see how it felt, but now that I've seen it on the page, they just seem out of context. Better than a blocky gray submit button, but probably too... something. I like the hover effect so you get that idea it's a button and all that. The colors and probably the size can be tweaked though.

I'll probably have the rest of those top 500 tables themed soon, maybe by the time most of y'all read this. It mainly entails coloring the header and zebra striping the data rows, plus adding the up/down arrows in the header so you know they're sortable.

I think we're probably close to launching this redesign live for all to enjoy (I hope). :smile:

The new design for the acount is very nice, thank you.
But one request: is it possible to get the cake chart without TF? Both cake charts ('stats for the last 365 days' and 'lifetime stats') are big red buttons with some colored spots at my summary (GPU-TF'ing...).