Tuesday, 30 October 2012

What is design for print: Commercial printing

I have began my research by looking into the different aspects of commercial printing, i have highlighted whats relevant and what i believe will be useful facts for my future info pack.

Paper choice

The type of paper you choose to print your project on has a number of key terms: brightness, weight, and coating. Each of them describe different aspects of the paper and will help you decide what kind of paper you should use for your specific project. Choosing the proper paper can be a daunting task if you’re really serious about what you’re printing. Here’s a bit of information to help you make the decision:

In the world of commercial printing, “brightness” refers to how much light is reflected off of the paper. Brightness values range on a scale from 0-100, 100 being the brightest. The important thing to remember is that the brightness mainly affects the vibrancy of your colors. And DO NOT confuse brightness with whiteness. Whiteness refers to the shade (cream, beige, gray) of the paper and has little or nothing to do with the brightness. So just ask yourself – how bright do I want my colors to be?

The weight of paper is based on how much 500 sheets of paper weighs in pounds. If 500 sheets of paper weighs 80 pounds, then the paper would be referred to as 80# paper. Even though this may seem quite precise, it’s still not an exact science. You’ll still need to treat weight as a rough estimate until you are able to actually examine the paper yourself. For example, 80# paper is a pretty standard paper for flyers or brochures. But just because that’s the standard, it might not be right for your project. Be sure and ask your printer and by all means – ask for paper samples.

Coating or coated paper refers to a film that is put on the paper that improves or negates how light reflects off the paper. The coating can be applied either on both sides or only on one side of the paper. A very common type of coating is gloss, or glossy paper. It’s used for pictures and any other graphics that you really want to stand out. A matte coating will do the opposite – it will make the image more dull and stand out less.
Now that you’ve got a better idea of brightness, weight and coating, you should be a little better equipped to deal with the commercial printing today.

Basics about commercial printing
Going from the do-it-yourself ink jet printing process to the commercial printing process can be quite an intimidating experience and quite a challenge if you’re not prepared. You’re probably comfortable with the equipment you’ve been using, and can even get pretty good results from it. But now it’s time to turn your work over to the professionals.
The printing industry has a language of its own, with its own lingo. This short guide will help you with the basics and hopefully make the transition a little easier:


RGB stands for the colours red, green, and blue. This is a reference to the primary colours of light. Computer monitors, TV screens and projectors display images in RGB colour mode.
CMYK stands for the colours cyan, magenta, yellow, and black (K). This is a reference to the primary colours of pigment or ink. Most of the time, when something is printed professionally, it is probably printed in CMYK colour mode.
An important fact to remember is that these two formats are NOT compatible with each other. In order to go from your computer monitor to paper, or vice versa, the original colour mode must be converted to the other.

Here is a useful colour theory chart i came across, it's effective and easy to remember. It describes all the terms of colour to do with RGB and CMYK. 

image source: www.pixelsham.com

Image Resolution
This is a term you’re probably familiar with. Image resolution is how many dots per inch make up an image, whether on your monitor or on paper. Both computer displays and printers display or create images by reproducing colours one tiny dot at a time. These are pixels on your monitor, or dots on a printed piece. Computers display images at around 72 dots per inch (dpi), while professionally created prints are produced at much higher quality, at 300 dpi or greater.
Why is this important to remember? Because you could not take a small image off the internet, enlarge it on your computer, and attempt to print it. You’d end up with a very fuzzy and distorted image that lacked any sense of clarity. For the best results, you’d want to prepare your file at an original colour depth of 300 dpi. You probably don’t need to go any higher than 300 dpi, and if you can avoid it, you shouldn’t go any lower than 150 dpi.

A bleed is the area around the edges of your page that will probably be cut off. Why might you want to include a bleed? If you want your pictures or graphics to go all the way to the edge of the paper, you’re going to need a bleed. There’s probably no company out there that can cut each paper exactly right every time. So you’ll want to include about a 1/8” to 1/4″ bleed around the edges. Ensure that no important or relevant text or graphics is included in this area. Before “going to press,” you’ll probably want to ask your printing company how much bleed would be acceptable.
There’s a lot more to learn in the world of commercial printing, but these printing basics should give you a pretty good start.

Commercial printing process 
Take a moment to think of all the printed materials you encounter every day. The list could be extensive: billboards, brochures, direct mailers, business cards, flyers, etc. These printed materials come in all different sizes, thicknesses, colours, and all types of creative designs. But how did all of these things come about? How did they go from an idea, to a design, to the final product? You’ll find out below.
The fairly new concept of commercial printing is the process of going from artwork to a piece of paper or card stock. Most companies today use a form of offset printing that transfers to paper four separate colours to make the final colour image. These colours are cyan, magenta, yellow, and black; also known in the industry as CMYK.
So what is the definition of commercial printing? The overall process of printing is actually quite simply and it hasn’t changed much over the last 100 years. It begins with aluminum plates that are created (pressed out) from the artwork. Most of the time there is one plate for each of the four CMYK colours. Each plate is then wrapped around large cylinders that allow the ink to fill up the cut or pressed out shape of the aluminum plate. Ink is then poured into the cutout and then transferred to a rubber roller. This roller is called the blanket cylinder, which is used to let the paper roll within to retrieve the right level of ink. And finally, the impression cylinder is a roller that pushes the paper along the process at around 10,000 sheets per hours to absorb the necessary amount of ink. There are four presses – one for each of the four colours. As the paper moves along each press, it retrieves one colour at a time and eventually ends up in a heated area, where the paper can dry before printing on the back side.
To sum up the process, commercial printing involves determining the proper levels of water and ink for each colour. The aluminum plate determines how much ink the paper can absorb, and the rollers press the image onto the paper, one at a time.
Commercial printing has many advantages over standard desktop printing. It can create professional and outstanding results that many people can use and enjoy. Many, if not most, companies utilize this form of professional printing. The key, however, is to ask your printer the right questions and understand how their process works. Chances are, CMYK offset commercial printing will be the best method for you to print amazing marketing materials.

Printed materials

In a day of digital TV and satellite, the internet, and radio, can printed media still be an effective form of advertising today? Absolutely! The importance of printed materials cannot be underestimated. Printed advertising is still one of the most effective forms of advertising available.
The fact is, when a person sees a printed ad in the newspaper or in a magazine, he or she reads it and it registers and produces much better results than any other type of ad. The same goes with other printed materials like brochures or flyers. What a person sees on a flyer is more likely to register than an ad he or she runs across on the internet. It’s important to remember that the goal of advertising is to produce actual results in a cost-effective manner.
This is where the benefits of commercial printing come into play in your business. TV, radio, internet ads may reach more people, but they’re also MUCH more expensive to produce. And even though people see them, they just don’t register as well as printed media does. Printed advertising tends to hold people’s attention far better.
All companies know how important a continuous marketing program is, and printed media and advertising should be a major part of it. Sure, it’s easy and relatively cheap to run a small ad in the newspaper or on the internet once in a while, but the fact is that it’s not going to produce the results that you’d get from having a beautiful custom-printed insert ad in the same newspaper. Even better is a well-designed and functional brochure that people can take home with them.
One of the biggest problems with so many types of advertising, like in the newspaper or on the internet, is that people have become so accustomed to seeing them that now they simply pass right over them. But with custom printed media, they have to look at it and hold it for a bit to at least figure out what it’s for. They might even read it a bit, even if they plan on throwing it in the garbage can. However, during that short amount of time it’s going to subconsciously register in their minds and have a certain measurable effect. Even a small effect is better than nothing at all.
Commercially printed materials are incredibly important, especially today in a world of digital media. Don’t underestimate the importance of still utilizing printed advertising materials.
Text source:http://www.commercialprintinghelp.com

Friday, 26 October 2012

What is design for print: Trapping

As a task set by Mike we were asked to investigate the term 'trapping'. Here is the information i have found, there's a substantial amount of text here describing the process, i will highlight the important aspects to give me a better understanding of what trapping is. 

Trapping is a term most commonly used in the prepress industry to describe the compensation for misregistration between printing units on a multicolor press. This misregistration causes unsightly gaps or white-space on the final printed work. Trapping involves creating overlaps (spreads) or underlaps (chokes) of objects during the print production process to eliminate misregistration on the press.

Knocking out without trapping    Knocking out with trapping    Over printing

