Computers and Technology
RainyMood.com – A design breakdown
Rainy Mood is a great, and relaxing website. What does it do? It plays a fifteen minute loop of rain OVER and OVER again. That’s it! How simple.
Why am I even bringing this page up? DESIGN!
Let’s look at this page. It has a great background that fits into the 500kb category, a simple image header that tells you exactly what the site is about, and then a BIG play button with sharing capabilities on the left and right.
If you scroll down, you’ll find a single add and some other stuff.
What I see
The beauty of the design here is simplicity. Just the background of a wet window gives the user the feel of really being there when it rains. The simple interface is amazing, because you know what? It doesn’t give you a million extra options that you wouldn’t use anyways, plus it auto-plays so that whenever you get on the sight, it’ll start up automatically.
It has a facebook fanpage on the left, great for PR, advertising, and all around marketing of the site. Facebook allowed the website to get 6000+ fans that visit the site regularly plus more as people try the site out. On the right is the “tweet” button, that will tell all your followers what a great site it is. I did that.
The big button has only one problem, its hover effect. It has an annoying greenish glow, I wish they would have soften that up and created more stylish buttons. It takes away from the all around “blue” experience.
Under the Hood
I took a look at the source code, the music is played through a javascript player made by voormedia.com and it has been hash encoded so that the ordinary users can’t just look through the code (it looks so illegible!). Of course, you can easily decode it but that’s not the point.
Next, the site uses no DIVs at all, nor a stylesheet. It’s all built into one file (except for the images) and uses tables. Now, people warn against using tables in webdesign but it does not matter too much here, it works well.
PROBLEMS: It’s not XHTML compliant. It has no true <html> header that specifies the usual stuff. It is also not SEO optimized, it has a couple of keywords, no description (other than “rainymood.com”) and it does not have really descriptive alt tags.
The Point
It’s an easily navigatable website that has one simple feature that makes me go back to it over and over again. It has simple coding, though non-compliant, and it seems to work out quite well.
Visit it!
| Print article | This entry was posted by Admin on February 9, 2010 at 00:45, and is filed under General Articles. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No comments yet.
Futuristic All-In-One
about 1 day ago - No comments
This crazy idea, much loved, by Mac Funamizu has the ability to act as a scanner, a digital camera, and an internet-connected wireless device all in one package Share and Enjoy:
kuler – Adobe’s version of Color Scheme Designer
about 7 months ago - 1 comment
kuler Kuler is a great tool for all designers. It’s really similar to the Color Scheme Designer in the aspect that it composes several colors for you to use in your design. It has several other features that make it even BETTER than CSD but there are tons of features missing too. Let’s start with
Creating a Blogging system (part 1)
about 7 months ago - 8 comments
Some time ago (a couple weeks), I created my own blogging system. No one told me how to do it and I didn’t read any tutorials on how to do it either so there were a few things I learned the hard way. As you know, Blogs are database-based, they’re all entries in a table.
Mobile Websites (tips)
about 8 months ago - 7 comments
I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone
CSS3 Lesson 3: Background Information is Essential
about 8 months ago - 4 comments
Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the
CSS Lesson 6: Intro to Divs
about 10 months ago - 5 comments
Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later. Let’s start with the <div> tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson: CSS Lesson
Coupon design
about 11 months ago - 1 comment
Remember a couple weeks ago I mentioned I would be making a website for a chiropractor? Well, here it is. I finally got my client to approve the hosting and the domain. I’m using JustHost for the hosting and I installed a preliminary wordpress template. It’s the easiest way to start up a website. I
What you can do in Illustrator with basic skills
about 11 months ago - 1 comment
I’ve been trying to come up with a great DavePCguy logo for a while. I’m not entirely sure on what to do. It will definitely have to feature the title of our website “DavePCguy: Computers and Technology” or maybe I’ll have to come up with a new title. Something to point out we’re online, and