Cheat sheets are basically intended for those designers and developers who spend most of their working time in exploring different software environments and for them it is nearly impossible to remember shortcuts for each software environment, and this is the point where a cheap sheet comes in.

Here is the full list after this small jump. Feel free to share your views. Enjoy!

Black & White Cheatsheet For Photoshop

Megapixels and Maximum Print Size Chart

Adobe Flash CS4 Keyboard Shortcuts Cheat Sheet

Ruby on Rails Cheat Sheet

Color Codes Matching Chart HTML

jQuery 1.3 cheat sheet wallpaper

The Web Developer’s SEO Cheat Sheet

Adobe Photoshop 7.0 Quick Reference Card for Windows

Adobe InDesign CS2 Useful Keyboard Shortcuts

Creative Tip: Photoshop Lasso Tool Cheatsheet

HTML Character Entities Cheat Sheet

WordPress Theme Development Check List

jQuery

PHP cheat sheet – blueshoes

PHP reference sheet – basics

Creative Tip: Adobe Pen Tool Cheatsheet

CSS Shorthand Cheat Sheet

CSS Shorthand cheat sheet

RGB Colour codes

GoSquared

HTML Elements and Attributes

XHTML Character Entity Reference

HTML/XHTML Character Entities

Common fonts to all versions of Windows & Mac equivalents

CSS 2 Visual Cheat Sheet

jQuery 1.3 Cheat Sheet

jQuery Cheat Sheet

HTML 5 Cheat Sheet

jQuery Selectors

JavaScript Cheat Sheet

MySQL Cheat Sheet

mod_rewrite Cheat Sheet (V1)

Computer Arts Keyboard Shortcuts

W3C – Cascading Style Sheets, Current Work

XML (eXtensible Markup Language) in one page

Python Cheat Sheet

Adobe Illustrator Shortcuts

Adobe Photoshop Elements Cheat Sheet

Photoshop Toolbox Reference

I.D.E.A.S. Graphics Cheatsheet

ASP / VBScript Cheat Sheet

The Gimp Cheat Sheet

Cyro pantone foldout

CSS Cheat Sheet (V2)

CSS CHEAT SHEET

HTML5 Visual Cheat Sheet

jQuery 1.6 API Cheat Sheet

Script.aculo.us Cheat Sheet

CSS support in Opera 9.5

htaccess Cheat Sheet

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Advertise here with BSA

This is a guest post by Zach Katkin – entrepreneur, web developer, designer and writer – co-founder of Florida Web Design Company Atilus. Additionally Zach also owns a number of web properties including Promana.net, a resource for Small Business Software News including Basecamp Project Management.

I rarely make predictions, but after over a decade in the professional world of web design, I’ve recently seen a convergence of a number of different technologies and companies that are about to drastically (sort of) change the web, and how we operate computers. Before I get to where I believe the future is heading let’s review something:

XHTML & CSS

8 years ago XHTML & CSS were revolutionary. I won’t go into TOO much detail about my past (not that I want to be mysterious, it’s just mostly irrelevant), but I was lucky enough to get into web design with the addition of XHTML & CSS. You see, back then everyone used TABLES to build websites (some still do). The problem with tables was that you had to adjust EVERY page on a website in order to make a change, this took a lot of time, money, and just didn’t make sense.

Those problems all disappeared with the adoption of XHTML & CSS. No longer did a developer have to update every page in order to adjust the design or style of a site. Instead, CSS (cascading style sheets) told the browser what various XHTML elements needed to look like. In one tiny spot, you could define the background of a site, of a column, the color of text, etc. The seperation of HTML (markup/content) & CSS (the design), let to an explosion in web design. There were a few drawbacks (developers had to learn a new way to develop websites and a new way of thinking), but overall it has been a phenomenal change for devs, and site owners alike.

HTML 5 & CSS3

HTML 5 is the latest version of HTML (hypertext markup language) – the language for structuring and presenting content on the web. Most important within the context of this article is understanding the HTML 5 adds a number of new properties, namely APIs that allow your browser and websites to do things that were previously very difficult (requiring a myriad of other technologies to implement):

• 2D drawing
• Timed media playback
• Offline storage database (offline web applications)
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration
• Microdata

Where are we heading with all this? There’s a point here… I promise!

The Modern Computer

The modern day computer is [mostly] a means to access the Internet. A majority of users, even power users, use their computer to access online services and applications. And, even in the cases where some users continue to setup and install desktop software, many times that software already has an online counter part that competes with – if not exceeds - the capability of its desktop counter part. From email, through managing an organizations contacts and daily business all the way to managing bookkeeping and finances, there are MANY online tools for individuals and businesses alike.

Enter the Chromebook & Chrome OS

With all of the above in mind Google announced the development of Chrome OS back in 2009 – an operating system (an extension of Google’s Chrome browser) that continued this idea through to it’s final conclusion – THE OS IS ONLY A WEB BROWSER.  There is little to no local storage (no downloading and storing files/music/videos) you simply open it up, turn it on, and visit websites.

Watch This Quick Presentation by Google:

Google’s understood the blurring lines between web applications and their stodgy desktop counterparts for sometime… they pioneered the space with their Google Docs/Apps solution for small businesses (an online document creation/editing/storage tool). The idea of centralizing applications is nothing new. In the early 90′s IBM spearheaded (successfully) the adoption of “thin clients” by many corporate customers whereby an organization would install a giant central server and then computers would connect through cheap terminals.

This is that idea on a grander, more decentralized scale. Now you can open up a Chromebook (the nickname for a computer with Chrome OS installed on it) and, once logging in via their Google Account, instantly be shown a customized experience based on the data in your Google Account – including bookmarks, web apps, etc.

99% of users today need their computer for little more than surfing the web (and using the powerful applications that have sprung up on it) and the Chrome OS is the best solution for these individuals and businesses. While building the Chrome OS Google kept the following in mind:

• Instant-On Technology – Just pop open the lid and it turns on, no more waiting for your computer to start (typically 1.5 minutes)
• Super Small/Fast – Using the latest mobile technology Chromebooks are super fast for web browsing and general multimedia activities
• Inexpensive – This is probably where things will need to change for successful adoption. Chromebook’s which were very recently released, must come down in price. They are currently inline with similar tablet based solutions, but will need to drop in order to become a viable alternative.
• Security – Built from the ground up to be secure, Chromebooks are useless without a Google Account, and can instantly be replaced without ANY fear of your data being compromised.

With all of the above in mind, it’s clear that the future of the modern computer is almost complete cloud adoption, with decentralized software and user data. Instead the computers of the future will connect to the websites users feel best accomplish their tasks and the idea of installing software will be a thing of the past.

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we’re publishing. Also, it’s highly recommended to follow us on Twitter!

Chromebook, Chrome OS & The Future of the Web

Go to Source

—Craig Grannell, .net magazine, 9 June 2011 It’s official: W3C finalises CSS 2.1

Go to Source

To find more courses on Dreamweaver, check out our Killersites Video Tutorial Library!
Note that all of our videos are in a higher quality when purchased from our Video Tutorial Store or by subscription to our Video Tutorial Library!

Thanks,

Jody
killersites.com

Go to Source

In this post, we are showcasing a precious collection of 40 useful and powerful CSS tools and generators that save your time and energy while giving the best possible results. Take a look and feel free to share your comments with us.

YAML Builder

The Builder is designed for rapid development of CSS layouts, that are based on YAML.

Grid Designer

Grid Designer is an online tool for designing grids. It comes with different options to allow you customize columns, pixels, gutters and margins.

My CSS Menu

My CSS Menu provides the average webmaster with tools to create custom, cross browser compatible CSS menu. Our menu generator makes it easy to create web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS.

Csstxt

Csstxt helps you in illustrating the lots of different ways to add a style to a text file with the help of ‘a’, ‘p’ or ‘div’ tags.

Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

Firdamatic: the Design Tool for the Uninspired Webloggers

Firdamati is an online tableless layout generator that allows you to create and customise layouts easily by completing a simple form, making creating skins for your Firdamatic-based layout a breeze.

Ultimate CSS Gradient Generator by ColorZilla

This ultimate CSS gradient editor and generator, created by ColorZilla, is a powerful tool to create CSS gradients having cross-browser support.

Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

The 1KB CSS Grid

This is a brand new procure on the CSS grid that aims to be light weighted. You can use it to simplify page templates in support of content management systems.

Free CSS Template Code Generator

This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

GRIDINATOR

Gridinator lets you generate grids for the 960.gs, Golden Grid, 1KB Grid along with the basic generic grid.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.

CSS Grid Calculator

Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.

templatr

You can create an individual design for your Blog online with templatr which is a Template Generator and no knowledge of HTML or CSS is required.

XHTML/CSS Markup Generator

Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

Spiffy Corners – Purely CSS Rounded Corners

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made from JQuery, CSS3 and HTML5, and is totally free to use

SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own personal needs, branding, or style preferences.

CSS Layout Generator – CSS Portal

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages

CSS Menu Maker

CSSMenuMaker.com provides the average webmaster with tools to create custom, cross browser compatible website menus.

Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

CSS3 Please!

Display the output of your code instantaneously with CSS3 Please and adjust the element with this simple but powerful tool.

Tabs Generator

A CSS Navigation Tab Menu Generator that lets you twist size, colors, corners and more. In this way, you can create your own design and afterward download and utilize in your CSS style sheet.

CSS Sorter

Now you can organize CSS rules alphabetically to make maintaining your CSS files an easier task with the help of CSS Sorter.

CSS Type Set

A concrete typography tool named CSS Type Set lets you assess and find out how to style their web content.

CSS Layout Generator

The CSS Layout Generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Layout Generator

Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.

Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

Colors Pallete Generator

Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.

CSS Menu Generator by Webmaster Toolkit

This CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

CSS Table Wizard

Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

CSS Layout Generator

CSS Layout Generator is online web 2.0 tool for creating HTML+CSS templates (layouts). This tool generate an archive (in just a few clicks) containing two files: HTML & CSS, which represent the basic layout for your future site.

Fonttester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

CSS font style

The CSS font-style property is used to set the style of the font to italic or oblique.

CSS Color Codes

CSS color codes comes with two options; hexadecimal color codes and RGB color codes so that you can easily pick the color with the help of Color Picker and get its hexadecimal value from the bottom field.

CSS Colors

CSS Colors provides you a comprehensive chart showing the color values in hexadecimal as well as RGB. You can easily find out combinations of RGB colors from 0 to 255 that give you a total of over 16 million colors.

WordPress Theme Generator

This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge. Change the colors, settings, layout, preview live, click “save” and download your unique WordPress theme zip-file. Extract, upload, set, and you are done!

List-O-Matic

List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

MinifyMe

Easily compress multiple CSS and JavaScript files into one and run it directly on your desktop with this small AIR application.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Aesthetic preferences

Recent studies have confirmed that the design of a website can affect the way it is viewed by people from different cultures.

Anthropologist Edward Hall proposed a framework defining cultures by the styles in which they communicate, describing ‘high context’ cultures, for instance Japan or China, as cultures where a lot of information is taken from the context in which the information is delivered.

By contrast, ‘low context’ cultures, such as Germany and Scandinavia, prefer clear, explicit information. In terms of website design, this may mean that an immersive, intuitive, image-heavy design might work best in Japan while a more minimalist approach with clear, concise instructions or information might work better in Sweden.

As an example above, the homepage of Nokia’s Japanese site uses images that evoke concepts they would like the viewer to associate with their product – the action of the runners and the peace of mind provided by their support services.

Nokia’s Swedish site, meanwhile, presents images of various phone models with prices and nuggets of information, along with orderly arranged boxes describing the company’s services. Clearly a multinational company like Nokia will have conducted extensive market research, and it appears to have concluded that what works in design terms in one target market will not necessarily be as successful in another.

Design tools – CSS and Unicode UTF-8

It’s important to plan ahead when designing your site, and the use of Cascading Style Sheets (CSS) allows a degree of flexibility when it comes to changing your content later on. The primary benefit of CSS is that it allows the document content to be kept separate from the design – the design including such elements as layout, colors and fonts. Multiple pages can therefore share the same design template, meaning you don’t have to redesign every foreign language page from scratch.

You will also need a character encoding tool and UTF-8 is compatible with over 90 written languages, or scripts. Even if you don’t see the need for a site written in a non-Latin script such as Arabic or Hebrew right now, UTF-8 will allow for easy conversion in the future. You should bear in mind that some scripts may take more or less space to convey the same information while some languages in Latin script (such as German) have a tendency to use longer words than English and will also need more space on the page.

Navigation for all nations

In a language like English, which reads from left to right, vertical navigation bars are often located on the left-hand side of the page. Other languages, such as Arabic and Hebrew, read from right to left and the right-hand side of the page would be a more natural place for a vertical navigation bar.

Using CSS, it’s a relatively simple process to flip both the location of the navigation bar and the direction of the script. An even simpler solution however, and one that will lend a greater sense of cohesion to your multilingual sites, would be to use a horizontal navigation bar located at the top of each page.

Content – speaking everyone’s language

Lastly, you’ll need to consider the translation of your content. English may be most commonly used language on the internet, but that still only accounts for fewer than one in four users. Clearly, a monolingual approach would make your site inaccessible to a huge potential audience.

The simplest way to translate your content is by adding a translation widget such as Google Translate to your site. Inline translation code could also be used, but machine translation, while improving all the time, still has a tendency to throw up contextual and grammatical errors and can leave your site with an amateurish feel. Using a translation service provided by a native speaker from your target market will help prevent mistakes and retain nuance and meaning, but this can be an expensive option.

In the end, it will come down to the value your readers place on your website content – if mistranslations are likely to damage your brand, then it’s worth investing in professional translation, but if your multilingual readers only need to get the gist, then a machine translation widget may be fine.

A guest post by Christian Arno who is the founder and Managing Director of professional translation agency and localization specialists Lingo24. Launched in 2001, Lingo24 now has over 130 employees spanning four continents and clients in over sixty countries.

Contact Lingo24 with a translation request mentioning Smashing Apps before 30 January 2011 and receive a 10% discount on your first order.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

In theory, the worldwide web opens up your business, blog or personal website to an audience spanning the entire globe. In practice, creating a site that is both accessible and appealing to viewers from different cultures is not quite so simple.

The casual surfer from the UK might be under the impression that the internet is written largely in English, but that’s because language recognition systems will direct you to sites in your language as a matter of course. In reality, fewer than 10 percent of the world’s population speak English as their first language, so if you want to appeal to more than a fraction of the world’s population then you’ll need to build sites that can communicate across cultures.

Tools and Navigation

Cascading Style Sheets (CSS) allow you to keep your content separate from page design, meaning your text can be translated in the future without the need to redesign the entire page every time. Using Unicode UTF-8 will also allow a greater degree of flexibility. A character encoding tool compatible with over 90 written languages, it allows easy conversion to non-Roman alphabet scripts such as Arabic and Hebrew.

While English flows from left to right, some languages (including the aforementioned Arabic and Hebrew) are written from right to left, which can lead to problems with navigation bars. Vertical bars are usually located on the left of the page for left to right (LTR) language websites but, while it may be possible to simply transfer the bar to the right-hand side, it’s simpler and adds greater continuity to use a horizontal navigation bar from the start.

Colour and Design

Colours can be important in website design, helping to set a tone and reinforce a theme. It should be borne in mind however that the same colours can have different connotations from one culture to another. Orange has links to royalty and patriotism in the Netherlands and is a popular colour, whereas in Northern Ireland it’s associated with Protestantism and may serve to alienate part of the target audience. Similarly, white has connotations of peace and marriage in many western cultures, but signifies death and mourning in much of Asia.

Studies have also identified significant differences in the ways in which information is processed by ‘high context’ and ‘low context’ cultures. Viewers from high context cultures (such as India and China) have a tendency to view the site as a whole and take information from context, whereas low context cultures (Western Europe, the USA) look for explicit information. It’s not always easy to address this difference in website design but, at the most basic level, think an intuitive, interactive design versus rigidly structured and presented written information.

Domain and Server Location

Investing in a country code top-level domain for each of your target markets (for example .es for Spain or .cz for the Czech Republic) might be more expensive, but it will boost your rankings with local search engines and on the country-specific rankings of major players like Google and Yahoo!.

Making sure they are hosted on a server in the target country will also boost rankings and will prevent viewers from being misdirected via geolocation. Geolocation can identify a viewer’s location by checking the country in which their IP address is registered, and will then channel them to the appropriate language page. As many IP addresses are physically hosted in a different country, this can lead to surfers being routed to the wrong page. If you have a country-specific domain hosted on a server in that country, that page is the one that will show on any localised search.

Translation widgets

The simplest and cheapest option for translating the language of your content is to add a translation widget such as Google Translate or Microsoft Translator to your website, which will allow visitors to translate your content into the language of their choice. This negates the need for any major redesign of an existing website, but even the best machine translation tools are likely to throw up contextual mistakes and, at worst, may change the entire meaning of your original content.

Professional translation

If your budget allows, this is by far the better option. A native speaking translator will interpret your content and ensure it makes sense culturally and linguistically, rather than mechanically translating it word for word, helping to retain meaning and nuance and avoiding any embarrassing linguistic or cultural faux pas.

