Because indenting paragraphs on Web pages is a little more difficult, many people just use a blank line. The effect of this not only ruins the flow of reading but give a very disjointed look to the page. It is better to use paragraph indents for paragraphs, and paragraph spaces for sections — collections of related paragraphs.

Web page layout is closer to a word processor document than anything else — there just isn’t the typographic control that you would get in a publishing program. There aren’t even any tabs in regular HTML, so all kinds of tricks are necessary to get even the most basic typographical control. There may be a little control over type size, but very little over weight or other styles.

Web page typography needs a slightly different approach from that of conventional print. You have to work within the medium and its constraints.

Differences Between Paper and Web
Fields of view are related to viewing distance
and type size. When reading any page at a normal reading distance, there is a certain field of view that the eye can cope with — enough to scan a line of text and be aware of that line’s relationship to its surroundings. If you have to move your head, you are changing the field of view completely and the brain has to try to relate the new field of view to the previous one.

With a newspaper page, there will be considerably more head movement required than with a paperback book. For Web pages, it depends very much on the browser size on the screen. Scroll bars allow the field of view to change, but one of the most common mistakes on Web pages is to allow the text to flow to the browser width. This is word-processor thinking, not design, and is much too wide for a comfortable horizontal field of view on even a small monitor.
Having to scroll a Web page vertically makes it more difficult to break the natural top to bottom flow than with a newspaper or magazine, because the physical act of scrolling takes considerably more effort than eye or head movement. There is little point in trying to fight the top-down approach for information on Web pages. This constraint suggests a couple of basic rules.

For any single Web page, the information should flow in a serial manner from the top to the bottom of the page. Where information is more random access, use hyperlinked headlines to pages or blocks of serial information. These headlines can be at the tops of longer pages or on completely separate menu pages.

There are various opinions of what maximum page lengths should be, but it’s generally agreed that the length of any single page should not be excessive. I believe it depends more on the page layout and file size than the number of words.

Emphasis, De-emphasis, Relativity
Bearing in mind the natural top-down flow of reading, certain elements of importance need to be given visual emphasis. The trick here is to introduce foils to the natural flow of reading by adding maverick elements. Anything that breaks with the norm will stand out. In typography, all elements are only relative to one another and, indeed, this is one of the underlying principles of HTML type markup.

Type Size and Weight
The most basic form of prioritizing is to make certain type larger or bolder than the rest. This gives emphasis to that type, because it looks more important than its neighbors. If the type was all bolder or bigger, then that would put you back at square one.

In scanning a page, the emphasized elements stand out from the others, which means they take priority and will be read first. Conversely, if you want to de-emphasize some information, you can make it smaller or lighter than the normal. Lighter is not usually an option in Web design, as you can’t have strokes thinner than one pixel, so we are stuck with two weights of type — normal (Roman) and bold.

Italics
Italics are often used in printed matter to give emphasis to a word or two within a block of regular Roman text. Italic type is generally harder to read than Roman, because the reader has to slow down to read it. It gives emphasis firstly because it looks different from the upright stress of the Roman and also because the reader’s flow is impeded.

Although italics work well on a printed page, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on Web pages, especially at smaller sizes.

Underline
Underlining was a technique much used with typewriters in days gone by. Few typewriters had any mechanism other than underlining to give emphasis and, unfortunately, the habit carried over into word processing.

Underlining has a special meaning on a Web page. It indicates a hypertext link, so it is really not a good idea to use underlining for any other purpose, or it may confuse the reader.

Color
Color is considered a luxury in print, certainly as far as text is concerned. On a Web page, it costs nothing extra and can be used to compensate for other typographic deficiencies. Again, it is the deviation from the norm that causes visual disruption and therefore emphasis.

Many pages on this site use colored type for emphasis. Instead of using bold or italic, the type color changes — the more it changes, the more emphasis it creates. So, there is a hierarchy of emphasis — yellow stands out more than green on a blue background, and green dominates over pale blue. In designing a more conventional black-and-white Web page, different shades of gray can be used to emulate the effect of type weight.

