A Beginner’s Guide to Building and Hosting a Web Page

A beginner’s guide to Building and Hosting a Web Page Web design and development is incredibly fun. For those just getting started, I’ve developed the following guide to take you through all of the steps necessary to successfully embark on your web design and development adventure!

A) Index:

PRE: The 3 D’s

1. Gathering
2. Concept
3. Photoshop
4. Client Approval #1
5. HTML (front-end)
6. Code (back-end)
7. Client Approval #2
8. Uploading & Testing

B) Tools Required: (I’ll go through all of these tools in detail below)

1. Pencil
2. Paper
3. Photoshop (or other design tool)
4. Dreamweaver (or other web-development tool)
5. Copies of all the common browsers (see below for more info)
6. Filezilla (or other FTP tool to communicate with your web server)
7. Domain Name (your www. address)
8. Web Host such as GoDaddy (or something similar)
9. A computer
10. A passion for being creative!

——————————————————————————–

A) Index:

PRE: The 3 D’s

All websites in the world require 3 things.

A Domain Name. Through companies like GoDaddy, you can purchase names for small fees per year. If the name you want is something popular, consider purchasing it at the beginning of your build-process, after all, it’s good for a year.

A Dedicated Host Once you’ve selected a hosting package, you’ll have to log in and set everything up. You’ll have to point, or park your domain name at your hosting setup as well. Once all of that’s done, setup your FTP program so you’re connections to your server are working.

A Designed, and Developed Web Site (your stuff!). This tutorial will cover off on this one!

1. Gathering

The type of site you use and the tools you’ll need will vary a lot depending on the requirements of your client. A website built to do nothing but show pictures will have significantly different technology in the back-end than a page built to allow for discussions. Likewise, a site built for security with employee data and a login system will look entirely different yet.

Knowing what your client needs is the first real step in the building process. Make yourself a checklist and take it with you when you speak with your clients. Over time develop the checklist into a comprehensive consultation document. Be prepared for additional chat though. The most critical component of early web building is proper communication to ensure you and your client remain on the same ‘design’ page. The last thing you want to do is misinterpret their interests and spend 5-6 hours building something they didn’t want in the first place.

2. Concept

You’ve got all of your initial information. Now it’s time to sketch our concept design. You DO NOT need to be an artist for this. The purpose of this concept phase is to remove the computer and other distractions so you can visualize the design in your head.

Throughout this stage, we’re looking for general themes. What colours will we use, what header / body / footer layout will we go for? 2 column vs 3 column? Fixed or Liquid layout? Will the news display over here, or over there? What kind of navigational menu do we want, image based or CSS based? Sketch until your pretty little fingers bleed. You want to have an actual design on paper, something you’re pleased with. It’s incredibly easy to start over while your using a pencil but 3 hours into a designing session in Photoshop is NOT where you want to be when you realize eggplant yellow and rounded corners weren’t the way to go…

3. Photoshop

So we’ve got our concept on paper, now it’s time to transfer this design into Photoshop (or other similar program).

This phase is critical to ensuring we have a flexible method through which to make changes later on. It’s also paramount in ensuring our web page is cross-browser compatible later.

I’ll assume you’re using Photoshop and I’ll also assume you know something about it, ie: what layers are the general process of creating a graphic by using multiple layers to keep elements separated. If you not familiar with this process, head on over to HERE and spend some time learning the ground-work.

Assuming all of that (I assume a lot, I know!) let’s begin…

Typically if I were to create a picture in Photoshop, of a house on a lake, with a sun overhead I would do the following:

1. Delete the background later.

2. Create a new later ‘page’ to hold everything.

3. Create a new layer ‘house’.

4. Create a new layer BELOW that ‘lake’.

5. Create a new layer BELOW both of those ‘sun’.

In this way, I’ll have automatically setup the depth of my picture. The sun will appear behind the lake, which will appear behind the house. I can then design within each layer to keep things organized.

When designing a web site, you follow these same principles, but in a much more complete way.

If we think of the typical web page as having 4 components, those components would be: PAGE (or WRAP) to hold everything, HEADER, BODY, FOOTER. Keeping this in mind, in photoshop we create ‘layer groups (or sets in older versions)’ which follow the same flow.

1. Create a new layer group called ‘page’.

2. Within that, create new layer groups called ‘header’, ‘body’, and ‘footer’.

3. Within each of those, create individual layers (not sets) to break apart the various design elements.

When you’re done in Photoshop, if you look on the right, you should literally have a collapsible hierarchy of design elements that all collapse up into one top-level

element called ‘page’. Clicking that one layer group should reveal 3 layer groups within called header, body and footer. I’ve left out navigation and sidebar etc but those would have their own layer sets as well if you are building them.

