Webchicka: Web Design As This Chick Sees It

BLOG

You Might Be A Computer Nerd If…

Posted by webchick November 21, 2007 - 12:00am

• If you introduce your wife as “mylady@home.wife”
• If your spouse sends you an e-mail instead of calling you to dinner
• If you can quote scenes from any Monty Python movie
• If you want an 8X CDROM for Christmas
• If Dilbert is your hero
• If you stare at an orange juice container because it says CONCENTRATE
• If you can name 6 Star Trek episodes
• If the only jokes you receive are through e-mail
• If your wristwatch has more computing power than a 486DX-50
• If your idea of good interpersonal communication means getting the decimal point in the right place
• If you look forward to Christmas only to put together the kids’ toys
• If you use a CAD package to design your son’s Pine Wood Derby car
• If you have used coat hangers and duct tape for something other than hanging coats and taping ducts
• If, at Christmas, it goes without saying that you will be the one to find the burnt-out bulb in the string
• If you window shop at Radio Shack
• If your ideal evening consists of fast-forwarding through the latest sci-fi movie looking for technical inaccuracies
• If you have “Dilbert” comics displayed anywhere in your work area
• If you carry on a one-hour debate over the expected results of a test that actually takes five minutes to run
• If you are convinced you can build a phaser out of your garage door opener and your camera’s flash attachment
• If you don’t even know where the cover to your personal computer is
• If you have modified your can-opener to be microprocessor driven
• If you know the direction the water swirls when you flush
• If you own “Official Star Trek” anything
• If you have ever taken the back off your TV just to see what’s inside
• If a team of you and your co-workers have set out to modify the antenna on the radio in your work area for better reception
• If you have ever purchased an electronic appliance “as-is”
• If you see a good design and still have to change it
• If the salespeople at Circuit City can’t answer any of your questions
• If you still own a slide rule and you know how to work it
• If the thought that a CD could refer to finance or music never enters your mind
• If you own a set of itty-bitty screw drivers, but you don’t remember where they are
• If you rotate your screen savers more frequently than your automobile tires
• If you have a functioning home copier machine, but every toaster you own turns bread into charcoal
• If you have more toys than your kids
• If you need a checklist to turn on the TV
• If you have introduced your kids by the wrong name
• If you have a habit of destroying things in order to see how they work
• If your I.Q. number is bigger than your weight
• If you can remember 7 computer passwords but not your anniversary
• If you have memorized the program schedule for the Discovery channel and have seen most of the shows already
• If you have ever owned a calculator with no equal key and know what RPN stands for.
• If your father sat 2 inches in front of your family’s first color TV with a magnifying lens to see how they made the colors, and you grew up thinking that was normal
• If you know how to take the cover off of your computer, and what size screw driver to use
• If you can type 70 words a minute but can’t read your own handwriting
• If people groan at the party when you pick out the music
• If you can’t remember where you parked your car for the 3rd time this week
• If your checkbook always balances
• If your wristwatch has more buttons than a telephone
• If you have more friends on the Internet than in real life
• If you thought the real heroes of “Apollo 13″ were the mission controllers
• If you think that when people around you yawn, it’s because they didn’t get enough sleep
• If you spend more on your home computer than your car
• If you know what http:/ stands for
• If you’ve ever tried to repair a $5.00 radio
• If you have a neatly sorted collection of old bolts and nuts in your garage
• If your three year old son asks why the sky is blue and you try to explain atmospheric absorption theory
• When your friend tells you all about his Cressida V6 and you reply “Yeah, I had V5, and it was full of bugs!”
• When driving you see a license plate with the letters DSR, and you feel compelled to touch your bumper to the other car to see if you can raise CD.
• When you are counting objects “0,1,2,3,4,5,6,7,8,9,A,B,C,D…”.
• When you lay down in the afternoon for a short rest, end up sleeping 4 hours, and call it a “mega-nap”.
• When your friend is going to Essex for vacation and you tell her, “You really should go for the DX, it has the built in co-processor.”
• When you dream in 256 palettes of 256 colors.
• When asked about a bus schedule, you wonder if it is 16 or 32 bits.
• When you have to go to the bathroom, but you wait until bladder meltdown, since “goto” is bad programming style.
• When you convince yourself that Tetris really does improve eye-hand coordination.
• When the radio traffic reporter talks about a backup caused by a crash, and you correct him that a backup is good protection in case of a crash.
• When floppy drive applies more to your love life, and hard drive to your machines.
• When you call “*.*” star-dot-star.
• When you can do hexadecimal arithmetic in your head.
• When your wife goes to the market for some Macintosh apples, and you correct her, “No, dear, it’s ‘Apple Macintoshes’.”
• When your wife says “IF you don’t turn off that damn machine and come to bed, THEN I am going to divorce you!”, and you chastise her for omitting the ELSE clause.

Fast Fingers

Posted in Typing by webchick : November 22, 2007 - 2:49pm

As a programmer, fast typing is important. Ever since those boring classes in high school on computers that barely had an operating system, I’ve tried to improve my typing. I hate systems that charge you to see what your score is, or try to get you to buy something from them. Finally, I found a good system.

The 10 Fast Fingers Speedtest offers a free typing test that uses the most common english words. So, not only do you see how fast you type, but you also improve every time you take the test. When you finish the 60 second test, it displays how many points you earned, how you score with other people who took the test. It also shows how many characters per minute you can type, how many words you spelled correctly, and how many you typed wrong. It’s an excellent tool.

