GO Visit : Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

Section	Bug/Fix/Best Practice
Strategies	IE6 Market Share Plan Your Design and Keep It Simple Use A Correct Doctype Validate Your Code Develop For Standards-Compliant Browsers First Use Progressive Enhancement Use A CSS Reset Rule Use A JavaScript Framework Use A JavaScript IE Fix Script How To Debug IE
How to Isolate IE6	Using Conditional Comments For Internet Explorer How To Target IE6 with CSS Selectors How To Use JavaScript To Detect IE6
Images	PNG Alpha Transparency Fix In IE6 Rounded Corners In IE6 How To Solve Flickering Background Images
Layout	Understanding hasLayout IE6 Box Model Min Height Max Height 100% Height Min Width Max Width Double Margin Float Bug How To Clear Floats Float Drops The Guillotine Bug 1px Gap Bug For Absolutely-Positioned Elements 3px Gap Float Bug IE And The z-index Property Overflow Bug
Lists	Horizontal List Item Width Problem Staircase Bug Vertical Spacing or Whitespace Bug
Behavior	No Hover State In IE6 Implementing The Canvas Tag In IE IE6 Resize Bug
JavaScript	Error: Expected Identifier, String, Or Number IE JavaScript Memory Leaks
Miscellaneous	Duplicate Characters Bug Favicons in IE GZip In IE6
Bonus Resources

Go Visit: 50 New Useful CSS Techniques, Tools and Tutorials

Learn About Obscure CSS Properties

Useful CSS Techniques

Useful CSS Tools, Tips and Advice

Further Resources

50 Useful Tools and Generators for Easy CSS Development
The tools have been sorted into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
We are permanently looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

CSS editors are editors that focus solely on generating Cascading Style Sheets. Though you could scrape by using a fully-featured IDE or source code editor – CSS editors may offer specialized functions and features to help you write better CSS, quicker.

In this article, you’ll find some of the more popular CSS editors available on the market.

Stylizer

 

Stylizer is a visual CSS code editor. It has real-time preview that renders changes on your web browser on the fly as you make them. It also has a point-and-click interface (called "Bullseye") which allows you to target page elements by clicking on them, making CSS editing a cinch. Stylizer is available only for Windows and Mac OS.

Style Master

Style Master is a cross-platform CSS development application that comes with a robust set of features such as auto-completion, on the fly code editing and rendering of dynamically-generated pages (such as PHP, .NET, and Ruby on Rails), and  a hierarchic display of CSS fields. It also has a feature called Support Watcher which warns you of potential CSS bugs for certain browsers.

RapidCSS

RapidCSS is ideal for writing CSS code; it is lightweight and offers a wide range of features like code auto complete, syntax highlighting, built-in CSS references and various shortcuts for CSS tags.

Free CSS Toolbox

Free CSS toolbox is a simple text editor for CSS. It’s very lightweight and simple to use. It has a syntax highlighter feature, code auto-complete, CSS checker, CSS validator and compressor.

GO VISIT

The arguments for…

There are several reasons why designers should have coding skills.

Medium appreciation

Artists utilize the medium they’re working with, whether that’s paper, clay, cloth, wood, marble or a web browser. A designer who doesn’t understand how web pages are constructed will almost certainly make fundamental errors, e.g.

• not considering browser viewport dimensions, font stacks, page weight, or coding practicalities
• providing Illustrator-based 300-dpi mock-ups which are impossible to replicate on-screen (why can’t that line be one third of a pixel in width?)

It’s not rocket science

No one’s suggesting a designer should be able to develop a RESTful database-driven application. But a little HTML and CSS markup knowledge goes a long way. Understanding the basics, strengths and limitations can help designers create better web designs.

Common communication

Coding knowledge will help when you discuss issues with developers. You’re talking their language and will understand the problems they encounter.

You’re a better asset

Who would you employ: a great designer who can’t code or one that can?

The arguments against…

There are those who think designers don’t need coding skills. Perhaps the best designers never get their hands dirty with putrid programming?

Great designers make great designs

A talented designer can create usable designs — no matter where it’s ultimately used.

Time is precious

Why should a designer spend valuable time learning to code and keeping up with HTML/CSS developments? Is that time better spent increasing the quantity and quality of the design work?

You don’t need to be a plumber

A architect designing a house doesn’t need to be an expert in plumbing, electricity or carpentry. Those tasks can be handled by an expert in that field — in the same way that designers can hand artwork to an HTML/CSS coder.

