December 13, 2008

My First Silver Light Animation

Microsoft Silverlight powers rich application experiences and delivers high quality, interactive video across the Web and mobile devices through the most powerful runtime available on the Web.
http://61.246.241.36/silver/Animation/Movie-8/Default.html

December 5, 2008

Choosing Website colors

Are you in the process of designing your website, but unsure as to which colors to use?

Some designers will choose colors that they personally find pleasing, perhaps using their favorite colors. Since color affects the mood of website visitors, designers should treat the association of color as seriously as the design of graphics and layout. Colors can convey messages, invoke feelings and emphasize areas of interest.

Many web designers often overlook the issues of color in web design. When choosing colors for your web site there are three main areas that should be addressed.
  • The psychological effect of colors.
  • The effect on the readability of your site.
  • The complementary choice of colors for your background, graphics, links, and text.
Showing attention to these three areas will help you to create an effective and professional website. Keep in mind that choosing colors for your website might not come easily. You might spend hours deciding on a color scheme. Achieving color harmony is a science, and knowing how to arrange colors is an art.

September 27, 2008

5 Benefits of CSS Layout

When re-designing an existing web site, or starting a new one, clients often want to know why CSS based layouts are better. I faced such situations, and it was quite challenging to explain what benefits the client could get from the use of CSS. I definitely knew that it's the right way to code and it's more web standard compliant, but thinking about client's benefits I couldn't offer more than the argument that it's more Google-friendly.
So, I decided to make a little bit of research and brainstorming, and came out with 5 reasons why CSS layouts are better and smarter.

Google friendly
I'll start my list with the argument that CSS layouts make your web site more Google-friendly. This is because the CSS layout will contain only semantic information, and wouldn't be flooded with table elements. That makes it easier for Google to spot the truly important content without having to read 100 rows of useless code before it gets to the content. Benefit: Visitors will be able to find easier your web site.

Accessibility
As CSS permits to separate the content part, from the visual one, it makes the CSS web sites more accessible to web reading devices for disabled people. Also, it improves the experience of CSS designed web sites on different mobile devices and other types of media. Another important benefit will be the ability to switch different style sheets for various types of media. This is achieved without JavaScript, which makes it again easier and more accessible for the user. Benefit: CSS makes it easier to access your web site from mobile and special devices.

Easier maintenance and redesign
It is way much easier to maintain, modify or even completely redesign your web site, if it has a CSS based layout. This will cut your cost and save a lot of time on performing all the necessary changes. That's why I consider CSS a cutting cost technique. Benefit: CSS allows to saves time and cut cost.

Faster loading time
Statistically, CSS web sites have twice lighter code. They don't make the browser to pass twice through all the code, as it happens with table-based layouts, when the browser parses the code once for determination of the table structure, and then the second time for reading the content inside the table cells. Plus, CSS offers to choose the order of loading of all the elements. Benefit: CSS layouts offer better user experience, faster loading time and less server traffic.

Modern technologies and professionalism
Table based layouts are becoming history. It's like not using a mobile phone nowadays, or using always the usual mail service, instead of the electronic email. To be honest, I'm ashamed of the fact that some designers and developers still create table based layouts. There are tons of CSS web site galleries and showcases that show the beauty of CSS designs. On the other hand, I can't recall any of the table-based layout showcases. I strongly believe that every web designer who is more or less professional should create only CSS layouts. Benefit: Modern, clean, and smart structure of the site.

September 17, 2008

Comparing Photoshop with Fireworks

It's a challenge to say anything about it, but i will dare to do it.

Comparing Photoshop with Fireworks is a little like comparing apples and oranges. Both are delicious but are different in a number of ways.

Photoshop is the bitmap editor, and was designed for artists working on images for print. Fireworks is the top of the line, software for creating images for the Web.
Fireworks is vector based, so it actually has more in common with Illustrator than Photoshop. If you are comfortable with vectors, you'll love it.

Cheers!

September 9, 2008

What is page rank, when it gets update?