Trapping Methods:
One approach to trapping is to change the submitted artwork. In general, all digital files produced using any current professional software have some level of trapping provided already, via application default values. Additional trapping may also be necessary, but all traps should be as unobtrusive as possible.

Traps can be applied at several stages in the digital workflow, using one of two trapping technologies: vector-based and raster-based. The right choice will depend on the type of products (packaging applications including flexo-printing have other requirements than commercial printing on offset systems) and the degree of interactivity or automation that is wanted.

In-RIP trapping moves the trapping to the RIP so that it is done at the last moment. The process is automatic, though it is possible to set up zones to allow different automatic rules for different areas, or to disable trapping for areas previously manually trapped.

Trapping directions:
It is important to know that the darker color always keeps its shape. The neutral density of a color is used to determine its darkness.
The lighter color can trap the darker color in the following directions:

Choke: The yellow square makes the cyan circle in the middle smaller.

Spread: The yellow circle becomes bigger.

Centerline: Both Spread and Choke are applied (rarely used).

Trapping decision making:
First the decision should be made if a trap is needed between two specific inks, in other words, if these two abutting colors are printed is there a risk of gaps showing up when misregistration happens.
In case the two colors in question are spot colors, trapping is always needed: from the moment the artwork is imaged on film or plate, they are handled separately and ultimately will be printed on two different printing units. The same applies if one of the colors is a spot, the other a process color.
The decision becomes a bit more tricky if the two colors are process colors and will each be printed as a combination of the basic printing colors Cyan, Magenta, Yellow and Black. In this case the decision whether to trap or not will be defined by the amount of ‘common’ color.

Another factor that will influence the visibility of the traps is the direction of the trap. The decision which color should be spread or choked is usually decided upon the relative luminance of the colors in question. The ‘lighter’ color should always be spread into the darker. Again this reflects the way the human eye perceives color: since the darker colors define the shapes we see, distortion of the lighter color will result in less visible distortion overall. The ‘lightness’ or ‘darkness’ of a color is usually defined as its ‘neutral density’.
A major exception to this rule should be applied when opaque spot colors are used. Other colors, regardless of the relative luminance should always be trapped to (spread under) these spot colors, If several of these spot colors are used (a common practice in the packaging market), it is not the luminance of the color but the order of printing that will be the decisive element: the first color to be printed should always spread under the next color.

Example use of a trap.
The thinner the traps created, the less visible they will be. Therefore the trap width should be set to the strict minimum, dictated by the maximum amount of misregistration or error margin of the whole production workflow up to the printing press. Since the printing technology and the quality of the paper are the most important causes for misregistration it is possible to come up with some rules of thumb. E.g. for quality offset printing it is generally accepted that the trapping width should be between 1 and 1/2 print dots. When printing at 150 lpi the traps should be between 1/150 and 1/300 inch. (0.48 pt. and 0.24 pt., 0.16 mm. and 0.08 mm.). These values are usually multiplied with a factor of 1.5 or 2 whenever one of the colors is Black. First of all the trap will not be visible since the lighter color will be spread underneath the -almost- opaque black. For the same reason, in many cases, black ink will be set to "overprint" colors in the background, eliminating the more complex process of "spreading or choking". Since black is a very dark color, white gaps caused by misregistration will be the more visible. On top of that -in wet-in-wet offset printing- black is the first color to be laid down on paper, causing relatively more distortion of the paper and thus at higher risk of showing misregistration.
Whenever a trap between two colors is created this trap will contain the sum of the two colors in question whenever at least one of them is a spot color. In case the two colors are process colors, the trap will contain the highest value of each of the CMYK-components. This trap color is always darker than the darker of the two abutting colors. In some cases, more specifically when the two colors are light pastel-like colors, this might result in a trap that is perceived as too visible, In this case it might be desirable to reduce the amount of color in the trap. This should however be limited: the trap should never be lighter than the darkest color since this would have the same effect as misregistration: a light colored ‘gap’ between the two colors. Trap color reduction is also not recommended when solid spot colors are used. In this case reduction would cause the spot color in the trap to be printed not as a solid but as a screened tint.
Trapping towards a rich black (a black with a support screen of another color added to it to give it a ‘deeper’ look and making it more opaque - often called "undercolor" ), will follow the same rules as trapping to a ‘normal’ black. However, a stay-away should be created for the supporting color. This will prevent misregistration from revealing the undercolor at the edges of the rich black object. In short, a stay-away pushes the undercolor away from the edge of the rich black, and is usually created with a single color black stroke, set to "knock-out".
Blends or ‘vignettes’ often offer special challenges to trapping. The lighter part of a blend needs to spread into the background, the darker part needs to be choked. If a trap over the full length of the blend is needed, this would result in a very visible ‘staircase’. The solution here is the creation of a sliding trap: a trap that should not only gradually change color but also position. The trap can be created so that it ‘slides’ all the way, but this not often the desired effect either since it might distort the original artwork too much. Often the ‘sliding’ factor is set to a point where the neutral densities of blend and background reach a certain difference.

