An FAQ page is almost necessary for a website, and popular within intranets, where almost every department seems to want one.
Amateur publishers tend to just create a paragraph for the question and a pragraph for the answer. But what’s the ‘standard’ for FAQs?
Well, FAQs are a list of Frequently Asked Questions with the answers beneath. Online, sometimes you’ll see the answer smoothly slide out when one clicks on the question. Other times there will be so many FAQs that the surfer is presented with a list of the questions, and clicking on the specific question will either ‘jump’ you down the page to the answer, or take you to a new page with the answer.
I was wondering how best to present FAQs on my intranet, and got a good deal of feedback via Twitter. I knew I wanted a numbered list, using standard ‘ordered list’ HTML code, but I was prompted to look into the lesser known ‘Definition List. It’s standard HTML code and with some styling via CSS it can become whatever you need.
I decided on the following FAQ format. Unfortunately I don’t know how to make a Definition List auto-number itself like an Ordered List, so the numbers you see are written by hand. Sorry if this isn’t ideal!
FAQ format
- 1. How can I gain access to Data that has been archived?
- In the event that you require access to the archived data you will be required to request access.
- 2. How long will it take to restore my data?
- The service level to restore data is 3 working days (30 Hours).
- In the event the data is required urgently, we will attempt to restore your data as quickly as possible.
FAQ HTML and CSS code
<dl>
<dt style=”font-weight:bold; font-size: 0.9em; color: #333; margin-top: 1.5em; margin-bottom: 0.4em”>1. How can I gain access to Data that has been archived?</dt>
<dd style=”font-size: 0.8em; margin-bottom: 0.2em; margin-left: 2em”>In the event that you require access to the archived data you will be required to request access.</dd>
<dt style=”font-weight:bold; font-size: 0.9em; color: #333; margin-top: 1.5em; margin-bottom: 0.4em”>2. How long will it take to restore my data?</dt>
<dd style=”font-size: 0.8em; margin-bottom: 0.2em; margin-left: 2em”>The service level to restore data is 3 working days (30 Hours).</dd>
<dd style=”font-size: 0.8em; margin-bottom: 0.2em; margin-left: 2em”>In the event the data is required urgently, we will attempt to restore your data as quickly as possible.</dd>
</dl>
The bit that was new to me was to have more than one <dd> lines with the answer.
The styling should be done in the CSS; I’ve done it ‘inline’ within the code so you can see the style I’ve used.
If you’re a coder, this should be plain and simple to you, and you’ll know how to improve it. If you’re a writer and you like the format, just let your web / intranet publisher know you’d like your FAQs it use a ‘Definition List’.
I’m a busy writer, editor, publisher and web-coder, so the code above get’s the job done but may not be perfect. Your comments may well help me and others understand how best to improve such FAQs list. Fire away!
[Wedge]
If you would like to share or tweet this article, the Short URL is: http://kilobox.net/1058
Oh, another thought. Do some people prefer using the terminology ‘Q&As’ instead of ‘FAQs’? We should be consistent no matter what we prefer.
I just have a little comment on your other thought above. I tend to think that FAQs are literally answers to genuine questions that people ask frequently, whereas Q&As are answers to questions that have been made up by the company as an efficient way of presenting important information.
So, I would expect to find FAQs as a permanent page on a website, whereas I’d expect Q&As to appear only in response to / for the duration of a particular event. But that might just be me!