text vs images in websites

Websites can be produced in a number of ways, but this post is going to focus on text vs images.

vs.  text

You know you can post images/photos online, but you can also produce an entire site of nothing but images. It’s not that it won’t have text, just that it’s text is an image of text, not actual text. Each computer/tablet/smartphone does not have access to the same typefaces, so online text is limited to a choice of serif, like Times or Georgia, where each letter has little details at the end of strokes or sans-serif, like Arial/Verdana/Helvetica, where there are none.* (It’s commonly held that serif faces are easier to read at small sizes.)

You cannot control how anything will appear on someone else’s system. Bear this in mind: they may have their browser set for 18 pt type b/c their eyesight isn’t good, or at 7 pt type b/c their screen is small and their eyesight is fantastic. These variables could make your site appear far differently than you expected. This is what CSS (Cascading Style Sheets) is for - styling a page to allow for the variability of machines and browsers. The only absolute way to override users’ preferences, however, is to present them with an image, not actual text.

Imagine you set up a document and then took a picture of it, then loaded the picture on the screen, and you get the idea. You could enlarge it or reduce it and the relationship between the elements would always remain the same, and you could choose any typeface (font) you wanted without worrying it would default to what was available on the viewer- that’s the concept behind an image based site. Flash sites are image based sites that include movement and interaction. You can see text embedded in them, but you can’t select that text or copy it. This is a good thing if you don’t want anyone copying your text and images, but what can’t be copied also can’t be read by google or any other search engine, so it won’t do anything for your search results. Also, text that is an image will degrade when greatly enlarged- zoom in on the text image and you'll see that it becomes fuzzier that the word "text" next to it. (see April 16th- images and resolution) Text in a web image is optimized for viewing at a specific size- change that size and you get slightly less clear copy. But if you prefer not to be limited to the few systems fonts, you may want to consider an image-based site. There are ways to provide the search engines with information they can use, and other methods of promoting your site. It will take longer to reach the top of the search, but it may be a compromise you’re willing to make if you want something really different, and you want assurance that it will appear exactly the same to every viewer.

*Web-based fonts are coming of age, with the idea of expanding user font choices, but that’s a post for another day!

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

determining your site architecture

Website architecture is all about how many pages you want in your site and what those pages will be. Do you want a “splash” page? (a fancy opening page you must click through to get to the site- I don’t recommend these unless you’re in the business of selling fancy splash pages or Flash.)

If you don't have a splash page, your home page is the first page, which will link to all other pages in your site. These will vary depending on your industry. Some basic examples are:

What We Do: Products or Services, which then link to a page for each particular product or service

News: Why we are better than the our competitors and should hire us instead of them

Who We Are: About Us, which includes Contact Us and/or Directions to our office

Viewers have little patience and want to grab the information they’re looking for and go, so consider about 200 words per page the maximum. Particular product or service pages (interior pages) can have more text and information than others b/c at that point users are looking for details.

You can reference pdfs, which are then uploaded to the server for online viewing/downloading. Be certain you have the rights to any images you plan to include. You’ll save money by giving your designer everything electronically, but if images aren’t already digital, your designer can be scan them. Be aware that your images can be copied by users. You can place warnings and use other methods to discourage this, but users can always take a screen grab if nothing else, and there’s no way to prevent that.

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

websites… faqs

Frequent questions I get:

Can I edit/update it myself?

Some hosts offer document management right from the site, allowing you to make updates yourself in a word-type environment if that option interests you. Before committing to that, be certain you will use it, since there are upfront costs involved. For quick updates/changes, it’s faster and easier for your designer to do it. Unless you have a wealth of free time, you should focus on your business so maintaining your site doesn't become a drain on your time and energy. Content Management Systems (CMS) that allows user editing are becoming more prevalent as people transition to cloud computing (where you use an online application than a local program stored on your computer) so look for costs to come down in the future.

I need plans?

