Small Business Resource Center Blog: Business Card Gallery Converted to CSS

As part of the web design makeover of the Small Business Resource Center website I converted the custom business card gallery in pure CSS. The thumbnail graphic of each of the 50 business card examples has been reduced in size, and the CSS layout renders enlarged versions of each, and all within a half page area. Unlike web design techniques in some photo galleries using javascript or flash, the business card gallery renders enlarged views instantly without a popup window or redirect to a JPG on a new page.

View the following screenshot from this gallery of custom business card artwork, and note that the card thumbnails and enlarged version (larger than actual size) takes up very little space on the page. The sequence of encircled numbers in the graphic below point out (1) the 5 rows of 10 business card thumbnails as contained in an area 550 pixels wide by 180 pixels high, the (2) enlarged view of one of the business card designs as displayed below the gallery rows, and (3) the seo friendly caption in actual text that appears under each photo.

custom business card gallery in css

(1) the 5 rows of 10 business card thumbnails
(2) enlarged view of one of the business card designs
(3) the seo friendly caption in actual text

This improved web design technique with CSS allows having 50 photographs with enlarged views in half an open browser window. The caption under each photo adds search engine optimization value to the web design because the text can be indexed by search engines. The caption text is visible to visitors for improved usability, also, which helps people viewing the business cards identify the company and their business for each design.

View the Graphic Art | Business Card Design Gallery to see this advanced web design technique for creating a business card or photo gallery with CSS. The enlarged views of the 50 cards are each 400 pixels wide, so presenting 50 cards in such a small space is a big improvement over the previous version of that page.

Finally, the web design of this page is complex yet meets W3C standards compliance with perfect code in XHTML and CSS2. A revised gallery of post cards and flyers will be next using this same technique. Unlike the current design with a handful of examples, the post card gallery will include 18 custom post card designs in a similar small space. Readers interested in a compact photo gallery web design for their small business website are welcome to email me for a quote.