Homepage: new blocks and changes on buttons

drozas commented 6 years ago

NG: Many visitors will go only to the front page and never venture further. That’s why recent site designs have adopted the ‘very long front page’ idea (see for example, the University of Surrey’s front page, or the example I mentioned before, https://www.instituteforgovernment.org.uk/) In contrast, our new front page has very little information on it. Is it worth considering including recent news/event/blog/etc. items on the front page, like those two examples do?

[...]

I am finding it hard to discover the logic behind the buttons overlaying the wind turbine image – what is the significance of the background colours, and why are they placed in rows of different lengths? Even if they are left as they are, they would look better with a margin of clear space (i.e. the image showing through) around each one. The buttons would also perhaps look better is they had a shadow applied.

drozas commented 6 years ago

New blocks approved by Pete.

drozas commented 6 years ago

Shadows and extra text might be required, see p:

Yep! I see you have changed it as drozas.com – it is better but I think the style could be more minimal, rather than cartoon-y/rounded with shadow. Glad you like them :-) The shadow was a Nigel suggestion, but I can easily remove them.

Yeah, new blocks as you suggest would be great – I see you have set this up. I think also some or all of the info from about us page should also appear lower down below the blocks

Yes, I was working today on this. Glad you like them. We have another section on the bottom of that one, so if you want to place another text (or a part of the previous one) after the blocks, please just let me know and I will.

drozas commented 6 years ago

First version was successfully tested and deployed on test. IT REQUIRED CHANGES ON THE FRONTPAGE TEMPLATE AND TEH TWIG_TWEAK MODULE TO EMBED DIRECTLY THE VIEWS FROM THERE

drozas commented 6 years ago

I have also reduced the radius (from 7px to 2px, which was the previous value) of the buttons in the homepage, as suggested by Pete: http://drozas.com/

I have kept the shadow for the moment, since this was suggested by Nigel. But I can easily remove it if necessary.

Best,

drozas commented 6 years ago

NG: Thanks everyone for doing all this work. I think we are getting closer – I knew it wouldn’t be simple, but it will be great when it is done!

To respond to Julia’s queries:

Logo at the top: Removing the text seems right, given that the same text is immediately below and much larger

Shadowing: I had thought that the buttons might look better as ‘3D buttons’. Examples:

http://cssdeck.com/labs/push-the-buttons

http://jsfiddle.net/meetaaronsilber/RN63Y/

https://codepen.io/cheeriottis/pen/inluv

https://codepen.io/pedox/pen/Kfzso

Button location. I agree that they do not look at all right where they are (a kind of random location on top of the image). They could perhaps be moved to immediately below the image? And can we have some space between them, rather than they being edge to edge?

I don’t know about the fate of the text, but I do wonder why it is all in bold. It might look better if just the first paragraph is in bold, with the rest in regular font.

There are potential problems with the front page on a mobile or tablet:

· The top menu disappears if you scroll up

· The image doesn’t appear at all (this may not be a bad thing, as the image is too large for good viewing on a small screen)

· The buttons also do not appear.

I’d prefer the font in the blocks to be smaller, and the blocks to be all the same height.

A tiny point: on the sub-pages (e.g. /about-us), the breadcrumb at the top in the grey row has a Home icon with the word Home next to it. There should be a space between the word Home and the icon.

Nigel

drozas commented 6 years ago

Explore our Case Studies Apply for a Fellowship Attend a CECAN Event Join our Mailing List See our latest News Browse the CECAN Blog Visit CECAN’s resources toolkit View CECAN’s videos

drozas commented 6 years ago

`

Explore our Case Studies Apply for a Fellowship Attend a CECAN Event Join our Mailing List See our latest News Browse the CECAN Blog Visit CECAN’s resources toolkit View CECAN’s videos

`

drozas commented 6 years ago

`
<div id="welcome-buttons"><a class="btn btn-sm btn-auqa1" href="/case-studies">Explore our Case Studies</a><a class="btn btn-sm btn-auqa2" href="/fellowships">Apply for a Fellowship</a><a class="btn btn-sm btn-auqa3" href="/events">Attend a CECAN Event</a><a class="btn btn-sm btn-auqa1" href="http://cecan.us13.list-manage.com/subscribe?u=feb21724b738fd54ff25c23a2&amp;id=5bcc1dd6b3">Join our Mailing List</a><a class="btn btn-sm btn-auqa2" href="/news">See our latest News</a><a class="btn btn-sm btn-auqa3" href="/blog">Browse the CECAN Blog </a><a class="btn btn-sm btn-auqa1" href="/resources">Visit CECAN’s resources toolkit</a><a class="btn btn-sm btn-auqa2" href="/videos">View CECAN’s videos</a></div>`

drozas commented 6 years ago

Checking issue with CSS for buttons.

drozas commented 6 years ago

Also blocks margin pending

drozas commented 6 years ago

Explore our Case Studies

Apply for a Fellowship

Attend a CECAN Event

Join our Mailing List

See our latest News

Browse the CECAN Blog

Visit CECAN’s resources toolkit