How would you improve my web folders?

tonygamble · 2015-05-22 23:46:32

Moderators. Feel free to move this to the Showcase threads if you find it inappropriate for here.

My web site is the end product of a hobby photographer covering events at a local sports/social club. I don't sell photographs and I am not pitching for assignments.

I came to The Turning Gate through a need for web creation software that swiped and autosized on phones/tablets as more than half of my viewers access the site that way.

I have kept the design simple - partly out of fear of getting in a muddle and partly out of laziness. However, I am sure it could be better. The gurus here have encouraged me to buy Publisher but at the moment I am not hosted on a Linux - so whatever you suggest will need to be done in Gallery.

Adding some outlines? Shadows. Less black? Bigger thumbnails? Different thumbnail template?

What would you suggest would make this better?

http://www.tonygamble.org/Bowls_Pimms_2015/index.html

Tony

rod barbee · 2015-05-23 00:23:36

There are plenty of design options you could try. You could try a different background color. I find complete black a little off-putting (which may just be my bias; until I updated my site to CE4 I had a dark background too. I just got tired of it).
If you like it dark, though, consider using a Linear Gradient for the Page container background color. Maybe start with near black (like #333) for Color A and a grey for Color B.

The border around the thumbnails is the same color as the background so you never actually see those borders. So by changing the background you'll probably see them.

For your navigation at the top, try removing the blue background color and just use the white text color for the hover effect.

The yellow and red text in the navigation and header are really bright and a bit reminiscent of 1990s era websites. You could try something a little subtler . Something like #99aaaa for the navigation maybe, a lightly tinted grey. Maybe a toned down reddish color for the masthead. Something in a #cc7700 perhaps

just a few suggestions to start with.

The problem you'll face if you want to change all your galleries is that you'll have to re-export all your galleries, though you can get away with just uploading the /lib/css/ folder for each

tonygamble · 2015-05-23 00:36:48

Thanks Rod,

Some nice suggestions there.

About the red heading. I usually try to pick a colour from the first line of thumbnails. So it varies from folder to folder. It is a pity that the colour picker that comes up cannot register a colour from the image showing in Lightroom - but not a big deal as I can guess.

I'll tinker with the other ideas over the weekend.

Thanks again.

Tony

rod barbee · 2015-05-23 01:27:13

It is a pity that the colour picker that comes up cannot register a colour from the image showing in Lightroom

Actually, it can. First click the color box in the plug-in. When the color dialog opens, just hold down the CTRL (Command with Mac?) key and click any color in the dialog. Drag the picker (while still holding down the control key and keeping the mouse clicked) into the Lightroom preview area and grab the color you want. When you get the color you want, release the mouse button.

tonygamble · 2015-05-23 06:34:02

Thanks Rod,

That'll be useful.

Tony

Matthew · 2015-05-23 16:24:13

Rod makes a good point about the background. Black is hard, and I often find white text on pure black background difficult to read. It starts doing funny things to my vision. A dark grey, or near black is often a better choice. So you've got Rod's suggested #333333, which is a good standby; you could go darker to #212121 or #191919. These are still very dark, but make reading white text much less stressful. For reading, you want enough contrast, but there's also too much contrast ... on a white background, I never use pure black text either.

tonygamble · 2015-05-23 17:25:42

Thanks Matthew,

I'll redo that folder today and repost. Maybe that will suggest some more improvements.

Tony

tonygamble · 2015-05-24 20:40:49

Sorry it has taken time to respond. My web server folk disconnected me in error. Most annoying.

I have put up a folder:-
http://www.tonygamble.org/aaaa/

I don't want to take the easy way out and simply send the template for you to correct. That way I'll never learn.

Where I struggle is with the terminology of the various areas of the page. Have you ever considered adding a picture of a whole grid page and pointing out the names of the various areas. I have done a screen shot of my new look page and numbered the areas from 1 to 9. If you have time to tell me what each is called I will have another go at getting the shades of grey to match - I have simply used dark and light grey from the colour picker to save time.

ttg%20gallery.jpg

You can see that I am struggling to get the greys outside the thumbnail grid to match cleanly.

Thanks in advance for any help you can offer.

Tony

rod barbee · 2015-05-24 23:20:42

that's another great idea you've given me for a post on my TTG-Tips site.

but for now, instead of shades of grey, you could try putting totally different colors in each background-color you find in the plug-in. That will make each area more obvious. Don't use gradients for the test, however. Since the top of a gradient area will be different than the bottom, it might be confusing (see 3, 5, & 6)

1: Navigation
2: Masthead
3, 5, & 6: Page Container
4: the grid
7 & 9: page body
8: Footer

tonygamble · 2015-05-25 01:25:47

Thanks Rod,

I'll start using some colours.

I guess the clever thing is getting the gradient to work.

Tony

tonygamble · 2015-05-25 01:57:04

OK.

http://www.tonygamble.org/aaaa/

I got away with staying with grey.

I removed the graduation from the Page Body and just applied it to the grid.

Do you want to suggest some more improvements?

Would you alter the black that surrounds the enlarged images?

I was going to put borders round the thumbnails but they seem not to hug the sides of the vertical shots - but maybe I am doing something wrong.

Tony

Last edited by tonygamble (2015-05-25 02:03:59)

tonygamble · 2015-05-25 02:03:22

Thumbnail borders.

I see. They alter depending on whether one uses Masonry Rigid or Elastic. I think I prefer Rigid as it puts more space round the images - so I need to forget borders.

Tony

rod barbee · 2015-05-25 02:07:53

I'd suggest adding some padding to the top of the grid so the thumbnails aren't right up against the top.

I was going to put borders round the thumbnails but they seem not to hug the sides of the vertical shots - but maybe I am doing something wrong.

Are you using Masonry Rigid? Try the Elastic setting. Or just check the Thumbnail Border checkbox rather than using the cell border controls. (Border-top, Border-bottom, etc.)

tonygamble · 2015-05-25 02:26:37

OK.

I have added the padding. Yes, that is better.

I have also changed the background to the larger images from black to grey. Any views?

I am using Masonry Rigid as I prefer the extra space around the thumbnails.

Tony

PS. I shall be packing up shortly. Dinner time over here in the UK - or at least cocktail hour!

Last edited by tonygamble (2015-05-25 02:27:42)

rod barbee · 2015-05-25 02:50:10

I am using Masonry Rigid as I prefer the extra space around the thumbnails.

Looks like you actually need to use Elastic to get the borders to stick to the thumbnails. But you can also adjust the cell margin to get some extra space.

tonygamble · 2015-05-25 02:52:17

Thanks Rod.

I'll rely on the shadows.

Bye for today.

Tony

tonygamble · 2015-05-26 14:57:52

Just a line to say I am now using the modified template based on greys rather than black.

http://www.tonygamble.org/Gala_Dinner_2004/index.html

Certainly looks better. But any further suggestions/comments will be valued.

Thanks

Tony

rod barbee · 2015-05-28 08:27:39

I have done a screen shot of my new look page and numbered the areas from 1 to 9. If you have time to tell me what each is called

Hi Tony, I took your request and made a blog post with a page full o' colors to help illustrate each area: http://ttg-tips-and-tricks.barbeephoto. … out-areas/

Thanks for the idea!

tonygamble · 2015-05-28 15:02:43

Thanks Rod,

I am positive people will find that a great help.

I have always felt that what each section was called was the hardest thing for a new user to puzzle out.

Your 'picture is worth a thousand words' !

Tony

Community @ The Turning Gate

#1 2015-05-22 23:46:32

How would you improve my web folders?

#2 2015-05-23 00:23:36

Re: How would you improve my web folders?

#3 2015-05-23 00:36:48

Re: How would you improve my web folders?

#4 2015-05-23 01:27:13

Re: How would you improve my web folders?

#5 2015-05-23 06:34:02

Re: How would you improve my web folders?

#6 2015-05-23 16:24:13

Re: How would you improve my web folders?

#7 2015-05-23 17:25:42

Re: How would you improve my web folders?

#8 2015-05-24 20:40:49

Re: How would you improve my web folders?

#9 2015-05-24 23:20:42

Re: How would you improve my web folders?

#10 2015-05-25 01:25:47

Re: How would you improve my web folders?

#11 2015-05-25 01:57:04

Re: How would you improve my web folders?

#12 2015-05-25 02:03:22

Re: How would you improve my web folders?

#13 2015-05-25 02:07:53

Re: How would you improve my web folders?

#14 2015-05-25 02:26:37

Re: How would you improve my web folders?

#15 2015-05-25 02:50:10

Re: How would you improve my web folders?

#16 2015-05-25 02:52:17

Re: How would you improve my web folders?

#17 2015-05-26 14:57:52

Re: How would you improve my web folders?

#18 2015-05-28 08:27:39

Re: How would you improve my web folders?

#19 2015-05-28 15:02:43

Re: How would you improve my web folders?

Board footer