Haseebzone template: July 2008

Monday, 28 July 2008

News ticker with horizontal scrolling using Mootools

Make your site more attractive! Add this horizontal news ticker scroller to enanche your home page.
This tutorial is another version of my News Ticker with Mootools I published yesterday. I want to reply to all that wrote me asking for information about how to implement a news ticker with horizontal scrolling. Don't panic, it's very simple to implement and reuse in your projects. The result is something like this:

Use the following links to download the full source code ready to use in your web projects or take a look at the live preview of this tutorial.

Download source code

Live Preview

Step 1: Introduction
In this tutorial I used the same structure I used in the previous post. I changed only CSS code:

...each news is contained into a <li> element and <ul> list is contained into the layer #NewsHorizontal with overflow property set to hidden and position set to relative.

Step 2: HTML code
How I said, HTML code is equal to the code I used in the previous post. First of all, add a link to mootools framework in the <head> tag of your page:

... and add this code into the tag <body>:

<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsHorizontal">
<ul id="TickerHorizontal">

<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>

</ul>
</div>
</div>

How you can see, in the code above I just added the main HTML elements. You can add your news manually adding <li> elements to the previous code or, if you use PHP (or another server side language such as ASP, Coldfusion, Js...) you can get your news dinamically from a database table. Take a look at the previous tutorial from an example using PHP.

Step 3: CSS code
Take a look at the step 3 of my previous tutorial for an explanation about CSS elements I used in this tutorial (I changed only the style).

Step 4: Javascript function to enable vertical scroller
Last step is adding this JavaScript function to enable vertical scrolling provided from Capitol Media. I didn't add the code in this page but you can find it downloading the source code of this tutorial.

You have just to copy and paste JavaScript code without changing nothing. If you want, you can set the speed and delay (in milliseconds) for news transition at the end of the function changing these parameters:

var hor = new Ticker('TickerHorizontal',{speed:1000,delay:4000, direction:'horizontal'});

It's all! Add your comment for some suggests or interesting uses of this tutorial :)

Download source code

Live Preview

Related Post
Fantastic News Ticker Newsvine-like using Mootools

Fantastic News Ticker Newsvine-like using Mootools

Do you like Newsvine News Ticker? In this tutorial a simple way to implement it on your website!
Finally, after a lot of your requests I added this tutorial which explains how to implement a News Ticker, with news vertical scrolling, using mootools. It's very simple and quick to implement in your web projects. I took inspiration from Newsvine Live panel for the CSS style and the result is something like this:

I want to say thanks to Capitol Media (a Seattle website design and online marketing company) which provided the original JavaScript function I used with mootols for this News Ticker.

Download source code

Live Preview

Step 1: Introduction to News Ticker
This is the structure I used for this News Ticker:

...each news is contained into a <li> element and <ul> list is contained into the layer #NewsVertical with overflow property set to hidden and position set to relative. Take a look at the Step 3 for CSS code.

Step 2: HTML Code
First of all add a link to mootools framework in the <head> tag of your page:

... and add this code into the tag <body>:

<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsVertical">
<ul id="TickerVertical">

<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>

</ul>
</div>
</div>

<?php
$getNews_sql = 'SELECT * FROM NEWS';
$getNews = mysql_query($getNews_sql);
?>

...then using a while statement to add news to the news ticker. PHP code can be something like this:

<?php while ($row = mysql_fetch_array($getNews)) {?>
<li>
<img src="<?php echo $row['img_link']; ?>" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="<?php echo $row['news_link']; ?>">
<?php echo $row['news_title']; ?>
</a>
</span>
<?php echo $row['news_summary']; ?>
<span class="NewsFooter">
<strong>Published <?php echo $row['news_date']; ?></strong> -
<?php echo $row['news_tot_comments']; ?> comments
</span>
</li>
<?php } ?>

...naturally this is only a basic example you have to modify to work on your site (for example limiting the number of news you want to display).

Step 3: CSS Code
Now take a look at the CSS code I used to simulate a Newswine LIVE panel:

#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}

#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}

CSS code is very simple and you can modify it without problems to adapt to your site style.

Step 4: Javascript function to enable vertical scroller
Last step is adding this JavaScript function to enable vertical scroller provided from Capitol Media. I didn't add the code in this page but you can find it downloading the source code of this tutorial.

You have just to copy and paste JavaScript code without changing nothing. If you want, you can set the speed and delay (in milliseconds) for news transition.

It's all! Now use the following links to download the source code which you can use in your project customizing CSS style and contents or to see how it works:

Download source code

Live Preview

Design bump: design for the masses

