MacDonald notes that images are often found all over websites and this is a significant point to note because the more graphic-heavy a website is, the more trouble slow connections will have in downloading the contents in a timely manner. Elements from fancy fonts and logos to menu buttons with rollovers are all likely to be graphic elements. Enter optimizing images for the web. This step can't be emphasized enough because even fast Internet connections can get bogged down with huge files. The basics here are that images must be sized in a photo editor, like Photoshop, to ensure they are the correct dimensions and a resolution of 72 dpi before they are inserted into a web page. They can also be compressed to varying degrees; Photoshop's "save for web and devices" is great for this purpose because it offers a preview of how much image data will be discarded as you step down the quality to reduce the file size and it displays the loading time for a dial-up connection. These features let you examine the visual and consider the timeframe in order to make the most informed decision regarding the compression of each JPEG (GIF and PNG compress less, so this feature is not relevant for those file types).
Additionally, JPEGs are generally the file type of choice for pictures while GIF files are more appropriate for logos and line art. PNG files can be used to save images with transparent areas, however they are apparently not supported by older browsers, which I interpret to mean Netscape or Internet Explorer 4; I have mixed feelings here — sure the web should be accessible to the widest audience, but I have a hard time finding good reasons to run browsers that are extremely outdated. That said, GIF files can also support transparency, so I may reconsider my file-saving practices for the time being.
MacDonald emphasizes that transparent images do not always display correctly in various web browsers, however sometimes they are just necessary. His solution to avoid transparency by making the graphic background the same color as the web background is a good one, provided you don't ever change that color or use an image instead of a plain wash. Imagine trying to grab exactly the right area of a background image to paste behind a transparent area in a graphic. It would be somewhat difficult to ensure the graphic was lined up precisely with the background in order to avoid any jogs in the image edges. Besides that, he mentions how the edges can look crummy in a transparent image, but careful image editing will avoid this problem; making sure to create exact edges around a graphic from which you are removing a white background isn't difficult in Photoshop, it simply takes a little time and patience.
This is an example of several graphics with transparency; notice the edges of the photo border and the ink splotches (both scanned) have been carefully cleaned up. The text is also a graphic, but didn't require clean-up as it was typed onto a transparent background from the start:
In reading about inserting links into the code, let me start by saying how ecstatic I am that most of this is done automatically in a program like Dreamweaver. Even down to changing the color and properties of links, CSS rules can be easily created in Dreamweaver without having to manually add the correct elements to the code. That said, it is always good to understand what is going on in the background because eventually something will break and need to be fixed by hand. One discussion of note was MacDonald's description of how to add a link that opens in a new browser tab. He rightfully points out that many people find this annoying, but that at times it is necessary. For example, if I supply a link to my blog, which is hosted on Blogger, people would have to use the back button to return my site. Obviously they may never get around to that and might therefore miss out on the contents of my site. This is also true of other links to external websites. I have been experimenting with some code from DynamicDrive.com to incorporate this feature, but after reading MacDonald's instructions for doing this I might try it his way. Basically, it involves adding a tagged to the anchor element, and the code would look something like this:
(a href="LinkedPage.html" target="_blank"> Click me
As usual, the biggest issue here is making sure all those characters are entered perfectly.
Image linked directly from thumbnail displayed in a white window:
Image linked from thumbnail and displayed as part of a page maintains consistency:
Last, MacDonald covers the importance of checking links. There is little that is more irritating than having broken links — link rot — within a site. Even one broken link in an entire website sends an awful message and users seem to be less and less forgiving of this all the time. So, a website is an investment and it is imperative that it is checked periodically to ensure that it is working. The online link checker from the W3C is a fantastic tool for this purpose. It checked my website and verified all the links in 13.8 seconds, when previously I have been manually clicking through to perform such verifications. Obviously this is a great tool to employ for periodic website checks, especially for websites that are much more complex than mine, which is only at a few pages right now.
Check out the W3C link validator here:
http://validator.w3.org/checklink
No comments:
Post a Comment