Archive for January, 2009

CSS Rollover Button

Everyone likes a good rollover button. It creates interactivity for the user (which younger website users like) but also gives an indication that the button is clickable (which is important for older and less experienced website users). There are a lot of ways of implementing a good rollover. Most people jump to Javascript to do this because they think that’s the only way. However, this requires you to write javascript that preloads your images so that there is no delay on the rollover for the first time. Well, I’ve found a much better solution using only CSS that is clean, easy to implement, won’t break, and works across all browsers. I love it so much that I use it for all of my buttons on my fulltime employer’s website.

So now you must be asking, how does this wondrous CSS miracle work? It is actually quite simple. Using only one image, you will restrict the size of your button (to only show part of the image which will be set as the background), and then use the pseudo-class :hover to shift the background-position of that image into the hovered portion. Again, this allows your full image to be preloaded so there is no delay on rollover. This has been cross-browser tested in Firefox 2 and 3, Internet Explorer 6* and 7, Safari, Opera, and Chrome, and it works perfectly. Here is an example below including the full image, the image as it will appear/work, the HTML, and the CSS.

This is the HTML:

<div class="rollover" id="exampleButtonIDHere">
  <a href="link location here">
    Put a summary of your button here. A few words will suffice, imagine this as the "alt" text for your image/link  
  </a>
</div>

This is the CSS that made the image on the left into the button on the right.

.rollover a{
   display: block;
   text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
}
#exampleButtonIDHere a{
   height: 100px; /*This height is the visible portion of the button only*/
   width: 200px; /*Put your image width here*/
   background: url('Put your image location here') no-repeat left top;
}
#exampleButtonIDHere a:hover{
   background-position: left -100px; /*This negative value should match the height above*/
}

So basically, a div, with a background image of both buttons, and a height and width restricted to the size of only one of the default button, shifts on :hover to pushing the hover portion of the image up into the viewable portion of the div, with the default portion of the image pushed out. Simple right? I know! If you are going to have a lot of these buttons, I’d suggest a whole separate CSS document for them. You can also combine the .rollover with the #exampleButtonIDHere. I keep them separate because it reduces the length of the CSS document with lots of buttons.

Don’t forget the a tag inside the div tag, and include the a as part of your CSS style declarations. Each portion of that CSS is very important! The “display: block;” allows for the image to not be pushed out of it’s own div. The “text-indent: -9999px;” pushes the alt text out of the way, the “margin: auto auto auto auto;” eliminates any cross-browser issues with default settings, the “cursor: pointer;” forces every browser to display it as a link with the mouse icon changing, and the “outline: transparent solid 0px;” forces browsers to not outline the link when being clicked. If you have any trouble implementing this, let me know, because I completely swear by this amazing CSS trick. I’d also love to hear if you’ve had successes implementing this on your own website.

*Be careful, if you use png images for your buttons (which I do because they are far superior to gifs with transparency) then IE6 won’t allow your rollover to work. Most png fixes that I have found so far disable background-position properties in CSS in IE6. Annoying, but really not the end of the world. Either live with it for whatever percentage of your users are IE6 users, or use jpgs and gifs instead. I say the pngs are worth it for the better transparency quality and lower file size.

Web Design: Working With Clients

So I’m not going to pretend that I’m an expert at freelancing, because I’m certainly not. However, I do have some experience, and I think after your first few times doing freelance work, you learn a whole lot. So I figured I’d offer up some advice to those of you who may be getting into the freelance web design or graphic design business.

1. The most important thing you can do for a freelance job is write a contract! A simple one page contract can go a long way in encouraging both you and your client to abide by specified timelines, payment dates, etc. In all likelihood you’ll never even need to threaten your client with breach of contract, but it is nice just to have the comfort. You should write you contract in a way that indicates a timeline for the project. This will encourage you to keep on top of your work, as well as make sure your client provides any materials that you need in a timely manner. It also makes sure you can’t get screwed over if they “aren’t happy” in the end (you’d be surprised how much people will try to reduce the price after you’ve already agreed on something). Clients also have the tendency to ask for something, agree on a price, and then ask for more without wanting to pay more. For these reasons specifically, ALWAYS get a contract written up and signed before you begin any work. (For sample contracts, check this out (make sure to edit this to apply to YOUR situation!), or if you’d like, shoot me an email and I can give you some advice).