What is PageRank?
PageRank is a patented method to assign a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web. Google runs on a unique combination of advanced hardware and software. The speed of google search we experience can be attributed in part to the efficiency of their search algorithm and partly to the thousands of low cost PC's they've networked together to create a superfast search engine.
The heart of their software / search algorithm is PageRank, a system for ranking web pages developed by Google founders Larry Page and Sergey Brin at Stanford University. And while they have dozens of engineers working to improve every aspect of Google on a daily basis, PageRank continues to provide the basis for all of our web search tools.

PageRank Explained
PageRank relies on the uniquely democratic nature of the web by using its vast link structure as an indicator of an individual page's value. In essence, Google interprets a link from page A to page B as a vote, by page A, for page B. But, Google looks at more than the sheer volume of votes, or links a page receives; it also analyzes the page that casts the vote. Votes cast by pages that are themselves "important" weigh more heavily and help to make other pages "important." Important, high-quality sites receive a higher PageRank, which Google remembers each time it conducts a search. Of course, important pages mean nothing to you if they don't match your query. So, Google combines PageRank with sophisticated text-matching techniques to find pages that are both important and relevant to your search. Google goes far beyond the number of times a term appears on a page and examines all aspects of the page's content (and the content of the pages linking to it) to determine if it's a good match for your query.

False or spoofed PageRank
Pagerank shown in Google's Toolbar can easily be manipulated by a fake pagerank number. While the Pagerank shown in the Toolbar is considered to be accurate for most sites, this value is also easily manipulated. Any low PageRank page that is redirected, via a 302 server header, to a high PageRank page causes the lower PageRank page to acquire the PageRank of the destination page. In theory a new, PR0 page with no incoming links can be redirected to STATCOUNTER Homepage - which is a PageRank 10 - and by the next PageRank update the PageRank of the new page will be upgraded to a Page Rank of 10. This is called spoofing and is a known fake pagerank.

Manipulating PageRank
For search-engine optimization purposes, some companies offer to sell high page rank links to webmasters. As links from higher-PR pages are believed to be more valuable, they tend to be more expensive. It can be an effective and viable marketing strategy to buy link advertisements on content pages of quality and relevant sites to drive traffic and increase a webmaster's link popularity. However, Google has publicly warned webmasters that if they are or were discovered to be selling links for the purpose of conferring page rank and reputation, their links will be devalued (ignored in the calculation of other pages' page ranks). The practice of buying and selling links is intensely debated across the Webmastering community. Google advises webmasters to use the nofollow HTML attribute value on sponsored links. According to Matt Cutts, Google is concerned about webmasters who try to game the system, and thereby reduce the quality of Google search results.

When Does Google Updates Pageranks?
It varies. There is no definite time interval for page rank updates. Google usually updates page rank at interval of 3 months.

September 3, 2008

What is Web 2.0?

Design patterns and business models for the next generation of software.
Web 2.0 has numerous definitions!

Web 2.0 is a feature through which applications and services are made around the unique feature of Internet rather than making applications and expecting the Internet to be feature around it.

The technologies of Web 2.0 tend to bring the creative and innovative ideas and the features of different developers together. The hierarchy of Web technology 2.0 has 4 Levels. Each level has its different usage and advantages.

The applications that are only web based i.e. they work only when they are connected to the Internet. They are mainly in the Level 3 of Web 2.0. For example, websites like e-Bay, Skype, AdSense and many more than can only work when online.
There are certain features which are available in Web 2.0 which gives us the advantage of working offline also. These are mainly in the Level 1 and Level 2.

For example:

  • Website like Flicker, ITunes which gives us the advantage of sharing music and photos on the net.
  • Personal websites turned into Blogging.


These websites can work without being connected to the Internet but once connected gives additional advantages like live photo sharing, music sharing and many more. Certain applications of Web 2.0 give us the feature of total offline working advantages. Websites like MapQuest, Google Maps and many more gives us this facility.


Web 2.0 has changed the scene of the World Wide Web. It allows the users to do more than just to retrieve data and information. It allows the user to rather own the data than to just retrieve it from the source. It also encourages the user to add values and information to the application which is in contrast to the old traditional websites which lets only the selected users to access the data and information and allows only the site Administrator to add or edit the data. Technologies such as weblogs, forums, podcasts, wikis, social software and web application programming Interfaces provide enhancement over read-only websites.


The idea of Web 2.0 can also relate to a transition of some websites from isolated information based applications to interlinked computing platforms that function like locally-available software in the view of the user. It also includes a social element where users generate and distribute content, often with freedom to share and re-use. This can even help in the rise of economic value of web to business, as users can perform many more activities online.
It has many more features like it is a rich user experience as it is developed on a rich user friendly interface like AJAX, FLEX or similar rich media. It gives user participation. It even gives open ness and freedom of use to all the users. By user participation it contributes to collective intelligence which helps the further user of the data.


Web 2.0 applications can be brought to the user by rich user friendly Internet Application techniques like Adobe Flash, Java, AJAX, Flex and many of such kind. These have the potential to improve the user-experience in browser-based applications. These technologies allow a web-page to request an update for some part of its content, and to alter that part in the browser, without needing to refresh the whole page at the same time.
The extra functionality provided by Web 2.0 depends on the ability of users to work with the data stored on servers. This can come about through forms in an HTML page, through a scripting-language such as Java script / Ajax, or through Flash or Curl. These methods all make use of the client computer to reduce server workloads and to increase the responsiveness of the application.

August 5, 2008

My Latest Web Design with W3c standards

How To Dominate With Your Blog

I have listed a few things you can begin to do to make your blog more popular. Just remember, the blogs are built on relationships, so if you keep that in mind, you can begin to get more popular.

You will not make it with a free blog from one of the blogging domains. Spend a few bucks, register your own domain, get your own hosting, and be the owner of your own blog. It shouts out: I am not cheap, and cap actually afford a blog. This makes a big difference.
I would make it a point of visiting the blogs of people you respect, and would like to know, and start making some intelligent comments. Then, if you can get these guys to recognize you, and start answering your comments, then you may be on your way to developing a good blogosphere relationship.

Hopefully, they are active in the commenting of the blog, and will answer you back. This can now be the beginning of a blogging relationship.
You can also use your blog as a reference.
I consider myself to be an internet marketer and a web developer. Because of the nature of these jobs, I am constantly looking up information and trying to solve problems. When I do, I now put this knowledge on my blog. This allows me to look it up again when I need it.
Meet bloggers personally. There are plenty of blogging conventions every month, and this would be a good time to meet some of these guys. We know the blogosphere is based on relationships, so what better way to reach out to someone than in person. This will make it more likely you will get some publicity for your blog at a later date.
There are just a couple of the things you can do on how to use your blog and to get your blog more popular.

June 6, 2008

Benefits of CSS Layouts

Web Designers get better results with stylesheets by learning them as a design technique in their own right, rather than blundering around with the idea that they're meant as a replacement for mis-used tables and/or invisible gifs and/or HTML3.2 etc.

Stylesheets are better for proposing presentation, because in principle they do no harm when their suggestions are inappropriate. If the stylesheet causes a problem in a particular situation, then the user can intervene: that's part of the design concept for CSS.

Stylesheets are, at least temporarily, worse because of the dreadful implementations that are out there, necessitating extra care in design - but it's getting better all the time, and one can shield obsolete implementations from the more risky parts of the CSS by various techniques.

The problem with table layout is that you're stuck with it even in situations where it makes no sense (think accessibility, in all its senses). Where, on the other hand, tables are used to express an actual relationship between the cell contents ("tabular data", to put it crudely) then they are doing their proper job in HTML.

Table vs CSS

Why should I use CSS layouts over tables?
Very simple, tables are for structuring tabular data, not for presenting visual layout. Cascading stylesheets are superior precisely for the reason that they don't (by design) affect the accessibility of the content and functionality on a page. HTML-as-visual-layouting language is deprecated, and browser support can be expected to get worse (which is better). CSS is intended, among other things, to solve the problem of general page layout that tables have been misused for in the past.

Besides, what's the alternative to CSS? Using table-layouted HTML3.2 pages will never guarantee everybody gets a nice rendering out of it. Quite the opposite -- it might result in a meaningless rendering in many situations.

With CSS positioning each element is a container which can be styled and positioned correctly. Because CSS is separate from the content in being defined in an external stylesheet, it is possible to switch off the presentation in user-agents where the presentation layer inhibits access to the information and content. The content then gracefully degrades to a completely usable and accessible browser default styling. The same cannot be said of tables.

CSS is optional, by design. The site may look plain on browsers which don't implement it, but at least (if the site is designed right) it will still work, in the sense of giving the reader full access to the information content. Since access to information always a higher priority than presenting it in a predefined style, this allows a larger audience to visit.

The browsers which don't implement CSS at all (e.g Lynx) will come to no harm and need no special attention, beyond normal good practices of web design. This is a significant cost saving in both development and testing cycles.

Tables are designed for presenting tabular data, layouts which use tables may make sense to the surfer using a visual browser, but often the underlying structure of the HTML, the document flow, does not linearise well. Thus when the page is viewed on devices that aren't visual browsers running on a PC (e.g. PDA's, mobile phones, voice browsers etc) the content does not make sense.

What makes tables a bad choice is that when used, it is impossible to differentiate reliably which table actually structures tabular data and which is being misused for layout. This effectively prohibits the use of tables in a semantic sense. Since the web is heading toward a human and computer based information environment, tables based layout dole out a large amount of damage for no advantage. There is also a Web Content Accessibility (WCA) component to this. Screen readers and specialized Web page rendering devices used by People with Disabilities often do not render layout table information satisfactorily.

June 5, 2008

Optimization of JPEG images

  • The image compression techniques have their origin in the necessity of reducing the size of the file used to store the image, witch is huge when compared to storing text (a 800x600 24 bit color uncompressed image needs 1440000 bytes or 1.37 MB). One of the most popular formats is JPEG (which uses files with JPG or JPEG extensions), which can achieve compression ratios of 10:1 with almost no perceived loss of image quality.
    Depending of the program you use for saving JPEG images, there are available some options for adjusting the compression of the image. In this article I'll try to explain how to adjust that options and optimize the ratio between image quality and file size. It's important take into account that some images are more suitable than others for JPEG compression (see flat images compression below).
  • Basic compression
    optionsThe two basic options that are almost always present in every "Save JPEG" dialog are the compression/quality of the image, and the standard/optimized/progressive formats.
    Both compression and quality refers to the same parameter but one is the inverse of the other (e.g. 35% compression is equal to 65% quality), depending of your program choice you'll find either. The more compression, the lesser image quality. The proper setting for this parameter depends of the image quality or file size you need/want to obtain, getting the best ratios with 50%-85% of image quality (15%-50% compression).
    The standard (baseline) and optimized (baseline optimized) settings provides the same image quality but the optimized format provides a 2%-8% reduction of the image file size, so there is no reason for not use always this setting when not using the progressive format. The progressive format also provides the same quality, but offers an alternate method of displaying the image while it is downloaded, at the cost of a slightly increase in the file size (more details about progressive encoding).
  • Advanced options
    Apart from that options, some programs like Corel PhotoPaint, Paint Shop Pro and IrfanView (this one is freeware) allow choosing the type of image subsampling, also called downsampling. The subsampling ratios according to the spec are 4:4:4 (no subsampling), 4:2:2 (standard subsampling) and 4:1:1. Adobe Photoshop also contemplates this option but it's adjusted automatically depending on the quality level selected: it applies subsampling for Medium and Low levels and uses no subsampling for Maximum and High (more details about subsampling/downsampling).

    While the standard subsampling is usually adequate for most images, providing an adequate ratio between image quality and file size, there are some situations in which using no subsampling (4:4:4) provides a perceptible increase in the image quality, even if you use a higher compression ratio in order to maintain the file size. There most notable cases are when the image contains some portions with fine details, like text over an uniform background, and images that contain almost-flat colors.

