Categories
Specs

Getting started with cascading style sheets

Originally appeared in Netscape World, now archived at Wayback Machine

Web page authors want to control more than what basic HTML provides, yet they also want their pages to display in the same manner across multiple browsers and multiple platforms. HTML provides the tools that allow us to create hypertext links, frames, tables, lists, or forms, but it does not provide fine control over how each object is displayed.

As an example, to create a hypertext link in a page, the Web page author would use the following syntax:

<A HREF="http://www.somecompany.com/index.html"> link page </A>

Interpreted by Netscape’s Navigator and Microsoft’s IE (Internet Explorer), the link would display on the Web page in whatever manner is determined by the browser.

To address this problem, Navigator and IE both support an extension to the <BODY> HTML tag that lets a Web page author change the color of unvisited, visited, and active links, as shown in the following statement:

<BODY link=#ff0000 alink-#00ff00 vlink=#0000ff>

This statement would display unvisited links in red font, visited links in green font, and active links (clicking on a link makes it active) as blue, unless the user overrides this in their browser. Many Web pages now define the color of the links for a page using this technique. However, the technique of providing specific display attributes for a tag becomes less workable when we consider tags such as the paragraph tag, which can be used many times in one page.

Following in the trend set by the <BODY> link attribute, we would need to create display attributes for the paragraph (<P>) tag and then apply these attributes whenever we wish to display text in some manner other than the default. This again, is workable, though the concept starts to become much more involved.

Where the idea breaks down is if the page author wants to change the color attribute of the paragraph, and then has to search through every web page to make look for where the attribute has been applied, and then make this modification. Additionally, if a company would like to provide a standard formatting of all paragraph tags for all web site pages, each web page creator would need to be aware of what the standard was, and remember to consistently apply it. A better solution would be to change the attribute once per page, or even once in a separate document and have it work on many pages.

Another option to apply formatting would be for the Browser creators to create new HTML extensions to be used for presentation, such as Netscape did with the <FONT> element (see “What’s wrong with FONT“). This idea breaks down when one considers that other browsers viewing any material formatted by the new tag will not be able to see the material, or will see it in a manner that may make it illegible.

What is needed is a general formatting tag that one can use to create format definitions, which can be applied to one or more HTML elements. This technique of using one tag to cover extensions was used with the scripting (<SCRIPT>) tag and has worked fairly well.

Enter the concept of style sheets. Style sheets are methods to define display characteristics that can then be applied to all or some instances of an element, or multiple elements. Specifically, the W3C has recommended the adoption of CSS1 (Cascading Style Sheets).

What is CSS1Style sheets provide formatting definitions that can be applied to one or more HTML elements. An example of a style sheet would be the following, which sets all occurrences of the <H1> header tag to blue font:

H1 { color: blue }

CSS1 extends this by defining style sheets that can be merged with the preferences set by both the browser and the user of the browser, or other style settings that occur in the page. The style effect cascades between the different definitions, with the last definition of a style overriding a previous definition for an element.

As an example, the following will redefine the header tag <H1> to be blue, with a font of type “Arial”, size 24 point, and bold:

H1 { color: blue; font-family: Arial ; font-size: 24pt }

With this specification, any time the <H1> tag is used in a page, the text will be displayed in Arial, 24pt, blue font. We define a second style for the <STRONG> tag using an inline definition that will override the first:

<H1 STYLE="color: red">

The difference between this and the first definition is that the latter redefines the formatting for the <H1> tag, but only for that specific use of the tag. This will not impact on any other uses of the H1 tag in the document. If the style definition in the HEAD section had attached a weight to the style, using the important keyword, the original specification would have taken precendence over the second one:

H1 { color: blue ! important; 
         font-family: Arial ; font-size: 24pt }

Styles can be nested, as follows:

H1 EM { color: red }