2. Make sure your client is aware of their responsibilities (because even though you are the freelancer, they almost always need to provide you with something). The best way of doing this is to include deadlines for the client as well as yourself in the contract. These deadlines are often dates that you need content by to finish the website, or logo materials to work on the designs. Timeliness of your client’s deliverables will affect the timeliness of yours.

3. Ask your client for a list of websites that they like, with details of why they like them. Getting this information will help you understand the design aesthetic that your client appreciates, and give you an idea of how they might want their users to work through their website. It might also be helpful to sit down with them as they discuss this, and even ask them to visit their competitor’s websites if you are working with a business.

4. Make mock-ups before you start coding anything. When presenting mock-ups to your clients make sure to do four things. First, always make multiple options. Presenting one looks cocky and stingy. When you present multiple designs, ask for critiques (both positive and negative) on all of the design possibilities, but have them pick one. Then incorporate those critiques into the final design. Second, present your mock-ups in PDF format. PDFs are by far the most professional way to send documents. Sending Photoshop or Illustrator files is unprofessional, and they can rarely be opened by clients. Sending jpegs/gifs is lame because then your client is opening up your design in random programs. Keep it consistent with PDFs. Third, use “lorem ipsum” dummy text. It fills the page realistically without requiring actual content from your client or you. It isn’t worth wasting your time coming up with realistic content, just make it look good while you are working on the mock-ups. Fourth, it helps to present your mock-ups in a browser window skin. This will help your client imagine what the website will really look like live to their users. Looking at the design outside of a skin is like looking at a photograph outside of a frame. Sure there is information there, and sure it might look good, but it sends a much different message in the frame.

5. Figure out ahead of time how your client will be updating their content. There are many possibilities including you updating your client’s content, the client using a content management system, or if the client using Dreamweaver or plain markup after you tutor them. These three options will most likely impact how your code the website.

6. Find out what other things you can do for your client on top of their website! There is no better place for more business than the people you already do business with. Many clients just getting into the web also need help with other graphic design needs (such as logos, letter heads, business cards, etc.) or will want you to do updates on their site, or SEO work for their site. This extra work leads to extra cash. Just make sure to include it all in the contract from the start.

7. Get a feel for your client’s expected website users. If you have a good feel for the people that will be using the website you design and/or create, then you’ll be able to do an infinitely better job at creating the website.

Got any other questions? Let me know!

Dreamweaver Versus Notepad

So whenever I tell people that I write my markup in a txt editor, they immediately ask why I don’t use Dreamweaver. I think that the debate over using a prepackaged HTML/CSS/etc. editor versus a plain old text editor is a very interesting one. However, because I’m right all the time, I’ve got the answer!

It seems to me that when you are learning HTML or CSS, or even Javascript or PHP, you should really learn in a text editor like Notepad. This is how I taught myself almost everything I know today, from scratch. The text editor will offer you no guidance. It cannot check your code for missing closing tags or quote marks; it cannot validate your markup, and it won’t auto-complete anything. In my opinion, this is the best way to learn a language. It truly forces you to understand what you are doing, and encourages you to write clean code because admittedly, the process is more arduous. I find that my understanding of HTML and CSS came out of having to track down my missing tags or incorrect CSS.

Now luckily, there are some proprietary editors out there like Dreamweaver. I’ve used Dreamweaver many times, and find myself using it more and more often. Once you feel you have mastered whatever language you are learning, then you should feel comfortable moving towards one of these proprietary editors because they do have a lot of benefits. Now that you are careful in your coding, you can reap the benefits of Dreamweaver automatically closing tags, checking for errors, validating your code, and autocompleting many other things as well.

Dreamweaver is especially nice when working with multiple files (like if you are using PHP with array and master/template files). It colors different parts of your code to help your mind parse the information out more easily. It even has a split view so you can see the end result along side your code. I personally don’t like this feature because it just encourages backtracking in your already well learned coding skills.

So, my advice? Learn in Notepad, then move on to Dreamweaver!

CSS – Sticky Footer

Sticky Footer ExplanationAlmost all websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div>
    <div class="footer">
      Your footer content goes in here
    </div>
  </body>
</html>

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. "!important" is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