Like a house, websites have architecture- plans for hierarchy and flow. Planning out the number of pages, how they relate to one another, what the user sees on each page/screen will save effort later on. One of the beauties of a website is it’s flexibility & the ease with which you can update information or add on. Think of the difference between a house with an architect-designed addition vs. what I call a “lego house”— the one with rooms attached helter-skelter.

What will it look like?

Your designer should give you a few (usually 3 or 4) designs to review and you will select one (or a combination of them) to develop further. If you need logos or supporting print work, it should all correlate and reinforce your brand recognition. As each site develops, the designer can post pages online for your approval. These should be private, not published, until the site is finalized. Most designers charge in increments- a deposit, a payment when designs are approved, maybe another scheduled payment if the site is large, and the remainder due when the site is ready to go live.

website first steps

The first step to success with your site is to choose possible domain names and then see if they are available here. Choose a site name that’s easy to remember and spell, and check to see what registered sites have names very close to yours, so visitors searching for you don’t end up somewhere else. No one has much patience anymore so do whatever you can to avoid potential confusion. For instance, don’t choose “mycompany.net” just because “mycompany.com” is taken. More often than not, people will end up on “mycompany.com” and you will only be driving traffic to someone else’s domain.
Do NOT register your chosen names on your own unless you're really savvy. They're harder to move than to register and the company that hosts your site will register it for you. Registering a domain requires hosting information, so sites that register domain names will insert their server info, meaning they are now your web host. Low cost deals sound intriguing, but unless you know you want to use that site for hosting, the name will have to be moved, which can in some cases can be a hassle. You rarely get something for nothing, and low cost doesn’t always mean the best service; you may end up paying extra for features that are included elsewhere. (“Oh, you want tires with that car? That’s extra.”)

These fall under the category of "in case you want to know" but isn't anything you need to know:

what is domain hosting?
The files that make up your website, your “mycompany.com,” have to be stored somewhere, ready to be served up when a user types in your domain name or clicks on a link. These computers, located all over the world, must be up and running 24/7 and have multiple back-ups in case a server fails. Companies that specialize in this charge per month to cover their set-up and maintenance costs. You’ll pay a registration fee to register your chosen domain name; domains are registered for a period of two years and then renewed. You also pay a per month or per year fee for hosting.

what’s a DNS?
DNS stands for Domain Name System, kind of like an internet phone book. Domain names are aliases for IP (Internet Protocol) addresses— series of assigned numbers for each site that tell computers where to go looking for the information you’ve requested. Just as you have a street address and phone number, your website has an address, too, but it’s much easier to remember “google.com” than it is to remember 64.233.169.147!

planning a website

The first thing clients want to know is “How much is this going to cost?” But building a website is like building a house- how many bedrooms? How many baths?

The first question I ask clients is “Why do you want a website?” They usually look at me oddly, since I am in the business of designing them, but if you don’t know why you want one, I can never help you achieve your goal. You must have a clear idea about what you expect your website to accomplish, since the most beautiful site in the world is a failure if it doesn't fulfill your needs. Try to think about it from both sides- you know what you want to include, but put yourself in the users shoes if you can.

How will they find you?
What terms will they use to search for your services?
What do they want to know once they get to the site?

Planning in advance is the key to a well-organized and successful site.

Websites can be cost-effective, but they can also be black holes for cash. Information distributed via the web is more cost-effective than print, and changes can be made more quickly and easily, but there are bells and whistles available that can increase costs and decrease search engine listings. Sites produced solely in Flash are lovely, but it's a site's text that is searched, and since there is no text (text embedded in a Flash file is not readable by a bot), search engines will have a harder time finding you. There is a lot you can do, but you have to decide what's worth your time and your investment. I suggest starting with some core goals and adding on to the site as needed.

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

marketing

Now that you’ve established your business, you have to let people know you exist. There are so many venues for this- ads, mailers, postcards, trade shows, sponsorships (ie: putting your company name on the local pee wee team jerseys or a patch of highway.)