Now, if the EM tag is used within a H1 header, the EM specification will apply to the text in addition to any other style specification given for the H1 tag. This type of style property is referred to in the CSS1 style guide as a contextual selector. Each element referenced in the line is analogous to an element within a pattern list, and the browser applys the style to the last element in the list that successfully matches the pattern it is processing

W3C has recommended two levels of compliance for CSS1: core and extended. The standard can be seen at this W3C Web page).

At this time, only IE has partially implemented CSS1 in version 3. However, both Netscape and Microsoft have committed to implementing at least the core specification of CSS1 in version 4.0 of their browsers.

The rest of this article will give examples of using CSS1 that will display using IE 3.x. Unix users can download a testbed client, named Amaya, that will allow them to see the results of the style sheets. Amaya was created by the W3C and can be downloaded from at this W3C Web page.

How CSS1 worksAs shown in the previous section, formatting information can be defined for an existing element and this formatting will apply to all uses of the element unless it is overridden or modified by other definitions.

The definition, delimited by new HTML tags of <STYLE> and </STYLE> can be inserted into the <HEAD> section of the page, into a separate document, or inserted in-line into the element itself.

As an example of embedding style information into the header of a document, the next bit of code will create a style sheet that will modify how paragraphs display in a page:

<STYLE type="text/css">
	P { margin-left: 0.5in; margin-right: 0.5in; margin-top: 0.1in; color: red }
</STYLE>

Now, with this definition, any paragraph on the page will have a margin of half and inch for both the left and right margins, a margin of one-tenth of an inch for the top, and will have a red background. No other formatting is necessary to apply this style to every use of the paragraph tag in the entire document.

Another method will allow the Web page author to define style sheets in a separate document that is then imported into or linked to a Web page. To import a Web page, the import keyword is used, as shown in the following syntax:

<STYLE type="text/css">
	@import url (http://someloc);
</STYLE>

The imported style sheet will merge with any styles defined directly in the existing page, or by the browser/user, and the resultant combined styles will influence page presentation. Note that IE 3.x does not support the import keyword, though this should be implemented in version 4.0.

The second method of including a style sheet file is using the LINK tag:

<LINK REL=STYLESHEET HREF="standard.css"
TYPE="text/css">

Using this type of tag will insert a style sheet into the existing Web page that overrides any other style definition for the page, unless style sheets have been turned off for the page. It is an especially effective approach to use when a company may require that all Web pages follow specific formatting.

Let’s see CSS workGranted, if you go a little crazy using CSS1, your page is going to end up looking like something that will land you in a Federal prison if you sent it through the US Mail. An example of this can be seen in a page I call “expressionism with an attitude.”

Impartial observers would call it “the ugliest page they’ve ever seen on the Web.” However, with a little restraint (and of course, we all use restraint in our Web pages), CSS1 can turn a bland page into a grabber.

I have a Web page on my Scenarios site that uses a combination of display properties as defined by Netscape, style sheets as defined by Microsoft, and HTML tables.

Stripping away all but the most basic HTML tags leaves a page that has a lot of content, but without formatting is cold and not very interesting.

Unless the viewer was highly motivated to view the contents, chances are they would skip the page.

The first change to make is to add both a background image and background color to brighten the document up a bit. The full implementation of CSS1 allows the Web page author to specify whether a background image should repeat, and if it does, whether it will repeat horizontally or vertically. This is welcome news for those who have created really long, thin graphics to be able to give that attractive sidebar look to a page. Unfortunately, IE 3.0 does not implement this attribute, nor is it implemented with Preview Release 2 of Netscape Navigator. Instead, the image used in the example is one that can repeat gracefully. The style sheet is:

<STYLE TYPE="text/css">
	BODY { background-image: URL(snow.jpg) ; 
		background-color: silver }
</STYLE>

With the image, the style sheet also adds a default color in case the person accessing the page has turned off image downloading.

Adding the background image is a start, but the text is still a bit overwhelming and rather dull looking (but not reading, of course).

It would be nice to add a margin to the document, as well as changing the overall font to Times 12pt. In addition, modifying the formatting for both the <H1> header and the <STRONG> tags would help add a bit of color and contrast to the document:

<STYLE TYPE="text/css">
	BODY { background-image: URL(snow.jpg) ; 
		background-color: silver ; 
		font-size: 12pt ; font-family: Times;
		margin-left: 0.5in ; margin-right: 0.5in ;
		margin-top: 0in }
	H1 { font: 25pt/28pt blue ; color: navy ; 
		margin-top: -.05in ; margin-left: 1.0in } 
	STRONG { font: 20pt/22pt bold; color: maroon ; 
		font-family: Helvetica ; font-style: italic}
</STYLE>

At the time this was written, Netscape Navigator Preview release 2, in Windows 95, only implemented size units of em and ex. The first unit definition is the height defined for the font, the second is the height defined for the letter ‘X’ in the font. The results are an improvement, but you still can’t easily spot two sidebars that are inserted into the document.

To correct this, a generic class is created and named “sides”, which will contain a formatting definition that can be applied to any element. This is done by naming an element prefixed with a period (‘.’) to represent the class:

.sides { background-color: white ; margin-left: 0.5in; 
	margin-right: 1.0in ;
	text-align: left ; font-family: "Courier New" ; 
	font-size: 10pt }

Looking at the page now, the sidebars stand out from the rest of the document.

The class is used with the <DIV> tag, which allows the formatting to span multiple elements until an ending </DIV> tag is reached:

<DIV CLASS=sides>
</DIV>

The class could also have been used in each individual paragraph tag that makes up the sidebar:

<P CLASS=sides>

Additionally, instead of a class, we could have created an ID attribute for the style:

#sides { background: white ; margin-left: 0.5in; 
	margin-right: 1.0in ;
	text-align: left ; font-family: "Courier New" ; 
	font-size: 10pt }

