• Site Map
  • About Us
  • Contact Us
  • Support
  • Product Feedback
  • Product Up-Date Request
  • Search
  • IPS
    Home Strategic Planning Models for Utilities Business & Financial Planning Software Real Estate Investment Software (Model) Personal Financial Planning Software Consulting Services Association Services


    WEB-SITE TIPS:


    DEVELOPMENT:


    RELATED RESOURCES:

    We will be adding additional resources and book reviews here aimed to assist you with your development needs. If you have any tips or resource ideas, please contact us.
    corner
    Tips for Developing Your Web-Site
    Websites are a required part of doing business. But website development has come a long way since it's inception. Here are some tips to keep in mind when developing or improving your website. If you're contracting someone to develop your website, you should ask the contractor about these considerations.
    If you have any tips related to web development that you would like to suggest, contact us, or email us at info@IpsPlanningSolutions.com.

    Separating Content From Presentation

    When Tim Berners-Lee et al set about defining the world wide Web, they envisioned it only as a simple way for scientists to share information and exchange data at various locations and using disparate systems. They did not see a compelling reason to separate the presentation from the content. Not in their wildest dreams did they envision just how ubiquitous the Web would become. Web sites are not only ubiquitous, but are used for much more than sharing data. Web sites are often very large and maintaining them is a big issue. Maintenance is vastly easier if the presentation is separated from the content. So the World Wide Web Consortium (W3C) corrected the problem with HTML recommendations that allow the separation of presentation and content. In addition, many other improvements have been adopted to ease the development and maintenance of Web sites.

    Here are a few suggestions for good site development:

    • Make sure you use well formed HTML tags -- for example, close tags. If you use a <p> tag, make sure you close it with a </p> tag.
    • For new development, conform to XHTML standards even though you may use the HTML 4.01 transitional DOCTYPE. For example, use lowercase letters, enclose attributes in quotes (e.g. "10px").
    • Don't use deprecated tags (tags that the W3C has determined will not be supported in the future, like the <font> and <center> tags).

      Unfortunately, many web development packages, like Microsoft Frontpage™, load the HTML code with unnecessary deprecated tags. I often see the <font> used on every single line of code. This is not just unnecessary, but it will garbage up the code, make the page load slower, and generally make it difficult to maintain the site.
    • Do make heavy use of CSS (cascading style sheets). This is the main means of separating the presentation from the content.
    • Design semantically -- that is, use tags as they were intended. For example, if it's a list, use list tags, if it's a paragraph, use <p> or <div> tag. Use tables only for displaying tabular data. This is more difficult to do in you don't use Cascading Style Sheets. CSS gives you complete control over the appearance of page elements which in turn results in you choosing tags because they describe the structure and meaning of elements on the page (i.e. the semantics). This is important for a number of reasons.
      1. You can easily find things when you're making changes to the content. The code is clean and actually makes sense, as if you were looking at a newspaper. This makes maintaining the site much easier.
      2. Search engine optimization (SEO) is greatly enhanced because it increase the site's keyword density which is an important metric for ranking.
    • Don't use tables except where necessary (i.e. for displaying tabular data).

      In the early days (before CSS), graphic designers discovered that they could use tables to gain significant control over the presentation of content to users. Web designers used tables for positioning and almost everything else.

      Why are tables so bad?

      1. They result in load times that are longer than necessary.
      2. They encourage the use of inefficient "placeholder" graphics that further slow performance.
      3. But most important, maintenance can be a nightmare. Even minor changes "break" the entire layout.

      Fortunately, with modern HTML (XHTML) and particularly CSS (cascading style sheets), tables are no longer necessary for design purposes. I've seen very elegant sites that do not have a single table in them. Nevertheless, tables are now so entrenched that you'll find them overused even in major websites. This site, being started before I knew better, employs unnecessary tables, although not that many. I haven't gotten around to cleaning it up, but for new development, I limit their use.

      The following two examples show that you don't need tables for graphic placeholders or to accomplish positioning.

    [ Return to Top ]



    Search

    Building a great looking website is only half the battle. You need to get the people to your site. One way is to get the search engines to find you and display your site on the first page.

    Here are a few suggestions for getting good positioning:

    • Don't try to game the system, that is -- trick the search engines by excessively duplicating key words, by using white text on white backgrounds, extra small print, etc. Search engines are too smart for that and if you get blacklisted, you're dead in the water.
    • Do use relevant keywords in your meta tags. And don't have hundreds of keywords in the meta tag. Avoid overly general keywords like Real Estate, or Foods. You'll be buried on the 10,000th page of the search.
    • Use relevant words in titles and headings.
    • Have these words show up in the body of text.
    • Don't use anything related to pornography in keywords tag in any other part of the code in the hope of drawing hits.
    • Don't use competitor names in the keyword meta tags.
    • Focus on content. It's the best way to get found.
    • Do get linked up to other sites, but make sure those sites are relevant to your site.
    • Keep the website as semantically correct as possible -- where tags are used according to their purpose (see above).

    [ Return to Top ]



    Colors

    Good looking sites make good use of colors. Avoid garish colors. Avoid black (even dark in my opinion) backgrounds. The exception being Band sites, movies sites, sites with lots of video and less printed content. But if printed content is important to your site — and that's just about every site — then make reading from the screen as pleasing and easy on the eye as possible.

    What other considerations are important with regard to color? In the early days of the Web, Web developers limited their choice of colors to those determined to be "Color Safe" or "Browser Safe", sometimes referred to as the 216 Netscape palette, as well as a few other names. Browser safe colors are a set of 216 colors that will faithfully be reproduced on all browsers for both the MAC and the PC. Where does the number 216 come from? Many computers used to be limited to 8 bit color, meaning there are 256 possible colors. Of these colors, it was determined that 216 look approximately the same on both a standard MAC and a standard PC. So by sticking to these 216 colors you would guarantee that the site's look would be depicted as you intended it to be.

    Almost all PCs and MACs today have true color, so the importance of color safe coding is not particularly relevant. Here is a table of safe colors (I threw in some greys as well).

    In addition, you may use the color name rather than the HEX code to reference colors. Here is a table of color names that are supported by most browsers.

    The HTML color code is coded as a 6-digit color code (in hexadecimal) where each pair of digits represents one of the RGB (Red-Green-Blue) colors. The value for each pair can range from 00 to ff (which is 0 to 255 in decimal system). The 3 pairs of color codes are combined to form a particular color. For example "#ff0000" represents the color red, "#00ff00" represents the color green, and "#0000ff" represents the color blue. An HTML color code of "#000000" represents black and a color code of "#ffffff" represents white. Browser-safe colors can only contain 00, 33, 66, 99, cc, and ff values in each of the paired digits of the RGB spectrum.

    The main thing is to keep the site pleasing to the eye and make reading easy. Obviously, that means avoiding writing in one color and having the background too close to that color which makes you squint to read it. Also, keep in mind that a significant amount of the male population is partially color blind, so again, don't use shades that are too close together. Common sense should be your guide, but ask others to review the site for you.

    [ Return to Top ]



    HTML 5

    The future of the internet is close at hand. HTML 5 is the highly anticipated new specification which supplants HTML 4.01 and XHTML 1.1 (XHTML 2.0 has been dropped). HTML 5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

    Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML 5 also contains new elements like <nav>, <header>, <footer>, and <figure>.

    The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.

    HTML 5 is not a W3C recommendation yet, but it is estimated to reach W3C Recommendation by late 2010. The last call for comments was issued in February 2010.

    HTML 5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

    Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML 5 also contains new elements like <nav>, <header>, <footer>, and <figure>.

    The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.

    Note: HTML 5 is not a W3C recommendation yet! However, according to the W3C timetable, it is estimated that HTML5 will reach W3C Recommendation by late 2010. However, the First Public Working Draft estimate was missed with 8 months, and Last Call and Candidate Recommendation were expected to be reached in 2008 but it was not until February 2010 that HTML5 reached W3C Last Call.


    Markup


    HTML5 introduces a number of new elements and attributes that reflect typical usage on modern Web sites. Some of them are semantic replacements for common uses of generic block ("div") and inline ("span") elements, for example "nav" (website navigation block) and "footer". Other elements provide new functionality through a standardized interface, such as the "audio" and "video" elements.

    Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as font and center tags, whose effects are achieved using Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting in Web behavior.

    The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, , which enables standards-compliant rendering in all browsers that use "DOCTYPE sniffing".

    New APIs


    In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs).[7] Existing document object model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as:

    • The canvas element for immediate mode 2D drawing
    • Timed media playback
    • Offline storage database
    • Document editing
    • Drag-and-drop
    • Cross-document messaging
    • Browser history management
    • MIME type and protocol handler registration

    Some of the new features are part of HTML5 mainly because there are no volunteers to split HTML5 and maintain separate specifications of these features.

    Differences from HTML 4.01/XHTML 1.X


    The following is a cursory list of differences and some specific examples.

    • New parsing rules oriented towards flexible parsing and compatibility; not based on SGML
    • Ability to use inline SVG and MathML in text/html
    • New elements - article, aside, audio, canvas, footer, hgroup, meter, nav, progress, section, time, video
    • New types of form controls - dates and times, email, url, search
    • New attributes - ping (on a and area), charset (on meta), async (on script)
    • Global attributes (that can be applied for every element) - id, tabindex, hidden, data-* (custom data attributes)
    • Forms will get support for PUT and DELETE methods too instead of just GET and POST (see Representational State Transfer for use cases)
    • Deprecated elements dropped - center, font, frameset, strike

    [ Return to Top ]


    Terms of Use    Privacy Policy
    Copyright © 2000- Integrated Planning Systems, Inc.