User login

Who's online

There are currently 0 users and 1 guest online.

Who's new

  • sharjay
  • avg389
  • Chrissy
  • ClockReady
  • darkd

Web Design Terminology

As with any group, web designers have created a language of our own. Some of the lingo is based on English words but are given a different meaning in a web development context. Here are a few of the most popular phrases/keywords that I think every web worker must know.
 
Brow­ser — A brow­ser is a soft­ware appli­ca­tion that is used to view web­si­tes. Fire­fox, Inter­net Explo­rer, Opera, and Safari are some of the most popular. 
 
 
Ser­ver — When a user visits a webpage, data is sent from a external source to your computer. That external source is a ser­ver, essen­tially just like the one you are using but specially configured to process and  deliver information  to other computers. In addi­tion to “ser­ver” being used to desc­ribe the phy­si­cal machine, it also may be used to desc­ribe the soft­ware pro­gram used on that machine which hand­les ser­ving up that data, like Apache.
 
URL — Uni­form Resource Loca­tor — is one of those things like this: http://www.raaaj.com/raaaj/node/14 Some peo­ple also use URI — Uni­form Resource Iden­ti­fier — for the same pur­pose, although URL is far more com­mon. I honestly read the entire Wiki­pe­dia article for both and I still don’t really unders­tand the dif­fe­rence. A domain name is the first part of the exam­ple above: raaaj.com. Any­body can purchase a domain name, from com­pa­nies like Host Gator that spe­cia­lize in it. 
 
Tag are text that go around con­tent in HTML code to designated the type of con­tent that they are surrounding. For exam­ple, in this code <b>Hello</b>, the tags are <b> and </b>.
 
Anchor — An “anchor” tag is a tag that looks like this in HTML code: <a href=“http//raaaj.com”>link text</a>. Most HTML tags are refe­rred to by what they look like, for exam­ple, a <ul> tag would likely be called an “Yu-El” tag out-loud. The rea­son anchor is used is because it sounds weird both writ­ten and spo­ken to say “An a tag”. 
 
Wrap­ping refers to put­ting an tags around con­tent in HTML code. If you hear “You need to wrap that code in an extra div,” they mean that wha­te­ver con­tent area is being refe­ren­ced needs to have a <div> tag added before it and an </div> tag added after it. 
 
Nes­ting is similiar to wrap­ping but implies that it is seve­ral layers deep. For exam­ple, this is a series of “nes­ted” divs:
<div id="outside"> <div id="inside"> <div class="content"> </div> </div></div>
 
Bor­ked — Used when something is wrong, usually in refe­rence to the visual layout of a web­page. “The div that wasn't closed bor­ked the layout.”
 
Mar­kup — Mar­kup is simply another way of saying HTML code, but is slightly more gene­ric and may also be used to refe­rence XML or other “desc­ri­bing” lan­gua­ges. If you hear a phrase like “The site uses very seman­tic mar­kup”, that means that the website’s HTML code uses very appro­priate tags to desc­ribe the con­tent it dis­plays, which is a desi­ra­ble and some­ti­mes dif­fi­cult thing to do.
 
Acces­si­bi­lity — When acces­si­bi­lity is tal­ked about in refe­rence to web­si­tes, it means how easy it for people with disabilities to access. For exam­ple, how easy it is for mobi­lity impai­red uses to navi­gate the site, blind users to read the site, or color ­blind peo­ple to dif­fe­ren­tiate links from regu­lar text.
 
Usa­bi­lity — Usa­bi­lity is simi­lar to acces­si­bi­lity but dif­fers in that it refers to ease of use for all visi­tors, not limi­ted to disa­bled peo­ple. For exam­ple, a site that requi­res lengthy regis­tra­tion to view con­tent or that has navi­ga­tion that is in dif­fe­rent pla­ces on dif­fe­rent pages may be con­si­de­red to have bad usability. 
 
Fin­da­bi­lity — Fin­da­bi­lity is a sub­set of usa­bi­lity and refers to how easily users can locate the con­tent they are loo­king for on a web­site. Often a elu­si­vely dif­fi­cult task.
 
