Decisions for a Web Site – Part 1 – DesignJuly 3, 2009 at 3:09 am | Posted in Blogs, Computers, Design, Internet, Online services, Software, Technology, Web Apps, Web Design | 7 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 18.104.22.168. In fact every device connected to the Internet is given an IP address. Your web pages will be hosted in a sub-folder, like 22.214.171.124/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.
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…