Thursday, 25 October 2012

Lecture 3: Panopticism

-How society or the social situations affects are reactions and behaviour.
-Institutions, and the specific type of power they hold over us. Those of a physical presence such as prisons, armies, police. Or those who have organised practices such as marriage and family.

Institutions and institutional power

‘Literature, art and their respective producers do not exist independently of a complex institutional framework which authorises, enables, empowers and legitimises them. This framework must be incorporated into any analysis that pretends to provide a
thorough understanding of cultural goods and practices.’ Randal Johnson in Walker & Chaplin (1999) 

Lecture aims:

-The panopticon
-Understand Michel Foucault's concept of 'Disciplinary society'
-How it make individuals productive and useful
-The body and the docile body

Michel Foucault

-Madness and civilisation
-Discipline and punish: the birth of the prison

The great Confinement (late 1600's)
House of correction - to curb unemployment and idleness
Madmen lived in society, happily.
The social value of work was introduced, and the social usefulness of work. An anxiety started to emerge about all the people who were socially useful. The unproductive were seen as a problem for society.
Work houses/ prison were built (houses of correct) contained the mad, the criminals, the drunks, vagabonds, the diseased, single mothers.
They were made to work, make the unproductive - productive. Labour was used as an exercise of moral reform.
The houses of correction started to be seen as a huge mistake, corruption began between the sane and insane. It was seen as an error.
Specialist institutions were created, for housing and correcting individuals. (The birth of the asylum)

Instead of physical violence to correct people, they're were treated like minors, they were given rewards for good behaviour, if they were bad they were chastised.
Physically control - to mental control, people were trained to behave.
A modern form of discipline.

The emerge of forms of knowledge - biology, psychiatry, medicine. Legitimise the practises of hospitals, doctors, psychiatrists.
These institution affect the way we think. Eventually the people begin to behave in a way they are supposed to by taking responsibility.

The ultimate power of the state over society was a reminder that the people should not test that, result was psychical harm.
Guy Forks - Hung, drawn and quartered. Grisly punishment.

French revolution - guillotine.

Disciplinary society and disciplinary power
Modern discipline: 

Discipline is a ‘technology’ [aimed at] ‘how to keep someone under surveillance, how to control his conduct, his behaviour, his aptitudes, how to improve his performance, multiply his capacities, how to put him where he is most useful: that is discipline in my sense’ 

Surveillance, control conduct and improve.

Philosopher Jeremy Bethams 'panopticon' 1791

Was designed as a multi functioning building, prison, asylum.
Circular building, with area for individuals (cells, with different floors)
Has a mental affect, it was proposed as a building that would function perfectly.
Inmates are constantly starting in to the centre of the building, being supervised, no lateral visibility of any one else (fellow inmates).
Has a strange affect, entirely opposite of the dungeon (mass social repression).
Panopicton is very light, and has a lot on display - the object of study.

Because you are constantly reminded that you are being watched, and are expected to behave in a certain way, you never rebel as you would be caught, no one to share thought or feeling with.
An internal form of physiological effects.

The panopticon - internalises in the individuals conscious state.

-Allows scrutiny
-Allows supervisor to experiment on subjects
-Aims to make them productive
-Reforms prisoners
-Helps treat patients
-Instruct school children
-Helps confine, but also study the insane
-Helps supervise workers
-Helps put beggars and idles to work

Examples of the panopticon:
-The open plan office - encourages people sharing experiences, workers in open plan officers are constantly seen by the boss, changes the behaviour of the workers.
(The Office) - Ricky Gervais

Those within the office begin to act up to the cameras, playing institutional roles, changing their behaviour.
-Open plan bars as apposed to traditional pubs - everything in the bar is visible, start to adapt to the space.
-Google earth - every street int he world is recorded and photographed, we live in a surveillance society.
-Pentonville prison - a version of the panopticon, in each seat is student between barriers, can only see the central lecturer/ teacher. Lecture theatres todays are arranged in that very way.
-Panopticon methods makes people learn more effectively, self regulation, control of oneself.
-cctv os everywhere in society

Disciplinary society produces what Foucault calls - 'Docile bodies'
-Self monitoring
-Self correcting
-Obedient bodies
Workforce of controlled citizens

Wednesday, 24 October 2012

Design for web - web terminology

Given that designing websites is going to be part of my routine i thought it would be useful to learn the terminology of web design as i will need to know these in the future. I've heard a few of the terms before but never knew what they meant, here are clear descriptions of each. 


Basically, this is the ability of a website to be used by people with disabilities, including visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities. A website with low accessibility is basically going to be impossible for those with disabilities to use. Accessibility is particularly important for sites providing information to those with disabilities (healthcare sites, government sites, etc.), though it is an important aspect to consider when designing any site.
Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.


The text a link uses to refer to your site. This can make a big difference in your site’s search engine results. See also: Backlink.


A portmanteau that combines “automatically” and “magically.” Generally, it refers to something that has a complex technical process that’s hidden from users, so that something almost appears to work by magic. If you think about it, many modern internet-based technologies could be classified as “automagical.”
The back end of a website is the part hidden from view of regular website visitors. The back end generally includes the information structure, applications, and the CMS controlling content on the site.
Backlinks are links from other sites back to your own. They’re sometimes also referred to as “trackbacks” (especially on blogs). Backlinks have a huge impact on your sites search rankings. Lots of backlinks from high-ranking sites can greatly improve your search engine results, especially if those links use keywords in their anchor text.
A “bad neighborhood” refers to the server where your site is hosted. A site hosted on a server that hosts other sites that spam or use black-hat SEO practices can end up penalized by search engines solely because of their proximity to those sites. In other words, be very careful about which web host you choose, what their terms of service are, and how strictly they enforce those terms if you want to avoid being penalized because of what your neighbors are doing. Linking to sites in bad neighborhoods can also have a negative effect on your search rankings.


Bandwidth can refer to two different things: the rate at which data can be transferred or the total amount of data allowed to be transferred from a web host during a given month (or other hosting service term) before overage charges are applied. It is generally referred to in term of bits-per-second (bps), kilobits per second (kbs), or other metric measurements. Lower bandwidth internet connections (such as dial-up) mean data loads slower than with high bandwidth connections (like cable or fiber).


This term is a carry-over from newspaper publishing days. In newspaper terms, “below the fold” means content was on the bottom half of the page (below the physical fold in the paper). In web design terms, “below the fold” refers to the content that is generally going to be below the point first viewable to the average website visitor in their browser (in other words, viewers would have to scroll down to see the content).


A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).