The first thing you need once you have a business is a... business card. And letterhead and envelopes. Maybe invoices and a fax form, too. You can go to your local printer and choose a color, typeface and layout from a book, and they will come back looking very nice. And ordinary. And well, plain. You can get some variety if you have a pretty good eye, but if you have competitors who are also trying to get the attention of your target customers, your corporate ID (logo, stationery) should be a little more memorable. If you sell widgets, plain and simple may be all you need— if your widgets are all the rage and made headlines in all the tech magazines. But if you don't sell the world's best widget, but you sell a service, or say, coffee, you may need a little more than ordinary and plain to stand out from the crowd. Even if you are perfectly happy with the fine stationery you got from the book, you may need an ad, or a trade show display at some point.

There is so much to making your business successful than just being very good at what you do. You also have to be good at marketing your business—letting people know what it is that you do, so they can become customers. A "Grand Opening" banner will pique the interest of passing pedestrians, but it isn't going to do the job on getting the word out unless you sell food, and even then it only works locally.

As we've already discussed, the yellow pages aren't getting much use these days; there's even talk of discontinuing them. Customers are getting all their information online, at their computers or tablets or with their smartphone.

Postcards, coupons, fliers, sell sheets, heck, eateries even need menus. If you have developed a logo, established a theme/corporate look, you will use it everywhere. It takes a little time and collaboration, but the mileage you get out of it will be well worth the upfront effort. You'll use it in all sorts of ways and people will remember it— and your company.

Not everyone needs a full-blown custom website; for some, a facebook page will do the trick. I know photographers who have been very successful via facebook, but their target audience spends lot of time on there. They are young and looking for that service and the recommendations of friends. These photographers also have websites for displaying their work, but they post teasers on fb and drive a lot of traffic to their websites that way. But most businesses are not going to be happy with just a fb page. They are great for communicating, but let's face it- if you are in B2B, your customers aren't hanging out on fb during the work day. The truth is that currently, customers aren't likely to take you too seriously if you don't have a website under your own domain name. Sites/networks like fb and LinkedIn are great to augment your efforts and point customers to your website, but as the ad says “without a website, you're invisible, you don't exist." (this is an ad promoting websites, of course, but you get the idea.)

Coming Monday— planning your website!

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

starting at the beginning… a new business

I’m not a lawyer or an accountant, so anything I say here should be viewed only as advice from someone who’s done it, not an expert.

When starting a business, you must go to square one- find a good name. People used to name their businesses “AAA Widget Corp.” because in the olden days- pre-internet- when we used paper, everyone wanted to be the first one listed in the yellow pages. It worked, I guess, but I could never remember those names, or distinguish one AA or AAA from another.

Once you’ve chosen your business name, you need to register it with your state. There’s a great publication on the nj.gov site, called “Starting a Business Checklist” and I’m sure other states have similar publications to advise new business owners.

When your paperwork is done and you’ve set up shop, you need to put a “face” on your business. When you get up in the morning, you choose your clothes before you present yourself to the world, and your business material should reflect that same care- your logo or business name font/color should reflect how you want the world to view your business. Just as appearance makes a first impression on people, your choice of typeface and color scheme makes a impression on potential clients before you’ve ever said a word. The process of choosing a style for your business gives you another way to examine how you think of your business and how you want others to perceive it. Take no care of how your business presents itself, and you convey the notion that you will take no care with your product or service. The effect may be subtle, but it’s there and if you think about it, you’ll notice it.

Design is all around you. Have you ever forgotten the name of a grocery item, but know that you’ll recognize it when you see it- that’s package design. We recognize things instantly by their looks, and whether you think it should or not, it does matter. Given two items that do the same thing and are the same price, people will take the one whose appearance pleases them. So if you want to compete, think about your businesses appearance- your name, your font choice, your logo and/or color. It doesn’t have to be fancy, but it can’t be sloppy and it should remain consistent. Large corporations spend great amounts of money establishing branding and brand guidelines so that their corporate ID remains constant wherever it’s used. You may not be a big business yet, but the same concepts still apply.


— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

common file formats

There are hundreds of image file types, way more than I will address here. I want to focus on the common formats that are used everyday for web and print work for raster files.
Referring page: http://en.wikipedia.org/wiki/Image_file_formats

JPG, GIF and PNG are the formats most often used to display images on the web; tiff is used when saving image files or placing them into page layout programs, and pdf is often used when a document is placed on a website for viewing or downloading.

jpg
JPEG stands for Joint Photographic Experts Group, and it is a method of compression. JPEG was developed to display the least visible amount of image quality loss while maintaining the greatest visible quality of the image. It is adjustable so you can balance the amount of compression (file size) against the quality of the resulting image. Each time you save over a jpg, however, it loses a little more, so it’s best restricted to the final save.

gif
GIF, for Graphics Interchange Format, is suitable for web graphics with few colors or when transparency is needed. The color space for gifs is ‘indexed color’ and is limited to 256 colors. GIFs are widely used for animation, but isn’t good for photographs.

png
PNG, or Portable Network Graphics format, supports 16 million colors. It is a ‘lossless’ format, so the file will be larger than the same image saved as a jpg. PNGs can store an optional alpha channel (commonly used for silhouetting images or selecting part of an image.) It works well on the web.

pdf
PDF is the extension for Portable Document Format, created by Adobe Systems in 1993. It is basically a graphical representation of a document, including fonts and images. It’s a great way to share documents you have created without the user having to be able to open the original, requiring that they have the same program and the same (versions of) fonts that you used to create it. It ensures every viewer sees the same thing, but still allows selection of text and ability to add comments, which a plain image (like exporting your doc as a jpg) would not.

bmp
BMP (bitmap) is a Windows format; they are uncompressed, resulting in larger files than other formats, and therefore are not a preferred choice for the web. BMPs have wide acceptance in Windows programs.

tiff
TIFF, for Tagged Image File Format is a format rarely supported by browsers, but most often used by designers and printers to save images without any loss of information or alpha channels. (TIFFs may also be compressed if you want a smaller file.) Optical Character Recognition software commonly generate TIFF images for scanned text.

To convert a file from one format or another, you need a program such as Adobe® PhotoShop® or other image editor.

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

vector vs raster/pixel images

While there are numerous file formats and extensions, each designated by the program that saved the file, computer art falls into two basic categories- raster, or pixel based images, and vector, or line based images.

raster circle

Raster images are displayed in a rectangular grid, as horizontal lines of squares. In a 72 dpi image, each square is 1/72 of an inch; in a 300dpi image, each square is 1/300 of an inch. The greater the dpi, the smaller the square, or pixel. (Higher res images can be displayed at larger sizes without loss of quality, whereas lower res images will lose quality, or ‘pixelate’ when enlarged.) Raster files sizes are larger than vector files because the display instructions read like “make the first pixel in the line red, the second orange, the third yellow…” so the file must include instruction for every pixel in the image. 

There are different formats for different types of images, each based on the best way of displaying the image. A high resolution color photo will have many more pixels and a corresponding larger file size than an image consisting only of, say, black and white (horizontal) stripes. Further, an image of horizontal stripes will have a smaller file size than that of vertical stripes because it is more efficient to have the instruction “display 100 black pixels in a row, then display 100 white pixels in a row” than it is to “display one black pixel, then display 1 white pixel, then display one black pixel, then display 1 white pixel…” etc.

vector circle with bezier curves

For further clarification, see: http://en.wikipedia.org/wiki/Raster_graphics

Vector files, on the other hand, contain mathematical instructions for their display, such as “at the point x=10 and y=30, draw a circle that is 2 inches by three inches and fill it with this color…” which the display then interprets to display the highest quality image. They are created by placing points, then connecting those points with lines and (bezier) curves. Because they are formulas rather than pixel-based, they can be reduced or enlarged without degrading the image. Vector files are best for type and graphics.

