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.