ShareIt’s all very exciting. Your website designer has finished work on your new site, you’ve gone through your final checks and the site has gone live. You realize that all those hours of hard work were worth the effort because your shiny new website is now online, ready for your colleagues, visitors and clients to browse.
If your site is built on a content management system (CMS) you’ll no doubt have the ability to make updates and add content to the site yourself.
The process of updating text and images is generally straightforward, but at times the web editor can unwittingly introduce formatting into the page which can radically throw out the design and structure of pages on the site: a design that you and your designer have worked hard on to get right.
There’s nothing worse than reading through a website and stumbling on a paragraph of text that obviously has formatting that is unlike any other on the site: it upsets the flow of the text.
Likewise, at times you will find pages containing underlined headings. None of the other headings on the site are underlined; does this mean these headings are links? They’re not links; they contain formatting from the original Word document. Headings can be underlined in print documents but it is bad practice on the web.
Below are some recommendations for successful, hassle-free and most importantly, transparent copy updating.
Update text like a professional – let your designer’s inbuilt stylesheet do the work
When adding text to your site, we recommend that you avoid copying and pasting directly from word processing packages such as Microsoft Word. If you have a Word document, save it as a plain text file and simply paste in the text from new file.
This way, your new text will have no Microsoft Word formatting, and will therefore pick up its styling from the pre-defined style sheet. You can then bold, H2 or H3 formatting as required form the CMS text editor drop down menu. (H1 will already have been used for the automatically generated main title of the page.)
Add images like a designer – white space
All elements on the page should be given breathing space. You will generally never see pictures and text butting right up against each other. We’re not in the 1980s!
As such, when adding images to a page, make sure you enter values into the ‘vspace’ or ‘hspace’ fields – usually 10px and 15px is sufficient.
Better still, if you feel like rolling up your sleeves, you can edit the source code and add a right or left padding value to the image, as shown in bold in the example below:
< img src=”picture.jpg” style=”padding-right: 15px” >
And if the image is to be a link as well, remember to set the border to 0 to avoid giving the image a bright blue border, which will invariably spoil the look of your page.
Be careful with tables
Care should also be taken when adding tabular data to your web pages. Ensure that your table has a width of less than that of the page on which it is to appear. If in doubt, make the width 100%. If the content doesn’t fit, consider lowering the text size or trimming off columns.
If you plan to add a lot of tabular data to your site, it may be worth asking your designer to set up a default style for tables.
If in doubt, cheat!
If you feel confident with your HTML and you’re not sure how to match a bit of formatting that has been set up by your designer, remember that you can always take the source code of a text zone, copy it into your new page and edit that code in source code mode. Remember to check the formatting and new hyperlinks before making the page live.
In summary, using a content management system to build a website always requires slight compromises from both the client and the designer. It may seem like a step backwards to ‘unformat’ a Word document before entering the copy in to a text zone, but your visitors will appreciate it, as will your designer!
