^Login

Guide Heading

Always start with a H1 heading.


Introduction

Use a H2 for all subheadings and bold for third layer subheading.

This guide will help Microkeeper staff stick to a consistent format when creating guides.


Guide Goals


Highlight text by adding this to the end of the URL:

#:~:text=

Example https://microkeeper.com.au/online-hr-tools.php#:~:text=leave%20management


Images

Images require the most amount of attention, be diligent when uploading images.


Extensions

PNGShould be used for simple graphics where high contrast is present, eg. screenshots.
JPGShould be used for photography.
GIFShould be used for motion, rarely required for guides.


Width

Make the image as narrow as possible, 300px is the goal width, 600px is still good, anything bigger will become unreadable on mobile.

Tricks that can be used to achieve this:

Make sure browser zoom is set to 100%, this makes screenshots consistent across guides.


Image name

The file name should be SEO friendly, for example, "microkeeper-login-page.png"

Only use lower case and dashed, nothing else.


Formatting

After an image is uploaded:

Assign the ALT attribute, this should be SEO friendly, describe the image, eg. How to edit the Alternative Text field on a image:

How to edit the Alternative Text field on a image

Make image left aligned.

Removed the width, this forces the browser to use the actual image width, up to screen width of 100% for mobile, which is coded into the CSS.


Deleting an Image

To delete the image click the trash can, the image is permanently removed from the servers.

Undo, will not restore the image, the image must be uploaded again.

Cut and Paste will not work, the image will be deleted on the cut event, instead drag the image to move it.

To help, there is a message displayed when an image has been deleted:

Image deleted server response

 

Double Checking

The browser/cloudflare will cache the image, so even though it has been deleted it will still load, the only way to check this is to load the guide from incognito on another server.

Add syd. bri. or mel. in front of microkeeper in the URL.

Ideally this should be done just once, at the end of the editing session, or else cloudflare will cache the image from the alternative sub-domain too.


Language

Use clever HTML to break up huge slabs of text.

Eg


Or maybe

EvenATable
WhenDeemed Appropriate

(not like this ^)


Or maybe steps:

  1. If a particular
  2. Order should
  3. Be followed


It's best not to assume the audience, a manage/admin/accountant could be reading this on behalf of someone else.

Tables

Table Style -> Table Border Light, displays the border lines which drastically increases readability.

Bad

If you Cut and Paste it will not work, the image will be deleted on the cut event, you can just drag it to move it.


Good

Cut and Paste will not work, the image will be deleted on the cut event, instead drag the image to move it. 


Bad

After it's uploaded you must:


Good

After an image is uploaded:


These are just guidelines, there are definitely exception to the rules.