Ignorance is bliss

Those who don’t understand the web aren’t constrained by its limitations. They may create a seemingly “impossible” design which pushes the boundaries and leads to fresh ideas.

Have your say

In my experience, the best designers have dabbled with coding. They may not have understood the subtle complexities of HTML and CSS, but they knew how to create a usable design which embraced the medium. But my opinion could be biased: they were the easiest people to work with and didn’t need lengthy training sessions about pixels, fonts and browser issues!

GO VISIT

Creating a minimalist design may look simple to non-designers, that’s why it’s often so hard to sell minimalist designs to your clients: they have the feeling that they could do it themselves. However, achieving simple yet powerful designs is a time-consuming task. I’ve made a selection of websites that did a great job creating efficient designs.

What these sites did right

Content going straight to the point

Hard to design a minimalist site if you have to fit in every products of your client with descriptions, 2′000 words and two menus with a bigger logo. On the web especially, content will be more efficient if short and targetted, it will make it easier to design a simple website.

Grid-based designs

Not all of these sites did, but most of them have a grid based design. Using a grid makes it much easier to give balance to your designs when no extra visual elements weigh in the layout.

Clear hierarchy of information

Notice something on these websites? Yes, they are very easy to navigate and more usable than your average website. Removing unnecessary information forced the designers to really think what importance every element has in the website.

Showcase

1. Old Guard

2. Jez Thompson

3. Thing.be

4. Alan van Roemburg

5. Indie Labs

6. Ico Design

7. WP AntiVirus

8. Ideas on Purpose

9. Make Nice

10. iMac SOS

11. Max Wanger blog

12. Digital Mash

13. Matt Singer

14. Noon style

15. Sleepover

 

GO VISIT

Typography: References and Useful Resources

The Taxonomy of Type
This article’s purpose is to help us as designers to distinguish basic properties of types. It explains the type classification and provides examples of each type. Short, but nice article.

Typedia: A Shared Encyclopedia of Typefaces
Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typeface Anatomy and Glossary
Many fonts have abbreviations in their names. Some relate to glyph sets and font formats, others to design traits and foundries, and so on. A comprehensive list of these abbreviations and their explanation can be found in The Abbreviated Typographer from Unzipped.

Typographic Marks Unknown
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

Periodic Table of Typefaces
A reference table for most popular typefaces and their classifications.

Fonts for iPad & iPhone
This reference table features all fonts that are available on iPhone, iPod Touch and iPad.

Font Anatomy (Wallpaper)
A nice overview of all typographic terms and subtleties. Do you know what an ‘arm’ or ‘beak’ is? Time to find out.

Typographic Rules Checklist (PDF)
Useful typographic checklist that contains not only some general typographic rules, heuristics and guidelines, but also reminders for typography in your projects.

Typography Checklist (PDF)
Compiled by Jason DewinetzIf, this list contains some useful typographic checks that you may want to consider for before launching your next project or printing your next brochure or book.

So You Need A Typeface (Infographics)
A nice infographics that can actually help you select a typeface for your design work. You may want to search for the path to Comic Sans.

Finding The Right Type

The Right Font for the Job
A few years ago, you had to make a decision between TrueType or PostScript and Mac or Windows. Today, the choice is usually fairly simple: OpenType is the most convenient and full-featured font format, compatible with all modern screen and print workflows. All the extras that are commonly spread across multiple PostScript or TrueType files can live in one OpenType file. Best of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing reflow.

Erik Spiekermann’s Typo Tips
With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta¨, Meta Design founder, co-author of ’stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

Thirteen Ways of Looking at a Typeface
For the first ten years of my career, I worked for Massimo Vignelli, a designer who is legendary for using a very limited number of typefaces. Between 1980 and 1990, most of my projects were set in five fonts: Helvetica (naturally), Futura, Garamond No. 3, Century Expanded, and, of course, Bodoni.

Picking Type for Web
Picking Type for Web As a part of the visual design process for MIX Online’s upcoming redesign, I’ve been experimenting with typography. The task of finding a typeface that’s both aesthetically pleasing and legible, however, is a tricky one.

 

...GO VISIT

01. MindMeister

MindMeister is by far the most simplistic mind mapping tool in the top five, but its simplicity is definitely an asset. Once you’re logged into the service, you can create a fully functional mind map using little more than the directional arrows and the Insert key to add new nodes to your map. Additional customizations like font size and node colors are available for when you want to go beyond the basics. In the upper right corner is a navigation window, handy for when your mind maps become larger than the display space.

