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?

Negative space: You may have heard the term, but not know what it means. Designers may talk about the lack of it in a design.

Negative space is that elusive design area… that has nothing in it. It’s the space in the design that let’s the eye rest. The blankness between creative layout elements. The space can even be used to show a shape or letter. (Take a closer look at the FedEx logo next time you pass it. Do you see the arrow moving forward?)

If a layout is too full, with no negative space, it can feel overwhelming to the reader, as one approaches it. It can turn a reader away, make them turn a page.

Magazines are often good at feeding information out in small, palatable bits. Martha Stewart magazine is quite good at this. There are one to three small sections on a page, with additional info on how to make crafts in the back of the magazine. (It’s quite dense in the back.) Apple is also good at leaving lots of white space in their designs. Textbooks are not always good at this, nor is the GoDaddy website (sorry, guys).

Sometimes line-height, the space between text lines, can be spaced out differently in separate areas of the page. This make for an interesting look as well. Sometimes quotes or pulled-out text is spaced with taller line-height (double perhaps) right next to normal body text, with their text lines interlocking and overlapping a bit left to right.

Take a look at the next ad or magazine article you see. Does it feel inviting, easy to read? Do the websites you visit feel too busy, hard to navigate? Or are they clean and clear, with an interesting layout? Is the information in small pieces, that are easy to take-in? Sometimes the most important design is what you leave out.

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.

You’ve just completed a major website overhaul. Now you wonder when the search engines like Google and Yahoo will find out its been updated. You want that increased traffic, with your greatly improved “search engine optimization” of your website. You want the increased business it brings, and the ad revenue.

Well, why wait any longer? There is an easy way to get the two major search engines to re-index your website: tell Google and Yahoo about your website! (These two have about 85% of the world search engine traffic.) Just type in your main website homepage, the code shown on the screen, and their robots (also called “bots”) will “crawl” all over the website, and update their index of keywords. There is no need to submit sub-pages, below your main homepage. The bot will find it all. And although it can get the process moving, the search engines warn that it might still take about two to three months to see results. So get started now.

Here are the website submission pages for Yahoo, Yahoo mobile, and Google website submission. (Know that these page addresses change often to stop robotic submissions, so you may need to do a search “submit website” on Yahoo and Google. The right result will be in the top three results.) You can submit your website to Bing here (This is associated with MSN somehow. You will have to search for the official MSN submission page.) Here is Alta Vista’s website submission page.

Website submission is free. I would suggest only paying if you don’t have the luxury of time (and many business owners are short on time.) And if you want to hire Sproul Creative to do this for you, we would be happy to do so.

If you need help with search engine optimization, please read our article .