Understanding Website Content
Having established a working HTML framework, the website content – site copy, graphical, multimedia and feedback elements are introduced. The process varies depending on the nature of the site and the volume of information included. E-commerce sites are populated from a back-end administrative database (by the client or their web team), as are websites with more than just simple content management systems. But the majority of static or largely static sites are delivered pre-populated to the client – especially when a considerable degree of search engine optimization (SEO) is required.
Website copy preparation
Client-delivered copy is not always in a fit state to pour into the page markup and invariably requires modification or deliberate alteration when optimization is undertaken. For example, headings in a poorly constructed Word document may simply be emboldened for significance and there may be little or no distinction between subheadings. Weak developers may simply embolden text to produce ‘headings’ using or worse (deprecated) tags. This premise of neglect and/or ignorance extends to all text on the page where, for instance, lists are marked up using paragraphs, or paragraphs are separated by breaks to deliver spacing resulting in inappropriate, semantically incorrect markup. There is another extremely important reason for using the correct tags: accessibility, which we’ll examine later.
Search optimized text
Developers increasingly are expected to have a grasp of SEO, perhaps not an extensive understanding (since SEO and SEM (search engine marketing) is now a specialist field but certainly sufficient knowledge to give a web presence a fair chance of visibility in the search engines. The use of appropriate tags for instance, to indicate a top-level heading and subordinate headings, is not only more easily managed via CSS but offers search engines a much better chance to identify page topicality and, accordingly, deliver better search relevance and therefore higher rankings in the SERPs (search engine results pages). Apart from headings, the supplied text will likely need rewording to weave in the appropriate keywords promoting the client’s products or services. Whether the developer undertakes this or responsibility is assigned to a 3rd party depends on the development contract but the developer must understand the implications and ensure the supporting Title and Description and Keyword tags are in the page header.
Graphical Elements
Images are another area for concern. A sprightly page will likely have all graphical elements optimized – reduced in weight (size in kilobytes) and sometimes colour density. Contemporary web browsers understand a number of image formats but GIF, JPG and PNG are the most common simply for reasons of compressibility. Which format to use depends on the nature of the image. GIFs (Graphics Interchange Format) are best used when there are limited colours present or there are large areas of solid colours, such as with a line diagram. GIFs may be manipulated in a number of ways by image editors or painting programs to reduce the number of colours and therefore complexity and weight of an image. JPG (Joint Photographic Experts) images are the more popular format for images on the Web. They may be subjected to various levels of compression using image editors, some of which are dedicated purely to the optimization of JPGs and have sophisticated algorithms designed to seek the best compromise between image weight and quality. The PNG (Portable Network Graphics) image format is similar to JPG but uses lossless compression (better image fidelity after compression) and offers additional functionality like a transparency layer; however, its take up has been hindered by Microsoft’s Internet Explorers’ limited support for the technology.
Image Sizing and weight
Many inept developers make the mistake of relying on the browser to alter an image’s physical dimensions to suit those of the container size. It is far better both for page rendering speed – since the full image, no matter how big, must first be downloaded into the browser – and fidelity if the image is pre-processed to the desired dimensions. Of course, it may not be possible to optimise images beyond certain limits when, for instance, the client specifies absolute fidelity for a brand corporate logo or product illustration or faithfulness of reproduction is intrinsically required, as might be the case with a gallery of quality artwork but the developer should seek the best solution possible in terms of the trade-off between image weight and quality.
