Symbiotic Design™ article: Design Basics in HTML series - Framing Thumbnails & Images
Design Basics in HTML (chapter one): Framing Thumbnails & ImagesBecause web sites often provide a gallery of pictures to share with the world, thumbnails have become the most common way of organizing photographic or high quality images. This is especially true of personal or family oriented web sites as well as art oriented web sites who often need a way of representing large catalogs of images to the public.
A thumbnail is a very small preview image of the larger graphic image which is displayed to give someone an idea of what they might find by clicking on a certain hyperlink. This allows the author (or artist) to display multiple images on one web page in a gallery style format so that the visitor does not have to wade through a series of high resolution images they do not want to view in search of the image(s) desired.
Creating a thumbnail image is easy. Simply decide what size your thumbnails should be and open your favorite image editing software, load the large high resolution images that you want to showcase on your web site (or in your home pages), and save the images out under a different filename in a smaller image size so that a quick loading preview (a thumbnail).
I usually save the images to the hard drive under a different name right away, before I forget, to prevent overwriting the original larger image (hence, losing that image forever if there is no backup copy). I usually simply append a "nail_" prefix and a suffix to indicate the size of the image to the filename for thumbnails. I.E.: "portrait.jpg" is saved as "nail_portrait_180x120.jpg" and "portrait_640x400.jpg" is saved as "nail_portrait_180x120.jpg" (if the size of the smaller thumbnail is 180 pixels wide by 120 pixels high). But you can decide your own naming conventions, of course. Use whatever works for you.
Here is an example of a very small catalog using some of Doug Peters' copyrighted thumbnail images:
These images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.The images above are displayed using a very simple HTML table.
Note the variety of sizes in these thumbnails. Although this catalog of thumbnails can be effectively used to guide a the web page visitor to an larger and clearer image with more detail, the very differing sizes of the thumbnails offers us a design challenge. This size incongruous would be even more prominent if we had even more pictures on the page in varying sizes.
A simple solution to this challenge is to save all of the thumbnails as the same size. However, if you reduce the image size without maintaining the same image size aspect ratio, some or even all of the images will be stretched and distorted. An even easier solution is to frame each image to the same size, as illustrated below:
These images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.Again, a very simple HTML table is used to sort the display of this small catalog of images.
Now we have achieved some uniformity in our small catalog display by specifying the width and height of each cell in the table above and adding a background color to each cell. This achieves a matte board effect, and since all the background matte boards are the same size, we have achieved a nice continuity for all the images, even though they are each a different size. I have set the cellspace tag to 12 to set each image apart from the other. Also, by moving them closer together and centered while not spanning the entire collection of thumbnails across the page, the catalog is more compact, adds to the uniform order and it displays well in browsers on different screen resolutions.
If you do not see a flat golden color matte background for the images above, your older browser does not support table cell background color tags and your browser is obsolete. All modern browsers support this tag and I strongly advise you to update your browser immediately as any browser which cannot display such a tag is susceptible to security holes and risks inviting hacker attacks which have been identified and corrected in the latest browsers. Besides, you should use all the tools available to you if you are going to design a good web page.
For the latest in surfing technology, please visit our modern world wide web browsers page.
Now all that is necessary is to add image titles and link the thumbnails to the larger web ready image display pages:
Self Portrait VII lil baby Max dp Family These images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.I have also made the titles link to the appropriate pages as well since I have eliminated the borders around the images which interfere with the layout and would usually hint that these images link to another page. Though not necessary, this is a good practice for visitors who are not quite yet web savvy and might not realize that the images themselves link to larger images for viewing.
To use the above style image catalog you will have to change the code to suit your needs. While an HTML tutorial is beyond the scope of this article, I do try to explain the code quickly in comments. But to make it easy for you, I have color coded the following code for the options you will most likely want to change using the key provide below:
Key:
Red: Tag attribute settings used to accommodate image size, cell size, background color, etc.
Green: Directory path and thumbnail image filename.
Blue: Text for master image name titles and captions.
Purple: Hyperlinks to the desired document (including directory path and document filename).
Gray: <!--comments on previous code and tags-->HTML tags take the form of <tag attribute>content</tag> and simply state formatting specifications in an easy to understand scripting style. Note that the <img> tag is a self contained tag and does not require a corresponding </img> closing tag.
The following code is setup to be pasted into an existing HTML document. To make the complete HTML document just load and view the source of this example code (note that images will not load when viewed as HTML, I am using fictitious names for you to replace), then save it to your hard drive as a text document with the .html extension (instead of .txt).
Code:
(given in fixed width font)
<table border="0" align="center" cellspacing="12"><!--Starts formatting a centered Table <TABLE> in the middle of the page with a spacing of 12 pixels between each table Cell. Increase this number to allow for more room around each matted frame.-->
<tr bgcolor="#CCCC99"><!--Begins a Table Row with the background color set to golden. These are hexadecimal values, which means that these are 16 base numbers ranging from 0 (dark) to F (light) and count like so: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Change these numerical values according to your desired color preference for the matte color. The first two digits represent the red brightness intensity, the second two digits represent brightness green intensity, the final two digits represent blue brightness intensity. Therefore, "#000000" is the numerical value of black and "#FFFFFF" is the numerical value of white.-->
<td align="center" width="180" height="180"><!--Starts the first individual cell 180 pixels wide and 180 pixels high for Table Data <TD> with the cell contents centered. Change the number of pixels for the size of the cell according to your needs, leaving extra room around your largest picture for at least a small matte to allow the layout to flow.-->
<a href="../photos/documentname.html"><!--Starts the Anchor <A> tag for the first thumbnail's Hyperlink REFerence. HREF specifies the path to the document it will anchor to and load if this Hyper Reference is clicked. This is a relative path (from the location of this current HTML document) to the document that we intend to load. The "../" directs the server to look one folder up. "photos/" signifies to look in the photos folder there. "documentname.html" represents the name of the document to look for. You should modify this information to reflect the exact path to your document, including the document name. As shown, use the string "../" to traverse up the directory structure towards the root directory. "../../" will traverse up 2 parent directories (folders). You can simply specify the image (GIF, JPG or PNG format graphic) file name instead of using an HTML document, but you will lose the ability to present the image just how you want in the resulting page. Therefore I recommend creating another HTML document to maintain design consistency.
--><img src="../images/thumbnailname.jpg" width="120" height="140" border="0"><!--Specifies the path to the first source thumbnail image which it will display for the link. In this example, the server is looking one folder up in the directory structure ("../") for an images folder ("images/") containing the actual thumbnail image filename "imagename.jpg". Change this path and filename to reflect the location of your first thumbnail image which will be displayed as an image on this page by using it's correct filename. Be sure to include the proper extension for the file (*.gif, *.jpg or *.png). Also change the width and height specifications for this tag to reflect your exact image size in pixels.--></a><!--Closes out the Anchor tag.-->
</td><!--Closes out the first Table Data tag (the cell information).-->
<td align="center" width="180" height="180"><!--Starts the second individual cell 180 pixels wide and 180 pixels high for Table Data <TD> with the cell contents centered. Change the number of pixels for the size of the cell according to the first cell to keep uniform continuity between matte sizes.-->
<a href="../photos/document2name.html"><!--Starts the Anchor <A> tag for the second linked thumbnail. HREF specifies the path and document it links to and loads if this Hyper Reference is clicked. This is a relative path (from the current web page). Again in this example, the server is looking one directory up ("../") for a photos directory ("photos/") containing the filename "document2name.html".
--><img src="../images/thumbnail2name.jpg" width="120" height="120" border="0"><!--Specifies the path to the second thumbnail source image. Again in this example, the server is looking one directory up ("../") for an images directory ("images/") containing the second thumbnail image filename "thumbnail2name.jpg". Change this path and filename to reflect the location of your second thumbnail image which will be displayed on this page. Also change the width and height specifications for this tag to reflect your second thumbnail's exact image size in pixels. --></a><!--Closes out the Anchor tag for the second image.-->
</td><!--Closes out the second Table Data tag (the cell information).-->
<td align="center" width="180" height="180"><!--Starts the third individual cell 180 pixels wide and 180 pixels high for Table Data (content) with the cell contents centered. Change the number of pixels for the size of the cell according to the first cell to keep uniform continuity between matte frame sizes.-->
<a href="../photos/document3name.html"><!--Starts the Anchor <A> tag for the third linked thumbnail. HREF specifies a relative path (from the current web page) to the document to anchor to and load upon clicking the third hyperlinked thumbnail. Again in this example, the server is looking one directory up ("../") for a photos directory ("photos/") containing the filename "document3name.html".
--><img src="../images/thumbnail3name.jpg" width="160" height="160" border="0"><!--Specifies the path to the third thumbnail image source. Again in this example, the server is looking one directory up the tree ("../") for an images directory ("images/") containing the second thumbnail image filename "thumbnail2name.jpg". Change this path and filename to reflect the location of your third thumbnail image which will be displayed on this page. Also change the width and height specifications for this tag to reflect your third thumbnail's exact image size in pixels. --></a><!--Closes out the Anchor tag for the third image.-->
</td><!--Closes out the third table cell data.-->
</tr><!--Closes out the first Table Row tag and completes the row.-->
<tr align="center"><!--Begins a second Table Row which centers the data in all cells. We will use this row for text to specify the titles of the photo/image to load if the title or thumbnail is clicked.-->
<td><!--Starts the first individual cell of the second row.-->
<b><!--Specifies to bold the text.-->
<font face="Arial, Helvetica, sans-serif"><!--Specifies appropriate fonts to use for a typeface. Modify this list if you would prefer different fonts, but remember that they must exist and be active on the visitor's computer in order for them to be seen.-->
<a href="../photos/documentname.html">Image 1 Title Name</a><!--This is the complete Anchor tag for the first thumbnail's Hyperlink REFerenced title name text. The text "Image 1 Title Name" should be replaced with whatever you have named the first image that we are linking to. This title will sit just below the first thumbnail. You can simply copy the path for the very first <A HREF> tag, because we are linking to the same document. We are doing just as we did for the thumbnail image, only this time, we are anchoring the image's name or title link to the same document.-->
</font><!--Closes out the font specifications tag (no fonts or font attributes are specified any longer)-->
</b><!--Closes out the Bold <b> tag. Stops making text appear in bold face.-->
</td><!--Closes out the tabular data for cell one of row two.-->
<td><!--Opens the tabular data for cell two of row two.-->
<b><!--Puts all text between this tag and the </b> tag in bold.-->
<font face="Arial, Helvetica, sans-serif"><!--Specifies appropriate fonts to use for a typeface. Modify this if you prefer different fonts.-->
<a href="../photos/documentname.html">Image 2 Title Name</a><!--This is the complete Anchor tag for the second thumbnail's Hyperlink Referenced title name text. The text "Image 2 Title Name" should be replaced with whatever you have named the second image that we are linking to. This title will sit just below the second thumbnail. You can simply copy the path for the second thumbnail's <A HREF> tag, because we are linking to the same document. We are doing just as we did for the thumbnail image, only this time, we are anchoring the image's name or title link to the same document.-->
</font><!--Closes out the font specifications tag (no fonts or font attributes are specified any longer).-->
</b><!--Stops making text appear in bold face.-->
</td><!--Closes out the tabular data for cell two of row two.-->
<td><!--Opens the tabular data for cell three of row two.-->
<b><!--Puts all text in bold until tag is closed.-->
<font face="Arial, Helvetica, sans-serif"><!--Specifies appropriate fonts to use for a typeface. Modify this if you prefer different fonts.-->
<a href="../photos/documentname.html">Image 3 Title Name</a><!--This is the complete Anchor tag for the third thumbnail's Hyperlink Referenced title name text. The text "Image 3 Title Name" should be replaced with whatever you have named the third image that we are linking to. This title will sit just below the third thumbnail. You can simply copy the path for the third thumbnail's <A HREF> tag, because we are linking to the same document. We are doing just as we did for the thumbnail image, only this time, we are anchoring the image's name or title as a link to the same document.-->
</font><!--Closes out the font specifications tag (no fonts or font attributes are specified any longer).-->
</b><!--Ends bold face type style.--></td>
</tr><!--Closes out the first Table Row tag and completes the row.-->
<tr align="center"><!--Here, the <TD> tag begins a the third and finalTable Row which centers the data in all cells. We can use this row for text for a caption such as a copyright notice or instructions to click on an image to see a larger version.-->
<td colspan="3"><!--The <TD> tag opens a cell for tabular data to allow for our caption. The 'colspan="3"' attribute is specifying that this cell will span 3 columns, and since the table only has 3 columns, it will span the entire table. This will allow plenty of room for our caption.-->
<font face="Verdana, Arial, Helvetica, sans-serif" size="2"><!--Specifies appropriate fonts to use for a typeface.Also sets the size attribute (size="3" is the base font size for all browsers, we are reducing it by one, but using very clear fonts in this example).-->
Click on a thumbnail or it's title to see a larger version.<!--Replace this text with whatever caption you find appropriate.-->
<br><!--A simple line BReak.-->
Images are © copyright and all rights reserved.<!--Replace this text with whatever caption you find appropriate.-->
</font><!--Closes out the font specifications.-->
</td><!--Closes out the tabular data and ends the cell.-->
</tr><!--Closes out the table row.-->
</table><!--Closes the Table tag and ends the Table.-->Simply copy and paste the above code into your text document and modify it using the key above (any ASCII text editor will do). Delete the <!--comments--> to optimize your code when you are happy with the result. Though the code will work with the comments in place, they will make the page load more slowly, especially for people with slow dialup connections.
Hopefully, the above code gives you a good foundation on which to base, because there are plenty of other neat little tricks we can utilize to make the gallery section even more appealing in it's design. For instance, the matte background doesn't have to be a simple color, we can even use an image for the background. And since we already have a table, we can add background color or background images to it, or the other cells it has, in which case this is only one possibility...
Self Portrait VII lil baby Max dp Family These images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.However, options can be easily overused, as well. The above table is demonstrating that fact. Part of the reason that I don't find this style very appealing is that 2 of the images are very dark and I would really have to spend some more time choosing my backgrounds and colors more carefully as well as brightening up the "dp Family" thumbnail to make this work. But the biggest reason I frown on this style of layout is that it is so obviously fashioned on a grid. Although grid layout has long become a proven method of designing a layout, it completely contradicts most of traditional art's compositional fundamentals. It lacks creativity in design conception. But it is used extremely widely in the magazine, newspaper, television and advertising industries because of the overly outrageous cost of those medias and the need to cram as much information as possible into a limited space.
You've seen it, you open a web page with 3 columns of links for everything under the sun. The best place to hide something is, after all, right out in the open. But web space is virtual... and abundant. It is exceedingly more appropriate to make eye catching designs that effectively communicate well.
That's why, although I am quite capable of designing on a boring grid for commercial enterprises, I do try to steer clientele away from this. I am so tired of companies trying to cram as much information as possible into a tiny space. The clutter creates a chaos that makes the desired information indistinguishable from the crap. This has long been a GUI nightmare both on the web and in computer interface design. And that is especially true for very young children that are very computer literate who's reading skills are still developing, or for elderly people who's eyes are not as good as they once were. In short, my approach is for clarity in both form and function. That's why, given the available options for the above design challenge, I would chose a very different solution...
Self Portrait VII lil baby Max dp Family Images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.Whether this example is an effective design solution or not is debatable. But although I whipped up the table background graphic easily and quickly in Photoshop, it's slight incongruity adds something to the overall composition. While the layout is still designed on a grid, the diagonal contrasts of the background image and the semitransparent mattes breakup the staunch grid effect considerably. And still, a uniformity is maintained via the end thumbnails even though they are differing sizes because of the mattes, even though the mattes fade into the white background of the page.
Admittedly, I will spend some more time on this challenge in the future. I like the table background design it's screaming for more attention it works with this application of a texture without overwhelming the piece. But something needs to be done about the orange fine print without using another highlighting background (and hence reintroducing everyone to the underlying grid) to make it legible. I may one day do the fine print as a contrasting GIF graphic to allow for transparency.
Still, there is something very wrong with the above design. Guess what? [Dramatic Pause] It only works in Internet Explorer 5 and above.
Other versions of the current browsers choke on it. So what I am left with is a design solution that is only compatible with the very latest Microsoft browsers. But as a web designer, the above solution presents itself more as a mistake than a solution because any decent web designer must design effectively for the last two full versions of at least the main three browser platforms. The reasoning is very simple, Internet Explorer 6 is a very slow lazy dog as well as a resource hog that requires the very latest version of Windows and a fast computer to use without dying from impatience. Similarly, Netscape Navigator 6 is behind the times in conforming to the very latest HTML standards and also slows down a system much more than it should. So what I want to do is inappropriate and is merely left here as an example of a mistake.
So how do we fix it?
Without resorting to CSS we can easily fix the above design problem by considering the HTML standard. Netscape and Mozilla support the HTML standard fully. Why then is Internet Explorer rendering the page as I intended? Simple, IE is utilizing a proprietary attribute for the table tag, background. Actually, some versions of Netscape do support this tag extremely poorly. I say extremely poorly because the image is not tiled throughout the entire table, but only through each cell. This can be quite annoying when you see it the first time after designing a table with graphic backgrounds and what is rendered is not what is expected.
So the HTML standard does not allow for a table itself to have a background. But the standard does not disallow a table to contain another table. This is an old design trick from the earliest days of HTML. So, what we do is enclose the above table in a new table which only has one cell that defines the background, as follows:
Self Portrait VII lil baby Max dp Family Images are © copyright Doug Peters, 2002, all rights reserved.
Used by Symbiotic Design with permission.Now the table should display correctly in any browser which supports the HTML design standard. All I have done is added the code to surround the previous table with a very simple one cell table. This table is borderless and centered through TABLE attributes. The BACKGROUND attribute from the previous TABLE has been moved to be an attribute of the surrounding table's single cell, or TD (Table Data). It must be removed from the previous table's TABLE tag attribute or browsers with poor TABLE BACKGROUND attribute support will mess it up because the nested table will display over the surrounding table which is setting the background correctly.
Now we have a graphic presentation that should display well in any browser which is capable of supporting graphic backgrounds. This is much more backward compatible with older browsers. But don't rule CSS out! One year ago I made the statement that modern browsers do not fully support CSS, nor do they support it the same way. This has not changed in the past year. However, it has dramatically improved. Currently, (February 1, 2003) all modern browsers do support the CSS1 standard fully, with some minor exceptions. And CSS1 does look virtually the same on most modern browser platforms.
CSS stands for Cascading Style Sheets. The reason that it is gaining great significance in the design industry is that CSS code can be saved as an external file and sets the style, or design, for any page that uses that file. That means that it is a quick and effeceint method of changing the look of pages site wide if they all use the same style sheet. It is also easier on computer memory (nested frames consume much more memory than they should) and CSS pages therefore load more quickly.
Still, I will warn against using CSS2. Currently, (February 1, 2003) Netscape has some issues with the CSS2 standard, and fixing these bugs can be quite a nightmare. Therefore, I don't recomend this standard at the present time for business unless you are starting a Microsoft oriented web site and want to force visitors to use IE or go away. However, this could change in the next year or so as well.
However, I am discussing the basics here. Using CSS to design would require a whole new article.
We still have a great deal to discuss, this is just the beginning. More framing techniques, more layout options, and examples of how a living gallery can change dramatically as new images are added. Stay tuned, same web address, same web page... sometime in the future.
Happy Designing! -dp
Back to the Symbiotic Design Articles Menu
 A creative new media design studio since 1997 2108 S Duluth Ave, Sioux Falls, SD, 57105 USA Local Telephone Number: 331-0808 Toll-Free (US & Canada): 1.800.279.2156 International Telephone: +1.605.331.0808 |
||||||||||||
| Maria Peters: | Doug Peters: | |||||||||||
|
|
|
|
||||||||||
|
||||||||||||
Symbiotic Design™ Privacy Policy.
This page created January 2, 2002.
This
article not for reprint, republication or redistribution of any kind.
Last update and © Copyright Symbiotic
Design™