Vali­da­tion — It is pos­si­ble, even pro­ba­ble, that code con­tains mis­ta­kes. But who says what cons­ti­tu­tes a mis­take in code? When it comes to HTML and CSS, the W3C does. They offer tools to run these types of code through to check for errors. If it there are no errors, the code pas­ses and is said to be valid code (or “mar­kup”!) ALTERNATIVELY, vali­da­tion can refer to data. For exam­ple, if you enter a phone num­ber that is 5 digits long, soft­ware might “vali­date” that data and reject it as inva­lid.
 
Stan­dards — This again refers to the W3C, the orga­ni­za­tion that puts forth the “rules” desc­ri­bing how brow­sers should behave in inter­pre­ting code. Can you ima­gine how dif­fi­cult any job would be if everything you did you had to repeat five dif­fe­rent times with slight varia­tions? That’s what web stan­dards are trying to pre­vent, buy put­ting forth rules so that everyone’s job is easier things only need to be done one way. If you hear someone say they “write stan­dards com­pliant code”, it pro­bably means the code they write vali­da­tes, but hope­fully it also means they have an unders­tan­ding of the impor­tance of web stan­dards and fight for them.
 
Seman­tics — The word itself gene­rally refers to the mea­ning of words or word choice. On the web, seman­tics means choo­sing the correct HTML tags to desc­ribe to con­tent. For exam­ple, using table tags to lay out your site isn’t very seman­tic because those tags don’t relay any mea­ning to the con­tent they con­tain. Whe­reas, a tag like <navi­ga­tion> is extre­mely semantic.
 
Ren­de­ring is the pro­cess the brow­ser goes through when inter­pre­ting HTML and CSS and tur­ning that into the visual end result you see on your screen.
 
Client-Side refers to a lan­guage that is inter­pre­ted by the brow­ser itself. For exam­ple, JavaSc­ript is down­loa­ded by your brow­ser and then run locally on your machine. Your brow­ser is the “client”. 
 
Server-Side refers to a lan­guage that is inter­pre­ted by the ser­ver. For exam­ple, PHP is inter­pre­ted by your ser­ver, pro­ces­sed, and then deli­ve­red to you. As an easy exam­ple to remem­ber the dif­fe­rence, if you ask a client-side lan­guage to dis­play what time it is, it will dis­play the time set on your com­pu­ter. If you ask a server-side lan­guage to dis­play what time it is, it will dis­play the time set on the ser­ver.
 
DOCTYPE — This is the gib­be­rish loo­king code at the top of HTML docu­ments that looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
There are a num­ber of dif­fe­rent ones. They tell the brow­ser what spe­ci­fic set of rules should be follo­wed when inter­pre­ting the rest of the code in the document. 
 
Copy — It just means text. “I need some copy for that” means “I need the text that you want to go in that area.”
 
White Space — Areas of a design (not neces­sa­rily white!) that are inten­tio­nally left blank for aesthetics. 
 
Vec­tor — A form of graphic where the design is saved as points and mathe­ma­ti­cal for­mu­las. Because of this, the files are “reso­lu­tion inde­pen­dent” mea­ning they can be sca­led to any size without losing their crisp­ness. Adobe Illus­tra­tor files are vec­tor files (although it is pos­si­ble for them to con­tain bit­map data). AI, EPS
 
Bit­map — A form of graphic that is saved as indi­vi­dual pixels, mea­ning it has a set reso­lu­tion and can­not be sca­led up or down without affec­ting its crisp­ness. Adobe Pho­toshop files are bit­map files (although it is pos­si­ble for them to con­tain vec­tor data). JPG, GIF, PNG.
 
Analy­tics — Means data about the usage of a web­site. How many peo­ple vie­wed the web­site that day? What coun­tries were they from? What brow­ser did they use? How long did they stay? Those are ques­tions Analy­tic data can ans­wer. It is gathe­red by using spe­cial soft­ware built for cap­tu­ring it, like Goo­gle Analy­tics.
 
Ker­ning — Adjus­ting the spa­cing bet­ween two spe­ci­fic let­ters, to improve how a word looks aesthe­ti­cally. Trac­king is simi­lar but refers to ove­rall let­ter spacing.
 
Sprite — An image that actually con­tains mul­ti­ple ima­ges. The ima­ges are typi­cally dis­pla­yed crop­ped down to only show a small area. As counter-intuitive as it seems, this can improve effi­ciency by requi­ring less total ima­ges to be used.
 
