⇐ ⇐

Web Design Tutorial > Overview | Resources | Design | Pages | Sites | Praxis

Praxis

This section has practical guidelines and tips, including SEO and site analytics.

Best Practices

Best Practices for Web Developers

Here are some best practices for designing and building Web sites.

  • Validate your code: HTML, CSS, and Javascript.
  • Specify Doctype, Character Sets, and Character Encoding.
  • Design for Cross-Browser Consistency: Where Web Developers Spend Their Time
    • Always use strict doctype and standards-compliant HTML/CSS.
    • Always use a reset at the start of your CSS.
    • Use Analytics. Whether you use Google Analytics or something else, instrument your Web site so that you can see where your traffic is coming from, how people are finding your site, and what they are doing when they reach it.
    • Move CSS and Javascript to external files; avoid inline code.
    • Never resize images in the CSS or HTML.
    • Check font rendering in every browser.
    • Choose the overall font sizes; don’t take defaults. Size text as a percentage in the body, and as em’s throughout. Alternative approach: set the base font size in BODY, then use percentages for everything else.
    • All layout DIVs that are floated should include display:inline and overflow:hidden. All floated elements (except images) must have a width specified.
    • Containers should have overflow:auto and trigger hasLayout via a width or height.
    • Don’t use any fancy CSS3 selectors.
    • Don’t use transparent PNGs unless you made adjustments in Internet Explorer.
    • PositionIsEverything.net is the best site for learning about cross-browser bugs. The most comprehensive bug list is here.
  • Test everything! Are the fonts right? Are the colors consistent? Are elements positioned properly? Is the text large enough? Too large? Are you using the right bullets for lists? Do your links work? Do your links stand out from normal text? “Seek and ye shall find” is a terrible design principle!
  • Keep It Simple, Stupid! (the KISS principle): make your page navigation incredibly obvious to your intended audience. Make it easy to see or find out where you are in a site. Ensure that embedded links in text are easily distinguished from the surrounding text—don’t hide your links!
  • Test on multiple browsers.
  • Use graphics properly: the right format, size, optimization, matting, transparency, etc.
  • Name your classes and IDs according to their function, not by their appearance or location. You may change the color or the location from one side to another, but it doesn’t change the function of the element.
  • Put an ID or CLASS on <BODY>. This allows your code to highlight the current page or section, among other things. For example, this is done in the navigation for the CIS86 site.
  • No heights! You should rarely need to specify the height of an HTML element, and you should avoid doing so unless absolutely necessary. One of the typical requirements is with a page header or footer of fixed size. Most other page elements should be allowed to expand vertically to take whatever space they need.
  • Performance: here are some ways to improve page load times.
    • Pack/minify. There are tools for reducing the size of your HTML and CSS by squeezing out all the spaces and non-essential characters.
    • Avoid spurious PHP calls. Dynamically-generated pages often use standard PHP to insert things that do not change for a single site. You can hardcode someof those results to mimimize processing time needed on the Web server.
    • Minimize HTTP calls: each HTTP call for a file costs overhead beyond just the size of the file. Combine Javascript and CSS files where feasible to mimize the connections needed to display a page.
    • CSS Sprites: this is a great technique for minimizing HTTP calls. Instead of having 3 graphics for the states of a menu button (active, inactive, hovering), you can embed all three graphics in a single file, and use CSS positioning to place the background graphic to display the correct version. This only works with background-images.
    • Use Ajax to spread out loads. Instead of loading everything in a big rush at the start, you can postpone the loading of some parts that are optional. When a visitor requests one of those pieces, use an Ajax call to load the file’s contents directly into the page. Optional chunks that are never needed do not get loaded at all. In programming, this is called lazy evaluation.
    • Load libraries from a Content Delivery Network (CDN). Google Code supplies a bunch of different code libraries, such as jQuery. You can load jQuery from there instead of from your Web server, thereby spreading the load around a bit more.
  • Use Comments in HTML Pages and CSS Stylesheets: You are encouraged to use comments liberally in your HTML and CSS files. This will be a big help as you make changes on your sites, and it is invaluable when you return to it after time has passed. If you ever have to pick up someone else’s code, you will love them if they put in comments, and hate them if they did not. You must use different groups of characters to denote comments, depending on where the comment appears:
    • <!–This is a terminated (single-line only) comment in an HTML file.–>
    • /* This is a terminated comment in a CSS file or a Javascript file. The comment
      can span multiple lines. */
    • // A single-line Javascript comment, and it does not have to be terminated.

      A great use of comments is to embed your color palette information at the top of your CSS file. This is really helpful during development, but especially valuable when you return to something months later and can’t remember anything.

      /* Color Scheme
      Main Bg – #fff7f5
      Box Bg – #ffffff
      Main Text – #333333
      Links/Headers – #6c1d31
      Borders – #ececec
      */

Site Analytics

Importance of Web Analytics

Web Analytics is the collection and analysis of data about usage of your Web site. There are a number of good solutions available, including a number of free services. The most well-known free service is Google Analytics (see below for how to use it). There are excellent reasons for using some flavor of Web analytics, and no good reasons for not using it.

  • See how people are finding your site: by typing in the URL, by following a link, by using a search engine. See which keywords resulted in someone finding your site.
  • See what people do when they visit your site: which pages they view, which paths they follow, which actions they take, how long they stay there, and when they return to the site.
  • Find out about your users and their computing environments: OS, browser versions, languages, screen sizes, number of colors, etc.
  • Compare all of the previous measures over different time periods.

Setting Up Google Analytics

Google provides a free Web analytics service called Google Analytics. Once you sign up for an account with Google, you can register specific Web sites with the service. For each site registered, you receive a Javascript code fragment that is inserted into each page on your site. This Javascript code records usage info for your site, and the Google Analytics server collects and displays it. In this example, the code is standard for all sites using Google Analytics, but the unique ID assigned to your site is passed along to identify the transactions. Once you have inserted the Javascript code into your Web pages, it will begin to send transactions to Google Analytics. This code is usually placed at the very bottom of your HTML, just inside the closing <body> tag.

 

<!– GOOGLE ANALYTICS –>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src=’" + gaJsHost + "google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1637920-14");

pageTracker._initData();
pageTracker._trackPageview();
</script>

 

Using Google Analytics

When you log into Google Analytics, you will have an opportunity to view the statistics about any Web site where you have installed the tracking code. Here are the top-level functions:

  • Dashboard: the first thing you see for a site is the Dashboard, an overview of the top reports. You can customize this to add or remove different reports to your Dashboard. By default, Analytics shows the last 30 days. You can change this to any time range where you have data. Summary info includes: visits, page views, pages per visit, bounce rate, average time on site, and percentage of visits that are new.
  • Visitors: this section gives you information about your site visitors: languages, browser capabilities, network properties like connection speeds, and new vs returning.
  • Traffic Sources: tells where your traffic comes from: direct traffic, referring sites, search engines (including keywords), or paid ads.
  • Content: top pages, landing pages, exit pages, navigation paths.
  • Goals: you can track goals, such as when users click on a form, or complete a process funnel like a shopping cart, or click on a particular link, or whatever you want.

This just scratches the surface of what is available. There are a lot of tutorials out there about using Google Analytics, including material from Google itself.

Launching a Site

This page describes the process of going live with your Web sites.

Prepare Your Site

Create the pages for your site, and gather all other content. Do not launch until the major pages are ready; avoid “Coming Soon” messages. Plan for graceful expansion as additional pages and sections are added. Use templates so that your HTML code is easy to maintain and evolve.

Create a sitemap for Google and Yahoo. This can be either a simple text file or an XML file, but the format for either must be followed precisely.

Set up Google Analytics (or some other analytics package).

Make sure that you have followed the main SEO guidelines in your pages. Use a doctype. Fill in Title, Description, Keywords. Use H1-H6 to denote hierarchy. Use ALT and TITLE properties. Check all links.

Buy a Domain Name

Use a service like GoDaddy or Tucows to acquire your domain name(s).

Some ISPs will sell you a domain name as part of the signup, which makes it pretty easy. Bluehost.com does this, for example.

You may need to buy variations of the same domain to protect your business: .com, .biz, .info, .net. The service may offer discounted prices for the additional names if you do it when you buy the first name. If you buy a domain name from GoDaddy.com, they will make it easy to buy these additional names at the same time.

Here are a couple of articles about domain name choices and tools.

Sign up with an ISP

Choosing an ISP:

  • Make sure the ISP provides all of the services your site will require. Can you do all routine operations for your site without help from the ISP?
  • If the site will be for your business, look at the ISP’s support policies and practices. Are they 7x24x365? Do they work on the weekends? Can you call someone if you need it?

