|
Basic Web
Development Tips
Browser Compatibility -
Make sure your site is browser compatible. Your
web site should look good in Netscape as well as
in Internet Explorer. Don't stop designing your
site as soon as you find that it looks great on
Internet Explorer. Usually Netscape will display
your site differently than in Internet Explorer,
especially when you are using complicating
tables. Test it also in various versions of both
browsers. Testing it in one browser in a single
version is not enough because you have users who
choose not to upgrade their browsers.
Check for broken links -
A dead giveaway for a non-professional website
is broken links. Always check for broken links
anytime you make changes to your site. Clicking
every link on your site and navigating the
structure just as your visitors would is
recommended. If you have a large site and the
manual method would be too time-consuming, then
some helpful tools for checking broken are Net
Mechanic or Dreamweaver.
Design your website for all Resolutions -
There are computers with all kinds of resolution
available and there is not one-type of monitor
resolution that your visitors will use.
Resolutions range from 640 x 480 to 1024 x 768
and higher. The recommendation is to design your
site for all these resolutions. The easiest way
to accommodate every resolution is to design
your site in terms of percentage and not pixels.
Also, test it under the various resolutions in
all types of computers including Macintosh users
and Windows computers at the library and at all
other institutions.
Examine your site's source code -
You should examine your source code and ensure
that your primary keywords or phrases will be
spidered first. When search engine spiders read
your pages, they read the source code from left
to right - top to bottom. Search engines place
higher relevancy on keywords and phrases which
appear closer to the top of a page. You may be
able to achieve higher rankings by adjusting
your layout and placing a well written search
engine optimized paragraph at the top of your
page. Also, use various standards website such
as WC3 to examine the source code to ensure that
it meets various levels of standards set by the
standards of html institution.
Easy to Navigate -
Once a visitor has come to your site, you need
to help them to easily navigate the pages. Make
sure all your important links are at places that
are easy to find, preferably right on top. This
is where most visitors will look. Also, avoid
having too many colors on the webpage. The
problem with excessive colors is that it
distracts the user from the main purpose of the
main webpage.
Fast Loading pages -
The most important factor to remember when
designing your website is to be sure that the
pages load quickly.
A beautiful website that loads slowly will have
few repeat visitors. The goal for any web
designer should be to have the page you are
working on load in 15 seconds. Remember, you
might have a great design but very few people
are going to see it if it takes a long time to
load. Try testing your website on a modem, DSL
line, T1 or T3, but you must assume that
everybody has a modem. Most newbies online are
usually
Readable and professional looking fonts -
Don't use all CAPS, bright colors such as bright
pink or green, or unusual fonts. Remember,
sometimes "less is more". When visiting a site
you can tell if it is a professional website
just by looking at the fonts that are used.
Don't use Comic Sans and other unusual fonts
that may not be available on most computers
(which will cause the computer to load a default
font - not attractive). Try to stay with common
and professional web fonts. The fonts that are
most commonly recommended are Arial and Verdana.
Use of white space -
Keep your website design simple. Try not to
clutter the pages with too many flashing
graphics and colorful fonts. It is tiresome on
the eye to try and read a page that has too much
going on. Use white space to convey a "clean"
sense on your pages. White space also is good
for users who are using a lower resolution
browser because they don’t have to scroll to
view the information.
Before
you can develop a strategy for addressing
various browser capabilities, it is useful to
have a general knowledge of the browsers that
are out there. While web browsing clients are
increasingly being built into small-display
devices such as PDAs, telephones, and even car
dashboards, this chapter focuses on the
traditional graphical computer-based browsers
that developers generally keep in mind.
The browser market is
dominated by two major browsers: Microsoft
Internet Explorer and Netscape Navigator. As of
this writing, Internet Explorer is in Version
5.5 for Windows (5.0 for Macintosh) and the
Navigator browser is one component of Netscape 6
(they did not release a Version 5). Together,
the "Big Two," including their collective past
versions, account for over 95% of browser use
today.
Since 1994, these two contenders have battled it
out for market dominance. Their early struggle
to be cooler than the next guy has resulted in a
collection of proprietary HTML tags and
incompatible implementations of new technologies
(JavaScript, Cascading Style Sheets, and most
notoriously Dynamic HTML). On the positive side,
the competition between Netscape and Microsoft
has also led to the rapid advancement of the
medium as a whole.
Netscape publishes information for developers at
Netscape.Information
about the Netscape 6 release can be found at
http://home.netscape.com/browsers/6/index.html.
For information on designing for Internet
Explorer, visit Microsoft's Internet Explorer
Developer Center (part of its MSDN Online
developer's network) at
http://msdn.microsoft.com/ie/default.asp.
Additional information is available on the
Microsoft product pages at
http://www.microsoft.com/windows/ie/ (for
Windows) and
http://www.microsoft.com/mac/products/ie/
(for Macintosh).
Although Netscape's browsing component is still
officially called Navigator, Netscape seems to
be downplaying "Navigator" and promoting its
latest product release simply as Netscape 6.
Because this is the title that has stuck with
the industry, this book refers to "Netscape 6,"
but uses "Navigator" for previous releases.
Most web authors base their designs on the
functionality of Navigator and Internet Explorer
on Windows systems, since they claim the lion's
share of the market; however, there are a number
of other browsers you may choose to take into
consideration.
For better or worse, Internet Explorer releases
for the Macintosh platform have varied in
functionality from their Windows counterparts.
Web usage statistics indicate that Mac users
account for just 2-3% of global web traffic, but
if your site has Mac-targeted content, keep the
following browser differences in mind.
IE
5.0 for the Mac (the current version as of this
writing) was the first browser on any platform
to be almost fully standards-compliant, thanks
to its specially developed Tasman rendering
engine . In general, you can treat Mac IE5.0
like Windows IE5.5 or Netscape 6.
The Macintosh version of IE4.0 lacks significant
functionality found in its Windows sibling. This
Mac version has no embedded font support, no
support for CSS filters and transitions (such as
drop shadow effects), and a very problematic
DHTML implementation. Some of these issues were
addressed in Version 4.5 (the first Mac version
that significantly deviated from the Windows
version). As a general guideline, treat Mac
IE4.0 and 4.5 like Navigator 3.0.
America Online
America Online subscribers
use a variety of Internet Explorer browsers,
ranging from Version 2 to 5.5 (the most current
as of this writing). The browser version number
is not necessarily tied to the AOL release, as
noted in this excerpt from AOL's developer site:
Beginning with Windows AOL 3.0 (32-bit), theAOL
client does not have a browser embedded, but
instead uses the Internet Explorer browser the
user already has installed within their system.
On the Mac and 16-bit Windows clients, theAOL
client containsvarious versions of Internet
Explorer embedded directly within the client,
andindependent of the versionof Internet
Explorer installed outside AOL in the system.
Therefore, browser compatibility is mostly
independent ofany specific AOL version.
As
of this writing, approximately 80% of AOL users
view the Web on Windows machines using Internet
Explorer 5.0 or higher. While this is
encouraging news, the reality is that Internet
Explorer's functionality is limited somewhat
when used in conjunction with the AOL client.
This is due to the way the specific AOL clients
interact with the browser and AOL's reliance on
proxy servers and image compression techniques.
Many web designers have been horrified to see
their site design (which works perfectly in all
the major browsers) once it's been run through
the AOL system.
Fortunately, AOL publishes a site specifically
for web developers who want their sites to be
accessible and attractive to AOL users. Of
particular use is the browser chart, which
provides a specific listing of each of its
browsers (by release and platform), the
technologies and features supported, and a
breakdown in percentage of users for each
browser. It also provides a style guide for
optimizing web pages for its newly released
AOLTV set-top browsing device.
AOL's web developer site can be found at
http://webmaster.info.aol.com.
WebTV was the first to bring web surfing to the
living room with a set-top box, an ordinary
television, and a remote control (an optional
keyboard is also available). WebTV uses its own
specialized browser for viewing web pages.
The WebTV browser supports HTML 3.2 (plus a few
4.0 tags and handful of WebTV proprietary tags),
graphics, tables, frames (with some problematic
behavior), forms, cookies, JavaScript 1.2, a
subset of the CSS1 Style Sheets specification, a
wide variety of audio and video formats, and
Flash 3. The browser does not support Java, PDF
files, or streaming Flash formats.
Because WebTV displays web pages on televisions,
it introduces new concerns regarding color and
screen size.
WebTV publishes a developers' resource where you
can find specific information regarding
developing sites for WebTV
It includes information on HTML and various web
technology support.
You may also choose to download their free tool
called WebTV Viewer (available for both Windows
and Mac, although the Windows version is more up
to date as of this writing). WebTV Viewer shows
how your web page will look and perform on
WebTV, right from the comfort of your own
computer. .
Opera, in Version 5.0 as of this writing, is a
lean and mean little browser created by Opera
Software in
Oslo, Norway. It is currently available for
Windows and Linux platforms, although the Opera
5 for Mac beta version was released in mid-2001.
Opera is free if you don't mind ad banners as
part of the interface. To register the browser
and get rid of the ads, the price is $39.
Opera boasts extremely quick download times and
a small minimum disk requirement (around 2 MB,
compared to IE's 24 MB download). Opera is
respected for its exact compliance with HTML
standards. Sloppy tagging that gets by the
larger browsers (such as missing closing tags,
improper nesting, etc.) does not render
correctly in Opera.
Opera 5.0 supports Java, HTML 4.01, Cascading
Style Sheets (CSS1 and the vast majority of
CSS2), JavaScript, and DHTML. While it does
accept plug-ins, the word on the street is that
they are somewhat difficult to install.
The general public is not likely to flock to
Opera, and it never so much as blips in the
browser statistic charts; however, many
designers continue to test their sites in Opera
to make sure their code is clean.
For more information about Opera, see
http://www.opera.com.
Last, but not least, is Lynx, a freely
distributed, text-only browser that offers fast,
no-nonsense access to the Web. It stands proud
as the lowest common denominator standard
against which web pages can be tested for basic
functionality. Lynx may be a simple browser, but
it is not stuck in the past. Lynx is constantly
being improved and updated to include support
for tables, forms, even JavaScript. People do
use Lynx, so don't be surprised if a client
demands a Lynx-compliant site design. Lynx is
also important to users with disabilities who
browse with Lynx and a speech or braille device.
The Extremely Lynx page is a good starting point
for finding developer information for Lynx. You
can find it at
http://www.trill-home.com/lynx.html.
|
