Home Services Clients News About Us

Greetings,

Welcome to Circle Talk from New Circle Consulting. It is our goal to bring you industry tips, news & great ideas which you may find helpful to your business.

You are receiving this email because you have requested information on our website or have met with us at an event. To unsubscribe, click the link at the bottom.

Surprisingly often, site visitors print out web pages: an interesting news article, an enticing recipe, or a page with driving directions or similar contact information. Have you had the experience of noisy banner ads cluttering up the top and sides of the printed page? Or, worse yet, having the last few words of each line cut off because the page layout is too wide?

You certainly don't want to disappoint the visitors who show enough interest to print out information from your website. Try printing out a few pages or taking a quick peek at the print preview (choose menu File -> Print Preview). New browsers like Firefox 2.0 and IE 7 both offer shrink-to-fit option, but you do want to check on older browsers like IE6, as many people are still using them.

If the results are less than satisfactory, read on for solutions.

Good Solution: Design and build your website with print in mind

• Keep the page width small (our testing showed that about 650px is good enough to fit). But this is restricting, and may not use available browser real estate to best advantage. Today, many people use large, high resolution monitors, and a webpage 650px wide is very narrow.
• Keep the main content on the lefthand side of the page and some quick links or additional resource info in the righthand column. This way if something does get cut off, the main content still reads well.

Better Solution: Printable Version

• For information you anticipate people may print often, provide a “print-friendly ” version. Usually it's a text link or a printer icon, which when clicked, launches a new page with simpler page layout (no or fewer images, proper page width). Many news websites take this approach.

Best Solution: Print CSS

• Create a CSS (Cascading Style Sheet) for print purposes. This is an elegant and flexible solution. When you link this style sheet to your html document, remember to specify the media to print. (Don't worry if you have never heard of CSS before -- just pass on the information to your web developer. A qualified web developer should know how to best use CSS.)

  <link href="/css/print.css" rel="stylesheet" type="text/css"/ media="print">

  If your site was built properly with table-less or at least not table-heavy CSS, then using print CSS to adjust for print is a piece of cake. Often you just need to hide the banner or heave image area by setting "display: none". Layout width can also be adjusted easily. See sample code below:

• You want to make sure your branding (logo) and contact information are both included in the print-outs. One way to achieve this is to create a block for contact information on top of the page, but to set the display to none for screen view and activate only for print:

  #print_contactinfo {
  display: block;
  }

For a real world example, check out http://www.newcircleconsulting.com and try the print preview.

Have Comments or Questions?

Or would you like to suggest a topic for future newsletters? Please email Lin Chen at lin@newcircleconsulting.com.

Back to Top

A favicon (short for 'favorites icon') , is an icon associated with a particular website or webpage. It's a good way to reinforce your branding.

Browsers that support favicons display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface. Although many modern browsers support more flexible ways of including a favicon, the safest way is to place a file called "favicon.ico" (a 16x16px gif file) under the root directory of your website.

Tom Lemanski of Vista Development shared a neat tool with us: http://tools.dynamicdrive.com /favicon/

Back to Top

Ajax is a new use of existing technology that is considered revolutionary by many. Shorthand for "Asynchronous JavaScript and XML", Ajax web development techniques can help make a website more responsive and user friendly.

Like to see some Ajax features in action? Check out http://illumallc.com, recently launched by Pepper Group and New Circle Consulting,

• Clicking on the email icon right below the banner and you will see a pop-up box that is nicer, neater than traditional ones. The email is sent out asynchronously so your current website view is not interrupted
• http://www.illumallc.com/who/leadership.php click on the icons and see how fast the page responds to your request
• Check out the illuma guide at http://www.illumallc.com/expect/guide.php and see the smooth page flow.

A few more compelling features to notice on this site:

• Transparent dropdown menu (this is done by setting the opacity of the background instead of setting an opaque image as the background) .
• Clear, uncluttered print layout defined in print.css

Back to Top