About the author

Christian Arno is the founder and Managing Director of professional translation agency Lingo24, experts in the foreign language internet. Lingo24 was launched in 2001 and now employs some 4,000 professional freelance translators covering a hundred different language combinations.

Contact Lingo24 with a translation request mentioning http://www.snap2objects.com/ before 30 November 2010 and receive a 10% discount on your first order.

Related posts:

1. Free Personal Web Server. Host Your Site Yourself
2. 10 Free Web 2.0 Fonts
3. Design Watch: Design Contests @ Zenhabits/Nielsen Norman Group/Asian Heritage/Karmaloop

Go to Source

To find more courses on Dreamweaver, check out our Killersites University!
Note that all of our videos are in a higher quality when purchased or found in the Killersites University!

Thanks,

Jody
killersites.com

Go to Source

To find more courses on Dreamweaver, check out our Killersites University!
Note that the all of our videos are in a higher quality when purchased or found in the Killersites University!

Thanks,

Jody
killersites.com

Go to Source

Currently most of the browser supports CSS2.1 and HTML 4.01. But as CSS3 and HTML5 are mostly launched, every browser making company is highly considering these two for their next version launch. And probably in IE 9 most of the features of CSS3 and HTML 5 would be compatible. Mozilla Firefox already supports many features included in CSS3 and HTML 5. The same way Google Crome and Safari too supports many features of CSS3. So it is really good news for present and upcoming web designers. These both provide less write more gain kind of stuffs. One would need to write very less line of code and would be able to get more features. If you are not much interested about your website’s user friendly GUI and attractive design then it does not matter much to you whether it is CSS2.1 or CSS3 and HTML 4.01 or HTML5. But if you are very much precise about the way your website look then you definitely got to know that what’s there in CSS3 and HTML5.

If we talk about CSS3 first, let’s see why it became a buzz in the arena of World Wide Web. It’s the features provided by CSS3 which is making it popular before even fully launching it. It provides highly dynamic and decorative features to the simple HTML page. It is providing stuffs like rounded corners, multiple background, direct web fonts, wrapping to the text, stroke and shadow to the text, 2D transformation to the object, animations, gradients, opacity, HSL and HSLA colour, background clipping, outline, box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector, and overflows-x and y etc. These are all the features you can play with, which were not there in the previous versions of CSS.

These features can be used to make the web page and its content load faster and accurate. As CSS is always embedded it would load simultaneously with the page loading and hence would not take any extra time for loading. Now take a simple example of box-shadow, if we use a previous version of CSS there is no option to give a shadow to a div or span any other attribute. So what the programmers do is—they put the shadow image at the bottom of the div to give the shadow effect. This extra image takes extra time for a page to load. Now, think about a shopping cart website which have around 100 products in a single page and every product div have shadow image. See, how much time and load would it cost to a single page? This is Just an example of box-shadow. The same example implies for the rounded corner div, Where there would be a background image to make a div rounded cornered. Giving a shadow to the text was never possible in the previous versions of CSS except you use jQuery which again would take more time to load. Previously, only RGB and Hex mode colours were supported but now one can use HSL (Hue-Saturation-Lightness).

Take another example where you need two images as a background of a single div. Is it possible to set two backgrounds? No. So what do you do? Take two div and putting overflow and then set the background of one to left and one to right, this is what you are doing for just giving two backgrounds. Isn’t this process too lengthy? That’s the reason CSS3 provides multiple backgrounds. Even background clipping is also possible. You can also use direct web fonts. And there are many more you can trick around. One can find out all the features and syntax for implementations at http://www.css3.info/preview/.

HTML5 which is also in a development phase is having some amazing features too. Have you ever thought of playing your video on your webpage without using any script of API? Do you think it is possible? With HTML5 it is. Even you can play video on the background and in front you can have a signup form and Text. HTML5 have introduced elements called ‘video’ which makes this possible. And even it is easy to implement and maintain. There are many other elements too, which are being embedded into HTML5; few of them are audio, footer, header, canvas, progress, time and the list is long. Again, these all elements are embedded in HTML and hence do not need any extra process of API to load these elements, so ultimately saves the load time and memory of the client machine. To know more about HTML5 elements, features and usages and maintenance you can refer to the given website: http://www.w3schools.com/html5/html5_reference.asp.

Go to Source

Web pages and their design are laid out using HTML. HTML stands for Hyper Text Mark-up Language. HTML is comprised of ‘tags’ or elements that tell your browser what the different areas of your webpage are. You can use these elements to define paragraph areas, images and their
dimensions and also font sizes, colors and styles etc. There are many HTML elements and a lot of these have varying attributes like width, height, name, etc. This article will not focus on specific HTML elements; our aim is to give you a brief overview of HTML before moving on to
how it has developed into HTML 5.

HTML came to life at the end of 1990. The original HTML, developed by Sir Tim Berners-Lee, comprised of about 20 elements which were strongly influenced by SGML, Standard Generalized Mark-up Language (The only exception to this was the hyperlink tag that allows links to be placed in web pages).

As the internet became more widespread, users demanded more functionality. This meant a huge development in browser technology and also in HTML. In fact, HTML was developed to version 4.01 before evolving into XHTML which incorporates HTML 4.01 and XML (Extensible Mark-up Language).

With HTML 5 a lot more emphasis has been put on the use of ‘Cascading style sheets’. This means HTML programmers can no longer depend on using ‘tags’ like <font> to style text with color, size, and font type. This now has to be done using ‘Cascading style sheets’ or CSS. The use of CSS means, for example, the text style on a website can be updated or changed with one small change in the CSS rather than having to update or change every <font> tag on every page. In fact, the <font> and <center> tags have been completely dropped.

A lot more importance has been placed on the use of ‘JavaScript’ and other client side programming languages that run in the visitor’s browser. This style of creating website pages is now highly encouraged. This is known as DOM scripting or ‘Document Object Model’ scripting. The DOM or ‘Document Object Model’ is a representation of how your browser structures the page you are looking at. In the browser everything is seen as an object that can be manipulated in some way by a client side scripting language such as JavaScript. A simple example of this is to have a background image with a ball moving over the top of it. In the DOM these are known as layers.

HTML 5 also introduces various new elements such as <nav>, used to define navigation areas and <footer>, used to define an area at the bottom of a page that will be used as a footer. This article will focus more on the multimedia elements <audio> and <video>.

The HTML 5 <audio> and <video> elements are a fantastic way of standardizing audio and video over the internet. This has been a long time coming. With so many operating systems being used to browse the internet it can be hard to decide what format to use. If we encode a video as a Windows Media File (WMV) it will not play on a Mac unless that user downloads a certain player or plug-in. The same can be said for encoding a video as a QuickTime file. It will play on a Mac but not on a Windows operating system unless a player is downloaded. And now we have so many variations of Linux operating systems being used, choosing an audio or video format that will play on all visitors’ computers is a next to impossible task.

The <audio> and <video> elements in HTML 5 will make choosing multimedia formats a lot easier. We will probably use the OGG format for audio as it is completely open source and patent-free. This format is very similar to MP3, AAC, and VQF. We will probably use the H.264 format for video. This format has already been adopted by Adobe and so can be used in Flash based players. An example of this is YouTube.com. They can now offer HD video online because they have used the H.264 standard. What is interesting about this is that visitors using Windows, Mac, Unix and Linux can view YouTube.com videos without having to download a new player. All that is needed is the Flash plug-in, which is on most internet browsing computers. With the HTML 5 <video> tag we will no longer have to depend on Adobe Flash Media player to play H.264 video as a cross platform solution.

So, how will HTML 5 effect video streaming over the internet? It will make video streaming over the internet much easier as the <video> element takes away the need to know high level scripting languages such as JavaScript and Action Script 3, it will not be platform dependent and website publishers will be able to relax knowing their video content will be viewable to all their visitors.

Post from: SiteProNews: Webmaster News & Resources

How HTML 5 Makes Using Audio and Video in Web Pages Easy

Go to Source

Brian Casel is a web designer and owner of ThemeJam WordPress Themes and CasJam Media. You can follow Brian on his blog at BrianCasel.com or on Twitter @CasJam.

It’s no secret that web design is a fast-growing industry. Virtually every type of business is in need of a quality website. There are opportunities at the large agency level down to freelancers developing small-business websites from home.

So how do you break into this exciting field? With little or no experience creating websites, getting yourself up to speed can be a daunting task. There are so many different avenues of design and development to explore. Which way should you go first? Which skill sets suit you the best?

We aim to give you an overview of a few things things that are essential to a well-rounded knowledge of web design. These are starting-points, if you will. Below each item, we’ve listed additional resources for you to continue on in your learning process.