Exporting is also a strong point for MindMeister; you can export your files to a text outline, PDF, JPG, PNG, or GIF. MindMeister’s history function lets you view past versions of your mind map and revert to them if you desire. You can share your maps for public collaboration or hand-select collaborators.

Official link

02. Mindjet MindManager

Mindjet MindManager isn’t cheap by any means, but you get more than your share of value and sophistication for the hundreds you spend on the program. The interface and feature set of MindManager are very polished, and the primary menus are set up like the Microsoft Office Ribbon. After the initial installation, MindManager walks you through the creation of a sample mind map—helpful both to familiarize you with the interface but also to show you features you may have overlooked.

MindManager is definitely oriented towards corporate environments, including extensive integration with the Office suite and support for linking your mind maps directly into common database formats like MySQL and Access.

Official link

03. XMind

XMind is the kind of free application that makes you forget you’re not paying for the privilege of using it. The interface is simple and intuitive to use. You can quickly move through your entire mind map with only a handful of keystrokes or jump over to the outline view for even quicker navigation.

In addition to a basic mind map you can also create fishbone, organizational, tree, and logic charts. You can export charts as HTML, images, or text, and XMind comes a free account on XMind.net which allows you to share your charts online and embed them into blogs and web sites.

 

GO VISIT

Although Wordpress started as a small blogging system, it has now become a powerful CMS because but administrating your blog can be quite difficult sometimes. Luckily, there are some plugins that can make your life easier as an administrator.

Let me know if you think there’s a plugin that should be on this list and I will update it.

WP Stats – Download

Once it’s running it’ll begin collecting information about your pageviews, which posts and pages are the most popular, where your traffic is coming from, and what people click on when they leave. It’ll also add a link to your dashboard which allows you to see all your stats on a single page. Less is more.

StatPress – Download

Once the plugin StatPress has been activated it immediately starts to collect statistics information. Using StatPress you could spy your visitors while they are surfing your blog or check which are the preferred pages, posts and categories. In the Dashboard menu you will find the StatPress page where you could look up the statistics (overview or detailed). StatPress also includes a widget one can possibly add to a sidebar

Wassup – Download

WassUp is a new Wordpress plugin to track your visitors in real time. It has a very readable and fancy admin console to keep tracks of your blog’s users visits. It has a “current visitors online” view and a more detailed “visitors details” view where you can know almost everything your users are doing on your blog, it’s very useful for SEO or statistics maniacs. Now it comes with a new “Spy” view in Ajax like the Digg Spy. The aim of WassUp is the knowledge of what your visitors do when they surf your blog, it is not intended to show grouped statistics for periods like visitors per day, pageviews per months and so on (there are many others tools to better gain that, like Google Analytics). With WassUp you’ll get a cronology of your blog’s visits with a lot of details for each single user session.

Google Analytics for WordPress – Download
The Google Analytics for WordPress plugin automatically tracks and segments all outbound links from within posts, comment author links, links within comments, blogroll links and downloads. It also allows you to track AdSense clicks, add extra search engines, track image search queries and it will even work together with Urchin.

...go visit

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.

Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

1. Creating active navigation

Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it.

The ideal situation for creating active navigation is to do it server-side, because it massively cuts down on the amount of HTML and CSS needed. If generating an active state server-side isn’t an option, manipulating your body element to style each navigation element directly is also a fine choice.

As a third option, you can easily create active navigation with JavaScript.

Your active navigation state should always be different from your hover state.

2. Clickable labels & buttons

When you take the time to mark up a form properly a user can click a label to activate the associated form element and there’s a really easy way to show it off. This is a great piece of functionality built right into HTML. Unfortunately, very few users know about this natural gem of user interface.

Letting the user know a label is clickable only takes a line or two of CSS (depending on how you write it) to change the cursor from the default text insert to a more clickable and friendly pointer.

 

By now everyone’s well aware that submit buttons are clickable. I’ve always thought it was weird that this – obviously clickable – element doesn’t use the same cursor as a link. So I like to apply this bit of CSS to buttons as well:

label, button, input[type="submit"]{cursor:pointer;}

3. Linking your logo

Not linking a logo to your site’s home page is one of the more frustrating things I’ve come across on the Web. I can’t understand why someone wouldn’t so this. It’s so easy, and by now, it’s safe to say, users expect it.

