Sproul Creative Graphics and Website Design

Sproul Creative Web and Graphic Design can help your business enhance your professional image, reach your customers online 24 hours a day, and help you communicate your message to the world. We design and develop custom blogs for businesses and individuals that are easy to update in-house and run on free software, create websites and e-mail marketing (view samples), newsletters, print marketing materials, webinar pages, convention materials and much more. (View print samples) To get us started on your project, e-mail or call us today!

Now readers nationwide can read about improving their business with graphics, web design, and SEO tips. Sproul Creative is now available on Amazon’s reading device, called the Kindle.

You can also read Sproul Creative Kindle articles on your iPhone, using this free iTunes application.

To read our articles here, either choose a Category from the list on the top right, or peruse current articles under Recent Posts, shown to the right.

How can we help your business?

Diana Sproul
(818) 481-1153 or (970) 988-5413
E-mail: Contact@SproulCreative.com

How to get top SEO rankings for your webpage with search engines like Google and Yahoo? It’s part art and science, and then lots of tweeking.

Search Engines are ranking web pages a lot more now based on each page’s readable content, instead of just meta tags like keywords and descriptions. Some designers on the Adobe.com forum advocate not filling anything in for meta tags, since they have been so misused. I think descriptions are still useful for search results, as long as they’re short.

All Content is Indexed:
Search engines look at the pages’ readable content. That means all the live text on the page: page titles (which appear at the top on the tab when you open the page), heading text, ALT tags for images, page names (financialplanning.html), image names (financial_planning_chart1.jpg), folder names, and last… domain names. Yup, even your domain name can help or hurt you. Having a domain name that is closest to your actual product AND descriptive is best. Canterbury.com tells me nothing about the business at all. This business happens to be an exterminator. (!) (Don’t quite see the medieval relationship… but oh, well!) So canterburykillsbugs.com or canterbury_exterminators.com would be better.

Site Maps!
Include a site map of your website using live text, not images for text. It’s a text-rich meal for search engines, and your visitors will thank you, too.

Use Live Text Navigation Instead of Images
Beware of using images like GIFs and JPEGs for navigation, especially without using alternate tags. Search engines can’t read any meaning into navigation images, and so you don’t benefit with page ranking. They are not “live text,” which is readable by the bot (robot) that is indexing your page.

Don’t Use Repeating Words
Repeating words in your meta description or meta keywords will get you a search engine wrist-slap. But repeating words with possible misspellings is a good idea.

Beware of Flash
Search engines can’t read Flash’s text. They also can only index live text on HTML pages. Some Flash websites with many pages may branch out from only three HTML pages.

Don’t Have Multiple Links to the Same Page Content
Having many different web pages with the exact same text will get your website penalized by the search engines. They will think that you are trying to weight your page down with keywords. Instead, use many links to the same one web page.

Incoming Links
Improve your web page rankings by getting links to your website from other web pages, including your own related websites. Pages with more incoming links are seen as more important, or worthy. If you sign up for the free two week trial at Wordtracker.com, you can read more about the person who started the KEI. He has another website that is designed to help businesses trade links in related fields. (I’ll try to find out the actual link and list it here.) I’m sure there are others online, as well. You could e-mail other companies to see if they are interested. A realtor could partner with these: a mortgage broker, insurance agent, local credit union, high-end light fixture store, and painters, for instance. These are related, but separate businesses.

Multiple Domain Pointers:
Remember that web domains are cheap – $10 or less for a year. And search engines know that important pages have more links to them. Just think how many links there must be to Amazon, the Smithsonian, and … probably many porn sites. So look at the popularity of web domains on a search-reporting site, buy several, and point them all to one main site using a redirect feature. This can be done from the domain host manager. Also consider testing domain names for better traffic results with the same content. A website with the name tarryii.com doesn’t tell us much; tarryinvestmentsinc.com would be better for search engines, even if you list the shorter one on your business cards and letterhead.

In the example above, Canterbury could have a domain called LA_exterminators.com that pointed to their main website.

Search Reporting Companies:
Companies like Wordtracker.com and Nichebot.com report about the number of searches for each key word, as well as its competition. Wordtracker comes up with a keyword effectiveness index (KEI): the ratio of the number of searches vs. the competition for those search terms. There are other companies that provide this info, as well.

Test your domain name and keywords (for use in headers, page titles, etc.) on the site, and then use the best ones. Include the same words into your webpages’ live text. Here’s a great article on Wordtracker.com, among many others.