Before we get into it, heed one important lesson: You can’t become a professional web designer overnight. It takes years to reach an expert level in any aspect of the field. But everybody starts somewhere, and there’s no better time than the present begin your web design education.

HTML & CSS

These are the building blocks of every web page you see. Yes, HTML and CSS are two different things, but they are completely dependent on each other. You can’t learn CSS without understanding HTML. You can’t build an HTML website without using CSS. Let me explain:

HTML is short for “HyperText Markup Language.” It makes up the building blocks of a web page. The language is composed of “tags,” which define various elements on the page. For example, a paragraph of text is wrapped in a paragraph tag, like so:

CSS is short for “Cascading Style Sheets.” CSS is used to add style and formatting to your page elements. If HTML is the framework of your house (the foundation, the beams, the bricks), then CSS is the presentation (the paint, the furniture, the decor). The concept of writing CSS is to add definition to an HTML tag, like so:

The above CSS code defines all paragraphs to be blue text color (represented by the color code, #0000ff), have a font size of 12 pixels, and have a margin below each paragraph of 18 pixels.

Additional resources:

• W3Schools – An excellent reference and learning resource for HTML and CSS.
• W3C Validator – A tool for checking your HTML and CSS to ensure it complies with professional standards for programming — otherwise known as “valid code.”
• A List Apart – A fantastic website about all things web design, with a focus on web standards.
• Net Tuts – An excellent resource for web development tutorials.
• Designing With Web Standards – One of the must-read books on web design, written by “The Godfather” of web standards, Jeffrey Zeldman.
• CSS Zen Garden – Both fun and amazing at the same time. See what types of design possibilities are possible just using CSS.

Photoshop and Fireworks

Whether you’re a designer, a coder, or both, you will undoubtedly be working heavily with one of these graphics programs. Adobe Photoshop has been the long-time champion of web design, photo editing, and print design.

Adobe Fireworks is a popular alternative to Photoshop. Fireworks is intended to be used specifically for web design, while Photoshop is more of a jack of all trades.

Whether you’re going to be designing websites from scratch, or you’re tasked with programming a website designed by someone else, you need to know your way around these programs. You’ll need to understand the concepts of layers, selections, and saving images for the web.

Additional resources:

• 10 Fantastic Photoshop Tutorials on YouTube
• Adobe Photoshop Support
• Adobe Fireworks Support
• PSD Tuts – fantastic blog with all sorts of cool Photoshop tutorials.
• How to Design a Clean Business Website With Photoshop
• PSD/HTML Conversion: Code a Clean Business Website Design

Design for the Web

For many folks, the first thing that comes to mind when you think about web design is programming. But what about design? Effective design for the web is arguably the most important aspect of this craft, yet it’s often overlooked by beginners.

Even if your focus is to become a programmer, it’s still important to have a basic background in design principles as this will help you to relate and collaborate with designers more effectively. Here are a few topics that are well worth your time to read up on:

Grid Design – The process of aligning page elements to an evenly spaced (invisible) grid, which makes for an aesthetically pleasing design.

• 5 Simple Steps To Designing With a Grid
• TheGridSystem.org – An excellent list of resources.
• 960 Grid System – Design and development tools for designing to a 960 pixel grid.

Web Typography – The art of arranging type, fonts, line spacing, and anything else that relates to the presentation of type content. On the web, there are many factors which affect this, such as varying screen resolutions and designer font serving technologies.

• I Love Typography
• 6 Ways To Improve Your Web Typography
• TypeKit – A paid font service for serving designer fonts in web pages.

Usability – This is the process of designing a user experience that promotes interaction and eases the user through the site navigation and action flows. This is also related to information architecture (IA), and user experience design (UX). Here are some related resources:

• UX Booth
• UX Magazine
• Usability Post

Design Inspiration – Every designer needs inspiration. There are tons of sites dedicated to listing outstanding web designs for you to browse through and formulate new and interesting ideas. Here are a few of our favorites:

• Creattica
• Unmatched Style
• The Best Designs

A Content Management System

Once you have a solid understanding of the basic principals of web design, you will eventually work on projects that require a “Content Management System” (CMS). These systems provide the ability to manage website content using a friendly interface, rather than editing code. It’s great for setting up websites for clients who want to run it themselves.

There many types of content management systems to choose from. Some are best used for blog or portfolio-type websites, while others are geared to provide E-Commerce functionality. Some are free to use, others are commercial products, while others have both free and paid options. Many CMS systems are self-hosted solutions, meaning you install the software on your own server. Others are hosted solutions, meaning you pay to store and manage your content on their server.

It’s best to focus on just a few in the beginning, and explore more options as you become more experienced. Here are a few we recommend looking into:

WordPress – It has traditionally been known as a blogging platform, but has evolved significantly into a more robust CMS. Check out these WordPress resources on Mashable:

• WordPress 3.0: The 5 Most Important New Features
• 10 Ways to Tweak Your WordPress Theme
• 11 Ways to Speed Up WordPress
• HOW TO: Get Up-to-Date on WordPress 3.0
• HOW TO: Secure Your WordPress Blog

Drupal – A very popular alternative to WordPress. Great for a site that requires many custom content types.

ExpressionEngine – Another popular CMS. Unlike WordPress and Drupal, ExpressionEngine is not an open-source project (you have to pay to use it).

Magento – This is an E-Commerce system, meaning it provides the ability to manage products, have a checkout process, and other common features you’d find on a shopping website.

Shopify – Another popular E-Commerce system. This one is a hosted solution, which means you pay to store all your products and website files on Shopify’s servers.

This list is just the tip of the iceberg. There are many systems out there worth considering. I recommend finding one that has as strong community around it to turn to for support, plugins, and other extensions.

A Final Word of Advice

Network and never stop learning. Follow anyone involved in web design on Twitter. Subscribe to as many relevant RSS feeds of web design blogs. Try and learn a new thing every day. Over time, all the pieces will start coming together and before you know it, you’ll be on your way!

I will leave you with a list of tools I’ve found to be extremely useful in my day-to-day work as a web design professional. I highly recommend you check these out:

FireBug – A must-have FireFox extension, which allows you to inspect the HTML and CSS of any web page. You can tweak code on the fly and instantly pinpoint areas in your code which need editing. Great for troubleshooting display issues.

FileZilla – A free FTP client for Mac and PC.

Panic Coda - This is my code editor of choice. It’s only for Mac. I highly recommend it.

Colour Lovers – A site for browsing and choosing color schemes.

MeasureIt – Another FireFox extension. This one helps you measure pixels on any web page. Very useful when perfecting your page layout dimensions.

Google Analytics – This is the go-to tool for tracking your website traffic.

Lipsum – This site generates “Lorem Ipsum” text, or placeholder text for mocking up websites before actual copy is swapped in.

Comp Fight – A Flickr photo search tool. Great for quickly finding images to use in your web design mockups.

VMWare Fusion – A mac application which allows you to run an installation of Windows on your Mac. This is helpful when testing websites across all browsers (something you should always do!).

More Dev & Design Resources From Mashable:

– Top 10 Resources for Design Inspiration
– HOW TO: Create a Pixel Fireworks Animation Using JavaScript
– HOW TO: Develop iPhone Apps With Staying Power
– 5 Things to Consider When Designing Your Mobile App
– 7 Hackathons Around the World and the Web

Image courtesy of iStockphoto, trinculo_photo

More About: CMS, CSS, fireworks, grid, html, List, Lists, Photoshop, resources, trending, typography, UX, web design, Web Development, WordPress

For more Dev & Design coverage:

• Follow Mashable Dev & Design on Twitter
• Become a Fan on Facebook
• Subscribe to the Dev & Design channel
• Download our free apps for iPhone and iPad

Go to Source

In “CSS is the new Photoshop” (?), Adobe’s John Nack correctly observes, as have many of us, that “Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.” Nack quotes Shawn Blanc, one of several concurrent authors of the phrase “CSS is the new Photoshop,” who cites as evidence Louis Harboe’s iOS icons and Jeff Batterton’s iPhone, both designed entirely in CSS and both only viewable in the latest Webkit browsers, Safari 5 and Google Chrome 5.

He’s not alone: Håkon Wium Lie from Opera predicts that CSS3 could eliminate half the images used on the Web. You can use various graphical tools to generate things like CSS gradients and rounded corners. As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content.

I think Adobe should be freaking out a bit, but in a constructive way.

So far, so good. But Nack’s “constructive” suggestion for Adobe, quoting Michael Slade, is to create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Nack acknowledges that this will be difficult. I propose that it will be impossible. Says Nack:

As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”

Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but.

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

Moreover, authoring good HTML and CSS is an art, just as authoring good poetry or designing beautiful comps in Photoshop is an art. Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines. Yes, there are machines that create music, and a composer like Brian Eno can program such systems to create somewhat interesting music, but such music can never be the Eroica or “This Land is Your Land,” because there is no algorithm with the creative and life experience of Beethoven or Woodie Guthrie.

Adobe already has a fine product in the code arena. Some hand coders knock Dreamweaver, but it does about as good a job as is possible of converting groupings of meaningless pixels into chunks of valid code. It is unreasonable to expect more than that from a tool that begins by importing a multi-layered Photoshop comp. Of course you can do much more with Dreamweaver if you use its code merely as a starting point, or if you use it simply as a hand-coding environment. But that’s the point. Some things, to be done right, must be done by the human mind.

There’s something to what Nack says. Photoshop could be made friendlier to serious web designers. Adobe could also stop ignoring Fireworks, as Fireworks is a better starting place for web design. They might even interview serious, standards-oriented web designers and start from scratch, as a new tool will suffer from fewer political constraints and user expectations than a beloved existing product with deep features and multiple audiences.

But while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The very assumption that a such thing is possible suggests a lack of understanding of the professionalism, wisdom, and experience required to create good HTML, CSS, and JavaScript. Fortunately, a better understanding is easy to come by.

Go to Source

Concentrate on content

Content is the most important element of any website. Make sure you provide content that is well written and relevant to your target audience. Remember that 75% of the world’s population do not speak English as their first language. So, to be truly multi-cultural you are going to have to translate your content at some point. Having good quality content from the beginning will make for a more successful translation. Try to avoid slang, colloquialisms and abbreviations.

CSS and layout

Using cascading style sheets to separate your content from design will be a big help in making your websites more accessible to different cultures. It makes it easier to switch the language of a website because the translated text can be dropped into an existing design without too much disruption. You can also modify the colour scheme of your website just by editing the style sheet – we will look at colour in more detail later.

When you style your text, remember that scripts in different languages require different line  heights and widths. Also consider the fact that the same paragraph in English may take up more space when translated into, say, German. You should bear this in mind when you are designing the size of your text areas. Using UTF-8 characters will ensure that the language is compatible with as many languages as possible.

Not all languages are read from left to right. The commonly-held theory that the eye is drawn to the top left area of a web page will not necessarily apply when the text is being read from right to left. You should also carefully consider the position of your navigation menus and sidebars. A menu on the left side of the page may not be very convenient for people who read from right to left. This problem can be avoided by using a horizontal menu at the top of the page.

Take care with colour

Keep in mind that colours can have different meanings for different cultures around the world. For example, red in Western cultures is often associated with power and passion, but in India, it can mean ‘purity’ and for the Chinese it often relates to celebrations and good luck. Use your visitor data to determine where your visitors come from and ensure that the colour scheme you have chosen is appropriate.

Styles of marketing

We discussed earlier that it’s easy to adapt a website for different regions of the world by using CSS, dropping in translated content and tweaking the colour scheme by editing the stylesheet. However sometimes, a complete redesign is necessary. This is usually because different cultures respond better to different styles of marketing and different design concepts.

This can be seen by comparing the Coca-Cola websites in Sweden and China. You can see that they are completely different designs. This is because the populations in these two countries respond better to very different styles of marketing. The Swedish website is rather minimalist, using a white background, modern-looking sans-serif font and a subdued Coca-Cola logo. It’s quite a sophisticated look that is in tune with Western European tastes and it seems to have a fairly personal, individual feel. This suggests that the marketers want to treat their Swedish customers as individuals, because research has shown that Western cultures tend to have a more individualist mindset.

The Chinese version of the site is more bold and brash. There is a large logo in the center of the header. The main image is of the Coca-Cola brand lit-up in neon lights in a busy city street. There is a strip at the bottom of the page showing all the brands that Coca-Cola owns. The message that’s being put across is that Coca-Cola is big, successful, well-respected and established brand. This isn’t speaking to customers as individuals but highlighting Coke’s enormous global popularity. This is very in tune with a more Eastern mindset that tends to be fairly collectivist in outlook. Consumers in China relate better to a brand that is respected and used by millions of other people – there is far less emphasis on the individual.

As you can see, successful cross-cultural web design requires some careful consideration, but if you start with the points we’ve looked at here, you will be well on your way to making your websites more accessible across cultures.

Free Vectors, Icons, Photoshop Freebies and Programming Goodies on Design Freebies

Want to advertise here ? Contact us

Related posts

You might also like these similar articles:

1. 20 Corporate Logos redesigned for Web 2.0
2. Pepsi ‘Design Our Pepsi Can’ Competition Opens
3. Sunday Design Resource – Issue 1
4. 41 websites to promote your design articles and resources
5. Sunday Design Resource – Issue 2

Go to Source

Therefore, this implies that we must run our website through all necessary tests. This includes CSS Errors, HTML Errors, Cross browsing Errors, WAP Errors (if your site is WAP enabled) and various other tests.Below is the list of Online Tools for Website Validation and Testing. So make it sure that you go through this post and run all the necessary tests on your website before making it live.

Validation tools

1.W3C markup validation service

This validator checks the markup validity  of Web documents in HTML, XHTML, SMIL, MathML, etc. This is an exclusive standards check for the document, so other checks are not available.

Checks done on:

1. Syntax and style analysis – Yes
2. Source code – Yes

2.CSS validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.The important thing is if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Checklink

Check links and anchors in Web pages or full Web sites.This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup and CSS.

4.Feed

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.You can validate by URL or Validate by direct input.

5.Mobile checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests. And find Is your Web site mobile-friendly?

6.Unicorn

Checks your site for all the general standards and see if there are rooms to improvement. It checks for the XHTML and CSS compatibility.

7.HTML Validator

The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases.

8.Dr. Watson’s site validation check

Dr. Watson is a free service to analyze your web page on the Internet. Just give the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. It rolls many features into one, so if you are looking for a single stop for checks, this one is the place to be.

List of checks :

1. Page load time check – Yes
2. Syntax and style analysis – Yes
3. Word counts – Yes
4. Spelling checks – Yes
5. Link checking – Yes
6. Search Engine Optimization check – Yes
7. Incoming links check – Yes
8. Source code – Yes

9.XML well checker and validator

Use this form to check an XML document for well-formetness and (optionally) validity. External entity references are included, even when not validating.It checks for spaces and syntax errors, while pointing to the line number at which the error was spotted.

10.Robots checker

This tool checks if your Robots.txt file is valid. Thought it may show some exclusions you’ve done as errors, they are good pointers to check if the commands will be misinterpreted or not. Good one and it is simple,powerful and accurate one.

11.URL checker

While it’s important to know if your website is running and your host is providing a good service, it’s even more important to be proactive about getting it back online fast so you don’t lose search engine position, miss out on possible revenue or blow.InternetSupervision™ is a service that monitors the availability of HTML, FTP, SMTP, POP3 email servers), supervises the performance of website and e-commerce transactions (including website forms) and provides website content supervision (cyber-attack monitoring).