Breadcrumbs are the bit of navigation elements that generally appear near the top of a give web page that show you the pages and subpages the appear before the page you’re on. For examples, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post (or they might be a lot simpler that that). The breadcrumbs term comes from the fairy tale “Hansel and Gretel.”


Browser refers to the program a website visitor is using to view the web site. Examples include Safari, Firefox, Google Chrome, Opera, and Internet Explorer.


Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.


Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.


Client-side refers to scripts that are run in a viewer’s browser, instead of on a web server (as in server-side scripts). Client-side scripts are generally faster to interact with, though they can take longer to load initially.


Also known as a CMS, the Content Management System is a backend tool for managing a site’s content that separates said content from the design and functionality of the site. Using a CMS generally makes it easier to change the design or function of a site independent of the site’s content. It also (usually) makes it easier for content to be added to the site for people who aren’t designers.


In web design terms, a comment is a bit of information contained in a site’s HTML or XHTML files that is ignored by the browser. Comments are used to identify different parts of the file and as reference notes. Good commenting makes it much easier for a designer (whether the original designer or someone else) to make changes to the site, as it keeps it clear which parts of the code perform which functions. There are different comment formats for different programming and markup languages.


A CSS framework is a collection of CSS files used as the starting point to make XHTML and CSS web sites quickly and painlessly. They usually contain CSS styles for typography and layout.


