Web Design for Authors: The Quick and Dirty Guide, Part 3 of 3

ATTENTION: Bad design can kill!

And 2 tips and tricks I missed last week:

1. Have a custom error page so you can redirect users to your home page or report a dead link.
2. Keep in mind users are increasingly using handheld devices to surf the Internet. Design with small screens in mind: less is more!

----------------------------------

Now, onto today's topic...

PC World ranked MySpace as the number 1 worst web site.

When I first stumbled onto MySpace, I looked, I shuddered, I clicked away. Animated graphics, music, textured backgrounds, illegible fonts, crazy colors, and countless other violations. MySpace pushed web design back a good decade.

But wait! Your MySpace page doesn't have to follow the trend. Please stop the madness. Pages like this one hurts! Read Parts 1 and 2. And apply the guidelines to your space because good design is for everyone.

So, what's below? A break down of the MySpace style codes that can help you customize your page. (Example shown is from PARTS of Ann Bruce's space.)

Breaking Down MySpace

The following should be placed within STYLE tags.

NOTE FROM ANN: Some "friends" paste in really large images in their comments, which can take up your entire page, so I included the following to make the images smaller.

/* RESIZE COMMENTS IMAGES */
td.text td.text table table table td a img {
width:80px;
}

td.text td.text table table table td div img {
width:80px;
}

td.text td.text table table td img {
width:50px;
max-width:80px;
width:auto;
}

td.text td.text table table td div img {
width:80px;
}

* html td.text td.text table table td img {
width:80px;
}

* html td.text td.text table table td a img {
width:80px;
}

* html td.text td.text table table td div img {
width:80px;
}
/* END RESIZE COMMENTS IMAGES */


NOTE FROM ANN: This is a background image that I allow to tile, but I don't allow it to move when users scroll down the page.

/* STATIC, TILING BACKGROUND IMAGE */
body{
background-color:BDB76B;
background-image:url('http://image.jpg');
background-attachment:fixed;
background-position:bottom left;
background-repeat: no-repeat;
border-color:F5F5DC;
border-width:10px;
border-style:double;
}
/* END STATIC, NON-TILING BACKGROUND IMAGE */


NOTE FROM ANN: Everything after this point is pretty self-explanatory.

/* AFFECTS ALL TABLES ON PAGE */
table, tr, td {
background-color:transparent;
border:none;
border-width:0;
}

/* MAIN TABLES CONTAINING EVERYTHING (ALL TEXT, ETC.)*/
table table table{
border-style:double;
border-width:10px;
border-color: F5F5DC;
background-color:transparent;
}

/* MAIN TABLE TEXT THROUGHOUT MOST OF PROFILE */
table table table td{
background-color:FFFFFF;
filter:alpha(opacity=100);
..-opacity:100;
opacity:100;
-khtml-opacity:100;
}

/* TEXT ON ALL TABLES */
table, tr, td, li, p, div {
font-family:helvetica, arial, tahoma, verdana;
color:000000;
font-size:12px;
}

/* BLOG HEADER */
.btext {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
}

/* DATES IN COMMENTS AREA */
.blacktext10 {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
}

/* TEXT "ABOUT ME" "FRIENDS SPACE" "FRIENDS COMMENTS" */
.orangetext15 {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
}

/* DISPLAYING "XX" OF "XX" COMMENTS */
.redtext {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
}

/* YOUR NAME */
.nametext {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
}

/* TEXT HEADERS ON LEFT SIDE */
.whitetext12 {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
font-size:12px;
font-weight:bold;
}

/* TEXT IN EXTENDED NETWORK */
.blacktext12 {
font-family:helvetica, arial, tahoma, verdana;
color:000000;
font-size:12px;
}

/* LABELS ON LEFT (GENERAL, STATUS, ETC.) */
.lightbluetext8 {
font-family:helvetica, arial, tahoma, verdana;
color:000000;
font-size:12px;
}

/* XX HAS "XX" FRIENDS */
.redbtext {
font-family:helvetica, arial, tahoma, verdana;
color:000000;
font-size:12px;
}

/* TEXT NEXT TO DEFAULT PIC */
.text {
font-family:helvetica, arial, tahoma, verdana;
color:000000;
font-size:12px;
font-weight:bold;
}

/* REMOVE BORDERS FROM HYPERLINKED IMAGES */
a img {border: none; }

/* ALL LINKS */
a:link {
font-family:helvetica, arial, tahoma, verdana;
color:000080;
text-decoration:underline;
font-size:12px;
}

a:active {
font-family:helvetica, arial, tahoma, verdana;
color:000080;
text-decoration:underline;
font-size:12px;
}

a:visited {
font-family:helvetica, arial, tahoma, verdana;
color:000080;
text-decoration:underline;
font-size:12px;
}

a:hover {
font-family:helvetica, arial, tahoma, verdana;
color: FF0000;
text-decoration:underline;
font-size:12px;
}
/* END ALL LINKS */

/* REDLINK FOR "VIEW ALL OF XX’S FRIENDS" */
a.redlink:link {
font-family:helvetica, arial, tahoma, verdana;
color:000080;
text-decoration:underline;
font-size:12px;
}

