Structural Naming Convention in CSS

Found this interesting and informative post on the Six Revisions blog which is part of his CSS Tips series.

Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the element.  Presentational naming describes the location and/or appearance of web page elements.

The post discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.

First he gives an example (1) of a presentational naming layout and then discusses what is wrong with this approach. The presentational naming layout inlcudes:

  • #top-div
  • #left-col
  • #right-col
  • #bottom-div

The next example (2) uses a structural naming convention and includes the following:

  • #header
  • #main-content
  • #secondary-content
  • #footer

Example 3 really uses structural naming conventions which includes:

  • #branding
  • #main-content
  • #secondary-content
  • #site-info

The last example,using  fully-structural in naming conventions,  describes what the div’s and other elements are for, instead of where they are or how they look.

The second part of the post offers a few guidelines which include:

  1. When assigning a class or id, ask yourself “What is this element for?”
  2. Avoid using names that rely on locational or visual aspects of the particular element.
  3. Use names that are intuitive to you.

He also includes some Further reading resources on this same topic:

You can read  CSS Tip #2: Structural Naming Convention in CSS in its entirety.

By Patricia Geary, July 29th, 2010 | Category: CSS | Leave a comment |

Five Things Not to Forget on a New Site!

I discovered a new blog today – Dazzlin Donna. One of her posts, Don’t Forget These Five Things on a New SIte, reminded me of a couple of things I sometimes forget. What about you, does your site contain the following?

Robots.txt file

A robots.txt file will tell the search engines to index every page or your site or not allow certain pages. If you want all pages of your site indexed, the robots.txt file should look like this:

User-Agent: *
Disallow:

If you do NOT have a robots.txt file, the default behavior is to index everything. If you want to disallow certain directories, then you need to specify them in your robots.txt file.  In that case, your file might look something like this:

User-agent: *
Disallow: /cgi-bin/
Disallow: /folder-name/
Disallow: /folder-name/

You can write your own robots.txt file or use  can generate a custom robots.txt file with a tool like http://tools.seobook.com/robots-txt/generator/

You can read more  about what a robots.txt file is all about, by visiting http://www.robotstxt.org/robotstxt.html.

XML sitemap

An XML sitemap is not required on your site but is a good way to let the search engines know about pages on your sites that are available for crawling.

Google introduced Google Sitemaps so web developers can publish lists of links from across their sites. The basic premise is that some sites have a large number of dynamic pages that are only available through the use of forms and user entries. The Sitemap files can then be used to indicate to a web crawler how such pages can be found. Google, Bing, Yahoo and Ask now jointly support the Sitemaps protocol. ~ Wikipedia ~

To read more about sitemaps, visit http://www.sitemaps.org/. If you have a WordPress blog, then download this plugin, and that job will be a little easier.

Custom 404 page

What does a visitor to your site see if they try and visit a page that no longer exists?  A generic 404 – Not Found page? Or have you provided them with a custom 404 page that allows them to continue to navigate your site? You can find a tutorial on Custom Error Pages – Customizing BlueHost Error Pages on our sister site, Expression Web Tutorials & Templates and one on How to create custom Error Pages on Genealogy Web Creations.

Do your visitors a favor and create your own Custom 404 page.

Favicon

What is a Favicon? It’s that tiny little graphic that shows when you bookmark a site like the EW on this blog. A favicon (short for favorites icon) is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.  Use any square image file and run it through a favicon generator like the one provided by Dynamic Drive. Upload the file to the root directory of your site and insert the code given below in the head section of your page.

The code to inset the favicon looks like this <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico>

Analytics code

And last but not lease, don’t forget to add your analytics or stats code to your new site. Whether you use Google Analytics or a different one, find the instructions and the code to use and add it to your pages.

You can read Dazzlin Donna’s full post Five Things Not to Forget on a New Site! Thanks Donna for a great reminder.

By Patricia Geary, July 24th, 2010 | Category: Web Design Tips | Leave a comment |

Expression Web Community Toolbar updated

Do you hate to spend your time searching the web for sites with information, tutorials, and such on Expression Web? Do you find the sites, then forget to bookmark them? Woulddn’t you rather spend your time working on your site than hunting for the tutorials and resources you need to get the job done?

Then our Free Expression Web Community Toolbar is just the tool you need! It’s updated frequently and the new links are added at the top of the various categories. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings. The Expression Web Community Toolbar is brought to you by Pat Geary and Tina Clarke of Migrating from FrontPage to Expression Web. Both Pat and Tina are Microsfot MVP’s for Expression Web.

The toolbar includes all of the  Expression Web versions 1, 2, 3 and 4 as well as the Expression applications.

  • Expression Design
  • Expression Blend
  • Expression Encoder

It also includes links for  Contests, Giveaways, and special offers for Expression Web 3.0 and 4.0. Want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