By following this method, you’ll have a very organized and clear layout. You can come back and edit specific sections later on without having to worry about layering, depth, or moving the wrong components etc.

4. Client Approval #1

It’s not time to show our client our Photoshop (or similar) design. At this point it’s a picture only. We should have placeholder text and links in though so it appears exactly as a full, written web page would look. Use fake pictures if you need to. We want this to represent the web page as closely as possible.

We’ll go back and forth in this phase until the client approves of our graphical design. Once that’s done – congratulations! The design work is complete!

5. HTML (front-end)

Open up Photoshop and ensure all of your individual layers are saved as .GIF or .JPG or .PNG, or whatever format you want to use. We’re going to need everything in that format for the web.

NOTE: When saving in Photoshop, ensure you choose ‘save for web or devices’ as this offers some additional compression options for low bandwidth environments.

Open Dreamweaver (I know, I know, you’re EXCITED!) and create a new XHTML page. Yes, I said XHTML, not HTML (though they can be labeled the same when picking from the Dreamweaver ‘new’ menu. If you’d like to know why, check out this article. In a nut shell, it’s better, cleaner, more proper, and will ensure your code is more functional and valid.

Your new blank web page will look something like this:

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </body> </html>

Start by creating our basic layout with DIV’s. It should look like this once complete.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </p> <div id="page"> <div id="header">This is the header!</div> <div id="body">This is the content!</div> <div id="footer">This is the footer!</div> </p></div> <p> </body> </html>

Once that’s complete, build your page, placing the design elements into their appropriate spots. Once you’ve got this single, XHTML page working, in multiple browsers, you can stop if you wish at this point. However, there are a few more steps we can take to further clean up our code.

Currently, this page is large and unwieldy. As we add content, it will become difficult to discern where on the page certain things begin and end. To combat this, we can use PHP files to store our content and simply include them in our index page. Note, to do this you’d need to change your index page from a XHTML page to a PHP page.

I won’t get into includes, but this is essentially what the page could look like after you’ve finished including everything.

<?php include('header.php');?> <?php include('navigation.php');?> </p> <div> This is the only actual content on our page. Everything else is being included using PHP. It doesn&#8217;t matter how large the other files are, this is all we&#8217;ll ever see when we&#8217;re working in development mode on this page. Clean eh!?! </div> <p> <?php include('sidebar.php');?> <?php include('footer.php');?>

REMEMBER: Nothing is dynamic at this point, we’re building a basic, static page, with default news, fake pictures, etc. Nothing is coded in the back-end at this point.

Regardless of how little or how much organization you work into your page layout, the goal of this entire phase is to have a STATIC page, that looks exactly like our photoshop page, that works in multiple browsers. If we’ve gotten this far, we’re almost there!

6. Code (back-end)

Aside from the navigation buttons working, everything else on the site is probably broken. We’ve manually written in all of our text, and none of our gadgets work.

At this point we want to start coding in the back end, gadget by gadget.

For example. If we have a news section on our page, right now in our static page we’ve simply written that news in there. Instead, we’d like that news to be automatically entered when we create a new article, with some automatic program that doesn’t involve opening Dreamweaver each time. This is what we call a ‘Content Management System’ or CMS.

There are various forms of it out there. I won’t get into it at all, but Joomla and WordPress are great ones to begin with.

Alternatively, if you’re like me and like learning how the gears work from the bottom up, you might challenge yourself to learn MYSQL and PHP more extensively and simply write a little news gadget that reads and writes to a databases – it’s completely up to you!

Either way, the important part of this phase is to leave the design alone and work on adding life to all the gadgets and widgets on your page. Create that login system, create that user system, how about a gallery, a calendar, a CMS, maybe a guest-book or a comments box… it’s completely up to you. Remember, for every gadget, you should have designed it FIRST so you have it in Photoshop as a design. That way the design component is gone and you’re just coding the back end.

If you get caught up trying to design, AND code something in at the same time, trust me… it can sap your days away as you struggle to fight with misaligning CSS boxes etc.

Design it, then Develop it. Rinse. Repeat. Success.

7. Client Approval #2

It’s time to go back to the client and show them the development work you’ve been doing. Show off your login system, show off your gallery. WOW them! If they aren’t WOW’d, go back and tweak some stuff, sometimes all the way back to the design phase.

Rinse and repeat until you, and your client, are comfortable and satisfied with the current site.

8. Uploading and Testing

Up to this point, you would have either built everything locally and uploaded it piece-wise to test on the web server, OR, you might have used a program like WAMP to run a local server.

If you’ve been uploading everything to the web server, you’re finished! The website will already be up there.

If you’ve been running everything locally and using something like localhost to test the site, you’ll now need to upload everything to your web server. Once that’s done, you have to test everything again. MYSQL databases will likely be broken and need re-pointing, likewise things might operate slightly differently on that server for whatever reason.

Go through and ensure everything works up on the server.

Once that’s done, you’re finished! Congratulations on building and uploading your first web page!

——————————————————————————–

B) Tools Required:

1. Pencil

A pencil or pen, it doesn’t really matter. You’re going to need something to do the conceptual design with.

2. Paper

To go with the pencil or pen

3. Photoshop (or other design tool)

You’ll need something to do the graphical design with. Photoshop it self is quite pricey. If that’s not an option for you, or if you don’t have access to it via some shared resource, then do some research and find some free or cheap alternatives. I won’t comment on those here as I personally use Photoshop.

4. Dreamweaver (or other web development tool)

This is your bread and butter. This is the tool you’ll spend most of your time in. This is the tool that allows you to actually build the web pages, to write the code, to create your functions, to tie your graphical genius in with your buttons, forms and dynamic content.

To be quite honest, Dreamweaver it self is the most complete and by survey, most popular tool for the job. If you’re planning on getting into design and development seriously, this is worth the money.

However, there are alternatives if you can’t afford that. Again, do some research and you’ll find some cheaper/free alternatives that will do the job as well.

5. Copies of all the common browsers

I’m not going to specifically reference the browsers you should code for. The intention of this article is to be valid for more than just the several months in which it was written.

That said, visit this WC3 resource to get a listing of the currently used browsers and their market share of the internet. The list as of today, looks like this:

2010 IE8 IE7 IE6 Firefox Chrome Safari Opera

April 16.2% 9.3% 7.9% 46.4% 13.6% 3.7% 2.2%

March 15.3% 10.7% 8.9% 46.2% 12.3% 3.7% 2.2%

February 14.7% 11.0% 9.6% 46.5% 11.6% 3.8% 2.1%

January 14.3% 11.7% 10.2% 46.3% 10.8% 3.7% 2.2%

If I were building a site today for a client, I’d ensure it was compatible with Firefox, Chrome and IE 7+. That’s 85% of the market. Personally I don’t believe in backwards designing sites to reach back 3 browser revisions (IE 6). The types of hacks and fixes needed to get a site to operate correctly back that far are not worth the time. Shoot for 85% and you’ll be golden.

6. FileZilla (or other FTP tool)

You’ll need a tool like this to upload and download files from your web server. This is going to be a common task for you once you begin so find something you enjoy using and stick with it.

7. Domain Name (your www address)

Every site needs a registered name. I’ll get into the specifics more in the instructions but essentially, you will at some point need this before you can complete your client’s website.

8. Web Host (such as GoDaddy)

Every site needs physical space on the web somewhere. Hosting companies provide this. Companies like GoDaddy sell you space on one of their servers on which you can park your website files. For this you pay a small monthly fee.

Personally I’ve had incredible success with GoDaddy, but there are many out there to choose from.

9. A computer

Sorry folks, not optional. Laptops work great as well for you coffee-shop coders

10. A passion for being creative!

Corny, but true. This is NOT a business to get into simply because you want to pay the bills and have good computer skills. If you’re not really vested, and interested in the work your doing, it’ll show in the lackluster designs, rushed coding, and sloppy work you do.

Do yourself a favour, ask yourself this question: “Could I build websites as a hobby and enjoy it?” If you answered “yes” then this is a great business to get into.

5 Crucial Questions Before Hiring Your Web Designer

Introduction

When you’re deciding who you’re going to employ to get your website built it can be a difficult decision. How do you know your web designer is going to give you what you want? How much will the website be? Can you rely on them after you’ve paid? What happens if the worst happens? There are many potential dangers we can help you to avoid.

To assist you in your decision making process we’ve come up with the five key things you should look out for before hiring your web developer. After all it’s better to do research in the first instance, rather than spend a lot of wasted money. This concise overview will assist you to understand some of the areas you should talk through with prospective web designers.

1 – Search Engine Optimisation (SEO)

Essentially, this means asking if your web developer offers you Search Engine Optimisation (SEO) as part of their services. It’s important to be clear on what they do offer and what they don’t offer. Many web designers may be very effective at web design but SEO is a specialism in it’s own right. If they do offer SEO find out what the this actually means in reality. Your web developer may well use a lot of terms you might not be familiar with, such as ‘on page optimisation’, ‘off page optimisation’, ‘page rank’, ‘link juice’, ‘link building’, ‘white hat’ and other techniques etc. It’s worth you taking the time to research these terms and understand what’s important to you and your website. I would recommend avoiding anyone who tells you they can get you to the top of Google in a week / 24 hours or some other miracle time period. For example, it can take up to 6 months depending on what search terms you want to appear for in Google, depending on how competitive your search terms are. Avoid short term gain techniques, these will only sabotage your website down the line for short term gain. Another option to consider is that you may choose to have your custom web design built by a specialist web designer. Then have the SEO done by a dedicated Search Engine Optimisation specialist separately. If you decide to go with this option, it’s worth considering a web developer who uses SEO friendly software in the first instance. Ask your web designer if their software is Search Engine Friendly. If yes, ask them specifically how is the software they use SEO friendly?