Assign the hosting for your domain name (may be bundled with some ISPs).

Set up additional services (databases, mailing lists, etc) that your site will need.

Configure the New Site

Upload your files using FTP.

Configure services: create databases, email distribution lists, etc. Add robots.txt and .htaccess if needed.

Configure security. Use strong passwords. If you have a dynamic site, pay close attention to the security recommendations of the supporting software (like WordPress or Joomla).

Let the World Know

Submit the site to Google, Yahoo, and MSN (at least). You can either go to their Submit URL pages, or you can use Google Webmaster and Yahoo Webmaster tools to submit your sitemap.

If the site is a blog, then submit the site to Technorati and other social media search engines. Submit your RSS feed to Feedburner and others.

Ask other sites to link to your site. Register in any relevant directories, but avoid “link farms”. The single best thing is to get highly-ranked (“authority”) sites to link to your site.

Use your URL in every marketing piece, including business cards.

Keep expanding your site, and keep it fresh. Blog if you plan to keep it up. The search engines like to see things being updated and extended.

Ongoing Work

Back up your site regularly, including any databases, images, and other documents.

Keep your software up to date if you are using a Content Management System like WordPress or Joomla. Developers fix security issues, and it behooves you to stay current.

Check your links periodically and after any site changes. Use a tool like Xenu to automagically check everything.

Don’t let your domain name expire! The search engines look more favorably on sites that expire farther into the future than a year, since it appears less fly-by-night if you’re willing to spend the money on it.

Adding Ecommerce to Your Site

Simplest Approach: use PayPal to collect payment. This is pretty simple to program, and you can usually find a module that will handle the details for you (like in WordPress). This actually takes the customer to the PayPal site to check out, although you can customize the page with your own logo and colors. You don’t have to have a merchant account with a bank, and the customer can use credit cards.

Medium Complexity: use something like ZenCart, where all transactions are handled on your site until the customer is ready to check out. The Web site is usually standard HTML, although it might be dynamically generated. The customer is redirected to another Web site that maintains the shopping cart and processes payment. You usually have to have a merchant account with a bank for this type of system.

Large-Scale Ecommerce: your entire site is built in the ecommerce software, such as with osCommerce. A site like this is managed almost entirely through forms in a Web-based backend, and you don’t deal much with code (because you’re dealing with the complexity of the overall system). You may have to create a template in the beginning, which is usually a mixture of HTML, CSS, and PHP (for the backend). While you may have additional HTML pages, the pages are usually generated dynamically in a system like this (i.e., you don’t have standard HTML files sitting on the server’s hard drive).

Becoming a Web Developer

Becoming a Web Developer

This page will talk about things you need to know or do to become (or improve as) a Web developer.

  • Study Graphic Design, especially Web-based color and typography.
  • Master HTML and CSS, including modern standards-based design (no tables for layout!).
  • Get decent tools. Use an IDE like Dreamweaver (see below). FireBug or Venkman (Javascript debuggers). Browser Web toolbars. Validators. Text editors.
  • Develop a working knowledge of Javascript and Ajax. Find plugins and working code and adapt them to your needs. Integrate a modern Javascript library like jQuery or Prototype into your site. Learn to program.
  • Develop a working knowledge of PHP or some other backend technology. PHP is the engine behind many Web server applications, including WordPress.
  • Learn the basics of Blogging, including how to set up a blog on a popular blogging engine like WordPress.
  • Learn the basics of Databases, especially using MySQL, the open-source relational database.
  • Develop a working knowledge of Ecommerce basics, including familiarity with some possible solutions (PayPal, ZenCart, osCommerce).
  • Hang out where the developers go. Spend time with the top Web-oriented blogs: Smashing Magazine, DZone, Six Revisions, A List Apart, PopURLS.com.
  • Keep doing it! Practice, practice, practice. Read developer blogs. Experiment.

Using a Web Development System (Dreamweaver)

There are several advantages to using a Web Development system like Dreamweaver. Normally, you create the files for your Web site on your own computer, and simply upload the pages to the Web server whenever you change them.

  • The system can manage the synchronization of your Web site automatically.
  • You can choose to design your pages in WYSIWYG mode, thereby reducing your need to know HTML. A good tool will also automate or facilitate certain tasks by understanding the task (highlighting source code, balancing braces, etc).
  • The tool can validate links for you, and check your spelling and your HTML syntax.
  • You can use templates to create a bunch of similar pages, allowing you to update all pages by simply changing the template.