11.Web page reports

There are various online services offering automated web page checks. pinkjuice.com/check is just a simple tool generating links to the report pages of some of those services, including emulators, validators, and accessibility checkers.And it’s handy to have a list of all the results pages, for example when sending a status report to a client about a website that’s being worked on.

Accessibility and evaluation tools

12.Webaccessibility checker

Go to Source

Back to the time when the look of a website must be defined inside the HTML, web designer experienced the nightmare like coding each <font> tag in every single web page. Thus, CSS (Cascading Style Sheets) comes to bring the salvation to lost web designer. It allows you to define your website’s appearance with just one single external file, which saves a pretty lot of your work and make your code management easier than never before.

But why do we need CSS Editor? Every glorious revolution has its dark side, as for CSS is every web browser like IE7 does not support the same effect defined by CSS, so often designer has to squeeze their mind to figure out a trick, hack or fix, that’s when CSS Editor comes in to help.

CSS Editor helps you to either understand how certain CSS value works by its WYSIWYG editor, or provide you an inspector to check out what’s exactly the cause for your CSS error, or probably guiding you to decide what CSS property you should use. And in this post, we’re going to review every useful CSS editor that you can get in the web.

Meanwhile, here are more CSS related post:

• 20 Useful CSS Tips for Beginners
• 50+ Nice Clean CSS Tab-Based Navigation Scripts

1. Stylizer

Compatibility: Windows
Notable Feature: Code Grid, Size Grips, Bullseye, Two-click Coloring

Stylizer is an absolutely unique CSS editor that focuses on real-time CSS editing. You can just enter a web address into its built-in browser that supports Firefox 3.5 and IE7’s style definition, and it would have all related CSS rules loaded for you to edit with its familiar point-and-click interface.