I was just browsing through my stuffs and then I found my photos about this seminar that we had attended last September this year. It was the Graphika Manila 2008 International Multimedia Conference which was held on September 20, 2008 in SM Mall of Asia. Well even though it’s already late, I still want to share this to all of you. Well to start off, let me give you a little background about this event.

Graphika Manila International Multimedia Design Conference is the premiere graphic and multimedia design event in the Philippines which started in 2006. Over 1,300 design professionals, students and the media gather annually for one of the biggest forums showcasing cutting-edge multimedia and graphic design.With Web, graphic and multimedia design as a rising element in today’s competitive creative and business environments, the event is warmly acknowledged and hailed as one of the most promising multimedia art events in the country.

Last September’s list of speakers were really good specially Kristophe Vergne (Pixar Animator). He showed us how they made the animated film Ratatouille. Then, there were Simone Legno (TokiDoki), AJ Dimarucot and Caliph8 (Collision Theory), Ivan Despi and Paulene Vicencio (The Acid House), and Robert Alejandro (RAA Design).

We were psyched that we were able to attend this kind of event and looking forward for the next ones to come.

The idea behind CSS is that content and type markup are kept separate, giving the designer control over type that hasn’t been provided for in basic HTML. Apart from the ability to make global changes to styles very easily, it is also possible to deliver the same content with different specifications according to the browser being used. Whether the user has a whiz-bang computer with a large 24-bit monitor or a small black-and-white organizer, it is technically feasible to invoke a different set of styles that give the optimal user experience in any browser. And, if the browser doesn’t have CSS capabilities, the layout will degrade gracefully to give, at least, a satisfactory display.
This particular block of text is, as far as HTML is concerned, one paragraph. The fact that it is visually broken up into numerous indented paragraphs using
tags and runs of   means that it will degrade better on non-CSS capable browsers. Normally I would alternate s with regular spaces, but the CSS implementation in MsIE ignores the spaces and halves the indent.
The style named “normaltext” is providing the type size, specified in pixels, not points, because pixels are absolute across platforms and points are not. In normaltext, I have also specified the typeface and line-height. If all that CSS could do was to add a provision for line spacing, it would still be invaluable.

In the next section, “alttext” supplies the typeface specifications and color and provides the indents.
Just like HTML and all the other cross-platform and cross-browser issues, CSS implementation is not very consistent at the moment. It is supported by Netscape and Explorer 4 and above, and partly in Explorer 3.x, but the results are not always predictable.

You can do a lot more with CSS than I have mentioned in this primer. The basic facilities are now reasonably reliable across browsers, but some of the more esoteric features can cause problems. Even this relatively simple, justified section with paragraph indents behaves quite differently in Netscape and Explorer depending on whether I use div or p.

As with any other Web page design uncertainties, you really need to test-fly your pages on as many computers and browsers as you possibly can.
The examples here only scratch the surface of what CSS can do. In addition to creating custom styles, you can modify most of the existing HTML styles. You could, for instance, redefine the pre tag to be a larger type size or a different color, or adjust the H2 tag to be a particular font, size, and style.

If you want to find out more, check out the CSS links in the Links section and in the advanced section under Cascading Style.

Finally, some readers won’t be able to see the results of your CSS. It’s important to make sure your pages still look good in older browsers too.
Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower-than-optimal resolution. For example, do you remember in cowboy films when the stagecoach wheels seemed to spin backwards? That was because the resolution of 24 frames per second was insufficient to capture the true forward motion of the wheels, and the illusion of the spokes moving backwards was because, in subsequent frames, the next spoke was almost reaching the position of the spoke in the previous frame.

Anti-aliasing in computer graphics was popularized by Quantel in their Paintbox computer systems back in the early ’80s. Much of what we take for granted now in programs like Adobe Photoshop was pioneered in early videographic systems costing hundreds of thousands of dollars. With the relatively coarse resolution of computer screens, individual pixels (picture elements) are quite apparent. Lines of pixels that perfectly fit the grid on a computer screen because they are horizontal, vertical or at 45 degrees cause no problem. Lines drawn at any other angle have to be approximated because they conflict with the natural grid and look stepped.

If the runs form a regular pattern, i.e. always two or always three, then you get a “sweet” line which, although stepped, is evenly stepped and doesn’t look as objectionable as the arbitrarily stepped one above.

