4th March 2012 : Upgraded L, LDA, C & CW number pages

[Jools]

All,

L, LDA, C, CW numbers.

These pages have now been upgraded to the new format and "tweaked" to hopefully be a little more user friendly.

Jools

[krazyGeoff]

Cool,
Is it supposed to be left justified ( the bit with the photos ) with only one photo wide, and the lighter "frame" with the photos in it, only taking up 1/3 of the screen width, or is that just my browser / iPad gizmo?
(not sure how to do a screen shot on this device)

[Jools]

Nope it's not supposed to so that. The thumbnails are meant to spread out over the page. It does the same thing on my iPhone, so I should be able to fix it.

Cheers

Jools

[MatsP]

For reference, all pictures are on the left side on my W7/FireFox systems too (both work and home).

--
Mats

[sidguppy]

I'm not sure I can call this an improvement; first there was no need for a horizontal scrollbar, now there is.....

the right side of the text is outside the screen.

so now instead of only having to downscroll, we now need to scroll from left to right as well; which makes it less efficient than the older model and hence less user friendly.

maybe if the light grey area in which the thumbnails are is scaled down a little, this problem will be solved?

now it's quite large, but the lot of it is empty, since the thumbnails are so much samaller than the area around them.

so basically we're scrolling horizontally because of added emptyness
that cannot be intended I think.

[Jools]

Yeah, you guys are right, there is something going wrong here. These things are tricky though as everyone gets different results - so your feedback really helps me get it improved. So, to aid the fix I've provided some screen shots.

The new screenshot shows four columns, but this isn't fixed and larger screen sizes will have more pics across the page thus cutting down vertical scrolling. Also, the UCP ribbon is added, so you can see PMs, my cats etc on the page.

The old screenshot shows the fixed format which didn't scale down well to phones and doesn't scale up to large screens - so you ended up with a lot of white either side of the grey column.

That said, will looking into the issues reported on the iPad. I'm struggling to replicate the issue in FF.

Jools

[MatsP]

I think (and I'm only reading between the lines) that Alex (Sidguppy) is/was complaining about the L-number page, which requires side-ways scrolling to get to the 400+ range (unless you have a BIG screen, like my 1920 x 1080 23" one here at Work). But it seems to spread over two lines when I move it to the laptop screen [although it seems you still have the 101% wide div...].

--
Mats

[Jools]

@Mats,

I don't see that behaviour in the link list of the various l-numbers.

Anyway, I've tweaked it a bit and it now looks better on my iPhone (i.e. it isn't one column). How does it look for everyone? If it's still poorly, can you upload a screenshot?

Cheers,

Jools

[MatsP]

It looks good here - tested both on big and small screen. And it doesn't need a horiz scroll here either, it was purely speculation as to what would create a horizontal scroll-bar.

In my dream world, it would be nice if the page adjusted to the size of the screen in its choice of "number of thumbs per page" - at least "fill the rows" - I get 12 thumbs per row on the big screen. I may have a look at it tonight, but I guess there isn't an easy way [easy=without JScript] to determine the size of the DIV.

--
Mats

[sidguppy]

I think (and I'm only reading between the lines) that Alex (Sidguppy) is/was complaining about the L-number page

no, I was randomly reading species pages, both Loricariids and non- Loricariids

looks like the horizontal scroll bar is now a permanent feature on the forum as well....I'm not happy with it


at work, there's an excuse, because we have small screens with a low resolution
on such screens many websites end up with horizontal scrolling


however; at home I have a wide-screen monitor with resolution of 1680 x 1050 pixels.
getting a horizontal scroll bar on this monitor is over the top, because then it would require a 24" monitor as a bare minimum to watch PC without getting the horizontal scrolling.....

that cannot be working as intended.

[Jools]

In my dream world, it would be nice if the page adjusted to the size of the screen in its choice of "number of thumbs per page" - at least "fill the rows" - I get 12 thumbs per row on the big screen. I may have a look at it tonight, but I guess there isn't an easy way [easy=without JScript] to determine the size of the DIV.

Yes, that "fluid design" as it's called is the prime reason for the change (it also makes the pages load in a smaller payload), but there are limits to what CSS can do. The issue is the combined height of the thumbnail and the amount of text underneath the images and the depth of the images. I have to specify a minimum height. So, if the text goes beyond that, the next (logical) row down starts off that point rather than the far left.

To my mind, still much better than fixed 4 pics wide. The catelog pages also now use this model and the genus pages are next. So, on a tall screen like an iPhone you get two or three columns and on a massive TV you get half the catelog on screen.

Cheers,

Jools

[Jools]

looks like the horizontal scroll bar is now a permanent feature on the forum as well....I'm not happy with it

Neither am I. However, it's a side effect of having two "types" of pages on the site sharing the same header layout (e.g. cartoon cats, ads and the dropdown menus). Once all the pages are convert to the new format then I can fix it.

Rest assured, it annoys the stuffing out of me too.

Maybe you could take some pleasure from reporting it as a bug in the bugs forum and then we can all have much pleasure in it getting fixed in a wee while...

Cheers,

Jools

[Jools]

To aid discussion, this is what it should look like on screen:

New layout on regular laptop screen

I've now tested it on windows FF, MSIE9, Safari and Chrome latest versions and also on iPhone, Blackberry and iPad. Seems OK.

Jools

[krazyGeoff]

Much better Jools, but not quite there. I get 6 images wide on the iPad.
On the 3rd row there are only 5 images ( and associated numbers) .
On the 8th row there is only 1 image.
Note I have 50 Items per page selected.
Some of the hyperlink text overlaps with its neighbors. L027 tocantins and L027 Xingu for example.
I don't have the iPad connected to the net at work, and will figure out how to do a screenshot today.

Cheers

[krazyGeoff]

Looks really nice on IE.

[Jools]

On the 3rd row there are only 5 images ( and associated numbers) .

Yeah, this is expected, it's the thing I was talking about before. It's because there's to much text under the 1st image in the 2nd row and so the thing doesn't get to go back to the hard left. I will have a play around with other ways of doing this. But, the only way to really fix it is to use up more white space. Don't worry about the screenshot, one of the "advantages" of the iPlatform is that it's so tied down, it is much easier to replicate issues and the same thing happens on my iPad. I only need screenshots when i can't "see" what is happening.

Looks really nice on IE.

Thanks - getting there.

Cheers,

Jools

[Jools]

Hmm, OK, so it's a limitation of the way I'm laying out the pages. So, we will have to stick with what's there. If I had a spare week, I could get something like this working.