Using the identifier would be:

<DIV ID=sides>
</DIV>

W3C wants to discourage use of the ID attribute. The W3C wants people to provide classes for an existing HTML element that only applies to that element. Then if people which to cascade the effect they use the parent-child style specification as stated earlier with the <H1> header and <STRONG> tags.

Notice from the example, and only if you are using IE 3.01, that the background color for the class is only applied to the contents and not to the area represented by a rectangle that would enclose the contents. As this looks a bit odd in the example, it is removed from the definition.

In addition to removing the background color from the “sides” class, the next change to the document will add another definition for the STRONG tag to be used in the sidebars and formatting definitions for the hypertext links.

A hypertext link is referred to in the CSS1 standard as a pseudo-class because browsers will usually implement a different look for a visted link than one that has not been visited. This type of element can take a class style specification, but the browser is not required to implement the specification.

Another change will be a specific class definition of “sides” that differs from the original class definition and which will be used for specific paragraph tags:

.sides { margin-left: 0.5in; 
	margin-right: 1.0in ;
	text-align: left ; font-family: "Courier New" ; 
	font-size: 10pt }
 
STRONG { font-size: 22pt; color: maroon ; 
	font-family: Helvetica ; font-weight: bold}
STRONG.extended { font: 18/20pt bold; color: red ; 
		background-color : silver; font-style: italic }
 
P.sides { margin: 0.25in 0in 0in }
A:link { color : red }
A:visited { color : teal }

Using the <STRONG> tag with the extended style would look like:

<STRONG class=extended>

To use the original formatting, no class name is given.

The page is definitely improving.

The sidebars stand out and spacing has improved the ease with which the page can be read. Unvisited links stand out with the bright use of color, yet blend in to be non-obtrusive after the link has been visited.

A final change is made, which is to add formatting to the lists contained in the page. The Web page has both an ordered list, where the elements are numbers, and an unordered list, where the elements are bulleted. Styles are added to each of these list types to display them more effectively. Formatting is added to the generic paragraph tag to indent the start of every paragraph:

OL { margin: 0in 0.5in 0in; font-size: 10pt }
UL { margin: 0in 0.2in 0in }
 
P { text-indent: 0.2in }

The lists now have new formatting, and all paragraphs are indented. With the cascading nature of CSS1, the paragraphs that are defined with the “sides” style inherit the indentation from the parent style, which is denoted by the use of the ‘P’ classifier without any specific class or identifier selector.

The displayed Web page also makes use of several in-line styles definitions, strategically placed to override some of the generic formatting options. There are a few paragraphs that should not be indented in the first line. Overriding the original paragraph specification is an in-line one that sets the indent to ‘0’:

<P STYLE="text-indent: 0in">

This turns off the text indentation.

The paragraphs that label the two figures that are included in the document are defined to increase the left margin another half-inch. As styles inherit from the parent element in which they are embedded, the figure paragraphs will have a left margin set to one inch rather than a half as the new style is merged with the one specified for the entire document:

<P STYLE="margin-left: 0.5in; color: green; font-weight: bold">

The font for the figure paragraphs is also changed to be green and bold.

The paragraphs at the end of the document that contain the trademark and copyright information are also modified with an in-line style:

<P STYLE="text-indent: 0in ; font-size: 8pt; font-style: italic">

This style sets the font to be smaller, and italic.

Positioning the elementsOne improvement that would have helped the page is being able to position the sidebars to the side of the document and have the rest of the document “flow” around them, as happens with print magazines. Another would be to be able to specify a background color for the sidebars that would have “filled” the rectangle enclosing the contents, not just the contents themselves.

CSS1 defines formatting of elements but does not define positioning of them. To this end Netscape and Microsoft have collaborated (yes, you read that right) on a proposed modification to the CSS1 that would provide a standard specification for how elements can be positioned on the page.

The W3C proposal, “Positioning HTML elements with Cascading Style Sheets”, provides the ability to define areas for the content to flow into. These areas can then be positioned relative to each other, using “relative positioning” or in absolution position to each other using, what else, “absolute positioning.”

From the recommendation, an example of absolute positioning could be:

#outposition {position:absolute; top: 100px; left: 100px }

Using this style sheet in the document as follows:

<P> some contents
<span id=outposition> some contents defined for a different position</span>
</P>

This code will result in the contents enclosed in the SPAN tag to be positioned in an absolute space beginning at the position defined as 100 pixels from the left and 100 pixels from the top. The enclosing rectangle will extend until it hits the right margin of the parent element, in this case the document. The height will be long enough to enclose all the contents. However, both the width and height of the elements could also have been defined.

Relative positioning allows elements to be positioned relative to each other, even if this means the elements overlap:

#newpos {position: relative; top: -12px }

The contents formatted by this style sheet will position themselves above the rest of the contents, moving the other contents down.

In addition to positioning along the X- and Y-axis (horizontally and vertically on the web page), the elements can also be positioned to each other on the Z-axis. This means that web developers will be able to layer elements on top of each other. An example pulled directly from the positioning paper is:

<STYLE type="text/css">
<!--
.pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
-->
 
<IMG SRC="butterfly.gif" CLASS="pile" ID="image" STYLE="z-index: 1">
 
<DIV CLASS="pile" ID="text1" STYLE="z-index: 3">
This text will overlay the butterfly image.
</DIV>
 
<DIV CLASS="pile" ID="text2" STYLE="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>

With this, the order of the elements would be the image on the bottom then the contents defined by the class “text2”, and finally the contents defined by the style “text1”. The elements are transparent meaning that the bottom elements will show through to the top, though this can also be changed using style sheet settings.

Another recommendation is the ability to define whether an element is visible or not, which would still maintain its position in the document, and whether the element is even displayed which would remove it from the display, including the space reserved from the element.

The ability to position HTML elements, to control their visibility, and to finally control how they overlap is a revolutionary change to HTML document design.