For type, any edge that does not fall on the natural grid produces steps. Some cleverly designed screen fonts keep to the natural grid and look fine, but type that is really intended to be printed on a high resolution printer can look bad — or at least severely compromised — on a computer display.
Pixels are a fixed size and can’t be chopped up like ceramic tiles or building bricks. If you want to smooth out these unsightly steps, you can only do so using tone and color. By introducing pixels of a color somewhere between the foreground and background colors, you can effectively smooth the edges of the lines. To smooth the edge of a simple black-on-white character on the screen, a program like Photoshop will create 16 to 20 intermediate tones of gray to fill in the steps and, from normal viewing distances, the type will look smooth. No matter what the type or background color — it might be a full-tone photograph for instance — pixels of an intermediate tone and color are used to give the illusion of smoothness.

This strategy assumes that the display can handle all these colors. But on, for instance, an 8-bit display with only 256 colors, all these subtleties of tone are going to get lost, and colors are going to snap to their nearest Web palette counterparts. The image below shows how the individual pixels have “posterized” in the 8-bit rendition by a browser, yet still gives an acceptable result.

There are a number of different coding techniques used to produce anti-aliasing, and some are better than others. Try setting the same text in different programs, compare the results, and decide for yourself which is best.

Typographic design means different things to different people. Some like their type neatly arranged in grids, everything lined up with not a letter out of place. Others prefer a more free-form approach. But no matter what your stylistic preferences, being able to prioritize information successfully is one of typographic design’s most essential functions.

When a reader scans a printed or Web page, they are looking for information — fast! The designer can make it easier for people to find the information they need if it is presented in a logical manner. Any page of text starts out as a solid block of type. Without any other intervention, the reader will start at the top left and work down to the bottom right - so there is a natural flow there from the beginning.

In every situation where type is used i.e.: in publishing, signage, packaging, television, etc., designers have to adapt their techniques to suit the medium.

A headline style that works just fine in a magazine spread would not necessarily work on a poster. A magazine is always viewed straight-on at arm’s length, so letter spacing can be as tight as you like and the words will still be readable. A poster is, more often than not, viewed obliquely, which distorts the type to some extent. Here, a little extra letter spacing helps identification of the individual characters, and hence the words.

Designing for a computer screen has its own set of problems. Add to these the elastic nature of a Web page, which has to work across different computer platforms and screen sizes, and the problems get even worse. It is the designer’s job to understand these issues and to address them — to maintain some kind of control when everything else is shifting.

If you are familiar with style sheets in your page layout or in word processing programs, you will understand how it is possible to create a set of type specifications and apply them to a block of text or a whole site. You can make all headlines 48-point Times bold, subheadings 32-point Helvetica bold, and the body text 10-point Times New Roman with whatever leading and indents you like. If you want to change the overall look of your layout to something more technical, you only need edit the style sheet. You could change the headings to Arial Black, the subheads to Arial Bold, and the body text to Arial quickly and easily.

More Coming Soon…

START WITH AN ADEQUATE IDEA
Any good computer based multimedia title begins with a good design. Your web site should too. The more complete your design, the better your finished product.
What is the purpose for this web site? There is no point in developing a web site just because you can. All elements of the site should be designed with the web site’s purpose in mind.
Think about your intended audience. Are they internet newbies who need a very clean and intuitive interface? Are they professionals who expect a professional looking layout? Or are they younger people who want to see lots of whistles and bells? Are they technical people who want a faster loading site and don’t care how fancy it is?
How will your pages be laid out? What graphics will you use? How will your pages be linked? How will visitors to your site find their way around? These details should be sketched out on paper before you begin to write code.
It is also a good idea to build a template of the web site before you add content. A template is simply an HTML file with the major features of a sample page in place, but none of the content. It shows all of the layout features such as positioning of graphics, and formatting of text. This allows you to preview the design before you’re too far into the process to turn back. It will also give you a consistant look to your pages, and speed up the development process.

