Gathering and Creating Content, in my opinion, is the most important activity to creating a successful website that people return to visit often, search engines list early in their lists and helps you achieve the goals that you have set for your site. There are many content concerns. Below, I discuss some of the most important:
The words must be chosen wisely. What do I mean by this? You have probably heard about "keywords." Back in the early days of designing, these important words (those that people will search for) were placed in the meta tag -- and still should be -- but for search engines today, these keywords must be placed in your content, early and often. Each page will have important keywords that give that page focus and high search worthiness.
Pick your page titles with care. It is amazing to me that so many websites don't include titles on any or all pages. The title appears at the top of your browser in the blue area. This is another content area that the search engines check out, along with your visitors. Make them snappy and descriptive of the content that appears on that particular page.
Write copy that grabs the attention of the visitor. There was a time when we all said, "Welcome to our site. We hope you enjoy your visit and come back soon. Blah, blah, blah." Most of us who surf the Internet assume we are welcome and don't need to read a lot of useless words. Tell them immediately who the site is for and what its purpose is.
Create copy that is helpful and truly informative. I always try to include copy that is worth keeping, so that visitors will want to print it out and/or bookmark my information pages so they can return easily. If you have a reason for developing a website, you have enough expertise to write material that others want to read and keep.
Keep your content short and to the point, along with being easy to read. Always keep in mind that visitors will be reading a lot of your content on a monitor, and not all monitors are created equal. If they don't print up what you have written, they will lose interest quickly if you overload them with extra wordiness. You will find making use of bold type and bullets can facilitate organized and easy reading.
Be careful with your use of graphics. Don't overdo them, choose them with care, and make sure that they are not so big in size and resolution that they take too long for your visitors to download.
Most of all, be sure to have fun preparing your content. Show your enthusiasm for your website's topics. You don't have to be an experienced writer to make your site a place others enjoy. I also suggest having others you trust read it over and tell you what they like best about what you have created.
Tampilkan postingan dengan label website design. Tampilkan semua postingan
Tampilkan postingan dengan label website design. Tampilkan semua postingan
Senin, 11 Agustus 2008
Kamis, 31 Juli 2008
Your Website Design -- The Elements to Include and Not Include
Whether you are designing your own site or gathering information for a designer, it is a good idea to know the process so you can keep ??on top of?? the project, know some of the pitfalls and understand the ??language.?? In this article I discuss the elements that should appear and should not appear on your pages. Note: Realize that I am voicing my opinion along with opinions that are current in the web development and/or design community. Ultimately, it is your site and you have the right to do it the way you want.
Elements that should appear on every page:
* Navigation tools that make sense. What do I mean by ??make sense??? Have you ever visited a site where the buttons are icons that do not indicate what they stand for (even when you roll over them). Or maybe it is a Flash opening page with no clue about the site or how to enter. If your visitor has a huge amount of time and a curious streak, he or she may investigate, but most visitors will leave with a speedy click.
* Navigation bars that are easy to find and follow. There are many ways to navigate web sites, but there are standard locations for navigation bars that most visitors to your site will check out first. The obvious are across the top and down the left side of the page. By using rollovers and/or fly-out (popup) menus you can provide links to a large number of pages. Note: When planning navigation, you should devise ways that cut down on the number of clicks the visitor needs to make to get where he or she wants to go (three are considered the maximum).
* Complete contact information. Even though you may have a separate page called ??Contact Us?? I feel that having your name, address, phone number and e-mail on every page makes it easy for your visitor to get in touch. It also gives you credibility (you are not hiding where you are located and your phone number).
* Navigation links across the bottom of the page. Another way to facilitate navigation is to have the major links repeated at the bottom of the page, including the link to ??Home?? (lately I have noticed that on many sites the developers make the logo a hot link back to the home page, but a lot of visitors don??t realize it).
Elements that should not appear on any page.
* Banner Ads. Even though Banner Ads a few years ago would garner clicks and possibly make sales, most people are completely turned off today and either leave the site completely or avoid them.
* Continual animation. Back when we were all just starting to surf the Internet, we would have some fun with animated characters and other cutesy graphics that danced and moved. They were something new. Today they can be a huge distraction and bother. If you add an element that moves, don??t have it keep on moving forever. It is like the blinking neon sign outside your motel room -- annoying.
* Pop-ups and pop-unders. I don??t even have to explain these.
* Counters. Before there were effective programs to keep track of your website??s statistics, these counters served to register visitors. The problem is that they are inaccurate (you can start the count at 20,000 if you wish) and they are considered a real sign of being an amateur designer.
Elements that should appear on every page:
* Navigation tools that make sense. What do I mean by ??make sense??? Have you ever visited a site where the buttons are icons that do not indicate what they stand for (even when you roll over them). Or maybe it is a Flash opening page with no clue about the site or how to enter. If your visitor has a huge amount of time and a curious streak, he or she may investigate, but most visitors will leave with a speedy click.
* Navigation bars that are easy to find and follow. There are many ways to navigate web sites, but there are standard locations for navigation bars that most visitors to your site will check out first. The obvious are across the top and down the left side of the page. By using rollovers and/or fly-out (popup) menus you can provide links to a large number of pages. Note: When planning navigation, you should devise ways that cut down on the number of clicks the visitor needs to make to get where he or she wants to go (three are considered the maximum).
* Complete contact information. Even though you may have a separate page called ??Contact Us?? I feel that having your name, address, phone number and e-mail on every page makes it easy for your visitor to get in touch. It also gives you credibility (you are not hiding where you are located and your phone number).
* Navigation links across the bottom of the page. Another way to facilitate navigation is to have the major links repeated at the bottom of the page, including the link to ??Home?? (lately I have noticed that on many sites the developers make the logo a hot link back to the home page, but a lot of visitors don??t realize it).
Elements that should not appear on any page.
* Banner Ads. Even though Banner Ads a few years ago would garner clicks and possibly make sales, most people are completely turned off today and either leave the site completely or avoid them.
* Continual animation. Back when we were all just starting to surf the Internet, we would have some fun with animated characters and other cutesy graphics that danced and moved. They were something new. Today they can be a huge distraction and bother. If you add an element that moves, don??t have it keep on moving forever. It is like the blinking neon sign outside your motel room -- annoying.
* Pop-ups and pop-unders. I don??t even have to explain these.
* Counters. Before there were effective programs to keep track of your website??s statistics, these counters served to register visitors. The problem is that they are inaccurate (you can start the count at 20,000 if you wish) and they are considered a real sign of being an amateur designer.
Kamis, 10 Juli 2008
Your Website Design -- Tips for Using Graphics Without Long Download Times
We take it for granted that visual images will enhance our website. There are factors that will make this statement untrue. However, many of the people who visit your website will be visually oriented and will react positively to your graphics -- that is, if they are used properly.
We have to worry about the file sizes of our graphics. Large files add to the download time of a web page, and this is the most common complaint voiced by those who surf the web. If a page is taking too long to open because of graphics?? sizes, your visitor will just go somewhere else in a hurry.
To avoid large graphic files that result in long download times:
* Prepare images that are reasonably sized (I try to never go beyond 300 pixels in width or height). What if you have a group of stunning photographs from a recent trip, and know that friends and family would like to see the larger photo? Make thumbnails of each, and then post each large, separate photo on its own page, so that if someone wants to view it, they can click on the thumbnail.
* Size and compress your graphics before placing them on the website. Many of the web authoring programs (and even HTML) will allow you to resize an image once it is placed on the web page. It will appear in the browser to be the smaller size, but when it is downloaded, it is still the original, large size and then is resized by the code (thus slowing down the download).
* Specify the actual dimensions of the HEIGHT and WIDTH parameters. Do this for all graphics on the website (even if they are the navigation buttons).
* Avoid background images. Adding a background image can also slow the downloading, and, in most cases (my opinion), detracts from the overall look of the site, making the type difficult to read.
* Use the same graphics over again. Once a graphic is downloaded, it is stored in the visitor??s cache. The next time the image is used it will be pulled from the cache and therefore will load more quickly than the first time. Repeating images (for example, the logo, navigation button, or the same banner) throughout the website, will also add an element of consistency throughout the site.
Just remember size when choosing and using graphics.
We have to worry about the file sizes of our graphics. Large files add to the download time of a web page, and this is the most common complaint voiced by those who surf the web. If a page is taking too long to open because of graphics?? sizes, your visitor will just go somewhere else in a hurry.
To avoid large graphic files that result in long download times:
* Prepare images that are reasonably sized (I try to never go beyond 300 pixels in width or height). What if you have a group of stunning photographs from a recent trip, and know that friends and family would like to see the larger photo? Make thumbnails of each, and then post each large, separate photo on its own page, so that if someone wants to view it, they can click on the thumbnail.
* Size and compress your graphics before placing them on the website. Many of the web authoring programs (and even HTML) will allow you to resize an image once it is placed on the web page. It will appear in the browser to be the smaller size, but when it is downloaded, it is still the original, large size and then is resized by the code (thus slowing down the download).
* Specify the actual dimensions of the HEIGHT and WIDTH parameters. Do this for all graphics on the website (even if they are the navigation buttons).
* Avoid background images. Adding a background image can also slow the downloading, and, in most cases (my opinion), detracts from the overall look of the site, making the type difficult to read.
* Use the same graphics over again. Once a graphic is downloaded, it is stored in the visitor??s cache. The next time the image is used it will be pulled from the cache and therefore will load more quickly than the first time. Repeating images (for example, the logo, navigation button, or the same banner) throughout the website, will also add an element of consistency throughout the site.
Just remember size when choosing and using graphics.
Jumat, 04 Juli 2008
Your Website Strategy Should Be Based on Two Questions
Most website communications strategies can be based on the answers to two questions:
Who is Using the Internet?
According to www.worldinternetstats.com 68% of North Americans are using the Internet (we will focus on North America because we are an English language company). Of these users, 89% of people with an annual household income of more than $75,000 are online and 88% of people with a college education are online. 78% of people aged 18 to 29 are online and 74% of people aged 30 to 49 are online. Users are more or less evenly split between rural and urban and male and female.
These demographics indicate that most sites should use language that appeals to younger and well educated audiences, who probably don??t have a lot of time on their hands. But don't make the language too complex. The reason is in the next section.
How Are They Using the Internet?
According to an article by TJ and Sandar Larkin in ??Communications World??, the publication of the International Association of Business Communicators, the strength of website based communication is the ability to search for and retrieve specific facts and information. The weakness is a low level of comprehension. Information that requires a higher degree of comprehension should be printed on paper. This is because the website user is thinking about where to go next and not about what they are reading.
So it follows that key points should be readily identifiable, key information should be in point form with links to longer documents and that documents that require some comprehension should be available for printing.
Who is Using the Internet?
According to www.worldinternetstats.com 68% of North Americans are using the Internet (we will focus on North America because we are an English language company). Of these users, 89% of people with an annual household income of more than $75,000 are online and 88% of people with a college education are online. 78% of people aged 18 to 29 are online and 74% of people aged 30 to 49 are online. Users are more or less evenly split between rural and urban and male and female.
These demographics indicate that most sites should use language that appeals to younger and well educated audiences, who probably don??t have a lot of time on their hands. But don't make the language too complex. The reason is in the next section.
How Are They Using the Internet?
According to an article by TJ and Sandar Larkin in ??Communications World??, the publication of the International Association of Business Communicators, the strength of website based communication is the ability to search for and retrieve specific facts and information. The weakness is a low level of comprehension. Information that requires a higher degree of comprehension should be printed on paper. This is because the website user is thinking about where to go next and not about what they are reading.
So it follows that key points should be readily identifiable, key information should be in point form with links to longer documents and that documents that require some comprehension should be available for printing.
Minggu, 15 Juni 2008
Web Designing Tips
Easy That??s how you??d like life to be, right? Especially when you??re creating a website on your own. But that doesn??t mean you want the site to look severe and just functional. you want it to be pretty , smart and also respond and move when you interact with it, while saying all that you want to say to its visitors . There are little tips and Features incorporated into software just for people like you.
Love what Flash can do but don??t know how to use it ? Macromedia thought of you and built a feature into Dream weaver that lets you create cool animated Flash buttons just by entering parameters. Want to have button respond to a mouse-over but have no idea or patience to create one with graphics software? You can make a quick and easy mouse-over button right from within FrontPage. What do you do if you need to optimize 150 images within an hour? No need to panic, image ready can help you out with a little droplet. Check out the different tips that make life easier or better for you as a Web designer.
?? Animated Flash Button & Macromedia Dream weaver:
Dream weaver lets you create some custom vector graphics from within the software. You can make Flash and embed them into your Web pages. There are different kinds of style that you can choose for these from the available set-play back type of buttons .Arrow shaped button, shopping cart button And so on, or make some of your own.
Making a smart interactive button is simple in Dream weaver, select insert-interactive Image-Flash Button. Form the window that opens select different button style by looking at the preview image below. Customize the button the way you want it by adding the name of the button, the Font color and font size , then specify the URL that the button has to link to . The button is saved with SWF extension you can preview the button in your browser to see if it looks the way you want.
?? Easy Mouse-Over Buttons :
Mouse-over and Front Page? Oh Yes. The software has quit a few convenient features up its sleeve, one of which is ??Hover buttons.?? Granted, these buttons don??t have snazzy graphics they look like typical button blocks, but they react to mouse-over and you can archive it very simply. Here??s how.
Select Insert ??Web component. in the window that opens , select Dynamic Effect in the component type and select the Hover Button effect on the right . Type in the text that should appear on the button, choose a font for the text, specify the URL to link to on clicking, and select the size and color of the button. In the drop-down menu for Effect, Glow is the default selection. Try it ?? you can select the color of the glow-check the button in preview mode-the button light up when you move your mouse over it. There are several other effects available that are worth checking out, especially the bevels quite neat!
?? Cool Effects With DHTML :
DHTML or Dynamic HTML offers some cool effects that could make your Web pages stand out click? Or your page to load with a transition Effect? DHTML will do this for you along with other little tricks. After you??ve built your Web page, from the menu bar, select Format-Dynamic HTML Effect. A tool bar appears in the work area. Choose an event from the first drop down list. This could be on ??click?? double-click.?? Mouse over or page load. Depending on the event selected here, the next Drop-Down list offers the possible effect that can be achieved , This could be a change in the color and style of the font if it is text, a border added around it , or in case of an image , you can replace the image with another one by a swap .
Most of the effect toggle Meaning if there was a font change on click, another click will change the font back to what it was before. However, some effects are one-time like the disappearing act of an image or button .you select ??fly out?? from the effects list for this . On ??page load?? you could have the selected text drop in word by word, or hop in, spiral in, zoom out, and so on. This is especially useful for advertisements or parts of the page that you want to draw the user??s attention to.
?? Animation In Reverse :
You??ve made an animation using image Ready-may be a tween of position, opacity or effects or a manually placed and manipulated animation backwards? No need to re-tween or manually place the frames backwards; simply click on the little arrow in the animated palette and select Reverse Frames. You can also create a rubber band effect by copying the forward sequence (small arrow > copy Frames), pasting it at the end of sequence (small arrow > Paste Frames > ??Paste after selection ??) and then, by selecting the newly pasted sequence and applying Reverse Frames on this.
?? All It Takes Is A Droplet :
Want to optimize several images with the same settings? Create a ??droplet ??and save time.
Open the optimize palette in Image Ready with your image open. Set the optimization to what you want-file type (JPG, GIF or PNG), quality (low, medium, high), lousiness, dither and so on while previewing the result in the ??optimized?? tab of the main in the Optimize palette. This creates what is called a ??droplet?? that contains your optimization settings. Save this droplet anywhere you want, say on your desktop.
Now drag the folder containing the images to be optimized onto this droplet. All the images in the folder will get optimized the way you specified. This may take a while depending on the number and size of the images in the folder. You can also drop images one at a time onto the droplet.
?? Precise Hot Spots :
Want to link different parts of an image to various URLs? You can do this by slicing the image and assigning links to the relevant slices, but the disadvantage of this is the lack of precision: slice is necessarily rectangular. Also, slices are pieces of the image.
Say you??re working on a Web page for children about the different parts of ancient castles. You would like the parts-dungeons; moat, guard towers, and so on-to have precise rollovers and links so that the information is conveyed correctly. Rather than slices such an images and allot links, use image maps, select the polygon Image Map tool in Image Ready and outline the part you want to talk about precisely . Even circular image maps work fairly well in some areas. You can adjust points of the map edge after finishing the shape, too .in the image map palette, you can specify the URL to link to along with ALT text. To preview your work, save Optimized as a HTML file and check it in a browser.
?? Optimize Your Web Graphics Easily :
Despite the cable Internet connections and high-speed modems, Web graphics are still limited speed-wise. The sites that load fastest and work most efficient have well-optimized graphics .GIF images are generally good for line drawings and illustrations while JPG ones are best suited for photographs. Besides file format, there are various factor that affect the optimized image like the ??lousiness??-the amount of data in the image that you??re willing to sacrifice for smaller file size-the number of colors you need minimum, whether you can have dithering or not, so on .
In Photoshop, to try out different optimization settings, click Save for Web . A window opens up showing the current image along with various options and menus on the right . in the image window itself, you can see two tabs: 2-up tab to see two versions-the original and the optimized-for comparison along with time needed to load the image according to various modem speeds . The 4-upshows you 3 versions against the original. These previews are useful and convenient, rather than having to manually save the image repeatedly in different ways and comparing each of them.
?? Making A Banner Ad:
We??re all familiar with banner ads that we see all over the Web: a strip with an image and text that changes into another and another conveying some information. Clicking on this ad takes you to the site that the company is advertising for. You don??t have to use GIF Builder or any other graphics software to animate such an ad. You can make it easily using Front Page. Select Insert-Web component-banner ad manger. In the window that opens, specify the size of the ad, the transition effect, the number of seconds to display each image, the URL to link the ad to and add the images you??ve prepared. That??s it.
This feature could also be used you want to share a few photographs coiled also be used when you want to share a few photographs or images but don??t want the images to be save-able on the cline??s side; right-click will not work on these images. Although the images may be found in the cache, at least they won??t be able to be copied directly.
About The Author
Pawan Bangar,
Technical Director,
Birbals, (Hbirbals,Seobirbals,Ebirbals,Ibirbals)
#1047,Sector 42-b,
Chandigarh.
Cell:+91-98153-52253
email:
Senin, 09 Juni 2008
Web Graphics - Vector vs. Bitmap
Trying to figure out the world of graphics can get confusing. Knowing what to use and when to use it can give anyone a headache. However, the building block of all graphic images rests on the shoulders of the Vector vs. Bitmap image. Once you know the difference between these two categories, you??ll be on your way to understanding all about graphics.
Graphic images basically fall into two categories: vector images and bitmap images. (Vector vs. Bitmap) If you??re going to be designing for the web or print, it??s necessary to know the difference between vector and bitmap. Otherwise, you may end up wasting precious time creating files and saving them into formats that you won??t be able to use. Here??s a crash course to get you going.
Vector images and bitmap images are composed of different elements. Vector images are composed of lines and curves. When viewed up close, the lines appear smooth and fluid. Vector images look great in printed form. In fact, most printed graphics that aren??t photographs are vector images. Vector images retain their clarity and crispness no matter how often they??re resized.
On the other hand, bitmap images are composed of pixels. Viewing a bitmap up close reveals hundreds of little jagged squares. Bitmap images are basically only good for web graphics because they don??t print clearly. The jagged pixel edges make images appear fuzzy and blurry.
File formats
There are hundreds of graphics file formats, and some are more popular than others. The choices can be overwhelming if you??re not familiar with image file formats. As stated above, graphics are either Vector of Bitmap. Below is a list of file formats that fall under those two headings:
?? Vector file formats
o EPS
o AI
o WMF
?? Bitmap file formats
o BMP
o TIFF
o JPEG
o GIF
All graphic design programs have ??native formats??. The native format is what files are saved as in their raw form. For example, Photoshop??s native format is PSD; Illustrator??s native format is AI. You should always save a copy of your image in your program??s native format. This enables you to edit the image at a later date. Once the image is saved as a TIFF, JPG, BMP, or GIF, it can no longer be edited.
Currently, the only formats that can be viewed on the web are the two bitmap files GIF and JPEG. Considering the limitations of bitmaps, the format is hardly ever used outside of website images. If you??re working with vector images to be printed, be careful when saving an EPS. EPS files only print clearly when printed using a PostScript printer. They can be printed to non-PostScript printers, but the resolution will be low.
Whew??that??s a lot to comprehend, and there??s more. In fact, there are books on the subject. If you??re new to design, don??t try to learn everything at once. Just take it slow and learn all you can about the subject. You??ll be creating great graphics before you know it.
Langganan:
Postingan (Atom)
Postingan
