Primenet web design - Page 9

Madpoo · 2014-09-28, 02:31

Quote:

Originally Posted by James Heinrich

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 something. 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)?

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:

Originally Posted by James Heinrich

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.

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.

Madpoo · 2014-09-28, 02:43

Quote:

Originally Posted by Madpoo

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

I was looking at www.cnet.com 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.

Madpoo · 2014-09-28, 02:50

Quote:

Originally Posted by Madpoo

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.

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

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

Madpoo · 2014-09-28, 03:06

Quote:

Originally Posted by Uncwilly

I made one that I posted here: http://imgur.com/2Xr6PHd (it is too big for the forum limits.) It could be made much better.

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

Uncwilly · 2014-09-28, 06:20

Quote:

Originally Posted by Madpoo

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

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.

Madpoo · 2014-09-28, 18:41

Quote:

Originally Posted by Uncwilly

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.

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

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.

Madpoo · 2014-09-29, 22:00

Quote:

Originally Posted by retina

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.

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

Madpoo · 2014-10-02, 07:48

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:
http://www.mersenne.org/report_bench...fault.mock.php

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).

MatWur-S530113 · 2014-10-02, 08:21

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...).

Mark Rose · 2014-10-02, 15:28

I really like the look of the CPU chart!

The new HTML tables are an improvement. I would choose a much lighter grey though. Maybe something around #f9f9f9 instead of lightgray?

I would also get rid of the transparency on the menus. They become harder to read when there's black on white text behind them.

Madpoo · 2014-10-02, 16:45

Quote:

Originally Posted by MatWur-S530113

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...).

Well that just means you're doing a lot of TF work.

I guess that's the point of a pie chart, is to give you that 30,000 foot view.

It's using Google chart API and there *might* be some options to have an exploded chart that pops out the smaller wedge sections. I haven't checked, but that's a common way to handle that, or with some kind of call-out of the low % items. It all depends on what Google's chart API has for options.

At the very least I imagine the actual percentages could be listed off to the side in the legend instead of on the chart itself.

2014-10-02, 07:48	#96
Madpoo Serpentine Vermin Jar Jul 2014 2×5×7×47 Posts	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: http://www.mersenne.org/report_bench...fault.mock.php 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).

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

2014-10-02, 08:21	#97
MatWur-S530113 Apr 2007 Spessart/Germany A2₁₆ Posts	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...).

2014-10-02, 15:28	#98
Mark Rose "/X\(‘-‘)/X\" Jan 2013 29·101 Posts	I really like the look of the CPU chart! The new HTML tables are an improvement. I would choose a much lighter grey though. Maybe something around #f9f9f9 instead of lightgray? I would also get rid of the transparency on the menus. They become harder to read when there's black on white text behind them.