Here is a list of 10 brilliant resources to put into your own little grid-based design box.

Boilerplates

If you feel like doing it without having to create your own CSS framework (I can already see a bunch of you nodding your heads with great enthusiasm), you can check out these boilerplates.

HTML5 Boilerplate

HTML5 is fast becoming the No. 1 used, experimented on and recommended format for just about any project. The versatility provided by the update to the old classic is a big reason for that, and there have been some amazing experiments that show what it is really capable of.

Gridless

Compatible with both HTML5 and CSS3, this boilerplate makes it easier to create websites viewable on multiple browsers, with design specifics like layout and typography as a main focus.

Traditional Frameworks

If you want to go with what is affectionately referred to as "old" frameworks – showing how quickly new technology truly is released – you can try out these dinosaurs that are still just as good as the day they were released.

960 Grid System

This is one of the original sites dedicated to existing framework and design. A great deal of new designs originated from this source. You can find a lot here to get you along.

YAML

Standing for "Yet Another Multicolumn Layout," this framework describes its products as "bulletproof and flexible." That is a promise it is able to keep, as it gives you the tools you need for simple and rapid CSS framework development. It has everything you need, so YAML is a must to check out.

Brand Spankin’ New Frames

Sometimes you want something new and cutting edge. These websites offer that, though most of them take bits here and there from the old classics to keep them relevant to the original grid we have all come to know and love.

Columnal

This grid system is a really nice one. It was created by taking a number of CSS layouts and combining their elements. Then, custom coding was thrown in the mix to provide a unique style. Each piece for the new system was taken from both 960GS and CSSGrid, based on their elastic grid design.

Skeleton

If your main concern is having a boilerplate that is mobile friendly, this might be the choice for you. The CSS/JS mixed files are made to allow for development that works at any screen size. The flexibility makes it easy to create one site that will work on mobile screens as well as standard laptop or computer screens.

G5 Framework

For front-end framework compatible with the standard CSS3 – as well as HTML5, jQuery and PHP – your best bet is G5. It is a great starter for any basic website, made specifically for fostering efficiency in web development. It has a great list of features.

Easy Percentage Grid System With HTML5

The name is a bit of a mouthful. But the layout is clean and simple, working on a six-column grid. If you are a beginner who doesn’t know that much coding, you will want to stick with this one. It has a full tutorial on how to change things like the column titles and content. It also shows you how to add or remove columns without disrupting the design.

jQuery Masonry

This is a jQuery-specific plug-in that creates a unique layout with a great image-heavy design. The whole build is based on a grid that is different from many of the standard column designs you see today. It pushes it all into a much more compact and well-organized design than the CSS floats standard.

Less Framework 4

Less Framework is extremely simple. It takes a single grid and gives you four layout options and three typography presets in one package. The idea is that you have a more basic layout, allowing for a more adaptive website without the need for future framework. Whether it is viewed on a PC, laptop, tablet or mobile device, it will fit properly.

Conclusion

Whether you are a fan of frameworks or not, you will find what you need to take advantage of simple grids for web designs on these 10 sites. They give you amazing resources, and they are only a few of what is out there.

Leave your suggestions for other great tools to put into your grid-based design resource box in the comment section below.

Underscore:

ActionScript2.0 and ActionScript3.0 are different. For those designers who need to adjust the shift, some mistakes were made by habit. The most common one is to remove the underscore (._x, ._alpha, etc). ActionScript2.0 uses a lot of attributes that start with the “_”, whereas in ActionScript3.0, you have to remove the underscore from all properties.

Different Percentages:

Percentage is another difference between ActionScript2.0 and ActionScript3.0 which causes common mistake by beginners. For example, you set 50 to an alpha property, but it’s still 100% opaque in ActionScript3.0. That’s because the valid percentage range is different between ActionScript2.0 and ActionScript3.0. The valid range of ActionScript2.0 is 0 to 100; whereas in ActionScript3.0, it’s 0 to 1. So you need to change the value to 0.5 to achieve the 50% result.

Mixing Up Property with Variable:

When trying to create several of the same items, you may mix up the “name” property with the variable name. For instance:

for (var i:int = 0; i < numMCs; i++)
{
var mc:MovieClip = new MovieClip();
mc.name = "mc" + i;<br/>
mc.x = i * 40;
}
mc0.y = 50; //Error

It is a common mistake made by beginners which often works anyway.

Forgetting to Embed the Fonts:

Font is an indispensable part of flash. Very often you add a particular font to make flash special; but sometimes the problem occurs that it doesn’t play the way you want. It is usually noticed when you test your SWF. So if you are testing a SWF, don’t just testing on your own computer, but other’s as well. Because non-standard font may not probably installed on users computer. The fonts will display correctly if they exist on the machine running the SWF, but will revert back to standard system fonts when not. To avoid such mistake, you need to embed any fonts you are using in your SWF.

Variables and Constants are Case Sensitive:

For example: yourdrivinglicence and yourDrivingLicence. In ActionScript3.0, they are different variables. The single-word variables should be named with a lowercased first letter; the multi-word variables should begin with a lowercased character and subsequent words capitalized.

On the other hand, constants should be entirely uppercase. Designers need to realize the difference; it is helpful to differentiate your variables and constants.

Using Flash to Imitate HTML and CSS:

First of all, check this website, and what is your feel? At the very beginning, I feel it’s cool, but after I make a deeper view, I close this site within 10 seconds. Cause I can’t even open links in a new tab or can’t copy any selected text.

It is another common mistake of inappropriate use of flash – imitate anything by flash. Flash is used to make attractive visual effects, such as graphic motion, video and audio; but don’t try to imitate HTML or CSS, that’s totally unnecessary. Long texts shouldn’t be embedded in flash, because it’s difficult to work with the embedded text once you need to. So make use of flash when you really want to do so.

Using Flash as the Only Way for Animation:

Flash is a great tool for creating web animation and it has achieved large popularity among designers. But using flash as the only way is a big mistake which many designers haven’t realized. First of all, flash is not text, but animation, so it is not search engine friendly, that’s why web is tortured with those ubiquitous animation type intros. Secondly, flash is slow to load. Don’t expect every visitor has a 10M bandwidth. Think about that, if your visitor waiting for the flash landing page with their fingers knocking on the table, you are actually killing their user experience of your website. The consequence is you are probably losing your visitors.

To avoid such a mistake, you can use HTML5 animation instead. HTML5 animation is search engine optimized. So here comes another question: you are not expertise in HTML5, so how to make that possible? Well, as a matter of fact, you don’t have to be expertise in HTML5; there are tools out there for flash to HTML5 conversion, such as SWF Decompiler or Google Swiffy and etc. hey help you to convert SWF to HTML5 within several minutes.

