My Designer Shades Have Cookie Jars

(Mock Design Slice HTML CSS JavaScript/JQuery)

Okay the acronym MDSHCJ might be hard to remember, but My Designer Shades Have Cookie Jars is pretty darn catchy. As you can see in the title this stands for Mock Design Slice HTML CSS and JavaScript/JQuery. Let’s get started, I will go over each part of this development process so you can get an idea of how it all works and how it can help you make websites faster.

Mock Up

Mocking up, and planning a website is an important part of the creation of any kind of websites. Whether you are going to work with your client to come up with some rough sketches, or you are creating your own website. You need to sit down and figure out exactly what you want on the website. Whenever I am talking with designers who haven’t done this often I ask them to think about what the website does, what you are trying to get across, and what is the overall goal. If you can come up with a list of design elements and goals for the website creating a mock up will become extremely easy.

Start with understanding who your audience is, how often do they browse the internet, what is their skill level, what kind of website are they looking for. Then go into trying to figure out the main purposes of their visit, for example if it’s a store website the main purpose for them being there is to purchase items and pay for them. Knowing this information helps you understand what you need to make stand out and what should be placed where.

Design

Once you have created your Mock Up you are ready to move onto designing the website. Whether you use Photoshop, Fireworks, or Paint you need to start thinking about things like colors and patterns you want to use throughout your design to give it consistency and usability. Something I have found helpful when designing the website is to keep in mind you will be eventually slicing it and getting it ready for use. What this means is that staying mindful to the overall process can help you or whoever is going to slice the design to do everything in a much nicer manner. This could mean keep things in Folders, keep layers organized so that it’s easy to find elements. User rulers and slices so that the Coder can easily distinguish between the distances you used and the intentions you had. This is useful to you especially if you leave the design to marinate for a while and then come back to it, looking at all those rulers you added can remind you what you really had in mind. Also when creating the design comes the time when you need to pay attention to things like spacing, grids, colors, sizes and all the great stuff that comes with being a designer.

Slice

Slicing is one of those things that you can do a hundred different ways and you still might find ways to improve it. Personally i have found that with every next website i make it becomes easier and easier to know what exactly i will need. If you are not familiar with slicing it’s the part where you take a design and start generating the images you will need to create your website. Whether it’s a repeating background or a submit button this is where you create your jpgs, pngs, and gifs. Keep in mind that a lot of the things in your design can likely be recreating using clean and simple CSS, and even CSS3 which with the right amount of Progressive Enhancement can be very beneficial to you and your users.

HTML

The HTML is my favorite part of this process, because it is very precise and beautiful if you do it right. I first start by breaking down the components of my design. Header, footer, navigation, side column and so on. Once i have those down, i start filling them up with the smaller elements like Unordered Lists and Paragraphs with Lorem Ipsum. Something i like to do is use ID’s for the bigger elements like the header footer and main part of the website, and use classes within for the elements that i will be reusing. Use indentation of course to keep your code organized and easy to work with, and add little pretty HTML comments when you close a DIV or a UL, this will save you a lot of headaches when you come back to add/edit things in your website.

CSS

I find CSS to be an art, just like when a painter sits down and starts adding color to his painting. With CSS i like to start by styling the Main elements as mentioned above, i keep an area in my stylesheet just for those big elements that go on every page. Then once i start adding page specific styling i create a new section with a CSS comment to distinguish between my pages. Now don’t worry too much about whether an element will be used across the board or in a single page, i have had to take elements out of the specific page code into the general code. With css i also like to use indentation to specify that the styling for the element belongs to the element above it.

JavaScript/jQuery

JavaScript and jQuery/MooTools/YUI and so on should be the last thing you add to your website. They are the interactive part of your website, they are what the user can do with the page. If you kept in mind that you will be using JavaScript for your HTML elements when you were writing the code for your page this should be a breeze as all the elements have the correct classes and ID’s for you to easily manipulate and have your final interactive website ready.

Conclusion

The process i have described might not be what works best for you, but if you can understand why i follow those steps, and why this works for me i think you will have a much better idea as to how to optimize your process. For example once you write your HTML you can use the CSS GENERATOR and get the CSS corresponding to your code. Also having the images once you are writing the HTML and the CSS helps with sizing things correctly, and especially with Dreamweaver you can always click browse when you are adding an img src or a css background and directly select the correct image!  Now go out and make a few websites, have fun and happy coding.

So we begin with our div. Let’s call it div_center.

<div class="div_center">
 Our text can go in here.
</div><!--div_center-->