A new resource to share with the community of designers the most interesing design stories.

Design Bump is a new social media site digg-like, launched two months ago, dedicated to the design industry where you can find everything you need about graphic design, web design, digital art, typography, CSS, Web Standard and, more in general, a lot of links (user-generated) to take inspiration and new ideas for your projects.

If you have a blog about one of these topic, Desing Bump is also a great way to promote your post and drive more traffic on your site. The only thing you have to do is creating an account and submit a new link which will be added on Upcoming page. Your post will be voted from community users and after 3 votes will be dislayed on Design Bump home page and in this way your site traffic will increase quickly.

Users can customize their profiles, receive messages from the other users, trace submissions, votes and comments. Site is still growing and there are more plans for improvements/features in the near future to make Desing Bump a point of reference for your inspiration.

Subscribe Feed RSS
If you want to stay up to date with all the newest design related news/articles you can subscribe to the DesignBump RSS feed here.

Design Bump

VPS Media!: Xen VPS Hosting for designers and developers

Are you looking for a professional solution for your hosting? VPS Media! is a web hosting and web design company which offers high level "what-ever-you-want-to-do" Xen VPS Hosting services at affordable price to host you blog, all your websites and, more in general, it provides all services you can desire from a hosting company.

All VPS Media! systems are based on Xen Virtualization Technology which distinguishes itself from other Virtualization solutions by hard capping CPU and RAM Hardcore VPS systems. VPS Media! has been designed and engineered for availability and capability for Xen VPS systems all products are focused on giving designers & developers enough bandwidth and storage to satisfy their data intensive webapps.

Hosting Services
You can choose the following VPS hosting services:

- The Starter ($20 /mo)
- The Medium ($40 /mo)
- The Large ($70 /mo)
- The X Large ($140 /mo)

The Starter service (the basic plan) with over 384 MB of dedicated RAM, 15GB of RAID-10 storage and 150 GB of transfer it's a great (and absolutely professional) solutions to host your blog, all your websites, develop your own appications, run beta testing, and run full production sites. But if you need for an exceptional service, The X Large plan with 2048 MB of dedicated RAM, 80 GB of RAID-10 Storage Space and 800 GB of bandwidth is the best choice to assure you a full presence on-line.

All of VPS Media's offering is entirely a self-managed product which gives you full root access and a what-ever-you-want-to-do solution such as:

- Run you Blog and many websites
- Host you own email server
- Serve Ruby on Rails applications
- Setup you own VOIP server
- Run Hardcore Game Servers, Counter Strike, TF2 (any!)
- Run forums, and entire comunities
- Set it up as your personal Desktop
- Run MySQL or Postgres databases
- Serve your PHP web apps with great reliability

VPS Media! also provides an useful blog and community forum to be updated about news, announcements, system status, testimonials, sales, suggestions, and all kind of information you need.

Payment and Setup
You can pay using PayPal or your credit card. You may pay 3 months in advance and receive a 10% discount on your orders. Your account will be set up in a few minutes after your order, your VPS will be provisioned and you will be emailed the login information. All services include: no set up fees, no contracts, no waiting-lists, 7 day money back and straight up Hardcore VPS Hosting.

Take a look at the site:

VPS Media!

Tips to design your site for mobile devices

Some day ago my friend Lucas asked to me some suggest to design a mobile version of his blog. So, in this post I want to illustrate some simple tips about how to develop a mobile version of your site such as: choosing an URL address for your mobile site version, using a redirect script for mobile devices, designing a mobile-friendly layout using CSS and HTML and (if you are a WordPress user) using a free WordPress plugin to develop your mobile site quikly.

Choose an URL address for the mobile version of your site
First step is choosing an URL address for the mobile version of your site. You have some options, for example, you can create a folder (mobile) in the root of your site so your mobile version will be publishet at this URL: http://www.yoursite.com/mobile.

...or if you can add custom sub domains to your domain, you can use an url like this http://m.yoursite.com or http://mobile.yoursite.com which links to the folder mobile which will contain all files of your mobile site version.

Redirect script for mobile devices
The second step is creating a redirect script for mobile devices. It's not necessary, but it's useful to redirect automatically all traffic coming from mobile devices to the mobile version of your site. For more info about this topic take a look at the following links:

Redirect a mobile/PDA to a "lite homepage"

Redirecting visitors who visit a standard webpage to a mobile version

...and in particular if you are a PHP, ASP programmer take a look here:

Device detection using PHP

Device detection using ASP

If you know other interesting links, please add a comment :)

