MaxiDesign

about Browser Compatibility

2009-01-07T23:56:00.002-08:00

Why do you care about Browser Compatibility?
Web sites reflect the company's professional image. If your site renders improperly or not at all, your company's reputation can be tarnished. If your site has browser display problems, visitors and potential customers will leave your site and not look back.
In contrast, a professional looking site will make visitors feel more comfortable, stay longer and browse more pages. And because of this increased credibility, they are more likely to purchase the products and services that they are looking for from you.

A simple purchase of HTML Toolbox and Browser Photo can protect your site from preventable errors, maintain your professional image, and increase your bottom line.

What You Can Do for Browser Compatibility

2009-01-07T23:56:00.001-08:00

We wish it were easy to cure browser display problems, but fixing them takes time. Read the following steps to learn what you can do to make it easier.

Set a Goal
First, understand that it's hard to build a Web page that displays perfectly on every version of every browser running on every computer. And doing so may require you to leave out features that you really, really want to have on your Web page. Building a Web page that's compatible with Version 1.0 of every browser would mean building a bland page filled with plain text.
So the first step to solving browser compatibility problems is to determine which browsers really matter to you.

To some extent we've done this for you in Browser Photo, since we don't include very old browsers such as Internet Explorer Version 3, or Netscape Version 2. While a handful of people still use these browsers, there aren't enough to justify the pain required to design pages for them.

But what about WebTV and Opera? We've included these browsers because they have small, but fiercely loyal followings. To quote one WebTV user, "We may be small in numbers, but build a site that's WebTV friendly and word gets around."

Within our own site, we track the pages typically viewed by WebTV users, and optimize those pages to work for that browser. Other pages aren't optimized for WebTV.

You may decide to do the same for your site, or you may decide that not enough people use these browsers to justify supporting them. In either case, define a goal and design toward it.

Avoid the Cutting Edge
The Web is hip; it's hot and exciting; it's radical. So many Web designers feel they have to build cutting-edge features into their Web page. That's a bad idea, because cutting-edge features are rife with browser compatibility problems, not to mention the impact they have on your page load time.

Web designers typically go through three stages of maturity: (1) I'm just learning; (2) I know it all, and I'm going to prove it by filling my site with cutting-edge features; (3) I've been burned by browser display problems, and only use what's compatible.

Not convinced? Try this exercise. Take some of the most well-known sites on the Internet: Yahoo, eBay, Amazon.com. Now go to those sites and look at their HTML code.

You won't see many cutting-edge features here. You won't see them using Java or Dynamic HTML. You won't see Flash.

You will see Javascript and Cascading Style Sheets. And most of all you'll see well-designed pages that work under all major browsers.

Including cutting-edge features in your site doesn't guarantee compatibility problems, but it greatly increases the chance of browser display errors. If you really feel you need to include these features, it's essential to test your pages under all major browsers. Check every page carefully with Browser Photo.

Pay Attention to Your Browser Compatibility Report
HTML errors are the leading cause of browser display problems. Making sure your Web pages are error free is one of the most important steps you can take to solve browser display problems.

That means running an HTML validator, like HTML Toolbox, over every page in your site.

The free sample of our HTML Toolbox will give you a full report of all the HTML errors on your Web page. The subscription version of this service can also automatically repair most HTML errors it finds on your page.

HTML Toolbox isn't a silver bullet; we don't claim that it will solve all of your browser display problems. But using it can dramatically reduce the time your spend tracking down browser display problems.

Validate Your Pages
Next to HTML errors, compatibility problems are the leading cause of browser display errors. We've already warned you about including cutting-edge features in your site, but compatibility dangers extend to all aspects of HTML.

HTML Toolbox includes a Browser Compatibility report that will identify HTML tags and attributes that aren't compatible with the three most recent versions of Netscape Navigator and Internet Explorer. Check this report and avoid HTML tags that aren't compatible.

Trial-and-Error Debugging
While HTML Toolbox can solve many browser display problems, there are some problems it can't address. That's especially true if these problems are caused by browser quirks and bugs. In these cases you'll have to track down your HTML problem yourself. Be patient; you can expect this process to take anywhere from one to four hours. Try following these steps to track down the cause:

Make a copy of your Web page so you can restore it to its original form if you need to. Debug this page, not your original Web page.
Isolate the problem on your copied page. Do this by eliminating as much of the page as you can. Is the problem at the top of your page? Then throw away everything but the top section of the page.
View the pared-down page in the problem browser (use Browser Photo to do this if you need to). Is the problem still there? Then remove more of the page. Eventually you'll get to a point where the problem disappears. In that case, the last part of the page you deleted probably caused the problem.
Now go back to your original page (or create a fresh copy of it and work with that). Look at the section of HTML that may have caused your problem. Change it.
Now start a new Browser Photo session for your page. View the results and see if you've corrected your display problem. If so, congratulations!
After you've fixed the problem, be sure to review your Browser Photo snapshots for other browsers too. It's a common mistake for HTML coders to fix a problem under one browser, and in the process break the page under another browser.
Don't expect your first guess to solve the problem. More often you'll have to try a number of different things to see if they solve the problem. Again, be patient with yourself; this takes time.

Browser Bugs

2009-01-07T23:53:00.000-08:00

As you've probably seen by now, building a Web page that displays well on all browsers isn't easy. To make matters worse, sometimes you've done everything right, and your page still doesn't display correctly under one specific browser. It's not your fault - you've just encountered a browser bug.
Unfortunately, browser bugs are a fact of life for Web designers. Each browser has its own unique set of errors and quirks that you have to adapt to. That's especially true with Version 4 of Netscape Navigator, whose early editions were rushed out the door to beat Internet Explorer to market. A columnist for WebReference recently called Navigator Version 4 "truly terrible browser."

For example, take perhaps the most widely encountered browser bug in existence. The HTML standards say that when you build an HTML table, you don't have to explicitly close each table cell with a closing tag. This closing tag is optional. Yet unless you explicitly close your table cells, Navigator 4 will not display your table if it is nested inside another table. Since nesting tables is common practice to control page layout, this bug wrecks many well-designed pages.

Netscape isn't the only browser prone to bugs. Internet Explorer for the Macintosh has a number of bugs and quirks in the way it handles text spacing.
When you
encounter a browser bug, it often means resorting to trial-and-error debugging to remove the problem. But before you resort to that, check our free Webmaster Tips Newsletter archive. It contains many tips related to browser bugs that can save you valuable time.

HTML Errors

2009-01-07T23:51:00.002-08:00

Whether you're an HTML coder who builds Web pages by working with the raw HTML tags, or a designer using a WYSIWYG editor like FrontPage or Dreamweaver, the odds are your finished Web page will contain HTML errors.

We've tested over 52 million Web pages at NetMechanic. A recent sampling of results from our HTML Toolbox showed that a shocking 85% of these pages contained at least one HTML error!

Does that mean that 85% of Web pages are broken? Probably not, but it greatly increases the chance that these pages will have browser display problems.

An HTML error is some spot on your Web page where you've violated the official rules of HTML. For example, you may have two tags that overlap one another in a way that the standards say isn't legal.

In practice, the major browsers are robust and forgive many of these HTML errors. But not all browsers forgive the same errors. So your favorite browser may display your Web page without error, but another browser may be seriously affected by the same error.

For example, look at these images. The HTML code on this page forgets to close a single TABLE tag, which is a violation of the HTML rules. Internet Explorer forgives this error and displays the page correctly; Netscape Navigator can't recover from the errors and doesn't display the page at all!

The best way to avoid HTML errors is to validate your Web page with a tool like HTML Toolbox. A validator will scan your page and spot areas where you've violated the rules of good HTML. Correcting these errors and following the rules of good HTML goes a long way toward eliminating browser display errors.

The free sample of our HTML Toolbox will give you a full validation report on your Web page. The subscription version of this service can also automatically repair the majority of HTML errors it finds on your page. We don't guarantee that HTML Toolbox will cure all your problems, but it will save you hours of time spent solving these problems by hand.

Different Font Sizes

2009-01-07T23:51:00.001-08:00

Most browsers allow users to customize their default font size. Many users who work on computers all day do this to reduce eye strain. As a result, user preferences may cause the typeface that you used to design your Web page to increase as much as 50% larger in a user's browser. This increase in font size can hurt many carefully-planned page designs.