Deprecated code is code that is no longer included in the language specifications. Generally this happens because it is replaced with more accessible or efficient alternatives.
Stands for Dynamic HyperText Markup Language. DHTML fuses XHTML (or any other markup language), the DOM, JavaScript (or other scripts), and CSS (or other presentation definition languages) to create interactive web content.


In GIF and certain other image formats, there is a limited color palette used for each image. Because of this, not all colors in an image are presented. Dither is used to approximate these colors by combining pixels of different colors side by side.


Stands for Domain Name Service (alternately Domain Name System or Domain Name Server). Basically, it’s the thing that converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser, those DNS servers translate the domain name to the IP address and point the browser to the correct web server.


The doctype declaration specifies which version of HTML is used in a document. It has a direct effect on whether your HTML will validate.


Stands for Document Object Model. It’s a language-indpendent, cross-platform convention for representing objects in XML, XHTML, and HTML documents. Rules for interacting with and programming the DOM are specified in the DOM API.


The domain is the name by which a website is identified. The domain is associated with an IP address. Domains can be purchased with any combination of letters, hyphens (-), and numbers (though it can’t start with a hyphen). Depending on the extension (.com, .net, .org, etc.), a domain can be anywhere up to 26 to 63 characters long.


Stands for Document Type Definition. DTD is one of several SGML and XML schema languages. It provides a list of the attributes, comments, elements, entities, and notes in a document along with their relationships to each other.


Short for electronic commerce. It’s the buying and selling of goods online, through websites. Products sold through e-commerce can be physical products that require shipping, or digital products delivered electronically.


An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. It’s ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.


In XML, an element is the central building block of any document. Individual elements can contain text, other elements, or both.


Em is a unit of measurement for sizing fonts and other elements within a web page relative to the item’s parent element. A 1em font is equal to the point size for the font already defined in the parent element (2em would be twice the current size; .5em would be half the current size).


An embedded style is a CSS style written into the head of an XHTML document. It only effects the elements on that page, instead of site-wide as a separate CSS file does. Style in an embedded style sheet will override styles from the linked CSS file.


Ex is a measurement for font height or size relative to the height of a lowercase “x” in that font family.


Otherwise known as XML. XML is a markup language used for writing custom markup languages. In other words, XML describes how to write new languages (it’s sometimes referred to as a “meta” language because of this). It also serves as a basic syntax that allows different kinds of computers and applications to share information without having to go through multiple conversion layers.


This is a CSS document that is written in a separate, external document. The biggest advantage to using an external style sheet is that it can be linked to by multiple HTML/XHTML files (which means changes made to the style sheet will effect all the pages linked to it without having to change each page individually).


Favicons are tiny (generally 16×16 pixels, though some are 32×32 pixels), customizable icons displayed in the web address bar in most browsers next to the web address. They’re either 8-bit or 24-bit in color depth and are saved in either .ico, .gif or .png file formats.


A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.


The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.


The fold is a term carried over from newspaper design and pagination (where the fold referred to the physical fold in the paper). The fold in a website is the point on the webpage that rests at the bottom of someone’s browser (in other words, to see anything below the fold, they would have to scroll down). There are varying opinions on how important the fold is in web design.


Font family is a group designation for defining the typefaces used in CSS documents. The font family tag generally lists multiple fonts to be used, and usually ends with the generic font category (such as “serif” or “sans-serif’).


In CSS, the font style refers solely to whether a font is italic or not.


The font weight refers to how thick or thin (bold or light) a font looks.


The front-end is basically the opposite of the back-end. It’s all the components of a website that a visitor to the site can see (pages, images, content, etc.) Specifically, it’s the interface that visitors use to access the site’s content. It’s also sometimes referred to as the User Interface.