What’s next?With Microsoft and Netscape both committed to the support of CSS1, and both participating in an extension to the CSS1 proposal to provide for positioning of HTML elements, creating HTML pages that display effectively in both browsers should be a snap. However, there is one element that was not discussed in this article and which can tear down the browser truce flag: dynamic movement of HTML elements.

As can be seen with the release of Navigator 4.0, Netscape supports script based movement of elements with their LAYER tag and with a style sheet concept they call Javascript Style Sheets (JSS). With the release of Internet Explorer Preview in March, Microsoft supports dynamic content through their own version of Dynamic HTML, which uses CSS1 elements directly. Unfortunately, neither method will work with the other browser.

As with the problems that have been faced with JavaScript, mentioned in the Digital Cats’ article “Whose JavaScript is it, anyway?” until Microsoft and Netscape agree on a standard scripting Object Model, you and I will continue to have to work around browser differences if we want dynamic content. Or use Java applets, and forgo all uses of scripting.

 

Categories
Technology

A Simple Solution to the Complex Distribution Problem

Recovered from the Wayback Machine.

Any information system group that has a client base that is split geographically will have a problem with distribution: how do you notify the clients that a new version of the tool(s) they are using is out, what the version contains, and how to upgrade.

You can automate the upgrade process by using tools that determine that the application a person is accessing is now out of date and upgrading it accordingly. The problem with this approach is that the user will not have control of when the upgrade is occurring and may be wary of an update that they know nothing about.

You can take a more passive approach by sending an email or memo out to all of your clients that an update has occurred to the application and they then can access the update on a certain sub-directory. The problem with this is that unless the update is fixing a problem that the client specifically wants or asked for, they may not be as willing to take the time to make the upgrade to their own installation, and then you in the IS department are now faced with trying to support multiple installations using multiple versions of your product. Additionally, the application user will then have to find this upgrade, download it on their own, and install the upgrade, a multiple step process which can generate problems.

Is there a simple solution? There is a simple possibility.

Many companies are interested in porting applications to the Web in some form of an internal intranet just for this problem. Unfortunately as many IS departments are finding out, most applications will not port to the web that easily. However, this is not the only way the web can be used to solve migration and upgrade problems.

Another approach is to use techniques such as Server Side Includes and to use the concept of the personalized user page. This is a web document that the user will open every morning. The contents of the document have been personalized for the user and presents information from categories that they have chosen. A case in point is that a person who works with Group A in Department 1B for Division J for Company XYZ. They will have a web page that contains new information pertinent to Company XYZ at the top, then information pertinent only to Division J next, information for Department 1B next, and finally information for Group A.

A Server Side Include (SSI) embeds a command line in the HTML document given an extension which is usually .shtml or .stm (the webmaster can determine what this extension is). This type of extension tells the web server to parse the web document for SSI commands before sending the document to the browser. An example of one of these commands is:

<!–#include file=”company.html” –>

This SSI command will instruct the web server to open the file called company.html and load the contents of company.html at this point.

The advantage of this approach should be fairly obvious: the information is specific to the interests and needs of the individual and is presented in such a way that they can examine it for the entire day if they need to; the information can include links to other documents if the person wishes to pursue more in-depth knowledge; and the document can be saved using most browers SaveAs capability. In stead of a flurry of emails which may or may not contain information that is relevant and that can be ignored and difficult to follow or read you have one document that contains all the information.

Another advantage is that no programming is required, and the information for each department can be maintained by each department. Group A maintains the HTML document that is specific to them. If there is no new information a blank HTML document or one containing the words “No New Information” can be given. Division J can maintain their own HTML document, and so on. With the many many simple to use HTML tools this should not be a solution that requires programming intervention.

While presenting a unified approach to information presentation, each group maintains autonomous control over what information is presented.

