Friday, May 14, 2010

Effective Web Navigation

View Source
If people cannot navigate by way of your internet site, they will easily leave. Thus, designing effective navigation on your own Site is essential. But you can find some basic issues you must do previous to you'll be able to start off worrying about rollovers or hyperlinks, photos or flash.
Information Architecture

Previous to you are able to even start out to program your navigation, you should define your site's info architecture. Information architecture may be the taxonomy or framework of this Website.

Some common taxonomy aspects over a corporate or business Net web page are:

* Merchandise - the goods or services the company sells
* About - info concerning the firm
* Investor Relations - facts unique to investors
* Help - guide for customers

Some popular taxonomy essentials on a personalized Net web page are:

* About Me - info about the page creator
* Favorite Links - back links that the author likes
* Close friends and Loved ones - info concerning the author's pals and loved ones

Group

As soon as you've determined your site architecture, you should make a decision tips on how to organize it. You could possibly have it all reside in one directory, and just website link on the key pages from your front page. Or you may possibly have every one of the sub-pages separated into directories.

When considering about your corporation, you ought to consider how your prospects may possibly wander via it. Flow charts and storyboards can assist you to map out exactly how you'd probably like to encourage your viewers make use of the internet site. You may well want to map out various paths for your visitors to utilize.
Navigation Design

The moment you could have an idea on the architecture and corporation, you are ready to consider the pattern on the navigation. There are several things you must look at in deciding on your navigation pattern:

1. Accessible
The navigation of your site is possibly probably the most significant aspect of any offered web site. So it really should be as available as you'll be able to make it. This suggests avoiding particular effects like Flash, Java, or JavaScript as your only navigation approach.
2. Meaningful
Maintain your navigation meaningful. Make the back links clear - do not attempt to get cute or use terms that happen to be internal in your organization. Someone who has by no means been to your website before ought to know quickly in which the hyperlink will take them.
3. Understandable
If you desire to use illustrations or photos for ones navigation, make positive that there's some text related with them. " Mystery Meat Navigation" may be the use of non-descriptive pictures as navigation, and it's significantly additional frequent than you may well believe.
4. Prevalent
Your navigation need to appear on each web page of your site. Even though you will not need to have identical navigation, the fundamental framework should be the identical throughout the site, with changes applied only to indicate place inside the hierarchy.

After you've created your navigation, then you possibly can begin to work with it. Retain in mind that it really is truly tempting to alter your navigation structure although you are inside middle of implementing it. But if you make a decision to try and do this, be certain that you are making the adjust globally and that it fits with the original goals of one's taxonomy and info architecture. My recommendation is usually to implement the original design and wait a week or two. If at that point you still need to transform it, plus the change will function, then go for it. You could possibly just come across that your planning and preparation have been ultimately correct and not change it in any way.

Thursday, May 13, 2010

Differences Between Dreamweaver 8 and Dreamweaver CS3

So, you've got Dreamweaver 8 and you're not positive if you would like to shell out the $$$ to upgrade to Dreamweaver CS3. This may be a challenging decision. Now that Adobe has acquired Dreamweaver, have they ruined it? Or is it so very much much better that you simply will kick yourself which you didn't upgrade earlier? Or some thing in concerning? My opinion: somewhere in between.
Adobe Acquired Dreamweaver

No, this isn't news, but for many World-wide-web designers, this is usually a important motive to buy Dreamweaver CS3. This may be the first version of Dreamweaver to come out using a complete integration involving Dreamweaver and Adobe graphics resources like Photoshop. Now when you could have an image as part of your document, you are able to click on it and edit it proper in Photoshop quickly and simply.
Greater CSS Service

One from the coolest new functions in Dreamweaver CS3 will be the addition of greater CSS layouts. They may be properly commented in the code, so it's effortless to commence understanding how CSS layouts function. Plus they've more than 32 layouts to opt for from in fixed and liquid designs and 1-, 2-, or 3-column formats. You are able to also define in which you want the CSS (inside the head, in an external file, or in an current file) proper although you are developing the new page.

I also actually like how effortless it really is to move CSS styles around. When I'm testing a design, I generally begin out by styling the exact tag right from the HTML in a very style attribute. But this isn't scalable, so after I get the fashion functioning I have to move that rule into my fashion sheet. With Dreamweaver CS3, all I do is right-click around the tag inside inspector and decide on "Convert Inline CSS to Rule". Dreamweaver will create a custom class for that style rule or fashion all of those tags or create a total CSS selector according to the position of the element from the document tree.
Mobile Service

Making pages for mobile devices is turning into much more and far more common, but it may be quite tough to design pages that display nicely on both a standard Web browser plus a cell phone. When using the integration of Adobe System Central, Dreamweaver makes it uncomplicated to preview your pages in various cell phone emulations. My only problem is that it didn't have my cellular phone (a PalmOne Smartphone), but I suppose I can continue to test on that browser manually.
Implement Ajax on Your Site

Dreamweaver CS3 contains the Spry framework for making it really uncomplicated to add Ajax widgets and effects to your World-wide-web pages. It is just a matter of dragging and dropping and incorporating your dataset. Spry elements include things like: widgets for lists, tables, tabs, and forms; consequences for making transitions like shrinking, growing, fading, and highlighting; incorporating info from an XML feed for instance RSS or database.
XSLT Help with XML as Data Sources

Dreamweaver now has extensive help for XSLT applying XML files as information sources. It is possible to view the XML in the tree form, after which connect it for a HTML document with XSLT. This suggests that if you could have a lot of XML files in the very same format, you possibly can develop a template for them in Dreamweaver using XSLT.
Far better Help for Macintosh Intel Processors

If you're on an Intel-based Macintosh you'll be very pleased using the overall performance improvements of Dreamweaver CS3. Since it truly is now native towards the platform, as opposed to running on Rosetta, it loads more swiftly and uncomplicated actions like typing with your text seem to respond more rapidly. According for the MacWorld tests, "updating a template in Dreamweaver CS3 on our 2.66GHz dual-core Xeon Mac Pro took just under a minute, as opposed to virtually four minutes in Dreamweaver 8." I haven't performed particular testing, but it really does feel more rapidly.
Should You Upgrade

We have upgraded and I have not looked back. I really appreciate the new CSS capabilities and Device Central. I have not applied the Spry framework, but with all the far better help of XSLT I is going to be testing that out soon. The biggest missing piece is a thing that most Online editors don't do perfectly: design-time programming. Dreamweaver CS3 is nevertheless just as difficult to make use of reside databases and server-side scripts as it ever was. However, you will find extensions obtainable that will guide you out - look at the Dreamweaver Exchange.


View Article Source

Did You Know? - All Web Graphics are Square

View Original Content
Net pages are pretty much usually made with Net artwork. But in case you do not recognize some simple principles about World-wide-web graphics, you won't be ready to produce wonderful World wide web pages.
World wide web Graphics are Rectangular

The very first, and most standard principle to understand about World wide web pictures is always that they are square, or rectangular. The very best way to see that is by considering a World-wide-web graphic in the artwork computer software program. Pick a graphic that doesn't search square, for instance, the "Go" icon on the major of this page (up coming on the search box). It seems round, doesn't it? But it's not, it is rectangular. Test downloading it (correct click, "Save Picture As...") and opening it in Photoshop, Freehand, or Paint Shop Pro. The picture inside image is round(ish), but the actual graphic is square.

All World-wide-web pictures are square as a consequence of the nature from the World wide web. The Net is displayed on personal computers. Personal computers exhibit pictures as thousands of small dots. But even individuals dots are not circular, they as well are square.
Pixels in Web Artwork

As I mentioned above, all World wide web photo files are created up up thousands of very small dots, called pixels. Each and every pixel is usually a small small rectangular that is colored to form the basis on the impression. There is certainly a comparable system in painting, known as pointillism produced by Georges Seurat. The issue about computer system pointillism is always that pixels are square. This forces the shape with the final image to get rectangular.

But when the basic unit of the Internet graphic is square, then how are we able to generate pictures that have round or curved elements, and appear to own round edges? This is accomplished with two methods: anti-aliasing and transparency.
Anti-Aliasing

As I mention in one more article, anti-aliasing performs as a consequence of the way human brains interpret what we see. This approach for generating curved World wide web graphics appears at every pixel on the curve, and changes the saturation of shade depending upon how much from the curve is element of that pixel. So, in the event the curve requires up half with the pixel, that pixel is 50% saturated using the coloration on the curve. Our brains then convert this blurring into a crisp looking curve. It is possible to see this by considering the graphic saying "Jennifer" up above. The leading line is anti-aliased, the bottom isn't. Observe how the curved letters search additional jagged on the bottom line.

You are able to develop anti-aliasing yourself by blurring the edges of the curves, but most Web pictures programs will automatically anti-alias curves for you personally, unless you transform the choices to specify that you desire jagged edges.
Transparency

After you've a curve inside your impression, you are going to would like to have it appear to get the edge in the photograph. You will discover basically two methods to accomplish this:

1. Use the exact same foundation colour for the Net web page and your picture.
That is most frequent when making use of black or white backgrounds, as most monitors are steady in how they screen these colors.

2. Use a essential history coloring for your personal image, and conserve the graphic being a GIF with that shade marked as transparent.
This tells the Internet browser to display that Net graphic with 1 coloring not showing. Any colour below the graphic will then show as a result of.

It is possible to develop transparent pictures with any World-wide-web images software program package. One issue to bear in mind is always that transparency is done on 1 coloring of your ımages. So if you are trying to build a curved edge with anti-aliasing, you must generate the curve on a foundation shade palette the similar (or close) to what your backdrop is going to be on your Internet site. This will insure that the anti-aliasing won't build a halo around your picture.

Now go out and have fun producing some round rectangular Web images!

Designing a War - Getting Attention With Your Site Design

View Source
When designing a Internet web site, there are quite a few methods to attract awareness to essential situations or items. One of the most common way is usually to adjust the font dimension with the headline. As an example, in the course of the U.S. war in Iraq, CNN.com changed their banner headline from font-size: 20px to font-size: 48px - greater than doubling it.

You can see that within the two screen shots of CNN - the first is from December 2002, along with the largest headline reads: "Iraq promises report Dec. 7". This is prepared in 20px kind perfect beneath the photo. The second display shot is from CNN in March 2003. The banner headline reads "CLASHES INTENSIFY". It is written in 48px type in the top in the web site. Even the second headline (which will not entirely show within the screen shot), is in font-size: 28px, one more 8px bigger than their normal headline from December.

Employing Typography to have Attention
Applying modifications in font sizes for getting consideration is nothing new. But prior to you go out and make your headlines 48px or more substantial, you ought to stick to one or two easy guidelines:

1. Is this really that critical?
If you're announcing a 30% away shoe sale, it may well be significant to some folks but making the font unbearably large will just turn most people away.
2. What's the common font sizing on your page?
Should you type everything at 20pt, then developing a 30pt headline will not glimpse that a lot unique. But a 16pt headline subsequent to 8pt text might appear enormous.
3. Do you have standards for what font degree to make use of?
You should determine ahead of time what varieties of functions will trigger an improve in headline dimensions. After you possess a plan, then even if your marketing director comes in begging to announce his shoe sale at 56pt type, you'll employ a typical degree for that degree of event.

But changing the font dimension isn't the only way to have awareness. You can also play using the font:

* household
Should you possess a sans-serif font, switch with a serif font for emphasis.
* colour
Reds are a superb color to entice focus.
* style or weight
Creating text bold or italicized will make it stand out.

Other Techniques to acquire Consideration
Altering the font dimension or colour just isn't the only real solution to transform your World-wide-web website to have attention.

