Monthly Archives: June 2017

Type of Graphics Used on the Website

The two basic types of graphics software:

There are many companies selling software to make graphics for both the web and print. All of these products have their own nuances and capabilities, but generally speaking, graphic images that have been processed by a computer can usually be divided into two distinct categories; such images are either bitmap files or vector graphics.

As a general rule, scanned images are bitmap files while drawings made in applications like Xara or Adobe Illustrator are saved as vector graphics. Yet today you can convert between these file types and even mix them.

Read on and see why Xara is the best web graphics software out there! –> Try Xara!

1. Vector illustration:

Vector graphics are images that are created using mathematical equations. These types of programs are typically used to create drawings, shapes, and lines. It is easier to create these sorts of graphics in vector illustration software than it would be in a bitmap editing software. Vector graphic files are usually very small (in kilobytes) because they only contain data about the shapes that form the drawing

2. Bitmap or image editing:

Examples of bitmap editing software are products like Adobe Photoshop and Corel PhotoPaint. These programs where originally designed to edit images like photographs. The key difference between vector and bitmap editing software is that the bitmap editors work on pixels where vector illustration software works with mathematical equations that set the dimensions of the shape(s). Bitmap editing software produce much larger files than vectors software since the files have to store information about each pixel in the image.

My ‘secret weapon’ in web design.

Over the years, I have used many programs from both camps and from many companies. Of them all, hands down my favorite is a little less known software called Xara. Directly quoted from their web site:

“XARA X is quite simply the best value vector graphics package you will ever see.”

This is no lie, it is faster and easier to use than anything else out there and it produces great work. It is vector software with some decent bitmap handling capabilities like transparencies. It was designed from the start for web graphics and it shows with its’ built in abilities to create web menus, rollovers, drop shadows, and bevels with a simple click of a button yet with total control!

On top of all its power is the fact it is really cheap at about $149 US, this compared to competitors who sell their products for 3 to 4 times the price! It also comes with a collection of photos, fonts, and clip art that are all important tools when creating web sites. And now they even include for free a CD with videos showing you how to use Xara! As you can tell, I like this tool and I highly recommend it for both the absolute beginner who will be amazed at how easy it is, and for the professional web designer who will be amazed at how fast it is.

Xara also has a ‘little brother’ that is also great; Webstyle is based on Xara and is even made easier but does not have all the features and power. But it still can be a good choice for some people at $69 US.

If you pick up one of these products through us, you will be helping us to build this site and you will in return be getting the best graphics tool in web design.

General way for New Web Designers

Web site designers today have plenty of options in terms of tools and technologies they can use to build their web pages. Many questions come up: should we use Flash, do we need database driven web pages, do we need a shopping cart for our e-commerce web site etc …

This article takes a step back and deals with some of the fundamental questions/issues in web site design.

1. Do not use framesets in your web sites:

They are not required in most cases and framesets will kill you with search engines.

2. Do not use a ‘heavy’ background in your web pages

that distracts the users from what you are trying to present to them and makes the text hard to read. Remember what you are trying to do with your website, and I think for most, it is not trying to impress people with some tacky background tile. Keep it easy to read; there is a reason why solid colored text on a solid colored backgrounds are used often on web pages and in print.

3. Use sharp clear pictures:

This is really important, a good looking web page can be made with just one clear sharp image and at the same time, the best looking web page can be made to look bad with just one crappy image.

4. Get sharp clear copy of your logo:

If you are a company, you want to look professional so that people have confidence in giving you their money, a crappy looking logo isn’t going to do it.

5. Avoid the IE page transitions:

IE (Internet Explorer) can create many special effects, things like page transitions (page wipes, etc. …) are tempting and may be suitable sometimes, but for 99% of web sites they are not.

6. Avoid the flying text:

Again, the decision whether or not to do this has much to do with the content of your web pages, but it should be clear that for most websites this would not be a good thing.

7. If you are trying to sell something,

having live credit card processing will increase your sales substantially. Sometimes when people want to start selling online they avoid the perceived trouble of hooking up with a credit card processing service because of the programming required. This is a big mistake, studies have clearly shown that web pages that provide credit card processing in their e-commerce enabled web pages (web pages that sell stuff) have much greater conversions.

Above all, make the web site pages no more than 60-70k (I shoot for 50k) if you can, and keep things very simple so your clients have an easy time finding things. You can help this along by strategically making use of the browsers caching capabilities.

How to Font Style on Your New Webpage

There are many subtle aspects that can make a web page and a web site look messy or amateurish, one of these is too many fonts on the page.

A time honored page layout rule is that a page should have no more than two fonts appearing, otherwise the aforementioned ‘badness’ will creep in. Whenever you’re not sure about something, it is always a good idea to try it and then to try it in opposite extremes.

So in this case, that means that you should break out your HTML editor (whether it be Notepad or a wysiwyg like Dreamweaver) and create two simple HTML pages. In one page use only one font and in the other use many fonts (5 for example). Be sure to use to same text on both pages (cut and paste some text from some website or even this article would be fine…) and see for yourself how well each reads. I am sure you will find the page with only one font looks much better and is much easier to read.

