First Things First

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 Experts 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

• What will be the main purpose of your website?
  (In other words, why do you want a website in the first place?)
• Who do you want to use your website?
• What are your budget limitations and/or expectactions?
• What are your time limitations and/or expectations?

There are no right or wrong answers for these questions but being able to answer them thoughtfully will put us in the right direction for developing a website that works for you and your intended audience. If you are ready to begin, feel free to contact me. Better yet, click here to fill out my potential client questionnaire which is filled with more indepth questions tailored to your specific needs.

Of course, as in all relationships, I carry a part of the blame in the difficulties. At times, my ego, inconsistencies in my communication or overenthusiastic promises have caused strain and delay in deliveries. Each project I take on seems to teach me more about my working process, creativity and how to practice efficient communication. This treatise on good client-artist relationships is a culmination of all of that experience and reflection…

Please don’t fight me on signing a contract. If we don’t sign a contract, we don’t have a working relationship and you might as well stop reading this now. Requiring a contract is not a statement of mistrust. It is a method for us to iron out all the details and confirm both of our expectations and roles in the project. The contract provides us a mutual starting point for the development your project and to determine fair cost, timelines and responsibilities.

Tell me when and what you don’t understand — before and after we sign a contract — and I will do my best to explain until you get it. This applies both to the terms of our contract as well as design, editing and organizational terms that might confuse you. I try to keep my technical lingo to a minimum but sometimes, especially in the middle of a project, I’ll get a little caught up in the geekiness of it all. If you don’t speak up, I’ll assume you understand and will keep using the terminology and making design decisions based on that assumption.

Be realistic in your expectations and I’ll be realistic in my promises. I am a one girl operation. I cannot design and build a major website in 3 weeks and I cannot work on your project full time (unless you want to pay me a full time salary!). I work hard and I do good work but I don’t do it all. As we work through the proposal process, I will be honest with you about what I can give you and on what timeline. If you require something I cannot provide, I will help you find someone who can. You also need to honestly assess how much time and resources you can offer to the project to provide both content and feedback.

Establish a common sense approach to communication. We live in brilliant times with so many ways to communicate with each other. Modern technology empowers me to do what I love to do. However, with email, instant messaging, drop boxes, Skype, Basecamp and voicemail it is easy to get messages confused and get lost in the conversation. I make sure to talk with each client about which methods of sharing feedback and files will prove most efficient for both of us. I try to be as accessible as possible to my clients but I also need the time to actually work on my projects. Answering a dozen one sentence emails or daily IM check-ins is not a good use of my time or yours. Consciously collecting all of your quick dash questions into one formative email or one extended instant message conversation will help me help you more efficiently and with greater creative freedom. On my end, I take client-artist communication seriously and respond to all work emails within one business day, even though sometimes my response is simply an ETA for a proper response.

Designate a point person for feedback and design direction. I once had a client’s wife, mother-in-law and best friend all contact me with their edits and advice for the website. Not only was this extremely unprofessional, they contradicted each other’s ideas so that I had no clue what to do with the development of the site. While I strongly suggest that you ask for feedback from colleagues and friends, it is very important that I have only one person providing me with feedback to avoid confusion and conflicts.

Trust me & my experience and I will listen to you. If you’ve hired me, there must have been something you liked about my aesthetic and my work. I not only need but want feedback, suggestions and critique. Any feedback provided to me will be answered with a thorough and thoughtful response. However, sometimes this response will be an explanation of why I feel your suggestions won’t work for your project due to accessibility, aesthetic, technical or other means. One of my favorite parts of the client-artist relationship is our creative collaboration. I love when clients embrace this process as well.

Pay me when payment is due. The terms of payment are different for each project and each client relationship. The cost, parameters of the project and payment structure will all be defined in our contract to prevent any miscommunication or misunderstandings. If you request that I do work that falls outside of the framework of the contract, I will advise of you any additional cost before proceeding. I make my living working as a designer, writer and artist. I love what I do… but I also love to pay my bills on time! Of course, I understand that sometimes there is a delay. When this occurs, it is vital that clients are honest and forthcoming so I can know what the situation is and budget my time and finances accordingly. Pay me for my work and we’ll be good.

Your redesign could be solely behind the scenes as you increase browser accessibility or implement a content management system to make maintenance easier and more cost efficient. Other redesigns can be more of a facelift as you move to existing content to a more modern and/or clean aesthetic. Websites that need to be updated in content as well as design often require a complete overhaul. A full redesign is a time (and financial) investment but if it substantially increases both new and repeat visitors, it might just be necessary. So how do you know if it is time for a redesign… and what kind of makeover you need? To understand this, you need to make an assessment of your current aesthetic concerns, technology and traffic statistics.

If your current website looks old and clunky even when all of the information is up to date, consider transitioning to a newer design that makes your content more accessibile to time pressed internet users. This may just require refreshing the external stylesheet and graphics but if if your website was built with old markup (such as tables rather than external stylesheets) you may need to actually rebuild the code from the ground up to take advantage of the flexibility and technology of current browsers.

If your website uses a lot of free clipart graphics and an old logo that was designed in Word rather than a proper design program, believe me, it shows. If you haven’t invested in a unique branding of your site (and business), how can you expect potential clients to invest in you? If your code is clean and content is current, swapping out your photography, graphics and logo can be a major upgrade to your website’s traffic and user retention.

If you aren’t getting enough web traffic, you may need to edit your content or clean up your backend code (or both) to make it more accessible to search engines. If users are finding your site but aren’t staying there, this may reflect poor site functionality or a lack of relevant content. If you have good content, you may need to add or change your navigational system so users can move around your site more easily and find the good content.

