The GP medical training website for everyone,
not just Bradford. Est. 2002

Web Design Tips

Design Tips

  • Use styling options to make sections more interesting – shape dividers, motion effects etc.
  • Overlay images are easier to style than background images.
  • Avoid using more than 2 different fonts that include multiple weights
  • Avoid selecting different colours for each element with the colour picker
  • Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes)
  • Always open external links in a new tab
  • Copying styles in sections and widgets
  • Less is more. Try and stick to a handful of font styles and colours – this is where global fonts and colours can really help. I could show some brand guidelines from various companies?
  • Keep useful functions/css tricks/other things you use often in a note-taking app

More Design Tips

Use styling options to make sections more interesting – shape dividers, motion effects etc. Overlay images are easier to style than background images. Avoid using more than 2 different fonts that include multiple weights Avoid selecting different colours for each element with the colour picker Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes)

Always open external links in a new tab Copying styles in sections and widgets Less is more. Try and stick to a handful of font styles and colours – this is where global fonts and colours can really help. I could show some brand guidelines from various companies? Keep useful functions/css tricks/other things you use often in a note-taking app

Useful Design Websites

Free Image Sites

Free Image Sites

SEO & ACCESSIBILITY
Accessibility is mandatory
SEO is optional
Accessibility is your priority
But why not do both so you rank well in Google? Google will reward you.

Don use colour just to signify information – colour blind cannot see red vs green.

Page title : Header 1
Title : header 2
Subtite: header 3
Sub-subtitle: header 4

No lower generally.

IMAGES
Google cant see what’s in an image
Neither can visually impaired
So you should use alt text

TEXT
Justifying text can be hard for dyslexia as it gives different spaces between words depends on machine used – making it hard for dyslexics.
Google doesn’t see font/colour/style in the code – it just cares about the structure of content

Sue – I particularly love Roboto weight 300. Looks lovely on a web page. However, weight 400 (the usual default) – whilst less “pretty”, might have more contrast for those with a visual difficulty. Should I therefore accept a less attractive font? 


LOGO
Create a 512 x 512 image
Create the image – get rid of sub text and text.
That can be added later if needs be. But question – is it necessary. If you engage text into the logo image, it will reduce the size of the image and it becomes unnoticeable.

https://responsively.app/

How good is your website accessibility
Type your website into: https://wave.webaim.org/
Plugin
accessibility tools and alt text finder
https://en-gb.wordpress.org/plugins/tool-for-ada-section-508-and-seo/
https://accessibe.com/ online servce – has affiliate


SITE SETTINGS
Astra > Site Settings
Set…
Global font and size
Size of H1, H2, H3 etc
Link colours
Other global colours
Buttons


FOR BRADFORDVTS

Page title H1
Page title subtext: H2
Blue subtitles: H3
Sub-subtitle: H4

Paragraph – Roboto 300 forgotten size.


BLUE background title header….. set the blue as a global colour – then set each section to that colour. Then you can change in the future.

 

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top

FROM 1st July 2022 • DON’T MISS OUT!

SOMETHING NEW & EXCITING IS COMING...

Watch this space over the next month or two.  It’s going to be big and exciting and is something separate to this website.  

If you’re on the mailing list, you will get a notification when the time is right.    If you’re not on our mailing list click below to join.  By the way, we DON’T bombard you with lots of low quality messages.