Unfortunately there are only a few fonts that are sure to be supported with most people’s browsers (tools like Dreamweaver give you the list to choose from) so you have to get used to these limitations unless you:

  • Create all your text elements with gifs… a bad idea.
  • Get into font embedding available for Netscape and IE.
  • Use a supported font for the majority of your text and use GIF’s for headlines in your preferred font.

Your first option is not a good idea for several reasons:

You’re effectively killing yourself on the search engines. Search engines can’t read your gif images. You could use the alt attribute of the image tag, but that is really meant for short descriptions only, as they will disappear after a few seconds.

Using gifs will make your site a pain to update, imagine you need to change the spelling of a word or two? Now you would have to go into your image editing software and fix the spelling error and export in out again. If this same text was in HTML all you would have to do is pop open the HTML file and make the change, much easier.

You would lose a big advantage of HTML: automatic reformatting of the text. One of HTML’s greatest strengths is that it will constantly restructure itself as its text is manipulated. This is something we take for granted, but really makes life easy especially with long documents. So as you edit the text, removing lines or words, etc. … you will get an immediate glance at the way the document looks.

Now that we are pretty sure that text as gifs (or any image format) is not a good idea let’s move onto option #2, font embedding.

#2:

There is technology out there that allows you to embed the fonts with the HTML document. This process is a little esoteric, can have problems, and is barely used, so I would advise to not use it unless you are creating the website for internal use in, say, a large company’s intranet.

Besides, the available fonts (especially Verdana) are nice looking and are a good choice for body text. I wanted to mention the font embed option just so that you know that this option exists.

But just in case there are some out there who really want to try it, you should check out this article on embedding fonts.

#3:

This is your best bet and this is what you commonly see, because it is your best bet! 🙂 Choose one of the browser supported fonts and then set the feel for your page or website with a font that you will use for headline text only. You will find that by doing this you can achieve the results you want and stay true to smart web design rules.

What is Flash when and why to use it?

Flash is a vector animation (read about vector animation software) software, originally designed to create animations for display on web pages. Vector graphics are ideal for the web because they are so lightweight.

Over the releases of new versions of Flash, Macromedia has made Flash more and more controllable via programming, where they have it positioned as a competitor to HTML to build interactive web sites and applications such as an e-commerce store. Macromedia argues that Flash is the way to go instead of HTML because of the following reasons:

  • Flash movies load faster and save on download time because Flash is vector based whereas HTML is not.
  • Flash intelligently ‘caches’ it’s movies so they don’t have to be reloaded.
  • Flash gives the user (the person viewing/using the Flash movie) a more responsive ‘rich-client’ like experience.

All of these points are true, but they can be true for HTML pages as well (except for the vectors). I will address these points now:

Flash pages can be made to load faster, but most of the time, the way they are designed in the real world, they do not. That is not a Flash problem, it is more an issue of the Flash developers going nuts with fancy and heavy Flash movies.

HTML caches pages as well, once images are downloaded they are held in your browser’s cache. The cached images are then used instead of downloading them from the server again.

With new technology like ASP.net and Java Server Faces, HTML now can react just like a ‘rich-client’ application. Even without these new tools, properly designed HTML for most dynamic sites can provide a good user experience.

What DO I have against Flash?

Before I start trashing Flash, I have to first say that I think it is a great tool, but not in all things and certainly not in the all-encompassing way that Macromedia would suggest. Here’s why:

Flash handles text very poorly. The web for the most part is about text, we go to the web to read about things, whether it be articles like this one, or what is in your shopping cart, or the latest baseball stats, it is all text.

Flash text rendering/displaying is much slower than HTML and noticeably less clear. Macromedia knows this and that’s why they include the ability to display basic HTML in Flash and that’s why on their own site, they make heavy use of  HTML.

Flash development usually takes much longer than the HTML equivalent. This has been helped to a great degree starting with the release of FLASH MX where they essential provided HTML form components, but it is still slower to create a Flash site than an HTML site.

What I like about Flash development?

1. You can do some really nice work in Flash that would be difficult and sometimes impossible in HTML alone. Things like complex animations and playing video spring to mind.

2. Practically no browser issues: For the most part, Flash movies will work the same if the user is on Netscape or IE, on Mac or PC. The browser issues (where people coming to your site have different browsers that can ‘break’ your pages) are quickly becoming a thing of the past since most people (thank the web gods) are using IE. But even today, I still have to deal with people who may be using some old browser that can break all but the simplest of HTML code.

So when should you use Flash?

In my humble opinion, I would use Flash to create a presentation that is similar to a television commercial. This type of presentation is something where the user sits back and enjoys the show as the Flash movie delivers the message to the client with animation, sound, and possibly video. Please do not get this confused with those ubiquitous ‘intro’ animations that still plague many Flash sites. Rather I am talking about informative movies that the user can decide to view to learn about something like a product or a service.