For our distribution problem, if IS has upgraded software that is in use throughout Division J, a notice can go into the Division J section that a new version of the software is being created, what bugs it will fix and features it will add. When the software is ready, a link can be inserted into the document that will allow the person to download the upgrade with one click of the button. The user can then double click on this file as soon as it is on their machine and the upgrade process can occur.

What is the advantage of this technique over others? The information about the upgrade is presented in the same format and in the same context as the upgrade itself. Information about the upgrade and the upgrade itself are only given to those who are impacted by it.

How can this solve the multiple version problem? After all the user can continue to ignore the upgrade notice and continue on their merry way. Well, this is where the concept of something called a Netscape Cookie comes in.

A Netscape cookie, implemented by both Netscape and Internet Explorer browsers, is a tiny bit of information that is stored locally on the client’s machine and that can be accessed by the browser when a specific web document is loaded. When the document containing the information about the upgrade is loaded, this value is set for the first time. After that point every time the person accesses their personalized web page the cookie is accessed and the value is incremented or decremented. Information can be printed out to the effect that they have so many days to make the upgrade, and this value is decremented for each day.

If they make the upgrade, the cookie information is destroyed and the reader will no longer get the count down.

With additional sophistication, one can create the page in such a way that the download no longer shows once they make the upgrade. To use this approach, persisten information about what HTML documents one specific person will see is kept in a file on the server. When the person logs in and gives their user name and password this file is accessed. Instead of an HTML document the person accesses a file that is called index.cgi. This application will access the file containing the person’s preferences and the information is then used to determine how to build the page the person will see. The application does this by opening up the individual HTML documents that make up the person’s preferences and printing them back to the browser, in turn.

With this approach, after a person makes an upgrade their personal preference file is accessed and the entry that contains the upgrade information is removed. Not only will the person receive timely information that is pertinent to their needs, they will receive content that is dynamic and also matches their choices.

Finally, if the person still does not upgrade by a specific date an email can be generated automatically that will be sent to the IS department informing them of this information.

A link file containing sample Perl script that demonstrates the CGI based approach and that demonstrates the use of SSI can be found here.

Categories
Technology

HTML Tables Tips and Techniques

Don’t shoot me for using HTML tables for formatting the page. This was the standard of the time.

An HTML table is more than a technique to throw a bar around some text; it can also be used to finely control the appearance of your entire page.

To start, we’ll create a table that is about the most basic table there is.

This is the header
This is the data

The table does not use any of the attributes that one can use with the table, row, header, or data definitions. It uses the defaults for each. Now, to create a table that is a little more interesting, lets add a border to the table and a little spacing:

This is the header
This is the data

A table with only one column is helpful, but lets add a second column and increase the width of the table to be equal to 60% of the window width, regardless of whatever the width is:

This is the header The Second header
This is the data The Second set of data

I don’t know about all of you, but I like a little color so lets add color to the whole table:

This is the header The Second header
This is the data The Second set of data

This might be a bit too much color. Why don’t we change the table to a nice gray background, and the headers to the bright red color:

This is the header The Second header
This is the data The Second set of data

Now, if you are using Internet Explorer 3.x you will be able to see that the following table actually uses an image as the background in the headers. If you are using Netscape or other table compliant browser, you will continue to see the red background color.

This is the header The Second header
This is the data The Second set of data

Now, let’s try making the table header stretch across both columns with the “colspan” attribute:

This is the header
This is the data The Second set of data

You can also make data occupy more than one row as the next table demonstrates:

This is the header
This is the big data The Second set of data
Third set of data

You can also color the borders of the table:

This is the header
This is the big data The Second set of data
Third set of data

Maybe we’ll say we can…and don’t. Finally, you can nest tables within tables:

This is the header
This is the big data The Second set of data
Third set of data

You can use tables to format your entire HTML page. The main YASD page makes use of table rowspan, background colors and images, and nested tables to present a page that combines the effective use of white space and content (at least, we hope it’s effective). Most of the pages located on this site use tables to manage the menu bar that is located at the top of the page as shown in the Samples main page.