2 – Communication

Communication is key to the success of your project. We all know this doesn’t just mean knowing you’ve spoken once and they were very keen to know you and get you on board. You should look to do your due diligence. This should give you a good understanding of how well the web developer communicates with their clients. Find out their opening hours. What happens if there’s a problem? Clarify the ways in which you can communicate with your web developer? Such as telephone, email, instant message, mobile, text message, face to face, forums? If you have an ongoing contract how will communication be managed on a daily basis?

3 – CMS versus Brochures

When the internet began, many websites resembled brochures. You visited a site with lots of static, non dynamic pages. Today, with the increasingly sophisticated web technologies that exist, websites such as Facebook and Twitter update dynamically, in real time.

If you know that you wish to update your website yourself you should seriously consider opting for a Content Management System (CMS). The great benefit is that you can run the website yourself. For brochure style website you might have pay for updates as the web developer has to spend time updating the website on your behalf. If you do go for a brochure style website, find out the ongoing management fees. If they do use a CMS system, ask them what training you’ll have to get up to speed on using and administering the system.

4 – Speed kills

Speed does indeed kill. But in this case it’s slow speed that kills. Any website that loads over 6-8 seconds will quickly turn off visitors. How many times have you clicked on a website and when it slowly loaded you’d had enough? You then moved on or returned to Google. Ask your web designer what hosting packages they use? Is it joint hosting system or on it’s own dedicated server? You should be offered a menu of options for hosting based upon your needs. Be wary if not. Follow up with your web developer on how the hosting works? Talk to your web designer about the options for speeding up your website. This can include a Content Delivery Network (CDN), caching programs and minify. Does your web developer offer these type of services? Remember, slow speed kills, a quick loading website has earned the right to be seen and heard.

5 – To be open or closed?

It’s prudent to ask what would happen in the worst case scenario? If your web developer’s company went bust, would your website still function? For those web developers who use their own in house technology, find out what happens if they did go out of business? Would your website still function? For web designers who use open source technologies such as WordPress, Joomla, Drupal, etc these are open source so the technology at least should be safe. Ask about your hosting as well. Is the hosting tied to their own company? Often companies will use third party hosting outside their own company.

Summary

Remember, above all, due diligence on your web designer before hiring them. What do independent reviews from previous clients say? How can you communicate with them? Do they offer Search Engine Optimsation (SEO)? What technology do they us? Follow these 5 tips above to get yourself a web developer worthy of your project!

Web Application Development Services Checklist

Businesses around the world are growing increasingly demanding of ways to harness the power of the Internet to promote their products or services. Among the most significant and beneficial ways of using the Internet to drive traffic, leads and sales is through the web application development services available within a web development company. In fact, considering the launch of an online business without factoring the benefits of web application development services is one of the fastest and easiest ways to miss out on some truly incredible opportunities.

Find a Specialist

Web application development services generally fall under the web development umbrella, which also tends to include web content development, web design, e-commerce development and other related services. The services that lay beneath that umbrella are most commonly offered by professionals and experts who specialize in that particular area. Just as you would hire an expert specializing in web design to build you a website, you would do the same for one offering web application development services.

Budget and Portfolios

In choosing a development company, users must consider more than just the level of expertise. There are many factors to consider including the requirements of the specific project as well as the budget of the user. While the process of finding the right web application development services for your project can prove prolonged and involved, a great place to start is by referencing portfolios to check previous work performed by the service provider.

Weed Out the Bad Companies

If this is your first time seeking the services of a web development company, then expect to find more companies than you might have first imagined. The best way to handle the overflow of companies available to is weed out the bad ones by reference checking and authenticating one company at a time. Try to shorten your list as much as possible until it becomes easier to select the company you wish to design your project.

Peace of Mind

Web application projects tend to include varying costs to be paid at various stages. Before choosing a company to take on your project, make sure that you understand the costs for each of these stages. Without knowing exactly what you are paying for the exact web application development services you will receive, simple peace of mind is near impossible to attain.

Customer Service and Satisfaction

Just as you would with any company, it is important to consider factors including feedback from previous customers as well as customer service. Web application development is a practice that requires lots of interaction between clients and developers, so it is important to know that someone is available to answer your call when any issues or concerns should arise. It could never help to ask a company prior to any arrangements about the timeliness in which requests are answered. With these helpful tips, you will be able to select the right company to deliver quality web application development services.