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!

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!

<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.

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.

Thanks to the following two websites for the amazing templates:

http://freepsdtheme.com/

http://www.templateworld.com/

So why is google releasing a library of web fonts, well it’s quite simple actually. Google promotes the newest web technologies because they are a web company. I am assuming not too far from now they will have a wide selection of fonts to use in Google Docs (the Microsoft Word web alternative). Google is a web company and they strive on progressing the web. Our sources in the Google IO conference this year told us that google is working on a Flash alternative that will build HTML5 animations. Very excited to see how that turns out.

As I wrote in my Web Fonts 2.0 article there are some light down sides to using @font-face. But with googles delivery speed it’s a good bet you won’t find yourself in too much hassle.

Personally I see the use of certain fonts in our designs as a Web 2.0 element. When Web 2.0 started there was a big burst of people using sIFR to display any font on their website with Flash. But flash isn’t an idea solution so things like Cufon came out that allowed you to display those fonts with JavaScript image replacement techniques.

Today we have the most amazing technique that works close to perfectly, and that is the @font-face CSS property that is supported by 97% of browsers. However this wasn’t always the case as this technique requires you to use a few different font formats at the same time for it to work on all browsers. This can become a rather unpleasant task but we have tools like TypeKit that give us everything that is necessary to do it.

I had the pleasure of meeting the Founder of TypeKit and the Owner of FontShop.com and after a discussion about web fonts I was very excited to write an article about fonts and how they are transforming the way we create website.

So let’s address the 2 known issues with using @font-face fonts. First of all the process of applying these fonts can cause a problem if the font takes time to load. The problem can play out in two ways, either the browser will use a fallback font until the font is loaded and then it will jump the new font in place after its downloaded, this can make the page jump around a little bit. The second thing is you can make the page wait until the font is loaded. With today’s fast speed internet and TypeKit’s special techniques in place you will probably never have to worry about either.

Never used @font-face before and are worried that it’s complicated, go to TypeKit register for an account and follow the steps, you will be using @font-face like a pro in minutes!

If you love TypeKit then you will enjoy FontSquirrel as well.

I have said this before and i feel i should keep repeating it, you should always spend time to learn more about your visitors. This means what browser they use, what is their resolution, and even what operating system they are using. Well there are quite a few more things to be known of your visitors behavior but for today’s article we will try and go over the things that matter when evaluating whether to use CSS or a sliced image.

For this blog i have used various CSS3 techniques instead of spending loads of time on slicing my initial photoshop design, why was I able to do this? Well simply because a web development blog has 60% Firefox (95% of those use the newest 3.6.x version) then another 20% goes to chrome, and the rest is distributed to IE, Safari, and of course Opera. What this means is that 90% of our users will see the website exactly as intended, and the rest will see a very slightly different version which looks great. The other great benefit to this is much faster load times, less graphics is always a benefit to a high traffic web development blog, or to really any website with 100k+ page views. Here is the difference between IE and Firefox:

The tricky part comes when you have to be careful and distinguish functionality with appearance. You should never ignore functionality when using advanced CSS techniques to accomplish certain effects. As a web developer you already know to test your websites in most modern browsers, personally i test on IE7/IE8, Firefox, Chrome, and Opera. But never let functionality struggle because you wanted to save time slicing your design. Things like Rounded Corners, Drop Shadows, and other styling techniques are usually a safe bet of things being only different visually. Text-Shadow can cause text to appear harder to read when the browser does not support text-shadows.

Using HTML5 is awesome, it allows you to create websites with a lot of bells and whistles with little to no effort. However things like HTML5 validation do not work in all browsers so you need to make sure you have a back-up. I have created an HTML5 CSS3 framework that has a lot of cool features that are okay to use with all browsers. Check it out 52framework.

In conclusion I strongly suggest and support web developers to try using the new technologies that make our lives easier as long as you have made sure that it does not cripple your websites.

Checkout the following websites to help you use these amazing technologies:

52framework.com
css3generator.com
modernizr.com