a.redlink:active {
font-family:helvetica, arial, tahoma, verdana;
color:000080;
text-decoration:underline;
font-size:12px;
}

a.redlink:visited {
font-family:helvetica, arial, tahoma, verdana;
color:333333;
text-decoration:underline;
font-size:12px;
}

a.redlink:hover {
font-family:helvetica, arial, tahoma, verdana;
color: FF0000;
text-decoration:underline;
font-size:12px;
}
/* END REDLINK FOR WITHIN FRIENDS SPACE TO VIEW ALL FRIENDS */

/* NAVIGATION BAR LINKS (HOME, BROWSE, SEARCH, ETC.) */
a.navbar:link {
font-family:helvetica, arial, tahoma, verdana;
color:BDB76B;
text-decoration:underline;
font-size:12px;
}

a.navbar:active {
font-family:helvetica, arial, tahoma, verdana;
color: BDB76B;
text-decoration:underline;
font-size:12px;
}

a.navbar:visited {
font-family:helvetica, arial, tahoma, verdana;
color: BDB76B;
text-decoration:underline;
font-size:12px;
}

a.navbar:hover {
font-family:helvetica, arial, tahoma, verdana;
color: 000000;
text-decoration:underline;
font-size:12px;
}
/* END NAVIGATION BAR LINKS (HOME, BROWSE, SEARCH, ETC.) */

/* LINKS AT BOTTOM OF PAGE (ABOUT, FAQ, ETC.) */
u {
color: BDB76B;
font-weight:normal;
}


NOTE FROM ANN: When replacing the default images, try to make sure your image is the same size as the default. If you make an image that's too big or too small and then force it to the correct size using the WIDTH and HEIGHT functions, the images usually won't be crisp.

/* REPLACE EXTENDED NETWORK WITH IMAGE (MAIN BANNER)*/
span.blacktext12 {
visibility:visible ;
background-color:transparent;
background-image:url('http://image.jpg');
background-repeat:no-repeat;
background-position:center center;
font-size:0px;
letter-spacing:-0.5px;
width:435px;
height:100px;
display:block ;
}

span.blacktext12 img {
display:none;
}

body, html {
visibility:visible ;
display:block
}
/* END REPLACE EXTENDED NETWORK WITH IMAGE */

/* REPLACE CONTACTS WITH IMAGE */
.contactTable {
width:300px!important;
height:150px!important;
padding:0px!important;
background-image:url('http://image.jpg');
background-attachment:scroll;
background-position:center center;
background-repeat:no-repeat;
background-color:transparent;
}

.contactTable table, table.contactTable td {
padding:0px;
border:0px;
background-color:transparent;
background-image:none;
}

.contactTable a img {
visibility:hidden;
border:0px;
}

.contactTable a {
display:block;
height:28px;
width:115px;
}

.contactTable .text {
font-size:1px;
}

.contactTable .text, .contactTable a, .contactTable img {
filter:none;
}

.contactTable .whitetext12 {
display:none;
}
/* END REPLACE CONTACTS WITH IMAGE */

/* REPLACE MYSPACE URL WITH IMAGE */
/* URL TEXT */
div, strong {
color:FFFFFF;
}