Different Screen Sizes

2009-01-07T23:50:00.003-08:00

If you don't test your pages using different screen resolutions, your page may be stretched to fit a large screen, or be cropped to fit a small screen.
Many experienced Web designers use HTML tables to control their page layout, yet they design their pages on large, 1024x768 pixel screens. When these pages are displayed on smaller computer screens, the browser may not be able to fit all the content onto the screen. In these cases, the content will scroll of the right of the page. While this may not sound like much of a problem, users hate scrolling left and right to view a page.

This problem should be easy to avoid, yet a surprising number of otherwise well-designed Web sites don't fit within the standard 800-pixel PC computer screen. This is especially a problem for pages built by graphic artists using a Macintosh, whose standard screen size is 1024x768. Many designers forget that designing for an 800-pixel screen means using roughly a 750-pixel layout.

Many less experienced Webmasters design their pages without tables, or dimension their tables to fit 100% of the screen width. If you've built your Web page this way on a computer with an 800-pixel screen, you may be surprised how your page is stretched to fit a larger screen. Text and graphics that were adjacent on your smaller screen may not be so on a large screen.

To avoid this, wrap the content of your page inside a single, large, one-cell table. Set the width of this table to be about 560-pixels, if you're designing for a 600 pixels layout, or 750-pixels if you're designing for an 800 pixel layout.

Because the majority of Internet users have a screen resolution of 800 pixels or less, it's a bad idea to design your site for a larger screen.

Different Computer Types

2009-01-07T23:50:00.001-08:00

The Macintosh is still used by 12% of computer users, and has a very loyal following among graphic designers and publishers. In theory, if you view your page on both a PC and a Mac using the same version of the same browser, it should display the same, right?

In practice that's rarely the case. There are three reasons for this:

Font Availability. When you tell your Web page to use a particular typeface, such as "Arial," you may not always get the font you want. Fonts are a computer resource, and not all computers have the same fonts as your computer. That's true even between different PCs, but it's especially true between the PC and the Mac. If the typeface of your page suddenly changes between these computers, you've probably used a font that isn't available on both computer types.
Font Size. The Mac will generally render your typeface in a smaller pixel size than the PC will. That's especially true if you use the FONT tag to set your type size, since this tag uses abstract units to define size. You can avoid this problem is you use Cascading Style Sheets to set your font size in pixels. ac.
Internet Explorer. Microsoft outsources the development of Internet Explorer for the Mac, and so to a large extent this is a different browser from the PC version. In particular, the Mac version of Internet Explorer is prone to quirks and bugs that you won't see in the PC version. If you check your Web page under only one browser on the Mac, do so under Internet Explorer!

Our free Webmaster Tips Newsletter archive contains a number of important tips for avoiding problems between the PC and Mac.

Different Browser Versions

2009-01-07T23:48:00.000-08:00

The major difference between two versions of the same browser is their support for newer portions of the HTML language. A new browser is generally better at displaying Web pages than an old one.

However, Internet users tend to upgrade their browser based on the addition of new features, like email integration and instant messaging. If a user doesn't care about these features, they're happy to keep surfing the Web with their old browser.

That presents a problem for Web designers, because for some length of time after the new browser appears, a significant minority of people will still use the previous version. So rushing to build pages with the HTML features supported by the new browser will have to wait.
A good rule of thumb is to design your pages to work for the last two versions of the major browsers.

While a handful of people use browsers older than that, their numbers aren't large enough to justify the sacrifice required to support them. A few people still use Version 3 browsers, but these browsers don't support Cascading Style Sheets, which are the most important addition to HTML in the last 6 years.

Also note that new browser versions sometimes represent major changes in a browser, and in these cases all bets on the browser's behavior are off.
For example, Navigator Version 6.1 is a complete rewrite of Netscape's browser, so a page that worked well under Navigator Version 4 may not work under Version 6. That's especially true if you use Dynamic HTML on your pages.

Different Browsers

2009-01-07T23:46:00.000-08:00

Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page. The result of this translation is a little like giving two human translators a sentence written in French and asking them to translate it into English. Both will get the meaning across, but may not use the same words to do so.