The editor comes with a Code Grid feature that makes your CSS editing more convenient as you can view the result immediately after you changed a value. Also with its diagnostic Bullseye feature, you can view associated elements at certain part of the site and edit it with points and clicks. Other features like Size Grips allows you to visually adjust the position of a CSS element, and with Two-click Coloring feature you’re granted a Photoshop-like color picker to choose any color for, let’s say, your site font. Oh, did I mention that all these edits are done in real-time, immediately viewable result?

With Stylizer it’s merely impossible to make a CSS mistake as it would restrict you to put any value that’s not compatible with the corresponding CSS property. However the software would fail to load certain CSS file sometimes, due to its unexplained critical error.

Stylizer comes with Basic and Ultimate version. While Basic version is totally free, the Ultimate version is available to you for 14 days after the installation, then it offers $85 for you to continue using its advanced features like Bullseye.

2. TopStyle

Compatibility: Windows
Notable Feature: Style Inspector, Style Sweeper, CSS Tidy

TopStyle CSS editor starts to amaze you by its first time configuration, when you can choose a style definition that shows only properties and values supported by either Firefox, Internet Explorer, Safari, or even iPhone OS 2.0, which is practically useful for cross-platform web designer.

Among all features I found Style Inspector is especially useful, as it works as a panel to let you include any CSS property with simple point-and-click interface. When you finished choosing all CSS properties you want, the source code would be automatically generated for you to save your time from repetitive and tiring coding.

One another good stuff about TopStyle is it shows browser compatibility underneath its style inspector, which you can see either the CSS property is fully supported by certain version of web browser like Internet Explorer 7, or it’s terribly buggy.

The editor comes as a trial version with limited feature, and you can unlock its full potential by $79.95.

3. Style Master

Compatibility: Windows, Mac OS X
Notable Feature: Stylesheet Template

Claimed itself as a master, Style Master did pretty well to create a CSS editing environment for any level of expertise. The software not only provides WYSIWYG editor that smoothens the workflow for CSS beginner, but also grant you the access to the very detailed information about every CSS property for expert to refer. You can browse and choose CSS properties by either category or alphabetical order.

Perhaps the most unique point is the editor itself contains almost 20 useful stylesheet templates for you to start with, and not surprising for a style master to have very clean, well-arranged and professional CSS rules defined in its built-in template.

You can enjoy the fully-featured software for 30 days, and pay either $59.99 or $29.99 for education license to open up its full potential again.

4. Xyle Scope

Compatibility: Mac
Notable Feature: Selection Mode, Smart Group, Text Editor Integration

Xyle Scope is a must-have free CSS editor for Mac, as it’s a truly professional CSS editor that allows you to surf website while fine-tune its CSS directly inside the editor.

Xyle’s browser comes with normal browser mode and selection mode which works pretty similar like Firefox plugin, Firebug that provides the CSS source viewing and editing, except that the editor allows you to save modified CSS values in their original location.

Using the ‘Smart Group‘ feature, you are able to filter out all rules influencing the way in which links are shown or those responsible for the layout, you can even narrow the result with its built-in search function, no more trial-and-error method!

Xyle Scope also offer integration with external text editors like BBEdit for more convenient and energy-saving coding work, just do a change and either the text editor or Xyle Scope would update all changes automatically for you.

5. Rapid CSS

Compatibility: Windows
Notable Feature: Syntax Highlighter, Code Completion, CSS Formatting

Rapid CSS is the way for more comfortable, convenient and complex CSS editing. It has its own fully customizable text editor with helpful features like syntax highlighting, code completion and built-in CSS reference for painless coding experience.

Caring about your CSS’ cleanliness, you can format your CSS stylesheet, like rearrange them by CSS type or create shorthand properties to make the stylesheet looks more comfortable and sweet. The built-in code validator also ensure your stylesheet’s not only clean but valid.

The editor comes with 30 days evaluation period with 30 uses, you can go for full version by $29.85.

6. Style Studio

Compatibility: Windows
Notable Feature: CSS Wizard, IntelliStyle

The main beauty of Style Studio lies within its CSS Wizard feature, which works to provide you immediate CSS effect with few points and clicks.

For example, you can select a font wizard, then choose a font family and set a font size for it, then font style, weight, variant…and boom! Rules are inserted into the stylesheet as a fully-validated CSS code.

Wizard feature also include color, border, text, positioning, classification and finally filter rules, just almost everything you can think of CSS. These wizards are pretty useful as you don’t need to type repeatedly to achieve certain complicated CSS effect. Another noble feature is IntelliStyle, which functions like code completion for you to choose certain CSS properties for your design purpose.

The downside of this editor would be its outdated browser’s style definition support, as it only support up to IE6 and, well, no Firefox.

You’re granted 30 days to enjoy the software and $49.99 to purchase it.

7. CSSEdit

Compatibility: Mac
Notable Feature: X-ray Inspector, Visual Editor, Selector Builder

Design beautiful, innovative and fast-loading web sites with a beautiful, innovative and fast app, that’s CSSEdit by MacRabbit. From features like Selector Builder until intelligent source environment, CSSEdit is designed for any level of expertise.

With the highly polished editor like this, you’re expected to see changes to your CSS stylesheet appeared in real-time, without tiring upload-refresh action. X-ray inspector is also created as a feature to diagnose CSS code from specific part of the site.

The innovative part of the CSSEdit is probably its Selector Builder that lets you describe your CSS style with plain English, not much interest for an expert but useful for absolute beginner.

Demo version restricts you to save file with fewer than 2500 characters, while you can pay $39.95 to wipe out all restriction.

8. EngInSite CSS Editor

Compatibility: Windows
Notable Feature: Measurement tool in Preview Mode

If you are a serious designer who cares about correct CSS specification, right CSS placement, or your CSS stylesheet must be fully-validated, then EngInSite CSS editor can be your favorite editor.

In this editor, you can add class, id, and element selector with the help of its built-in inspector, also you can convert the color to either Hex or RGB value, which is a very rare feature for a CSS editor. You can observe your result in the preview panel with measurement tools to ensure that your every design element is on the right position.

The editor also come with code completion but it’s little bit buggy, so I would say it’s semi code completion. Otherwise the entire editor is nice to use, except the very fact that the editor is quite outdated in term of browser’s style defnition support, as it only supports up to IE6’s style definition.

9. Stylesheet Maker

Compatibility: Windows
Notable Feature: CSS Tags

Stylesheet Maker is yet another standard CSS editor that offers a clean coding surface with file explorer panel, and some useful CSS tools to help setting font, color, margin, border, etc.

Compared to several CSS editors like Rapid CSS or Style Studio, Maker has less feature yet very clean interface, and this is good for certain beginner who don’t want to get things complicated, or CSS ninja who wants everything minimal and comfortable.

Although this editor is designed for intermediate user, its CSS Tags feature can help you to simply create a CSS rule with tags by clicks.

It costs $34 to own this editor, or you can buy it with other CoffeeCup software as a bundle purchase.

10. Arduo CSS

Compatibility: Windows
Notable Feature: Node, CSSTidy

Arduo CSS is a new born CSS editor which aims to please you with its intuitive and easy-to-use interface. With its clean interface and syntax highlighting, you are guaranteed to create and edit a CSS file without too much trouble and interruption. Also you can use its ‘Node’ feature to define CSS rules by points and clicks.

For those who feel your stylesheet is way too heavy, the CSSTidy tool from the editor can help you to optimize the stylesheet and wipe out all unnecessary code.

The editor is freely available on its official site.

11. Simple CSS

Compatibility: Windows, Mac OS X
Notable Feature: CSS file import, Point-and-click interface, Additional font database

Just as its name, Simple CSS has everything that a designer needs for simple CSS editing. You can import a CSS file into the editor and modify it with few clicks, check out the result in its preview panel, and take out the source code right away.

Although you can import almost every CSS file into the editor, you can only view 1 CSS rule at once with a click, and sometimes your import would cause error due to its limitation like no @rules support. Also the editor itself is not so flexible like you can only select ‘Auto’ or ‘Inherit’ for z-index property, but not directly give the property a value.

Nonetheless, it’s free and pretty handy for designer who needs a quick fix.

Bonus: More Editors and Tools

While they are not exactly CSS editors, these following tools are something you might want to have when it comes to editing CSS.

Firebug

The most popular and powerful web development tool which inspects HTML, modify CSS style and see the changes in real-time, available as a plugin for Firefox web browser.

CSS Usage

An extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

Web Developer

A Firefox extension for you to do a lot of cool things like view CSS sources or disable certain CSS stylesheet for design or development use.

Notepad++

A free source code editor and Notepad replacement that supports several languages including CSS. Contains features like Function Completion to help building your CSS design.