The mistake is one of the best teachers in our designing career; it helps us in the way of promotion. If you encounter with the similar situation, don’t forget to avoid those mistakes. Besides if you ever be tripped up by other mistakes, leave us a comment to share. Because the more we learn, the better designer we are.

1. Create a Flash Login System Using PHP and MySQL

This tutorial will demonstrate how to create simple but professional Flash login system using three different programming languages; AS3, PHP and MYSQL.

2. Get User IP Address Using PHP and ActionScript 3

An Internet Protocol Address (IP Address), is a unique number assigned to every device connected to the Internet. For different reasons, it can be useful to get the user IP address, like blocking a spammer user in a chat application for example. In this tutorial, I will show you how to get and display the user’s IP address using PHP and ActionScript.

3. Using Actionscript 3.0 With PHP : Loading External Variables

Creating dynamic websites which combine the power of Flash or Flex with PHP is easier than ever with ActionScript 3.0.

4. Connect to PHP with Actionscript 3 and Post variables to PHP

This is the simplest way to communicate with PHP and Actionscript 3 and it’s extremely fast and efficient as well.

5. Flash Contact Form in ActionScript 3 and PHP

This flash contact form is simply made in Adobe Flash CS3 ActionScript 3. Email validation is better than previous version in ActionScript 2. It sends the form field variables to PHP and loads the response variables back to Flash using URLVariables, URLLoader, and URLRequest classes. It will be very useful for you to use or adapt it for your Flash projects.

6. Introduction to Flash and PHP

This is the first part of a series of tutorials looking at using PHP and Flash. In this first tutorial we’re going to take things relatively easy.

7. Actionscript 3.0 Tutorial PHP MySQL Bar Graph Dynamic Basics [video]

Learn the very basics of creating dynamic bar graphs using Flash Actionscript 3.0 for CS3 CS4 and CS5. We use PHP and MySQL for dynamics.

8. Creating an Email Form with Actionscript 3.0 and PHP

Developer will explain then describes step by step how to create a basic form of sending email using Actionscript 3.0 and PHP.

9. Hit Counter Flash + PHP for full Flash website pages

With this tutorial you will learn how to create Flash hit counter using Actionscript and PHP.

10. Flash Website Voting Poll Tutorial: Actionscript 3.0 PHP MySQL [video]

Learn how to build more creative polling and voting applications for all of your website projects. We are using Flash Actionscript 3.0, PHP, and MySQL.

11. PHP Session Variables + ActionScript 3

This is a forum post which will help you in using Session Variables with PHP/AS3/MySQL.

12. Object Oriented ActionScript 3, using PHP & SQL

This tutorial explores one of many methods, which could be used to allow an ActionScript 3 swf file to communicate back and forth to an SQL database, storing and retrieving values in a table.

13. Build a Dynamic Gallery with ActionScipt 3.0 and PHP

In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.

14. Create a Comment Form with Flash, PHP, XML and MySQL

In this tutorial, developer will show you how to use Flash, PHP and MySQL together. We’ll build a simple comment form that takes entries and stores them in a database. We’ll use PHP to retrieve the entries and format the comments into XML form.

15. PHP/Flash Score List [video]

This tutorial explains how to make a asy and simple PHP/Flash/MySQL high score list for your website and flash game.

16. Creating a Reusable Flash Uploader with ActionScript 3.0 and PHP

In this tutorial developer will show you how to build a Flash uploader for uploading files from the user’s computer.

17. Flash guestbook with PHP

Learn how to create flash guestbook using PHP and Actionscript.

18. Developing Flash based applications with PHP

Here is a simple tutorial with step-by-step learning on how to connect make Flash based applications to interact with PHP programming- helping you to start and explore backend database driven Flash.

This can include text elements, form fields, headings, images, and so much more. CSS properties can also be easily manipulated using just a few lines of jQuery. In this overview we’ll be going over some of the best features for DOM manipulation.

Much of the code is built around the newest version of jQuery which at the time of writing is 1.3.2. The library is backwards compatible for most functions so primary CSS manipulation shouldn’t cause any errors. If you have any questions check out the release documentation and page wiki.

Getters and Setters

Before jumping into code we should clear up some simple lingo. There are two main types of functionality we’ll be working with in manipulation functions. Getters are used to get any type of data and return some form of result. This can include dynamic data responses or complex algorithms.

Setters are in place to change or update the current value of a page element. DOM objects are often referenced through CSS from an ID or class name. jQuery uses the internal method .attr() to update the value of any element’s list of attributes. However it can also pull data from any element being used to just check the current value – this is both a setter and getter style method.

Among many of these methods are all 3 types. Combination functions are very useful since they provide response information and also hold the ability for document manipulation. CSS properties are some of the easiest to build upon and provide the most delicate environment for practice.

Dynamic Classes

The most popular method .addClass() is commonly seen in jQuery scripts. It can be useful to manipulate a page element and change its class on the fly. As a simple example consider a user removes a friend or deletes a message from their profile. You may then manipulate that entry in the list to change its class to “deleted” or “old”.

This gives the animated effect of applying the action right after the user clicks. This can be done with a jQuery Ajax() call and simply apply an addClass() method towards the end of the return statement.

$('p').addClass('myclass secondclass');

The function can also be used to affect many page elements at once. For example the code above targets all paragraph elements on the page and adds two different classes to them. The individual entries myclass and secondclass are separated by a space and delineated inside the addClass function.

Checking Classes

removeClass() is just the opposite and provides a self-explanatory effect. You are able to chain methods by removing a class from an element and also adding a new class onto the same object. This type of coding is very convoluted and proves to be a bit more distracting than useful.

Also in the same range is the .hasClass() method. This only requires a target parameter and will return a boolean value if the matched element(s) has a class or not. This can be extremely useful when looking to apply a new class onto elements and you’re unsure if they are already in place.

You may also have an interest in .toggleClass() which will add or remove classes based on the element’s current state. For example this could be used on a drop-down menu with an open and closed state. Check out the toggleClass documentation if you want to find out more uses.

Building Directly with CSS

If adding new classes isn’t really your style you may consider directly manipulating page objects with CSS. The .css() method is used to pull any property value from the selected object. This can be done multiple times by separating each query with a comma.

The shorthand writing passage for the CSS method also allows you to apply function code inside the parentheses. This code can parse complex maths and perform loops for data manipulation. Below is an example piece of code applying a few CSS properties to an element under the ID “myFirstElm”.

$('#myFirstElm').css( {width : '30px', height : '10px', color : '#000'} )

You may notice this is not the most elegant solution for CSS styles. It’s often much easier to write out the code in advance and save this as dormant styles in your global stylesheet. In this way you just need to switch classes to bring about the same effect as applying a multitude of properties as shown above.

Much of the manipulation done with the CSS method can also be applied with other jQuery functions. If you’d like to delve into other tutorials a bit deeper check out our list of jQuery tutorials for an exclusive set.