The toolbar would not be complete without resources for Web Design in general and you can find that information too.

Let Tina and Pat let their “fingers do the walking for you” while you spend your time working on your site, and of course, reading all the good information posted on the toolbar. The toolbar is free so download and install you Free Expression Web Community Toolbar today.

By Patricia Geary, July 22nd, 2010 | Category: Expression Web Tips | Leave a comment |

FP Cleaner for Expression Web 4

Steve Easton has just posted his FP Cleaner Tool which has been updated to work with Expression Web 4.0. This tool has been a staple in my arsenal for a number of years now and is one I always recommend to others for helping to clear up problems that may occur while using the program.

FP Cleaner for Expression Web 4

FP Cleaner for Expression Web 4

FP Cleaner for Expression Web 4.
Expression Web 4 Cleanup Utility

FP Cleaner does not require installation and will run from the desktop. According to Steve, the program will run on any of the current Windows system. I am running it on a Windows Vista laptop and a Windows 7 desktop with no problems.

You can download FPCleaner from http://www.95isalive.com/fixes/ew4.htm

What Do the Buttons Do?

  • The top button ‘Restore Default Menus and Toolbars‘ is not available as the ability to customize the toolbars is not available in EW 4.
  • Change the ‘Last Web Open Setting‘  allows you to change that setting to ensure the program is not trying to open a web when it starts. This can be useful if you have EW is set to open the last web edited and that web has a problem.
  • ‘Clear the Hidden Temporary Files‘  checks for the location of the hidden Temporary directory for the logged on User, if the directory exists, pressing this button clears it and moves the files to the Recycle Bin. Files left behind in these directories by an improper computer or program shut down will cause problems when trying to open,  save, and/or  edit pages on your web site.
  • ‘Clear the Hidden Web Cache files (*.web)’ - There is a .web file for each of your webs and if these files become corrupted, you may encounter problems opening or closing your web. Clicking this button deletes these files and forces creation of new clean files when each web is opened or published.
  • ‘Clear the Find/Replace MRU List‘  clears the Most Recently Used ( MRU ) list of Find/Replace entries
  • Clicking ‘Start‘ will Launch Expression Web 4.
  • Clicking ‘Close‘  closes FP Cleaner for Expression Web 4 without starting the program.
  • Clicking ‘Properties‘ opens the Windows file properties dialog for EWFPCleaner.exe.
  • Clicking ‘Info‘ displays the basic information text.

The Fp Cleaner for Expression Web 4 is, as it always has been FREE, and can be downloaded from http://www.95isalive.com/fixes/ew4.htm.

Thank you Steve.

By Patricia Geary, July 20th, 2010 | Category: Expression Web Addons | Leave a comment |

HTML / CSS Template Creation Tips and Tricks

NEW: From the Factory Tutorial — Today we are going to look at some tips and tricks you can implement when creating an (x)html & css template. Hopefully these tips will increase the overall quality of your templates.

  1. Write clean code with consistent indentation – When writing your XHTML code, be consistent in the amount of spaces you use to indent the various lines. With Expression Web, you can set this under Tools > Page Editor Options > Code Formatting tab. Sent the number of spaces to be used for Indent. You should also limit the number of bank lines you use in between the lines of code.
  2. Comments are your friend. Using comments is a good way to keep your code organized. From within Expression Web, you can use Code Snippets to insert comments into both your XHTML code and your CSS Code. Ian Hayes has also developed on add-in for Expression Web 4 Code Comment Add-In.
  3. Use folders to organize your files – Rather than sticking all your files in the root directory of your website, create folders for your images, styles, and javascript files. I add the following folders to my websites for organizational purposes:
    1. images
    2. css
    3. js
    4. dwt
  4. Write standards compliant code. Make sure to check and see if your XHTML code validates as well as your CSS. This will help ensure that your pages display as you expect in all browsers. Expression Web can help you do this by using the Compatibility Checker on Status Bar.
  5. Use semantic code – HTML is used for writing the code, describing the content NOT for styling the content. The basic idea of semantic code is to write markup that describes your sites content. So instead of using <div class=”title”><strong>Title</strong></div> for the title of your page, use <h1>Title</h1> which is semantic markup.
  6. Link to your CSS stylesheets in the head of the document. Create an external style sheet and link to it rather than embedding the styles in the head section of your page.
  7. Put your JavaScript at the bottom. Placing your scripts right before your closing body tag will allow your sites content to load first, before your JavaScript is loaded.
  8. Let Google host your JavaScript framework.
  9. Don’t forget about Internet Explorer (Conditional Comments).

Read HTML / CSS Template Creation Tips and Tricks

By Patricia Geary, July 18th, 2010 | Category: CSS, HTML - XHTML | Leave a comment |
 
  Older Entries »