Coda

An advanced text editor with built-in CSS editor that provides you two CSS editing mode for more flexible designing experience, able to see the result instantly after changes made.

NetBeans IDE

An open-source and professional Integrated Development Environment with the most complete CSS reference in its code completion feature.

Aptana Studio

A complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, currently supports up to HTML5 and CSS3.

WebStorm

JetBrain’s IDE that implements relevant auto completion for everything including CSS, also you can get notified about CSS problems on the fly.

What You Think?

So you have scanned through all CSS editors reviewed by us, what’s your favorite CSS editor(s)? Or are you preferred more to use source code editor like Notepad++ or NetBeans IDE to code your CSS? We’re eager to hear from you!

Go to Source

Showcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have.

This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results!

1. CSS Layout Generator

Showcase of 40 useful and powerful CSS tools and generators. These tools should really relieve web developers  work. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

2. Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

3. Code Beautifier

Formats and optimizes CSS.

4. Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

5. CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

6. CSS Superscrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

7. CSS Validator

The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.

8. CSS Sorter

CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.

9. Browser Support of CSS Properties & Selector

This is a list of CSS properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, more will be added as time permits.

10. Layout Generator

Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.

11. Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

12. Blueprint Grid Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css  and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24  columns in your design, this generator now enables you that flexibility with Blueprint.

13. Grid Builder

The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes. Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

14. CSS Menu Builder

Choose from our 300+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus  that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

15. CSS Menu Maker

Here you can exploit gallery of professionally designed CSS menus, customize them and then download the HTML and CSS.

16. Jotform

Web-based WYSIWYG form builder

17. Quick Form Builder

Allows you to easily create CSS forms.

18. CSS Button & Text Field Generator

Generates CSS based buttons and text fields.

19. Rounded Corner Generator

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.

20. CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

21. Typetester

The Typetester is an online application for comparison of the fonts for the screen. It’s primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

22. Image Replacement Methods

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.

23. CSS Frame Generator

This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line.

24. Postable

“I absolutely hate having to switch all the “< ” and “>” signs in my code to “&lt;” and “&gt;”, respectively. I also hate having to write “&amp;” anytime I want to include an ampersand. This makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” Created by Elliot Swan.

25. Slickmap

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

26. Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

27. Listamatic

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

28. CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position  CSS property can then be used to shift the visible area to the required component image

29. Colors Pallete Generator

Welcome to CSS Drive’s Image to Colors Palette Generator! Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.

30. CSS Table Wizard

Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

31. Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

32. IE6 CSS Fixer

A tool specifically designed to ease the pain of the IE6 CSS debugger. This tool was conceived to decrease the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible.

33. Mappet

CSS image maps generator

34. Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

35. ReCSS

This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.

36. CSS Viewer

A simple CSS property viewer. Firefox addon.

37. The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

38. CSS Evolve

CSSEvolve lets you play with many properties of a web site, including the site’s color scheme, fonts, borders, and more. CSSEvolve works through a process of simulated evolution in which you select site features that you like and refine them through multiple generations.

39. Wordoff

Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:

• Attributes are removed for all elements except <a>s
• <span>s and <div>s are removed
• Empty elements are removed
• Consecutive line breaks are reduced to two

40. CSS Fly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet  files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the sceneries of your favourite websites.

Go to Source

We’ll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment!

This is a follow-up of a previous article called CSS3 Techniques You Should Know which you should also check out.

Multiple Backgrounds

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Selectors

CSS3 selectors allow you to select elements to apply style properties with greater specificity, giving you opportunities to select complex groups of elements. The new selectors not only save you time, but also help you keep your HTML markup to a minimum. You’ll inevitably reduce the number of classes and IDs you’ll need, allowing you to become a bit more organized with your stylesheet.

The general sibling combinator

There is a new kind of combinator that is being introduced in CSS3, the general sibling selector. This selector targets all of the siblings of a particular element. For example, if you wanted to target paragraphs in the same hierarchy as your level-1 headings, you would do:

h1~p {
  color: red;
}

The selector above will match the first p element below (giving it a red color), but not the second p element, because it is not on the same level (e.g. not a sibling) as the h1 element.

<h1>Heading</h1>
<p>This paragraph is a match</p>
<div>
  <p>This paragraph is not a match</p>
</div>

New pseudo-classes for greater specificity without scripting

New pseudo-classes introduced in CSS3 specifications allow you to select a group of elements that, before, would’ve required DOM selection using a scripting language such as JavaScript, or additional classes/ID’s.

Here are some new pseudo-classes:

• :last-child selects only the last child element.
• :nth-child(n) selects the n^th child, useful for zebra-striping tables.
• :not(e) selects everything except e.

SitePoint has a complete list of CSS3 psuedo-classes.

Resizing Elements

With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.

div {
  resize: both;
}

Better Fonts

The most commonly used fonts on the web are Arial, Helvetica, Verdana and Georgia because most computers have them preinstalled. With CSS3, you can break away from these fonts and use various types of fonts as long as it can be called from an internet-enabled location. When you call on your font, it will be displayed anywhere on the site. Because of copyright issues, you have to make sure that you can use the font before using the @font-face feature.

In the following example, the @font-face feature declares the name of the font family (you can name it anything you want) and the location of the font file (in this case a TrueType font file). Once it’s declared, you can use the font-family property to set the font of an element.

@font-face {
  font-family: SketchRockwell;
  src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
  font-family: SketchRockwell;
  font-size: 3.2em;
  letter-spacing: 1px;
  text-align: center;
}

Text Shadows

The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.

In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.

h1 {
  text-shadow: #003471 2px 5px 2px;
}

Preview of text shadow CSS3 property in Firefox 3.5.5.

Rounded Corners

Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.

For example, the below code will produce 10px-rounded corners for divs:

div {
  border: 2px solid #434343;
  padding: 10px;
  background: #e3e3e3;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 500px;
}

In the above code, -moz is for Firefox and -webkit is for Safari and Chrome.

Rounded corners in Firefox 3.5.5.

Summary

CSS3 gives us better control over our HTML elements, opening up possibilities of creating complex and flexible designs that have a reduced reliance on static graphics and scripting. We talked about some basic stuff that works in most modern web browsers (except IE8). To learn more about CSS3, check out the W3C CSS3 Current Work page and see CSS3 .Info for the latest news about the newest version of CSS.

Related Content

• Six Questions: Eric Meyer on CSS3
• 20 Useful Resources for Learning about CSS3
• 30 Exceptional CSS Navigation Techniques
• Related categories: CSS and Web Developement

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.

Go to Source

You are welcome to share more  useful tools that will be helpful for web designers and our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter as well.

ComparePSD

ComparePSD compares two Adobe Photoshop PSD files for you and highlights the differences. It can compare the difference Layer by layer,  Effect by effect. ComparePSD allows you to select the files in Windows Explorer by right-clicking on them.

Jing

You can use Jing to capture anything you see on your computer screen and share it instantly. There is an option to save as an image or short movie.

Simple CSS

To help you work with CSS, there is a free tool called Simple CSS, which runs on Mac OS X and Windows. Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

Adobe Type Manager Light

Adobe® Type Manager® (ATM) Light is a system software component that automatically generates high-quality screen font bitmaps from the PostScript® outlines in Type 1 or OpenType® format. With ATM, you can scale your fonts without the characters appearing jagged, and you can also enable “font smoothing,” which further improves the appearance of your fonts onscreen by using your computer monitor’s color palette to intelligently improve the rendering of characters.

TeamViewer

TeamViewer establishes connections to any PC or server all around the world within just a few seconds. You can remote control your partner’s PC as if you were sitting right in front of it.

Krita

Greenshot

Greenshot is a revolutionary screenshot tool optimized for productivity. You can save a screenshot or a part of the screen to a file within a second and apply text and shapes to the screenshot.

Evernote

Evernote makes it easy to remember things big and small from your notable life using your computer, phone, and the web. Everything you capture is automatically processed, indexed, and made searchable. If you like, you can add tags or organize notes into different notebooks.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Update: Twitter seems to have fixed the issue. If your pages are still having the issue, make sure to refresh and/or clear your cache. You may still see broken pages for a while.

-

If you’re taking a look at Twitter.com right now, you’re going to see some very messed up web pages. Images gone, design layouts borked, text overlapping, and missing fonts are just the start. Now thousands of Twitter users are complaining or completely confused.

From our perspective, it looks as if the Cascading Style Sheets (CSS) of Twitter.com is broken in some way (or the servers aren’t loading them). We’ll figure it out and update you when Twitter is fixed and why this massive error occurred in the first place.

In the meantime, here’s a screenshot of you’ll find on Twitter profile pages if you haven’t visited already:

Tags: twitter