Simple page structure mobile-friendly
What is the better layout style for your mobile site version? I suggest you to use a typical one-column layout which is very popular for this kind of sites and make them more usable and readable for mobile users. YouTube, Facebook, Twitter , for example, use this layout one-column for their mobile versions:

Using this layout is a good practice but not a rule. In fact, if you surf the web using a mobile version of Internet Explorer, on Windows Mobile based devices, you can choose some layout options which the browser uses to "arrange" the content of the page to the device screen width (independently from the original page layout):

- Default, narrows content width to reduce horizontal scrolls
- One Column, forces all content to fit in a single column
- Desktop makes no change to the content (the site looks exactly how if you used a desktop version of IE)

But in general, the result can be bad if your site layout is too complex. To avoid this problem, you can think to spend a little bit of your time to design an optimized mobile version of your site using a more device-friendly one-coloumn layout how I illustrated in the following sections.

A proposal for your mobile site
If you have a blog, your mobile devices-friendly layout for your site can be something like this:

...with the following elements: header, body and footer. Header contains the site logo, body contains your post (or a summary) and footer contains other info about your site.

HTML and CSS basic code
You can use Dreamweaver or your preferred editor to develop the code. HTML code is very simple and can be something like this:

<div id="header">

</div>



<div id="page-body">

<h1><a href="post1.html">Title of your post</a></h1>
<p>A summary of your post</p>
<p class="tag">

</p>

</div>



<div id="footer">

<a href="index.html">Home</a> |
<a href="mailto:youremail@yoursite.com">Contact me</a>

</div>

...and CSS code could be something like:

/* -- Reset default style -- */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ------------ */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}

The result is something like this:

...naturally this is only a very basic proposal which you have to modify adding images, your logo, changing colors, font-family and add some lines of PHP, Coldfusion, ASP or other code to display dinamically all your post. For example with some lines of CSS code you can obtain a result like this:

You can also add a search field in the header of the page to help your readers to find quickly what they are looking for in your site. I also suggest to be simple and don't add useless element such as social network buttons (such as delicious tagometer or digg) or other widgets which use javascript. This is only a mobile version of your site and it have to be simple, usable and readable. Nothing else!

Issue with fonts using devices with Windows Mobile
If you use a mobile device with Windows Mobile, you don't have installed by default fonts like Arial, Verdana, Georgia... So to display correctly a web page you have to copy into your device some of the most used fonts in web design. Click on Explorer and copy from your PC (or also from your MAC) these fonts into the folder Windows > Fonts in your mobile device:

- Arial
- Verdana
- Georgia
- Trebouchet MS
- Times New Roman

WordPress Mobile Plugin
If you are a WordPress user, and you want develop your mobile site quickly, you can download WordPress Mobile Plugin, a free to download plug-in developed to make your blog mobile friendly.

Download Wordpress Mobile Plugin

It'all! For other suggests or to add interesting links about this topic please add a comment :)

Useful tips to enrich your HTML Forms

In the past months I already dedicated several posts about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.

1. Suggest messages
This tips it's useful to display additional info when you select a field with the cursor: then a message appears on the right of the field with a short description about the field "properties":

I used this HTML code:

<label for="email" >Email</label>
<input type="text" id="email" onFocus="javascript:toggleMsg('msg-1')" onBlur="javascript:toggleMsg('msg-1')" maxlength="20"/>
<span id="msg-1" class="msg" style="visibility:hidden;">Required to log-in</span>

<label for="psw">Password</label>
<input type="text" id="psw" onFocus="javascript:toggleMsg('msg-2')" onBlur="javascript:toggleMsg('msg-2')" maxlength="20"/>
<span id="msg-2" class="msg" style="visibility:hidden;">Use a min 6 chars long password!</span>

...and this simple JavaScript function which set the CSS visibility property for the span tag which contains the message (msg-1 and msg-2) to visible or hidden:

For the source code take a look at the wollowing link:

Download source code

If you want add some nice effect you can use a JavaScript framework such as mootools or Scriptaculous to add fade-in and fade-out effects to show/hide the form messages. Take a look at this link for a post about this topic: Improve form usability with auto messages. If you need some inspiration about how to design these kinds of messages using CSS, I suggest you to take a look at this other post I published about Css message box collection to find some ideas.

2. Autosuggest instead of list (<select> tag)
I am a big fan of autosuggest effect. It’s really simple to implement using different ways (JavaScript frameworks or, simply, some lines of hand-written code). You can think to use it instead of a <list> tag in your Form, for example in a field which users can use to insert their country:

When an user starts typing the name of his country, below the input field, it will appears a layer with some suggestions related to the inserted string. In the past month I added some post about how to implement a simple autosuggest feature using PHP and Coldfusion. I also prepared a simple PHP autosuggest component which you can reuse in your project simply changing some properties to implement this tutorial:

PHP components: Autosuggest
Search with autosuggest feature (PHP)
Search with autosuggest feature (Coldfusion)

3. Simple check during data input
A simple example could be a Twitter-like chars counter which decreases, from max chars number available in the field to zero, while you type something into the input field. In this example I set the max chars available to 20:

... in the picture aboe 20-5 is equal to max chars (20) - current string lenght (woork = 5).
I wrote this simple HTML code:

<label for="text">Write something here</label>
<input type="input" id="text" onKeyUp="javascript:countChars('counter_number')"/> <spam id="counter_number">20</spam>

...and I implemented the counter function using few lines of JavaScript code:

max_chars = 20;
counter = document.getElementById(idElement);
field = document.getElementById('text').value;
field_length = field.length;

// Calculate remaining chars
remaining_chars = max_chars-field_length;
// Update the counter on the page
counter.innerHTML = remaining_chars;
}

</script>

You can also change the counter font color to red when the counter is near to zero (for example when remain less than five chars) simply add this line of code after the remaining_chars var of the previous code:

if(remaining_chars<=5){
counter.style.color="#CC0000";
}

... and the result is:

Download source code

4. Showing hidden fields selecting a radio element option
This is anoter tips very simple to implement. You can use it to display hidden fields when an user click on a radio/check button option which requires additional information. In this example I used a radio group with two option with a request to subscribe to a mailing list:

...so when an user select "yes" it appears the following input field to add the e-mail:

HTML code is:

<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" /><label for="newsletter-2">No</label>


<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>

... and a simple JavaScript function to show/hide the hidden layer can be written in this way:

Download source code

It's all! I hope you can find all these simple tips interesting and find new inspiration for your web projects.

Templates.com contest: find the slogan and win!

Are you a creative person? Templates.com involves its customers, friends and guests into the process of slogan creation for the company.

The idea of the contest is simple: everyone is welcome to think up the slogan for our company, leave a message in comments to the blog post, and stand to win $100 in cash or credits from Templates.com.

The contest starts on July 15th 2008, and the results will be announced at the beginning of August. Each participant of this contest who has an account on Templates.com will get 4 credits, so everyone will win!

Prizes
This is the prizes list:

1st place: $100 in cash
2nd place: 100 credits from Templates.com which can be used to purchase our products
3rd place: 50 credits from Templates.com which can be used to purchase our products

About Template.com
Templates.com is a powerful resource where you can find everything you need for your creativity and inspiration such as 3D Models, Clip Art, Illustrations, Icons, and Web Templates.

For more info thake a look at the following link.

Add your slogan!

Templates.com

Design a nice pencil and handwritten style Woork like

The way you present your posts is crucial to attract more visitors on your site and to increase your traffic. Every time I add a new post on my blog I spend a little bit of time to prepare a well presented post, adding for example some explanation images with some comments using a pencil and handwritten style which my readers love! I receive daily at least two emails where some readers ask to me what is the font I use in my tutorials to simulate this effect and how I design pencil-style lines. So I decided to add a little explanation in this post.

Pencil style
Since I started this blog I used this style (pencil + handwritten), to design all images I added to my post. Now, I can say it has been a good choice because it's a little particular which my readers love and, in some way, gives a little bit of personality to my post. To design my pecil-handwritten images I use a standard Illustrator brush:

Handwritten fonts
For explanation text I use Kelly Script and for the header (or simply to obtain a nice graphic effect) I use Cutty Fruit:

For my new tag cloud in the header of my blog (and for the new logo) I used Vintage font instead of Anarchistic which I used for the header of my old site.

I prepared a zip file with these font which you can download here:

Download Woork font collection

Ok, it's all! I hope you can find this post useful to find new ideas and inspiration for your site!

Woork header restyling

A new pastel header for woork, July 2008.

Ok guys... the new header is finally on-line. I worked hard in the past days to design it and obtain a pastel effect with the right colors. I also made some general changes of my layout.
I find it's very clean and nice. What do you tink? Send me your comments!
Ciao :)

Nice login and signup panel Newsvine like using CSS

Are you looking for inspiration for a login panel? This post can help you...

Yesterday a reader of my blog, Benjamin, asked to me a suggest for an idea to design a simple login/register section for his site. So I suggested him to take inspiration form the panel used on Newsvine which is like the following:

It's a simple panel which includes both options (register and log-in) and it appears/disappears cliking on a link in the navigation bar. In this tutorial I prepared the code (html, css, javascript) which you can use in your HTML pages.

Download source code

Step 1: introduction
Before to go directly to the code, I want to illustrate the structure which I used to implement this panel: I added a navigation bar with an unordered list to add some links (in this tutorial I added just a link "Login | Register"), and a layer "login_menu" which contains register/login sections:

I separed the two sections using two layers #new-user-col (for register section) and #signup-user-col (for login section). Register button in the first section is a simple link with applyed CSS class .green-button; instead, Login button, in the secont section, is a <button> element which you can use to submit the login form.

Step 2: HTML code
Copy and paste the following HTML code in your page inside the tag <body>:

<ul>
<li>
<a href="#" onclick="showlayer('login_menu')">
Login | Register
</a></li>
</ul>
<div id="login_menu" style="display:none;">
<div id="new-user-col">New User:<br /><br />
<a href="register.html" class="green-button">Register</a>
</div>

<div id="signup-user-col">
Existing User log in below:<br /><br />
<form action="login.html" method="post">
<ul>
<li>
<label for="email">Email:</label>
<input type="text" id="email" size="18"/>
</li>
<li>
<label for="psw">Password:</label>
<input type="text" id="psw" size="18"/>
</li>
<button type="submit" class="green-button">Log-in</button>
</ul>
</form>
</div>

<div class="spacer"></div>

</div>
</div>

I set the initial status of the panel to "hide", set the CSS display property of the layer "login_menu" to "none":

Now, take a look at the CSS code...

Step 3: CSS code
Copy and paste the following CSS code in the <head> section of your page or into a separated CSS file:

/* ------------ */
/* NAV BAR */

#navbar{
background:url(pic/bg.png) repeat-x;
height:29px;
line-height:29px;
}

/*------ Reset CSS Properties ------ */
#navbar ul, #navbar li,
#navbar form,
#navbar button {
border:0; margin:0;padding:0; list-style:none;
}

#navbar li a{
margin:0 6px;
text-decoration:none;
color:#000000;
font-weight:bold;
border-bottom:dotted 1px #000000;
}

/*------ Layer with Register and Login Section ------ */
#login_menu{
background:#aaaaaa;
border:solid 1px #666666;
width:340px;
padding:10px;
color:#FFFFFF;
position:absolute;
font-weight:bold;
font-size:12px;
line-height:18px;
}
#login_menu li{
padding-bottom:6px;
text-align:right;
}
#new-user-col{
padding-right:10px;
border-right:1px #DEDEDE solid;
height:120px;
width:100px;
float:left;
line-height:12px;
}
#signup-user-col{
padding-left:20px;
height:120px;
width:200px;
float:left;
line-height:12px;
text-align:right;
}
#login_menu label{font-size:11px; font-weight:normal;}
#login_menu input{font-size:11px; color:#333333; margin-left:10px;}

/*------ Button ------ */
#login_menu button{
line-height:24px;
float:right;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
text-align:center;
cursor:pointer;
}

.green-button{
background:url(pic/button.png);
display:block;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
width:81px;
height:26px;
line-height:24px;
text-align:center;
}

/*------ Spacer ------ */
.spacer{clear:both; height:1px;}

Step 4: Javascript Function to show/hide layer
By showing/hiding the panel I used this simple Javascript function I often use in my tutorials:

In the past, some readers asked to me why I don't use a framework (such as mootools, scriptaculous, jquery) to implement this effect by showing/hiding HTML elements. I could do it, but, for simplicity, I prefer to use these few lines of javascript code which I add in an external JS file.

It's all!

Download source code

Related Content
Two CSS vertical menu with show/hide effects
Pastel color menu with dynamic submenu using CSS
Digg-like navigation bar using CSS
Flickr like horizontal menu
Perfect pagination style using CSS

Haseebzone template

Pages

Monday, 28 July 2008

News ticker with horizontal scrolling using Mootools

Sunday, 27 July 2008

Fantastic News Ticker Newsvine-like using Mootools

Thursday, 24 July 2008

Design bump: design for the masses

Wednesday, 23 July 2008

VPS Media!: Xen VPS Hosting for designers and developers

Monday, 21 July 2008

Tips to design your site for mobile devices

Thursday, 17 July 2008

Useful tips to enrich your HTML Forms

Tuesday, 15 July 2008

Templates.com contest: find the slogan and win!

Monday, 14 July 2008

Design a nice pencil and handwritten style Woork like

Saturday, 12 July 2008

Woork header restyling

Nice login and signup panel Newsvine like using CSS