Tables can be used to format a group of objects as shown at the GotaSee site. Tables can also be used as a sidebar in an online article, as shown in Page1-4 of the City Zoo Scenario.

Tables can even be used to frame a graphic as shown in the Main page. Look at the Finalist graphic at the bottom of the page and you will see an example of this technique.

All in all, the most useful HTML tag after those for images and hypertext links, is the table.

Categories
Government

Comments on the Communications Decency Act

Recovered from the Wayback Machine.

My first real experience with the Internet was subscribing to a Usenet on a symbolic modeling language. I remember reading a response from a researcher in Switzerland and deciding to write my first entry into the thread. Every time someone would write from a different country I was awed. Where else and in what other circumstance could people from different countries and different cultures converse in such a way that the topic at hand becomes the focal point, not the differences of those speaking.

Where governments have trodden through the front door with fanfare and progressed with little steps, or failed, the Internet has moved quietly through the back door and succeeded. Until now.

While the Internet was nothing more than an insider’s tool, it was for the most part unconstrained and relatively open. Now that the access to the Internet is open “to the masses” we seek to impose constraints and limitations. Worse, where before each country’s boundaries were transparent, they now seek to make them not only opaque but a virtual brick wall. The main benefit of the Internet is taking down boundaries not putting them up. The Internet is owned by no Man, no Woman, and no Country.

I was following some forgotten path through the Web once when I stumbled on a letter from an Irish environmental terrorist. He wrote the letter in prison after he was captured while attempting to bomb a factory that he believed was damaging to the environment. This letter was fascinating. It was not an interview on some slick TV show, or in some slick magazine. It was an unsolicited recitation of facts and beliefs of a person that most of us would have an easy time dismissing as a nut after a two paragraph word byte in the press. Did I agree with the person? No, and I do consider myself an environmentalist. Bombs and bullets are never the way folks, nor are bricks and bats. However, the letter did give me a perspective that I would never have had if I had not read it. I cannot as easily dismiss an act of terrorism as an act of a mad person, which in a way makes the act even more frightening. Would this letter be considered “excessively violent”? Would the group that posted it be in violation of the law?

Could something like this be considered obscene? In some countries and in sometimes it could be. In certain countries, a picture of a woman bare faced and holding a career would probably be considered obscene. Full frontal nudity is considered by many in the United States as obscene but is probably considered perfectly normal in other countries. The very thing that makes the Internet great, the absence of borders, makes it virtually impossible to determine a common point of obscenity or a common point of decency.

We in the United States cannot agree within our own borders what is ‘decent’. One person believes in allowing free choice for women, and another would consider this indecent and obscene. Would information on the Internet on abortions then be considered illegal? If your child read this material, and it was presented in a scientific manner and presented only facts, would the originators of the material be in violation of the law?

If all we read in books, or all we see on TV, or all we hear on the radio, and all we can discuss on the Internet is material suitable for small children neither they nor we will ever and can ever grow, and we as a society will never mature.

Perhaps that’s what some people, including Congress, really want.

That’s it, folks.

Categories
Just Shelley

Working at Home

Imagine this scenario: You get up in the morning, grab a cup of coffee, and wander out to the Living Room. You stand and gaze out the window for a few minutes taking advantage of that great mountain view. Then you casually go into your home office and start looking through your email. After you handle your email you take a shower and get dressed, sweats or jeans or shorts maybe, and you go back to your office and get down to some serious work. You break when you are tired and you eat when you are hungry. When the kids come home from school you chat with them about the day and maybe you even go for a walk with them. Later you get back on the computer for another few hours and quit for the night, satisfied with your day’s work.

Okay, everyone, you can stop crying now. And you can stop shaking your head,  saying this is impossible. With today’s technology, this is not only possible it is becoming cost effective and practical.