* images
Pictures and graphics are continually attention-getters. The aphorism "a picture says a thousand words" is true because men and women are visual, and using a image to improve or emphasize what you desire to say will do more than just words alone. Google uses photos to emphasize different holidays along with other functions.
* layout
An exciting method to entice attention to an event should be to absolutely modify your layout. Right after the September 11th attacks, CNN eliminated practically all of their typical navigation to provide a lot more room for their coverage with the activities. Amazon thanked its clients for their loyalty by replacing their front web page using a letter from the president.
* animation
Animation wherever normally you might have flat illustrations or photos will bring focus. Many Internet designers use this in splash pages to demonstrate off their expertise and make their internet site more dynamic.

Use with Care
It truly is effortless to go overboard with these approaches. If just about every line of your web page is bold or red or blinking then nothing at all will stand out. And in case you announce your 30% away shoe sale in the identical intensity as announcing a war, your prospects will swiftly understand to ignore your designs, and ultimately go to a much more even-handed Internet website.

Creating a Great Web Page

The World-wide-web Web page

______Page Title
Does your title explain what the web site is? Is your web site title descriptive? This really is what will demonstrate up if an individual bookmarks your site, and at the best with the web site.

______Content
Is your content compelling? Is it interesting for a lot more persons than just you and your close friends and family? Folks come to Net sites for info. If your Web site doesn't have any, then they won't come back.

______Page Length
Have you thought about how your page will search on diverse browsers? If it is as well extended, folks will likely not need to scroll to read it, but if it is as well short, it will not have sufficient details to continue to keep individuals for the url page.
Illustrations or photos

______Image Size
Are your pictures scaled-down than 12Kb? If you have to have an graphic bigger than that, show the reader a thumbnail (a more compact version on the image, that was resized by a paint program not the browser) and enable them to decide if they would like to download it.

______Image Inbound links
Are your appearance links clearly hyperlinks? It is also a fine thought to have picture maps with text inbound links elsewhere for the web page. This would make the links a lot more accessible.

______Image Top quality
Do your images serve a objective? Should you add it to the site, then think about what it lends for the site. As an example, these investigate marks are here to emphasize the "checklist" nature of this web site.

______Image HTML
Does your picture tag have all of the necessary HTML? This includes the width and height, and the alt text.
Inbound links

______Link Text
Do you website link to descriptive text rather than boring words like "click here"? The biggest difficulty with navigation on the web is that readers don't know in which they're going.

______Link Annotations
Do you describe your back links? If a url page is excellent enough to hyperlink to, it truly is excellent good enough to own an explanation.

______Link Quality
Do all of one's back links go to active pages? In the event you preserve a web page online, you need to invest time every week generating positive that the backlinks function. You'll find numerous validators obtainable to verify your backlinks with.
Standard Problems

______Feedback
Does your site have a mailto or suggestions form on it? If that you are putting up a World wide web site, suggestions from your visitors can aid you make it superior. Chances are, the spammers will locate you either way, and hiding your identity just creates your web page glimpse less authentic.

______Last Up-to-date
Does your url page indicate when it was final up-to-date or what is new? If you ever update your page often, this aids visitors ascertain if they will locate value in reading your web site again.

______Valid HTML
Does your HTML meet HTML standards? Although it isn't always crucial that you use only HTML typical tags, you should use right HTML, and use browser specific tags only when you've adjusted for that differences on different platforms.

______Correct Spelling and Grammar
Are there any spelling or grammar errors on your web page? If there are, you need to fix them. Basic typos can destroy the credibility of an otherwise amazing web page.

View Original Content

Creating Better Links

Backlinks to your site are a extremely essential part of the Word wide web web site. But when most of the people think of World-wide-web web pages, they feel with the articles as the text that may be written for the page.

In several eye tracking studies, it has been shown that men and women viewing Net pages are drawn to images. But their eyes are also drawn to backlinks. This is since, in most Word wide web pages, links are underlined and inside a distinct color than the surrounding text. They stand out.
Backlinks Make Articles Scannable