Graceful degradation refers to a website’s ability to have elements that may take advantage of the capabilities of newer browsers done in a way that allows users with older browsers to still view the site in a manner that at least allows access to basic content. It also applies to making sure that if one small portion of your site doesn’t work in someone’s browser, it doesn’t break your entire site for them.


Also referred to by its acronym: GUI. A graphical user interface uses an input device (like the mouse) and visual representations of how the user is able to interact with a web application. In other words, it’s all the front-end stuff you see on a web application. It’s purpose is to allow you to interact with a web application without having to enter code.
Also referred to a “hex” numbers, they are a base-16 numbering system used to define colors online. Hex numbers include the numerals 0-9 and letters A-F. Hexadecimal numbers are written in three sets of hex pairs. Because screen colors are RGB (Red, Green, Blue), the first pair defines the red hue, the second pair defines the green hue, and the third pair defines the blue.


Contrary to popular belief, a hit does not represent a single visitor to a website. A hit is actually a request for a single file from your web server. This means one page can actually generate multiple hits, as each page generally has more than one file (an html or other base file, a css file, multiple images, etc.) and each one is requested from the server whenever the page is loaded. Some marketing people like to quote hits to unknowing consumers as the number makes their site sound like it’s getting a whole lot more traffic than it actually is.


The .htaccess file is the default directory-level configuration file on Apache servers. They are also known as “distributed configuration files.” Configuration directives contained in the .htaccess file apply to the directory in which the file is placed as well as all of its subdirectories. Within the .htaccess file things like authorization and authentication, rewriting of URLs, cache control and customized error responses can all be specified.


Stands for Hypertext Markup Language. It’s the primary language used to write web pages. HTML is primarily intended as a way to provide content on websites (with CSS handling the layout and stylistic options), though it can also be used to determine how that content is displayed.


Also referred to as an HTML element, an HTML tag is the bit of code that describes how that particular piece of the web page it’s on is formatted. Typical tags specify things like headings, paragraphs, links, and a variety of other items.


Stands for HyperText Transfer Protocol. HTTP is a set of rules for transferring hypertext requests between a web browser and a web server.


Similar to HTTP, HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer) or, alternately, HyperText Transfer Protocol Secure. Like HTTP, it’s a set of rules for transferring hypertext requests between browsers and servers, but this time it’s done over a secure, encrypted connection.


A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”


Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.


Short for Inline Frame. An iframe is used to display one or more web pages within another normal web page (one that isn’t a frameset page).


An image map is used in XHTML to allow different parts of an image to become different clickable elements (and can also allow some portions of the image to have no clickable element).


In CSS, elements that don’t have a pre-defined style will take on the style of their parent element within the document tree.


Elements with CSS written directly around the element it affects, instead of in a separate style sheet or header style.
Stands for Linux, Apache, MySQL, and PHP (or sometimes Perl or Python), and is referring to the specifications of a web server (defining the operating system, web server, database, and scripting language, in that order). One of the advantages of LAMP setups is that the software used is all free and open source.


A landing page is the page where a visitor first enters a website. Oftentimes, a special landing page is created to elicit a specific action from the new visitor (usually in connection with an advertising or marketing campaign).


A link farm is any website setup specifically to increase the link popularity of other websites by increasing the number of incoming links to that site. While some link farms are single pages listing unrelated links, others consist of networks of sites that contain multiple links back and forth to one another. Search engines can generally recognize these types of schemes and often remove link farms from their directories and penalize the sites linking to and from them.


A liquid layout is one that is based on percentages of the browser window’s size. The layout of the site will change with the width of the browser, even if the visitor changes their browser size while viewing the page. Liquid layouts take full advantage of a person’s browser width, optimizing the amount of content you can fit onscreen at one time.


This refers to the coding applied to a text document to change it into an HTML, XML, or other Markup Language document.


Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.


A meta tag is an HTML tag used to include meta data within the header of your web page.


Navigation refers to the system that allows visitors to a website to move around that site. Navigation is most often thought of in terms of menus, but links within pages, breadcrumbs, related links, pagination, and any other links that allow a visitor to move from one page to another are included in navigation.


Nesting refers to putting one HTML element within another element. When this is done, the elements have to be closed in the reverse order from how they were opened.


