I was recently tasked with mak­ing some improve­ments to sev­eral messy pages on the iSchool site to improve the read­abil­ity and over­all appear­ance. One of these pages was an FAQ page, one of many on the site, which was con­structed from just a bunch of text and cer­tain lines in a bold font to sug­gest that they were the ques­tions. My first thought was that this page was just a wall of text that a lot of peo­ple would just sim­ply skip over rather than try to read.

An old FAQ page

My goal with this page was to re-design it in a way that made it seem more like a real FAQ page and become more read­able and scan­able to both a passer by and some­one look­ing for a spe­cific answer to a spe­cific ques­tion. To do this, I started off by adding some more con­trast between the ques­tions and the answers as well as adding some more space and divi­sion between the dif­fer­ent question/answer pairs. The first step here was to increase the size of each ques­tion to 18px and mak­ing the text a deep pur­ple color to con­trast the 12px black default text style of the answers. Then I added some spac­ing between each question/answer pair and throw­ing in a sub­tle light gray bor­der to clearly dis­tin­guish between dif­fer­ent ques­tions. Then, after look­ing at many exam­ples of FAQ pages on dif­fer­ent web­sites, I noticed that many sites label their ques­tions and answers with a big “Q” and “A” respec­tively. I felt that this made the site feel like even more of an FAQ page as well as adding a bit to the ease of scan­ning through the con­tent so I added these labels to the left of each ques­tion and answer, again in an 18px font.

This spe­cific FAQ page I was work­ing on had the ques­tions divided up into sev­eral sec­tions, each with their own header. The 18px font of the ques­tions, how­ever, broke the hier­ar­chy of scale with the sec­tion head­ers because they were a smaller font. A sim­ple fix for this would have been to increase the size of the sec­tion head­ers to some­thing like 24px, but after try­ing that out, It just seemed too big. I was really happy with how the ques­tions and answers were look­ing so I didn’t want to tweak the ques­tion font size at all. Instead, I came up with a dif­fer­ent approach to mak­ing the head­ers become more defined with­out going crazy with the font size. The first thing I tried was to give the head­ers a light gray back­ground to make them stand out and really divide each sec­tion. This looked alright, but with the padding of the con­tent con­tainer keep­ing the gray back­ground of the header from span­ning across the entirety of the con­tent box, I felt like it still needed some­thing to help divide the sec­tions and stand out as more promi­nent than the ques­tions. To fix this, I just took the gray box I had formed by giv­ing the header a back­ground and stretch­ing it hor­i­zon­tally so that it extended 4px past the white back­ground of the con­tent box.

The final look after all of the changes

After all of the tweaks, I was quite happy with the read­abil­ity and over­all appear­ance and so was Nick so I went ahead and applied the new styles to all of the FAQs on the site.

The one draw­back to the new style is that it involves adding a fair amount of cus­tom mark-up to the page con­tent which makes it a lit­tle tricky to do things like adding or remov­ing ques­tions and sec­tions with the WYSIWYG edi­tor. The eas­i­est way to address this issue for the time being was to just let the page own­ers know that they will have to con­tact the web team in order to do these types of changes.

With the new iSchool site cur­rently in the works, we are able to address this prob­lem in a much more ele­gant and usable way. Instead of just adding the extra markup to Page con­tent, we are work­ing on a FAQ con­tent type that uses a cus­tom field to cre­ate new ques­tions and answers and add them to an FAQ page.

What the FAQ con­tent type might look like in the new Dru­pal 7 site.