The only little problem with the pure CSS method is that we need to know the exact width of the element and a good estimation of the height. So we will need to set a width and a height, then add our padding and add those together. You can set the height to Auto and then just not fully center it Vertically. But here is the actual trick. You position the element fixed, then you add a position left of 50% and a position top of 50%. This doesn’t exactly do it just yet, now we take the width divide it by two and the resulting number we use as a negative margin left. Same thing for the height, divide and use as negative margin top. Here is a css example:

.div_center {
	width:490px;
	height:390px;
	padding:5px;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-200px;
}
/* alternatively */
.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:35%;
	margin-left:-250px;
}
/* or if you have a better idea of the height,
assuming the elements height will be around 500px,
you want to use a higher value */

.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:5%;
	margin-left:-250px;
	margin-top:-250px;
}

So now that you know how you can easily do this with pure CSS, it’s even easier with jQuery.

Since you have already grasped the concept from above, here is the jquery:

$(".center_me").css({'margin-top':$(this).height()/-2, 'margin-left':$(this).width()/-2,"position":"fixed","left":"50%","top":"50%"});

Now all you have to worry about is making your element pretty, jquery will take care of everything else!

Hope this helps!

I was looking for a plugin that allows me to use the awesome Placeholder attribute inside my input fields so that on focus the value is replaced. I found a couple okay ones but none of them applied a placeholder class that can gray out my text so I decided to write one myself. I came up with this awesome little addition to your jQuery plugin arsenal.

Here is how to use it:

$("input:text").placeholder();

It is as easy as that. If you want your own custom class just do this:

$("input:text").placeholder({css_class: "anyclassyouwant"});

Just remember not to use the dot and just use the name of the class. By default it uses class placeholder so you can just add this to your CSS:

.placeholder {color:#888;  font-style:italic;}

How easy was that, now head on over and download this script:

Download Plugin (latest release)

The plugin is under the MIT license agreement. In short you are free to use it for whatever you like and redistribute as you see fit! However we do highly appreciate mentioning of our blog.

In the first part of this series we discussed the ways we can help our users to use our forms, today we are going to review how to create forms from the perspective of a Web Developer. I would like to state that this is only one way to accomplish this and there are alternative ways.

Preface

Using tables is something I do not like to do unless i am truly forced to by the circumstances (like tabular data). Tables is something you definitely can do without tables, all you need is some good clean html and css. Let’s create a clean and simple form using pure html and css. And discuss other possible techniques.

Semantic Form Type 1

First let us lay down the HTML ground work on which we can start building our form.

<form class="form" >
    <fieldset>
		<legend>Semantic Form</legend>
        <div>
        	<label>First Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Last Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Address:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Phone:</label>
            <input type="text" class="field phone" />
        </div>
        <div>
        	<input type="submit" value="submit" />
        </div>
    </fieldset>
</form>

In the code above you will notice I use div’s to horizontally separate the fields. You can use unordered/ordered lists, paragraphs or any other block element.

Now let’s style the simple form.

.form { width:250px; margin:50px auto;} /* set a width for our form, and center it with some spacing above */
.form fieldset {border-top:1px solid #ccc;} /* just for styling the top of the fieldset */
.form fieldset legend {font-size:1.2em; font-weight:600; padding:0px 5px 0px 0px;} /* add some styling to form header */
.form div {clear:both; padding:10px 0px;} /*clear the floated label and input */
.form label {display:block; float:left; width:46%;} /* position the labels to the left */
.form input.field {float:left; margin-left:3%; width:47%;} /* position the input */

Keep in mind the above code has had a Eric Meyer reset which removed all margins paddings and borders. As you can see i have added a comment for what each line does in the CSS.

That was easy, simple clean form that just works!

The Other Possible Methods

The method above is one of many possible solutions. I have seen people use Unordered Lists instead of my div’s and others use paragraphs they are all block level elements so they will work just fine. In my demo you will notice the labels float to the left of our input fields, you can also create forms with the text being above each field, all you have to do is remove the float and display the label block! Vuala you have a whole new style in 2 steps!

You can also easily create this into a two column form by simply adding a new fieldset that has its own set width and is floated, it’s as simple as that!

What’s Next

In our next installment of Web Forms we will talk about validation, the good, the bad and the ugly! Stay tuned for a series that will truly talk about every single aspects of Web Forms!

Series Introduction

If you want to buy something from the internet, or to post a comment on some blog, or buy an airplane ticket, or pay for electricity, or be a part of some social network and so on there is one thing standing in your way, a web form.

How many times have you simply given up from something because of that web form? Poor explanations, enormous data you need to fill out (and a part of them they won’t even use), bad organization and many other things that make you give up.

In this series of articles we go over all the aspects of creating captivating forms that will help your users.

Introduction

In this part of the series we’re going to talk about different types of assisting our users in filling out our form, about the pros and cons, and check out how some of the major websites deal with it, and where they might be making mistakes.

Let’s start.

Why to help?

A form is the only thing standing between you and the potential customer, user, business partner and everybody trying to interact with you. You both want the form to be completed but not everyone completes it, and in most cases that happens because of a poorly created form. A part of a poor form is bad user assistance, improving it will improve the completion rate of your form and that’s what you need.

When to help?

Sometimes we don’t really understand what or why we need to fill in some data, that’s where user assistance jumps in to help us resolve our doubts.

• When you need something filled in a specific format (like phone numbers and dates)
• When you need some data unfamiliar to many people (like credit card security number, SWIFT, IBAN)
• When you are asking for private data (like credit card – let them know it’s safe, email – let them know it won’t be used for spamming)
• When not all the fields are required (simply put the * sign on required fields, it works perfect and users are use to it)
• When you are asking for specific information that you need but the user might not be informed about (asking about feedback on a certain subject)

At the end it all depends on the forms purpose, and a good way to know what to do is to check how others did it, but don’t copy it, try to use it and you will know what you don’t like about the assistance in their forms, what you think they forgot or added without a need for it and you will get the idea of what assistance your form needs.

After you make it, get some people of different age to test it (friends, family) and they can help you decide when you really need to help your users.

Where and How?

Well the possibilities are enourmous. You can make the help user activated, on field hover activated, on focus activated, inline, inside a modal window, bellow a field,  after a field, bellow a label, on top of a field, before the form after the form (those 2 aren’t suggested if you are referring to a specific field) and many more ways.

Where depends on the design, the amount of help text, how much space do we have for the help, will it interfere with the rest of the form and so on.

How really depends on what kind of help are you showing. Is it a rule like “minimum 5 characters” or a tip like “use _ – . for a more secure password” or maybe a bigger explanation like why we need some information like facebook explains why they need our birthday when we register.

Let’s take a look at some major websites to see how and try to see why they do it the way they do.

GMAIL – Always visible help

Gmail did a great job explaining fields that might not be very clear without them. For example this “recovery email” field, i don’t think anybody would know what’s it for without the description.

When to use this type?

• For fields that most users won’t know what they are for (like the recovery password example)
• For fields where the data must be in a special format or have some rules like min characters, characters type and such.

When using this type of assistance the best practice is to make the text color lighter than the rest of the form content text (as you can see in the picture above, it makes it easy for our users to focus on the rest of the content).

YAHOO – Help activated on field focus

In my opinion the “Capitalization…” text should have been visible all the time, because it points out a rule we must obey. But thinking about it a bit more made me think they made it because it would attract more attention if it suddenly appears than it would if it was visible all the time. What do you think?

Let’s focus on the second help (for the password strength). It’s only a tip how to make our password more secure and not a rule. After the field becomes inactive that help disappears.

When to use this type?

• When you want to give your user a tip or suggestion
• When you want to ensure that the help captivates the users attention

FACEBOOK – User activated help

User activated + modal window centered on the page

When to use it?

• For bigger help texts and explanations
• For embedding visual effects like the back of a Credit Card for the CVV numver

We’ve seen the good, now let us look at the the bad and the ugly.

The screenshot above is taken from a very valuable website that offers their users to buy/sell ad spots, and this screenshot is taken from a page for depositing money.

1^st issue – In which format should I fill my credit card number?

2^nd issue – What is a security code? Oh, there is a link to find out. Clicking the “What’s this?” link expecting a new window or a JavaScript tooltip to popup but I’m taken back to the index page. I lost the data I entered and I need to find that page again. Screw this I’m not depositing.

3^rd issue – Do I need to fill in all those fields? Why didn’t you simply put the * on required fields? Are they all required? You’re not helping me in making you money.

As I mentioned, that page is for depositing money, and I bet they lost a lot of money because they failed to explain to the user those 3 things. Fixing them would take less than 10 mins and the completion rate of this specific form would increase resulting it the income increase too.

Wrap Up

So we have seen some great examples of websites that just get it right, and an example of where we can find room to improve. We hope if you gather one thing from these series that is forms need to be simple, so simple that your cat can do it. Making your forms simpler will result in more successful customers and clients.

<script src="http://www.fzilla.com/f/jquery"></script>
<script>
$(document).ready(function(){
	function placeholder(){
		$("input[type=text]").each(function(){
			var phvalue = $(this).attr("placeholder");
			$(this).val(phvalue);
		});
	}
	placeholder();
	$("input[type=text]").focusin(function(){
		var phvalue = $(this).attr("placeholder");
		if (phvalue == $(this).val()) {
		$(this).val("");
		}
	});
	$("input[type=text]").focusout(function(){
		var phvalue = $(this).attr("placeholder");
		if ($(this).val() == "") {
			$(this).val(phvalue);
		}
	});
});
</script>

<input type="text" name="search" class="search_field" placeholder="search here..." />

So as you can see this is very straight forward, add a value inside the placeholder attribute and have jquery go through all the inputs on the page and add that value inside. On focus remove the value and vuala! And if the field is left blank we populate with place holder again!

In professional templates for blogs especially you will see an icon with a large A and a small A, by clicking on each you can either increase or decrease the font size of the page. What if you took that a step further and increased or decreased the size of the whole website. Today I will go over a concept I have not seen before that can make your website very unique. This will more or less imitate the browser zoom you may be accustomed to.

First we will start with a very simple html layout.

<body>
<div class="header">
	<h1>Lorem Design</h1>
</div><!--header-->
<div class="left_col">
	<p> Lorem...ros. </p>
</div><!--left_col-->
<div class="right_col">
	<p> Ut...cus. </p>
	<p> Integer ...ec. </p>
</div><!--right_col-->
</body>

This layout is very traditional, header and two columns. Now that we have the layout let’s add the styling.

body {
	font-size:16px;
}
.header { width:50.63em; /* 810px */}
.header h1 {font-size:1.75em;  /* 28px */}
.left_col {
	width:18.75em; /* 300px  */
	float:left;
	margin-right:1.25em; /* 20px */
}
.left_col p {
	font-size:1em;  /* 16px */
}
.right_col {
	width:31.25em; /* 500px */
	float:left;
}
.right_col p {
	font-size:1.19em; /* 19px */
}

As you can see I have used EM for every single size on the page, from width’s and margins to font-size. If you haven’t done this before here is what you need to know. You should always set a custom body font-size, once you set that font size you use it to find the exact width of the rest of the elements. Here is a nice online calculator that will help you with this. Once you have used EM’s for everything our job becomes so easy a 1st grader can do it .

Now for the jQuery part. Let’s add the necessary controls in our webpage, something like this:

<div class="controls"><a class="up">up</a> | <a class="down"></a></div><!--controls-->

And now we need the jQuery to incrementally increase and decrease the Layout.

$(document).ready(function(){
	var size = 16;
	$(".controls .up").click(function(){
		size++;
		$("body").animate({fontSize: size});
	});
	$(".controls .down").click(function(){
		size--;
		$("body").animate({fontSize: size});
	});
});

So the jQuery sets a variable with the default font-size. And then on click of either control it will increase and decrease the size respectively.

Here is a working demo of the concept.

You might not be aware of the enavu network and the constantly changing set of tools we offer to web developers completely free but we just launched ena.vu which will shorten any link you want. The service is easy and really quick with the ability to add a bookmarklet to your favorites and instantly shorten your links.

Another announcement is that we are working hard to bring you a very easy to use File Hosting which will allow you to store your css/javascript/images and more in one easy to manage place. So keep you eye out for any updates on fzilla.com.

And finally we wanted to mention that we are always looking for people who are interested in helping the web development community. You can write articles, work on our numerous projects, or contribute in a plethora of ways.

The Enavu Team

Sprites might seem like a complicated subject, and i won’t lie to you they can get confusing at times especially if you decide to make them complicated. Today i wanted to go over the simplest and fastest method there is.

Let’s define a sprite so it’s easier to understand the method. Sprites are a way for you to use a single image and display it in multiple ways. Here is a little graphic to illustrate it.

As you can see we have an element like an anchor. We usually use an anchor because on hover (cross-browser) we can switch the background position to top and have the bottom of our sprite show up, this usually contains a hover effect of a link. Let’s look at some sample code.

So here is the information you need to know from the styling above. We make the anchor display block so that we can set a custom width and height, otherwise our width and height won’t apply. We set our background with position top center and make it not repeat although that should be unnecessary since we are specifying the exact height and width of our sprite. Then the trick is adding the hover effect that changes only the background position to the bottom.

Let me know if you have any favorite websites with beautiful elements in the comments!