Linking your logo is so common nowadays that many sites are finding that having a link labeled “Home” isn’t useful anymore, as users are just clicking the logo to navigate to the home page.

Sites such as Facebook, track user clicks by adding the “ref” parameter to each navigational element. Below is an example of how Facebook links their logo:

 

4. Increasing the hit area on a link

About a year ago, Ryan Singer from 37Signals wrote an article about how they padded link targets for better mousing in Basecamp. This is another small usability trick that you can use by simply adding some padding around links to make the clickable area larger.

This is a great addition to any site and it can help prevent misclicking on a link, which can often be a little frustrating. It also helps a lot in mobile Web design, where users click with their fingers and really need that extra large hit area on a link.

5. Adding focus to form fields

Applying focus to a form field is a growing trend in UI design. It lets the user know that what they just did caused something to happen (did that make sense?). It’s a quick and easy way to pass useful, unobtrusive information onto the user. Saying something like: “Hey! You just clicked here.” Can be very useful.

6. Providing a useful 404 page

Making the user feel comfortable is very important and displaying a big Apache error message on the screen isn’t the best way to accomplish that. A useful 404 page can go a long way and it doesn’t have to contain the numbers “4″ or “0″, as they aren’t very helpful to anyone other than the developer. Besides this, no one really needs to know the error code for anything that happens behind the scenes. Users just want a site to work the way they expect it to.

On the off chance a user does find themself on a “Page not found”, it’s much more helpful to lead them somewhere where they might be able to locate the information they’re looking for, by providing some apologetic text, a search box, or suggest some possible destinations. But try not to put the blame on the user for landing on a wrong URL.

Blogussion wrote a great article about creating an informative 404 page that lists some very good tips and even some code for those WordPress users among us.

7. Using language to create a casual environment

Writing on the Web is a big topic right now. It’s like we’re going down some giant checklist dealing with issues: HTML, CSS, progressive enhancement, accessibility, writing for the Web, and the all encompassing “Web standards”.

We’re hearing a lot about writing on the Web and it seems to keep changing. From the days of Steve Krug telling us to cut our content in half to using bulleted lists wherever possible.

Now we’re all supposed to write like we’re talking to a friend and it all goes back to making the user feel like they’re in a comfortable environment. When you keep the copy on your site casual, it makes a user feel less stressed, so even when they do encounter something confusing they can still feel a sense of relaxation and informality as they search for their answer.

8. Applying line height for readability

Line height is one of the things that can be directly inherited from physical media, such as books and newspapers. These sources have been around for hundreds of years and have had plenty of time to master readability and line height. So the next time you’re stuck on this, don’t be afraid to crack open a textbook and check it out.

This is an aspect of Web design that can be easily overlooked and easily abused. I usually start off with a line height of about 1.4em and adjust it from there, based on the design and content.

9. Utilizing white space to group elements

Grouping items together is one of the easiest ways to show association. You can do it with images, borders, or just plain old white space. Using white space to group elements creates natural associations between related elements that, even when read at a glance, can be easily picked up by the user.

As the eye scans a page, a user will naturally read the headings first. This happens a lot with top 10 lists (::ahem::). Hopefully, the content is interesting enough to grab some attention and entice the user to read a little more closely. You push users in the right direction by designing your content in a way so that things that are related actually look like they’re related.

10. Being accessible

By being accessible, I don’t mean Section 508 and ADA compliance. Accessibility, in this case, means being there for your users when they have a problem (responsiveness).

If usability is all about trying to make sure your users don’t get frustrated and leave, responsiveness is your last line of defense against losing that user to one of the millions of competitors who are a short click away.

Ultimately, you can do all the testing that you want and follow all of the usability advice that you can get your hands on, but everybody is different. Users will get confused and lost and eventually need some help. The amount of time you leave a user confused can be the difference between someone who will come back and someone who won’t.

When talking about accessibility, many people default to a conversation about the visually impaired, but accessibility extends far beyond that. For example, you have to make your web site accessible to users with bandwidth restrictions (dial-up connections, cell service, slow networks) and older browsers (some companies won’t let employees upgrade browsers).

If we do our best to make our sites as accessible as possible and respond quickly to questions we can create an overall experience that will leave the user constantly wanting more.

Customer service matters… even on a blog.

 

Go Visit:10 Tips to Create a More Usable Web