So, I can type 357 characters (or 67 words) per minute. What about you? Post your scores in the comments.

Following the Fonts

Posted in Typing by webchick November 23, 2007

The internet has progressed quite a bit since it’s early days. Today, a good Designer or Programmer (or combination thereof) can make a website do whatever or look however she wants. I remember, just 6 years ago when I started learning HTML, what was considered “cool”, “useful”, and “standard”. However, there is one change I await eagerly.

Web Fonts

I first read about Web Fonts 2 or 3 months ago. I remember thinking that it would be so cool to be able to choose the font you use on your website. I design new sites all the time and don’t want to use the same fonts for each website I create.

Now, WebKit has added compatibility for Web Fonts, enabling the use of them in Safari. It makes me wonder what is taking Firefox so long, but I digress. So, we have a step in the right direction. Hopefully other modern browsers will pick up on soon. I won’t hold my breath that Internet Explorer will jump on the bandwagon.

Personally, I’m glad to see this. There has been a great deal of debate as to whether Web Fonts is good or bad. I think there are valid points on both sides. I think that having the freedom to choose the font can add a level to the design that we simply haven’t had in the past. I can however see how there could be some copyright issues with protected fonts, while on the flipside, don’t see why said fonts should be usable in print but not on the web. There are concerns about inexperienced web designers (or people who want to believe they are web designers) misusing Web Fonts and creating horrible, unreadable, unusable, inaccessible websites. To that I ask: “And that is different from now, how?” Honestly, it just means I get more work.

So, as I wait eagerly for the majority of browsers to support Web Fonts, I have to make do with common fonts. I did a great deal of research to figure out which fonts are most common on which systems so we could have a little more variety in fonts. I included alternatives for Mac and Linux distributions. So, I put together a compilation of fonts that are available on at least 50% of computers with that operating system. You can check it out here.

If this list helps you, please, I want to hear about it.

Dysfunctional Font-Family

Perhaps one of the toughest decisions to make when designing a website, for me at least, is choosing which font-family to use as well as which fonts work for most users. I have wished since I started my career in web design that it was possible to use a font uploaded to the web server and use that, rather than relying on client machines to have a compatible font. However, it seems our lot in life to make the best of a less than ideal situation.

So, in the spirit of aiding my fellow designers, I have compiled a list of some of the best font families and their respective counterparts in both Mac and Linux/Unix. According to Code Style, the fonts listed below are available on more than 50% of all computers using that operating system. In general, the families are listed as follows:

"font-family: Windows or MSIE Font, Mac Font, Linux Font, Generic Alternative;"

I also did you the favor of formatting so that it can be copied and pasted into your css file. Feel free to use these as you will. I would really like to get more examples of font-families, so if you have a unique one that you would like to contribute, please let me know. I would also like to know if this has been helpful.

Sans-Serif fonts

The advantage to sans-serif fonts is that they are very easy to read on the web. Sans-serif fonts eliminate the strokes, or serifs, on the ends of letters.

• Arial, Helvetica, sans-serif
• "Arial Black", Gadget, sans-serif
• Impact, Charcoal, Chicago, sans-serif
• "Lucida Sans Unicode", "Lucida Grande", sans-serif
• Tahoma, Geneva, sans-serif
• "Trebuchet MS", Helvetica, sans-serif
• Verdana, Geneva, sans-serif

Serif Fonts

Serif fonts are especially good for headings. They tend to give the appearance of antiquaited or typed text. Obviously, serif fonts have been used well as content text, however, sans-serif fonts are still often the font of choice for that purpose.

• Georgia, "Hoefler Text", "URW Bookman L", serif
• "Palatino Linotype", "Book Antiqua", "URW Palladio L" serif
• "Times New Roman", Times, "Nimbus Roman No9 L", serif
• "Bookman Old Style", Didot, "URW Bookman L", serif
• Sylfaen, Palatino, "URW Palladio L", serif

Cursive Fonts

I have yet to see cursive fonts well-used in websites, however, that does not mean that they cannot. For the longest time, I avoided cursive fonts simply because I believed the only one that could be used on most systems was Comic Sans (which I detest with a passion). However, in my research, I found that the Chancery fonts are common on Macs and Linux computers and there is a Windows font that is close enough to give the same effect. I haven't actually used it myself yet, but I think it would be a good thing to try.

• "Comic Sans MS", cursive
• "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive

Fantasy Fonts

Again, Fantasy fonts are rarely used. I haven't really found any good fonts for this class. If you know of any, please let me know.

Monospace Fonts

• Monospace fonts are commonly used to indicate code.
• "Courier New", "Nimbus Mono L", Courier, monospace
• "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace

The one thing I want to be clear to point out is that these are merely recommendations. While sans-serif fonts are typically the most readable on the web, there is nothing against using a serif font instead. In fact, there is nothing against using a monospace font, as I did. Remember that CSS grants you great freedom and flexibility. Try to bear in mind accessability and standards, but there are no rules to define beautiful.

​

The Beauty of CSS Design

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file and css file

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.

Participation

Graphic artists only please. You are modifying this page, so strong CSS skills are necessary, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.

You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.

Download the sample html file and css file to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. Send us a link to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.

Benefits

Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.

Requirements

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.

This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.

Bandwidth graciously donated by DreamFire Studios