search

jncc / chm-website

The CHM website
0 stars 1 forks source link

Website theme #3

Closed CrispinF closed 4 years ago

CrispinF commented 5 years ago

Simple responsive theme required.

Must use CHM logo from CBD, top left, plus a Union Jack. https://www.cbd.int/chm/logo/default.shtml

or files here https://www.cbd.int/images/logos/chm-logo-package.zip

Suggestions regarding layout welcome, i.e. where should the Union Jack be located?

@jncc: We will start with a Bootstrap 4 free swatch then modify it. These can be seen here https://bootswatch.com/
You can switch that site between the themes using the “Themes” menu, e.g. resulting in https://bootswatch.com/cerulean/ Danny (I'm not sure GitHub username?) and @ulric-wilson to choose a starting theme (it’s easy to switch the site between themes, but once we start customising a theme we’d not want to have to repeat this too much as it could use up a lot of project time).

If you're not fussed, or not around to choose, we'll probably go with "Yeti" which is flat and clean and gives white background to fit with that logo image. https://bootswatch.com/yeti/

@joeaudette a public domain Union Jack is available here https://en.wikipedia.org/wiki/Union_Jack

joeaudette commented 5 years ago

The site is now up and running at https://chm.esdm.co.uk/

Once users have registered and been added to admins role, they can try the included bootswatch themes. To change the theme after login as admin user go to Administration > Site Settings and there you will see the dropdown list of included themes to choose from.

Once an initial theme is chosen we can then customize it with logos and images as needed and make changes based on feedback.

CrispinF commented 5 years ago

@joeaudette I don't think we're going to get anything back for a few days at least, so would you be happy to go with Yeti? If client then as a strong dislike, we could apply the same customisations/layout to another.

joeaudette commented 5 years ago

@CrispinF for best time/cost efficiency probably best to just wait until we have input so as to avoid redoing work.

joeaudette commented 5 years ago

whichever theme they choose we will copy the scss for that into a custom theme rather than changing the actual bootswatch theme.

joeaudette commented 5 years ago

@ulric-wilson @CrispinF

It would be good if we could get some design decisions made in order to move forward efficiently.

  1. Could someone try out the included themes and decide which one they like best to use as a starting point for customization?

To try the themes, just need to login and go to Administration > Site Settings and there is a dropdown list of themes. You can set the current theme and then click save and the site will update to that theme. It would be good to try each one and then decide which to use as a basis for customization.

  1. Can we get a decision about the twitter widget placement. Do we want a big footer where we can have it on every page or do we only want it on the home page as a side panel?

  2. What else do we want on the home page? Are we going to use a carousel of banners there? Any other content planned.

CrispinF commented 5 years ago

@ulric-wilson @joeaudette I believe Ulric is on leave and back tomorrow. By email, Danny offered feedback on theme by end of tomorrow (Wednesday).

joeaudette commented 5 years ago

I've created a new custom theme named chm-1 based on yeti and deployed to the site. I renamed the home page as Tweets and changed the carousel page to home.

It is ready for some review. I will un-asign myself from this issue, feel free to assign it back to me with additional instructions after review.

CrispinF commented 5 years ago

@joeaudette feedback from Ulric for home page: home page using the carousel template, but put tweets into "in a narrowish fixed width column" on right-hand side. On narrow screens this to fall below.

Please slow down the slide transitions a bit (could the duration for each slide and the transition speed be properties in the template if that's quick to do).

No response on whether we should use Twitter's embed code or the server-side aggregator as yet. Is the cosmetic result effectively the same? I've only seen that one implementation, and it didn't have any images but that's presumably down to what he tweeted! If so I think we should go with the server-side cloudscribe version to avoid the cookie/privacy issues.

The twitter feed is this one I think https://twitter.com/unbiodiversity

Also, please make menu items a little larger/bolder.

CrispinF commented 5 years ago

@joeaudette we get low contrast warnings from WAVE with the existing colours... the main being solved by replacing #00526e with #003c50 for hyperlinks and site title. There are also a couple of minor warnings about redundant home links. See http://wave.webaim.org/report#/https://chm.esdm.co.uk/

ulric-wilson commented 5 years ago

@CrispinF @joeaudette I'm not averse to the Twitter embed code if there are issues with the server side aggregator. we cope on JNCC website

joeaudette commented 5 years ago

@ulric-wilson as mentioned on #15 I don't think we are allowed to render the twitter embed code without cookie consent. The server side solution could be used with or without consent because it doesn't set any cookies. But to use that we need an api key and secret so we can make server side requests to the twitter api to retrieve tweets.

joeaudette commented 5 years ago

@CrispinF @ulric-wilson I've deployed an update for review.

@CrispinF I marked the site title link as aria-hidden so screen readers will just use the logo which has the site title as the alt text. Just retested wave and there is still a warning about 2 links but now the second link is the home menu item and I think that is ok. The screen reader would announce that as home and announce site title as the alt text.

CrispinF commented 5 years ago

@joeaudette thanks, looking good. I've changed the twitter handle to unbiodiversity which is I think what Ulric wants. @ulric-wilson would you like the Union Jack right-justified in the header, with the site title then centred between? Or ?
Also, do you have a preferred favicon for the site? Is there a standard JNCC one?

CrispinF commented 5 years ago

@joeaudette some feedback on site theme and layout from a client phone call:

  1. Please move the Union Jack to right-hand side (same distance from right edge as the CHM logo is from the left edge now), and make it height:64px;
  2. Center the site title and make it a little heavier/larger. If the base of the text could align with the base of the Union Jack that would be good, with larger text.
  3. On narrower screens when the title disappears, retain the two logos side by side.
  4. Remove the footer acknowledgements of Exegesis and cloudscribe, replacing them with "Site maintained by JNCC" where "JNCC" is a hyperlink to http://jncc.defra.gov.uk/
  5. Make the H1 style a little bolder (for page headings).
  6. "Submit" button on Contact form has visible button - can this be more like the "Save" button style on https://chm.esdm.co.uk/siteadmin/siteinfo
  7. Make the font size 18px for twitter class "timeline-Header-byline" (if possible!). This is to make the text saying "by @UNBiodiversity" bigger. Thanks!

@ulric-wilson to supply favicon.

joeaudette commented 5 years ago

This is completed and deployed. Aligning the title with the bottom of the now larger union jack looked off to me so I aligned it more in the center.

The twitter widget style I tried to change but it was not possible. It isn't possible to adjust the style of content inside an iframe from the main page css. It is possible with javascript and I tried to do that, but it turns out it is only possible with javascript for iframes that load from the same domain as the main page, so it is not possible to do it for the twitter widget which loads from the twitter domain. Complete control over style would be another benefit of using the server side api approach for twitter. We could style it then using bootstrap and make it consistent with the rest of the site styles.

CrispinF commented 5 years ago

@ulric-wilson to supply favicon and test recent changes.

ulric-wilson commented 5 years ago

Crispin - used an online generator and the 'new' version of the logo from the CHM image pack to create a range of icons. See attached.

703cc95ca6532aa11baed531974ea1eb.ico.zip

The generator also produced this code which might be useful


<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">```
CrispinF commented 4 years ago

Favicon implemented for next deployment.

CrispinF commented 4 years ago

@johawker please review favicon on this site https://chm-staging.esdm.co.uk And you might check that you get the right icon when pinning to home screen on mobile devices too. The pack that Ulric sent should cater for all.