HTML Elements

Each HTML element has internal contents based on its placement in the tree. The Document Object Model can be viewed as a hierarchy tree which shows the root nodes and all of their children.

With the jQuery .html() method you are able to directly pull all internal HTML from a block element. This is similar to each browser’s native innterHTML property with more dynamic features. With the html() method you are able to target any page element and pull/manipulate its contents from any event. This could be a button press, mouse over event, or anything similar.

Attributes

Each HTML element commonly has a few attributes associated with it. Even HTML and body tags are now seeing attributes with useful values added into pages.

With the powerful .attr() method you can both set and get attribute values. After targeting your jQuery element it’s important to realize which functionality you’re going to be using. By targeting just a single attribute name you can check to see if this is set on the current element and what its value is.

Below is sample code for adding an alt attribute to a simple page image. This code will work to either add a new alt tag or overwrite the current value. This is what gives jQuery so much power and shows what you can truly accomplish with a small library of manipulation functions.

$('#pagePhoto').attr('alt', 'Here is my image alt text');

Along with .attr() there are many other sample methods which can pull data about an element. .height() and .width() will pull the exact measurement of an object’s height and width at the time of calling a function. So if you have an expanding box you can create a for loop to output each length/width combo as it grows.

Conclusion

jQuery is an enormous library and it will require some time to scour all the information at hand. Not every function will prove to be useful to you so as a developer it’s important to pick and choose your favorites. Figure out which type(s) of functionality you prefer the most and practice building this through many different means.

The open-source nature of the project shows how quickly plug-ins can be built and added into code repos. Document manipulation has been around for years but has just recently broken into the spotlight with its ease of implementation. Most modern CMS packages will come out-of-the-box running jQuery or a similar JS library. By studying the basic functions ahead of time it will become much easier to adapt as a jQuery dev in the coming years.

We will mostly be covering basic ActionScript techniques, thus it is not required to be an exceptional whiz at programming. For this tutorial I’ll be using Adobe Flash CS3 with ActionScript 3.0 as the default language.

Building our .FLA File

Each flash project you create should be saved to disk as .fla inside a root directory. I’ve created a new document 630×575 and saved as YouTube.fla.

Getting familiar with the Flash interface may take a little bit of time. Most of the work we’ll be doing is integrated in the lowermost panels. More specifically we’ll be dealing with properties and actions.

Properties will allow you to update the current document width/height and other advanced settings. Actions is where all the real fun happens and where our code is stored. Each layer as a series of keyframes which store ActionScript to manipulate transitions and effects.

You’ll notice a layers panel towards the top above the project stage. The first layer should be named “Layer1″. Change that to Actions and tick the small lock symbol off to the right side. This sets a single layer in our file dedicated to ActionScript code, which means we don’t need to go searching around for anything. Locking just ensures we don’t accidently place elements in that layer.

Designing Page Views

The next step is to create our physical layout. I’ve created a new layer titled “views” which is going to house 6 MovieClips. These will actually become placeholders for the dynamic thumbnail shot YouTube generates with each video.

To create these check insert->new symbol or simply tap F8. Here a new menu comes up asking what type of symbol you are creating. Movie Clip is perfect set along 120px width and 90px height. Once the symbol is made alter the clip’s instance name to “ytThumb” + 0-5 for each clip. So for example the first would be labeled ytThum0, the next ytThumb1 and so forth.

Now we can move back into our actions panel to start really developing. If you are having trouble with creating each movie clip don’t fret. They are not truly necessary at this point, but it does save time to create each instance beforehand.

Beginning the ActionScript Code

Click back on the first keyframe in the Actions layer. From here check the bottom panel and move from properties into actions. The panel will expand much higher and include a text box – this is where our code will go.

To start off we will define a few variables to hold namespace references. These ensure that when pulling data from Google and YouTube’s servers we can interpret the return properly. Also we include a Security.allowDomain call to let Flash know we can trust data downloaded through YouTube.

Security.allowDomain("youtube.com","http://youtube.com","www.youtube.com");
var atom:Namespace = new Namespace("http://www.w3.org/2005/Atom");
var gd:Namespace = new Namespace("http://schemas.google.com/g/2005");
var yt:Namespace = new Namespace("http://gdata.youtube.com/schemas/2007");

default xml namespace = atom; // very important!!

var vidCount:int = 6;
var dataArray:Array = new Array();

As an example above we have 3 new namespaces defined as atom, gt, and yt. These correspond with atom RSS feeds and two primary namespaces relating to the YouTube API. By the last line we are setting the default namespace for all XML code to atom.

Without these lines ActionScript will try parsing the return XML from YouTube’s API as plain XML instead of an atom feed. This results in bugs and errors flying around, so it’s much easier to clear this up first.

We are also creating two simple variables towards the very end. vidCount is used to define how many videos we will pull from each feed. dataArray is currently set to an empty array. A future function will pull this data and feed instances of videos into an array list.

var xmlUrlReq:String = "http://gdata.youtube.com/feeds/api/videos/-/Tech/";
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

// loader event listener
xmlLoader.addEventListener(Event.COMPLETE, LoadXml);
xmlLoader.load(new URLRequest(xmlUrlReq));

We now have the defining principles for connecting to an XML page. The XML url we are using is defined outright which contains the standard API call. It is malleable in that you can change Tech to any variable returning video results.

For example http://gdata.youtube.com/feeds/api/videos/-/Gaming/ is a possibility for all gaming-related videos. Our xmlLoader will store the functions needed to load this API URL and xmlData is used to store the returning XML code.

After variables are set we need to call our event listener which checks to see when the API has finished loading. At this point we call a new function LoadXml() which is defined next.

Event Handler Calls

Once the loader eventListener has cleared our LoadXml function is called. This will parse all of the data we need out of the YouTube API response and store simple variables for access later. Below is the entire function code.

function LoadXml(e:Event):void {
	xmlData = XML(e.target.data);
	var media:Namespace = xmlData.namespace("media");
	var gd1:Namespace = xmlData.namespace("gd");
	var elms:XMLList = xmlData.entry;

	for(var i:int = 0; i < vidCount; i++) {
		dataArray.push({});
		dataArray[i]["title"] = elms[i].title;
		dataArray[i]["coreThumb"] = elms[i].media::group.media::thumbnail[0].@url;
		dataArray[i]["vidURL"] = elms[i].media::group.media::player.@url;
		dataArray[i]["duration"] = elms[i].media::group.yt::duration.@seconds;
		dataArray[i]["viewCount"] = elms[i].yt::statistics.@viewCount;
		dataArray[i]["commentCount"] = elms[i].gd::comments.gd::feedLink.@countHint;
		dataArray[i]["favoriteCount"] = elms[i].yt::statistics.@favoriteCount;

		loadThumbs(dataArray[i]["coreThumb"], i);
		loadText(i, dataArray);
	}
}