If you want to be able to update your website more easily, this may call for a content management system to help your organize and edit content. Sometimes, adding a CMS doesn’t do anything to the aesthetic of the site but it will allow you to keep your content current without having to hire someone each time you need to change your site’s information. Depending on your content needs, you may also need to add a new section to your site such as a blog or calendar. Adding something like a blog to your site will require both design and technological work but it will give you a way to efficiently add new content to your site. This will not only encourage visitors to return more regularly but also improve your ranking with search engines who prioritize sites with frequent updates.

Other reasons you made need to redesign part or all of your site can include creating a mobile version of your site, formatting for print or adding an online store. Each of these new features will provide more reasons and more ways for visitors to visit and use your site. All of this being said, repeat visitors don’t want to have to learn a new website every time they visit. New content doesn’t necessarily require a new design unless your current design doesn’t work with it. When you do choose to redesign your website, it is prudent to think about what you might need long term so you can seamlessly expand your website to fit your future needs.

My first answer always is the same. “Google isn’t sitting at home fretting, ‘When is So-&-So going to finally make a website! I just can’t wait until she has a site!’ Google has no idea who you are. And, by the way, Google isn’t a person, it’s a technology. So not only doesn’t it know who you are, it doesn’t care.”

Most of the people I say this to laugh self consciously as they realize just how ridiculous they were being thinking that Google, a company that announced in 2008 that it had indexed over one trillion websites, would take notice of their website in one week’s time. Google is powerful but… come on.

The best way to obtain a good page rank is to work hard at creating valuable and relevant content. It isn’t as fast a method as paying for sponsored listings but it will earn you consistent priority for relevant searches. Search engines use algorithms to determine page rank that are constantly changing due to new technology and also, unfortuantely, to counteract bad faith practices. The base of these algorithms, no matter how often they change, is always germane content. The content on your site should be pertinent to the purpose of your website, useful for users of your site, grammatically correct and updated often to stay relevant.

There needs to be almost as much thought as to how your content will be arranged throughout your website as there is to the actual content itself. Search engines check to make sure your entire website has a cohesive intent. Your pages should all have the same tone as well as a balanced amount of images and text. Obviously, there will be photo gallery pages or contact forms that have a natural imbalance or lack of purpose-driven content but the bulk of the site should organically work together. To help maintain focus, I often suggest that clients first write out a list of questions they want to answer on the website as well as key phrases that they think users will search for to find their site. Keeping this list in front of you while you develop the content for the site will help you integrate the keywords into the copy seamlessly and keep you centered. It is much easier to write consciously keyword-centered copy from the start rather than going back through and trying to cram it in. Search engine software depreciates random lists of keywords, especially those listed at the bottom of a page to try to increase the weight (number of times a word is used). This is why it is important to write fully constructed sentences that indicate to search engine software that your website speaks about a subject thoughtfully rather than just spewing a list of popular keywords.

Search engines not only look at your content but also look for your “popularity” with sites that have similiar content. Popularity is gauged by websites that link to your website. The measure of your inbound links is further arguement for creating relevant content that is valued by your users. Strong content (especially content that is updated frequently) will encourage repeat visitors who will also recommend your site through their websites and social networking portals. When other websites are recommending you via links, search engines will take this as a sign that your website is a valuable asset to the internet community and rank you accordingly.

Outbound links, or links to websites other than your own, are also considered by search engine algorithms. Linking to other websites shows you are actively promoting the communal intent of the internet that search engines look for. However, because websites have nefariously linked to websites that are not relevant simply to promote their page rank, outbound links are not counted as heavily as inbound links. Of course, linking to sites that have similiar intent will encourage them to visit your website* and they just might link back to you, thus increasing your inbound links. Think of it has hyperlinked kharma.

You should be thinking about search engine optimization from the very first stages of website development. It is important to choose a domain name that correctly describes the purpose of your website. Obviously, this gets more difficult as time goes by and there are few and fewer options for domain names. Whenever I decide I want a new tattoo, I make myself sit with the design for a minimum of 6 weeks before I get inked. For domain names, I suggest a minimum wait time for 6 days. You can change a website name more easily than a tattoo but once you build up the audience you won’t want to. So make sure your name reflects the purpose of your site, is easy to remember & pass on to others , and that it’s spelled right! (That last tip applies both to domain names and tattoos!)

Clean markup, alt text for images and a separate style sheet all make it easier for search engines to assess your website’s content and apply a page rank. All search engines except The Open Directory Project (which is hand/human-indexed) use software programs called spiders to index your website. These spiders go through every page on your website and assess its content. If the software has to find its way though messy code or too many images that don’t have a text description, this will lower your page rank. This is a major reason that I handcode all my websites so I know exactly what is going in the source code and avoid extra markup that might confuse search engine spiders. (For more information on the elements of web design such as “markup” and “alt text”, see my terminology page.)

Of course, there are ways to get search engines to take notice of your website and rank you quickly. Most of these methods cost money. If you want to know how to invest your money wisely and to maximum effect in an SEO campaign, I will happily connect you with a respected online marketing firm. I work with all my clients throughout the development of their site to integrate good SEO practices and also advise on how to continue to improve your ranking over time. Regardless of whether you employ paid advertising methods or not, quality, useful content in an efficient, accessible website is the most important and most proven method to earn a priority ranking in all search engines.

*How do other people know you link to them? This is shown in a website’s statistics. Most web hosting companies provides one or more means to check their statistics to determine how many visitors you’ve had, what pages they’ve looked at, how they found you and much more. You can also use the popular (and free!) Google Analytics to view your site’s statistics.