June 4, 2008

Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)


1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody. A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.

Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.


2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts. Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading


3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past. Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

> Usability implications of changing link colors
> Guidelines for showing links


4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read. Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs
  • the inverted pyramid
  • a simple writing style, and de-fluffed language devoid of marketese.

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40. Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.


6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need. The page title is contained within the HTML title tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.


7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.) Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page

animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations

pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).


8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good. The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.


9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.


10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for. Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Enjoy!

June 3, 2008

Print vs Web Design

When some people turn on their computer, they actually think they're seeing a printed page on their screen. They then assign print strategies to a web layout. But many of the rules of print simply don't apply to the web, so the end result is usually a mess, and the original promotional message of the business lost.

  • Resolution
  • GIFs and JPEGs
  • Fonts
  • Typography
  • Plug-ins
  • Navigation
  • Colors
  • Computer monitors

Resolution
  • Resolution is the image quality measured in terms of how many pixels make up your image. It is commonly referred to as "ppi" (pixels per inch). Because your images are to be viewed on a screen, all web graphics should be no larger than 72 ppi. Anything higher has no improved effect, and only creates longer download times.

GIFs and JPEGs
  • GIF is short for Graphics Interchange Format. GIF's advantages are that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site).
  • JPEG is short for Joint Photographers Experts Group. JPEG is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations.
  • Sometimes it's obvious that a graphic on someone's web page was saved in the wrong file format. Photos may look too grainy, or flat-color images may look too fuzzy. When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with. Use a GIF format if your graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your image's file size to a minimum.

Fonts
  • For your audience to view the same font (an unique set of type characters) you see on your own screen, they must also have the same font installed on their own individual computers. Otherwise, their browser will instead show a substitute font, which designers have no control over.
  • For this reason, be more conservative with your choice of fonts. Display only what the general public already has on their computers. If you're looking for a contemporary look, use standard fonts like Helvetica or Arial. If you're looking for a more sophisticated look, use fonts like Times or Verdana. If you absolutely MUST have everybody see your creative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web pages' download time.

Typography
  • The harsh reality of web design is that you simply don't have the kind of control over how your text appears. It is far less sophisticated than what is possible in print media. The choice of font, the exact size of the text, where the text breaks, and how the text reads - all are aspects of typography. And on a web page, they are mostly determined by the web browser, not by the creator or owner of a web site.
  • At a screen resolution of only 72 dpi, text is nowhere near as sharp on screen as it is on a print publication. For this reason, be very careful not to overload your readers with too much text and allow for some open white space.

Plug-ins
  • There are several mistakes designers can make when it comes to adding plug-ins (a software extension that provides added capabilities to the browser) to their site. They may:
  1. create a link to the plug-in creator's web page but the visitor is no longer at the original company's web site.
  2. Some solutions to keeping your visitors' attention: code the link to the plug-in so that when it is clicked a new browser window will appear, rather than losing your web page. Better yet, try to obtain direct access to the plug-ins FTP site so that people will only see your web site while the plug-in downloads.

Navigation
  • The web is a much more interactive experience than a print publication. The viewer controls the sequence of web pages and jumps from page to page using links. As a result, the web designer must organize the content on the web pages very differently from the way one might organize them from a brochure, newsletter, or book. Remember, your web site is not a document your audience can physically hold. You can't assume the viewer has seen previous pages or will proceed to subsequent pages on your web site. Each page must be able to stand on its own. Your audience always needs to be reminded where they are and how to get to anywhere else on your site.