You can see an initial for loop which pulls out elements from each XML file and stores them into an array. This is referenced with each variable call underneath dataArray.push({}).

Setting dataArray[i] would create 6 individual arrays valued dataArray[0-5]. Within each of these we have sub-arrays containing video information.

This includes the core thumbnail, video URL, duration, number of comments, etc. This function is used to pump through all 6 videos inside a loop and extract bits of data from the response. With this data we then create a new array to house all the values we need and pass these into two more functions to display our finished product.

loadThumbs is the first call which requires two parameters. The first param URL is looking for the external jpg thumbnail file while the second holds the index for which video ID we’re on (valued 0-5).

function loadThumbs(url:String, index:int):void {
	var imgURLRequest:URLRequest = new URLRequest(url);
	var myImgLoader:Loader = new Loader();
	myImgLoader.load(imgURLRequest);

	myImgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

	function thumbLoaded(e:Event):void {
		var myBitmapData:BitmapData = new BitmapData(myImgLoader.width, myImgLoader.height);
		myBitmapData.draw(myImgLoader);

		var myBitmap:Bitmap = new Bitmap();
		myBitmap.bitmapData = myBitmapData;
		switch(index) {
			case 0:
				ytThumb0.addChild(myBitmap);
				break;
			case 1:
				ytThumb1.addChild(myBitmap);
				break;
			case 2:
				ytThumb2.addChild(myBitmap);
				break;
			case 3:
				ytThumb3.addChild(myBitmap);
				break;
			case 4:
				ytThumb4.addChild(myBitmap);
				break;
			case 5:
				ytThumb5.addChild(myBitmap);
				break;
		}
	}
}

We are pulling in another URL Loader to download each video thumbnail. From here we are actually creating a brand new bitmap file inside of Flash to re-create each image.

The benefit here is we can cache each image and store the contents for another query. This would be useful if you were offering access to multiple YouTube feeds and didn’t want to call a new request every time a new visitor came to the page.

We have another event listener which calls thumbLoaded once the image is finished. Then we create a new bitmap image variable named myBitmap and store the thumbnail data inside. Afterwards there’s a small switch clause breaking down 0-5 for each video ID. The code inside simply targets each Movie Clip and appends addChild() holding each thumbnail image.

Loading Video Text Data

The last step required is pulling video data from our array and adding this onto our stage. For this we’ve written a function loadText which takes the current video ID and also the matching data array.

function loadText(id:int, vidDataArray:Array):void {
	var myFormat:TextFormat = new TextFormat();
	myFormat.size = 13;
	myFormat.font = "Arial";
	myFormat.color = 0x0066FF;
	myFormat.underline = true;	

	var myDescFormat:TextFormat = new TextFormat();
	myDescFormat.size = 11;
	myDescFormat.bold = true;

	var mytext = this['ytTitle'+id];
	var mydesc = this['ytDesc'+id];

	var vidTitle:String = vidDataArray[id]["title"];
	var vidUrl:String = vidDataArray[id]["vidURL"];
	var vidDur:int = vidDataArray[id]["duration"]; // duration in seconds
	var vidDurMin:String = Math.floor(vidDur/60) + ":" + vidDur%60; //duration in minutes
	var vidViews:String = splitNumber(vidDataArray[id]["viewCount"]);
	var vidComms:int = vidDataArray[id]["commentCount"];
	var vidFav:int = vidDataArray[id]["favoriteCount"];

	mytext.wordWrap = true;
	mytext.defaultTextFormat = myFormat;

	mydesc.defaultTextFormat = myDescFormat;
	mydesc.textColor = 0x333333;
	mydesc.text = "Time: " + vidDurMin + "\r";
	mydesc.text += "Views: " + vidViews + "\r";
	mydesc.text += "Comments: " + vidComms + "\r";
	mydesc.text += "Favorites: " + vidFav + "\r";

	var htmlstring:String = '<a href="' + vidUrl + '" target="_blank">' + vidTitle + '</a>';
	mytext.htmlText = htmlstring;

}

The beginning lines use a variable myFormat to create a new text formatting. This is a dynamic way to create text input data and import the settings into a project without physically adding any onto the stage. There is no real benefit of this way other than saving file space. However it is good practice to introduce yourself to both methods and choose whichever works best!

We are creating new variables to hold the video data. More specifically we will be accessing the video’s title, URL, duration (and convert this from seconds to minutes), total views, total comments, and total favorites.

Using myText as a new text area we can append these elements with htmlText. From this each video ID will loop through the XML event handler and add all the images and text onto stage.

With this should complete our code! You can test your movie from control->test movie or ctrl+enter on Windows. If you’d like to reference my project code you can download the archive here. Included are both the .fla file and the .swf finished movie product.

This has been an introduction into developing over YouTube’s API. The project was created for the purpose of writing in many different structures and testing different programming styles. ActionScript is very robust and provides an excellent platform for API data manipulation.

Although there is too much material to cover all topics we will be discussing some of the major improvements to CSS3. Many new properties have been introduced which can affect the presentation of a layout in numerous ways. We’re seeing a tightening of regulations with cross-browser compatibility and a greater reach towards mobile operating systems.

If you’d like to learn more about these techniques further than this article feel free to research. Pelfusion has a nice CSS3 tag library full of informative articles and tutorials.

How is the Web Evolving?

Those who choose to stay behind with old HTML standards will not be able to benefit from the rich features available today. Support between browser rendering engines such as WebKit and Gecko has never been better. With Google Chrome, Mozilla Firefox, and Safari running the majority of market share it’s no surprise these standards have adapted so smoothly.

Mobile devices are also catered to nicely. New HTML5 elements allow for wrapping and new styles to be applied based on browser support. Those who have been waiting to advance should start utilizing these new CSS3 benefits today!

Working in CSS3 Media Queries

When CSS2 documentation was drafted it included a section for media types. These raised values such as screen, projection, handheld, and print. This allowed developers to create multiple stylesheets based on which view was being accessed – truly a revolutionary idea.

Media queries behave in a similar fashion but require more specific constituents. These calls can be used to check device properties and see what type of technology your visitors are using. This can include width/height of the current browser, screen resolution, and even orientation for iPhone and iPod Touch devices.

We can see a simple example below for media queries. This code would be run inside a .css file or within style tags in your HTML file.

@media only screen and (max-device-width: 480px)
{ /* styles here */ }

The value 480px is derived from the iPhone’s maximum device width when held in landscape mode. This media query checks to see if the physical device is less than 480px in width. If this resolves true then all CSS code inside will be executed and applied. This can work similar with Android and Blackberry phones as well.

There is also the option to apply media queries simply through external linkage. Below is an example of such an include statement.

link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"href="small-device.css" />

Dynamic Web Gradients

