DesignBash » Tutorials

The HTML of HTML 5

admin — Sun, 20 Nov 2011 22:12:26 +0000

As the web continues to move forward, it’s becoming more and more important to understand (and use) HTML 5 tags. Although most tags are not officially supported in Internet Explorer, there are some great JavaScript libraries out there that allow us to start using HTML5 today!

So, before getting to far into your HTML, you’ll need to drop in a small JavaScript reference to HTML5.js, which “shims” in HTML5 support for IE8 and below. It’s easy enough to do this, just use this little code snippet:

Alright, now that we’ve considered older browsers we can get started with some actual HTML5 code. Starting from the very top, we need the doctype. Thankfully, the HTML5 doctype is simple compared to the ones you’re probably familiar with. Look at the beautiful simplicity of the document below:




  
    
    HTML5 Example
  
  
    This is a perfectly valid document

Mmmmm, so much nicer than before…

What About Self Closing Tags?

One of the design choices that I really appreciate about HTML5 is the fact that you can optionally self-close tags. I plan to write my code without the self-closing slash, as I find it less noisy, but there is nothing wrong with self closing tags.

HTML5 Semantics

HTML5 gives us the ability create documents that are incredibly semantic. All the new elements were created with modern websites in mind, as you’ll see in the examples below:



  Large Title



  Home
  About
  Contact




  
    Article Title
  
  
    Another Article Title
  




  New York, New York/address>

That’s a very small example of what we can do with this new kind of markup. For a full explanation of all the new tags, checkout the official HTML5 specifications. It can be a little dry, but it’s worth slowly reading over.

Make a Favicon for your Blog – An Easy How To…

admin — Wed, 17 Mar 2010 20:27:37 +0000

In the world of modern web design, Favicons are considered one of the most important aspects of your website. Although it may only be 16px by 16px, the importance of this icon should not be underestimated. This is the type of polish that puts your site in a whole new league.

But really, they are kinda nice and having one makes your site seem just a little more professional. So today the gloves come off and we’re going to make a sweet favicon for an application I’ve been working on.

But Where do I Start?

The first step I like to take when making a favicon is to create a 16px by 16px Photoshop document – which is the standard favicon size. For this quick tutorial I already have a nice little logo created – and I’ll be using that to make my favicon.

Keep it Simple, Stupid

Because there is so little space to work with, it’s important to keep your favicon as simple as possible. My starting logo is a bit too busy to make into a favicon, plus favicons need to be square – so what I’ll probably do is lose the text and use either just the envelope edges and the heart.

My Starting Logo, I'll be losing the text and keep just the envelope and heart.

Some Playing Around

After playing around for 10-minutes in Photoshop, I quickly realized that 16-pixels is just too small to preserve the definition of the actual envelope. What I’ve ended up doing instead is using just the edges (red and blue stripes) of my envelope with a heart in the middle. A couple things I noticed as I did this:

When transforming things down in size, blacks will sometimes become a little too gray and need to be darkened (using the Photoshop burn tool).
Whatever you end up with, run the sharpen tool over it a few times. It really helps clear up any blurry edges that resulted from such a dramatic size reduction.

The final result looks something like this:

Next Up, Turn that PNG into an ICO file…

Now comes the easy part. First, save your favicon as a PNG file. PNG is better than JPG because it is a lossless format, and with such a small image, you cannot afford to lose any quality. Next, head over to this sweet favicon generator – the best tool I’ve found for converting images to the ICO favicon format. To be honest, I tried a few different sites and they all gave me problems except for this one.

Making it Display on Your Blog or Site

Once you have the ICO file on your computer, you need to rename it “favicon.ico”, anything else and it simply won’t work. Next you need to upload the icon to your public_html directory (it won’t work anywhere else). Finally, you’ll also need to include this small snippet of code in the of your HTML files:

If everything is setup properly you should now see a favicon when you refresh your site. I should mention that I did have a problem with Firefox not displaying the icon, but I think it was a caching issue because I verified it with this seositecheckup tool and everything seemed good!

Here is what it looks like using Safari

The CSS Image Button – How To Make a Rollover

admin — Mon, 18 Jan 2010 22:24:04 +0000

Today we will be talking about CSS image buttons, something that every web developer needs to know and understand. It’s really amazing how much of a difference a simple button can make on your conversion rate. In fact, I came across this comprehensive post that deals with that particular subject, check it out. This post won’t focus so much on the particulars of a high-converting button, but it will teach you how to slap together a quick CSS button that uses an image as a background.

