Archive for January 2002
New articles at meryl.net articles including “CSS Without Tears with Makiko Itoh”. It’s an good way to start learning CSS. I wish I had this advice when I first met and cursed CSS.
Designing and maintaining Web pages takes a lot of time, but using CSS can save considerable time. If you want to change the font color on all your Web pages, then all you have to do is go to the external CSS file and change it in one place as opposed to going to every HTML page and changing it in the FONT tag.
CSS is not without its drawbacks. Netscape 4.x and other CSS incompatible browsers are still heavily used today and don’t properly display CSS. Furthermore, the growth of wireless devices connected to the Internet makes it a greater challenge.
To overcome the browser challenges, start by determining which browser to use as the baseline. The decision largely depends on your audience. If you have an existing Web site, study its statistics to determine whether or not you want to reach the Netscape 4.x audience. Makiko Itoh of PRODOK.com states that there are three approaches you can consider:
- Make Netscape 4.x the baseline browser – this approach is the most challenging because of the workarounds needed to make it look identical in 4.x.
- Make Internet Explorer 5.0 the baseline browser – This method makes the presentation plain for the Netscape 4.x audience.
- Compromise – Looks best in Netscape 6.x, Explorer 5.5 and higher, and looks satisfactory in Netscape 4.x.
Begin by creating streamlined HTML markup that is well formed and avoids all styling tags such as <FONT>, <CENTER>, and other deprecated tags. See Itoh’s example of a barebones HTML document.
Make sure you have the <DOCTYPE> line at the top of your document. If your document is not completely valid, use the Transitional DOCTYPE or no DOCTYPE.
DOCTYPE examples:
- Strict HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html3/strict.dtd”>
- Transitional HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd”>
- Strict XHTML 1.0: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
- Transitional XHTML 1.0: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
Make sure you use closing tags even for <P> and list items. Two HTML elements without closing tags are <BR> and <IMG>. Be aware that XHTML does close them.
Validate the barebones markup using the W3C.org validators and HTML Tidy.
After you confirm that your HTML is clean and has closed tags, you’re ready to add CSS. Let’s review a sample line:
p {font-family: verdana, helvetica, times;}
The p represents the selector or <P> tag. Font-family is the property and must follow : along with the value(s). In this example, anytime <p> comes up in the HTML document, the content appears with the verdana font. If the computer doesn’t have verdana font loaded, then the content will use the second choice of Helvetica.
Unless the user has overridden all author styles with a personal stylesheet, the user should see the entire page in verdana.
For purposes of this article, we’ll add <STYLE> right above the closing </HEAD> section of your HTML file. Everything between /* */ are comments to help you understand what is happening.
<style media=”screen” type=”text/css”>
<!–
/* The next lines tell the browser to render anything in the <p> tag with a font size of 11 pixels and a line height (space between lines of 18 pixels
*/
p {
font-size: 11px;
line-height: 18px;
}
/* The next lines tell the browser to render anything in the <h2> tag with a font size of 15 pixels
*/
h2 {
font-size: 15px;
}
/* The next lines tell the browser to render anything in the <body>, <p>, and <h2> tags with a verdana,helvetica,arial,sans-serif font in that order. If the computer doesn’t have verdana, then the next choice is Helvetica.
*/
body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}
–>
</style>
Using <!– and –> tags will hide the CSS from older browsers that can’t render CSS. Save the HTML file and take a look at Itoh’s example. Congratulations, you’ve successfully added CSS to your HTML document.
If you decide that you want the <p> font size to be smaller or larger, all you have to do is change the number of pixels as follows:
p {
font-size: 10px;
line-height: 18px;
}
No more having to go through the entire document and changing the numbers in all the <FONT> tags. Expand your <STYLE> to add color and links. The BOLD items are additions to the original <STYLE> in the previous example.
p {
font-size: 11px;
line-height: 18px;
color: #eeeeee;
}
h2 {
font-size: 15px;
color: #fc0;
}
b,em {
color: #fc0;
}
body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}
body {
background-color: #000000;
color: #eeeeee;
}
/* a:visited are links that your visitors have visited.
*/
a:visited {
text-decoration: none;
color: #ffff99;
background-color: black;
}
/* a:link impacts all links on the page
*/
a:link {
text-decoration: underline;
color: #ff9900;
background-color: black;
}
/* a:hover changes the link when your visitor has the cursor over the link. This does not work in Netscape 4.x
*/
a:hover {
color: black;
background-color: #ffff99;
}
Making the above changes to your <STYLE> should look similar to this example. Feel free to play with the colors, sizes, and font values to see what happens to the document.
CSS offers many more options and makes it easy to change your document styles especially when using an external style sheet. If you link all your documents to one external CSS file, then you can make changes to styles in all of the documents just by modifying the values in the CSS file. The steps outlined in this article are unleashing a little bit of the power of CSS. It can go far beyond and control layouts and other design enhancing features in the latest browsers.
Seeing your name in lights is always exciting, but not in this book because it means your Web page sucks! It’s more fun to learn how to do something by looking at what NOT to do. That’s approach taken mixed with humor in Web Pages That Suck from authors Vincent Flanders and Michael Willis.
Written in the first person, Flanders and Willis tackle poorly designed websites. They encourage Web designers to keep it simple, usable and valuable via content. Beginners will appreciate the real-life visual aids and advice of what to avoid in web design like not using counters (to count how many people have come to your website).
You’ll find plenty of counters in use around the web and they don’t mean a thing. To increase the counting, all you do is repeatedly reload the page. They don’t tell you how many *unique* visitors arrive at your website.
Expect a lot of style, fun, and attitude to push you into understanding good web design. Sure, they offer common sense advice like avoid overdoing graphics especially animated graphics and watch those backgrounds. Yet, we still see these same mistakes today.
People visit websites because they want something usually in the form of content. The book covers how to market the Web site, attract customers, obtain accurate search engine listings, and motivate visitors to return. Though Google, a popular search engine, is not mentioned (it didn’t exist at the time), the advice is equally applicable to any search engine.
You’ll find little HTML and style sheet coverage. This is a “show me” book and coupling this with other references will enable the beginner to be better prepared to dive into web design.
Also included is a sprinkling of how to create a storyboard. Some beginners don’t realize the importance of this step. I admit when I first created web pages that I knew nothing of storyboards until I took a class.
It’s a quick read and its strength is covering aesthetics and functionality. The Web sites mentioned in the book either don’t exist or have updated the Web sites. Not to worry, there are plenty of screen shots so you can see them in their original “sucky” form. This is a learning experience since you can check out what the sucky Web sites are doing today and determine what they’ve improved.
Flanders explains, “While the sites have changed, the concepts remain the same.” He also says that instead of 60Kb pages when the book was published, it’s now 200Kb pages that are considered too large. That’s my thought exactly about the book – concepts apply, but variables change.
In today’s information overloading times, the authors put the important tips on the sides of the pages to make it easy for readers to scan and read.
The book and its companion Web site especially the Daily Sucker and Mystery Meat Navigation should help keep your name out of any future editions of the book or related articles.
VITAL STATISTICS:
TITLE: Web Pages That Suck: Learn Good Design by Looking at Bad
Design
AUTHORS: Vincent Flanders and Michael Willis
PUBLISHER: Sybex
PUBLICATION DATE: March 1998
ISBN: 078212187X
FORMAT: Paperback
PAGES: 288
PRICE: US$39
When I began writing articles about the Internet, World Wide Web, and email, I was unsure of how to punctuate or capitalize such words. Checking the dictionary was fruitless because the words haven’t made it there. I sent an article draft to my sister, my second pair of eyes and a former journalist.
She responded, “You must go buy this book: WIRED STYLE.” As the good little sister I am, I did as she commanded. Immediately, I used the book and it helped me through a few entanglements.
Later, I wrote my first article on grammar and used the book and its companion Web site as the primary source. The article was well received and disliked. Most readers were grateful to have someone clarify how to take care of these techie words. But some were horrified that I used such a resource as a reference instead of the Chicago Manual of Style or other favorite resource.
Wired’s introduction indicates, “…intended to complement those guides by digging into questions that writers and editors confront daily-questions of style and substance that Chicago and AP (not to mention Strunk & White) don’t even imagine.” That’s the reason why I used it as my resource. The others didn’t address the issues I confronted while writing my article.
But should this be the stylebook for everyone? It’s definitely not the book many companies use since many argue against Wired’s choice of usage of words. For example, the infamous “email.” Book says it should be “e-mail.” Many are against typing an extra keystroke for the hyphen.
The book lists ten principles for writing well in the digital age. Five relate to prose style and five cover copy-editing style. Principle #2 encourages the writer to play with voice. Personally, I like the casual style, first-person articles. They’re easy to read and enjoy. philophe.com values Wired’s perspective, but believes they do us a disservice by not explaining that realize content and site infrastructure are separate entities.
I agree with philophe.com that a Web site’s style is determined by its company and not by Wired or anyone else. Wired states “Web” is capitalized when referencing the Web, Web sites, Web pages and so on. I use “Web” in here in meryl world and follow the style of the site for which I write.
Not only it can be used as a style guide or reference, but also as a digital glossary. It includes ASP, grok, IP, MIME, push and more. But one term was odd – Unabomber. Excuse me, what does a lunatic guy who sent bombs to people have to do with technology? Other interesting words are “Pong” and “Tetris.” Yes, they’re talking about the addictive games.
Someone asked how do we punctuate around smileys 
? Smileys are made of punctuation marks and if the smiley is at the end of the sentence, it could be confusing with a period, question mark, or exclamation mark immediately after it.
Typically, I add a space after the smiley. Wired Style had a smiley at the end of a sentence and the period came immediate after like so . It’s legible, but what if it’s a short smiley ? I think it depends on Principle #1: The Medium Matters. In an informal email using less strict grammar and style rules, I leave out the sentence ending punctuation mark. If a bigwig national magazine wants an article, then I’d ask for their rules. Make the decision based on the medium and the audience, and then be consistent.
This is a good book to have in your library especially for techie writers. The definitions are useful, but there are free web sites like Webopedia to help. I don’t recommend using this as THE digital style guide, but help you create one. The most important thing is be consistent throughout your writing or web site.
VITAL STATISTICS:
TITLE: Wired Style : Principles of English Usage in the Digital
Age
AUTHORS: Constance Hale (Editor), Jessie Scanlon, Hale Scanlon
PUBLISHER: Broadway Books
PUBLICATION DATE: December 1999
ISBN: 0767903722
FORMAT: Paperback
PAGES: 176
PRICE: US$13
Iain Gillott of iGillottResearch (PDF file) announces his wireless prophecies for 2002. Why Eleven and a 1/2, and not Twelve predictions? To be honest, we originally came up with twelve but two are closely related so we counted just a half. Plus 11½ is a better title the usual “Twelve Predictions for 2002.” Whether we are right or wrong, we hope that these points stimulate some thought and consideration.
Posted three new spankin’ pages of gotchas: gotchas #7, gotchas #8, gotchas #9.
WOW is the best way to describe my reaction. Powers Of 10 takes you on a journey from outer space to inner space. I learned just watching for one minute. [Link from Steven]
Burningbird had a contest and Meryl is one of the winners. Meryl is not a coffee drinker, so she tells da Bird to send it to this Meryl. Isn’t that so sweet of Meryl? Help me show my appreciation to Meryl by clicking on any of these:
anil has announced a Kickball game at sxsw, so I’ll have to pack the athlete stuff, too! I hope they don’t assume wimin can’t play sports. I may be older, but the competitive spirit in me lives on! Cam woke me up with the news.
Don’t ya’ll dare pick me last!
Search and archives
Get Updates
-
Categories
Archives
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
-
Other Stops
-
Connect with Meryl
-
Recommended
Sponsors
Blogroll
| writing contests writing books how to get published writing instruction writing workshops writing tutorials |
All Content © Copyright 1995 - 2012 Meryl.net. This work is licensed under a Creative Commons License.
Privacy Policy | Thanks to Blue Flavor and Fireside Media | Valid XHTML and CSS