Yes, it is now possible to create background gradients on-the-fly with just CSS markup. Even better the system used to apply these styles follows rules for backup solutions. This helps with browsers which currently don’t support CSS gradients to still show something through a fallback image.

There are also two different major types of gradients called linear and radial. These options will control how your gradient dissolves into the big picture. Linear designs will span from one side to another while radial gradients start from the center and move outward to form a circle.

Generally linear are the easiest to control and will provide the best effects. Below is an example of some CSS code to apply a simple gradient to our heading division.

div.head {
    background-color: #1a82f7; /* fallback color */
    background-image: url('img/bg_1.png') repeat-x; /* fallback image */
    background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Notice how we are using most of the same properties repeatedly with varying values. The first is our very final fallback to a standard flat background color. We then have our fallback image which is in place for browsers not supporting linear gradients.

From here we have a split between Mozilla and WebKit rendering engines. Both gradients created between these functions will look exactly the same and show the same results. For more details on -moz-linear check out Mozilla’s Dev Center while WebKit Gradients have more information in a recent blog post.

Box Shadow Properties

Box shadows are nothing new to web design, though they are very new to CSS3. Since the early days of Adobe Photoshop 7.0 there has always been filters for applying shadows to objects and layers.

Limits are not applied when working with the property in CSS. By this it’s implicit that any element could have a box shadow applied, although it may not look so great being overused. Below is an example piece of code used to apply box shadows in any modern browser.

div.box {
box-shadow: 5px 3px 10px 0 #000;
             }

This would apply a smaller black radius to the corner of our .box div. This property is defined by by 5 separate values which may seem confusing initially but are in reality quite simple.

• horizontal offset of shadow
• vertical offset of shadow
• blur radius which defines how blurry or crisp the shadow will appear
• spread for how far out the shadow will reach
• color of shadow

Box-Sizing

This is one of those hidden gems in the vast landscape of new CSS3 properties. Currently one of the most widely supported specs to be released which allows much greater manipulation potential for the DOM(Document Object Model).

The property itself can be applied to any element since all HTML displays are shaped by the box model. There are 3 possible values to pass in: content-box, border-box, or inherit. Each of the first two options posses new default rendering states for HTML code while the third is a generic inheritance clause from the element’s parent.

*,html,body {
box-sizing: content-box | border-box | inherit;
}

The “classic” way all browsers have rendered elements is through content-box. This ensures all margins and padding applied to the element take place outside of its boundaries. When setting this value to border-box we see just the opposite where all margins, padding, and borders are applied within the element’s width.

This isn’t very noticeable on pages without fixed widths since borders and padding will look exactly the same. However as an example let’s take a 100px box with 5px left/right margins and a 1px border. Using the classic standard we would have a 112px block. However with the border-box value set we would only have a 100px box with 12px internally taken away for the border and margins.

WebKit Supported Transitions

Lucky for those who have been patiently awaiting the arrival of pure CSS transitions. This new property allows for some very radical transitions and neat effects. Below is an example bit of code which is shorthand for transition effects on all paragraphs.

p {
     opacity: .7;
     color: #333;
     -webkit-transition: opacity 1s linear;
     -webkit-transition: color 1s linear;
}
p:hover {
     opacity: 1;
     color: #000;
}

The code for -webkit-transition is actually shorthand for describing 3 different properties needed for the transition. In order they are defined by transition-property, transition-duration, and transition-timing-function. This type of transformation can be applied to almost any property and can even manipulate multiple properties at once.

As an example above we have a paragraph element which has a text color of deep gray and a slightly opened alpha opacity. With both of our transition properties we are declaring a 1 second linear transition from both opacity and color values into the new sets.

This may seem a little confusing at first, and it’s no surprise. It would have taken at least an hour of programming and blocks of JavaScript to replicate this effect nearly 5 years ago. If you still have questions the WebKit blog has a post on animation effects.

These are some of the most notable advances in CSS3. These properties have greatly changed the way we interact with our current web and gives modern web designers plenty of flexibility. Design specs are always updating so it’s important to keep on your toes and move with the changing tides. Stay ahead of current trends and you’ll always be riding on top of the curve in a crowded sea of digital designers.

The online community certainly has their favorites and this debate has played heavily on those personal preferences to pit developer vs. developer, designer vs. designer, and developer vs. designer as this argument continues to unnecessarily divide the masses. The web is a dynamic and evolving playing field whose scope and capacity change near annually, so naturally these kinds of tech battles are going to be present, but what we have to remember is that these battles do not settle the issue. They do not declare the winner, they simply split the community into arguable factions who rant and rave, push and pull, to get the brand that holds their loyalty to rise the victor.

The Crux of the Situation

The situation seems to be a volatile one, all stemming from the fact that these two technologies have some overlap. This has many on both sides of the fence decrying that the other is useless and no longer has a role to play in the future of the web. Both sides have their reasons, however, most of those reasons are minor contextual instances of the app not fully functioning properly or as effortlessly as they would like, rather than an evaluation of the entire scope and functionality of either participant in this fight for dominance. When this full evaluation is made, we see a different narrative begin to surface.

But still the battle rages between those standing on either side of this fence, and we have to wonder if much of this comes down to posturing. Because while the debate between individuals carries on, those looking at the testing and performance evaluations have a different take on which one will prevail as the web continues its evolution. So it does not seem the like the proverbial jury is still out on this subject as much as they are just wondering why they are even here in the first place. Below are a several links gathered from around the web to show how this battle is really playing out.

HTML5

From across the vast sea of cyberspace, I went in search of those who have evaluated HTML5 and from these experiments have concluded that the winner of this fight will be HTML5. After reading Mashable’s Web Faceoff between Flash and HTML5, I honestly believed that HTML5 would come out on top. Or at least that is what the poll was indicating with over 60% of the participants came down on the HTML5 side. With its capabilities of easily embedding video and audio into your web applications, HTML5 has been hailed as the ‘Flash Killer’, but the results show things differently. In fact, there were not many articles that held to this assassination assumption once the testing began, below are a couple of the ones I came across.

Thoughts on Flash

Steve Jobs list of ‘reasons’ why Flash no longer has a place in the future of the web.

HTML5 vs Flash: An Open Letter to Adobe

Flash

Now that we have looked at a couple of the articles hailing HTML5 as the eventual victor of this battle for market dominance, we have a few that landed on the other side when the testing began. And while Flash seems to have had more supporters writing about their expected success once the dust has settled, it is important to point out that Flash has been filling this role for longer than HTML5 and so naturally one would expect more people to come out in favor of Flash. With so many already dedicated to this app and so many who have devoted their time and energy to learning how to master it, it is easy to understand the push for its victory. But that does not always translate to what is best, as much as it does translate to what is easiest. And this should be a debate about functionality not familiarity.

Does HTML5 Really Beat Flash? Surprising Results of New Tests

HTML5 vs Flash: What You Haven’t Heard

Speed Test: Flash vs HTML5 on the Nexus One

Flashlab’s Look at HTML5

Both Have their Place

Somewhat surprisingly (especially if you follow the fervor of the debate), what most of the articles that have been published on this fight for the future have deduced, is that when the dust settles, both HTML5 and Flash will be left standing. Perhaps they will be holding smaller shares of the online video and audio markets than were initially projected, but the consensus seems to be that they will both have roles in the future of the design and development communities. From the testing that has been done so far, and with the thoughtful evaluations of both competing technologies the resounding winner seems that a shared landscape is the future, rather than a more exclusive one with either Flash or HTML5 shutting out the other.

HTML5 vs Flash

HTML5 vs Flash: The Video Benchmark Deathmatch

The Future of Web Content: HTML5, Flash, and Mobile Apps

HTML5 vs Flash

HTML vs. Flash: Can a turf war be avoided?

HTML5 vs. Flash: The case for Flash

HTML5 And Flash: Why It’s Not A War, And Why Flash Won’t Die

HTML5 vs Flash

Flash vs HTML5: What You Need to Know

Flash and Standards: The Cold War of the Web

See for Yourself

Below are a few more links that you can investigate for yourself so that you can see some of the creative comparison models that have been presented throughout the web. If you thought you already had your mind made up, take a look at the following links and you just might find your preference slightly shifting.

GUIMark 2: The rise of HTML5

Shows some in-depth testing of the two technologies.

HTML5 vs Flash

A tumblog dedicated to side by side comparisons of both in action.

HTML5 vs Flash? Pick a side with ‘Pong’

It is a fun way to decide for yourself which you prefer through a playable Pong game created with each.

Flash vs HTML5 Canvas Drawing

It is an interesting comparison of drawing in both.

Show Me Whatcha Got! HTML5 vs Flash Showcase

In The End

Both HTML5 and Flash have their draws as well as their drawbacks at this point, but the bottom line is that they are both versatile technologies that are not limited to the overlapping functionalities they possess. Therefore, the design and development communities will have to adapt to the changes that are sure to occur, but will those changes end in the extinction of one of these two competitors for the future? More than likely, no. They will eventually settle into their niches and continue to feed the overall beast that is the internet. If there is to be an extinction level event that shapes the future of our playing field with regards to either of these two technologies, then we are still far from that reality’s head rearing itself into our paths. And I suspect that it would occur for reasons we have yet to discover.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

CSS3 Border Radius Tool

Here is the CSS which I used in PHP file:

.outPut {
	-moz-border-radius:10px 10px 10px 10px;
	background-color:rgba(166, 167, 244, 0.8);
	display:table-cell;
	font-size:2em;
	height:200px;
	margin:0 auto;
	min-height:200px;
	text-align:center;
	vertical-align:middle;
	width:320px;
}

.Code {
	-moz-border-radius:10px 10px 10px 10px;
	background:none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
	margin:60px 0 20px;
	padding:10px;
	position:relative;
}

input{-moz-border-radius:5px 5px 5px 5px;
	background-color:rgba(255, 255, 255, 0.5);
	border:1px solid #D4CFBD;
	font-size:1.1em;
	padding:2px 5px 2px 2px;
}

label {
	font-size:1.1em;
	margin:4px 10px 0 0;
}

Here is jQuery code:

$(document).ready(function(){
    $(".radiusInput").keyup(function()
    {$(".code-border-radius-equal").text(function(b){
    var c=$(".radiusInput").val();return(c+"px")});
    var a=$(".radiusInput").val()+"px";
    $(".outPut").css({"-webkit-border-radius":a,"-moz-border-radius":a,"border-radius":a})
    });

DEMO Download

In this article we will talk about CSS3 colour techniques such as RGB / RGBA and HSL / HSLA color models, opacity, linear and radial gradients, box and text shadows as well as show you some examples of excellent implementation of the CSS3 colour techniques in practice. You will get some hints as to the new markup, understand how to incorporate new CSS3 elements, embrace the new creative freedoms of CSS3 and start using powerful and absolutely awesome CSS3 colour techniques today!

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Colors in CSS3

Resources: SlideShare Presentation: Colors in CSS3 by Lea Verou

W3C CSS3 Color Specification

W3C CSS3 Color Specification (working draft, 21 July 2008) describes color values and properties for foreground color and group opacity in CSS3 color module.

W3C: CSS3 Color Modul

CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CodeNique: CSS3 Color Names

Color Models, Opacity

RGB & RGBA

The RGB declaration sets color/colour using Red (R), Green (G) and Blue (B) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

div.L1 { background:rgb(60, 80, 100); height:20px; }
div.L2 { background:rgb(60, 100, 100); height:20px; }
div.L3 { background:rgb(60, 120, 100); height:20px; }
<br />
div.L4 { background:rgb(25, 50, 100); height:20px; }
div.L5 { background:rgb(25, 50, 150); height:20px; }
div.L6 { background:rgb(25, 50, 200); height:20px; }

div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }

• Zen Elements: CSS3 RGB & RGBA
• CSS3 Info: RGBA Colors
• RGBA – Color with Transparency

HSL & HSLA

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue.
Saturation is a percentage: 0% – grayscale, 100% – full color.
Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.

div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
<br />
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

• Zen Elements: CSS3 HSL & HSLA
• CSS3 Info: HSL Colors
• CSS3 Info: HSLA Colors
• HSLA – Color with Transparency

Opacity

CSS3 opacity allows us to control how see-through an element is. The opacity declaration sets the value to how opaque an elements (layer, text, image, etc.) is. An element with opacity value 1.0 is fully opaque (visible) while an element with opacity value 0.0 is completely invisible. Any value in-between determine how opaque the element is.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

• Zen Elements: CSS Opacity
• CSS3 Info: Opacity Preview
• About.com Web Design / HTML: CSS3 Opacity
• Exforsys Tutorials: CSS3 Opacity
• Not As Clear As It Seems: CSS3 Opacity and RGBA

Gradients

There are a whole variety of gradient options available with CSS3. Linear and radial gradients are becoming irreplaceable! They go a long way towards simplifying layouts and allow us to create visually appealing design with saving a huge amount of time and efforts.

To create CSS3 gradient, use background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first color, giving direction to the gradient
#AAA = primary color
B = where the fade begins (%)
#XXX = secondary color
Y = where the fade begins (%)

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                     from(#35425d), to(#fff));
}

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                  from(#35425d), to(#fff));
}

Radial Gradient

.my_CSS3_class {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
                  from(#487a77), to(#fff));
}

• Zen Elements: CSS3 Gradients
• CSS Tricks: Speed Up with CSS3 Gradients
• Quick Tip: Understanding CSS3 Gradients
• CSS3 Gradient Generator
• Westciv: Linear Gradients
• Westciv: Radial Gradients

Shadows

Box Shadow

Shadows can be applied in CSS3 to borders, images, and text as well.

To create CSS3 box shadow, use box-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

• Zen Elements: CSS3 Box Shadows
• Westciv: Box Shadow

Text Shadow

Similar to the box shadow effect, CSS3 shadow technique can be applied to text.

To create CSS3 text shadow, use text-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

• Zen Elements: CSS3 Text Shadow
• Westciv: Text Shadow

Excellent implementations of CSS3 Color Techniques

CSS3 Gradient Buttons

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

“CSS3 Gradient Buttons” Tutorial + Demo

Super Awesome Buttons with CSS3 and RGBA

A tutorial for creating really cool buttons using the RGBA feature of CSS3.

“Super Awesome Buttons with CSS3 and RGBA” Tutorial + Demo

Browser Support

Detailed information about CSS3 color support in most of the modern web browsers (Chrome, Firefox, Opera, Safari).

Web Designer’s Browser Support Checklist

FinMeByIP: Web Designer’s Browser Support Checklist

Web Browser CSS3 Support

Web Devout: Web Browser CSS3 Support

Below we have listed 7 useful CSS3 code generators and you may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
Everything You Need to Know about CSS3 Color Techniques
Best Examples of CSS3 Navigations and Menu Tutorials

1. CSS3 Generator

Really helpful tool to generate CSS3 of border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.

2. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

3. CSS3 Sandbox

Helps to generate Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke.

4. CSS Border Radius

CSS border radius generator for lazy people.

5. Font-Face Kit Generator

Nice CSS3 @font-face generator from Font Squirrel.

6. Border Image Generator

For those who have not been exposed to this property, it allows a single image to be used to style the borders and background of a particular element.

7. Cross Browser CSS3 Rule Generator

CSS3 Please is simple and effective cross-browser CSS3 rules generator.

Please feel free to share any thoughts on your favorite tools in the comment area.

References: User Interface Guidelines (Official Documentation)

• Android: User Interface Guidelines
• iPhone: Human Interface Guidelines
• iPad: Human Interface Guidelines
• Palm Pre: User Interface Guidelines

Prototyping / Wireframing

iPhone Stencil Kit

Quickly sketch out iPhone UI prototypes. Brainstorm your application ideas using stainless steel stencil and mechanical pencil.

iPad Stencil Kit

Use iPad Stencil Kit to quickly mock-up application ideas for the Apple iPad. How can you refine the user experience? What type of interaction is going to make the app compelling? Let this iPad Stencil Kit help you answer these questions.

LiveView (for iPhone)

LiveView is a specialized remote screen viewing application intended as a tool to help designers create graphics for mobile applications.

iPhonePrototype

DroidDraw

GUI Templates

Android GUI

Android GUI PSD is inspired by idea of teehan+lax and is not intented to be used for final implementation. You can use Android GUI PSD for all of your projects for free and without any restrictions.

1. Android GUI PSD v1.0 by Pavel Matcheck

2. Android GUI PSD v2.0 by Vladimir Grishin

3. Android GUI PSD by Chris Brummel

iPhone GUI

1. iPhone GUI PSD by Teehan+Lax

2. iPhone Mockup Toolkit (CS4) by Meta*spark

3. iPhone Stencil for OmniGraffle by Patrick Crowley

4. iPhone PSD Vector Kit by Renee Rist

5. iPhone GUI PSD by FreshBooks

6. iPhone Interface PSD by 320480

iPad GUI

iPad GUI PSD by Teehan+Lax

Palm Pre GUI

Palm Pre GUI PSD by Teehan+Lax

Emulators

MobiOne (for iPhone / Palm Pre)

Project Ares (for Pal Pre)

Full UI Design Suites

MIDS (Mobile Interface Design System)

MIDS is the first complex dedicated system for automation of UI design, prototyping, and usability testing that meets standard process requirements of cellular operators, handset manufacturers, content and service providers.

Without this awareness of how much of our speech is ingrained in our industry, we forget when communicating with those outside said industry that they may not be following much of what we are saying. And though you do want your clients to know that you know just what it is you are talking about, you also want them to know just what it is that you are talking about. So be sure that you are familiar with which terms tend to only make sense to those in your field, to keep your client conversations on track and from veering into somewhat job-specific, proprietary directions.

General Design Terms
Typography Design Terms
Color Design Terms
Composition Design Terms
General Developing Terms
Developer Languages
Developer Content Terms
CSS Terms
Typography Developer Terms

Web Design Dictionary

We will begin in the glossary for web designers and I have broken it down into a few different categories to make it easier to swallow, if you will.

General Design Terms

Pixel – In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled.

Resolution – describes the detail an image holds. The term applies to digital images, film images, and other types of images. Higher resolution means more image detail.

Wireframe -is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Typography Design Terms

Baseline – is the line upon which most letters “sit” and below which descenders extend.

Ascender – is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font. That is, the part of a lower-case letter that is taller than the font’s x-height.

Descender – is the portion of a letter in a Latin alphabet that extends below the baseline of a font. In most fonts, descenders are reserved for lowercase characters such as g, p, and y. Some fonts, however, also use descenders for some numerals.

Body Height – refers to the distance between the top of the tallest letterform to the bottom of the lowest one.

x-height – or corpus size refers to the distance between the baseline and the mean line in a typeface. Typically, this is the height of the letter x in the font…

Cap height – refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat…

Overshoot – it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height.

Glyph – is an element of writing. It is a slightly vague term, but a more precise definition might be an individual mark on paper or another written medium that contributes to the meaning of what is written there. A grapheme is made up of one or more glyphs.

Character – is a unit of information that roughly corresponds to a grapheme, grapheme-like unit, or symbol, such as in an alphabet or syllabary in the written form of a natural language, such as letters, numerical digits, and common punctuation marks.

Font – (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic is a font, and the 10-point size would be a separate font, as would the 9-point upright.

Typeface – is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them.

Italic – is a cursive typeface based on a stylized form of calligraphic handwriting. Due to the influence from calligraphy, such typefaces often slant slightly to the right.

Oblique – is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Kerning – is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area.

Kern – is a part of a type letter that overhangs the edge of the type block.

Leading – refers to the amount of added vertical spacing between lines of type. In consumer-oriented word processing software, this concept is usually referred to as line spacing.

Ligature – occurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive characters sharing common components and are part of a more general class of glyphs called contextual forms…

Serif – is a typeface that contain serifs, or semi-structural details on the ends of some of the strokes that make up letters and symbols.

Sans-Serif – is a typeface that does not have the small features called “serifs” at the end of strokes.

Script – typefaces that are based upon the varied and often fluid stroke created by handwriting.

Monospaced Font – is a font whose letters each occupy the same amount of space. This contrasts to variable-width fonts, where the letters differ in size to one another.

Subscript & Superscript – is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it – subscripts appear at or below the baseline, while superscripts are above.

Alignment – is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification.

• Flush Left – the text is aligned along the left margin or gutter, also known as ragged right.
• Flush Right – the text is aligned along the right margin or gutter, also known as ragged left.
• Centered – text is aligned to neither the left nor right margin; there is an even gap at the end of each line
• Justified – ext is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as full justification.

em – is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

em-dash – often demarcates a parenthetical thought or some similar interpolation.

en – is a typographic unit, half of the width of an em. By definition, it is equivalent to half of the height of the font.

en-dash – is usually half the width of an em dash and is commonly used to indicate a closed range (a range with clearly defined and non-infinite upper and lower boundaries) of values.

Color Design Terms

CMYK – is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key black.

RGB – additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Spectrum – is the portion of the electromagnetic spectrum that is visible to (can be detected by) the human eye.

Hue – is one of the main properties of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow,”.

Lightness & Tone – a property of a color, or a dimension of a color space, that is defined in a way to reflect the subjective brightness perception of a color for humans along a lightness–darkness axis. A color’s lightness also corresponds to its amplitude.

Tint & Shade – the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. Mixing with any neutral color, including black and white, reduces chroma or colorfulness, while the hue remains unchanged.

Composition Design Terms

Composition – the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.

• Line – the visual path that enables the eye to move within the piece
• Shape – areas defined by edges within the piece, whether geometric or organic
• Color – hues with their various values and intensities
• Texture – surface qualities which translate into tactile illusions
• Form – 3-D length, width, or depth
• Value – Shading used to emphasize form
• Space – the space taken up by (positive) or in between (negative) objects

Perspective – an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye. The two most characteristic features of perspective are that objects are drawn are smaller as their distance from the observer increases and foreshortened: the size of an object’s dimensions along the line of sight are relatively shorter than dimensions across the line of sight (see later).

Contrast – the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.

Symmetry – an imprecise sense of harmonious or aesthetically pleasing proportionality and balance such that it reflects beauty or perfection.

Whitespace – often referred to as negative space, it is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper.

Web Developer Dictionary

Now we come to the Developer’s section of this massive web term glossary. Below are a plethora of definitions that should be a part of your vocabulary if you develop for the web.

General Developing Terms

CMS – A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as almost anything – documents, movies, pictures, phone numbers, scientific data, etc. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation.

Client Side – refers to operations that are performed by the client in a client-server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user’s local computer or workstation and connects to a server as necessary.

Server Side – refers to operations that are performed by the server in a client-server relationship in computer networking. Typically, a server is a software program, such as a web server, that runs on a remote server, reachable from a user’s local computer or workstation.

Frontend/Backend – generalized terms that refer to the initial and the end stages of a process. The front-end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back-end can use. The front-end is a kind of interface between the user and the back-end.

DNS – The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide.

FTP – File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server applications. FTP is used with user-based password authentication or with anonymous user access.

Sitemap – a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.

UI – the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of input, allowing the users to manipulate a system, and/or output, allowing the system to indicate the effects of the users’ manipulation.

Markup Language – a system for annotating a text in a way which is syntactically distinguishable from that text. Examples include revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts, typesetting instructions such those found in troff and LaTeX, and structural markers such as XML tags.

MySQL – a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements.

PageRank – a link analysis algorithm, named after Larry Page, used by the Google Internet search engine that assigns a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web, with the purpose of “measuring” its relative importance within the set.

RSS – RSS (most commonly expanded as “Really Simple Syndication”) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (usually called a “feed”) includes full or summarized text, plus metadata such as publishing dates and authorship.

Root Directory – the first or top-most directory in a hierarchy. It can be likened to the root of a tree – the starting point where all branches originate.

SEO – Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Web Standards – a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web 2.0 – commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.

Database – a collection of data for one or more multiple uses. One way of classifying databases involves the type of content, for example: bibliographic, full-text, numeric, image. Other classification methods start from examining database models or database architectures: see below. Software organizes the data in a database according to a database model. As of 2010[update] the relational model occurs most commonly. Other models such as the hierarchical model and the network model use a more explicit representation of relationships.

Developer Languages

CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

HTML – HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms.

XML – XML (Extensible Markup Language) is a set of rules for encoding documents electronically. It is defined in the XML 1.0 Specification produced by the W3C and several other related specifications; all are fee-free open standards.[3]

XML’s design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format, with strong support via Unicode for the languages of the world. Although XML’s design focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services.

XHTML – XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

PHP – PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.

JavaScript – an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

ASP.NET – a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Ajax – (shorthand for asynchronous JavaScript and XML[1]) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

jQuery – a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Developer Content Terms

Doctype – A Document Type Declaration is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Favicon – short for favorites icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Form – allows a user to enter data that is sent to a server for processing. Webforms resemble paper forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching on a search engine).

Hyperlink – a reference to a document that the reader can directly follow, or that is followed automatically. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and creating hypertext is a hypertext system. To hyperlink (or simply to link) is to create a hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

robots.txt – The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web spiders and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is unrelated to, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.

.htaccess – the default name of a directory-level configuration file that allows for decentralized management of web server configuration. The .htaccess file is placed inside the web tree, and is able to override a subset of the server’s global configuration; the extent of this subset is defined by the web server administrator.[1] The original purpose of .htaccess was to allow per-directory access control (e.g. requiring a password to access the content), hence the name.

Flash – a multimedia platform that is popular for adding animation and interactivity to web pages. Originally acquired by Macromedia, Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video.

CSS Terms

Span & Div – elements used where parts of a document cannot be semantically described by other HTML elements. Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as span and div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.

ID & Class – The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Float – Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.

Box Model – All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin – The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

padding – The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

border – The CSS border properties allow you to specify the style and color of an element’s border.

Positioning – The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Overflow – The overflow property specifies what happens if content overflows an element’s box. (visible, hidden, scroll, auto)

Z-Index – The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Typography Developer Terms

Text

• Letter-Spacing – increase or decrease the space between characters
• Line-Height – sets the distance between lines
• Text-Align – aligns the text in an element
• Text-Decoration – adds decoration to text (underline, line-through, overline)
• Text-Indent – Indents the first line of text in an element
• Text-Transform – controls the letters in an element (capitalize, uppercase, lowercase)
• Word-Spacing – increase or decrease the space between words

Font

• Font-Family – specifies the font family for the text
• font-size – sepcifies the size of the text
• font-style – specifies the style for the text (normal, italic, oblique)
• font-varient – specifies whether a text will be displayed in small caps
• font-weight – specifies the weight of a font (light, bold)

Font Stack – The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Blockquote – used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.