For the past day I have been laying the ground-work for a little side-project of mine. My eventual goal is to offer the application for free, but in the mean time I thought I’d go through a bit of a tutorial outlining how I came up with the prototype for SWIM. This probably won’t be a project that you will want to include on a large website as the constant back-end polls will probably take their toll on your server. However, as an informative piece outlining complex application development with a multitude of programming languages SWIM will be right at home.

The Vision
I wanted to create a completely self contained Website IM system. Apart from an installation file that would handle the database setup, I wanted developers to be able to copy a few lines of code into their current websites and have the client up and running. It would consist of a little bar along the bottom of the screen that would allow the user to easily keep track of their contacts as well as any open conversations. From the beginning the idea was the integration with a website had to be simple. If I ever felt the need to include it in a website I was developing, I didn’t want the hassle of actually integrating it. I wanted to be able to say something like swim_ui(); and have it take care of everything else. I knew it wouldn’t be THAT simple, but simplicity was something I was aiming for. Here are a few examples of what I expected the app to look like.

Refining
Once I had established a rough look to the IM client I took a moment to re-evaluate the different elements involved. It is something, that as a designer, I find essential to do. I had to make absolutely sure that every element in the prototype was required 100%. If it could do without, it was useless and removed. The reason was simple. I didn’t want a massive file included with every page. It would become a problem as websites grew.  Even the use of images was something I didn’t want to get in to. As I said before, my motto with this was “If it could do without, it was useless” and there was no room for useless elements.

The Static Mockup
This is another step that I absolutely have to go through. Before I start adding the dynamic PHP and even Javascript, I build a completely static version of what I want to eventually build. For one thing it lets me re-evaluate everything in the design, and when deadlines start coming up, it’s easy to find things that will give you problems later on. As well, actually having a finished product really boosts your morale and makes you want to work more. The static mockup was very simple. Even though I eliminated the chat taskbar, you’ll notice (or maybe not, since the screenshot is rather hard to read) I left the chat taskbar text in place. This is because that even though we won’t have a physical task bar, it will still exist in our code. This lets us position things properly.

<div class="im-bar">
	<span class="task" id="'user-id'">
		<div class="convo">
			<img src="/icon/cancel.png" id="close-win" alt="Cancel">
			<span class="system">You have entered a conversation with Name</span>
			<textarea name="message" id="message"></textarea>
		</div>
		<div class="win" name="Name">Name</div>
	</span>
	<div class="more">
		<div class="user-info">
			Angelo R. 
			<span><img src="/icon/bullet_green.png" alt="Online" id="status"></span>
		</div>
		<div class="contacts">
			<span id="cname1" name="Name">
				<img src="/icon/user.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname2" name="Name 2">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 2</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname3" name="Name 3">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 3</li>
					<li class="status">Status</li>
				</ul>
			</span>
		</div>
		<div class="bottom-bar">
			<img src="/icon/add.png" id="add" alt="Add User">
			<a href="#">Settings</a>
		</div>
	</div>
	<div class="info">
		<img src="/icon/bullet_green.png" alt="Online" align="top">Online 
		<span><img src="/icon/bullet_arrow_up.png" alt="More"></span>
	</div>
</div>

As you can see I’ve tried to keep the code as self explanatory as possible. It’s very simple HTML without the use of Tables or any inline CSS. This was to ensure that even skinning the SWIM system would be as simple as editing a single file.

The CSS for this file is where things will get a lot more confusing. Because of the fact that this will be included in your website, I had to ensure that my css wouldn’t overwrite any of your css. So everything is explicitly stated. When I wanted to style the .info class, I pointed to it through it’s full “path” of .im-bar .info This was to ensure that only that element would get skinned. The CSS is a little advanced, and has an added line for webkit based browers that the gecko ones won’t see. This is also only going to look exactly as planned in those browsers. Sorry Trident users, I’ll be updating this code once I sort out a few more bugs.

.im-bar{
	position: absolute; 
	right: 20px; 
	bottom: 10px; 
	z-index: 100;
	font-family: "Arial", sans-serif;
	font-size: 0.8em;
	color: #555;
}	
.im-bar a{
	color: #333;
	font-weight: bold; 
	text-decoration: none;
}
	.im-bar a:hover{
	text-decoration: underline;
}
.im-bar .info, .im-bar .win{
	display: inline;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 1px solid #EFEFEF;
	width: 100px;
	padding: 5px 10px 5px 5px;
	background-color: #F0F0F0;
	margin: 0px 6px;
	cursor: default;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .win{
	width: reset;
}	
.im-bar .info span{
	float: right;
}
.im-bar .info:hover, .im-bar .win:hover{
	background-color: #E7E7E7;
}
.im-bar .more{
	display: none; 
	border: 1px solid #EFEFEF;
	width: 200px;
	height: 350px;
	position: absolute; 
	right: 0px;
	bottom: 30px;
	background-color: #F0F0F0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 10px;
	padding: 0px;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .more .contacts{
	background-color: #FFF;
	height: 86%;
	width: 100%;
}
.im-bar .more .contacts span{
	display: block; 
	margin: 0px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #F0F0F0;
	text-align: left;
}
.im-bar .more .contacts span:hover{
	background-color: #FAFAFA;
}
.im-bar .more .contacts span img{
	float: right;
	padding: 3px; 
	width: 40px; 
	height: 40px;
	border: 1px solid #F0F0F0;
	margin: 2px;
}
.im-bar .more .contacts span ul{
	padding: 10px;
	margin: 0px;
}
.im-bar .more .contacts span ul li{
	list-style: none;
	cursor: default;
}
.im-bar .more .contacts span ul li.status{
	color: #CCC; 
	font-style: italic;
}
.im-bar .more .user-info,.im-bar .more .bottom-bar{
	padding: 4px;
}
.im-bar .more .user-info span,.im-bar .more .bottom-bar a{
	float: right;
}
.im-bar .task .convo{
	display: none; 
	width: 250px;
	height: 300px;
	position: absolute; 
	bottom: 30px; 
	right: 0px;
	display: block;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 2px solid #EFEFEF;
	background-color: #FFF;
	padding: 10px;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .task .convo #close-win{
	position: relative; 
	bottom: 20px; 
	left: 250px;
	cursor: pointer;
}
.im-bar .task .convo #message{
	width: 100%;
	font-family: "Arial", sans-serif;
	font-size: 1em;
	color: #555;
	height: 60px;
}
.im-bar .system{
	color: #CCC; 
	font-style: italic;
	height: 75%;
	display: block;
}
.im-bar .task .convo .text{
	font-style: normal;
	height: 75%;
	display: block;
	overflow: auto;
}
.im-bar .task .convo .text p{
	padding: 0px;
	margin: 2px;
}

You’ll notice that everything in the stylesheet is actually really simple. Other than a few pieces such as the overflow attribute in the .im-bar .task .convo .text selector which just adds a scrollbar to the chat window if necessary. The z-indexes are also used to place windows on top of each other (obviously) but keep things in the high 90’s. This is so that incase you have an z-indexed elements on your website, this will hopefully not interfere.

Finally, here’s a screenshot of what our HTML mockup looks like. Stay tuned for the next part in which we add jQuery into the mix to really get our Prototype up and running!

SWIM - Minimized Convo Windows with Open Chat Window

SWIM - Open conversation window