It works like this: you can have a millimeter slice of a 6000 search pie, which means you will appear on page 4342 or later, OR you can have a decent slice of a 100-200 search word pie. Choosing the latter will get you top placement for those words, and possibly into the first 3 pages. (hopefully the first page!) If you can find several keywords in this lesser used category, especially with a combination of words, you maximize your page viewings, and hopefully then sales.

Use these keywords in your articles’ text for better “natural” search engine rankings. If you choose to write about how to paint murals in your home, you will know whether to call them murals, scenes, or vignettes, and whether more people are looking for nature murals or kids room designs. It’s market research.

Use these same keywords for advertising on search placement ads (those paid search results that appear on the side or first); companies include Google Ad Words and Yahoo Search Marketing.

Refine and Tweek
Keep refining it and updating your SEO plan, as well as your website, and it will pay off for your business in better natural search engine page rankings.

I hope that will help you improve your rankings. Best of luck with your Search Engine Optimization.

When you and your company are ready to build a website, you will benefit from understanding enough about the web page development to:

Web page technology has changed a lot in a very short amount of time. As web designers, we have to maintain our education and adapt as graphics programs and internet browsers get better, and bandwidth grows faster. To help you understand web design and development, here’s a brief history of web design, and where we are today with modern web building technology.

First Web Pages
When most people first designed webpages, they often had one header (sometimes purple), and one very wide paragraph in the center, usually center justified. There were often flashing things all over and animations. Backgrounds were loud repeating affairs that often competed with the text, obscuring it. Screens were 800 pixels wide or less, and 600 pixels tall. A large bandwidth was 56K – whoa. Load times were S-L-O-W.

Tables in Web Page Design
Next, people started using tables to design web pages. Text started to have space around it (good) and not be center justified. Unfortunately, the table layout shifted in different browsers (Netscape and Internet Explorer mostly), even with the right table cell settings in place. Designers put in “spacer GIFs” to maintain the cell widths: an uncolored GIF that starts 1 pixel tall and wide, and is stretched to the shim size you need. Internet browsers were less standard than today. People started talking about and using web safe colors to compensate for different platforms (Mac and PC), screens, video cards and internet browsers.

This expanded to the use of many tables set within each other. This can become a nightmare if the navigation or other layout parts need to be changed. I saw one page recently that had about 5 or 6 tables just to get the header navigation all in place. The entire page probably had 15 or more tables. Yikes!

Images Used for Navigation
Sometimes the “live text” navigation was changed to a picture of text: a text image. If it was the right size it could serve as its own shim in the table layout. Of course, search engines can’t discern any meaning to images, so ALT (alternative text) tags were added to compensate.

Web Page Frames
Some webpage designers started using “frames” for their web designs: each webpage contained several different HTML pages within it: one for the header, one for the left-side navigation, one for the body text area. These could show their frames, have scroll bars, or have their frames invisible. A fourth file acted as the “picture frame” to hold it all together, and was uploaded with the others.

Designing with web page frames makes it easy to change the header information for a website with hundreds pages. The web designer only has to change the one “header” HTML file that all the other web pages use. The same ease of modification applies to the navigation HTML file. (In some ways its similar to the PHP designs today, with the use of components that are turned on or off to make a web page.) Downsides: when someone bookmarks a web page made with frames, only the header HTML file is bookmarked. So the user returns to the website expecting to find the perfect gift, book, or article, but ends up on the home page, instead. They had to search again for the website’s information.

Web page styles like fonts and colors were mostly embedded into each HTML page. This made it difficult to make site-wide changes.

Web Page “Slicing”
Then web pages were developed using “page slicing.” Web pages left the grid-like designs behind. Web pages were designed using Adobe Photoshop, and later Illustrator. The web page designs were

1. sliced into small rectangles of content,
2. optimized based on the content (placeholder letters for text, low-resolution GIF for black and white images, or JPEG or GIF for a complicated image/photo),
3. numbered by the software, and
4. saved as an HTML file.

Then the file was opened in a web editor like Dreamweaver or others and HTML links and roll-over behaviors were added. Text was pasted into a pre-set space and formatted. One background color was added to the whole page to fill-in the spaces around the exported design. Some designers used background images that were only a few pixels tall, but the full web page width. The internet browses repeat the background down the full page height. This created a web page with fast loading times, but a better design.

