How many people are visiting your website as you are reading this?  Are they new or returning customers?  Where are they located geographically?  Were they referred from another site?  Did they use a bookmark or favorite?  If they found you through a search engine, what key words did they type?

You can answer these questions with Google Analytics’ new Real-Time feature!

To view Real-time data:

1. Click the Home tab at the top of the Google Analytics screen.
2. Click the Real-Time (Beta) category in the navigation panel on the left.
3. Click Overview.

Google will display the following screen:

Have you checked your website on a mobile device, such as an iPad or iPhone?  The best current estimate is that 10% of website visitors are using mobile devices.  If you have Google Analytics installed (which you should), it’s easy to find out if this is true for your website.

(If you don’t know about Google Analytics and you need to track visitors to your website, consider signing up for our online Google Analytics workshop.)

To find out the number of visitors to your website using mobile devices (with Google Analytics):

1. Click the Standard Reporting tab.
2. Expand the Audience category in the navigation panel on the left.
3. Expand the Mobile category.
4. Click Overview.
5. The table will display the number of visitors using Mobile Devices (Yes) and those not using mobile devices (No).

For a further breakdown of which specific mobile devices are used by your visitors, click the Devices subcategory under Mobile.

You can also add a pie chart to your dashboard for a quick look at the number of mobile visitors.

Google Analytics includes built-in alerts whenever there are significant changes in the traffic patterns on your website.  You can also add custom alerts to specify the changes you want to track, and you can have Google Analytics automatically send you an email when any of these changes occur.

For example, suppose you wanted to track the performance of a specific landing page named services.htm.  Specifically, you want to know when the Bounce Rate increases by more than 20% over the previous week.  (The Bounce Rate is the percentage of users who view the page and leave without clicking on anything.  Ideally, bounce rates should be under 50%.)

To create this alert:

1. Click the HOME tab at the top of the GA window.
2. Click Intelligence Events in the left navigation panel.
3. Click the Custom Alerts tab.
4. Click the Manage Custom Alerts button.
5. Click the Create New Alert button.
6. Type a name for the Alert.  (e.g., Services Page Bounce Rate Increase)
7. Select how often you want to check the data — day, week, or month.
   (You might want to check a Bounce Rate daily, but weekly revenues weekly.)
8. Check the appropriate options if you want GA to notify you by e-mail or text when the alert triggers.
9. Select the Alert conditions you want.  The picture below shows the conditions for the alert described above.



10. Click the Save Alert button to save and close the custom alert.

When the custom alert is triggered, GA will notify you via email or text message.  You can also check the data yourself or edit the alert:

1. Click the HOME tab.
2. Click Intelligence Events / Overview in the left navigation panel.
3. Click the Custom Alerts tab, and then click the Custom Alert you want to view or edit.

If you are a full-time web developer, you probably already use CSS (Cascading Style Sheets) to format and layout web pages. However, if your only design experience is creating and maintaining your company’s web site, you are probably still working with HTML. It’s time to think about changing.

CSS works with HTML to improve the appearance of your web pages. Styles can be applied to headings, images, tables, text, or any other object on a web page. If you work with styles in Microsoft Word, the concept is basically the same.

Do you remember what the Web was like back in 1994 when we were all amazed by the Louvre web site? (Remember the Mosaic browser?) Wow, we could actually see pictures on our computer that were in France! This was HTML 1.0 with no support for tables, so all Web pages were one column. Boring! Then tables came along, and all of a sudden, web pages could have more than one column, paving the way for more complicated layouts. A revolution! CSS represents another sea change in web design.

A snippet is a chunk of code that you can store in Dreamweaver to reuse later. Snippets can include HTML, JavaScript, ASP, JSP, etc. For example, let’s say you need to add several graphics to your Web site, and each graphic is in a two-cell table with the graphic in the upper cell and the caption in the lower cell. Since you will use the same table (with different content) several places on the site, there is no need to create the table each time. Simply create it once, save it as a snippet, and reuse it whenever you need to.

Dreamweaver also contains some predefined snippets that you can use as a starting point. For example, one snippet of JavaScript lets you add a Close button to any Pop-up windows you include on your Web site. This snippet obviates the need to create the code for each window.

Dreamweaver also includes snippets of code that lets you add a Browse for File… button, a variety of formatted tables, drop-down menus, a Print button, navigation aids such as breadcrumb links, and many more options.

Not everyone who visits your Web site can see the page. Some people with visual disabilities use screen readers to have the page read to them. For this reason, it’s important that you include alternate text with each of your images.

To add alternate text to your images:

1. Select the image.
2. Click into the Alt Text field in the Property Inspector and type a phrase that identifies or describes the image.

If you are sufficiently compulsive, you will remember to do this every time you add an image to a page.

If you tend to slack off when it comes to details like this, you can set a preference in Dreamweaver that forces you to add alternate text every time you add an image to a page.

To turn on the Image Accessibility prompt:

1. Select Edit | Preferences.
2. Select Accessibility from the Category List.
3. Add a check to the Images checkbox in the Show attributes when inserting list.
4. Click OK.
5. When you add an image to a page, Dreamweaver will display the following prompt:



The screen reader reads the information you enter in the Alternate text field. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long description field, to a file that gives more information about the image.

Linking to a named anchor lets you link to a specific place on a page.

Linking to a named anchor requires two steps: (1) Create the anchor. (2) Link to it.

To create an anchor on a page:

1. Click into the page where you want the anchor to appear.
2. From the Common category on the Insert bar, click the Named Anchor button (or select Insert | Named Anchor from the menus):



3. Dreamweaver will place an anchor icon in the document. (The icon will not be visible when the page is viewed in a browser.)

To link to a named anchor on the same page:

1. Select text or an image.
2. Click into the Link field in the Property Inspector and type the name of the anchor, preceded by the pound sign (#). The sample below links to the heading3 anchor on the same page:

To link to a named anchor on a different page:

1. Select text or an image.
2. Click into the Link field in the Property Inspector and type the name of the file followed by a pound sign (#) and the named anchor. The sample below links to the heading3 anchor on the products1.htm page:

If you like to edit images on your Web site with Photoshop, it’s easy to make Dreamweaver use it as the default image editor.

First, you have to select Photoshop as your primary image editor for jpgs (and gifs, etc.). To do so:

1. Select Edit | Preferences.



2. From the Category list, select File Types/Editors.
3. Select the file extensions you want to associate with PhotoShop.
4. In the Editors section , click the button with the Plus sign (+).
5. Dreamweaver will open the Program Files folder.
6. Double-click the Adobe folder.
7. Double-click the Photoshop folder.
8. Select the Photoshop executable (Photshop.exe).
9. Click the Open button.
10. Dreamweaver will add Photoshop to the list of editors.
11. Select Photoshop in the list and click the Make Primary button.

When you want to edit an image in Photoshop from a document in Dreamweaver:

1. Select the image.
2. Click the Edit Images button in the Property Inspector.