About this Guide

This is part of the SiteGrinder 3 Essentials series of short guides and videos which present crucial, "must know" information about various SiteGrinder feature areas.

This guide assumes you have already viewed both the SiteGrinder 3 Introduction and the Workflow Essentials Guides, so please do so now if you haven't.

This guide has a video version and a text version found below the video.

All of the SiteGrinder 3 training videos are collected on the SiteGrinder TV page at Media Lab's website.

Basic Text Creation and Editing

SiteGrinder is very good at converting styled Photoshop type layers to CSS Web Text. All you have to do is add the "-text" hint to a type layer's name to tell SiteGrinder to make real searchable text rather than a rasterized image of text on the built page. If you leave off the -text hint then any anti-aliased type layer will become a rendered image on the pages SiteGrinder creates, which is perfect for things like logos and banners.

Because web browsers don't support advanced typography like rotated or scaled text you won't see those effects if you put the text -hint on a type layer that uses them.

Important: In almost all cases you should create Photoshop "paragraph" type layers. These are type layers you create by clicking and dragging out a rectangle with Photoshop's Type tool, as opposed to "Point" type layers which you create by simply clicking (and not dragging) in your document using the type tool. This rectangle tells Photoshop and SiteGrinder where to wrap text, place margins, etc. You should avoid "point type", which you create by clicking and letting go with the type tool without dragging out a rectangle. For details about the difference between point and paragraph text see the Text Reference.

The "-scroll" hint on a type layer tells SiteGrinder to add a scroll bar to the right edge of a type layer's rectangle on your built page for scrolling through text that is too much for the rectangle to display at once. (SiteGrinder can alternately create layers which grow automatically to show all the text at once.)

Editing Text Outside of Photoshop

There are a number of reasons why you may want to consider some of the other methods SiteGrinder provides for editing the text on your page.

These include:

Photoshop type layers are difficult to work with if your text is very long
Photoshop type layers don't allow text to mix with and wrap around images in scrollable layouts
Photoshop type layers don't support some web formatting such as bullet lists and tables
You may want to build your designs as templates with text placeholders in Photoshop and add the real content later

Editing Text with the SiteGrinder Content Manager

In SiteGrinder's Content Manager you can edit page text directly in the browser window using a full-featured text editing panel.

This panel even has an option for entering HTML code directly:

The workflow for using this feature is as follows:

Create and position a "paragraph" type layer in Photoshop and give it the "-text" hint.
Type or paste some text into the layer. This could be your final text or just placeholder text like lorem ipsum.
Build and Deploy your page design.
In the Content Manager select the text area you want to edit
Use the editor window to edit the contents as styled text or HTML. You can even paste from Microsoft Word!

If you have the "Control" SiteGrinder add-on you can allow site visitors with login and password information to use the text editor to change content from any computer on the Web.

If you wish to create text layers that can't be changed in the Content Manager you can place the "-noedit" hint at the end of its layer name.

Custom Downloadable Fonts

Most web pages consign themselves to the small set of "web standard" fonts guaranteed to be available in all web browsers. Needless to say this is a pretty limiting practice for designers accustomed to using a wide variety of typefaces.

Wouldn't it be great if there were some way for users to automatically receive special fonts along with the rest of the website so you could use many different fonts without fear...?

Wait, it turns out there is! Google Inc. has developed a technology called (naturally) "Google Fonts" that download automatically to your site visitors' computer if they are using modern browsers.

As of SiteGrinder version 3.5 it's completely easy to use custom Google Fonts on SiteGrinder pages. Simply install the free fonts from Google on your computer, use them in your Photoshop design just like any other font, and SiteGrinder automatically handles the underlying web code to install that font on your pages. SiteGrinder even sets up the fonts so old browsers will use the best approximation of the font as a fallback if they don't support google fonts.

For details including how to install custom fonts see the Google Fonts section of the Web Text Feature Reference Guide.

Designing for Text That Changes in Content or Size

A frequent and frustrating challenge of website construction is creating design elements around and behind page contents in a way that can maintain design integrity even if the contents change in size because of changes to their style or text.

In a typical scenario you may have a footer that should move down to accommodate all the content areas of the page, as well as some sub-elements that will need to grow and shift around other sub-elements as they do so.

A design might start like this in Photoshop:

But what if we use SiteGrinder's awesome content editing features to add a lot more text to the top left and top right paragraphs?

If the page isn't set up for this you might see the enlarged text areas run over the lower text areas.

The result might look like this in a browser:

Notice the now longer text in each column has increased in height but the elements below (the yellow-orange image and the lower text) have not moved to accommodate.

One of SiteGrinder 3' most amazing features, the "-column" hint, makes it easy to create these kinds of areas using its innovative "column" system.

Using this system you will see results more like this in the browser after lengthening the text:

For an overview of columns and other layout features see Layout Essentials.

For details on creating designs with columns see the Columns Reference.

Text and Search Engines

There are strategies for making your site come up near the top of search results when people type in relevant search queries. These strategies are collectively referred to as "Search Engine Optimization" or "SEO".

The topic is a little murky because different search engines use different principles, some of which are trade secrets, but one thing is known: the more your content uses "real" text (as opposed to rasterized images of text) the better.

So go ahead and use rendered images of text for logos and decorations, but stick to real text for the content.

Where To Go From Here

At this point you can return to the SiteGrinder 3 Essentials Index to pick another topic or simply proceed to Page Creation and Management Essentials.

For detailed information about using text see the Text Reference Guide, and for information about setting links on word and phrases within text see the Hyperlinking Reference Guide .