The advantages of these were that they looked fantastic! Finally the grid designs were left behind. Cool rollovers and colors were used. More images were integrated into the design. The designs were relatively stable over most browsers (hear a sigh of relief from designers here).

But now, the disadvantages of web page slicing: these web page designs were hard to update and modify. If you wanted to change one slice, and it fit the old spot, then the web page change was easy. You could replace that slice only and re-code it. But if the company wanted to add one more choice to the top navigation, the entire page had to be changed in Photoshop, the web page slices modified, and exported to a web page editor. The roll-over images (those pictures that change when the mouse hovers over a navigation) had to be saved as new slices, too. Then the text, HTML links and roll-over behaviors were added again to the HTML page. If the text box on the webpage was a pre-set size and your text was too long or wide, the page split apart in the internet browser.

Styles Become External to the Webpage (CSS)
Web page font and color styling had been embedded into each HTML page. But now external style files called Cascading Style Sheets (CSS) were used. These CSS files were uploaded with the HTML pages at the top level. Changing the font, color, and font size of an entire website with hundreds of pages could be done much more easily: in a matter of minutes now, not days to modify web pages individually.

In styling, web designers started modifying the styles of existing HTML style codes. Italic could be modified to always be dark blue, bold, and a different font, for instance.

Flash Intros Become Prevalent
Around 1999, many companies started making animated introductions to their websites in Flash. Some of these were so creative that I visited their website just to watch them. Sometimes the Flash intros had annoying sound, and no “skip” button to go past the intro (tsk! tsk!). Then entire web sites were created with Flash. They can look amazing, and have great designs. Finally people were free to have menus and text scrolling, or have information pop out from one side to the middle of the screen.

Unfortunately, search engines cannot optimize Flash websites. They cannot read the body text, headers, and other information that tells them what the website is really about, and rank the website. For a company that wants “natural” web site visitors, instead of having to pay for them with search marketing, this can be a huge problem. (See my other post for more: Flashers-on) The Flash file is laid into an HTML file that acts as the picture frame. An entire Flash website, with many pages, could expand out from this one HTML file.

Second, they can be slow or expensive to update. Not always, but they can be. Animation is more complicated than putting in text into an HTML file.

Floating Content with External CSS Controlling Web Page Layout
And now today: modern CSS can control the entire layout of websites. The Cascading Style Sheet (CSS) is still an external file that is uploaded with the HTML pages. But now it modifies a lot more than just the font style, color and size. The content resembles a list along one side of the page, without the styles applied. When the external CSS file is applied to the page, the content is shifted to wherever the design tells it to go. So if you want to change the position of the sidebar from left to right, the change can be made site-wide in ten minutes or less. The style is changed on the sidebar and body-text paragraph’s positions. The CSS file only is updated on the server (no HTML files), and the change is read site-wide. CSS can control header styling, create color areas, and create live text navigation that looks like a button but is still SEO-readable. Paragraphs can be indented to any position. The platform can be sniffed out, so different CSS is used for mobile platforms like phones, than a laptop. Pages can float centered in the window, and still have a defined width; but they can also expand and contract a bit to fill a larger screen.

Designers talk about separating the form of the page from the content. This layout is also much better for screen readers that assist the blind and other people. There is less formatting information before the bodytext for screen readers to wade through. Designers can even put a hidden link at the top that says “Jump to Main Content.” And bold text is not “read” by screen readers, which is important if its only being used as a formatting tool. Now “strong” is the code for important text.

