Sometimes the client wants to convey an idea, they just don't seem to be putting it into terms web developers understand. On the opposite side, web developers can have a hard time explaining the back end of websites to the client. Web developers will throw around terms and lingo passed the client, but what they are really doing is verbally slapping them in the face. This can lead to complete communication breakdown, leaving no one satisfied.
Its no one's fault though. Just because a client has been put in charge of managing the company's website, doesn't mean they know how to build a website; and because web developer has thrived around these key terms, sometimes they don't realize they're speaking another language. And that's what web developing is, another language. Whether it be the language of the code or be the terms developers use, both are something that has to be taught and practiced to be fully understood, much like foreign language.
However, the client doesn't always have time to take classes or sit down and research what exactly makes up a website. Therefore, I have comprised a list of key words that are commonly thrown around between clients and developers in hopes to better communication.
Navigation
Navigation is essential to many websites, especially more complex ones. But what is navigation?
Navigation or the navigation bar is the list of links that direct you to different pages on the website. Note: navigation isn't just a single link in a paragraph or any series of links on a page, they refer to the primary method of getting around the site. Usually the navigation bar rests at the top of the page, or on the side. This part of the website is usually found throughout the website and in the same spot all the time.
I've heard navigation called many different things, all very similar, but the most common are navigation, nav, main navigation or primary navigation. Just as long as it's clear that the set of links you're referring to are the navigation links, every developer in the room will be on the same page as you. While the main navigation is featured on most sites, there usually exists a secondary or footer navigation. As long as they're still a group of links that guide you around the site (or possibly parts of the same page), referring to them as navigation is a safe bet.
Useful phrase: I want a secondary navigation on this page that features links that will take you to different parts of the page its on, so the user doesn't have to scroll all the way down.
Banner vs. Header
Another part of a site, just like navigation, is the banner or header of a site. Both terms can be interchangeable, but both can exist on the same site and mean two different things. This makes it difficult to keep track of what's what, but in proper context, can be very clear. A banner usually is at the top part of the site, usually spanning the width of the site. It can be an image, text or a combination of the two. Its not a logo or a navigation bar. A site doesn't need a banner, but sometimes it can enhance the look of the web site. A header can also be referring to large text found at the top of the page. Again, not the logo or navigation. When using the term header, I don't usually mean an image, just text. Header can also mean important text before a paragraph, like in a news paper or magazine article. The larger text that grabs your attention and makes you want to keep reading.
Useful phrase: I want these images to be a banner on this page, and rotate in a slider.
Styles
Styles is a broad term that encompasses how a site looks. Plain and simple. Styles control the font size, font color, the spacing between paragraphs, backgrounds, hyperlink colors, spacing between content, how wide or tall the web page is, etc. All these styles are defined through a style sheet. A style sheet is exactly what it sounds like, a sheet full of styles hooked up to the website. In developer circles, its generally referring to as a Cascading Style Sheet (CSS for short). Basically, its a sheet of code that defines out any visual aspect about a website. So next time a web developer says something is controller through a style sheet or CSS, you'll know exactly what sheet they're talking about.
Useful phrase: When making this new page, please follow the styles of the rest of the page. OR. I want this page to look different from the rest of the site, please use different styles.
Divisions
Often when talking about why some content appears where it is and others somewhere else on the same, I cannot help but to talk about it as if I were working on it through the back-end, code part of the site. This doesn't help the client at all. But simply, divisions are imaginary boxes that hold content of a website; sometimes referred to as divs for short. They can be boxes that hold the entire main navigation, a paragraph of information or a picture. They are impossible to see or know about unless you have ample knowledge of code and are directly looking at it. Remember in early plannings of your site, sometimes the developers will scribble out boxes on a white board or piece of paper to signify where content will be place? Those are the rough translations of divisions.
UNF's website is kind enough to actually have good, visual representations of divisions. As you can see from this image, there are gray boxes all over the page. Each of one these boxes probably represents a division. A division is used to position a block of content anywhere on the page.
Useful phrase: In this division of information, I want the text to be blue.
Search Engine Optimization
Many know that search engine optimization means the ability for a search engine to find your site. You type in amazon into Google or Bing and amazon.com will always come up first. Why? Because they have good SEO or search engine optimization. Basically what defines how good a site is search for has to be done through a web developer. They will go in and define key words that best describe your site. These key words will be found by Google and rank your site according to how many are relevant. Ranking refers to on what result page your website will show up when it relates to a search. It doesn't matter how big your company is, if your website doesn't have good SEO, no one will find it. Since most developers are more than capable of doing this for a client, it doesn't come up a lot, but when it's mentioned, you won't be lost.
Useful phrase: My current website comes back as the 5th result in Google, is it possible to increase its SEO?
Dynamic vs. Hard-coded
These two words refer to the site's content. Dynamic content means this content was meant to be changed or edited on a regular basis. Dynamic content usually sits outside the coding of the website so that anyone can go in and change it without needing a degree just to know what's going on behind the scenes. The most common way the content is changed is through text windows or text fields (like what's found on a form). Not code.
Hard-coded content means its static, unchanging or in the code. Although it's nice when you can have complete control over content all the time, sometimes it just never needs to be changed. That is when something will be hard-coded, or coded through the language of the website.
Useful phrase: Is this content dynamic or static (hard-coded)? Can we make it dynamic so I can change this often?
Screen Resolution
Have you ever noticed how a site can seem a different size on one monitor than another? This is because anything that has a digital screen has a resolution. Your TV, computer, iPhone, PSP, etc has a resolution. Resolution refers to the number of pixels it can display. Pixels are very tiny squares that act like the atoms of anything displaying on the screen. Low resolution means the pixels are more apparent and cause those jagged edges on pictures and everything seems bigger. High resolution means there are no jagged edges and everything seems smaller. The physical size of the monitor has a lot to do with the resolution it has. The bigger the screen, the more resolution it has.
Because many people have different monitor sizes and, thus, many different screen resolutions, web developers created a guide line to how 'big' a web page will be. The rule is 960 pixels wide, 728 pixels tall. If your web site is 960 pixels wide, odds are, it will display on just about every monitor out there, thus, ensuring everyone can view it comfortably. Ever come upon a page where there's a scroll bar at the bottom of the screen, making you move it horizontally to view all the content? That's because that site was build too big for your monitor, not good.
Useful phrase: Will the background of my website continue as the screen resolution gets higher?
Images
I know what you're thinking. What could image possibly mean that I don't know about already? Well, nothing. Image is an image: picture, photograph, graphic, etc. However, what you may not know is your image has a resolution. A low resolution picture is small and when made bigger, looks like a bunch of small squares. A high resolution picture is large and features no visible squares (although, zoom in far enough, you can see them). Those squares are pixels, and no one wants to see them up close. It makes the image look bad, which means it can make your site look bad. Look at Amazon.com's pictures. All of them are nice and clear. They are all high resolution.
Low Resolution stretched to the same size as the one below
High Resolution
The resolution of an image has a lot to do with what type of camera took the image. Camera phones are low resolution cameras. They don't take good photos and would never look good on a web page (sorry Facebook). Digital cameras are capable of taking very large pictures, sometimes too large. But too large is never a problem in the hands of a capable web developer. We've been trained to resize any large image to look great on any website. However, if the image is too small, there's not a lot that can be done. Resizing an image is a complicated way to say stretching an image or condensing an image. Stretching an image causes pixels to show up. Thus, stretching small images to fit a big space is never recommended. Condensing a large image has no adverse effects and are greatly appreciated when building a site.
So how do you check how big your image is? Well if you have Windows 7, select the image file and look at the bottom of the window that represents the folder (on the bottom left of the window in Windows XP). You should see information like format, size and dimensions. Dimensions tells you how big the image is. A small image is around 50 pixels by 50 pixels; generally not useful for a web page. A large image is around 500 pixels by 500 pixels, a decent size for a web page. When taking photos for a website, the bigger the better, and the easier to work with.
Useful phrase: I have provided you with high resolution pictures, please use them on my site.
Lightbox
If you have a photo gallery on your page or plan to have one, odds are you have or are going to need a version of a lightbox. But what is a lightbox? Is it a light bulb housed in a cardboard box? That sounds more like a fire hazard than a photo gallery feature. No, this is a lightbox...
A lightbox makes the screen look like this when you click on a picture in a photo gallery. Not all lightboxes look like this, but most have the same components: previous and next buttons, close button, how many photos there are and the photo name. As you can see, a lightbox simply takes the full size of a photo and puts it on display, while darkening out the rest of the site. Its a good feature to have and makes viewing photos easy.
Useful phrase: Can my photos be displayed in a lightbox?
Jquery and Javascript
Jquery and Javascript are two magical words that can make dreams come true. Where HTML and CSS coding just doesn't cut it, Jquery and Javascript will swoop in and make everything alright. Want that lightbox to work? Jquery/Java. Want some motion in your site that will work on almost any device? Jquery/Java. Want the Jaguars to have a winning season? That's... probably not a web issue.
Its not uncommon for web designers to not know how to code out Jquery and Javascript, they're just more coding languages you need to remember on top of everything else. Luckily, other developers do know, and they graciously post their creations on the web for designers to snatch up and use/manipulate. But what clients should know about these two languages is: if Java/Jquery is on your site, everything's all right. And any well-seasoned developer should be able to manipulate and incorporate without too much hassle.
The old standard used to be make everything in Flash, but that's being slowly phased out for more flexible methods of designing. Flash also isn't universally supported on all devices like iPhones and iPads, and requires updating. Both Jquery and Java have neither problem
Useful phrase: I want this motion graphic coded in jquery/java.
That concludes all the key words I can think of right now. My plan is to add more and have this be an on-going series. If there's any key word that you feel needs to be addressed or if I didn't quite explain something well enough, leave a comment and I'll make additions and edits as promptly as I can.
No comments:
Post a Comment