For further clarification, see: http://en.wikipedia.org/wiki/Vector_graphics

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

printing

Digital printing, such as you get from your office ink jet, utilizes a combination of CMYK dots to reproduce colors in your documents. This is a relatively new technology, and while it is expensive per piece for large runs, it's perfect for a smaller number of pieces. It doesn't require color separations or film, so it's easier to prepare and therefore less time for your designer.

Offset printing, on the other hand, works by isolating each color onto it's own plate, or film, and then laying down each ink one at a time. This requires color separations, where only what is printed in that color appears on each plate. Think of a 4 color beach ball- there would be one crescent of black on each plate, each crescent representing one color of the ball. When the printing is finished, the result is the four colored crescents all together, forming the beach ball. Offset printing is more expensive to set up, but the cost is all up front, with each page only incurring the cost of the paper and the ink, making it the method of choice for larger runs. So digital printing is more expensive per piece, but may be less expensive overall if your print run consists of a smaller number of pages, whereas offset will be more economical for a larger run.

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

color spaces

The two color spaces we will discuss here are RGB and CMYK. RGB, short for Red, Green, Blue, is the color space of digital cameras and electronic displays like monitors, and therefore is used for websites or anything electronically displayed. This is the color space of light- RGB together would give you white light. CMYK, short for Cyan, Magenta, Yellow and Black, are the four printing inks. When mixed together, CMYK would give you black.

RGB files, shown on a monitor, are lit from the back and will always appear brighter and less muddy than CMYK. CMYK inks are absorbed by the paper or other material they are printed on and will never be as vibrant as their RGB counterparts. It is possible to display CMYK color on monitors, too, but even there they are not as bright or vibrant as RGB color. 

Printing done in CMYK is referred to as 4 color (4C) and is standard for digital printing, and most offset printing as well. You can save money on offset printing by reducing the number of colors, since each ink is laid down in a separate pass and the press must be cleaned between each ink. Pantone Inks (often referred to as PMS colors) are manufactured colors, similar to buying a Benjamin Moore or other name brand paint in a store. Large corporations will specify Pantone colors in their logos and other corporate ID to maintain consistency. You can approximate Pantone colors by breaking them into the closest CMYK equivalent, so they are a great way to discuss color between client and designer, especially if you have a PMS color book to view. CMYK versions are not as pure or bright as their original Pantone colors, but they allow you to use color in other parts of your document without paying for a fifth color (CMYK plus a Pantone color.)

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

images and resolution

There is much to learn about images, and one consideration is resolution. Many times I have been sent an interesting photo snapped with a cell phone camera that the client thinks will be perfect for their poster or brochure. What they do not realize is that cameras are capable of taking images at different resolutions, or pixel dimensions- the number of pixels per inch.

The default on a cell phone camera is usually lo-res, about 72 pixels per inch (also known as 72dpi- which is dots per inch, but for this discussion, the same idea) because the screen display is small, and lower resolution = smaller files and therefore more photos can be stored. You can usually change that setting, and on newer smart phones the cameras take higher res photos. The higher the resolution, the larger the file is and the more space is will take to store. Understandably, a photograph taken with a camera phone will never be as good as one shot from a (good) camera, but if you like taking photos with your phone, and might ever want a print bigger than a postage stamp, change the settings and consider getting more memory in either the device or an add-on memory card.

Print resolution should be 300 dpi- that is 300 pixels for every inch of photograph. A 4" x 6" photo at 300 dpi is over 6MB. The same 4" x 6" photo at 72dpi is only 365K. It is always easier to go down when resizing images; you don't need 300dpi for a website, but if you'll use the same photo for a brochure, get a hi-res shot and expect your designer to size it down for the web. Images viewed at a distance, such as posters or trade show banners, do not need such high resolution, which is good because they are usually dropped in at many times their original size. In this case the designer can swap size for resolution; that same 4" x 6" (6MB) photo at 300dpi becomes only 100 dpi when enlarged to 12" x 18". (4" x 300dpi= 1200 pixels wide, those 1200 pixels over 12" become 100 dpi.)

