First Things First
Whether you have a one page or a one hundred page website, there are some basic terms that you need to know simply to get started.
Domain Name
A domain name is the familiar text address of a website. For example, the domain name of this website is irmacreative.com.
Uniform Resource Locator (URL)
Every page and/or file on the internet has its own address on the internet which is referred to as the URL. The URL includes the domain name as well as the path (location) of the file within that domain name. The URL of this page is http://www.irmacreative.com/terminology.php. Images, movies, an attached PDF and any other file on a page also has its own unique URL. For example the URL of the irmacreative logo is: http://www.irmacreative.com/img/logo.png This means that the logo file (logo.png) is located at the domain "irmacreative.com" within the folder (path) "img".
Domain Name System (DNS)
While domain names are easy to remember, they don't actually tell your computer where to look for a website. The DNS translates text-based domain names into the numeric IP addresses (such as 208.77.188.166) that provide the location of your website's web hosts.
Web Host
So how does your website get from your computer to everyone else's? Technically, you could have each computer access your computer via the internet but that would require that you have your computer turned on and connected to the internet whenever someone wants to access your website. Your computer & internet connection would have to be fast enough to process multiple requests at once and to hand out the correct digital information to the each request. Most people & small businesses don't have that kind of processing or internet power so we use web hosting companies. A web host owns powerful computers -- often called servers -- that are always online, hold all of the files for your website in a centralized location and have the technological capabilities needed to handle any amount of users or processing requests. I have been with the same web host -- Accelerated Web -- for almost a decade. They have fantastic customer support and have worked with me through many a technical issue. I have highly recommended Accelerated Web to some clients but there are also other hosts that will serve certain needs better. We can discuss your website requirements and find the best company for both your hosting needs and your budget.
Bandwidth
Bandwidth indicates the speed at which digital information (text, image and video files) can be uploaded/downloaded over a network. If a network has a "wider" bandwidth, that means it has a faster connection. It is important to note the bandwidth of a web hosting company to ensure that you will have sufficient speed to not only update your website but also for an optimum end user experience.
Data Transfer
Every time digital information is uploaded or downloaded to a webiste, whether done by you to add new content or by a user downloading (viewing) a page, this is called data transfer because the information is being transmitted over the web host's network. A web host will provide a certain amount of included data transfer with your hosting page and any usage (by you or by end users) over this limit will result in additional fees. In the development of your website, irmacreative will determine approximately how much data transfer allowance you might need and recommend web hosting companies/plans based on this need.
File Transfer Protocol (FTP)
FTP software faciliates moving files from your computer to your web host's servers (and subsequently to your website). Although there are other ways to upload content to the internet, FTP is a very accessible method both in cost and skill needed to use it. For those clients who want to update their own website after launch, irmacreative will assist you in finding the right FTP client and setting it up for quick updates of text and images as part of your training.
Additional Notes
Almost all websites include at least 2 costs: the purchase of a domain name (often a yearly fee) and web hosting (often a monthly fee although some companies off discounts for paying 6 months or a year in advance). Some web hosting packages include the yearly cost of a domain name so it is wise to choose your host before purchasing your domain name. There are some free options out there, including blogs run off of Blogger or Wordpress, but most businesses opt to own their own domain address to convey legitimacy and have more flexibility. Additional costs may arise in the development or maintenance of a website. This may include the licensing of images, software to run an online store or integration of a client-support/project management system like Basecamp. Hosting and any additional costs are the responsibility of the client but irmacreative will happily provide assistance in determining what domain name, web host and additional features will best serve your needs.back to top of page
Web Language
Markup
Markup is an all-inclusive term for all of the code and characters that turn a text document into a file that is readible by a web browser.
HyperText Markup Language (HTML)
HTML is the computer language used to organize and format content on web page. It is made up of symbols and codes that tell a web browser how to display the page. HTML works with other coding languages to allow further customization as well as both internal and external style sheets that allow you apply style (color, font, size, order, images, etc) to a page. We use HTML to organize content into sections, insert images, add hyperlinks to both pages within a website and external pages throughout the internet, designate titles and much more. The HTML markup cannot be seen on the browser page but can be read by selecting "View Source" from your browser menu or viewed when the original file is opened in any text editor.
Hypertext Pre-Processor (PHP)
PHP is a scripting language used to create dynamic web pages. There is a lot that can be said for PHP and its different applications (I own 3 books dedicated to the subject) but there is one major benefit to PHP that potential clients need to know: PHP makes website design and maintenance much more streamlined by the use of "includes" that allow you to store information used multiple times throughout the website in one file. For example, if you have a navigational menu that is the same on every page of the website, you can put the code & content for the menu in a file named "nav-menu.php." PHP code is then inserted to render the menu on every page you want it to appear. If you need to change the menu, you then only have to change one file and it will propogate throughout the website. This saves a lot of time and ensures that you don't forget to update any individual page of crucial universal information such as menus, footers and logos.
Cascading Style Sheets (CSS)
Style sheets allow for the separation of the content and the format/look of a website by keeping all style attributes within its own file. This provides a lot more flexibility in the design and continued maintenance of a website. The greatest asset of CSS is that an attribute assigned to one type of content on the website only needs to be formatted once and it will be applied to all instances of that attribute. For example, all subtitles on a website can be assigned the HTML markup of <h2>. In the external CSS file, the <h2> attribute can be given formatting options for color, size, positioning, margin, etc., which will then be applied to all subtitles throughout the website. This means that if you want to change the color of all subtitles, you only have to edit one file and the changes will propagate throughout the site. Storing a website's formatting separately also allows you to make your website more accessible to both users and search engines as well as creating customized style sheets for conflicting browsers, mobile devices and print-friendly versions.
JavaScript
JavaScript is another computer language that works in conjunction with HTML, PHP and CSS to add more dynamic features to a website. You can think of JavaScript as being the "bells and whistles" of website design. The portfolio galleries on irmacreative are run using a javascript called noobslibe. Javascript can be used to create drop down menus, hover effects and a lot of other effects that add a lot of dimension to a website but don't cause a huge drag in load time.
Adobe Flash (formerly known as Macromedia Flash)
Flash is a multimedia software platform that can be used to add rich animation and interactive elements to a website. irmacreative does not offer Flash design services directly but has partnered with several brilliant Flash designers to create Flash-based games, home pages or complete websites. Please note, however, that irmacreative can easily integrate already completed Flash files (.swf) into a design.back to top of page
Website Structure & Components
Front End / Back End
I use a retail store analogy when explaining what "front end" and "back end" mean. The front end at a store would be what the customer experiences: the merchandise displays, the front counter, the decor and the checkout line. The back end in this analogy includes the stock room, late night inventory, delivery trucks and other behind the scenes work. Similarly, the front end of a website is what a user experiences from the visual aesthetic to the content to any interactive components such as commenting on blogs, making purchases or submitting a contact form. The back end of the website is the technology that makes the site work, the server equipment, databases and server-side code.
Index Page
Commonly referred to as the "home page," the index page is the first page that opens when a person types in a website domain address. Typically, this page's file is named index.html or index.php (other options include default.html or default.aspx). All browsers know to look for these files automatically so you do not have to enter in the file name when typing in a domain name. For example, to see irmacreative's index page, you simply need to type in www.irmacreative.com even though the file is actually located at www.irmacreative.com/index.php.
Hyperlink or Link
A link is jumping off point to connect two URLs, most commonly between two web pages. They can also link to images, sound files, PDF downloads or other material located on an internet server. Links connect pages both within a single website or to another website. There can also be "anchor links" which allow a user to jump to a different section within the same page.
Alt Text
The markup for inserting an image on a page has an allowance for alternative text that can be included to describe the image being displayed. Alt text is valuable in helping seach engines index your website as a search engine's software doesn't process your images. Alt text also contributes to a website's accessibility for vision-impaired users, mobile devices and any other browsers that cannot load images.back to top of page
File Types
Portable Document Format (PDF)
PDF files were designed by Adobe to create a universal format for documents. A PDF file can be viewed and printed with the exact same typeface, images, layout, etc regardless of operating system. This can be useful for forms, brochures, documents intended to be downloaded and printed, as well as other information-heavy materials. Adobe provides a free download of their Acrobat Reader.
Joint Photographic Exerpts Group (JPG / JPEG)
A high quality file format for full color or black and white images, JPG is often the file type of choice for photos.
Portable Network Graphics (PNG)
PNG files are becoming a preferred format for web graphics because you can save an image with a transparent background and smooth images. Although it is becoming more and more popular for its ease of use, some older browsers do not fully support PNG files so precautions should be in place for backup imaging or alternative text.
Graphic Interchange Format (GIF)
A popular image format that is relatively small in size, thus decreasing a web page's load time. Because of its compression level, GIFs are really only suitable for web work (print work requires uncompressed, higher quality images).
Favicon (.ico)
A favicon is the tiny image that is displayed in the address bar of a website browser. It is just a small detail that helps polish your website's identity.back to top of page
Talking About Design
Above the Fold
This is a term borrowed from the newspaper industry referring to content occurring above the fold of the paper. In website terms, "above the fold" means anything visible without the need to scroll down. Users should be able to understand the scope of any web page without scrolling, especially on the home page.
Breadcrumbs
Breadcrumbs are a type of navigational menu that allows a user to see the path they've taken to get to the page they are on. They are most often used in "dynamic" situations when there are many pages being created within many sections/categories.For example, on a blog, if a user is reading an archive page from March 2009, the breadcrumbs might look like this:
Home Page > Monthly Archives > March 2009
In an online store, breadcrumbs can be used to assist shoppers navigate through product categories. For example, in a shoe store the following breadcrumbs would tell a shopper they are currently in the gold sandals section of the high heel product category:
Home Page > High Heels > Sandals > Gold
Usability
Usability is a design term that helps quantify how user friendly a website is. A major factor in determining usability is navigation and how efficiently a basic user can find their way around. Consistency throughout the pages, minimal room for errors and visible access to contact information also contribute to a website's usability. Finally, although subjective, the overall appeal of a site's aesthetic is often included in usability discussions. This is a term I use a lot during the development of a website and when making suggestions because I feel it helps frame ideas from the users' perspective.
Error 404
There are many errors that your computer might encounter while on the web. Error 404 is the most common one and it means that the page has not been found. This usually is because the URL entered incorrectly either from a misdirected link or mis-typing the link directly in the browser's address bar. When users stumble upon an Error 404 page, some will go to the home page and attempt to find their wanted page from there but others will leave your website and look for the information elsewhere. Websites with good usability will have a customized 404 page that includes a navigational menu to access the complete site and, if the site is large enough to warrant it, a search box, in order to retain users and give them the best chance of finding what they are looking for.back to top of page
More About Images and Fonts
Pixel
A pixel is the tiniest form of measurement in an image file. Pixels are used as a way to gauge computer monitor quality; a higher pixel count will yield a better resolution and sharper image renderings. In individual image files, pixel count is an important factor in preparing images to upload to a website to ensure optimum load time while maintaining good resolution.
Dots Per Inch (DPI)
When designing an image or editing a photo, the DPI refers to how many dots (or pixels) are in each inch. The more dots that fit into the one-inch measurement, the sharper the resolution will be. Likewise, on physical pieces of equipment, the DPI rating measures the resolution at which the equipment can process an image whether it is printing a photo (output DPI) or scanning an image into a computer (input DPI).
RGB and CYMK
RGB (red-green-blue) and CYMK (cyan-magenta-yellow-key/black) are the two color modes by which an image file can be designed. Traditionally, anything designed for the web should be done in RGB while print work uses CMYK. In other words, logos and other branding identity materials should be created in both color modes so that they can be used in email campaigns, on websites, on business cards and in print advertisement without any color degradation. This also means you shouldn't just save an image from the web to print out. For all projects that require logo design, irmacreative will provide you with both RGB and CYMK color mode files upon completion of the project.
Sans Serif
Sans Serif indicates fonts "without feet" such as Arial, Helvetica, Frutiger, Gill Sans and Verdana.
Serif
Serif fonts have "little feet" and include Times Roman, Georgia, Palatino, Garamond.back to top of page
A Few More Things...
Content Management System (CMS)
A content mangement system does exactly what it claims: it is a software program that provides a way to organize, publish and edit the content of your website. The most common application of CMS for laypeople is blog software. Even if you don't plan to have a blog, we might choose to implement a customized content management system if your website will have frequent updates that you would like to handle yourself without needing to deal with the actual markup of your website.
Search Engine Optimization (SEO)
Search engine optimization is a conscious effort to develop a website that is not only accessible to its users but also to search engine software used to find and index websites. Click here for more information on good SEO practices that you can use in the development of your website's content as well as details on what irmacreative can do to better your search engine positioning.
WYSIWYG
This is an abbreviation for What You See Is What You Get. Most blog software as well as email programs offer WYSIWGYG options allowing you apply basic formatting such as color, bold and italics to your text as well as inserting images and hyperlinks.back to top of page