The basic rules for translating HTML documents are established by the World Wide Web consortium, which publishes the official HTML standards. But there's considerable room for interpretation within those ground rules.
For example, the HTML standards say that the TABLE tag should support a CELLSPACING attribute to define the space between parts of the table. But standards don't define the default value for that attribute, so unless you explicitly define CELLSPACING when building your page, two browsers may use different amounts of white space in your table.

In addition, the HTML standards usually run ahead of what the browsers support. No browser as yet supports 100% of the HTML Version 5 standard, but some browsers come closer than others. Over the past few years Internet Explorer has done a much better job of this than Netscape Navigator, though Opera has done arguably the best job.

But since support for the latest HTML tags isn't universal, you could be building your pages with parts of the language that not all browsers understand. In that case the browser will ignore that part of your page it can't translate, and the way your page displays will be affected.

This problem is further complicated by browser-specific "HTML extensions." Back during the heyday of the Browser Wars, both Netscape and Microsoft tried to get a competitive edge by running ahead of the HTML standards, inventing their own tags and attributes.

The theory was that Web designers would fall in love with these attributes and put little buttons at the bottom of the page saying, "Best viewed with Netscape Navigator." So Internet users would rush to download that browser and, voila, Netscape would win the Browser Wars.

In practice no Internet user will download a new browser just to view your Web site, so these HTML extensions only created headaches for Web designers.

The best way to minimize these problems is to pay attention to browser compatibility when building your Web page. Avoid using HTML extensions and be careful about using cutting-edge features of the language that may not yet be supported by all the major browsers.

We also recommend you test your pages with HTML Toolbox and review its Browser Compatibility report.

How to Create a Super Shiny Pencil Icon

2008-09-01T08:32:00.000-07:00

The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I'll show you how to draw a pencil icon. We'll have a look at gradients, selection tools, and basic transform operations. Let's have some fun with this.

Step 1
Create a New Document 950 pixels wide by 600 pixels heigh, set the Resolution to 300 pixels/inch, and the Background to white. Make a rectangular selection with a Style of Fixed Size, a Width of 400 px, and Height of 100 px. Click to View Full Tutoruals

3D Car Modeling

2008-08-31T09:06:00.000-07:00

Click to View Overall Modeling Process

For the modeling process of this scene I used 3ds Max, I used polygonal modeling and some nurbs curves for basic curvy objects for interior mainly which were converted later into polygons. The more details you can add to your model the best it will look in the final image.

modeling difficult objects of rotation

2008-06-26T23:10:00.000-07:00

Maya Versions: 1.x, 2.x, 3.x, 4.x, 5.x, 6.x, 7.x, 8.x
Readership Level: Basic
Owner: andreikin
Author Name: Belyaev Andrey

Today we are going to talk about modeling difficult objects of rotation. The sense of my method of modeling of such surfaces is simple first the flat model is done and then turned off in a tubule. So it is possible to make tire covers for jeep or plastic bottles for water. So we are going to begin with a tire cover:
First of all it is necessary for us to make one segment of a tire cover. We shall do it of a plane:
Click here to view full tutorials

Glass apple in Vray and 3D Studio Max

2008-03-30T07:48:00.000-07:00

3d Max Tutorial - Creating a Glass Apple Category : 3D Studio Max Tutorials
This easy follow tutorial will teach you how to create a cool looking glass apple using 3d studio max and Vray. Even a beginner can get help from this tutorial.

Ok as I have found in the last few days learning to do anything in Vray can be tricky due to the lack of good beginner/advanced tutorials. That’s why I have been reading the Vray online manual for the last few days and trying to make myself accustomed to Irradiance mapping combined with a secondary bounce coefficient calculated with a QMC engine, precalcing the caustics to a photon map and all sorts of other mind boggling techniques... So to save you the trouble, I thought I should put my newly learned knowledge to good use and make a tutorial for the good people of 3dpalace..;)Bear in mind that I am pretty knew to this so I am sure that there are loads of different ways to do this, many of which would probably be better/faster/easier/...you get the idea, .... Click To View

Photoshop Glass Ball Tutorial

2008-02-22T08:32:00.000-08:00

During the course of this Photoshop tutorial we're going through 9 major steps to create a glass ball. The main goal of this tutorial is that you get an idea how to approach this. It's not that important to remember all settings, but it's more important that you understand what's exactly happening.
The tutorial is divided into 5 main areas:

Preparing the background and drawing the basic shape (step 1 and 2)
Filling the shape with gradients and layer styles (step 3 to 6)
Adding a highlight (step 7)
Adding a shadow (step 8)
Adding distortions (step 9)
Note: Photoshop tutorial is spread over two pages. Click on 2 (top or bottom) to go to the second page. Click Here

Realistic 3d Photo Effect

2008-02-11T01:26:00.000-08:00

Realistic 3d Photo EffectBy spdfreak_95Published:
This tutorial will quickly show you how to give a photo a 3D realistic touch.
This is an example of what we can do after following this tutorial:

First you need an image. I have chosen the one below.
Now we are going to crop this image to give it a boarder. (But not in the traditional form)Grab the Crop Tool and while holding down both the Shift and Alt keys at the same time, drag one of the corner handles out from the centre until you are happy with the amount of boarder you have obtained. Press enter to confirm your selection............... More Click Here

CSS Property for all TAGs with examples

2008-01-18T09:35:00.000-08:00

A/B
accelerator , azimuth , background , background-attachment , background-color , background-image , background-position , background-position-x , background-position-y , background-repeat , behavior , border , border-bottom , border-bottom-color , border-bottom-style , border-bottom-width , border-collapse , border-color , border-left , border-left-color , border-left-style , border-left-width , border-right , border-right-color , border-right-style , border-right-width , border-spacing , border-style , border-top , border-top-color , border-top-style , border-top-width , border-width , bottom

C
caption-side , clear , clip , color , content , counter-increment , counter-reset , cue , cue-after , cue-before , cursor

D/E
direction , display , elevation , empty-cells

F
filter , float , font , font-family , font-size , font-size-adjust , font-stretch , font-style , font-variant , font-weight

H/I
height , ime-mode , include-source

L
layer-background-color , layer-background-image , layout-flow , layout-grid , layout-grid-char , layout-grid-char-spacing , layout-grid-line layout-grid-mode , layout-grid-type , left , letter-spacing line-break , line-height , list-style , list-style-image , list-style-position , list-style-type

M
margin , margin-bottom , margin-left , margin-right , margin-top , marker-offset , marks , max-height , max-width , min-height , min-width , -moz-binding , -moz-border-radius , -moz-border-radius-topleft , -moz-border-radius-topright , -moz-border-radius-bottomright , -moz-border-radius-bottomleft , -moz-border-top-colors , -moz-border-right-colors , -moz-border-bottom-colors , -moz-border-left-colors , -moz-opacity , -moz-outline , -moz-outline-color , -moz-outline-style , -moz-outline-width , -moz-user-focus , -moz-user-input , -moz-user-modify , -moz-user-select

O
orphans , outline , outline-color , outline-style , outline-width , overflow , overflow-X , overflow-Y

P
padding , padding-bottom , padding-left , padding-right , padding-top , page , page-break-after , page-break-before , page-break-inside , pause , pause-after , pause-before , pitch , pitch-range , play-during , position

Q/R
quotes , -replace , richness , right , ruby-align , ruby-overhang , ruby-position

S
-set-link-source , size , speak , speak-header , speak-numeral , speak-punctuation , speech-rate , stress , scrollbar-arrow-color , scrollbar-base-color , scrollbar-dark-shadow-color , scrollbar-face-color , scrollbar-highlight-color , scrollbar-shadow-color , scrollbar-3d-light-color , scrollbar-track-color

T
table-layout , text-align , text-align-last , text-decoration , text-indent , text-justify , text-overflow , text-shadow , text-transform , text-autospace , text-kashida-space , text-underline-position , top

U/V
unicode-bidi , -use-link-source , vertical-align , visibility , voice-family , volume

W/Z
white-space , widows , width , word-break , word-spacing , word-wrap , writing-mode , z-index , zoom

Color and Effect Management

2007-12-21T09:47:00.000-08:00

Click Here

Creating the effect For our image, we're going to be using the "Hue" Mode because it's the most subtle. It doesn't produce the most vibrant results usually, but it does allow you to match the subject to the overall lighting of your composition. In other words, it looks the most natural. We're going to set the Sampling to "Continuous" because, typically, it's the easiest to work with. We'll set the Limits to "Contiguous" so that we don't accidentally affect our background. My brush size will be set to 150.