A non-breaking space (also referred to as  ) is a white-space character that isn’t condensed by HTML. It’s primary function is to hold open table cells or add spacing between words (or a the beginning of paragraphs if an indent is desired).


Open source refers to the source code of a computer program being made available to the general public. Open source software includes both web-based and desktop applications. Open source programs are generally free or very low cost and are developed by teams of people, sometimes comprised mostly of volunteers.


A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.


Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.


A plug-in is a bit of third party code that extends the capabilities of a website. It’s most often used in conjunction with a CMS or blogging platform. Plug-ins are a way to extend the functionality of a website without having to redo the core coding of the site. Plugins can also refer to bits of third-party software installed within a computer program to increase its functionality.


Progressive enhancement is a strategy for web design that uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.


Property is a CSS term and is roughly equivalent to an HTML tag. Properties are what define how a style should appear on a given web page.


A pseudo-element is an element used to add a special effect to certain selectors.


Like pseudo-elements, pseudo classes are used to add special effects to certain CSS selectors.


Also referred to as RSS. RSS is a standardized XML format that allows content to be syndicated from one site to another. It’s most commonly used on blogs. RSS also allows visitors to subscribe to a blog or other site and receive updates via a feed reader.


Refers to the physical number of pixels displayed on a screen (such as 1280×1024). Unlike in print, display resolution does not refer to the number of pixels or dots per inch on a computer screen, as this can be changed by changing the resolution of the screen (which, of course, does not change the physical size of the screen). The resolution of an image, however, is often referred to in terms of pixels per inch, though this has very little effect on how the image is displayed on screen.


Generally, a schema is an XML document used in place of a DTD to describe other XML documents.


Generally refers to a portion of code on an HTML page that makes the page more dynamic and interactive. Scripts can be written in a variety of languages, including JavaScript.


In CSS, the selector is the item a style will be applied to.


In semantic markup, content is written within XHTML tags that offer context to what the content contains. Basic semantic markup refers to using items like header and paragraph tags, though semantic markup is also being used to provide much more useful context to web pages in an effort to make the web as a whole more semantic.


Server-side refers to scripts run on a web server, as opposed to in a user’s browser. Server-side scripts often take a bit longer to run than a client-side script, as each page must reload when an action is taken.


Stands for Standard Generalized Markup Language. It’s a markup language used for defining the structure of a document. SGML isn’t mentioned very often, but it’s the markup language that serves as the basis for both XML and HTML.


Stands for Simple Object Access Protocol. It’s an XML-based protocol exchanging information across the internet to allow an application on one site to access an application or database on another site.


A specification is a document that offers an explicit definition and requirements for a web service or technology and generally includes how the technology is meant to be used, along with the tags, elements, and any dependencies.


A tag is a set of markup characters that are used around an element to indicate its start and end. Tags can also include HTML or other code to specify how that element should look or behave on the page. See also HTML Tag.


A template is a file used to create a consistent design across a website. Templates are often used in conjunction with a CMS and contain both structural information about how a site should be set up, but also stylistic information about how the site should look.


Stands for Uniform Resource Locator. A site’s URL is its address, the item that specifies where on the Internet it can the found.


Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.


Valid web pages are those that return no errors based on the type of HTML/XHTML specified in the doctype declaration at the beginning of the file. In other words, the code used on the page conforms to the specifications for that version of HTML/XHTML. This can be checked through various validation services, most commonly the one from W3C.


A web page is a single document, generally written in HTML/XHTML, meant to be viewed in a web browser. In many cases, web pages also include other coding and programming (such as PHP, Ruby on Rails, or ASP). Web sites are generally built from multiple interlinked web pages.


A web server is a computer that has software installed and networking capabilities that allow it to host web sites and pages and make them available to internet users located elsewhere. There are a few different setups that can be used for a web server, including the LAMP setup mentioned earlier.


Standards are specifications recommended by the World Wide Web Consortium for standardizing website design. The main purpose of web standards is to make it easier for both designers and those who create web browsers to make sites that will appear consistent across platforms.


Stands for Extensible Hypertext Markup Language. Basically, XHTML is HTML 4.0 that has been rewritten to comply with XML rules.


Stands for Extensible Markup Language. XML is a specification for creating other, custom markup languages. It’s an extensible language because it allows for the user to define the mark-up elements.