Elas­tic — is a type of web layout where font sizes and widths are dec­la­red with a spe­cial unit of mea­su­re­ment called an Em (an abs­tract con­cept just mea­ning “rela­tive size”). This allows for the entire web layout to scale up and down, rather than just the font size. This dif­fers from a
 
Fixed Layout where theo­re­ti­cally the width of the site would stay the same and just the text would scale up and down or a Fluid Layout where the width of the layout is deter­mi­ned by the brow­ser window.
 
Fra­me­work — Gene­ric term to desc­ribe soft­ware that is built to sim­plify things. For exam­ple: RoR , or Ruby on Rails, a deve­lop­ment fra­me­work desig­ned to help crea­ting appli­ca­tions on the web easier.
 
Acronyms
 
CSS — Cas­ca­ding Style Sheets — a file ending in .css, which is lin­ked to from the HTML, which con­trols the look of the ren­de­red page.
 
HTML — Hyper Text Mark-up Lan­guage is the code that forms all web­si­tes and desc­ri­bes the con­tent it con­tains. It is impor­tant to unders­tand that ALL web­si­tes end up as some form of HTML, regard­less of the lan­gua­ges used to build them. For exam­ple, a file might be PHP (Hyper­text Pre­pro­ces­sor), as in index.php, but ulti­ma­tely what is ser­ved up to the brow­ser is HTML. The file exten­sion PHP just lets the ser­ver know to pro­cess any of the spe­cial PHP code inside before ser­ving it up. 
 
JS — JavaSc­ript — a client-side lan­guage with the uni­que abi­lity to A) watch for events (e.g. mouse clicks, key pres­ses, etc) and B) make things hap­pen on a web­page without a page refresh. For exam­ple if you see a but­ton on a web­site that you click and a new area sli­des down, that’s (pro­bably) JavaScript.
 
AJAX — Asynch­ro­nous JavaSc­ript and XML — A popu­lar tech­ni­que of loa­ding con­tent from a ser­ver and pla­cing it onto a page without the need for a page refresh. This has grown to be an extre­mely popu­lar tech­ni­que for buil­ding web­si­tes that are more res­pon­sive and feel more like desk­top appli­ca­tions. While AJAX is still tech­ni­cally an acronym, it usually doesn’t have a heck of a lot to do with XML. 
 
CMS — Con­tent Mana­ge­ment Sys­tem — a soft­ware pro­gram that runs on a ser­ver with the pur­pose of making mana­ging the con­tent on the web­site easier. For exam­ple, a site may have hun­dreds of pages (like this one). Each of those pages does not exist as a sepa­rate HTML file. Ins­tead, the con­tent is kept in a data­base and injec­ted into tem­pla­tes and ser­ved up as nee­ded by the CMS.
 
SEO — Search Engine Opti­mi­za­tion — Doing things to a web­site spe­ci­fi­cally to rank higher in searches done on search engi­nes like Goo­gle. On the web, traf­fic = money, and search engi­nes drive big traf­fic, hence the big desire for ever­yone to rank as highly as they can.
 
SERP — Search Engine Results Page — You search for something in Goo­gle, you get a page of results, that a SERP. 
 
TLD — Top Level Domain — .com, .net, .org … there are a lot of them.
 
CRUD — Create, Read, Update, Delete — gene­rally used to desc­ribe a web appli­ca­tion with the pri­mary pur­pose of doing those things. Think of blog soft­ware, where you can Create a blog entry, Update or Delete it later, and the Front-End of the site Reads it to dis­play it.
 
DOM — Docu­ment Object Model — is a bit of an abs­tract con­cept. It is the sys­tem brow­sers use to repre­sent and inte­ract with the objects (ele­ments) in HTML. For exam­ple, that DIV in your HTML is defi­ni­tely part of the DOM, but so is the brow­ser win­dow itself and it’s imme­diate page his­tory. Maybe the easiest way to think about it is that it’s basi­cally the HTML that makes up your page, plus a bunch of more stuff that only web nerds care about.
 
RGB — Red Green Blue — The color model that is used by elec­tro­nic media to dis­play graphics. Com­monly used to desc­ribe the “mode” an image is saved in. Ima­ges used for elec­tro­nic dis­play (web, video, etc) should be RGB.
 
