Dutch Group show reports and website updates

tedp · February 10, 2015, 09:57

Thanks, Harry!

I still need to do a number of older photo albums, and the page layout of the older pages has to be brought in line with the newer ones.

Perhaps the index bar to the left needs to be revised for touch screen use, since a button image works better than a text link. But I feel we are making progress.

Harry Mantheakis · February 10, 2015, 10:58

I have had a quick look with my iPhone.

The two text-links on the home page could do with being 3 x larger for easier use with fingers on a small touch device.

In the Dutch Group website, the index text-links - on the left - could do with being 2-3 x larger.

In the projects list page, the text-links could do with being 2 x larger.

That is all for now - I have to get back to work :)

tedp · February 10, 2015, 11:29

Thanks, Harry - I think I will try and change to button type links or clickable images.

The main challenge there is to do it in such a way it doesn't detract from using the website on a keyboard device. The experience gained with the photo albums will help, I think.

Harry Mantheakis · February 10, 2015, 11:34

The text-size changes I suggested should help you determine roughly how big the buttons might be - but only if you want the site to be navigable with a smart-phone.

tedp · February 10, 2015, 16:02

Thanks, Harry - I am thinking of a button bar with large keys. I have some ideas about size etc. Let me experiment a little. More later.

Hugh Norwood · February 10, 2015, 16:37

There are ways (using style sheets) to make a site's appearance change according to the screen size; I have dabbled with it - it can make buttons larger on smaller screens - so they can be pressed by fingers rather than clicked on by a mouse pointer on a larger screen.

tedp · February 10, 2015, 17:40

Thanks for your idea, Hugh - I will keep it in mind as I have been thinking of scalable screen elements.

But first I'm going to test depressible images for buttons. I found a piece of Javascript code to change one image for another on a mouse click - I suppose the same thing happens when someone taps a touch screen.

The buttons in the index bar (at the moment just containing text links) must be big enough for use on a touch screen, but not too dominating on a normal computer screen.

It may not be modelling, but it is great fun!

tedp · February 10, 2015, 21:08

Harry & Hugh - I now equipped the start page and the index bar with clickable buttons that 'sink' when you click them. How does this work on a touch screen?

Harry Mantheakis · February 10, 2015, 22:41

Ted, on my iPhone the buttons are only just big enough to navigate with.

The "push" animation is not evident on the iPhone, but I do not think that is an issue. (I can see the animation on my laptop, and I like it.)

I would urge you to DOUBLE the size of the buttons - on a laptop or a desktop they would still be unobtrusive; on a smartphone they would be easier to use.

Try it and see - keep copies of the smaller ones you have at the moment: switching back would not be too painful.

BTW Hugh was right in suggesting that Cascading Style Sheets (CSS) can be used to cater for different screen types - the subject of catering for different media is broadly referred to as "responsive website design" - but I am wary of suggesting you undertake something along those lines simply because I do not have the time to support you!

Kind regards, Harry

tedp · February 11, 2015, 07:27

Thanks for replying, Harry.

I have tested the new layout on my wife's HTC smartphone and on my son's Samsung. On a phone, the buttons are indeed just big enough to navigate with, and they don't show the animation. However, doubling the size of the buttons would make them very large on a laptop screen - I'm not enthusiastic about that, but I will give it a try. Perhaps CSS can be applied to the way buttons are represented.

I'm not planning to use CSS in the pages themselves as that would mean re-writing the entire site. If I get rid of the table/thumbnail based layout in the existing pages, the text and images will scale on a smartphone screen if you zoom in. And I will need to get rid of the text links in the pages, replacing them by buttons.

So I will concentrate on that first, and on the window management of the present version of the site which I'm not happy with.

Thanks again for your support.

EDIT - I put larger buttons in the index bar, but they fell off the screen of my wife's HTC, so I reduced their size a bit.

Hugh Norwood · February 11, 2015, 10:44

Ted, if you go to the link below (Angst-Lesspork) then flick on "Electronics" on the menu, that page is responsive to screen size and will change if the screen drops below some width (which I can't remember at the moment.) When this happens the menu changes shape and the "buttons" get bigger. You can emulate this by resizing your browser window's width.

{Later} the trigger width is 664 pixels
PS It won't work on versions of IE less than 10, but that doesn't include mobile devices

tedp · February 11, 2015, 11:03

That's very neat, Hugh. Is this applied to the menu bar only, or does it affect the main text frame as well? It looks like the frame set-up is changed so the menu bar moves to the top of the page.

What I was thinking of is having the text pages set up so they follow the available space automatically, and change the frame set-up depending on the size of the screen.

I found a piece of media query code here. That might be used to interrogate the device for screen size. But probably you use something else that does the same.

If a screen dependent style can be devised for the menu bar and framing set-up pages only, it's a very simple thing to do. The remaining area is then used by the text page and images.

Harry Mantheakis · February 11, 2015, 11:22

Quote from: tedp on February 11, 2015, 11:03
If a screen dependent style can be devised for the menu bar and framing set-up pages only, it's a very simple thing to do. The remaining area is then used by the text page and images.

Yes, you can do that - you can used CSS to control any and all of the elements on a page. (Back to work now...)

Harry Mantheakis · February 11, 2015, 12:25

Ted, I had a quick look into this issue and the first thing to say is: you can ONLY use CSS to change BACKGROUND-IMAGES.

You can do a lot of other things - including re-sizing and re-colouring text and lines - but (sadly) you CANNOT alter the settings of <img> tags.

I though I should tell you this, to stop you hunting around for solutions with respect to <img> tags.

However, if you are game for re-implementing the "buttons" with something that incorporates background-image elements (I do not know what, yet) or possibly do away with images and have text-links (which can be scaled via CSS) I can help you get started with the CSS coding.

Hugh Norwood · February 11, 2015, 14:36

Quote from: tedp on February 11, 2015, 11:03
That's very neat, Hugh. Is this applied to the menu bar only, or does it affect the main text frame as well? It looks like the frame set-up is changed so the menu bar moves to the top of the page.

What I was thinking of is having the text pages set up so they follow the available space automatically, and change the frame set-up depending on the size of the screen.

I found a piece of media query code here. That might be used to interrogate the device for screen size. But probably you use something else that does the same.

If a screen dependent style can be devised for the menu bar and framing set-up pages only, it's a very simple thing to do. The remaining area is then used by the text page and images.

Ted, would you like me to email you some notes on what I did?