|
|
|
Designers You Should Know This
eb Design Best Practices cross-browser compatibility has
for SEO never been greater. Here are the
basic cross compatibility rules
I have written this document to that must be followed:
help reduce the amount of issues
we have recently come across. It • Avoid using
is important to address issues browser-specific tags.
like load time, cross browser
compatibility, and other • Check your design with
technical design issues. the latest versions of all major
browsers as well as one or two
The following Best Practices have previous versions.
been developed in order for us to
maintain our reputation for • Use Style Sheets, XML
producing quality web sites, and preferred, in order to assure a
reduce technical problems. Please more compatible design across
follow them and contact me if you multiple browsers.
have any questions.
• View the site design with
You can no longer assume that images turned “off” so you can
every web visitor is using the see how your site will appear to
latest version of Microsoft people who use text-based
Internet Explorer. In fact, you browsers and automated screen
can’t even assume that someone is readers like those used by the
using IE at all. Consider all of visually impaired.
the various versions of browsers
in use, and the fact that more • Take advantage of the
and more people are turning to ‘ALT Text’ tag so visitors who
Firefox as well as MAC operating choose to surf with graphics off,
systems. The need to design for or cannot see graphics for any
other reason, know what each $-_.+!*'() plus any spaces.
image is supposed to represent.
• Case Sensitivity
• Design Element
Considerations although a server issue and not a
browser one, most server software
In addition to the general is case sensitive. Always create
guidelines discussed in the links using file names that match
previous section, it is important the case of the actual file that
that special attention be paid to is being accessed. That way, even
each of these essential design if the target server is not case
elements: sensitive, no maintenance will be
required should the site be
• Special Encoding transferred to one that is.
Requirements
• Color Issues
There are a number of special
characters that cannot be used in every monitor and color card
a linked URL without being displays colors differently. You
specially encoded in HEX can never assume that the shade
characters. Although some of blue you are seeing will match
browsers will automatically the shade of blue that a visitor
compensate for improperly coded sees. In addition, not all
characters, many will not. browsers are capable of handling
the text definition for a color.
A good rule of thumb is to encode Use the HEX color definition
any character that is not codes instead of the
alphanumeric. The following corresponding words.
characters MUST be encoded:
Avoid using the FONT color tag.
Not only is this tag depreciated process.
in current Web standards, but
many users with color blindness, PNG is an acceptable substitute
or those with other visual for GIF. Other formats, including
problems, set their own default PICT, BMP and XBM are not widely
colors which they will not supported yet.
appreciate being overwritten by
your choices. • Fast Page Loading
Considerations
When specifying colors for any
design element, put the tags into Specifying the WIDTH and HEIGHT
your CSS file rather than in the attribute for every graphic file
HTML directly. allows the page to load faster
because the browser can reserve
Use only “Web Safe” colors that space for the slower loading
can be seen by anyone whose graphic files while it continues
monitor and video card supports to render the textual portions of
only the basic 256 color cube. the page. Slice large images to
speed up loading time.
• Graphic Design
Considerations • Screen Size
Considerations
In order to assure compatibility
across all graphic-enabled Never design a site with specific
browsers, use only GIF, JPEG and page height and width hard coded.
PNG formats. . Keep in mind that Users with older monitors and
some browsers are eliminating video cards will not be able to
support for GIF files due to easily view certain screen sizes,
patent issues affecting the and other users have to stay
underlying LZW compression within specific screen size
settings due to default font size turned cookie acceptance off on
or other reasons. Screen sizes their browsers. IE ships with a
are also limited by people who highly-restrictive cookie
use WEB-TV and similar services acceptance policy as its default.
or who surf the web using
handheld devices. Instead of Consider avoiding cookie use
defining absolute pixel sizes, altogether and never require the
use percentage settings whenever acceptance of cookies in order to
possible. view any portion of a web site.
If cookies are being contemplated
• Cascading Style Sheets to track login status, consider
using SESSION ID’s or other
Cascading style sheets provide a appropriate cookie alternatives.
greater degree of control over
site design by keeping layout and If you do use SESSION tracking,
content separate. A well-designed NEVER hard code a SESSION ID into
CSS also speeds up site loading any link. Doing so can compromise
time. Visit this site for an the site’s security or the
in-depth look at how to construct security of an individual user.
and use a CSS properly. The most common way that SESSION
IDs get encoded into links
Current best practices dictate accidentally is when the
that the use of the TABLE tags developer copies and pastes a
are replaced with CSS table link from their own browser that
substitutes. is already displaying a SESSION
ID.
• Cookies
• JavaScript Considerations
Although the concern is generally
unwarranted, many people have JavaScript is not supported by
all browsers and those that do Keep in mind that these best
support JavaScript often practices represent the minimum
implement that support quality standards that we want to
differently. Many current code to. Remember, when in doubt;
browsers block JavaScript and choose what’s best for the user
require the user to click on a who is visiting the site with the
warning dialog box in order to lowest level of available
allow JavaScript to execute. This technology.
warning box intimidates many
users. A great number of users
turn JavaScript support off completely. type="text/javascript">
About the Author:
Arizona SEO Company
|
|
