7 Tips for Website Content Managers
I have been developing websites for our clients since 1995 and continue to observe the same issues confronting content managers and site owners. Since 2005, website CMS applications or content management systems have made it easy to update site’s information. Some of the most popular website CMS include Drupal, WordPress, Joomla and DotNetNuke. However, even with these easy to use website CMS, content managers lack the basic training and understanding about text content and 72 dpi web optimized images vs 300 dpi minimum print resolution.
The website CMS incorporates a HTML editor that is used to write the text users see on each page. However, when you copy and paste your text from a word processor, you must follow a very critical procedure to first “clean up” the content in a plain text editor like Notepad. The reason for cleaning up your content is to eliminate the underlying style (e.g. font size and weight) you inadvertently copy when you copy from a word processor. If you paste the “unclean” content in the HTML editor, your page content will most likely look different than the overall website style. When you clean your content in Notepad first, your paragraphs will match the website style and look as nice as you intended. In my experience, many website owners and content managers are unaware of this crucial step.
Repeatedly I see content managers using images directly from their smartphones or cameras without first optimizing for the Web. Frequently I observe images having 4000 x 3000 pixels or the picture’s actual size is manually reduced/resized to fit a paragraph without any consideration for speed. My first tip to you is to learn to use an image editor to reduce the photo or illustration to an appropriate size for the page or paragraph. Once you determine the correct size, be sure to change the resolution to 72 dpi (dots per resolution) so it will be suitable for the Web or screen viewing. Next, determine if a PNG or JPG is best suited for your web page, because the two file types yield different file sizes that will affect your download and user experience. For example, while PNG offers a high quality image with a transparent background suitable for products on an ecommerce site, it is five times larger than a JPG image. With JPG images you can further adjust the quality ratio to further reduce the size.
After your image is optimized and added to your paragraph, align your images to either the left or right. By aligning your images to either side, the paragraph will wrap around the images, giving your page a more professional look. Take this adjustment one step further and provide horizontal and vertical spacing value to your image, for example 20px and 10px respectively. In my experience, the vertical spacing is usually one-half of the horizontal spacing. You should provide the spacing values to an image to prevent the image and text from touching one another and allow for a better visual presentation. Finally, make sure all of your margins; left, right top, bottom have proper “white” spacing to have the page layout look professional.
7 Tips for you:
1. Clean MS Word text copy in notepad
2. Optimize web image in photo editor @ 72 dpi
3. Decide if your audience has the bandwidth to view JPG or larger file size PNG files.
4. Align your images left or right
5. Make sure the text is properly wraps around the image
6. Set the horizontal and vertical spacing value around of the image between 10px - 20px.
7. Use margins to enhance your professional page layout
For questions, please contact me (Roj Prasad) using our contact form at webepoch.com