1. CSS Grid Builder
CSS Grid Builder is an online GUI for customizing the YUI Grids CSS - a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds).
Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.
CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.
3. Blueprint: A CSS Framework
Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.
4. CSSTidy
CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy.
5. logicss: CSS Framework
logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.
6. ___layouts
___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.
7. Clean AJAX
Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.
8. Sajax
Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums - so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.
9. DOMTool
DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.
10. JavaScript Code Improver
JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.
11. JSUnit
JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.
12. Test plugin for JavaScriptMVC
The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.
13. Venkman: JavaScript Debugger
Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.
14. Firebug
Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.
15. Web Developer extension for Firefox
Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.
16. Internet Explorer Developer Toolbar
Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.
17. Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.
18. Test Everything
Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more - all in one location.
19. Pingdom Tools
Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.
20. Aptana Studio Community Edition
Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.
Read More at 20 Useful Tools to Make Web Development More EfficientIt won’t replace your fancy CS3, nor Flash, nor 3D Studio Max.
Some of them are pretty decent alternatives, not only for those who are not willing to spent some big Bucks, but also for those who need some specific tasks done, like resizing a batch of picture without needing to run the almighty Photoshop.
Image editing
-
The GIMP 2.2.13
GIMP (GNU Image Manipulation Program) is a freely distributed piece of software suitable for such tasks as photo retouching, image composition, and image authoring. It is a powerful piece of software with capabilities not found in any other free software product.
Note: You will need to download both GTK+ Runtime Environment and The Gimp installers. Install GTK+ before installing The Gimp.
-
GIMPshop 2.2.8
GIMPshop is a modification of the free/open source GNU Image Manipulation Program (GIMP), intended to replicate the feel of Adobe Photoshop. Its primary purpose is to make users of Photoshop feel comfortable using GIMP.
-
Picasa 2.7
Transfer, find, organize, edit, print, and share images, all with this easy-to-use product. Watch Picasa automatically organize all your pictures into elegant albums by date. Having all your photos in one place means no more time wasted searching for folders or files. The program works with JPEG, GIF, BMP, PSD, and movie files and is compatible with most digital cameras; it detects your USB driver and imports pictures into albums. Editing tools include cropping (standard or custom), removal of red-eye, and enhancing–even switching from color to black and white. Create slide shows set to your MP3s. Integration with Picasa’s free Hello instant picture-sharing software lets you share hundreds of photos in seconds and chat in real time.
Download Picasa with the Free Google Pack
-
Paint.NET 3.08
Paint.NET is free image editing and photo manipulation software designed to be used on computers that run Windows. It supports layers, unlimited undo, special effects, and a wide variety of useful and powerful tools.
-
ColorPic 4.0
Ever tried using a color picker on a high resolution monitor? It’s impossible. That’s why this color picker has a magnifier attached. Grab palettes of up to 16 colors at once and use four advanced color mixers to select a spectrum of possibilities.
-
Magnifier 3.0
Ever needed to see what’s going on the screen down to the pixel level? That’s where the Magnifier comes in. Simple and easy to use, the Magnifier is always handy for when you need to see all the details. Magnifier has the following features: no popup adverts or spyware, easy to use with any other program, resizable magnification area, adjustable zoom factor, overlay a grid.
-
Easy Thumbnails 2.91
Create thumbnails and scaled copies of all your images. With Easy Thumbnails, you can find and process images individually, in groups, or in whole folders using a simple file selector and built-in image viewer. Use slider controls to rotate images and adjust contrast, brightness, sharpness, and other attributes. Thumbnails can be created in any existing folder or a new folder, and you can identify them clearly by adding a prefix or suffix to their names.
-
FastStone Photo Resizer 1.4
FastStone Photo Resizer is a free image converter and resizer intended to enable users (especially digital-camera owners) to convert, rename, resize, crop, rotate, change color depth, add text, and watermarks to images in a quick-and-easy batch mode. The application supports major graphic formats including BMP, JPEG, JPEG 2000, GIF, and PNG. Drag-and-drop mouse operation is well supported.
-
ImageDiff 1.0.1
ImageDiff is a pixel by pixel image comparison tool. ImageDiff allows you to compare two images side by side, and see a difference mask showing you the exact pixels that have changed. Features include: Compare images of different formats, including JPG, GIF, BMP, and TIF, PNG. Compare images of different proportions and imageDiff will scale and calculate the difference automatically.
-
IrfanView 4
IrfanView is a fast and compact image viewer/converter. It is trying to be simple for beginners and powerful for professionals. Many supported file formats and features. Features include: multi-language support, Thumbnail option, slideshow, toolbar skins, fast directory browsing, batch conversion/editing, multipage editing, file search, change color depth, scanning, cut/crop, IPTC edit, capturing, lossless JPG operations, effects (sharpen, blur, Adobe Photoshop filters), EXE/SCR creating, many hotkeys, command line options and plugins.
-
FastStone Image Viewer 3.2
FastStone Image Viewer is a fast, stable, user-friendly image browser, converter and editor. It has a nice array of features that include image viewing, management, comparison, red-eye removal, emailing, resizing, cropping and color adjustments. Its innovative but intuitive full-screen mode provides quick access to EXIF information, thumbnail browser and major functionalities via hidden toolbars that pop up when your mouse touch the four edges of the screen. Other features include a high quality magnifier and a musical slideshow with 150+ transitional effects, as well as lossless JPEG transitions, drop shadow effects, image annotation, scanner support, histogram and much more. It supports all major graphic formats including BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO and TGA.
-
Alch Icon Suite 1.2
Alch Icon Suite is a powerful icon editing studio this small application is extremely easy to use and has a range of effects that can be applied to icons, not only can you edit any (16 X 16, 32 X 32, 48 X 48, 64 X 64) existing windows icons you can create your own icons fast and effectively.
*Update* 7/22/2007
Users have reported the presence of the virus “win32 adload.aw” in this program. Download for this app is not supported any more. Thanks for the help.
Overview | Download
Ilustration
-
Inkscape 0.45
Inkscape is an Open Source vector graphics editor, with capabilities similar to Illustrator, Freehand, CorelDraw, or Xara X using the W3C standard Scalable Vector Graphics (SVG) file format. Supported SVG features include shapes, paths, text, markers, clones, alpha blending, transforms, gradients, patterns, and grouping. Inkscape also supports Creative Commons meta-data, node editing, layers, complex path operations, bitmap tracing, text-on-path, flowed text, direct XML editing, and more.
-
SmoothDraw NX
SmoothDraw NX is an easy yet powerful freehand drawing tool. It’s a limited yet free version of SmoothDraw. It produces the most smooth and expressive stroke through your tablet. It also smoothes mouse input for who don’t have a tablet.
-
SPRAY vector generator 0.1
SPRAY vector generator is intended to produce helper objects for vector illustration software like Xara X, Corel Draw, Adobe photoshop. You can easily generate huge number of circles with random position, fill, outline color; random paths, grids, and rays. You can place generated objects thru clipboard at your favorite illustration app. Developed for Xara X but also works with Corel Draw or Adobe Illustrator.
-
SMN v5.1 ParticleDraw
ParticleDraw is a novel windows drawing program powered by a state of the art general system simulation engine. The brushes are dynamic systems of particles with interesting behaviours, which you can completely customise. Each brush is intricately tuneable with many underlying physical parameters and one can construct arbitrary systems of particles and use these as brushes.
-
InsightPoint 3.2.5.2
InsightPoint creates sophisticated illustration and layout for Web and print. When it comes to spell out and share your ideas, in text and in graphics as well, InsightPoint is the fastest and easiest way to get you there. Built on top of XML technologies, comprehensive object-oriented vector design tools, trivial learning curve, and smooth drawing experience.
Please Read about Design Programs in Detail :
by Mike Cherim
There are a plethora of Websites out there, each one unique in its design, its content, markup, features, functionality, and in myriad other ways. Yet, despite these differences, there are specific needs that should be met with near consistency, Internet-wide, regardless of the site. Let’s take a look at twelve of these common denominators. Below are the first six.
1. A Proper Navigation Menu
"An easy to use and accessible navigation menu must be available. There are other concerns as it pertains to building a proper navigation menu, as well, such as…
* Its link styling the :hover, :focus, and :active pseudo elements.
* The semantic use of lists to properly organize your links into a proper menu.
* And even going so far as marking the current page."
2. A Meaningful, Well-Formed Title
"Ideally the content title should come before the site (this helps search users find stuff like your main content heading, instead of seeing your site name over and over again) and, if at all possible, each page should have its own title."
3. A Method of Contact
"offering a phone number and address is good, if possible, and a contact form is a nice option in lieu of a mailto: email link that not all visitors will be able to use anyway. However, since some visitors are robots or people up to no good, use a secure contact form."
4. A Site Map
Start your site map as soon as it starts to grow, or consider adding it to your site from the beginning. At first you can link to it from the footer, then later move the link to a more obvious location as the site grows, since more visitors will find it useful. On small sites I will often incorporate the site map into a “site help” or “site info” page, killing off numerous birds with a one stone — accessibility and copyright statements, privacy policy, etc.
5. Passive Accessibility
"Your Website should be accessible. Whether or not you do it for your visitors or for yourself is irrelevant."
6. Standardized Markup
"From using tables for layout, to the improper use of breaks, to using a "big-bold" font style instead of a heading. Using the right markup for its designated purpose, without going overboard by stretching it usage, is useful not to not only accessibility and usability, but the practice of using semantic markup helps ensure forward compatibility."
Please Read more at Twelve Things Most Sites Need - Part 1
A monthly study that analyzes what percent of OEM website visitors use shopping tools, the team assessed the change in visitor use of three shopping tools following BMW’s mid December website redesign.
Want to Better understand How Consumers Interact with Websites then Read Initial Impacts of BMW Website Redesign
The development of your website involves an important decision-making process. A key factor in the process is the consideration of how potential clients or customers will interact with your site.
The success of your website, and possibly your entire business rests on how you address that issue
When you begin the process of setting up a website, here are some questions that you should consider:
1.What is the one overall message that a customer should take away with them when they leave your website?
2.How does your website make your customers feel?
3.How can your product or service best be explained to the customer in a simple and concise manner?
4.How can the customer be guided to buy/buy now?
5.How can you encourage the customer to come back?
6.How can you get your customer to bring you additional customers?
Planning a Website is a two-part process
First Part -- You gather your development partners, analyze your needs and goals, and work through the development process outlined here to refine your plans.
Second Part --- create a site specification document that details what you intend to do and why, what technology and content you'll need, how long the process will take, what you will spend to do it, and how you will assess the results of your efforts. The site specification document is crucial to creating a successful site, as it is both the blueprint for your process and the touchstone you'll use to keep the project focused on your agreed goals and deliverables.
Remember Websites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. To create a substantial site you'll need content experts, writers, information architects, graphic designers, technical experts, and a producer or committee chair responsible for seeing the project to completion. If your site is successful it will have to be genuinely useful to your target audience, meeting their needs and expectations without being too hard to use.
Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Remember that the site development team should always function as an active, committed advocate for the users and their needs. Always involve real users, listen and respond to what they say, test your designs with them, and keep the website easy to use, and the project will be a success.
Source:
http://www.buzzle.com/articles/things-to-consider-when-developing-a-website-website-development.html
http://website-design-melbourne.blogspot.com/2007/06/developing-new-website-planning.html
More and more users are accessing the Web via Pocket PC handhelds, so Web developers need to be proficient in Pocket Internet Explorer (pIE) specifications. This article examines the basic pIE specs and shows you how to tune your Web site appropriately.
When you're developing Pocket PC Web sites, you need to consider three elements: presentation, browser features, and bandwidth. You can create mobile code by hand or with specialized tools. The Visual Studio .NET 2003 mobile controls easily self-render ASP.NET pages for the Pocket PC platform.
This article will offer a brief overview of the Pocket PC Web site specification. I'll examine details native to the Microsoft Pocket Internet Explorer (known as pIE), but much of the information will be applicable to other Pocket PC-enabled Web browsers, such as Access NetFront, ThunderHawk, and MultiIE
Read more at Pocket PC Web site development tips
The Difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Pixelsurgeon’s Jason Arber has put together 20 top tips and tricks you should be using to give your work that all-important professional edge
1. Planning
When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.
2. Do it by hand
Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.
There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.
Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.
3. Stylesheets: importing vs linking
There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.
Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:
< link rel=”stylesheet” href=”simple. css” type=”text/css” media=”screen” >
< style type=”text/css” media=”screen”> @import url(simple.css); < / style >
4. Smarter gradient backgrounds
CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.
Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.
Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.
body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }
5. Commenting
When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.
Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.
Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.
< !-- HTML commenting looks like this and is enclosed within angle brackets and two dashes. The opening tag includes an exclamation mark. -- > /* CSS comments are enclosed by a forward slash and an asterisk. */
6. Use simple PHP to build sites
There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.
Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:
< ?php include(“filename.html”); ? >
7. Set fonts using ems
Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?
The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:
body { font-size: 62.5% }
This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.
8. IE Box Model Hack
Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:
div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }
You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:
div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }
This is applied in the following way:
< div >
< div class=”hack” >
Your content goes here
< /div >
< /div >
9. Space saver
Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:
< form style=”margin-top: 0; margin-bottom: 0;” >
10. Test, test and test again
While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.
It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).
11. Format fundamentals
In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.
The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.
JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.
12. The ‘title’ and ‘alt’ attributes
Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:
< img src=”logo.gif” alt=”logo” title=”logo/” />
13. The correct format for pseudo classes
For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
14. Use semantic mark-up
The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.
The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.
15. Favicons
Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.
16. Change capitalisation using CSS
If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.
h1 { text-transform: uppercase; }
17. Wrapping text around images
For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.
< img src=”image.jpg” align=”left” >
18. Universal character sets
Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.
With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.
The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:
< meta http-equiv=”content-type” content=”text/ html;charset=utf-8” />
19. Print styles
When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
< link rel=”stylesheet” type”text/css” href=”print.css” media=”print” >
or
< style type=”text/css” media=”print”> @import url(print.css); < /style >
This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.
20. Learn from others
Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.
Source : http://www.netmag.co.uk/zine/design-tutorials/20-pro-tips
To prevent from coding mistake please go Above source URL
It’s very easy simple fun and quick. A point and a click of the mouse with web browser interface and 1,000 template designs anyone can and a wide variety to choose from.
Customize with your favorite theme – layout and color. With graphics and CSS – Cascading styling that makes positioning them or stacking very easy Z drag and drop into place. Such as your own logo or branding with photos and with own fav album personal family or business slides.
Type your own text and fonts size with selection of style. Flash intro really does catch some attention with a little music.
Mobile phones also have internet capabilities for browsing sites and text messaging graphics online games and downloading. With some of the latest technology a person is able to build a .mobi site with a mobile domain with this.
And to keep it up to date with RSS feeds and add a journal dairy or web blog. The website is dynamic and updated in real time with fresh up to the minute hourly daily weekly or monthly content. No need to know the programming languages or really simple syndication with simple point and click technology.
Forums are online communities and a great idea for any website too. For any purpose personal family hobbies friends or just for plain business. The sub domain for an example would be like this - forum.101domainames.com. Most web hosting companies or businesses commercially or none some freebie’s allow subs once the domain name is registered.
Up to 25 to unlimited sub domain names depending upon which type of web hosting account the business or individual decides to choose from and most have 3 or more website easy and rapidly to build plans.
Online stores or web shops with SSL® and with built in hosting from a few select items to hundreds and even unlimited product catalog website are very simple and easy with point paste and click. The shopping cart calculates all the totals including tax and shipping with also varies payment methods. And with an up to date snap shot such as a summary the big picture.
That is fun to manage with QuickBooks® and online payment processing that can be integrated and encrypted for non techie to build website/s as easy as 1-2-3.
About 101Domainames.com
101Domainames.com the premier full service internet solution and service provider for Affordable Web Domain Names to Web Hosting & Design & More. In addition to assist New or Professionals to get their personal and/or businesses online.
We provide up to date information, tips, news, promotions, products, services & More via site and web log throughout The USA & Internationally with quick links to resources on the Internet. Please Visit >101Domainames.com
You acknowledge and agree that you will NOT associate this with any illegal site/s or of any adult nature Free to use without any modification with and link to our site only.
101Domainames.com -
© 2007 101Domainames.com All Rights Reserved.
Source: http://www.articlealley.com/article_140297_4.html