When your visitors come into a Web web page, these are trying to learn one thing or be entertained. But because a lot of people do not understand Web internet pages, then scan them. Great Net writing takes this into account, and makes the pages as scannable as achievable.

Since they stand out, backlinks to your site make a World-wide-web website more scannable. But you should be sure that the hyperlinks you're utilizing hyperlink to a thing connected to the linked text.
Your property Web site Must Have Backlinks to your site

Unless your site is only 1 website, your own home web page will have links to other components of your internet site. And nearly everybody will scan your home page far more than they'll understand it, so you desire to create the links as self-explanatory as achievable. For backlinks to your site off your house web site I advocate:

* Stay clear of getting a household web site that is certainly 100% back links. This defeats the objective of scannability for the reason that hyperlinks no longer stand out.
* Make the hyperlinks pragmatic titles, not fancy. Tend not to make your viewers guess in which the link will go.
* Website to normal webpages that also have lots of hyperlinks.

Make Your Links Order From Basic to Certain

When searching for data, individuals tend to commence basic and get additional unique as they start off narrowing down their search. Feel of your respective back links being a funnel. You start out using a very normal category at the top that gets narrower and narrower as your visitors discover what there're seeking.
Ideas for Writing Links and Choosing What to Url To

* Review your log files to determine what individuals are browsing for. The most commonly utilised words should be links to other components of your site.
* Verify your backlinks go in which you imply they are going to go. Readers browsing for data will leave promptly if they feel your links lie.
* Write clear links. If the hyperlink text reads "this book..." the website should go to a book, not a bookstore or the author's biography.
* Do not play games with your backlinks to your site. Use straightforward language, and set back links in which can be valuable to customers, not just for the sake of a url.
* Develop backlinks to your site that visit content material as opposed to just lists of additional back links. If you're sending your visitors to a record of links, add explanatory articles towards the web page. And, make sure that the link pointing towards website explains that they'll get a list of much more backlinks to your site.


Source

COPPA Turns One

On April 21, 2000, the United States enacted a law named COPPA (Children's On the internet Privacy Protection Act), to aid protect young children on the web. Though this law primarily impacts web-sites that collect details about their visitors, particularly when their visitors are beneath 13 many years old, most websites really should be mindful with the law along with other privacy tools in use on online.

COPPA
Internet websites that are directed toward kids beneath 13 should:

* post their privacy policy
* get parental consent previous to collecting, making use of, or disclosing personalized details about a baby
* get new consent when the details collection practices alter
* allow mother and father to critique the details collected about their toddler
* permit mother and father to revoke their consent

For instance, the web Style web page is not especially directed in the direction of youngsters below the age of 13, so technically, COPPA does not apply. But the children's channel on About does, and so there are already a lot of changes to the About Children channel. But even if your internet site does not ought to comply with COPPA, it is a good idea to stick to it. If you ever do, you'll improve customer confidence in your web page.

Parental Controls
Essentially, you'll find two means of handling parental controls:

* evaluation by an independent group of the net internet site(s) in query
* examine because of the Internet developer herself of their personal Internet web page

You can find problems with every single technique.

The very first process means that there wants being a "governing body" that may be trusted and respected with the buyers to discover and block objectionable material. This could be questionable at times, specifically if that physique is making use of generic terms to block sites. For illustration, at 1 point NetNanny was blocking www.whitehouse.gov since it pointed out the word "couple" in reference towards President and Initial Lady. Other programs have blocked internet sites related to breast cancer as a result of the word "breast" in the title.

The second method relys on honesty of online developers. Perhaps you'll be able to see exactly where the trouble with that may possibly be. :) Also, a lot of developers do not put up any type of score technique. I believe that IE handled this by not allowing access to any internet site without having a rating (if parental controls have been turned on). P3P and ICRA are just two distinct score tools/codes that Internet developers can use to rate their web-sites.


View Source