3D Ice Cube Design from Photoshop

2007-12-21T09:32:00.000-08:00

Click Here

In this tutorial we'll try to build a realistic 3D ice cube. Usually this kind of stuff is done with the help of some 3D software like Maya or 3DMax, still we'll try to use Photoshop tools to do the work. To make the job easier I searched the Internet and found

this Lightwawe tutorial, and try to emulate it's final result using only Photoshop. To do that we must have a closer look at the way a 3D software works. First the 3d object is build, then a proper illumination environment is build around object, and finally some material texture is attached on the surfaces of the object, with respective illumination rules working on i

Create Your Digital Flower

2007-12-13T09:02:00.000-08:00

Learn how to create a digital flower with this photoshop tutorial
In this photoshop tutorial I will show how to do something like this:

Open a new Photoshop document, mine is 480x480 pixels.Using your Pen Tool create a shape like you see mine below. Click to View Tutorial

Jagged Transition Galler (Flash)

2007-12-13T08:52:00.000-08:00

First of all you'll need to download the FLA containing the images and gallery background. Once you've done that, open it up and go into the gallery MC, where you'll see the background on it's own layer and MC (Movieclip)

Click to View Tutorial

Beautiful Snowy Sky

2007-12-13T08:42:00.000-08:00

Today we are going to design a beautiful snowy sky that can be used for either a nice Christmas header or banner. This is a relatively simple tutorial but it brings out a nice beautiful result. In my belief, any beginner in photoshop can work around the tutorial and achieve the same results.

Lets begin by establishing our working environment in other words a background. You may use mine however its relatively simple to create; all i did was grab the dodge tool and set exposure to 50% and went over the darkish blue color. It creates a nice effect that will help us further in the tutorial. Click Here

Automatically Page Loading

2007-12-04T09:31:00.000-08:00

Automatically load a web page

How can I automatically load another page or reload the same page?
You can do this by using Client-Pull or JavaScript. or you can do this by using Client-Pull or JavaScript.

Here are the instructions for Client-Pull method using "meta tag"

1. Use meta tag in the head tag section of your document.
2. Write HTTP-EQUIV and CONTENT in meta tag to accomplish client-pull.

Click To View Examples:

web pages fit in any resolutions

2007-12-04T09:20:00.000-08:00

Making your web pages fit in any screen resolutions

This page is not organized in the same way as others because we're going to show you how to control page layout and how people make mistakes.

Working with Table:
Making your page fit in any screen resolutions is a must. People will view you page in different kind of screen resolutions. Most people set their screen resolutions at 640x480. That's the reason why you'll see white space on the right of your screen when you're viewing Netscape Search Page with 800x600 resolution or higher. Many commercial sites solve the problem by putting table on the left and set the width at 600 pixel. Doing this, their page will perfectly fit on 640x480 screen. This paragraph is representing what I'm tlaking about.

Here is another choice. Putting your 600 pixels in the middle of the screen. If there are people who have 640x840 viewing your page, it will looks perfectly fit. Anyway, if the group that have 800x600 screen view your page there will be the space on both left and right side. At www.cnet.com they wisely exploit the space on the right by create a background that match precisely in pixels of the table.

Setting table 100% width of windows, your page will looks differently on different machines. If your page is text based, it would be considered less harmful; but if your page need a fixed composition, don't try this.

Tables also give the result of column style.
Long line text could be considered boring.Why don't you try putting your text in column.
Note: You can also use Netscape 3.0 Extension to make your text column-style looks.
To see how to build a table, please visit the TABLE page on this site

Variability in web page displays

2007-11-10T02:14:00.000-08:00

It's easy to make web-pages, but it's very difficult to make good web-pages Web page design is very different from the print media. A page which looks astonishingly beautiful on your computer might be completely messed up on another. In the print media, you are quite sure that whatever you design on the computer will show up on paper. However, the display of the web page is determined by many factors most of which are beyond your control. Here are some things which affect the display of a web page:

The browser