SEO Considerations

General Ideas for improving SEO Performance

Here are some general ideas for creating Web sites that perform well in the search engines.

  1. Choose a good domain name, ideally with keywords embedded in it. Own it for years, too, so that you do not appear to be fly-by-night. Buy the domain name for more than one year, and do not let the expiration date get close before you renew (within a year) the domain name.
  2. Use some form of Web analytics on your site. This allows you to see where your visitors come from, as well as what they do while they are on your site.
  3. Have a sitemap for Google, especially if your pages are dynamically generated. These can be XML (preferred) or plain text. There are many tools for this, including free Web-based services that create XML sitemaps from your site.
  4. Use HTML in a way that provides clear structure for search engines and for handicapped viewers. Provide title and meta tags (especially description and keywords tags), and make sure they are unique to each page. Headings (h1–h6), strong, and em tags are all elements that are given greater importance by the search engines. From a user standpoint, they help to create a visual hierarchy and focus attention on the more important pieces of a work. Generally, the h1 element should only be used once per page, the h2 element should be used three times or less, and h3–h6 should comprise the subheadings, pull quotes and other featured content areas. Strong and em elements are a little different since they are meant to display inline with other text and should be used on a discretionary basis. Provide alt attribute for images; this provides text to screen readers, as well as the search engines. Image search is becoming increasingly popular, so proper use of alt can bring traffic to your site from images.google.com and other search engines. Example: Search for "site:monolithdesign.com monolith" on Google Image Search.
  5. Move your navigation code downward in the HTML. Pretend that a search engine spider “loses interest” if your page is too long. If all of your navigation and header code is at the top of your HTML file, the spider may lose interest before it gets to the actual content. By using CSS positioning, you can place your navigation code below the main content in the BODY section.
  6. Keep your site dynamic. Keep adding content, and updating old pages on your site.
  7. Check your site for errors, and fix them. Google likes error-free sites – it shows you care. Smiley Validate your HTML and CSS to ensure your pages are clean. Broken links may also creep in, so use a tool like Xenu to automate link-checking of your site.
  8. Make sure the major search engines know about your site. Submit it to Google, Yahoo, MSN, and DMOZ. Use the Webmaster tools at Google and Yahoo to register a sitemap for your Web site.
  9. Get well-ranked pages to link to your site. Provide suggested link anchor text that they can use to link back to you: the richer in keywords, the better. Search engines weigh link text more heavily than they do for regular paragraph text, so it makes sense to use descriptive text here. Any time “click here” is used for anchor text is a wasted opportunity.
  10. Write the content for people, not search engines. The search engines use very sophisticated methods of semantic analysis, and they can usually detect when you over-use keywords on your pages. Write for your intended audience, and the search engines will follow. Figure out the most effective keywords for your domain, though, and keep them in mind when you are writing content.
  11. Create Accessible Sites for Users with limitations: create content that is accessible to people with physical limitations. Many people use screen readers that omit images; will your site fall apart without images? Annotate images and links with title attributes to provide feedback to the user, as well as provide descriptions for the search engines (who only understand text). These kinds of annotations are gold for the search engines!

Top factors for Creating SEO-Friendly HTML

Here are the top factors for creating SEO-friendly HTML to improve search engine placement, according to this article:

  1. Keyword Use in Title Tag: keep the overall length to about 65 characters
  2. Keyword Use in Body Text: make sure you use good text for your link anchors, too.
  3. Relationship of Body Text Content to Keywords (Topic Analysis)
  4. Keyword Use in H1 Tag
  5. Keyword Use in Domain Name
  6. Keyword Use in Page URL
  7. Keyword Use in H2, H3, H4, H5, H6 Tags
  8. Keyword Use in ALT Attributes and Image Titles: this greatly improves accessibility, too.
  9. Keyword Use in Bold/Strong Tags (and Em)
  10. Keyword Use in Meta Description Tag

Webmaster Tools

Both Google and Yahoo provide tools that allow Web developers to register and assess sites. The main thing you want to be sure to do is to register a sitemap for your site. This can be a structured XML file or a simple text file that lists the pages one by one. A sitemap ensures that the major search engines find every page on your site (this becomes more important when pages are dynamically-generated).

The excellent site SEOBOOK.com has a great page about SEO tools, and a lot more information on the site.

Back to TOP • Page UP • Page DOWN