Web Design
Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.
To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.
As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:
Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.
When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.
Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.
I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.
Navigation Element Locations
Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.
Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.
Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.
Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.
Important Navigation Elements
Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.
Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.
Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.
Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.
Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form
Miami Web Design
We all want to have the most attractive website that leaves a visitor wide-eyed and completely dazzled. Usually an extremely attractive website design involves lots of graphical elements, increasing the overall page size which causes the page to download slowly to the browser. This article will provide some useful tips on how to keep your website design attractive but still downloads quickly.
As the average internet bandwidth rate per computer is raising, more and more webmasters allow themselves to develop complex websites laden with heavy graphic elements. In extreme cases you can find websites that take as much as a few minutes to load their content in your browser. Of course the user will never wait that long for a website to load, and will move on to the next website in his search results.
So why are webmasters still developing slow loading bloated websies? Primarily due to a lack of knowledge of simple graphic optimization techniques that will allow them to maintain an attractive website while keeping the page size smaller.
How many of you are aware of the fact that a box with rounded corners can be achieved using CSS code only, without the need for any graphic image. Well it is possible! Before those of you familiar with CSS say that it cannot be done for every type of browser and a relatively high level of programming is required, I say that dealing with the most common mistakes web designers make regarding optimization can have simple solutions.
Never limit the web designer by placing any restrictions that impact the final outcome. You might make the claim that what a web designer can do with graphic software is impossible to implement by code. I disagree. When the design is finished and you are ready to slice it into small images to be used in the html code, your creativity is been tested. Everything you do at this stage will affect the total page size. If your design contains rounded shapes that overlap each other or areas with color gradients, then you must slice it carefully so the outcome is a small file size.
Let’s look at what efficient slicing means:
1. Do not make large slices that contain lots of different colors. Use a small number of slices where each slice contains a limited number of colors.
2. Do not make a large slice that contains the same graphic structure. Slice a small portion of it and duplicate it in your code. This is a very common mistake that webmasters/programmers make when dealing with gradient color background.
3. Do not use JPEG file format all the time. In some cases a GIF format will be much smaller in size. A rule of thumb – a slice with high number of colors will be smaller in size using the JPEG format rather than the GIF format, and the opposite is also true. Check each option separately. Every 1KB that you reduce from the image file size will eventually add up to a significant reduction in page size.
4. If you have text on a solid color background, do not slice it at all. Use code to create the background instead. Remember that you can define both the font style and background color of the area using CSS.
Read more about Aston Weber Group:
Miami Web Design, Web Design, Web Design, Miami Web Design
Niciun comentariu:
Trimiteți un comentariu