The display of a web page is strongly dependent on the browser on which it is viewed. The situation is made worse if you use browser specific HTML tags or browser specific code JavaScript.

The browser version

A new browser version is released with great fanfare and creates ripples across the web development community. However, not everyone is a web designer... the common man still takes time to adopt new technologies. Now you can either choose to ignore the slow coaches or check if your web pages continue to display correctly in the older browsers.For example, Netscape 4.7 in my opinion was a really painful browser to code for. The percentage of visitors to this web site using that browser has become negligible and so I have preferred to put a good amount of CSS that might not be visible to the users of Netscape 4.7x - hence I have chosen to ignore such visitors (No offence meant, please! If you are still a Netscape 4.7x user, guess it's time for you to change - Take a look at Firefox from Mozilla and you will soon be thanking me.)
The operating system - Platform of the client machine - Windows, Linux (Unix), Macintosh etc.
It was a known fact that even the same version of a browser will render a web page differently across different platforms. However, such issues have now been ironed out, but there is no harm to spend a few minutes on a different platform just to see how your web site looks on that machine.

The screen resultion used by the monitor

A budding web designer usually has the latest computer with a high quality monitor (Aren't we all Gung-ho for the latest gadgets?). These monitors would probably be set at a high screen resolution depth such as 1024x768 or 1280x1024. The designer thus, develops web sites based on such screen resolutions... and this according to me is the most common mistake. Not everyone has high end monitors or even if they do, the chances that the monitors would be set to high screen depths is low because everything on the screen becomes small - especially font sizes. The 800x600 screen resolution is still being used by a good number of web surfers and they cannot be ignored. hence, in my opinion, web sites should be designed based on 800x600 screen resolution.Finally, since we are on the topic of screen resolutions, the best approach would be to employ flexible layouts for web sites - instead of using pixel values to set the width of the main layout table (and the same goes for specifying the width of s used in cascading style sheets), use percentage values. So the width of the web page will adjust depending on the screen resolution. A case in point is this web site!

The color depth of the visitors' monitor

A couple of years back, this was quite an issue and web designers used only web safe colors. However, modern browsers and the monitors they run on are not constrained by displaying only web safe colors. So I don't think your creativity should be kept in check unless you want your web site to look the same for each visitor.

The fonts installed on the client system

This is one of the most common requests I get from clients - We want to use that beautiful scripty font on our site. They fail to realize that only a section of their prospective visitors, if at all, will have the font installed on their systems. This, obviously, depends on the font - for example, you will find the Trebuchet font on most Windows XP systems but then again, it might not be present on majority of Mac, Linux or Unix machines. Do not think that just because you have the font on your system, everyone else will also have it. And expecting your visitor to download and install a font just to view your web site is like wasting time - it's expecting too much out of your visitor. The question you should ask yourself is... will you download and install a font if asked on a web site?

The best bet is to use Browser compatible fonts. This way you can be pretty sure that your web site will appear the same (or almost the same) on different browsers and platforms.

Finally, there is a way to use that "beautiful scripty" font and it's by creating images. Unfortunately, search engines cannot index images and the ALT attributes are not given as much importance in ranking and indexing as good old plain text.

Now that you know the different variables in web site design and development, you will realize that creating a site is not as simple as it seems. As I had mentioned at the start of this article: Good web design is indeed pretty tough. With so many variable governing web site display the only recourse is to understand your audience and test your site on a variety of systems and browsers.

Optimizing web pages

2007-11-03T09:38:00.000-07:00

Optimizing Web Pages: Maximum Page Size

One of the important things to remember when designing web pages is their file size. The size of the page determines how fast it loads on the visitor's browser window. Expecting your visitors to wait till your web page loads is wishful thinking. The browser Back and Close buttons are just a click away.
So what would you like - a visitor that quickly leaves your web site as it's taking your web page ages to load because of all fancy graphics and flash animation or a visitor who will go through the page and maybe a few more on your web site? Put yourself in the visitors shoes, are you ready to wait more than 10 seconds for a web page to load? Obviously, you cannot control the bandwidth used by the visitor but you can surely work on optimizing your web pages so they load quickly - right?

Here we will look at some of the factors that determine web page file size and the maximum file size that you should aim for. The next article discusses on how to actually optimize a web page.