LEARN BASIC HTML .
Many web page generators don’t always produce clean web pages, especially if you don’t know how to use them well. HTML is not difficult to learn. You can create a more effective web site by hand than you can using some generators. Even if you do decide to use a generator, you should know how to edit the HTML by hand in case the generator doesn’t quite get it right, or you want to make some minor updates.
When the World Wide Web Consortium defined the HTML specifications used by Internet Explorer 3.x and Netscape Navigator 3.x, they put together a Windows help file describing the specifications. It is a good overview of all of the HTML tags and what they do.
VIEW THE PAGE SOURCE OF OTHER SITES.
The best way to learn how to do any sort of programming is to look at how other people do it. The internet is full of examples of HTML code; that’s what a web page is. You cannot view a web page on your computer until the HTML that makes up that page has been loaded onto it. Most browsers will allow you to look at the HTML code for that page and even save it onto your hard drive. As long as you do not include other people’s content or graphics in your own site, most people don’t mind if you borrow their HTML code.
Take a look at other web sites. Which ones appeal to you? Which ones are easy to navigate? Which ones have a layout that is easy to read? Plan your design so that it includes the features you like in other people’s sites. Avoid the features you don’t like.
When you find a layout you like, take a look at the HTML code for that page. How was the page coded? Most features of HTML are not very difficult to learn, but don’t steal code that you don’t understand. You will have a lot of trouble working with it.
Remember, complex code does not necessarily make a better site. A good site is one that downloads quickly, is pleasing to the eye, communicates effectively, is well organized and is easy to navigate.

BREAK YOUR SITE UP INTO SMALL UNITS.
Any designer of computer based multimedia knows that people grasp new information best if it is given to them in small pieces. Your site should be organized into small units as well. Couple this with a good navigation scheme and users will be able to find the information they want, jump directly to it without wading through the rest of your site, and download it quickly.

DESCRIBE YOUR SITE AT THE TOP OF EACH PAGE.
Ninety percent of the people who stumble upon your web site will never scroll down the page. You need to provide a complete and concise overview of your site at the top of each page. The top screenful of your page should make the visitor want to see more. Without a lengthy scrolling-down, your visitor should:
- Know who you are or what your site is all about,
- Know why your site exists,
- Know how your site is organized,
- Be able to easily navigate through your site,
- Be able to decide whether or not to stick around, or come back.
This is usually done by providing the user with a logo or a title and a navigation bar of some sort. Another good technique is to provide a clear title at the top of each page and a link to an index or site map. That is the way that this site is set up.
All of the pages on your site should have a common structure. This will enable a visitor to find his way around without having to learn a new navigation scheme on each new page. Each page should also identify itself at the top of the page and let the visitor know how this page fits into the rest of the site.

DESIGN YOUR SITE TO BE VIEWABLE UNDER LOW RESOLUTION.
Contingent upon wed design constraints, a good rule of thumb is to build all graphics and tables no wider than 500 pixels (for 640 x 480 resolution) or 700 pixels (for 800 x 600 resolution). However, with the advent of 17 inch monitors (putting the 14/15-inch ones into obsolescence), a good number of viewers who visit your site will see it at low resolution (800 x 600) and many will not have their browser windows maximized. So, by designing your site’s width to conform with either resolution settings will allow anybody to view your site without using the horizontal scroll bar. Forcing your site’s visitors to use the horizontal scroll bar is considered substandard design.

DO NOT LEAVE PAGES ORPHANED.
Many people who find your site will not enter through your home page. If you have a page devoted to pictures of your pet cat, they may have found you by looking up “cat” in a search engine. They will want some way to find the rest of your site, otherwise they may never find your great-aunt’s meatloaf recipe that you posted on your site. No matter how somebody enters your site, you should give them a way to find the rest of your site. Each page should have a link to your home page, or the same navigation bar that is on your other pages. Keep in mind that it doesn’t always make sense to put in a link that says “Back to my home page.” That may not be where your visitor came from.

USE META TAGS ON EACH PAGE OF YOUR SITE.
Meta what? I hear you ask. What is a meta tag? A meta tag is an HTML tag that allows you to put information about your web page into the HTML document in a form that visitors to your site cannot see, but programs–such as internet search engines–can. Some search engines will use your meta tags to determine whether a web page matches certain search criteria, and how to describe your site. If you meta tag your web pages, people searching for the kind of information your site contains are more likely to find your site. You should always include a keywords meta tag and a description meta tag.
The keywords meta tag is in this form:

If a person enters any of the keywords you list in your meta tag into a search engine, your site is more likely to be included in the list of matches.
If you have posted your Aunt Martha’s meatloaf recipe on your web site, the meta tag might look like this:

You are telling the search engine that if any of these words or phrases are entered as search criteria, you want this page to be in the list of matches.
A search engine will use the first few lines of text in your HTML file for a description of your web page. If you include a description meta tag, some search engines will use the description you specify instead. The description meta tag is in this form:

Your description meta tag might look like this:

ALWAYS PROOFREAD YOUR SITE.
You want your site to make a good impression. It won’t if it is full of typographical errors. Always proofread your site. Many of the automatic web page generators do not generate error-free HTML. If you have used one of them, carefully look over your web pages and hand edit the HTML files if necessary. An HTML file is not difficult to understand. You can fix many errors even if you do not know how any of the HTML tags work.
After you have FTP’d your files to up to the server, take a look at your web page the way a user would - by downloading it from the server. Your page may load off of your hard drive very quickly, but it may be annoyingly slow over a 56K modem. Some of your files may be missing from the server. Some links may not link. Take a look at your site at high resolution, low resolution, at 256 colors and even in text mode. Look at it with both Netscape Navigator and Internet Explorer; and, if possible, with AOL, Opera, and WebTV browsers. They don’t always render HTML the same way. Even two different versions of the same browser may not render the HTML exactly the same.
If you are using fully qualified paths to each of the files on your web site, you might also want to look at it on someone else’s computer. If your web site is looking for any files on your hard drive–because you forgot to change the path to these files before you posted your files to the server–the site will look fine to you, but not to your visitors.
Your web page may look great sitting on your hard drive, but you should know how it looks to your visitors.

AVOID BACKGROUND TILES AND COLORS THAT MAKE A PAGE HARD TO READ.
Everyone loves to put background graphic tiles on their web sites, but it isn’t always a good idea. They take time to load, and they can make text more difficult to read. If you do use a tile, keep the pattern subtle and make sure it contrasts well with the text that is drawn over it. It can be annoying to start reading a document when suddenly the background changes and the text doesn’t stand out as well as it did at first. Does that tile really improve your page? Think about it carefully before you use it.
You could try to lighten the tile. In many cases that will work, but in this case, it’s still too busy. Changing the font color to a color that contrasts better with the background often makes the text more readable. With this graphic, that is difficult to do. Green and lavender are on opposite sides of the color wheel. There aren’t many colors that contrast with both of them. It might be best to find another background tile. If you just must have the tile graphic, try using it as a sidebar instead, or as a topbar.
You could also change the colors in the tile graphic to colors that contrast well with a particular font color. I reduced this tile to black and white, then replaced the black and white with similar shades of blue. A white font over the blue background works quite well.
People like to use a lot of color on their web sites. Color can give your page a dramatic look, but be sure that text and graphics contrast well with your background color. Otherwise the text will be hard to read.
Here is another note on background colors. Netscape Navigator defaults to a white background. Internet Explorer defaults to a gray background. You should always specify a background color in your body tag so that both of these browsers will use the same color.

TRY TO AVOID USING THE BLINKING TEXT.
It is an interesting, but antiquated effect. There are other universally acceptable methodologies that will catch your viewers attention, but, most viewers find it extremely annoying and distracting. Had Enough?!

USE THUMBNAIL GRAPHICS.
We all want to see your vacation pictures, but it takes so long for them to load! Pull those pictures into a paint package, reduce their size and create thumbnails out of them. The thumbnails will load much faster. Provide links to the full size graphics. Then I can click on the ones I want to have a better look at, and I don’t have to wait for all the others to download.
Specifying a smaller width and height in the IMG tag will not create a thumbnail. The entire graphics file must still load before the image can be displayed. Not all browsers will show the image in your specified size. You’ll also have no control over how the image looks when it is reduced in size.

DON’T USE SCROLLING BANNERS IN THE STATUS BOX.
The status box gives information that many people want to see. Anything you put in the status box will compete with this information. If you have something to say, say it on the body of your page. Scrolling text in the status box isn’t new or innovative. It is over-used and serves no real purpose. Avoid the temptation to include it on your web site. Your visitors will be glad you did.

AS MUCH AS POSSIBLE AVOID THE BLEEDING EDGE TECHNOLOGY.
This would include audio, video, 3D, virtual reality, etc. Majority of the people’s browsers don’t support it because they don’t particularly care about downloading plugins that usually serves no real purpose.
If you are showing off your musical talents or your artistic skills, you may find this technology useful. Otherwise, it is best not to use it. Remember, the idea is to communicate. Gee-whiz-techno-whiz-bang gizmos don’t always communicate well, especially if I have to wait a half hour to download plugins that just might crash my system. If your web site really does require plugins, you should let your visitors know that before they encounter the pages that require the plugins. Give them chance to decide if they want to download the plugins in order to view your site.
If you want to use Java, JavaScript, ActiveX controls, CGI or VBScript, make sure that the code serves a real purpose. Don’t include it just to show you can. If possible, you should make sure your web site can still be viewed by people whose browsers don’t support all of the whistles and bells.
Every time you use new technology, you exclude part of your potential audience. Unless this technology is needed to make your web site function properly, either leave it out or provide an alternative.

SEE IF YOUR SITE HAS BROKEN LINKS.
The internet is in a state of constant change. Some of the sites you link to will eventually disappear or move. Check the links on your site periodically to make sure they still link. Broken links make your site less appealing and make your site look unprofessional.
If you are going to provide links to other sites, it is usually best to link only to the home pages of these sites. Otherwise, the owner of a site may redesign the site later, and you might lose your link.

DON’T USE BACKGROUND MUSIC.
Why?
• It is slow to load.
• It does nothing to enhance the site.
• It is hard to concentrate on reading your web page with the music going in the background.
• There are very few MIDI files that sound good.
• Most people don’t want to hear it.
The second the music starts to play. I turn it off. If I cannot turn it off, I leave. Who else will be driven away by your music?
Many people browse the internet from their desks at work (on their breaks, of course). A loud MIDI file that suddenly starts playing in your cubicle could be a little hard to explain to the boss.

INCLUDE YOUR EMAIL ADDRESS & OTHER CONTACT INFORMATION.
It seems obvious, but many people forget. Some of the people who visit your site will want to contact you. That’s probably why you developed the site in the first place. Be sure you include your e-mail address. If your web site is promoting a business or other organization, include a mailing address and phone number as well.

KNOW THE DIFFERENCE BETWEEN THE IMAGE EXTENTION FILES LIKE .GIF AND .JPG.
The internet uses two types of graphic files, GIF (pronounced “Jiff”) and JPG (pronounced “Jay-Peg”). These two are used because they effectively reduce the size of a graphic file by using sophisticated techniques for storing the graphic information in the file. They each store the information differently, so each should be used for different types of graphics.
JPG files use what is called a lossy format. This means that some of the information needed to reproduce a graphic image is lost when it is saved as a JPG file. The graphic saved in the JPG file is not an exact representaion of the original graphic.
A GIF file is lossless. All of the information needed to reproduce the graphic is stored in the file. But a graphic saved as a GIF file can only have up to 256 colors.
JPG’s are best used when a graphic is complex and should be displayed in over 256 colors. A scanned photograph, for example, should usually be saved as a JPG file. The lost information generally won’t effect the quality of the image when it is displayed. If you are going to use JPG’s, you should keep the original of the graphic in a lossless format such as PCX or BMP. Every time you edit a JPG and save it out, you will lose some of the image quality. Instead, you should edit the PCX or BMP and re-save it as a JPG.
GIF’s are best for line drawings that need to be displayed exactly as they were drawn and contain no more than 256 colors. Some photographs can be reduced to 256 colors and still look good. These graphics can be saved as GIF’s. This sometimes results in a smaller file than the same graphic saved as a JPG, but may result in a larger file. It is often a good idea to save the graphic in both formats and compare the results.