Update: A common problem that I’ve seen people run into when implementing this sticky footer is having trouble making your wrapper div take up a defined amount of space in the browser’s eyes. Floating (as discussed above), or the CSS display property help the browser know how big a div physically is. If the browser can’t figure that out, then the footer won’t align to the bottom correctly. Either add a float to a div immediately inside the wrapper, or add "display: inline-block;" as a style definition to the wrapper div.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.

CSS – IE6 Bugs and Hacks

In a few previous posts, I’ve mentioned the all too scary issue of cross browser compatibility. In particular, Internet Explorer seems to always come up, and even more specifically, Internet Explorer 6 (or IE6). There are dozens of bugs that arise with IE6 because of how the browser reads HTML and CSS. I’ve found the best solution when you encounter a problem with how IE6 renders your code, google it. But, to make things easier for some of you, here is a compilation of some of the most serious problems that I have encountered with IE6, and if their is a good hack or fix for it, I’ll tell you about that too.

1. Padding discrepancy:
IE6 and below calculate the width and height of sizable objects differently than other browsers. This issue is easy to demonstrate with the following example of a div’s css:

div.example{
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

Normally, this div should be rendered as actually having a width and height of 114px (100px defined width + padding-left of 5px + padding-right of 5px + border-left of 2px + border-right of 2px). Though this might seem counter-intuitive, it actually makes sense when you consider wanting to define space for copy or images, but still have padding with a background color (for example). IE6 and below makes the mistake of still defining the width and height of the div as 100 each, meaning the actual usable space inside the padding and border is now down to only 86 pixels.

There are two fixes to this. One is avoid using padding, and use margin instead (which is not included in the same way that padding and border are) when working with objects with defined width or heights. This is what I tend to do, because it doesn’t require using a hack. However, this is not always possible, especially when you are working with divs that have background colors and text inside. So, the best hack I’ve discovered so far is actually the underscore. Yeah, that’s right, _ does wonders when put immediately before a CSS style definition because every browser except IE6 ignores that line. So what you’d want to fix the above problem is the following CSS:

div.example{
   width: 100px;
   _width: 114px;
   height: 100px;
   _height: 114px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

IE6 will read the first width definition, but then correct it with the second, whereas other browsers will simply skip over the second definition, leaving you with uniform renderings for the div!

2. PNG transparency:
To bring you up to speed, PNGs are far superior to GIFs in every way but one: IE6 displays PNGs with transparency incorrectly. Obviously, there are two fixes yet again. One is avoid using PNGs with transparency and use GIFs when transparency is necessary. I personally do not want to do that because the transparency on PNGs is much better than GIFs (GIF transparency can look rasterized in comparison). The other solution is some handy dandy javascript. There are a lot of these out there. You can check out this one or just google “png fix”. The only issue with these fixes is they often cause problems with background positioning for images. Sadly, you’ll have to live with that bug if you want to fix the first bug…

3. Double margin with floated objects:
Let’s say you have a div that you float to the left for positioning. Then you give it a margin on the right and bottom to give it some space before the next object begins. IE6 has a bug where it will actually double the right margin because the object is being floated. This is incredibly annoying and 100% a bug (as opposed to a discrepancy in how the browser will render something). To fix this evil little bug, add a display: inline style definition inside the floating object. That won’t work 100% of the time, so if it doesn’t work, then use an _margin: definition with half the margin that you defined. For example:

div.example{
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   display: inline; /*This will usually do it and is much easier to apply*/
   _margin-right: 5px; /*This ALWAYS works, but is more tedious and technically not valid*/
}

As discussed above, the underscore is only read by IE6 and below but will be ignored by other browsers. This should be used when display: inline will actually mess with your layout, or if for whatever reason it does not work properly.

4. Inability to center divs using auto margins
Centering a div is easy unless you are using IE6. Normally, a div with a defined width and a left and right margin setting of “auto”, will automatically center within it’s parent element. However, IE6 doesn’t like that. To fix it, add a simple “text-align: center;” definition to your html and body tags. This of course will center all of your copy, so add a “text-align: left;” to all of your other tags that might contain copy (p, div, h1, h2, h3, a, etc).

Got other bugs? Got other questions? Got other fixes? Post a comment! Also, check out the second installment of IE6 bugs!