Step 1 – Make or Find a Button

For this tutorial I’ll be using my green glossy buttons from a previous freebie post. Feel free to download the source PSD and follow along, or just make your own button style.

Step 2 – Prepare the Button

Before we really get started, it’s important to know what size we want to make our button. For this example I’ll create a button that is quite large, I’m thinking around 300px by 60px in size. So go ahead and crate a new Photoshop document with the dimensions you want.

After you’ve created the document, import my button (or yours) and scale it up so that it fills almost the entire document. If you have a little extra space on the sides it’s not the end of the world, just make sure that your button is perfectly centred on the canvas. To centre somthing perfectly you just need to:

With your button folder/layer selected, use the marquee tool (m-key) to select the entire canvas (apple-a)
Without deselecting anything, choose the Move tool (v-key) and use the alignment tools in the top panel to centre your button vertically and horizontally.

A Perfectly Centred Button

Step 3 – Create a Rollover State

Next up we need to create a rollover state. Basically, we need to double our canvas size (vertically) and duplicate our button. From the top menu select Image > Canvas Size… and double the height of your canvas (120px if you’re following my example). Once your canvas size is doubled, divide it vertically with a horizontal guide.

Now you need to duplicate your button and centre it perfectly in the top section. The top button will be what our button looks like when you rollover, for now it looks the same as the bottom.

Next we add a rollover effect. If you’re using my buttons, you can open up the layer styles of the top button and slide the inner glow up to 75%. This will give our button a subtle glow effect when we hover over it.

With your button and rollover effect ready to go, you can now “save for web.” One important thing to consider here is what your background will be like. For my example I’ve made the background transparent and saved my buttons in PNG format. This means my buttons are not supported in IE6, but you could just as easily choose a background color and ditch the transparency, making your buttons IE6 friendly.

Step 4 – CSS Sprites and Some Basic HTML

Now comes the fun part, creating the button. First, we’ll start with some markup, a simple and humble link:

 My Glossy Button

I’ve given this link a class so that I can target it easier, but other than that it’s just a plain old link. Moving on let’s do some CSS magic. The basic idea is that we hide the link text using the text-indent property and give the link a background-image that only shows the non-rollover state. On hover we simply shift the background to show hover state, avoiding any loading time that is typical of CSS/Javascript image swaps.

a.button {
display: block;
width: 300px;
height: 60px;
text-indent: -999em;
background: url(css-glossy-rollover.png) 0px -60px no-repeat;
}

a.button:hover {
background-position: 0px 0px;
}

If you’ve done everything right the button should look something like this:

My Glossy Button

Twitter Background – How to Make a Custom Background

admin — Sat, 16 Jan 2010 19:18:13 +0000

This quick tutorial will run through the basic task of creating a custom twitter background. It’s really easy to do and makes your twitter page stand out from crowd. Whether you’re a business or an individual, if you use twitter at all it’s probably worth your time to make a custom background.

Step 1 – Size it Up

Before making a background we need to think about the dimensions of the twitter site. Basically, your background will be sitting behind a container that is 763 pixels wide. Furthermore, we need to remember to keep our background image under 800k in size.

Step 2 – Prepare the Photoshop Document

With our size restrictions in mind, lets go ahead and start creating a background. First, create a new document that is 1600px by 1200px in size at 72 DPI.

Step 3 – Put in Some Guides

The first thing I do when working in Photoshop is to place my guides. I first create a shape that is exactly 763-pixels and place it on the left side of the photoshop document. Twitter will justify (stick) your background to the left of the screen while allowing the main container to remain centred relative to your browser window. This makes it hard to know where to place your background elements, but you’ll probably want to place any important background elements within 150-pixels of the left side of the canvas.

Step 4 – Create a Mind Blowing Background

This tutorial is more about the technical aspects of making a twitter background, not so much the actual design work. But when creating your background it’s important to remember that your background should fade to a solid color, otherwise people with large screens could end up seeing unattractive “cut” lines. Here are the steps that I took to make my background “work”:

Created a nice background that has a radial gradient at the top
Applied a subtile background pattern
Used a masking layer to “fade out” the right and bottom edges of my pattern/gradient layers
Made a note of the solid color at the edges of my background (#481904 in my example).

Step 5 – Setup Twitter

After logging into twitter, head over to settings/design area. You’ll need to set your background color to whatever you noted in the last step and then upload your new fancy image.

I know this background isn’t “mind blowing”, but it’s cute and simple and a good example of what you can do.

If you’re interested, feel free to download the blank background and add your own name.

Click for the full size version

Animated GIF – How to Make a Loading Bar

admin — Fri, 08 Jan 2010 18:02:22 +0000

Todays topic will deal with the wonderfully painful world of animated GIFs. Specifically, how to make animated GIFs inside of Photoshop. For this tutorial I’ll be using Photoshop CS3 on a Mac, but I suspect that CS4 probably uses almost the same process. Alright, lets get started!

Our Final Product

First off, I know that it’s easy to find semi-customizable GIF makers around the web. This being said, I think it’s important to understand how to make these yourself, as it allows for a degree of customizability that would otherwise be impossible with the online tools such as AjaxLoad (a great tool to make little AJAX loaders).

A Word of Warning

I love Photoshop with all my heart, but to be honest, creating animated GIFs can be painful and annoying. Things just don’t work the way you would expect, and if you mess things up bad enough, it means sometimes redoing the entire animation (aka make sure your history settings are set to longer than normal). What makes this worse is that changing small details can be really annoying because it seems like you need to do it across ALL your frames of animation. If anyone out there has any insight into this please let me know and I’ll update this post. Thanks

Step One: Create a Nifty Looking Loader Bar

First we’ll create a new Photoshop document with the following settings:

Next we need to create the background for the loading bar. When creating basic elements I generally try to use vector shapes whenever possible. This allows me to scale my work without losing quality and ends up saving me tons of time if I ever need to resize my document. Go ahead and create a vector rectangle shape (U key). Make sure that you’re making a shape, not a path. Your top toolbar should look like this:

Now, using the info panel for precision, make the rectangle shape exactly 260px by 30px and centre it on in the document. Another thing that’s nice about vector shapes is how easy it is to change their color. All you need to do is double click the color swatch located on the left side of the layer (in the layer panel). For this example I choose a light grey #d2d2d2. Your basic outline should look something like this (click to enlarge):

Next up we will add a subtle gradient overlay to give our loader background a little more depth. Make sure that foreground color is set to white (#ffffff) and double click on the layer (again, in the layer panel) to pop open the layer styles dialog. In the Gradient Overlay section click on the Gradient dropdown to see all our possible gradients. In this instance we want to have a white to transparent gradient, which will probably be your second gradient swatch (you did choose a white foreground, didn’t you?). We will also be adding a small inner shadow:

If everything is working out, your image should look something like this:

OK, now let’s make the actual loader. I like the glossy candy-striped look, but you can really choose anything you want. Start by duplicating the layer we’ve been working on, and make sure that it is sitting on top of our background layer. Right-click on the new layer and choose “remove layer styles” to clear out our old styles and rename the layer to something like “loading bar.” I want to have a nice viberent red loading bar, so I choose #ff2f2f as my base color. Now we are going to add some layer styles that will give our loading bar that glossy look. Just like before, make sure that you have pure white selected as your foreground color. We are adding 4 different styles: an inner shadow, an inner glow, a gradient overlay, and a pattern overlay. If you want to use the same pattern that I’m using, I’ll attach it to this tutorial at the end.

Whew, I know it’s a lot of styles, but it creates a really nice effect! At this point you should have something that looks kinda like this:

Finally, you should reselect the background layer (the grey one) and transform the shape so that it sticks out 1px by on each side. This will give our loader a little border.

Step Two – Animating the GIF in Photoshop

With our loader in vector format, we can now start the process of animation. There are quite a few ways of doing this and tons of little tricks and tips, but if you’ve never animated a GIF before I’ll try and keep this easy (there is probably a faster/more complicated way to do this).

First things first, transform your loading bar until it is only a few pixels wide:

Now comes the annoying part. First you need to open up the animation window.

By default, your animation window is probably on the wrong setting (timeline mode) and we want to do this animation frame by frame. Adobe has hidden a huge menu in the animation window, it’s located in the top right corner, just below the close button. Click on it and select “convert to frame animation“. If you’ve done this right your animation window should now look something like this:

Now we need to put in some guides so that we can animate our loading bar with precision. The number of slices you put in will correspond with the smoothness of your loading bar. The more guides you place, the more frames you’ll need, and the smoother the animation will be. It doesn’t need to be exact, but try to keep it relatively uniform. Take a look at my example:

With our guides in place we can start the actual animation process. In the animation panel you can add new frames by clicking the new frame button (bottom of the animation window, just left of the trash icon). While clicked on the second frame, duplicate the loading bar, and horizontally transform it – moving the right side up by one “notch.”

Photoshop allows you to hide and show layers within the animation timeline, and that’s really the magic that will make our loading bar move. Click back on the first frame of animation and hide the duplicated layer we just created. Now when you click between the first and second frame, you should see the loading bar get bigger and smaller. It’s good practice to name your layers after their corresponding frames, so the first (smallest) loading bar layer should be named “1st”.

Hopefully you’re getting the idea by now. Go ahead and finishing incrementing the loader until you’ve filled up the entire thing. It can be hassle to do all the frames, and you’ll find that Photoshop can be a little annoying. What seemed to work for me was to 1. add new frame, 2. hide the current loader step, 3. duplicate the hidden loader step, 4. unhide and transform the duplicated loader step… repeat, repeat, repeat… (If you do it in this order you won’t need to go back and re-hide the duplicated loader step in each animation frame). My animation took a total of 26 frames, yikes!

You can tweak the timing in the animation window – in my project each frame is set to take 0.07 seconds:

When you’re ready to export make sure you save it as a GIF and the animation should work just fine. The finished product looks quite nice: (for this example I’ve set the gif to automatically repeat, although you probably only want it to play once)

So thats it! As I mentioned before, there is probably a much easier and efficient method of doing this, but for simple animations this technique will work fine.

Feel free to download the source PSD and have a look for yourself!

CSS Textarea Style – Quick n’ Easy

admin — Wed, 06 Jan 2010 14:13:54 +0000

I’m not sure why, but so many sites seem to ignore their horrible CSS textarea style. How many times have you used a textarea that had zero padding? or even worse, it used the default “Times New Roman” font because the designer was too lazy too fix it?

Well this article is going to be a quick example of a nice textarea styled with CSS. There is no reason why this should be hard to do, as it literally takes 2 minutes to put together.

Let’s get started. First we have our textarea:

Just a couple things to note here… First off, try and make sure there are no extra spaces between the start of the textarea tag and the end. In my experiences having any space will sometimes cause the textarea to be pre-filled with spaces, which is both annoying and confusing when you’re trying to fill out a form. Second, you almost always want to give your textarea an id, you’ll need it to target with the label.

Next up some CSS styles:

#commentBox {
     display: block;
     width: 400px;
     height: 120px;
     padding: 8px;
     border: 1px solid #cccccc;
     line-height: 130%;
     font-size: 13px;
}

What we end up with is a nice standard textarea that can be customized to fit whatever theme you need. It should look like the example textarea below:

So thats it! Only 7-10 lines of CSS for a basic but nice looking textarea. From here it would be really easy to customize this with background-images, fancy borders, different colors, jQuery hover states, or whatever else you think would look nice.

How to Mail HTML Email

admin — Tue, 05 Jan 2010 21:34:42 +0000

If you’re anything like me, you may have wondered how to mail HTML emails without using a fancy service like Campaign Monitor or Mail Chimp. The truth is, it’s actually much easier than you probably think. There are just a few steps you need to follow.

Step 1 – Get Thunderbird

For this example I’ll be using Thunderbird, a great open-source mail client put together by the same people who bring you Firefox. I’m sure you can use other mail clients to mail HTML email, but I really enjoy Thunderbird so that’s what I’ve decided to use. You’ll need to get everything setup before you can actually send any HTML email, but that’s really outside the scope of this quick walkthrough.

Step 2 – Craft Your HTML Email

The next step is to craft your HTML email. This is definitely the hardest part and I would highly recommend looking through tutorial before trying anything too fancy. Sitepoint has a nice little article on the subject, or if you’re feeling lazy you can grab a pre-fab HTML email template from Campaign Monitor.

Step 3 – Upload Images to a Public Area

If you’re using any images in your HTML email, you’ll need to find a place to host them online. If you fail to do this, all your images will show up broken. Ideally you’ll want to use your own hosting, but if you need a quick fix you can probably use a service like imgur to temporarily host them for you. Once your images are all online, make sure to change all the image paths in your HTML email. The image path needs to be absolute, which means you need to put in the full URL (ie. http://www.yoursite.com/email-images/your-image.jpg).

Step 4 – Use Thunderbird to Mail the HTML Email

Create a new message just like you normally would, but leave everything blank to start. From the top menu click Insert / HTML then paste in your HTML email. (click the images to see screenshots)

Create a Blank Message

Click Insert / HTML

Paste in Your HTML Email