Decisions for a Web Site – Part 1 – Design

July 3, 2009 at 3:09 am | Posted in Blogs, Computers, Design, Internet, Online services, Software, Technology, Web Apps, Web Design | 6 Comments

Decisions for a Web Site

For anyone making decisions about launching or changing a web site, there are some general things to think about. Firstly, it’s useful to understand that a web site has 3 components, each of which may be handled separately.

1) the web pages – the actual web site and files. You may use a web design program, download a template, and/or get a web designer for this.

2) the web host – the web server who’s space and connection you essentially rent. The Internet is free but we pay to connect to it and to keep stuff on it.

3) the domain – the name of the site. Internet servers have an address like 220.210.35.22. In fact every device connected to the Internet is given an IP address. Your web pages will be hosted in a sub-folder, like 220.210.35.22/website52/ Pretty hard to remember. A domain name translates that  address into a friendlier form using “Domain name servers”.

It’s not a bad idea to select and reserve your name before your web site is designed so it can be tied into the site design, logo, and such.

You may not need all this info, but you may find it useful to understand what’s going on.

Before We Go Further

Before you go out and find a web host, etc., it’s worth thinking a little about what you want to do with the site. This can affect your choice of technology. In the last few years, a variety of social networking services have arisen. Many are free.

If your content is news, event or writing oriented, a blog might be a good choice. You can use a free blog like WordPress.com or Blogger.com. With WordPress, you can choose a theme with tabs and place some static pages, thus having a small web site “behind” the blog front end. Like this blog. Blogs have the advantage of faster indexing by the search engines. I migrated both my web sites to blogs about 2 years ago. Way more traffic. If you decide to have your own site with a blog later, you can export your posts from WordPress.com and migrate them.

If you are a musician, you may find MySpace great for posting song samples and getting interest. Again, you can add a linked web site later for purchasing, etc. as required.

For other social networking sites, be careful of the user agreements. Many are designed as ad servers and for collecting demographic information. Some will take ownership of any content you post or spam everyone in your address book with invitations “from you”. I’m not going to go into group, discussion, forum or other related tools.

It’s a rather curious dynamic that you can get a free adless blog that is far more technically advanced than a typical web site, but this just reflects the history of the biz. I’ll resist babbling about that…

The Web Pages

New Design Standards

Web design changed considerably with the adoption of “Web Standards” a few years ago. Browsers all adopted the same standards (more or less) so the browser wars ended. It’s now rare to see a site that asks you to use a specific browser, except Microsoft. What has delayed the implementation has been the design tools. More on this shortly.

Web Standards includes several things, but prominent is the separation of content and design. Essentially, content is placed in HTML tags (paragraph, division, title, link, etc.) and design styles are added through style, class and ID tags. Style is in 3 layers – global, page specific, and content specific. This is called cascading, hence the term “cascading style sheets” or CSS.

CSS is used to define fonts, colour, placement and much more. For example, many menus now are HTML bulleted lists with styles added, turning them into pop out, horizontal, roll-over responsive menus. It has revolutionized web design.

CSS uses a little different syntax than HTML, as all languages do, but is in some ways easier than HTML. As usual, it has a few things to remember, like a required sequence in defining a font or the sequence of the sides of the box model used to define a space. CSS positioning is way ahead of HTML.

Styles are often stored in a separate .CSS file (the style sheet) which is then called by every page in the site inside the HEAD tag, then class and id selectors call details in the content HTML. This way, make one colour change in the style sheet and all pages are updated. Web pages are smaller, code is cleaner and it’s much easier to update and maintain. And it looks better.

If you want to get an idea what CSS is capable of, check out CSS Zen Garden. All that changes is the style sheet, not the web page.

I certainly recommend standards. Use that as a slogan and you won’t find yourself with code that only works sometimes. If they teach “The Way” and it’s proprietary, it’s not standards. Standards are open, cross-platform and interoperable – one code for printers, cell phones, web browsers, and more.

Newbies

If I help someone new get started with a site these days, I usually suggest they search for “free CSS web templates” on-line, find one they like and use that. Update labels, titles and links, insert logo, images and content. Voila. They can then learn the code at their leisure. Building a design template from scratch is a lot more work, usually with some debugging.

One site people have liked for templates.

My preference is templates that use styles and html only, with minimal scripts. They’re faster, lighter, and its much easier to learn. Build 3D interactivity, popup images or details, animation and more with CSS alone.

You can still build a web site the old way, with HTML only. But it often looks like a dog compared to a styled site. Many of the old design tags in HTML like color and font have been “deprecated”, meaning it’s so ’90’s. (laughs) There’s lots of things you can’t do in HTML.

The challenge I’ve found is that the free and low cost design programs mostly suck at modern design. They were built as HTML editors only. Some break the code, some require you do it their way – something that won’t work anywhere else – and the better ones simply don’t display it properly. You have to always check in a browser. If you want to design visually, that’s a problem.

This page reviews free options. If you don’t mind code, HTML-Kit 292 is great. NVu can handle simple sites. If you have the funds and intend to do this regularly, Adobe Dreamweaver is the professional tool. If you’re starting with a template, you may find Adobe Contribute will do the job although it expects a site already on a server. (it’s designed for updating a site) More WYSIWYG editors.

If the software is an “HTML editor” it’s missing half of what you need for modern design. You could look at getting a separate CSS editor.

DON’T use MS Word to design web pages. While you can do very basic page layout there and Save As Web Page, the result is bloated and sluggish and non-standard. It will also mess up web pages you open in it. Dreamweaver, actually has a tool for stripping Word code.

There’s lots of reference material and how-to’s on-line. I have a couple of pocket reference books for HTML and CSS.

Next, the web host…
David

Web Host >
The Domain >

6 Comments »

RSS feed for comments on this post. TrackBack URI

  1. [...] < Web Pages < Web Host [...]

  2. [...] < Web Pages The Domain > Possibly related posts: (automatically generated)Building your Websitevirtual hostWhat Is A Web Site?Thought the Conficker Virus Was Bad? Gumblar Is Even Worse. [...]

  3. I was reminded today that WordPress.com does have ads that can be turned off for a fee. However, I don’t recall seeing them. I suspect they show more on high traffic or popular blogs.

  4. [...] services, Software, Web Apps, Web Design | Leave a Comment One of the more interesting trends in web sites is the shift towards blog-based sites. Blogs were started more as a journaling tool but their [...]

  5. [...] “Decisions for a Web Site – Part 1 – Design” explains basic principles about HTML and CSS, your domain name, and webhost, focusing on design. If these concepts confuse you, read the article! [...]

  6. [...] understand is that there’s a pretty low entry cost (if you do your research) but you need to learn your stuff. If your business is the web, you need to learn about web technology and be able to update, edit, [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com. | The Pool Theme.
Entries and comments feeds.

Follow

Get every new post delivered to your Inbox.

Join 39 other followers

%d bloggers like this: