Posts Tagged ‘css’

The new photo gallery display web design technique in CSS on the main site was used to redesign the post card and flyer gallery page. The old version was converted to pure CSS in perfect XHTML with CSS2 and zero code errors. This advanced web design method includes similar features to the recently created business card artwork gallery as follows:

(1) 3 rows of 6 post card and flyer thumbnails (18 examples)
(2) enlarged views of each post card on the same page
(3) seo friendly caption in actual text in enlarged views

A key advantage of this web design technique is the old design showed just 6 examples of artwork that required scrolling to view the entire page. The new css web design method displays 18 examples in approximately half the open window browser for easier viewing by visitors. An added bonus is the seo or search engine optimization of the enlarged views with descriptive text captions that may be indexed by search engines.

View these 18 graphic art examples of full color custom designed post cards and flyers as displayed on this gallery page. Gorgeous post cards or flyers in full color 2-sided designs allow cost effective advertising to mail or hand out. This Post Card and Flyer Artwork Design Gallery includes front and back enlarged images of custom flyer and post card artwork.

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.

(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.

A novice small business website owner questioned how heading backgrounds with rounded corners are created and referenced a real estate website using the technique. This was a custom website design using css with graphic design of background images, and explains the technique used.

The sample real estate site was done in HTML plus CSS for layout without tables which provided an excellent example of what can be done creating a tableless web page. Before looking at the code my guess was the page was done with tables, so I was surprised (and impressed) with their layout. Here’s a graphic of three sets of links with a top heading and text in pure css that only appears to be created using tables.

The headings were done in CSS and each is a background image which consists of just two graphics which allows text headings. For the ones in question, right clicking on the rounded corner at the left and selecting “view background image” in FireFox (on the real estate site… not this graphic here) allows a visitor to view the corner only. In IE you may not have the view option and might have to save-as to see the square with the upper left corner in white.

Next, right clicking on the far right to view the rest of the background image you would see it is a single thin vertical line with shading to match the horizontal highlight at the top of the rounded corner. The “square” is used once, and then the vertical slice butts up against the “corner” and repeats horizontally as many times as necessary to fill the space.

Attributes in the CSS call out “no-repeat” to place the corner once and “repeat-x” for the vertical line which repeats (x = horizontally) until it reaches the end to fill in the background. The outside border was done using the “border” attribute and specifying the color.

After visiting the site, and for such a well designed page, I was surprised the home page had over 100 code errors. The designer mixed HTML with XHTML creating most of the errors, and if they had validated the code at W3C the errors could have been easily identified and fixed.

In summary, the technique for a heading background and box outline requires advanced design methods in HTML with CSS, plus the graphic skills to create the matching corner and vertical repeating graphic. The person making the inquiry mentioned examples used elsewhere with gradient fills. These use the same code technique except a different custom matching set of graphics.

Following up on the Monday release of the SolarusUSA integrated blog, my design of their main awning products website launched earlier today featuring a unique 50 photo website gallery. Imagine a visitor viewing 50 large photos as shown below in this post, and being able to view every photo on one page without scrolling down the computer screen.

Each awning photo displays 495 pixels wide by 356 pixels tall, so viewing 50 without moving down the screen may sound unbelievable until you actually see it. The photo above is slightly larger because it includes a border and outline, plus a full text caption at the bottom of the photo. Search engines cannot index graphics, however, the text caption on their website is real text, not a graphic. The search engine optimization, or seo, value of this design is an added benefit of this custom website design technique.

Finally, some photo galleries can come close to this performance, but they depend on a script or flash to present the series of photos in one place, and those techniques have zero seo value. Search engines ignore scripts and they cannot read flash website content. The photo gallery that I developed for SolarusUSA is a breakthrough enhanced technique being offered as part of my custom website design services, and the layout is done completely in XHTML 1.1 and CSS2.

Despite the complexity, the page code complies as valid to W3C standards without errors. View the photo gallery for solid color awning fabrics here, and the striped pattern awning fabrics here.