Coding NINJA

Welcome to the inaugural edition of Website Smackdown.  From time to time, I will post a website that is so hideous that it must enter our Smackdown Hall of Fame.  How it works is that if I come across a website that is just too horrible not to share, I will post it along with the Smackdown rank, and will range anywhere from three to five red hands.  I will also be taking user submissions, so if you happen to come across a truly horrendous website, click the ASK link and submit the URL.

Today’s link came from a colleague of mine who was searching for carpet cleaners,  and came across Sappington’s Carpet Care. This website is atrocious.  It has broken so many cardinal web design rules, I don’t even know where to begin!  Here is just a small list of where they went terribly wrong:

• A strange barber’s pole indicating the Flash load percentage
• Annoying background music that automatically plays when site finishes loading
• Couldn’t figure out what the heck that apparatus is
• Animated backgrounds behind copy
• Font colors and copy colors are too close on the color wheel, making the site very difficult to read
• The scrollbar doesn’t function
• Redundant links (i.e. “Menu” and “To Main” link back to the home page)

This is by far one of the worst examples of a Flash-based website out there.  Does this site have any redeeming qualities?  Not a one.  This site needs to be smacked down.  Hard.

http://www.sappingtonscarpetcare.com

If you’re like me you absolutely hate the cookie-cutter Twitter widgets out there. I desperately searched high and low for an easy HTML fix so I can style my tweets how I want to.  I found several sites that offered tutorials, but some posed more questions than answers, and the authors not responding to commented issues.  I’ve compiled a very simple guide in order to get your Twitter feed loaded onto your site.

Embedding the Code

The code you need in order to embed your tweets is fairly simple. First, embed this code in between the BODY tags of your HTML:

 <ul id=”twitter_update_list”>
 <li>&nbsp;</li>
 </ul>

Next you will need to embed the javascript code.  Copy and past this code right before the </BODY> tag:

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twittercallback2&amp;count=3”></script>

Be sure to replace USERNAME with your Twitter ID. If you want to display more or less tweets, simply change the count number.

Stylizing your Tweets

Once you’ve got your Twitter feed situated where you want it, it’s time to stylize it to match your site.  Below is the CSS code I have used on my portfoilo website:

#twitter_update_list { font-size: 13px;
                               list-style: none; }
                      
#twitter_update_list li { display: block;
                                 padding-bottom: 10px; }

This particular CSS styling is very simple, and is here only as a starting point in order to get you going.  There’s really no limit to what you can do.

As we enter into the realm of CSS3, it’s sometimes hard to determine what the browser is going to do with the code and what hacks you need to put in in order to get it working across all browser platforms.  The folks over at W3C Schools have compiled a chart of what CSS3 elements are currently accepted by browsers (including the browser version, and what elements still need to be tweaked in order for them to work. 

To check out this very helpful comprehensive list, please visit http://www.w3schools.com/cssref/css3_browsersupport.asp

This is the future home of my web design blog.  I chose this platform because it suits me and what I need to do at this moment (that and WordPress and I are not currently on speaking terms). 

Please bear with me as I get this blog up and running, and as always, you can check out my personal portfolio website at http://www.ritamaloney.com (currently under redesign) or at my business website at http://www.rdwebdesign.net.