CMYK — Cyan Magenta Yellow Black — The color model used by tra­di­tio­nal 4-color prin­ting. Photo-realism can be achie­ved by prin­ting only these four colors. Com­monly used to desc­ribe the “mode” an image is saved in. Ima­ges ulti­ma­tely being used to be prin­ted on paper should be in CMYK.
 
RSS — Really Sim­ple Syn­di­ca­tion is a spe­cial (and stan­dards based) form of XML for publishing con­tent. For exam­ple, most blogs pro­vide RSS of their con­tent. Other peo­ple (even basic users) can take that RSS and use it in dif­fe­rent ways, like repu­blishing that con­tent elsewhere, or just rea­ding it through spe­cial pro­grams, like Goo­gle Rea­der). May be refe­rred to an an RSS Feed, or even just Feed by itself.
 
DPI / PPI — Dots Per Inch and Pixels Per Inch. “Dots” are lite­rally phy­si­cal dots of ink on paper, deter­mi­ning the reso­lu­tion of a print image. “Pixels” are bits of data, deter­mi­ning the size of an elec­tro­nic image. Com­monly swap­ped and used incorrectly.
 
WYSIWYG — What You See Is What You Get — Desc­ri­bes anything where you inte­ract with the visual end result rather than an abs­trac­tion. For exam­ple, a font menu that shows what the fonts actually look like is a WYSIWYG font menu. A web design pro­gram that allows you to place boxes and drag them around is a WYSIWYG program.
 
SVN — Sub­ver­sion — A sys­tem for main­tai­ning dif­fe­rent ver­sions of code. Chan­ges are “chec­ked in” and can be “rolled back” to pre­vious ver­sions (in the case of problems). 
 
Phra­ses
 
Above the Fold — This comes from the news­pa­per industry, where the space on the top half of the front page is far more valua­ble than the space below it. On the web, con­tent that is visi­ble without scro­lling is refe­rred to as above the fold, and is also more valua­ble (as in, to adver­ti­sers or just gene­rally for users attention).
 
Brow­ser Safe — or “Web Safe” refers to a spe­ci­fic set of colors that, in the long long ago, would be accep­ta­ble to use because they would dis­play pro­perly on all com­pu­ter moni­tors. No lon­ger very relevant.
 
Hover State — When your mouse cur­sor rolls over a link, and that link chan­ges color, that is the links “hover state”. A moc­kup web design might con­tain both a but­tons regu­lar state and hover state. Dif­fers slightly from Active State — which is a the cir­cums­tance a link would be in if, for exam­ple, the link was “tab­bed to” in a browser.
 
Back End — Gene­ri­cally refers to anything going on “behind the sce­nes” of a web­site. There are all kinds of things that hap­pen on com­plex web­si­tes under­neath what peo­ple actually view in their brow­sers. A CMS is an exam­ple of a “Back-End”.
 
Front End — The part of a web appli­ca­tion that peo­ple visi­ting the site in a brow­ser see. Essen­tially the “web­site” part of a website.
 
Sli­cing a PSD — Phrase used to desc­ribe the pro­cess of con­ver­ting a Pho­toshop docu­ment (PSD) into an HTML/CSS web­site. There is a “slice tool” in Pho­toshop, which can be a part of this pro­cess, but not necessarily. 
 
Pixel Per­fect — A finished web design that matches per­fectly the moc­kup from which it was created.
 
Brow­ser Zoo­ming is a fea­ture in brow­sers where entire web­site are mag­ni­fied, rather than just text resi­zing. Somewhat con­tro­ver­sial, as it can cause Hori­zon­tal Scroll, a situa­tion where a web­si­tes con­tent is wider than the brow­ser win­dow mea­ning that a user would have to move the scroll bar left and right as well as up and down to brow­ser content.
 
Got some more words/phrases/acronyms that pro­bably con­fuse regu­lar folks?

 



Subscribe to our RSS feed
Become a Fan
Follow us on twitter
Our YouTube Channel
Follow us on DIGG

Shout Box

darkd:

Great Site...you need more css tutorials, i think thats what most people are interested in.

DevKing:

Nice website!!

Raaaj:

Hi Designers !!!

Login or register to post shouts
All Shouts

Poll

Have any of your websites ever ended up on the Google Blacklist?
Yes
100%
No
0%
Not Sure
0%
Total votes: 1