table table table table div strong {
display:block;
position:relative;
font-size:0px;
margin: -11px -1px -26px -1px;
background-repeat:no-repeat;
background-position: center center;
background-image:url(http://image.jpg);
height:55px;
width:300px;
color:FFFFFF;
background-color:FFFFFF;
}
/* END REPLACE MYSPACE URL WITH IMAGE */

----------------------------------

That's it. I'm done. Go forth and design well, young grasshoppers.

Web Design for Authors: The Quick and Dirty Guide, Part 2 of 3

Last week, I listed a number of common mistakes that decrease web usability. This week I touch upon tips and tricks that will improve--naturally--usability and save you time, which can be better spent writing. As much as I would love to--and I do because I'm a geek--I don't get into the nitty gritty technical details because numerous websites already provide this service.

Tips and Tricks

from Ann Bruce

• Like with any system design, sit down and write out the specs. Draw out what you want the site to look like. Don't start coding until you're completely happy with the design. This step will reduce rework.
  
  
• White space is good. Really. It's not a waste of space. Long passages of edge-to-edge text look cramped and can tire eyes. Give your text breathing room.
  
  
• Use the TITLE tags on ALL of the pages. It allows users to (1) know where they are by simply looking at the top of the browser instead of having to scan the page and (2) bookmark pages easily without having to rename the page.
  
  
• Use the ALT attributes for images. Users may have images turned off on the browser, so the ALT attribute will let them know what those large blank spots on the web page should be.
  
  
• Be consistent. Decide upon a design and apply it throughout the site. Consistent design makes it easier for users to navigate. The best way of maintaining design consistency is through the use of cascading style sheets.
  
  
• Server-side includes are your friends. They allow you to include the contents of a page in another page. Don't want to have the code for your header, footer, and menu repeated on every page, which can make updating a nightmare? Create separate pages for each and pull them into the other pages using server-side includes!
  
  
• Test, test, and test again. And test on different browsers and platforms. What works in Firefox and Opera might not work in Internet Explorer. What works on Windows might not work on a MacIntosh.
  
  
• Update--and update often! This tip doesn't save you time, but it will bring users back to your site more frequently.
  
  
• Learn from others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Edited to add:

• Write descriptive comments within the code. If other people have to edit your page, the comments will serve as a guide for them--and for you. Trust me, your memory is not as good as you think it is.
  

Helpful Sites

• Jakob Nielsen


• HTML Goodies


• Word Wide Web Consortium

Next week, I will decode a tiny part of PC World's worst website winner: MySpace.

Web Design for Authors: The Quick and Dirty Guide, Part 1 of 3

I started my own web design business when I was 13. It was fairly successful and I kept it up until I was 16, when I got really distracted by romance novels. (Damn you, Laura Kinsale! I could've been the female Bill Gates!)

I spent a few years in my late teens and early twenties working on the web teams of a number of companies whose revenues are in the billions. So, yes, I have some experience in this area.

After seeing a number of requests for web and MySpace help from authors on the mailing lists to which I belong, I decided to put together a trilogy of blog entries to help out my fellow authors who are interested in this topic.

Common Mistakes

According to Ann Bruce

Readability

• Serif fonts--the fonts with the little flourishes at the end to help the eye travel to the next word--should be used for print only. For the web, since screen resolution is not as high as print, stick to sans serif fonts because serif fonts tend to blur together, making it difficult to read. The most popular fonts for the web are Arial and Verdana. The latter was created specifically for web use.
  

• Fixed font sizes must be avoided. Users need to be able to adjust the font for comfortable reading.
  

• Justified text usually results in uneven spacing and makes reading more difficult. Yes, I know text in books are usually justified, but remember the web is an entirely different medium.
  

• Light text on a dark background is inherently less readable than dark text on a light background. That's not to say all dark backgrounds are bad, but unless the site is graphic intensive, like a photographer's site or a movie site, stick to light on dark. And never use dark on dark. Really, you want to sell reading material. If users can't read the content, such as excerpts, on your site, you're going to lose potential sales.

• Text on textured backgrounds is WORSE than light text on dark backgrounds. It's not easy for the human eye to distinguish and read text when the background is busy. Sometimes, it actually HURTS!
  

Navigation

• Drop-down menus don't allow users to see all the navigation options right away. They hide information the users are looking for and can be confusing.
  

• Non-standard menu headings confuse users. Really, users do not intuitively go to "Muse" to find a listing of available books. (This author's site was so confusing that instead of searching and buying up her back list list like I originally intended, I stopped reading her altogether.)
  

• Image maps are wrong. Do you enjoy running your mouse all over the cute picture of someone's office to find the link to a book listing page? No? Then why do you think other users would? And really, it's not intuitive to have a desk lamp link to a bio page.
  

• Users sometimes get lost in a site. Have a link to your home page on every page so they can find the starting point if they get in too deep.
  

• Underlined non-link text is deceptive. Users have been trained--yes, trained--to associate underlined text with hyperlinks. If you need to emphasize something, try bolding or italicizing it.
  

Bells and Whistles

• Big graphics = long loading times.
  

• Animated graphics. Yeah, I used animated graphics...when I was 13 and just starting out.

• Music increases the loading time and, frankly, not everyone shares your taste in music. I listen to Tool, 30 Seconds to Mars, Nine Inch Nails, etc. How many people would like to hear "The Kill" when they go to check out a romance author's site? Probably not many. But if you MUST ABSOLUTELY have music on your site because your life would not be complete without it, let the users start it. Unless you're doing a music band's website, don't ambush users.

• So, you've won award or are part of a special network. Great! And you want to share it with the world. Great, again! But do you really need to clutter up your main page with EVERY SINGLE thing you've won? I came across an author's website and the home page with its 17--yes, 17--badges made me think they were ads so I skipped over every single one of them. Have the most current award and put the rest elsewhere, like on the bio page or have a separate awards page.

Just Say No and Other Miscellanea

• Frames are evil and clumsy. Bookmarking doesn't work properly, causing problems when users try to return to the site. And if the users enter a framed page, navigation might be missing because it is located in another frame.

• Opening new windows pollute the users' screens and breaks the BACK button. Do NOT break the BACK button. Let the users decide where they want to go. If they want to go back to your site, they will...by using the BACK button.

• Horizontal scrolling. Do I really need to explain why this is wrong?

• Re-size my browser and I curse your name because I should be the only person in control of my browser.

• Front Page and other cheap HTML editors create poor code riddled with bugs that may be incompatible with different browsers. Do NOT use them. Notepad should be your best friend if you don't want to shell out $$ for a good editor.
  

• Typos are very ironic when found on an author's website. Proofread.

Agree with me? Think I'm off my rocker? Want to share something that irks you (e.g. text links that change size when the mouse rolls over them)? Please do so!

And next week: Part 2 - Tips and Tricks.