How to make a Web site

website The following is based upon my own experiences; there are many other ways to make a Web site, but hopefully this puts you on the right track if you’re thinking of putting together one of your own.

Step 1. Commit to making a Web site

I have already written posts detailing reasons why blogging and maintaining an e-portfolio are beneficial.

Suffice it to say I decided to create both so as to have something to show employers as I look for work and to help develop and share my career-related interests.

Step 2. Decide where to build it

Google Sites

A few months ago I created the original basis for this site using Google Sites.

googlesites

Pros:

- It was free
- I did not have to download software or manage a Web  server
- It was easy to create and organize content; no coding necessary
- I could easily revert to earlier versions of my site if I was not satisfied with changes I had made

Cons:

- Limited number of templates to choose from
- Inflexible layout and design
- No built-in blogging platform
- I had to have “http://sites.google.com/…” in my site’s URL

WordPress.com

Because I wanted to create a blog and e-portfolio under the same domain, and because I found my Google site to be somewhat amateur and unprofessional in appearance, my next venture was creating a site using WordPress.com. (See WordPress Vs. Google Sites for a comprehensive comparison of each.)

wordpress

Pros:

- Like Google Sites, it was free, I did not have to download any software or manage a web server, it was easy to create and add content, and I could revert any changes that I made with a few clicks of the mouse
- Furthermore, I could create a blog and stable pages (for a CV, an about page, a portfolio, etc.)
- It offered 70+ (somewhat customizable) themes to choose from. (The above was created using the Cutline theme.)
- I could add widgets to the side column, such as an archive, categories, etc.
- It is open source, with a large online support community to turn to whenever I needed help

Cons:

- I could not make major changes to my theme unless I were pay a fee to edit the CSS (which requires advanced technical skills)
- I had “… .wordpress.com” in my site’s URL

WordPress.org

By checking here I learned robynhall.ca was an available site domain and I began flirting with the idea of setting up a full-fledged Web site using WordPress.org. This would require a web server, but would also give me more control and flexibility. I decided to host my site using Netfirms. It had WordPress built in, and one year of hosting cost me around $60, which was cheaper than a number of other hosts that I considered. (Regularly, basic hosting with Netfirms costs $59.40 USD plus $9.95 to register a domain, however, I found a coupon code online that took an additional 25% off.)

Since then, I’ve had no problems with Netfirms and quite like using WordPress.org for the management of my site.

wordpressorg

Pros:

- I was able to easily export and import content from my previous WordPress blog into this, my new blog
- I got my own domain, which carries with it a touch of professional credibility
- I got to choose from a wide array of customizable themes by searching the Web and within the WordPress theme manager
- I have been able to easily add plugins, such as forms, a spam filter and a link checker
- It has been easy to create and organize content; little in the way of coding necessary
- Like the above examples, I can easily revert to earlier versions of my site if necessary
- Like WordPress.com, it is a blogging platform that also let me create stable pages (for a CV, an About page, a portfolio, etc.)
- I have been able to add widgets to the side column, such as categories, an RSS feed, and an archive
- It’s open source, with a large online support community to turn to when I have needed help

Cons

- Editing themes typically requires knowledge of CSS, which caused some initial headaches
- As previously stated, it costs money to host your own site (at minimum, $60/yr.)
- If I were to get a lot of traffic to my site, it might crash unless I were to pay considerably more for a hosting plan that can handle the demand

Step 3. Design with Care

Since my site has been up and running, I have had a lot of things to consider, which have included the following (in no particular order):

Site Design

- WordPress.org theme options: I’m not great with CSS so when I started trying different themes for my site I realized I had no idea how to change anything. Luckily, I stumbled upon the Atahualpa theme. This theme came with a number of built-in options that allowed me to change the settings for things like fonts, table background colours, column widths, the placement of menus, etc. without having to do any coding. The only real problem I had was changing the header image and the favicon. Luckily, a friend was able to show me how to change these images using Dreamweaver.

- Layout: I looked at a lot of Web sites when deciding upon a layout and design. Searching Smashing Magazine was most useful. Here you will find articles on all aspects of web design, which include plenty of examples (e.g., Ultimate Guide To Using WordPress For A Portfolio).

About: Despite getting a little bit creative, I kept my About page as simple and straightforward as possible. Since this is often the most visited page on a site, covering the basics (who you are and what the purpose of your site is) rather than inundating a reader with content is a wise decision.  (See Best Practices For Effective Design Of “About me”-Pages for some help with this.)

Widgets

I personally think that too many people go overboard with widgets. Often times, a blog will include a tag cloud, a monthly archive, a listing of recent posts, a calendar, a blogroll, blog stats, categories,  a Twitter feed, and on and on. Just because these options are available does not mean that they’re always useful. Therefore, I chose to avoid clutter and simply include the following practical, utilitarian additions:

- A search box: I put this at the very top of my blog to help anyone looking for something specific.

- Categories: Renamed “Topics” for clarity’s sake, I consider this to be a simple, straightforward index of my blog’s content. I decided against including a tag cloud as well since I find that tags can often be somewhat ambiguous, misleading and hard to properly manage. (See Tag Clouds Gallery: Examples & Good Practices for more insight into this topic.)

Archive: Pretty self-explanatory. This helps with site navigation and creates a record of contributions.

Disclaimers: Providing a bit of information about your intellectual property rights and rules about commenting is pretty standard blogging practice these days. Better safe than sorry.

RSS: I included a link to an RSS feed using FeedBurner should anyone want to follow my posts without having to visit the site on a regular basis. I think this is particularly helpful for a blog like mine where I add content on a somewhat sporadic basis.

Comments

I have set my blog up to allow people to add comments to my posts without any approval process. This saves me time and hassle, and allows someone to see what they have contributed instantly. At the same time, I receive an email notifying me whenever I receive a comment so I can moderate and/or reply in a timely manner.

Spam: My blog gets 2 or 3 spam comments a week. Thankfully, WordPress offers a plugin called Askismet that is easy to install and blocks these messages.

Copyright

If you want to place restrictions on the use of the content that you include in your blog, it is wise to add a statement about copyright. I chose to add a Creative Commons License to my site  that allows anyone to share or remix my content as long as they attribute it to me as the original author, use it for noncommercial purposes and agree to share it under these same or similar licensing terms. This information is provided on the right-hand column of my blog as well as in the footer of each page of my site.

Navigation

On every page, the navigation menu is presented at the top of the page and down the left-side column. This is pretty standard and when it comes to usability, it is OK to be conventional. (If my site were larger with more pages, I would have also included a link to a sitemap and breadcrumbs on each page.)

Pictures

Clip art: Generally speaking, clip art available in a legally licensed copy of Microsoft Office can be used freely if for personal, educational and/or non-profit purposes. You can also find a lot of clip art that is free to use by searching online and being mindful of any terms and conditions.

Creative Commons images: Flickr/Yahoo let you search for images licensed under Creative Commons agreements. Typically, this simply means that you can freely use an image as long as you attribute it to whomever owns it. I tend to do this through linking the image to its original location.

The Tag clouds featured on my homepage and About page were created using Wordle, which is a wonderful tool also bound by a creative commons license (and hereby attributed).

Personal photography: Of course, you can always take your own pictures and/or design images using a photo editing program. If you do not have Photoshop, I strongly recommend downloading GIMP. It’s FREE open source software and performs a lot of the same functions.

Links

In hopes that people will stay on my site and explore its content, I set all of the external links that I include to open in a new window.  Hopefully, this helps with usability as well.

I also use the Broken Link Checker plugin for WordPress, which I have set to automatically check for broken links every 72 hours. (If you’re not using WordPress.org for your site, try manually running your site through the  WC3 Link Checker.)

Browser compatibility

Remember to check your site in popular Internet browsers to make sure your content looks right (e.g., Explorer, Firefox, Safari, Chrome & Opera). You should also check to make sure your site functions properly at different resolutions.

Step 4. Update! Update!! Update!!!

Obviously, make sure to update things like your portfolio and CV as you have new content to add.

Also make sure that your site has a date stamp on it so people are aware of its overall currency.

How often to update your blog is not an exact science. However, a few things to keep in mind include:

- Intended Readership: If you want return visitors to your blog, make sure to update it regularly and to include an RSS feed option.

- Content: If you aspire to become an active blogger, make sure to base your blog on a topic that a) interests you, b) interests other people, and c) offers you lots and lots of things to write about.

- Professional commitment: If you abandon your blog, post a message stating that you will no longer be posting new content. If you’ll be away from your blog for more than a month or two, it’s also advisable to let your readers know this.

* See How Often Should I Update My Blog?

Step 5. Promote

I’ve been a bit lax in this area since I am still trying to get a feel for things, but there are a lot of ways to attract more visitors to your site. Just a few methods include the following:

- Twitter: Add a link to your Web site and tweet about new blog posts. Or better yet, let Twitter feed do it automatically for you.

- Facebook: Tell your friends about your site via your status update. Include a link to your site in your personal information. And add information about your site on the walls of appropriate Facebook groups.

- Listservs: Tell people about your site on appropriate listservs.

- Curriculum vitae: Include a link to your Web site on your CV along with your contact information.

- Comment on other people’s blogs: Adding engaging, relevant comments and a link to your site to someone else’s blog posts may pursued their readers to check you out.

- Networking events: Tell people about your site at events such as conferences.

Note: Try not to spam any sites in your efforts to promote yourself. Check out How Not to Promote Your Blog for some pointers.

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>