Today many of us have access to computers in our homes that enable us to do anything from creating a report, researching a product, to writing complex computer software. With the increased proliferation of ISDN lines and alternative connectivities being explored, we can connect with our jobs and have virtually the same access as we would sitting at a desk on site. And that office does not have to be in the same town.

Security? This does not have to be a limitation. We are learning more about computer security than ever and we are finding more ways to increase the safety of our systems.

Cost? How much does it cost you to maintain a workable environment for each of your people? If you are maintaining a site for a software developer you are maintaining software, a machine, a phone line, restrooms, an ergonomically designed workstation, and you are maintaining a location. That last one is a real key. Companies are growing and are finding that they may actually be running out of room to house their people, so they double up and cram people in and they lose productivity and they may actually lose people.

Teamwork? Have you had a chance to try out Netscape’s new version 3.0 beta software with LiveChat. I went out and talked and shared a virtual whiteboard with some person in Utah, and someone else in Texas. And this is a freebie add-on to an internet tool. You have the technology now to have cameras mounted on PCs and have people share virtual working spaces and work cooperatively online. The only thing you don’t share is bad breath.

Benefits? I bet if you promised this capability to people on only a partial week basis you will have increased worker satisfaction and a whole lot more people wanting to work for you. How about having to maintain less desk space if you have workers desk share? How about having fewer cars in your parking lot, which is probably overcrowded as it is. How about giving back to the community by fewer cars being on the road?

Sick Time? If you have an employee with a broken leg they can work at home. If they have a bad cold? The employee probably would come into work, be pretty uncomfortable and manage to pass their germs to half a dozen other people. Wouldn’t you rather they stay home? How about maternity or paternity leave? Nice option for those folks who would like to be available to their kids and still have a career. What a concept!

So, why is this not happening more? Some types of work just won’t make the transition to at home work such as factory and manufacturing processes and many services and other professions. If you have a home cleaning service, this usually means the customer’s home. And some companies are not set up yet, and may not be able to afford the type of setup that would enable their employees to work from home. Other companies may work on super secret stuff that has to be worked on behind armed guards and locked doors.

Now let’s look at the ‘bad’ reasons for not allowing people to work at home.

You don’t trust your employees and you have to have your eye on them at all times. Go Away. You have hired professionals and adults, consider treating them as such and you probably will not have the turnover you now have.

The work you do needs a centralized database. With the increased ISDN line connectivity, you can connect to your database efficiently from home. How about taking snapshots of the database to work on from your home PC? Concerned about someone accessing company secrets from this? Ask yourself this: Do you think that your secret is important enough that a person will break into your employee’s home to access their PC? Do you have armed guards at your front doors to keep people from walking in? Do you have absolutely no connection between your internal computer system and an outside connection? If you answered No to any of these, try a different mindset.

A legitimate concern is the availability of people for mentoring, or for brainstorming, or for any other cooperative task. You might want to consider how much of this really does occur and you then might want to consider a partial solution such as desk sharing: two people share a desk and a PC and work at home part of the week and at work part of the week.

Communication? Last I heard, homes had phones too, and email and internet connectivity…

Concerned about that security issue? Check with consultants in your area and find out the security risks. Don’t just assume that this type of connectivity will take your important systems down, find out the facts.

How about liability? Concerned that your employee may get hurt at home and sue you? Check with your lawyer and also your insurance companies about steps you and your employee can take. And lawyers and insurance companies, start understanding this type of business…it will only increase in the future.

Costs? You bet there will be costs to enabling off-site employees if they need computer access. But consider what you can get back: The main factor that raises envy in me and my professional peers is when one of us can work at home. It even beats out salary as the number one reason to take one job over another. And for most companies, the number one cost is their employees. Want to attract and keep the best?

There are a lot of issues to working at home. I would like to hear from companies that have made this transition successfully and would like to publish your success stories in the month’s to come. And I would also like to hear from those companies who have made a choice not to allow off-site employees and their reasons. Let’s start exploring this issue and see “Why we CAN work at home”.

That’s it, folks.