Demo page

On your page, write something that you'll easily find later, like

Go to Google, and find the location on a Google map: e.g. Creative Stream, Sheffield, S3 8GG

• Click on the map and adjust to centralise and ensure it's at the right 'depth' (zoom in/out)
• Click on the share icon 
• Click: Embed a map
• Click the 'Medium' drop-down and choose "Custom size"
• Amend the 2nd set of numbers to 300,  so it reads 800 x 300
• Once happy, click 'COPY HTML'

Back to your site:

• Click SOURCE and scroll to where you wrote  ######################## MAP MAP MAP MAP #####################, and highlight that text and paste in the HTML that you copied from Google maps
• Then click SOURCE again.
• Scroll down to find the iframe that it’s in
• Highlight that box and from the drop-down, choose "Ext. Fixed" (it has a yellow dotted line around it)
• Click Save / Publish. 

The video that Sally made about maps

• Click on the SHARE button (it often has a dynamic arrow).
• Click on the button that says 'Embed'.
• Click on the part that says 'COPY'.
• If the site you're taking the video from doesn't have that, then look for text that often starts with "<iframe width". 
   
• Go to your site
• In your site's back end, click "Source" on the Item Content Bar. 
• You now see the HTML
• Scroll down until you can see your memorable text (mine was ########################EMBED VIDEO HERE#####################). 
• Highlight your memorable text and paste in the link you copied in YouTube (thus deleting your memorable text).
• Press "Source" again on the Item Content Bar. 
• You'll now see a large grey rectangle with the word "IFRAME" in it, in red writing. Click on it, and then click on 'Normal' in the drop down (Item Content Bar)
• From the drop down choose EXT. 16:9 or MOVIE/FILM
• The grey rectangle will become smaller with a green dotted line
• Click Save and publish
• Go to the live page and refresh it. 

The video that Sally made about embedding a video

Your site will benefit from lots of links that help users flow through the site. The words that contain the links must make sense in isolation, so you must never use "click here" or "more info".
Instead, use "Info about training" or "More about our team".

Text link to a page on your site

• Highlight the text e.g.  Want to find out more about us?
• Click the link icon
• add the /about-us (or other slug) to the URL field
• Press OK
• If you want to make it into a button, then while it's still grey, click the 'Format' drop-down box and choose 'Button'

Button link to a page on your site

• Highlight the text e.g.  Want to find out more about us?

• Click the link icon
• add the /about-us (or other slug) to the URL field
• Press OK
• While it's still grey, click the 'Format' drop-down box and choose 'Button'

Text link to a page on a different site

• Highlight the text e.g. Want to know what the BBC said about H&S?
• Click the link icon
• Add the full URL (eg) https://www.bbc.co.uk/safety

• Click the 'Target' Tab, and choose 'New Window (_blank)' from the drop-down

• Press OK

Email link

• Highlight the text e.g. Please email us for more information
• Click the link icon
• Change the link type to E-mail
• Add the email address support@creativestream.co.uk
• Option to add Message Subject (eg "Email from our website" but note that the user can delete this and choose their own email subject heading)
• Press OK

If you check on an actual mobile device you'll see the 4 buttons below, you'll notice that they aren't as well-placed as they ought to be, and that's because you are unlikely to ever have 4 buttons in a row - the site isn't really built to do this, but it's important that we show you!

Internal External A download Email me

Never let a reader get to the bottom of a page with nothing to do. Suggest things that are linked to the page that they're on, so if they're reading about a course, have a button to "Book this course" and also have links to related courses. 

1. Highlight the text that you wish to hide.
2. Click DIV button
3. Click 'Style' and choose expandable
4. Highlight the text that you wish to be viewable at all times
5. Click the Format dropdown, and choose 'Head 4 (more)' 
    

Advice on using accordions can be found here: https://designtlc.com/when-should-you-use-accordions-on-your-website

Q. Where are my images kept? 
A. Content Tab > View your uploaded images

Q. Can I just use the image from (e.g.) Google?
A. No, you will be fined.

Q. Where can I get images? 

• https://unsplash.com/
• https://www.pexels.com/
• https://nappy.co/

Once you've downloaded them, rename them as though you were describing them to a blind person. You can use this later for the alt tags (mandatory)
Names with special characters often can't be uploaded. Don't use an apostrophe.
Then you can upload them to an appropriate folder.

Image Size: try not to make them bigger than 5MB (which is huge)
Dimensions - 2000 pixels across is plenty. This will work well for responsive websites and is small enough to upload quickly. Much bigger and the site won't load quickly.
Use an image resizer https://www.bricelam.net/ImageResizer/

Illustrations: https://storyset.com/safety

Q. What is a screen reader? 

A. Watch this video: https://www.youtube.com/watch?v=dEbl5jvLKGQ

A video that Sally made for you about images: where to get them, how to resize them, the dimensions, alt tags, screen readers, naming conventions, how to add them to a folder, how to add them to a page etc. 

Click this text to watch the video 

When pasting text, the pasted text can use whatever formatting the original source document used and this can have knock-on effects (e.g., on the font, links, colour, etc). You’ll have experienced something similar to this when copying/pasting text from a website into an email.

Your source document might be a PDF, another website, an email, a Word document, a PowerPoint Presentation, etc. In a nutshell, any source document that you copy from could cause a glitch.

Prevention:
You can copy things as you’ve always done, but pasting must be done slightly differently

• PC : CONTROL + SHIFT + V
• Mac: Command + Option + Shift + V

You can also use ‘Special Paste’ if you have the functionality in the ribbon below the URL of your browser (if you can’t see it, you don’t have it)

You may have noticed that when you return to a website you’ve visited before, it loads faster than it did when you first visited it. This is because your browser stores a copy of the information on your computer (because it’s a lot faster for your browser to load the info again, as opposed to downloading the website from the internet again).

This can mean that changes made to your website aren’t always visible until you perform a hard refresh.

Device and Browser combinations:
We’ve listed the most common device and browser combinations below, and what to do. If your combo isn’t listed here please Google it with the words ‘hard refresh’.

CHROME AND WINDOWS:
Ctrl and Reload the page, or
Ctrl and press F5

CHROME AND MAC:
Shift and Reload the page, or
Command, Shift and press the ‘R’ key

FIREFOX AND WINDOWS:
Ctrl, Shift and the ‘R’ key, or,
Ctrl and press F5

FIREFOX AND MAC:
Command, Shift and the ‘R’ key, or,
Shift and Reload the page

SAFARI:
Hold down the option and command key then press the ‘E’ key

EDGE:
Ctrl and Reload the page, or
Ctrl and press F5

Different devices will access your website
You must check the mobile/iPad/Desktop views so that your content is acceptable in each format. Rather than get out a mobile phone or iPad, you can mimic the likely view of your website by clicking control+shift+i to change the view to iPad/mobile phone to check if it's OK. 

Need to undo the last thing that you did?
Press control+z

Consider using Grammarly (I have it on a Chrome widget). It's not perfect, but it definitely helps! https://www.grammarly.com/ 

Notes about URLs

• You can't have an apostrophe in a URL, as it becomes a hyphen.
  For instance, if I create a page called Sally's Duck, then the URL is likely to become www.creativestream.co.uk/sally-s-duck
   
• You can't have two pages with the same URL. If you do, the duplicate often has the number 2 at the end.
  For instance, if I had a page called Ducks, the URL is likely to be www.creativestream.co.uk/ducks. If I create a second page with the same name, the URL is likely to be www.creativestream.co.uk/ducks-2
• If you have a seasonal page (Christmas, Easter, etc), then consider giving it a generic URL so that you can toggle it 'off' and reuse it next year so that you rank higher in Google listings each time (better for SEO). Giving a URL a date (EG Christmas 2023) means you can only use it once. You can call the page name and the menu name "Christmas 2023", but keep the URL simple. The URL is in the 'Page Name' box at the top when you're editing. 

The pages/site is slow to load:

Caching will be off during your population of the site and when logged in as admin after you go live. Be aware this will slow down the loading of the site in general.

I can't see my new content:

A ‘hard refresh’ will clear many caching glitches if your fresh content doesn’t load onto the page when you’ve made an update and saved the work. There is an accordion on this page called "Hard Refresh" and full details are given there. 

"It's not working"

Each browser (e.g., Firefox, Safari, Edge, Chrome) will display the website in different ways. When browsers update, it can cause knock-on effects on the instructions we have given it, in regards to displaying your site, and even the version of the browser you are using or the settings configured on the browser can mess things up.

Step 1: Make sure your browser is fully up-to-date and on the latest version. Check your browser on www.whatismybrowser.com/ and update it if required. 

Step 2: If you updated the browser, then give the page that's causing a problem a hard refresh, and check it again. 

Step 3: If the above doesn't help, check the site using a different browser. Is this happening if you look at the website on a different computer or phone? The operating system your computer uses can affect how a website displays.

Step 4: Is it only you that’s affected, or is your whole team seeing the same glitch? Ask someone who is on a different computer and browser to see if their experience is the same. 

 
If you've tried all the above, then you should contact us utilising the information below:

Firstly, we need to know what level the concern is:

• Critical*: Something has stopped the site from working. Call us straight away on 0114 282 3413 
• Urgent: Something that is preventing you from performing the task you need to do (e.g., “I’m following the instructions in the video, but it’s not happening, and I need this to be completed ASAP as Snoop Dog is visiting us next week, and said he’d link to this page from his social media”)
• Important: Similar to ‘Urgent’ (above) but the timespan you have to get it done is longer.
• Query: Regular questions (e.g. “Can I add something that wasn’t in the design?”)

What we need to diagnose and assist quickly:

1. We must have a URL of the back end and the live page so that we can go straight to the concern and there’s no confusion - this is the single biggest thing you can do to help us speed up our diagnostic time and replies to you. eg

The back end https://fctrust.uk/admin/content_admin.php?edit_item=yes&parent_id=42&level=1
The live site https://fctrust.uk/demo

2. A screenshot of what you see helps us get straight to what you see. You’re bound to use different words when describing something, so a screenshot helps us focus on the area you want us to look at.

3. Let us know what device you're using (eg iPhone 12 pro, LENOVO Yoga Slim Laptop, Inspiron Desktop) and what browser you use (Chrome, Edge, Firefox, Safari, etc) and that the browser is up to date

Help!  I need support from Creative Stream