Hosting in Bangladesh | Website Design Bangladesh

Hosting in Bangladesh | Website Design Bangladesh

Techvila is Bangladesh’s Premier Web Hosting and Web Design Company. We Offer Cheap, Affordable and  Reliable Web Hosting and Web Design Service in Bangladesh. Choose Techvila For Quality and Trusted Web Hosting, Because Quality is Our Identity.
 

The dos and don’ts of web navigation

Do

• Use appropriate types of navigation.
• Provide alternate means of accessing information.
• Ensure links stand out.
• Take advantage of link states to provide feedback for users.
• Get the link state order right (link, visited, hover, active).
• Use styled lists for navigation.
• Use CSS and as few images as possible (preferably one) for rollovers.

Don’t

• Add search boxes just for the sake of it.
• Use deprecated body attributes.
• Style navigation links like normal body copy.
• Use image maps unless absolutely necessary.
• Open new windows from links or use pop-ups.
• Use clunky JavaScript for rollovers.

Links and images

Although links are primarily text-based, it’s possible to wrap anchor tags around an image,
thereby turning it into a link:
<a href="a-link.html"><img src="linked-image.gif" width="40"
å height="40" /></a>
Some browsers border linked images with whatever link colors have been stated in CSS (or
the default colors, if no custom ones have been defined), which looks nasty and can displace
other layout elements. Historically, designers have gotten around this by setting the
border attribute within an img element to 0, but this has been deprecated. Therefore, it’s
best to use a CSS contextual selector to define images within links as having no border.
a img {
border: 0;
}
Clearly, this can be overridden for specific links. Alternatively, you could set an “invisible”
border (one that matches the site’s background color) on one or more sides, and then set
its color to that of your standard hover color when the user hovers over the image. This
would then provide visual feedback to the user, confirming that the image is a link.
a img {
border: 0;
border-bottom: 1px solid #ffffff;
}
a:hover img {
border-bottom: 1px solid #f22222;
}
In any case, you must always have usability and accessibility at the back of your mind when
working with image-based links. With regard to usability, is the image’s function obvious?
Plenty of websites use icons instead of straightforward text-based navigation, resulting in
frustrated users if the function of each image isn’t obvious. People don’t want to learn
what each icon is for, and they’ll soon move on to competing sites. With regard toaccessibility, remember that not all browsers can zoom images, and so if an image-based
link has text within it, ensure it’s big enough to read easily. Whenever possible, offer a textbased
alternative to image-based links, and never omit alt and title attributes (discussed
earlier in this chapter). The former can describe the image content and the latter can
describe the link target (i.e., what will happen when the link is clicked).
Therefore, the example from earlier becomes the following:
<a href="a-link.html"><img title="Visit our shop"
å src="linked-image.gif"width="40" height="40"
å alt="Shopping trolley" /></a>

Web Navigation types

Inline navigation: General links within web page content areas
Site navigation: The primary navigation area of a website, commonly referred to as
a navigation bar
Search-based navigation: A search box that enables you to search a site via terms
you input yourself

Inline navigation
Inline navigation used to be the primary way of navigating the Web, which, many moons
ago, largely consisted of technical documentation. Oddly, inline navigation—links within a
web page’s body copy—is less popular than it once was. Perhaps this is due to the increasing
popularity of visually oriented web design tools, leading designers to concentrate more
on visuals than usability. Maybe it’s because designers have collectively forgotten that links
can be made anywhere and not just in navigation bars. In any case, links—inline links in
particular—are the main thing that differentiates the Web from other media, making it
unique. For instance, you can make specific words within a document link directly to
related content. A great example of this is Wikipedia (www.wikipedia.org), the free encyclopedia.

 

Site navigation
Wikipedia showcases navigation types other than inline. To the left, underneath the logo,
is a navigation bar that is present on every page of the site, allowing users to quickly access
each section. This kind of thing is essential for most websites—long gone are the days
when users often expected to have to keep returning to a homepage to navigate to new
content.
As Wikipedia proves, just because you have a global navigation bar, that doesn’t mean you
should skimp on inline navigation. In recent times, I’ve seen a rash of sites that say things
like, “Thank you for visiting our website. If you have any questions, you can contact us byclicking the contact details link on our navigation bar.” Quite frankly, this is bizarre. A better
solution is to say, “Thank you for visiting our website. If you have any questions, please
contact us,” and to turn “contact us” into a link to the contact details page. This might
seem like common sense, but not every web designer thinks in this way.

Search-based navigation
Wikipedia has a search box within its navigation sidebar. It’s said there are two types of
web users: those who eschew search boxes and those who head straight for them. The
thing is, search boxes are not always needed, despite the claims of middle managers the
world over. Indeed, most sites get by with well-structured and coherent navigation.
However, sites sometimes grow very large (typically those that are heavy on information
and that have hundreds or thousands of pages, such as technical repositories, review
archives, or large online stores, such as Amazon and eBay). In such cases, it’s often not feasible
to use standard navigation elements to access information. Attempting to do so leads
to users getting lost trying to navigate a huge navigation tree.
Unlike other types of navigation, search boxes aren’t entirely straightforward to set up,
requiring server-side scripting for their functionality. However, a quick trawl through
a search engine provides many options, including Google Custom Search Engine
(www.google.com/coop/cse/) and Yahoo Search Builder (http://builder.search.yahoo.
com/m/promo).

Backward compatibility with fragment identifiers

In older websites, you may see a slightly different system for accessing content within a
web page, and this largely involves obsolete browsers such as Netscape 4 not understanding
how to deal with links that solely use the id attribute. Instead, you’ll see a fragment
identifier, which is an anchor tag with a name attribute, but no href attribute. For instance,
a fragment identifier for the first answer is as follows:
<p><a id="answer1" name="answer1">Answer 1!</a></p>

The reason for the doubling up, here—using both the name and id attributes, is because
the former is on borrowed time in web specifications, and it should therefore only be used
for backward compatibility.

Internal page links

Along with linking to other documents, it’s possible to link to another point in the same
web page. This is handy for things like a FAQ (frequently asked questions) list, enabling the
visitor to jump directly to an answer and then back to the list of questions; or for top-ofpage
links, enabling a user single-click access to return to the likely location of a page’s
masthead and navigation, if they’ve scrolled to the bottom of a long document.
When linking to other elements on a web page, you start by providing an id value for any
element you want to be able to jump to. To link to that, you use a standard anchor element
(<a>) with an href value equal to that of your defined id value, preceded by a hash
symbol (#).
For a list of questions, you can have something like this:
<ul id="questions">
<li><a href="#answer1">Question one</a></li>
<li><a href="#answer2">Question two</a></li>
<li><a href="#answer3">Question three</a></li>
</ul>
Later on in the document, the first two answers might look like this:
<p id="answer1">The answer to question 1!</p>
<p><a href="#questions">Back to questions</a></p>
<p id="answer2">The answer to question 2!</p>
<p><a href="#questions">Back to questions</a></p>
As you can see, each link’s href value is prefixed by a hash sign. When the link is clicked,
the web page jumps to the element with the relevant id value. Therefore, clicking the
Question one link, which has an href value of #answer1, jumps to the paragraph with the
id value of answer1. Clicking the Back to questions link, which has an id value of
#questions, jumps back to the list, because the unordered list element has an id of
questions.

**NOTE : It’s worth bearing in mind that the page only jumps directly to the linked element if
there’s enough room underneath it. If the target element is at the bottom of the web
page, you’ll see it plus a browser window height of content above.

Creating and styling web page links

With the exception of search boxes, which are forms based on and driven by server-side
scripting, online navigation relies on anchor elements. In its simplest form, an anchor element
looks like this:
<a href="http://www.friendsofed.com/">A link to the friends of ED
å website</a>

The href attribute value is the URL of the destination document, which is often another
web page, but can in fact be any file type (MP3, PDF, JPEG, and so on). If the browser can
display the document type (either directly or via a plug-in), it does so; otherwise, it downloads
the file (or brings up some kind of download prompt).

There are three ways of linking to a file: absolute links, relative links, and root-relative
links. We’ll cover these in the sections that follow, and you’ll see how to create internal
page links, style link states in CSS, and work with links and images. We’ll also discuss
enhanced link accessibility and usability, and link targeting.

Absolute links
The preceding example shows an absolute link, sometimes called a full URL, which is typically
used when linking to external files (i.e., those on other websites). This type of link
provides the entire path to a destination file, including the file transfer protocol, domain
name, any directory names, and the file name itself. A longer example is
<a href="http://www.wireviews.com/lyrics/instar.html">Instar lyrics</a>
In this case, the file transfer protocol is http://, the domain is wireviews.com, the directory
is lyrics, and the file name is instar.html.
If you’re linking to a website’s homepage, you can usually leave off the file name, as in the
earlier link to the friends of ED site, and the server will automatically pick up the default
document—assuming one exists—which can be index.html, default.htm, index.php,
index.asp, or some other name, depending on the server type. However, adding a trailing
slash after the domain is beneficial (such as http://www.wireviews.com/). If no default
document exists, you’ll be returned a directory listing or an error message, depending on
whether the server’s permissions settings enable users to browse directories.

Relative links
A relative link is one that locates a file in relation to the current document. Taking the
Wireviews example, if you were on the instar.html page, located inside the lyrics directory,
and you wanted to link back to the homepage via a relative link, you would use the
following code:
<a href="../index.html">Wireviews homepage</a>

The index.html file name is preceded by ../, which tells the web browser to move up one
directory prior to looking for index.html. Moving in the other direction is done in the
same way as with absolute links: by preceding the file name with the path. Therefore, to
get from the homepage back to the instar.html page, you would write the following:
<a href="lyrics/instar.html">Instar lyrics</a>
In some cases, you need to combine both methods. For instance, this website has HTML
documents in both the lyrics and reviews folders. To get from the instar.html lyrics
page to a review, you have to go up one level, and then down into the relevant directory
to locate the file:
<a href="../reviews/alloy.html">Alloy review</a>

Root-relative links
Root-relative links work in a similar way to absolute links, but from the root of the website.
These links begin with a forward slash, which tells the browser to start the path to the file
from the root of the current website. Therefore, regardless of how many directories deep
you are in the Wireviews website, a root-relative link to the homepage always looks
like this:
<a href="/index.html">Homepage</a>
And a link to the instar.html page within the lyrics directory always looks like this:
<a href="/lyrics/instar.html">Instar lyrics</a>
This type of link therefore ensures you point to the relevant document without your
having to type an absolute link or mess around with relative links, and is, in my opinion,
the safest type of link to use for linking to documents elsewhere on a website. Should a
page be moved from one directory to one higher or lower in the hierarchy, none of the
links (including links to style sheets and script documents) would require changing.
Relative links, on the other hand, would require changing; and although absolute links
wouldn’t require changing, they take up more space and are less modular from a testing
standpoint; if you’re testing a site, you don’t want to be restricted to the domain in
question—you may wish to host the site locally or on a temporary domain online so that
clients can access the work-in-progress creation.
All paths in href attributes must contain forward slashes only. Some software—
notably older releases from Microsoft—creates and permits backward slashes (e.g.,
lyrics\wire\154.html), but this is nonstandard and does not work in non-Microsoft
web browsers.