So think long term when buying photography, or you may have to buy the same image again at a higher resolution for a new project!

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

images and copyrights

Today's entry comes under the heading of “just because you can, doesn't mean you should." Images have become ubiquitous- they're everywhere. Once Google Images came online, users came to think that anything they can find online is theirs to take and use for their own. Not true!! Images are copyrighted when they are created, so even if a photographer hasn't intentionally copyrighted or watermarked their image, it remains their property, and using it is theft, plain and simple.

Inexpensive images are available online, royalty-free at many sites such as iStockphoto.com. These images can be used however you want for self-promotion, as long as they are not resold, such as placing them on t-shirts or coffee mugs that you sell. Image cost is minimal, and their inventory is vast. If you need something specific, or for resale, you'll have to contract with a photographer, or you can search the other, more expensive sites, such as Comstock or Getty images. These site are not always royalty-free, and some images are sold at different license levels depending on your use / frequency of use. A good designer can guide you to the best solution for your needs and budget.

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

purpose

The first thing to consider when tackling a new project, whether client or designer, is purpose. What is the goal of the project, and how will you determine if it's been successful? If the client is vague, and doesn't have a clear understanding of the ultimate goal, it's hard for the designer to succeed, and if you aren't satisfied, the designer will get no repeat business.

First, you must consider your audience. Whether the project is print or electronic, you have to ask yourself a few questions:
     Who is going to be viewing it?
     How will they find it?
     What are they looking for?

Many times clients look only outward, from their point of view- "Hey, look at what I am selling!" but not at "What do you need today?" If what you are selling fulfills their need, your job is half done, and if it doesn't, you are wasting time- they are never going to buy anyway. Don't spend money on a fancy website or brochure and fail to consider what the reader is looking for. Software manuals are great at "look at what you can do with this!" but not at "here's how you can…" Large companies spend great amounts of money but don't make it easy to navigate or leave out instructions on how to contact them. Some leave out phone numbers intentionally, but that's for another post…

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —

buying design services

It's intimidating to do something for the first time; it's worse when it's technical, with it's own language, and you feel you must learn the lingo to even follow along. It's exhausting. So we put it off, or we never do it at all. No one wants to feel foolish, or worse, ignorant.

We are here to help those of you who want/need design services— from a logo & business stationery, to brochures, trade show materials and websites— but don't know where to start. Don't worry, we translate 'tecno-speak.'

Most business owners have never purchased design services; they choose a business card template from a book at their local printer, and their biggest input is the color of the card it will be printed on. Sadly, most people don't even notice much in the way of design. Or they THINK they don't. Have you ever searched for a product in a store when you don't remember it's name, but you figure you'll know it when you see it? Design. The color of the box, the size, the shape— all design.

So how can your business stand out from the crowd? Be a clear voice above the din of overwhelming noise and sensory input that surrounds us every day? A good design can impart a lot of information- you may not be aware of it, but you get it just the same. Think APPLE- clean, elegant, and cool.

This blog is called "websitewisdom" but while the majority of our work these days is websites, we also design logos/corporate ID, brochures, mailers, sell sheets, trade show materials, all kinds of things. We even do photo retouching and illustration, and have writers and photographers if you need them. We spend time on client education, and over the years have developed informational documents for our clients, which we'll share here. We all need to think and plan before we buy, as we would with any purchase more expensive than a pack of gum. We'll give you the information you need to consider and explain as we go along. Have a question? Post it here and we'll do our best to answer it!

— Put our knowledge and expertise to work for your business— visit our webpage and then contact Canzani Graphics today! —