Readers who are vision-impaired, and need larger text, can change the font size often to a larger default (this depends on the CSS settings. If a pixel size is set for the font, they won’t be able to change it. If an “em” size (the size of a capital letter M or current font size) or a percent of the current font size is set, then the font size will be changable by the viewer.

Coded Component Webpages
Some web pages are now built with parts that are turned on and off depending on the web site visitor or the website designer. These components can be controlled with PHP code and others. E-commerce, blogs, and shopping carts are often in PHP or another code (including this blog). The code retrieves the header file information, then the blog-post file, the sidebar file, then the product database, and so on. Each component is modified individually. For example, on The Haunted Game Cafe website, there are components for board game categories, top-sellers, news, blog posts, Twitter articles, etc. The styles can be changed site-wide for headers, body text, header size, etc., or modified individually. An external CSS file is still used.

I hope this article has given you a better understanding of how websites may be built, and the advantages and disadvantages of each. Most importantly, you can choose the website design that works best for search engines to find, which will get you more traffic in the long term. And isn’t your website there to get you noticed?

It can sometimes be hard to choose a typeface that fits the character of your sign, poster, client, etc. Each font has a different look and feel: formal to casual, fun, friendly, historical (1950’s, Gothic), uptight, beachy… The key is to match the project with a typeface that fits its character. Does it reflect a certain time period? The time of Frank Lloyd Wright and Charles Rennie Mackintosh’s Willow Tea Room (in Glasgow) might be reflected in a font like Eccentric Standard (shown below), and I can picture it on an antique hardware store quite easily:

Eccentric Standard

A shop in a Scottish castle might use one of these above the line:

Scottish Shop Sign in Castle

Can you see that the ones above the line generally fit, in various degrees? The second one from the top (Goudy Old Style) isn’t a great fit, but the others I can imagine on a store sign. They evoke the bag pipe period and place with their decorative swooshes (They are in order from the top to the line: Lucida Blackletter, Goudy Old Style, Chancery, Flemish, Ambrosia, Bibliotheque.) You can see that Flemish (4th from the top) doesn’t include the character “&”.

But the fonts below the line are clearly mismatched, feeling cold, modern, small caps, not decorative, nor similar to the feeling of the bag pipe era. (These are in order: Bank Gothic, Bauhaus 93, Mesquite Standard Medium, and American Typewriter.)

Cursive is friendly, but generally harder to read. It’s not a good choice for roadstop signs, or store awnings on busy streets. Let’s look at this sample of Mistral, one of the fonts I generally dislike (for overuse and legibility issues):

Mistral Font Sample

These words are difficult to absorb unless you are trying to find the shop’s name– actively seeking it. Why make your business hard to find? Wouldn’t it be better to have the public know your business is there as they wander by? Then they will think of you when they need that service. People don’t have time to seek out your sign. I heard the author of Guerilla Marketing once say, “A business with no sign is a sign of no business.” Having a sign that’s hardly legible is of little use.

Target Demographics
Who is the target audience? Kids, adults, a certain ethnic group? Kids might react positively to these typefaces below. Can you see that the last one might appeal to girls from 9-14 years old especially?

Kid-Centric Fonts

These have a lot of decoration, feel casual (the top one resembling handwritten marker, and the second from the top handwritten text), with a friendly feel. (From the top they are Marker Felt, Handwriting – Dakota, Giddyup Standard, Chalkboard, SchoolHouse Printed A, Curlz MZ.)

Consider the Font Use (Roadsign, Menu, Paper Report)
It would probably be alright to use harder to read typefaces on menu food titles, because the customer is already sitting down by that point. But if you used the same decorative, harder to read font for the food descriptions, you might make your eaters frustrated. Roadsigns have to be very legible, because the “audience” is viewing them with partial attention, while driving by at high speeds. The best ones are placed a few miles before the store, so the riders can discuss whether to stop.

Now as you go out into the world, I bet you will notice the fonts on restaurants, store signs, menus, roadsigns. Do they fit the character of the shop? Do they contrast with it? Is it readable to the casual passerby and the driver going by at 50mph? Does it fit its use? All of these considerations have to be taken into account when choosing a font face, as I am sure you will remember when you next have to choose one.

I had the very good fortune recently to hear James Gurney speak, author and illustrator of the Dinotopia fictional world. He spoke at the 2009 summer conference for the Rocky Mountain chapter of the Society of Children’s Book Writers and Illustrators (SCBWI). He spoke about art, drawing, and his process for creating the amazingly realistic illustrations. Many of these illustrations involve dinosaurs, which are hard to model since they are extinct.

Mr. Gurney strongly recommends practicing drawing constantly, especially with people and models. To accurately represent people, he often dresses himself, his wife, and willing friends in costumes, and then sketches or takes a photo for reference. He might model his own body’s position, using full length mirrors in his studio. He finds costumes from drama department and costume rental house sales so that he can correctly model the folds and lighting of fabrics.

For faces, he might use his own mirrored expressions for reference, or those of friends or models. He also sketches many people; he shared an amazing drawing of an older man he sat next to on a plane.

To create the amazing city scenes found in Dinotopia, he starts with a model made up from old boxes, milk cartons, etc. He paints it and lights it with a film light. These lights have a directed glass piece over the front called a “fresnel lens” that allows one to direct the light more accurately (See Birns and Sawyer or Arriflex in Los Angeles for examples). Plastic dinosaur toys and people figures may be added to the scene as well. He might also use a home made clay model called a maquette. Some have posable features. Then a photo is taken of the lit scene, or an illustration done. Then he might create a perspective drawing. Then he often paints several color schemes using a large brush, to plan the color tones of the final painting.

He shared two photo references, and they were amazing. When the model, dinosaurs, light, shadows and human figures are all arranged together, you can imagine humans living side by side with dinosaurs. The second photo he showed was of the round-domed building in the main city, above several waterfalls pouring forth from below the buildings’ bases. The illustration added immense, billowy clouds with hues of orange, off-white, yellow and pink in the background, as well as the waterfalls.

He also had a prop house create the fictional journal about Dinotopia by the main explorer, to better get into the story.

For drawings, he might draw people on separate tracing paper, and then move them around to create a final layout. The moving around could be done by hand or in Photoshop.

When his art process becomes stuck or maddening, drawings are burnt to ash using a homemade “Gallery Flambeau”; art is hung at the focus point of a set of mirrors that are set up in a parabola. The mirrors are mounted on a flat piece of plywood (kids, don’t try this at home!)

Mr. Gurney published two books in the fall of 2009 with captivating Dinotopia-illustrated scenes. One is entitled “Imaginative Realism” and the other one is “Dinotopia: Journey to Chandara.”

I have been pouring through “Imaginative Realism” for several days now, and can truly say that its an amazing book. It really outlines the whole process for how he creates accurate historical or fictional scenes and characters. There are about seven steps to the process. (No wonder my one-step paint process doesn’t work!) The process might begin with very small business card sized thumbnails to choose the best layout, before one proceeds to a more final drawing.

He uses as many real models as possible (in maquette, live model, photo reference, or photos of himself). There is a very funny sequence where he shows a series of photos of himself in sailor’s costume mimicking all of the characters in a naval battle. He created the photo reference for each character that he needed.

He lights the scene to render it as accurately as possible. He might take a photo and draw from that, or he might draw directly from the scene.

Then he might draw a perspective drawing, especially with architecture.

It’s a long process, but it obviously yields great illustrations. He has done many illustrations for National Geographic, the Post Office’s dinosaur stamps, and of course all of the wonderful illustrations for the Dinotopia world.

You may read more on James Gurney’s blog: gurneyjourney.blogspot. James Gurney’s books include Dinotopia, Dinotopia: Journey to Chandara, and Dinotopia: The World Beneath, among others. The first and last are like journal/art books. There is also a Dinotopia website to enjoy.

Too often children’s books have wonderful illustrations, but the type is left plain and undecorated. There might (might) be some type placed on a curved line. Wowee! Well, this is happily not the case in the children’s book “The Princess and the Pea” by Lauren Child (published in 2006). The author’s creativity encompassed the whole book, including the type faces for this highly imaginative story.

The beginning of each section begins with a large, ornamental drop cap (that large first letter that is often decorated in old books) in black ink over a scroll-work green background. Then important words are either all caps, a larger size and bolder font, or cursive italics (words like love, mesmerizing, fascinating, stars, etc.). Some pages begin with an old-looking hand-written calligraphy font. All of these are intermixed so well that different nuances of the words are emphasized. It really works to enhance the charm of this fairy tale. Here is a visual sample on Amazon.com. (Click the right arrow to see the “Once upon a time” page.)

The characters are hip-looking, hand drawn paper dolls in different poses. (The author/illustrator is also the creator of the Charlie and Lola books, which is also an animated series now.) The backgrounds are real staged rooms and sets, created from garden materials (log for a treehouse) and dollhouse furnishings. These were lit and photographed by Polly Borland.

Kudos to Lauren Child and the Hyperion Books for Children editor for including the typeface into the art and style of the book. It emphasizes the fairy-tale feel of the story, and greatly enhances the whole story-telling adventure.

When you are linking from your website, create meaningful web links. It will help the search engines and your readers know where the link goes, or “lands.” This will benefit your website and the landing website, especially when they are being indexed. As an example, you could just cite the word “plans” in an article, or you could put the link on several meaningful words in a row: “spinning wheel plans” or “photos of custom motorcyles by X designer.” It makes the link a little more wordy, but is a greater help to your readers. They will know exactly what to expect when they click on those words. The search engines will index your page better, too, which will help your “natural” (non-paid) search results. And that’s good for you, as well as your readers.