Colors
  • The advantage of color on the web is that it's cheap. Technically, you can produce millions of colors on your screen, provided your monitor and video display are a decent quality. The disadvantage is that there are actually only 216 web-safe colors - meaning that these are the only colors that appear the same on all monitors and operating systems without dithering, be they PCs or Macs.
  • It is important to understand that colors from a print piece cannot be effortlessly transferred to a computer screen. Many print variables - paper thickness, texture, color, absorbency; inks - are not available for a computer monitor - a convex glass surface producing a screen flicker to project the image you see.
  • Also, too much color on a web page can be distracting and counterproductive. The most successful strategy is to use color sparingly. Adding too many colorful items can create the visual equivalent of noise. Instead, leave room for white space. This will help your visitors focus on the items that are highlighted in color - a perfect opportunity to showcase your promotional message.

Computer monitors
  • A web site that looks clean on a monitor with millions of colors could look dithered and jagged on a monitor with only 256 colors. Colors that appear bright and sharp on your screen may appear dark and dull on another's. A web page that appears well suited for a 17" or larger screen will appear cut-off on a smaller one. Even the operating system can affect your monitor display. Macintosh computers, for instance, have a higher gamma display, and web pages show up brighter on them than on Wintel PCs.
  • Before making any design revisions, first view your web page on several computers. If you only have one computer, go somewhere off-site and view it. See how the web site reads under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.

May 29, 2008

Google vs. Yahoo Interface Design

As Google and Yahoo! continue their volley of product offerings, I thought it would be useful to compare the interface design solutions each company employed to solve similar user needs. In other words: how does Yahoo’s version of a product (Maps, Local Search, Image Search, etc.) compare to Google’s? Though some product offerings are virtually indistinguishable (Web Search, Image Search), others differ significantly (Groups, Product Search).

At a high level, Yahoo! has better integrated business goals with their product designs. For example, their comparison shopping site features multiple entry points that better match consumer shopping behaviors (browse by brand, browse by category, featured products, etc.) than Froogle’s single search box. Yahoo! also has more robust answers to vertical information finding (Travel, Finance, Movies, etc.) than Google’s Web Search features. That doesn’t negate the value of Google’s simple solutions to these tasks. It’s just that a simple solution sometimes requires something in addition to (or other than) a search box.

  1. Google Alerts (beta):
    Google Alerts are email updates of the latest relevant Google results (web, news, etc.) based on your choice of query or topic.
    Yahoo! Alerts Get real-time updates delivered to you instantly via: email, mobile device, or Yahoo! Messenger.
  2. Answers:
    Google Answers Google Answers is a way to get that help from Researchers with expertise in online searching.
    Ask Yahoo! We carefully research our answers by searching the Internet for relevant web sites and pages.
  3. Desktop Search:
    Google Desktop Find your email, files, media, web history and chats instantly.
    Yahoo! Desktop Search (beta) Yahoo! Desktop Search Beta is a free, downloadable search application that enables you to find any of your files, emails, attachments, instant messages and contacts.
  4. Directory:
    Google Directory The Google Web Directory integrates Google's sophisticated search technology with Open Directory pages to create the most useful tool for finding information on the web.
    Yahoo! Directory The Yahoo! Directory gives you access to what's available on the Web.
  5. Finance:
    Google Search Feature: Stocks To use Google to get live stock quotes and information, just enter one or more ticker symbols.
    Yahoo! Finance You have access to a wide array of financial resources on Yahoo!
  6. Groups:
    Google Groups (beta) A Google Group is an online discussion group or mailing list that helps groups of people communicate using email and the web.
    Yahoo! Groups Yahoo! Groups is a free service that allows you to bring together family, friends, and associates through a web site and email group.
  7. Image Search:
    Google Image Search Google's Image Search is the most comprehensive on the Web, with more than one billion images indexed and available for viewing.
    Yahoo! Image Search Yahoo! Image Search allows you to search millions of images from across the Web.
  8. Local Search:
    Google Local (beta) Google Local locates neighborhood stores and services by searching billions of pages across the Web, then cross-checking those results with Yellow Pages data to pinpoint the local resources you want to find.
    Yahoo! Local Yahoo! Local brings together the best of Yahoo! Yellow Pages, Yahoo! Maps, and Yahoo! Search.Yahoo! Yellow Pages Yellow Pages provides fast general information like the name, phone number, and address of businesses and services.
  9. Mail:
    Gmail Gmail is an experiment in a new kind of webmail, built on the idea that you should never have to delete mail and you should always be able to find the message you want.
    Yahoo! Mail Web-based Yahoo! Mail is accessible world-wide, offers a cross-platform email solution, and is cheaper (free) and easier to use than traditional client/server email.

Flash Animation Basics

Flash is a fun tool for quick and easy automated animation, allowing you to create shapes and then move them about without having to draw every frame of the animation. But you can also animate in the traditional style--drawing every frame of animation, describing motion frame by frame in exquisite detail. Flash lets you mimic cel-style animation, but with so much more freedom; no more light tables, no more plastic sheets, pencils, inks, flip books, paints, cameras. It's all in the code--brushes in binary, sketches in subroutines. But in order to accomplish this, you still need to understand the principles of animation and how to use those basics in Flash. So for this lesson, we're going to learn how to choose keyframe points and a few techniques for in-betweening.

Although as we get deeper into these lessons we're going to discuss how to draw complex motion and detailed shapes, for this lesson we'll stay simple: a bouncing ball against a backdrop of a single horizon line. Create a new document with a frame rate of 12 and a 320w x240h size (4:3 aspect ratio) ; that's more than enough for web animation, though typical TV animation uses a 15 fps (4:3 ratio) with repeated frames, and film animation uses 30 (16:9 ratio).

Animation Basics: Getting Started

  • Starting Point: First Key
  • Creating More Keys
  • In-Betweening
  • In-Betweening II
  • Viewing Motion Sequence
  • Repeating and Adjusting the Timeline
  • Cleaning up the Line Art
  • Filling in Remaining Frames
  • Adjusting Finished Result

May 28, 2008

Ashish's 8 Principles for Good Web Design

So today I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice. Obviously I have lots of disclaimers, rules are made to be broken, different types of design work differently!

1. Precedence (Guiding the Eye)
Good web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When using a good design, the user should be led around the screen by the designer. I call this precedence and it's about how much visual weight different parts of your design have. A simple example of precedence is that in most sites the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). This is a good thing since you probably want a user to immediately know what site they are viewing. But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example you might want your user to go from logo/brand to a primary positioning statement to punchy image to give the site personality to main body text, with navigation and a side bar taking a secondary position in the sequence. What your user should be looking at is up to you, the web designer, to figure out. To achieve precedence you have many tools at your disposal:

  • Position - Where something is on a page clearly influences in what order the user sees it
  • Colour – Using bold and subtle colours is a simple way to tell your user where to look
  • Contrast – Being different makes things stand out, being the same makes them secondary.
  • Size – Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
  • Design Elements – if there is a gigantic arrow pointing at something, guess where the user will look?


2. Spacing
When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true.

Spacing makes things clearer. In web design there are three aspects of space that you should be considering:

  • Line Spacing
    When you lay text out the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the 'line-height' selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding) from the process that printers used to use to separate lines of text in ye olde days - by placing bars of lead between the lines.
  • Padding
    Generally speaking text should never touch other elements. Images for example should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson :-) But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.
  • White Space
    First of all, white space doesn't need to be white. The term simply refers to empty space on a page (or negative space as it's sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site you'll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.

3. Navigation

One of the most frustrating experiences you can have on a website is being unable to figure out where to go or where you are. I'd like to think that for most web designers navigation is a concept we've managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:

  • Navigation - Where can you go?
    There are a few common sense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page, easy to identify - they should look like navigation buttons, and well described - the text of a button should be pretty clear as to where it's taking you. Aside from the common sense, it's also important to make navigation usable. For example if you have a rollover submenu, ensuring a person can get to the submenu items without losing the rollover is important. Similarly changing the colour or image on rollover is excellent feedback for a user.
  • Orientation - Where are you now?
    There are lots of ways you can orient a user so there is no excuse not to. In small sites it might be just a matter of a big heading or a 'down' version of the appropriate button in your menu. In a larger site you might make use of bread crumb trails, sub headings and a sitemap for the truly lost.

