The Silicon Underground
  Welcome to Dave Farquhar's Silicon Underground Monday, November 23 2009 @ 11:36 AM CST  
Theme Changer
Change the look of the site by selecting a theme below:

What's New
STORIES
No new stories

COMMENTS last 48 hrs
  • Why don't wins co...

  • LINKS last 2 wks
    No recent new links

    Google Ads

    User Functions
    Username:

    Password:

    Don't have an account yet? Sign up as a New User

    Firefox


    The tightrope of Web design   
    Sunday, May 19 2002 @ 03:51 PM CDT
    By David L. Farquhar

    There are few challenges more daunting than designing a truly first-rate Web site.

    And I'm not here to tell you how to design a first-rate Web site, because I'm not so arrogant as to assert that I've ever done it. I've tried it a dozen or so times. Some of the results have been good enough to be worthy of staying on the Web for a while. Some of them have been so bad that if someone were to hand me a printout today, I'd question what I could have possibly been thinking when I did it, and I might even question whether the design was mine. Yes, I've done my best to forget a lot of them.

    And a lot of people are probably wondering why I'm making such a big deal out of this, since making a Web site is something that it seems like everybody does. I think everyone I went to college with had a Web site that had pictures of their cats, lists of all the CDs they owned (or wished they owned), their resumes, and links to all of their friends' sites.

    But that's precisely the issue. Since everyone does it, it's difficult to stand out.

    There are actually three elements that make up a truly first-rate site, and the biggest problem with most near misses is that they only hit one or two of those elements. Other sites, like most personal home pages that populated the Web in the early '90s, missed them all.

    Content. A first-rate site has to have something to say. The biggest problem with those early personal home pages was that people had nothing to say. Finding clever ways to present boring and useless information wears off quickly. Ideally, a site should give some order to that content, so people can find what they're looking for. A Weblog dedicated to the rebuilding of vintage BMW motorcycles could be extremely useful, but its usefulness will wear off very quickly if there isn't a good way to find it.

    Community. The best stuff comes from the questions people ask, or the answers people provide. Just ask any teacher. Anything that provides opportunity for banter between content provider and reader, or between readers, is a good thing. If there's a way to organize and search that banter, so much the better. That hypothetical BMW motorcycle blog would be a lot more useful with people asking questions and sharing their own experience.

    Design. This is last, and possibly least. Yet for many people it's the most challenging. This is partly because some people aren't naturally gifted in this area (I'm not), and partly because of the crude tools involved. There are probably other factors. We'll concentrate on this area though, because it's probably the only area that's debatable.

    Some people question whether design is even necessary. This is a sure sign that an awful lot of designers are doing their jobs. Design's job is to set the mood, present the content in a facilitating manner, and get out of the way.

    The challenge the Web presents is that power users are used to setting all the settings on their computer and it staying that way. They set the colors and the font and the window size the computer should use for everything, and some of them resent it when anyone imposes anything different on them. Some of them even seem to resent the use of p-tags to denote the end of a paragraph. They'll decide when a paragraph ends and a new one begins, thank you very much. What's the original author of the piece know, anyway?

    On the other hand, you have users who are still trying to figure out what that blasted mouse is for. (This is in contrast to the people like me who've been using a computer for 20 years and are still trying to figure out what that blasted mouse is for.) They don't know where those settings are and don't care to set them themselves; they expect to be able to go to a Web page, and if it just looks like a raw data feed, they'll go on to the next place because it looks nicer.

    Those power users have a difficult time with this concept, but mankind has learned a few things in the thousands of years since the first time someone applied ink to parchment. Most of it was through trial and error, but most of that wisdom is timeless. Throwing that away is like deciding you don't like the number zero. For example, in the case of Roman alphabets, a line length of between 50 and 80 characters reads much faster than any other length. If reading a page makes you feel tired, check the line length.

    Knowing that, a browser window expanded to full screen is too short and too wide. Books and magazines and newspapers are vertically-oriented for a reason. So the primary navigation goes along the side, because there's horizontal room to spare and vertical room is too precious to waste on something not content-oriented. Most computer users don't want to think about this kind of stuff.

    When it comes to font selection, things get a little bit easier. Fonts with serifs (feet and ears, like Times) look elegant and they're easy to read because the serifs guide the eye. Sans-serif fonts (like Arial, which is a Helvetica ripoff) look really good when you blow them up big, but when you run them too small, the eye gets confused. The problem is that computer screens don't have enough resolution to really do serifs justice. So the best thing to do in most situations is to run a sans-serif font with lots of line spacing. The extra space between the lines helps to guide the eye the same way serifs will. If you notice the typography, the designer has probably done a poor job. If you feel physically tired after reading the piece, the designer definitely has done a poor job.

    Brightness and contrast are another issue. The rule is that for short stretches, you can read just about anything. That's why you'll see photos run full-page in magazines with the caption superimposed on top. But for reading anything more than a paragraph, you need a fair bit of contrast. Our society is used to black text on white. White or light grey text on black should theoretically work as well, but we're used to light backgrounds, so we struggle sometimes with dark backgrounds.

    But contrast done well can extend beyond convention. It's possible to make an eye-catching and perfectly readable design with orange and blue, assuming you use the right shades of orange and blue and size elements appropriately. If you don't feel physically tired after reading it, the designer did a good job, even if you don't like blue and orange.

    The problem with Web design is multifaceted. Not all browsers render pages the same way. This was a nightmare in the mid-90s, when Microsoft and Netscape sought to gain advantages over one another by extending the HTML standard and not always incorporating one another's extensions. Netscape and Opera deciding to release browsers that follow the standards regardless of what that does to pages developed with Microsoft tools is a very good thing--it forced Microsoft to at least act like it cares about standards. So if a designer is willing to work hard enough, it's possible to make a page that looks reasonably close in all the major browsers today.

    HTML never helped matters any. HTML is a very crude tool, suitable for deliniating paragraphs from headings and providing links but nothing else. You can tell from looking at the original standard that no one with design background participated in its creation. Anything created in strict HTML 1.0 will look like a page from a scientific journal. To adjust line spacing or create multi-column layout, people had to resort to hacks--hacks that browsers will react to in different ways.

    XHTML and CSS are what journalism students like me toiling in the early '90s trying to figure out what to do with this new medium should have been praying for. It's still not as versatile as PostScript, but it's very nearly good enough as a design language.

    The final design hurdle, though, has always been with us and will only get worse. You could always tell in the early '90s what pages were created on campus with $10,000 workstations and which ones were created on computers the student owned. Lab-created pages used huge fonts and didn't look right at any resolution below 1024x768. Meanwhile, I was designing for 14-inch monitors because that was what I had. That 14-inch monitor cost me 300 bucks, buddy, so I don't want to hear any snickers!

    Today, you can buy a decent 19-inch monitor for what I paid for that 14-incher. But as monitors have gotten larger, resolutions have only varied more. A lot of people run 17-inch or even 19-inch monitors at 640x480. Sometimes this is because they haven't figured out how to change the resolution. Sometimes it's because they like huge text. Flat-panel displays generally look gorgeous in their native resolution but terrible in any other, so it's not fair to ask a flat-panel user to change. These displays became affordable within the past couple of years, so they are more common now than ever. A typical flat-panel runs at 1024x768 or 800x600. And on the other extreme, a 21-inch monitor capable of displaying 1600x1200 comfortably (or higher) can be had for $700.

    So, since you can't predict the resolution or window width people will be using, what do you do? CSS and XHTML provide a bit of an answer. It'll let you create a content column that scales to the screen size. And if you're really, really careful, you can specify your elements' sizes in relative terms, rather than absolute pixel measurements. But this messes up if you have lots of graphics you want to position and line up correctly.

    And some designs just stop working right when you mess with the font size. Mine don't, primarily because I'm a disciple of Roger Black. I don't have any really strong feelings about Black, it's just that the first book I read by a designer that I really understood was co-written by Black. And most of Roger Black's techniques work just fine when you crank up the font sizes. If anything, they look better when you make the fonts big enough that your neighbor can read them when you have your curtains open.

      [ Views: 1434 ]  


    The tightrope of Web design | 2 comments | Create New Account
    The following comments are owned by whomever posted them. This site is not responsible for what they say.
    name Clark Myers
    Authored by: ImportedComment on Sunday, May 19 2002 @ 06:13 PM CDT
    Nicely done.

    Don't really like Black's quote:"The poor are always with us."
    -- Roger says in regards to @Home subscribers using old computers.-
    but I do apreciate respect for variety.

    Anything more on say Websites that Work(boycott Adobe just the same)? Any sites of Black's or otherwise you like - is MSNBC still his design?

    [ Reply to This ]

    Dave F.
    Authored by: ImportedComment on Sunday, May 19 2002 @ 07:21 PM CDT
    Thanks.

    I've got Web Sites That Work (it was a gift, several years ago) and I've read it a few times. It had good stuff in it, but a lot of fluff too. It's not one of those books that I'd buy again. If the local library has it it's worth looking at, if that's what you're asking. (It seems to be out of print at this point anyway.)

    I don't know if Black's company is still doing the design for MSNBC, but the work sure looks like Black.

    Sites whose designs I like... Hmm. There's Gardencafe.com, which reminds me of one of my classmates for some reason. Then there's Speakeasy. I have no idea who he reminds me of. There's not much for me to learn from Carey, because he's one of those guys who can make a good design through instinct. When I try to do that I get in trouble. Carey's not being too bold right now, but give him a week or two and he'll have something new to look at that breaks some conventions. (There's nothing wrong with the current design but it's more traditional than his usual stuff.)

    I also like Shades of Grey. Well, I like its look. For reading, it could use bigger fonts and a little more line spacing. But it's one of those designs I could print out on a color printer and hang on my wall for decoration, which is more than I can say for this.

    But as far as sites that put it all together? I don't know if I've ever seen one. I guess the best I've seen are PC Magazine and ExtremeTech (and other ZD Media sites). They won't wow you with their designs, but I think overall they do as good of a job as anyone I've seen. The design is busier than it needs to be, but it scales well, and there's community, which is important.

    Part of the problem is that we're still trying to figure out how to do this right. In the 1940s and 50s, TV studios looked like radio studios because that was all we knew. We've figured out the Web shouldn't look like television and it shouldn't look like a magazine.

    [ Reply to This ]

    What's Related
  • More by DaveF
  • More from Design

  • Story Options
  • Mail Story to a Friend
  • Printable Story Format


  • Calendar
    November 2009
    SuMoTuWeThFrSa
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    1
    2
    3
    4
    5
    Click on any day to see postings and events for that date.

    Referrals

    Top 10 by Comments
    Story TitleComments
    Cheap laptops from Sotec 253
    An untrustworthy vendor 164
    Upgrading an eMachine 125
    eMachine upgrade advice 99
    Why I dislike Microsoft 51
    Upgrade diary: Gateway G6-400 35
    And we're live 30
    The day after the Columbia 22
    How to pray 22
    CD-ROM troubleshooting under Windows 9x 20

    Top 10 Read
    Story TitleViews
    eMachine upgrade advice 74333
    Upgrading an eMachine 63083
    How to view a blg file in Windows 2000 50612
    Cheap laptops from Sotec 32796
    Upgrade diary: Compaq Presario 7360 19997
    Upgrade diary: Gateway G6-400 19874
    CD-ROM troubleshooting under Windows 9x 15549
    Finding an open-source alternative to Ghost 14292
    Big trouble 13815
    Salary cap? Baseball needs something 11798

    Topics
    Home
    Apache (2)
    Baseball (63)
    Book reviews (2)
    Business (1)
    Christianity (57)
    Cooking (1)
    Copyright (16)
    Curmudgeonry (1)
    Design (7)
    DOS (6)
    Games (4)
    Genealogy (11)
    General (507)
    Hardware (168)
    Health (13)
    Human Interest (9)
    Humor/Satire (19)
    Investing (4)
    Journalism (1)
    Linux (93)
    Macintosh (22)
    Model Building (3)
    Music (33)
    net.culture (40)
    Personal (88)
    Photography (6)
    Politics (3)
    Retro Computing (26)
    Saving money (72)
    Servers and Networking (18)
    Society (49)
    Software (55)
    Spam (13)
    St. Louis (23)
    This weblog (14)
    Toy trains (74)
    Troubleshooting (7)
    Useless Trivia (1)
    Vendors (6)
    Video (21)
    Viruses (12)
    Windows (120)
    Writing (16)

    Older Stories
    Wednesday 30-Sep
  • 401(K) Paperwork (0)

  • Sunday 27-Sep
  • First impressions: HP Mini 110 (1)

  • Saturday 26-Sep
  • Getting more screen real estate in Firefox (0)

  • Wednesday 23-Sep
  • Barfy. (4)

  • Monday 21-Sep
  • Why I quit my job (2)

  • Saturday 12-Sep
  • Slimming down Windows XP for SSDs and nettops (0)

  • Thursday 10-Sep
  • And... bailing out. (3)

  • Friday 04-Sep
  • End of the innocence (0)

  • Monday 31-Aug
  • Installing Windows off USB (1)

  • Friday 21-Aug
  • Diving into real estate (0)

  • Who's Online
    Guest Users: 6

    Syndicate!
    Get your RSS/RDF fix here.

    List of all stories
    Click here for a list of all the entries on this site


    Created this page in 0.97 seconds


     Copyright © 2009 Dave Farquhar's Silicon Underground
     All trademarks and copyrights on this page are owned by their respective owners.

    Powered by GL 1.3.x