The Process Of Building a Web Site: Part II
Planning the site
Now that you have your team assembled, it’s time to talk to the designer about planning and putting together your web site. If they’re a competent designer, they will provide you with a specific questionnaire asking you about all specific aspects of your business to make the best possible decisions regarding your web site. Here is what usually goes into the planning stage of the project once the questions have been asked, answered, and deliberated. These forms will typically contain questions geared toward obtaining your color tastes, the demographics that your company markets to, and the specific information about how your users will use your site. Please remember that the following information is general in nature, and that not all steps will apply to all web sites. Some variations will be needed depending on the industry. It will be up to you to tailor the development process to your industry.
1. The designer will develop a structure of the site that will match what you had typically requested. They will provide a mockup of this structure. When I’m talking about the site structure, I’m talking about a flow chart, not a navigation menu. Here’s an example of what the flow chart should look like:
2. Once the flow chart has been established, then the designer will work on a few mockups. This is the step where you will want to discuss color information, your design preferences, and your competitors’ web sites. It’s best to come up with at least 5 different competitor web sites that you like and present them to your designer. This way, they will have a good idea of how to proceed with the project. Communication is SO essential to the success of any web design process. You must provide the most complete information that you can about your current company situation.
3. As the mockups are completed, you will be able to see the specific visual representation that the designer has chosen for your web site. If you don’t like them, then you need to let your designer know. Advise that you would rather have a different version of the web site, or if there IS a specific web site that you like that’s better than the competitors, send it to your designer and see how they can provide a similar design. Nothing’s worse than having a site you don’t like, so you will absolutely need to make sure you are nothing less than enthusiastic about what the designer came up with.
This is the time where you will also want to discuss modifications to the web site’s content. Typically, your designer will provide text that’s in latin or some other language, but in the design world, every designer tends to use what’s called Lorem Ipsum text. You will need to discuss with your designer, if they provide these services, the content that you want on the site as well as how you want them to write it.
4. At this stage, once you have approved the mockups, your designer will proceed to coding them. This involves slicing up the mockup in a program like Photoshop and writing the specific code to make sure that all the elements of the site work together appropriately. Please be sure that your designer knows all about standards and can actually implement them by hand. If they cannot, your web site will be riddled with errors in the code and that can cause your web site not to be viewable in every resolution and browser on the market.
5. At the time the coding is completed, your designer will upload the site to a test directory so that you can take a look at it before it’s launched. This is where the quality testing stage should be implemented. Make sure you remind your designer to test the code, test all other resolutions, test all other platforms. If they’re not able to do this even though they said they would earlier, now would be a good time to dump them and move on to another designer before you lose more money on the project.
6. After the quality testing stage, you should have already purchased a domain name through consultations with your designer/marketer. If you have a separate marketing specialist, make sure they are both compatible and able to work together. Different designers and marketers have different philosophies, and if one cannot compromise you risk your project’s demise. It’s now time to launch the site and proceed with the marketing of your site.
Now that you’re familiar with the planning process in detail, I’m going to go through specific technical details about how the designers and developers you work with build the site. While this is not a be-all end-all reference, and every designer and developer does things differently, there are general steps that are followed by your designer when they’re buliding the site.
1. Once the mockup image is complete, the designer will work on slicing this up and putting it together with code. While it’s not 100% easy and foolproof, it’s a process that you want to be familiar with.
2. In the design phase, the designer will perform the following steps:
a. Build the grid that will be used as the table template.
b. Import the photoshop image with the grid into image ready, a program which provides completely perfect guide processing for the image.
c. Once the image is sliced manually, designers will do one of two things: they will manually code it, or they will put it together in dreamweaver and manually edit the code to be standards compliant if need be. However, one major caveat of putting the site together in dreamweaver is that if a specialized method is to be used (such as separating design from content), then the designer will have to know how to manually edit the code.
d. After the site has been coded, it is essential that the code is checked for errors at every step. The designer will use specialized code checker software for this step, to make absolutely sure that your site is standards compliant. If they are a great designer, they will manually go through the code to make sure that it’s perfectly compliant with W3C standards.
e. If there is specific interactivity that’s required as part of the web site, the designer will usually integrate that using Flash as well. These programs were designed to work together, so it’s important that you check that the designer uses these programs.
While that isn’t a complete technical overview of the process, it will give you a good idea of what to look for to make sure your designer is doing their job.
A word on compliance with W3C standards.
The World Wide Web Consortium (abbreviated as W3C) is a group that develops standards and documentation for the languages that are in use in web design today. They are there to help make sure that HTML, CSS, and other code is up to a high quality standard. I really have to reiterate this again because standards are so important. While it’s an opinion that’s not shared by everyone, it is and always will be important to me as a designer. I’ve always taken the care to make sure that my clients’ web sites all have complete, 100% accurate code. And, I expect every single designer to do the same. Ask your designer if they are aware of standards and what they are. If they mention anything other than the World Wide Web Consortium (W3C) and multi-platform compatibility, run far away from them.
Standardized coding is one of their primary practices. The designer that you choose should go through the code on your site to make sure that it’s 100% perfect all the way through. Be sure to request this and make sure to get it in writing as part of your contract. I can’t tell you how many sites that are out there with 500+ errors in the code. It’s so mind-boggling that people have such low standards of quality that they would actually pay money for such terrible projects. Now, when I was a beginning web designer I admit that I didn’t always have 100% correct code, but that was only because there were specific requests made that didn’t adhere completely to online standards. They were a client choice. However, as a more mature and developed web designer, I feel lucky that I had the clients that I did and was able to provide a high quality web site anyway. But, it just amazes me now how many people pay for such terrible quality web sites that don’t pay attention to the smallest of details.
This kind of renegade coding will not help your potential clients when they visit your sites, and it will not help you. While the coding will not be visible to those that are not technically inclined, there will be noticeable difference in quality on the site. The site will load poorly, it will not be viewable on all browsers accurately, and it’s just low-quality workmanship overall. Think about it: would you hire a sub-standard contractor to work on your home and provide the worst work imaginable? I know I wouldn’t. So please please PLEASE do your research when you look for a web designer.
Now, here comes some of the fun stuff. I’m going to teach you about how to use HTML, why it’s used, and how web designers actually use HTML to build the site.
The Process of Building A Web Site: Part I
Now that you have a good idea of what’s involved with the development and launch of a specific project, I’m going to go through, in more intricate detail, how web sites are built. This will help you get a good handle on quality and what to look for when searching for your web designer. Don’t get into too much of a hang-up on price, because you really do get what you pay for when you buy web sites on the cheap.
However, and I would like to emphasize this as much as possible: if you are not much of a tech-savvy individual and you want a web site, templated web sites are a GREAT option for you. They are usually editable using a WYSIWYG editor, they usually have wonderful support options, and you won’t ever have to touch a line of code. Templated sites are great for those that are looking to have a site that they can modify themselves without coding, but can be terrible for shopping carts and e-commerce. Here’s why: templated sites have a well-known reputation for being similar in form and structure to every other template from that provider. You don’t have any kind of copyright protection against someone else using your same design, and you certainly won’t have that special feel that comes from a completely custom site.
The special feel is important if you want to differentiate yourself from your competitors. Imagine, if you will, that major credit card companies such as Capital One, American Express, and Bank of America all used the same templated web site system. It would look pretty obvious, right? None of them would be able to set themselves apart from one another and provide a strategic alternative featuring their branding. The web sites would be the same, and we would not want to buy from them for doing that! Now, put yourself in the shoes of your clients who are visiting you and your competitors, and you all use the same templated web site. Your heart would sink because there is no brand differentiation or creativity involved in providing a strong branding and marketing campaign! Remember, though: I am not disputing templated sites. I think they are a fantastic option for those who are not technically inclined, and should be used in those instances. I just think they are not the best option to go with when you’re attempting to differentiate yourself in the online e-commerce marketplace.
This is why it’s so important to participate in the planning stage of your web site as much as possible. You do not want to go through the hassle of re-designing the site from the ground up after using a template site, re-building the shopping cart, and paying an arm and a leg for a web site re-invention. To avoid this, simply obtain a custom site from a reputable designer, developer, or marketer the first time. The following information includes the distinctions of both specialists, and you will be able to choose which one would be perfect for your project.
The Web Site Designer
The web designer is usually in charge of the visual aspects and the site structure. They will create visual mockups that will provide a dynamic presentation of your company and products. You will want to make sure that your designer is an expert in branding, corporate web sites, and quality testing to ensure cross platform compatibility and standards compliance. The designer is generally familiar with the following industry-standard programs: The Adobe Creative Suite, which includes Photoshop, Illustrator, InDesign, Dreamweaver, and Flash. Photoshop is a raster graphics program that provides capabilities for complete photo manipulation and creation of web graphics. Illustrator is a vector graphics program that is mostly used to create high quality composites of logos, business cards, and other print collateral. InDesign provides the capabilities to design publications such as flyers, books, and other printed material. Dreamweaver is a wysiwyg (What-You-See-Is-What-You-Get) editor that allows one to design a web site from scratch just like one would write a document in Microsoft Word. And finally, Flash is a program that provides for state of the art development in interactive multimedia applications, and advanced animations. The designer will also be well-versed in the coding languages of the web, which include HTML, CSS, XHTML, and XML. They will usually not be concerned with programming the back-end of things, which is what development platforms such as ASP.NET are used for. Those primarily are the task of the developer.
The Web Site Developer
A web developer’s primary duties involves developing programs that work in the back end of the web site, in other words, the part you never see. These programs are sometimes created to manage CMSes (content management systems) that allow for the end user to update their web site without touching the code. That’s not the be-all end-all duty of the web developer, though. They will be able to create programs ranging from the smallest client payment processing algorithm to the largest company-wide client information module. The ones that do the best job are those with experience and a firm understanding of computer science theory, which requires a bachelor’s degree in computer science. They will have a handle on the latest technologies, and will be able to hand write their code. The main distinction with the developer and designer is that the developer primarily works with the backend code, and the designer works with the visual/interactive components of the web site.
The Marketer, a.k.a. SEO Specialist (Search Engine Optimization Specialist)
Over the past several years, marketing has expanded into a fascinating realm called Search Engine Optimization and online marketing. The primary purpose of the SEO specialist is to work with the backend of your web site as well as working on marketing campaigns that you specify. This is why it’s important to have a fully developed business plan and marketing plan before you start. Those are beyond the scope of this book, but it will help you to perform research in this area.
Technically, the SEO Specialist will be primarily responsible for managing Pay-Per-Click advertising campaigns, developing a marketing strategy, building your link network, and making sure your already-developed web site is search engine friendly. In addition, they will either write content for you (depending on the company), and they will be able to make sure you get the most return on investment from your web site. Without a search engine marketer that knows what they’re doing, your web site is going to bite the dust and you won’t be able to recoup the investment quickly.
Depending on your web site, you may only need one specialist from the list above. However, if it’s a large site incorporating many different technologies, then you may need put together a team of all three to make sure that you get the appropriate return on investment. The very best thing you can do to make sure you don’t get burned is to ask as many questions as possible so that you’re well aware of the different aspects involved in the transaction, and how they will affect your business’s bottom line.
About Online Transactions
This post deals with the intricacies of accepting payments online. I’m going to go over the various shopping carts, what they consist of, and what you need to look out for. Then, I will go over the various credit cards, merchant accounts, and how they work together so that you can begin to accept credit card payments online.
Shopping carts
Quite simply, online shopping carts are software programs that provide an online storefront where customers can make purchases and enter their information manually. Shopping carts work by allowing a potential customer to view the items, view their description, and add the product to the cart. Then, they can peruse more items and products or if they choose to, they can add the items to their cart, checkout by inputting their shipping/billing information, their credit card information, and then your dropshipper (or you if you personally ship the items) will send the products to the customer. Hopefully they’ll remain happy enough with everything that they’ll re-visit your site whenever they need your product or service!
Sounds exciting, right? Let’s take a look at the five-step process in a slightly different, albeit hopefully clearer way:
Customer logs onto the web site
|
|
|
Customer looks around for a product
|
|
|
Customer likes product, chooses product, and adds it to their cart
|
|
|
Customer then provides their specific billing information (credit card, etc.)
|
|
|
Your product is shipped either by you or your drop shipper
Are you getting excited yet? This is perhaps one of the easiest processes a customer will go through when they’re on your web site. They’ve gone through the hard part in making a decision, and they finally ordered your service or product! So you’re finished…right? Wrong! Then comes the task of making sure the customer is satisfied in each and every way possible. Ongoing customer support is crucial to the success of a service-based or product-based web site. There are online options out there (such as Kayako support software) that allow you to create a truly automated support system. You can even go so far as to find companies online that provide truly transparent outsourced support options.
Online Shopping Carts – This is a list of free solutions that can help you jump-start your business with little or no cost. But beware! These solutions ARE free and as such, unless you are one of those primo developers, you will want to obtain a solution that’s supported by the hosting company that you select. You don’t want to have to stay up until 3:00 a.m. working on resolving a security error that could have been avoided by setting things up appropriately in the beginning. If you don’t know what you’re doing, you can seriously harm your business! My advice would be to hire a professional developer that has experience in such matters, and can make sure that all specific security holes are plugged accordingly.
OS Commerce – http://www.oscommerce.com/
ZenCart – http://www.zencart.com/
A list of do’s and don’ts when developing the integration of your shopping cart:
DO include SSL (Secure Socket layer) certificates and make sure your shopping cart is secure from prying eyes! There are incidents online that feature companies that were careless enough to not securely encrypt their customers’ credit card information and this information was hacked and stolen by thieves. Your hosting company usually has specific methods involved in making sure that you obtain a solid secure certificate. There are some pitfalls involved when attempting to obtain a certificate that I want you to be aware about. They include the following:
Don’t use those free certificates or certificates that are cheap. These are the worst of the worst and they can open your site up to major security issues.
The absolute BEST way to make sure your site is completely secure is to get a private security certificate installed on a separate IP address that your host provides. Make sure it is a private IP and that nothing else is hosted on it. These private IP addresses from web hosts are fairly cheap, usually costing around 2-10 dollars per month.
Do use 128-bit secure socket layer. There is a version out there that is less secure, the 64-bit secure socket layer. While it may still have some uses, it can have some minor security issues. Always use the latest security standards to make sure your client’s credit card information is safe.
Launching Your E-Commerce Web Site
There is a simple process for launching the web site, assuming you have all of the aspects in place:
1. Obtain a domain name
2. Find a web host
3. Find a shopping cart
4. Find Merchant Account Service Providers
5. Develop the site
6. Launch the site
7. Market Your Site
Step 1: obtaining the domain name
Buying a domain name is a fairly simple process. But, choosing a domain name and one that will be saleable for your product is simply mind-boggling! How are you going to make sure that your domain name is short enough to put on business cards, stationery, and all types of published material that you have? How are you going to make sure you don’t choose a bogus domain name that’s difficult for everyone to type, thereby limiting your prospective clients? By following these rules:
Create a domain name that’s short, catchy, easy to type, and easy to remember.
It’s easier said than done for most industries! For example, in real estate, there are some domain names that simply should not have been registered in the first place. While the following are bad examples, they illustrate my first point:
The-best-real-estate-agents-in-all-the-land-that-sell-the-greatest-possible-houses-in-northwestern-weedpatch.com
That is a long domain name! There are several logistics problems with this kind of domain name. You’ll have a heck of a time getting it on business cards, stationery, and other forms of print collateral. In addition, it will be hard for potential clients to type. This means that clients that aren’t great typers will need to hunt and peck for each dash and letter, and make sure they get it right at the same time! It will be disastrous for your business.
A better example would be:
Google.com
Everyone knows what Google.com is: the number one search engine out there. Their domain name has everything that would be great in a domain name: easy to type, easy to remember, and easy to put on any and every type of stationery imaginable! This way, everyone (even those with limited typing abilities) can access the site without many problems at all.
1. Limit dashes to three or less.
Why is this? For potential clients visiting your web site, it’s a good thing to keep in mind. Say you had the domain name Austin-RealEstate-Agents.com. It’s pretty simple, catchy, but may not be completely memorable. This is because austinrealestateagents.com and austin-realestate-agents.com are completely different web sites, and therefore, completely different domain names. This will cause a few issues. One, say someone saw your web address and couldn’t remember if there were three dashes or two? If you hadn’t snagged the appropriate domain name variations, then some other competitor can obtain that domain name variation and steal all of that traffic by using the misspelling your domain name! In addition, it will confuse potential clients with who you really are. Are you austin-realestate-agents.com or are you austinrealestateagents.com?
For these reasons, it’s simply best to eliminate dashes from a domain name completely, and go with a dash-less domain name. It will make your life simpler and easier than dealing with a perpetual living headache when you attempt to put your long domain name on your business cards!
2. If you have a business site, make sure your domain name relates to your company in some way, or even better, use your company name as the domain name.
This is how people are going to identify you on the internet, so it’s imperative that you include some kind of word correlation that specifies your company name, product name, or a combination of both. If your company name is fairly short and easy to remember, especially if it’s even shorter when abbreviated, definitely use it as your domain name if it’s not already being used! Some great examples of short, easy to identify company names include:
Yahoo.com
Google.com
GeneralElectric.com
Mitsubishi.com
Toshiba.com
That’s it for domain name advice. Keep it simple enough that it’s easy to remember, easy to type, and easy to find for the general public, and you will do well.
Step 2: Find a web host
Finding a web host for your business can be one of the most costly mistakes you will ever make if you don’t know what you’re doing. Quite simply, a web host is a service that provides online real estate for web sites. A web host owns servers on which hard drives reside. These hard drives are used to store and allocate data to various customers that purchase such allocations. Then, these clients upload data to the hard drive, which then provides the data for all to see via a domain name. When the account is created, it’s linked to the domain name automatically, so you don’t have to worry about this part. In addition, a specific host will have a bunch of various widgets and additional technologies installed depending on the application the individual is purchasing the web site for.
For example, if someone is purchasing a web site for a shopping cart or other technically advanced implementation, one might want to have a web host that supports PHP version 4 and MySQL version 1.2 and above. Or, someone might want to have a windows server that supports ASP.NET applications. It all depends on what you want the web site to do eventually. Considering this discussion is related to e-commerce, I’m going to focus on Linux-based web hosts that allow for open source installations of shopping carts.
There are advanced solutions for those that wish to tinker around with the specific installations of technical implementations and working with their own “Server”. These are called Virtual Servers, and are significantly more expensive than regular Linux web hosts that provide space. Virtual Servers are full servers that allow root access, which means that the owner of the Virtual Server has full technical control over installing Linux Server distributions, CPANEL implementations, PHP Installs, MySQL installs, and other complex installations that will make a difference in how the web site operates. Virtual Servers are not for the technically intimidated, so if you don’t know what you are doing yet, I highly advise against pursuing a virtual server. Get your feet wet with a normal host, and if you decide that you want to enter the hosting industry after you get comfortable with the technical nuances, then upgrade to a Virtual Server.
Dedicated Servers
Dedicated servers are for those sites that consume a ton of bandwidth and need the storage for a myriad of data that no other competing web host can provide. The advantage of a dedicated server is that you don’t have to rely on the stability (or instability) of shared hosting, and you won’t be bogged down by another idiot on the same server hogging all the resources. Plus, you won’t be involved with the specific politics that most shared web hosts have. Let me explain.
Surely you’ve read the specific agreements when you signed up for a shared hosting account, right? Most agreements will have something to the effect of “We reserve the right to terminate your account or service for any reason.” This means that if you end up getting close to using 80% of your resources, the host may say “This guy’s using too much, he’s out.” There’s a downside to shared hosting if you are planning on operating a high traffic e-commerce site. The downside is that other sites will be on your server, and if another site goes down, then yours could go down if they decide to shut off the server due to significant resource hogs from the other web site. Just be certain of your needs and what you will need to cover your bandwidth, security measures, and budget.
3. Find a shopping cart
Shopping carts are the bane of the maintenance of the existence of a huge e-commerce site. They can be tedious to maintain, disastrous if handled inappropriately, but can be the greatest thing since sliced bread if used properly. The shopping cart can mean the difference between a sale and a sale decline. Once again, just like on the web site, usability comes into play. If your shopping cart makes it more difficult for someone to actually purchase something, you have a problem. And, if you use an open-source shopping cart, you absolutely MUST make sure that specific security measures are in place to be certain that no one can hack into your shopping cart for privileged credit card information.
The best thing about open-source shopping carts is that they’re free, they’re simple to install, and easy to maintain. Plus, if you have a reasonably competent web developer, they will be able to customize the appearance of your shopping cart for you, in addition to interfacing with your merchant account provider to ensure compatibility between authorization processing services.
4. Find Merchant Account Service Providers
These are places like Authorize.net that provide real-time, online processing services for your transactions. Typically, they will provide the link between your shopping cart, bank account, and will deposit funds appropriately. Watch out, however! There are those merchant accounts that are complete scams. They include over-the-top fees, sometimes up to 30% of the transaction price to provide the processing service. So, you NEED to read the contract first to make sure that you’re comfortable with paying the fees so that you don’t run into a rock and a hard place when trying to pay bills at the end of the month. If this isn’t something that you’re worried about, great! Otherwise, keep careful watch on the contract and research your potential merchant account service provider.
5. Develop the site
Now that you have the domain name, your meta structure, your host, your shopping cart setup, and your merchant account service provider setup (including the appropriate software), you want to proceed with the development of the site. Why is it you have to proceed at this stage instead of step number 1? Well, you did plan everything first before you started out as I discussed before, right? If you did, this is now the stage where you finally put everything together by working with your designer.
This is where you obtain your photos for your products, the snapshots that will show up on your web site. This is where you’ll have your designer/copywriter write the descriptions of the images that will show up on your site. This is where everything we’ve been working for will finally come into place.
6. Launch the site
Once the site is developed, tested for quality assurance, and proven to work on as many platforms as possible, it’s time to upload it to a sub-level test directory on your web host so the site can be tested and you can see how it works in real-time. As you verify that you’re happy with how the site works and you’re satisfied with your designer’s work, it’s time to sign off on the project. As the project is signed off, this is when your designer will launch the site and get it ready for public viewing and use.
This is where you can finally start marketing your web site to the search engines, optimizing your content, and move forward with keeping content on the site updated. Remember how I discussed making sure you have great content on your site? This is where it becomes the most important part of your site. The content will tell your visitors what your site is about, what you hope to accomplish with the site, and how to solve their problem. You did have your content writer come up with this already, correct?
7. Marketing Your Site
Once the site is launched, it is certainly not finished by a long shot! Now is the time to drive customers to your site so they can purchase your great products. At this point, you can develop a keyword strategy to target those keywords that clients are actively searching for. Then, you will need to develop a link strategy (for outbound and inbound links). In the meantime, you will want to continue to write fresh, relevant content for your site that will make visitors want to link to you!
About Meta Tags
You’ll see that there are two main META tags that you absolutely MUST have optimized on your site: the Meta Title, and the Meta Description. The Meta title will tell potential visitors the nature of the site. You have to do this with 50-60 characters or less!! So therein lies the initial challenge of the Title. Initial challenge? You didn’t think I would let you off that easy, did you?
The next one is the Meta Description. This one will provide a brief description of your web site. Google allows for 160-200 characters or less in the Meta Description, so you absolutely must be talented at writing basic ad copy. This will serve to pique the interest of potential visitors to your site. Remember, you are competing against thousands of results for your specific keywords, and you WILL need to spend a lot of time coming up with specifics that will put the competition to shame. Here are separate listings w/information for each Meta Tag for easier reference:
Meta Title – This meta information tag is limited to 50-60 characters or less. It’s only meant to serve as a brief hook for the site, so it should be as short as possible while at the same time conveying dynamic verbiage.
Meta Description – This meta information is limited to 160-200 characters or less. It’s important in that it’s a short ad for your site. You need to provide a description of your site that tells potential visitors what your site does and why they should visit, all within 160 characters. A challenging feat, to say the least!
Meta Keywords – Search engines don’t pay attention to meta keywords as much as they once did, although it won’t hurt optimizing this area. You want to keep your keyword repetition very low, 3-5 times for repetitions of specific keywords at the most. Why? Because if you attempt to overload your meta keywords, search engines may penalize and even ban your site for spam attempts. Not a good thing! So remember, 3-5 times should be the maximum that a specific keyword is repeated.
About Graphics & Multimedia
First, about graphic images. Graphic images are perfectly fine for a web site. In fact, when used appropriately they can provide significantly excellent improvements on an otherwise bland page. That is, if they are used appropriately. I’m first going to go over the technical aspects of each image formats. Don’t worry! I won’t write extensively long verbose paragraphs of the bits and bytes of the image formats (even though I will provide them). Then, I’m going to go over some pitfalls to avoid if you plan on including extensive images on your site. Graphics and flash animations are great additions to a web site, but can be very bad for Search Engine Optimization purposes.
While not every format is going to be gone over in explicit detail, I will go over the formats you are going to want to know about when you’re dealing with the web and how they are used.
Photoshop (.PSD) – These are original Photoshop files. Adobe Photoshop is the software that is used most frequently by web designers to edit photos and create mockups of web site graphics. Most web site mockups will be saved in this format. However, if you’re creating logos or other print objects such as business cards, you will want to use .PSD. The reason why is that the .PSD file will contain all of the color, channel, and layer information in an uncompressed format. The process of compression gets rid of the color, channel, and layer information and compacts the file into a format that’s ready for web download.
JPEG (Joint Photographic Experts Group) – This format was developed by, you guessed it, the Joint Photographic Experts Group. They are a group that develops quality standards for digital images. The JPEG format was one of the first formats to be developed to provide high quality, high color (16.4 million colors) images. They are used most frequently for photos and other images with high color saturation and rendition.
GIF (Graphical Interchange Format) – The GIF format is another compressed format. While it contains significantly less color information than JPEG (only 256 colors compared to the JPEG’s 16.4 million colors), it will render the images almost perfectly. The major thing that you want to be aware of when your designer is developing these images is to use a compression process that prevents lower quality on lower resolution monitors. Simply have them use the following GIF saving method in photoshop and you’ll be fine: GIF Options > Row Order > Normal (default for most all other options).
PNG (Portable Network Graphics) – The PNG format (pronounced PING) is known as the Portable Network Graphics format. This format is superior to GIF in that it includes alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive displays) – at least it does according to the official PNG web site. PNG supports up to 48-bit TrueColor (superior to JPEG in that there is fully lossless compression resulting in no image degradation when compressed).
So when should you use these image formats?
PSD formats should be used when saving large image files and other web site mockups within Photoshop. This is especially so when working with files from your designer.
JPEG formats are great for photos, and should be the format of choice when you’re compressing a file from PSD to something smaller.
GIF formats are used when absolutely small file sizes are needed (such as in user interfaces and other graphics on a web site). This will provide for the best possible download speed for your web site visitors when optimized correctly.
PNG – basically the same as the reasons for using GIF above, just using a different file extension.
Should you include Flash multimedia presentations on a web site? Yes and no. While Flash can be an awesome thing and many of my past clients have wanted some Flash animations done, it is really bad for Search Engine Optimization purposes. The reason why is that search engines do not read the Flash files (or image files) and all they will see is a blank space. This is disastrous for those web sites that are attempting to provide value to the search engines, but the search engines won’t see it because of the fact there may be a bunch of blank space on the page. So what do you do?
For Flash, make sure that the Flash is located in a position on the web site that is read AFTER the content. If you recall from before, I mentioned that search engines read from left-to-right, top-to-bottom. So, create a table that provides the content in the left most table cell, with the Flash on the right most table cell. This will allow search engines to read the specific content FIRST (an absolute must) and they will index you accordingly.
Now, as far as images are concerned, if images are read as a blank space, how are search engines going to read what’s in the empty content? Easy. It’s called alternate text. Have you seen the beige text box that pops up when you move your mouse over an image? That’s called alternate text. Alternate text is the key to making sure that search engines know that an image is there. The best thing that you can do to help make your site more readable by the search engines is to include alternate text.in your images! Use keywords to describe the images. Such as: “image of product…selling for $2,000.00” instead of saying “Click here for product.” Using click here text, while it’s not inherently bad for the search engines, will be the bane of your potential client’s existence. Just make sure that you include keywords to describe the image, and you’ll be fine.
The Project: From Start to Finish
There is a reason why some extremely large web sites are at the top of the search engines, and one reason only: they have significant amounts of original content. Content is the seed upon which great web sites thrive. The more original content you have, the better. And that means original. This means that you have to actually do some legwork. You have to write the content unless you have hired a content writer or design team that includes a content writer. Even though this is going to add to the cost of your web site, it will pay for itself time and time again when it converts leads into sales.
Coming up with the content is not an easy task if you choose to go it alone, but it can be done. While these tips don’t really focus on a specific industry, it would behoove you to follow some of these tips. They will help you come up with excellent content that can provide the salivating information that your clients are going to love you for.
To come up with original content:
1. Ask yourself what your buyers want in your product, and give it to them. What can you offer them in the way of service that no one else can? What can someone that is buying from you expect? To answer some of these questions, you may have to ask your potential clients themselves. Once you have this information, you will be able to develop the specific content for each client situation.
Say for the sake of example that you’re in real estate. You might ask questions of your buyer clients such as: What home styles are you going to be interested in? What information do you want to see about homes in your area? What is the specific goal or end result you hope to achieve once you’ve obtained your home? Do you plan on adding onto your home later? If so, what kind of add-ons? (this would be great for content geared toward basic construction principles). Have you ever bought a home before? Did you know that there could be pitfalls to signing a contract with various agents? Did you know that there could be pitfalls to signing contracts for properties?
For your seller clients, you may want to ask some of the following questions: What do you expect to see on a web site when it comes to content for selling your home? How have you increased your curb appeal so far? Which top 3 web sites are your favorites and why? What made you choose your last agent online? What attributes of web sites do you find most attractive? Did you know that there are contract pitfalls for you as well? What information would you like to see on the web site in regards to those? Do you know what a 1031 Exchange is and how it can help you roll your capital gains into another property without having to pay taxes on them?
2. Write your content based on the information you obtained in step 1. Say you’re in real estate and you want to sell homes to your clients. Obviously, you will want to provide buyer and seller pages that will provide specific information about your specific product. The real estate questions were meant to be used as an example to come up with specific original content ideas. By modifying the above questions per industry, you will be able to come up with significant amounts of content that will stun your visitors and make sure they want to contact you.
Another important attribute of any web site is known as the principle of Call To Action. Basically, be principle states that there has to be some reason for the potential client to want to contact you on your web site. You want to have content so compelling and informative that it establishes you as an expert in your industry and your product. Not only will this allow you the privilege of getting to the top of the search engines, this will provide clients a reason to perform a positive call to action response. Before going further, let me elaborate on positive call to action and negative call to action. Positive call to action means that someone likes your site so much that they contact you using one of the specific methods of contact that you list on your site. You DO list your phone number, email, address, and have at least a contact form on your web site, right? Negative call to action simply means that the client leaves the site and goes elsewhere. You want to avoid negative call to action whenever possible, and make it as easy as possible for a client to contact you. A few do’s and don’ts when it comes to providing call to action on your web site follows:
DO allow a client easy access to your contact information. Provide it on every single page possible so that clients don’t have to hunt down the information on your web site. If that’s the first impression that they see on your site, how will they ever have confidence in your business?
DO provide your contact information in an easy to read format. For example, don’t provide contact information that’s the same color as the background.
DO provide as much contact information as possible. Create a tabular data format that includes your contact name, phone number, email address, and company address. Provide alternate phone numbers as well. If you’re able to, provide a toll-free 800 number for clients to call. Nothing increases the confidence in an internet company when they have a free 800 number, especially for those clients that are not local to your locale.
DO make sure that your contact information is easily visible (above the fold) on your web site. Name your navigation buttons so they’re easy to understand: Contact Me, Contact Form, or Email. Don’t make it harder for your client than it has to be.
DO NOT provide one method of contact. Provide alternate methods. Sometimes clients are not comfortable speaking over the phone at first, and prefer to use email. That’s especially true when it comes to providing just your company address: who in their right mind would use snail mail to send you a question? It’s insane. Just provide an email address and be sure to offer the courtesy to respond to your clients as quickly as possible. It’s the right thing to do and will help increase your lead conversions when you can answer questions quickly.
DO NOT place your contact information at the bottom of the page. You don’t want to have your client hunt for contact information when they’re in a hurry. They’ll simply move on to another web site that has much better access to contact information for the company.
DO NOT place your contact information on a hard-to-reach page. Make sure at least your email address is clearly visible and accessible on EVERY page of your web site. Think about it: would you want to contact a webmaster that forces you to hunt for fifteen minutes for contact information? I know I wouldn’t.
Other methods of call to action include:
Adding a contact or quote form to your homepage. This is one of the most effective methods of call to action. For clients that really like your site and potential services, they will want to contact you. Provide a contact form that allows clients to fill it out as easily and as quickly as possible. Request minimal contact information such as: their first and last name, their mailing address, their email address, and phone number. Also, provide a small text area that allows them to input their comments.
Providing a showcase of three – five of your best and cheapest products or services on your homepage. Think about it: if clients can see immediately what you sell and the best possible options for them, they will want to purchase from you. This kind of call to action will pique their interest and desire to click further into your web site and find out more about the products that you offer.
Obviously not everyone is going to be moved by the above techniques. The above techniques, though, are meant to provide a mitigated risk against everyone simply clicking out of your site due to frustration. The three simple rules, to reiterate, are:
1. Provide high quality content
2. Provide your contact information in easy to reach places on your web site
3. Make it as easy as possible for clients to navigate your site.
While web development is technically more complicated than the above steps, they will provide you with a guideline to follow when you’re speaking with your web designer. It will help to clearly articulate what you want while at the same time allowing you to rest easy knowing that your site will turn out to be a high quality web site.