Go to Source

DIRECT LINK »
Go to Source

To become a professional web designer, you need effective tools that would help you implement beautiful designs with solid coding techniques. Handy ready-to-be-used solutions and smart design tools are always nice to have, but good ones are often quite hard to find. And this is where we come into play.

In this post we have put together a useful collection of new web development tools to save developers and designers time, energy, and headaches. Let’s take a look at 40 new useful web development tools and resources in a goodie bag for you, including easy and fast tweaks to forms, snippets of code, documentation at your fingertips, fonts, and cheat sheets.

Also consider our previous articles:

Fresh Web Development Goodies Bag with 30 extremely useful development tools to inspire you and make your life easier.

Cheat Sheets

jQuery Visual Cheat Sheets
jQuery Visual Cheat Sheets are a useful and practical reference to jQuery 1.3 for web designers and developers. These six cheat sheets contain the full jQuery API reference with detailed descriptions and some sample code. The simple visual style design these sheets allow you to find everything you are looking for with only a glance.

PacketLife Cheat Sheets
This site has a multitude of PacketLife Cheat Sheets. These cheats are broken down into the following categories: Protocols, Applications, Reference, Syntax, Technologies, and Miscellaneous.

CSS Specificity – Cheat Sheet
One of most common difficulties with CSS is determining what CSS rule will be applied on the page. But it’s actually not so hard to understand how these rules are applied and the order of CSS Specificity. Here is a CSS Cheat Sheet to help you understand CSS Specificity better.

Cascading Style Sheet Level 2 Visual Cheat Sheet
CSS2 Visual Cheat Sheet a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers. This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for.

QA Style Sheet
The QA style sheet highlights specific HTML problems like use of deprecated elements, inaccessible images, layout tables, empty elements, or styling-related maintenance issues. Theoretically, it is “unobtrusive” in a sense that when everything’s fine it won’t cause any visible changes.

Complete WordPress Cheat Sheet
The number of WordPress functions can be dauntingly. Print or save a helpful cheat sheet for future reference.

Visual Cheat Sheet CSS Compatibility
This Visual Cheat Sheet will help you to understand CSS behavior in IE6, IE7 and IE8 versions. The two page cheat sheet contains some important CSS references like rules, elements, attributes, pseudo-classes, positions, and more all in one handy reference.

HTML 5 Pocket Book
This is a useful quick reference guide to develop your site in HTML 5.

JavaScript Framework Matrix
The JavaScript Framework Matrix gives an overview of popular JavaScript frameworks and their functions. There are various examples for frameworks and every snippet contains links to official documentation. This matrix shows different API styles and functionalities.

247 Web usability guidelines
Designing usable systems require much more than simply applying guidelines. Guidelines, however, can still make a much needed contribution to usability by promoting consistency and good practice. There are overal 247 web usability guidelines.

Firefox Extensions

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. It works by opening up the first page of the site you want to check and pressing the “Scan” button in the “CSS Coverage” Firebug tab. In case of a rich (Ajax or DHTML) site, open up as many divs, pop-ups or tabs in the page as possible and press “Scan” again. Visit other pages of your site and press “Scan” again. Each time you press “Scan”, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser. Information available per request includes: Request and response headers, Sent and received cookies, Querystring parameters, POST parameters and Response body.

Useful Tools and Resources

cu3er – The Free Flash 3D Image Slider
CU3ER is an image slider to create 3D transitions between slides, but so much more than that too. This is great! It is also a convenient and multifunctional solution that can be applied in a range of website building areas, from content slider to feature slider, and image and banner rotator. Consider using it when you want to grab the user’s attention.

Juicer – a CSS and JavaScript packaging tool
For best performance, CSS and JavaScript should be served up using as few requests and bytes as possible. Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can even check your syntax, add cache busters to and cycle asset hosts on URLs in CSS files and more.

IxEdit
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. IxEdit is especially useful to try various interactions rapidly in the prototyping phase of your web application.

FireCrystal
FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to “rewind” their interactions with web pages while showing the relevant code. It is currently an alpha release and can suffer from very long load times or crashes in more Javascript-intensive pages.

Code Snippets Gallery
To find some snazzy CSS tricks all in one convenient place, check out the code snippets gallery. There are snippets for CSS, .htaccess, HTML, JavaScript, jQuery, PHP, and WordPress.

eCSStender
Take control of your CSS. Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

Old Version
Old Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.

Search and Share
Search and Share makes highlighting text a more functional action. It attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing. This WordPress plugin can help you get credit for content, improve word of mouth for your site, help your content go viral and much more.

Fonolo
Let’s face it, calling large companies is a hassle: Wading through those dreaded touch-tone menus (”Press 1 for English”), scrambling to find your account numbers, scribbling notes to keep track of which agents said what. Good news! Fonolo is a free web-based service to call a company, letting you skip past their phone menus, automatically entering your account numbers, and creating a detailed call history for each company, with notes and recordings. Connect to the right person with less stress and hassle.

jQuery ListMenu Plugin
jQuery ListMenu Plugin allows you to easily convert a long and hard to navigate list into a compact, easily skimmable ‘first-letter’ based menu, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a list of all list items that start with that letter appear in a submenu. Removing the mouse pointer from the letter or menu closes the submenu.

Trademarkia
Trademarkia is the largest, most accurate, and most complete free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

Haystack
Haystack helps you discover the right web designer for your next project. You can run a search to show all web designers in any city who will work on projects for any budget.

HiFi RegExp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.

Documentation and Reference Guides

imedo / css_doc
This is a documentation generator for CSS files, similar to Javadoc or RDoc. It extracts file-scope documentation for each CSS source file; extracts documentation for rule sets (i.e. a set of selectors separated by commas with a declaration). Files can be separated into several sections. For rule set documentation, HTML code examples can be incorporated into the documentation.

gotAPI
gotAPI.com provides search and documentation at your fingertips. For developers, this is a fast and vast collection of quick references for HTML, CSS, JavaScript, AJAX, Web2.0 and other software technologies.

Forms

FormToWizard plugin
This detailed tutorial and jQuery plugin will allow you to turn a long form into a wizard with “steps left” information. The entire process of filling a web form can become a step with a description, input fields and navigation that is common for wizard forms – back and next.The entire process can be done with this handy plugin.

Contact Form Study
The fewer questions you ask in a form, the more people will actually complete it, but to what degree? Less is more. Check out this study and the findings to improve your forms.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)
Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element’s built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.

Timeframe
Timeframe is a click-draggable, calendar that offers users to pick a date range for their input.

Scalable CSS Buttons Using PNG And Background Colors
With this article and script, you can create dynamic CSS Buttons using PNG transparency and background colors that degrade nicely and will support full scalability.

Adaptive web forms
Web forms could adapt to user’s behavior, instead of users adapting to them. This could help user experience and usability by saving data so the next time your regular readers are enabled to quickly post comments. However, besides saving just data, the whole user interface can be adapted to provide a different kind of interaction for returning visitors.

A rich password widget for your web forms
This rich password field widget not only has a password strength meter but also has other features that your users may love to have. When you type your password, the password field shows a mask to prevent an ‘over the shoulder’ social engineer. This also provides the ability to show your user the password they type. You can also quickly generate a strong password.

Linkification
Linkification Converts text links into genuine, clickable links. To view and set options, you can (1) use the Linkification right-click context menu, (2) right-click the status bar icon and click “Options”, or (3) click Tools->Extensions, and double-click the Linkification item.

Fonts

jQuery Powered Text / Font Resize Widget
Text resizer, or Font resizer comes handy when dealing with readers who browse in different browser resolutions. It gives them the power to choose the way they read the blog. ThisjQuery widget allows your users to resize text/font on your blog.

Code Style: Most common fonts
Selecting the right and correct font is important. How sure can you be that the font you specify will be present on the end user’s machine? This is a list of the most common fonts for Windows, Mac and Linux and should give you greater confidence in selecting a font.

IE6 Helpers

IE6 CSS Fixer
As web developers, we want IE6 to just die and roast in hades. But until that happens, this is a handy tool. This tool decreases the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It is meant to get a good head-start by fixing roughly 40-60% of all your IE6 issues with just one click, outputting a rough CSS that can be placed in a separate section and can be used as a solid start to finish up the rest of your IE6 debugging work.

Ultimate IE6 Cheat Sheet: How To Fix 25+ Internet Explorer 6 Bugs
After scouring the web for resources, here is the ultimate list of IE6 fixes put together in a reference manual as a resource for anyone who has to deal with Internet Explorer 6.

Paddy – Venn Diagram of IE6
Well, that’s not really a help, but it says it all. Venn Diagram of our favourite browser, Internet Explorer 6.

Go to Source

26 Vote(s)