Some people are surprised at the amount of work, skill, talent, and time that goes into building a professional website. The following information will show you exactly what web designers do for almost every project.
Research and Writing
- We first learn your industry through research & talking with you
- We create the appropriate content for your webpages (copy & images)
- We search media galleries to find the best images that fit
- We purchase and download this media for your website
- We also copyedit any existing website copy and/or proofread it
Designing the Interface
- We develop color schemes using our knowledge of color psychology
- We determine the layout of your site
- We develop an organized navigational system
- We create and position sidebars, images, and graphic buttons
- We finalize a concept for your approval
Slicing & Exporting
After you’ve approved the concept, we have to convert the design into pieces. We call this “slicing”. A large graphic can’t just go on the web, it must be broken into pieces and converted into the language browser understands (which is HTML and CSS). But slicing the images mean we must:
- crop each and every graphical element
- optimize each graphic for fast download
- and save each individual image file to a graphics folder.
Each graphic piece makes up the entire website’s look and feel – they’re like puzzle pieces. Each piece must be measured in pixels, for future coding purposes. There can be many graphical elements to a website and it takes time to prepare them all for the web.
Writing the Code
Now it’s time to code the site. Coding involves 4 different code languages we must use. Every website you see was coded. Some websites were coded by a computer, others were hand-coded (written) by a human.
If you click “View” from your browser’s menu bar and select “source” or “page source” you will see all the code we as developers have to write – it’s very time consuming – and the code is different for each page.
The problem with computer-generated code is: it creates unnecessary and additional code that will slow down your website and make it hard to maintain and upgrade. Professional web designers chose to hand-code in order to create semantic and clean code that is easier to interpret by web browsers and easier to manage by humans.
HTML (HyperText Markup Language)
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8" />
<link rel="stylesheet" media="screen" href="stylesheet.css" />
</head>
<body>
<h1>The is a Content heading</h1>
<p>This is a paragraph - where the main content would go…</p>
</body>
</html>
HTML is the standard language used to display a webpage. The HTML tells the browser what and how to structure the information on the webpage like: paragraphs, links, headings, block quotes, menus, navigation list etc.
CSS (Cascading Style Sheets)
#header {
display:block;
background-color:#eeeeee; float:left;
width:950px; height:60px; color:white;
font-size: 15px; color:#4e6fa1;
}
CSS is a styling language that tells the browser how to style the paragraphs, links, headings, block quotes, menus and navigation list. CSS provides the layout of the entire site like: colors, borders, sidebars, logo positioning, the width of the site, images and graphics. A site without CSS is a site without style.
Once we command the layout to display correctly in one browser, we then have to make sure it renders correctly in the other major browsers. These other browsers will interpret the commands differently, so we may have to change our commands.
Internet Explorer (IE) is the most frustrating browser to program because it interprets the language wrong and it frequently doesn’t obey the rules. Example:
If we tell a box to be a certain size, with a certain amount of space padding within it, all the other browsers will get it right, but IE will screw it up; and the box will look funny. So this leads to changing our commands to suite IE or resorting to hacks (which is a sin in some circles of the web community).
It becomes a time consuming process to get IE to display correctly. You don’t understand the headaches IE has given many web developers. Thankfully, IE (with its new releases) are starting to obey the rules and making our jobs less frustrating.
Flash and/or Javascript
<script type="text/javascript>
"function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");}
</script>
Flash and/or Javascript are the languages that allow us to add motion and animation like: drop-menus, smooth-scrolling, button hover effects, presentations and more.
And last but not least:
PHP (HyperText Preprocessor)
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
PHP is the language that allows the website to be dynamic and interactive. You won’t see this code because it’s a back-end language that tells the website what to do before it’s sent to your browser. PHP is similar to ASP. PHP is the code language that runs WordPress and is responsible for commenting forms, email forms, photo galleries, polls and more. Without PHP, websites wouldn’t be as interactive as they could be; and would be very difficult to maintain and update.
Testing
After everything displays correctly in all the major browsers, we still have to do testing to see if the features work: like a contact form correctly sending the right data to the right place, or if WordPress plug-ins work correctly. Sometimes things go wrong and we have to spend time fixing them.
Server & Domain Name Set-up
The domain name is the address your website can be found. The server is the place your website’s files are located. To set these up, it involves logging into the service providers site (after the client has purchased these products) and changing codes and creating user-names and passwords so that the domain name and server work together.
Uploading the Site using FTP
FTP stands for File Transfer Protocol. This is when we transfer the final website to the client’s live server so that the website can display for the world to see. This may take a few hours depending on the amount of files and size of the files. Also, upload times are usually slower than download times and FTP can put a strain on our systems when active.
OK, so how much will it cost?
A web developer’s job is creative, technical and involves problem solving. Therefore a website design is not a product, but rather a service. Each service is unique for each customer.
If you understand what it is we do, you can understand that a customized, professional website won’t cost $500-900. Would you work 35+ hours for $500 and call yourself a professional company? At that rate, you’d go out of business.
Cheap website designs are usually made by amateurs with computer generated code, which don’t meet web standards, and sometimes, have been ripped-off from pre-designed template websites. You deserve a custom designed website that was built professionally from the ground up.
I hope this helps you understand what we do.