4. Design to Build

Life has gotten a lot easier since web designers transitioned to CSS layouts, but even now it's still important to think about how you are going to build a site when you're still in Photoshop. Consider things like:

  • Can it actually be done?
    You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It's really good to know what can and can't be done, which is why I believe all web designers should also build sites, at least sometimes.
  • What happens when a screen is resizes?
    Do you need repeating backgrounds, how will they work? Is the design centred or left aligned?
  • Are you doing anything which is technically difficult?
    Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
  • Could small changes in your design greatly simplify how you build it?
    Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular when elements of a design cross over each other it adds a little complexity to the build. So if your design has say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build
  • For large sites particularly, can you simplify things?
    There was a time when I used to make image buttons for my sites. So if there was a download button for example I would make a little download image. In the last year or so I've switched to using CSS to make my buttons and have never looked back. Sure it means my buttons don't always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.

For More mail me at:
ashish4niks@rediffmail.com

May 27, 2008

Graphic Design Basics

There are several tools that are essential to graphic design. Below is a list of what is absolutely necessary to work in graphic design, as well as some things that are recommended.
Learn what graphic design is, what elements make up good design, the essential tools, hardware, and software for designers, and the difference between designing for print and the web.
The elements of graphic design are used, and often combined, to create graphic works. They should not be confused with principles of design, such as balance and white space, but rather components such as color, type and images. Presented here is a list of the most commonly used elements in graphic design.

Lines
Lines are used to divide space, direct the eye, and create forms. At the most basic level, straight lines are found in layouts to separate content, such as in magazine, newspaper, and website designs. This can of course go much further, with curved, dotted, and zigzag lines used as the defining elements on a page and as the basis for illustrations and graphics. Often, lines will be implied, meaning other elements of design will follow the path of line, such as type on a curve.
ShapesFrom ancient pictographs to modern logos, shapes are at the root of design.
ShapesFrom ancient pictographs to modern logos, shapes are at the root of design. They are used to establish layouts, create patterns, and build countless elements on the page. With graphics software such as Illustrator, creating and manipulating shapes is easier than ever, giving designers the freedom to create them at will.
Color
Color is an interesting element of graphic design because it can be applied to any other element, changing it dramatically. It can be used to make an image stand out, to show linked text on a website, and to evoke emotion. Graphic designers should combine their experience with color with an understanding of color theory.
Type
Type, of course, is all around us. In graphic design, the goal is to not to just place some text on a page, but rather to understand and use it effectively for communication. Choice of fonts (typefaces), size, alignment, color, and spacing all come into play. Type can be taken further by using it to create shapes and images.Art, Illustration & PhotographyA powerful image can make or break a design. Photographs, illustrations and artwork are used to tell stories, support ideas, and grab the audience's attention, so the selection is important. Graphic designers can create this work on their own, commission an artist or photographer, or purchase it at all price levels on many websites.

May 26, 2008

Search Engine Optimization (SEO)

The process of getting your website to the top of the search engines is known as search engine optimization (SEO). Today there will be millions of searches performed on the Internet, many of them looking for exactly what you are selling. SEO has proven to be one of the most cost-effective forms of marketing available.Search optimization is a hyper-competitive endeavor that requires intense focus and a thorough, up-to-date understanding of how the search engine algorithms and robots operate.

For more mail me at:
ashish4niks@rediffmail.com

May 23, 2008

Flash XML Dynamic Photo Gallery

Friends!
Some of my friends wanted this Flash xml gallery,
It's a nice, Daynamic and fully optimized.


Mail me for this gallery at ashish4niks@rediffmail.com
The subject of mail should be "Flash XML Gallery".

Demo: http://www.suryafurnitech.com/image-gallery.html
Enjoy!

February 20, 2008

My Web Designing Templates

Hi,

This is my site for web designing. Keep on checking for the latest update on web designing. Also, i shall be posting new templates for purchase or free use. Keep checking back!

Ashish