DevHints

Archive for the ‘Design’ Category

It’s 2am and I’m up working on a website. It’s fairly typical. And while most people would doubt my productivity at such an hour given that I’m awake all day, I have proof of productivity (and creativity).

I was playing with a layout revision of one of my websites when I got to doing the links. Typically I do something plain-jane like this:

a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #333; text-decoration: underline; }

That makes a neat little link that goes from plain black to a dark gray with an underline when hovered over. Nothing special. Of course, I mix in all sorts of fun colors and I do background color changes too. Tonight was different though.

I decided I wanted to do something to help visitors keep track of where they’d been by styling “visited” links differently. After seeing a few people (most notably Mike Davidson) do the little check boxes, I figured it wasn’t a half bad idea. Mike uses the :after pseudo selector to add the checkbox to visited links. Not a bad idea, but it won’t work in IE and it makes changing it on hover difficult and choppy. I had a better idea.

I used the background property. I had just used the same method for my list bullets, so it was still fresh in my mind. Simplified, we had the following:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }

I used 60% because it achieved better alignment in my situation than center and it scales better than pixels. Now my little visited links had neat little checkboxes next to them. Awesome. But now my hover style didn’t look quite right since I was changing the background color on hover. This is when I started thinking…what if I could tell the browser to change the background on hover over a visited link? Well, it looks like you can:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
a:visited:hover { background-image: url(‘images/check_hover.png’); }

I actually originally had the hover and visited pseudo-selectors swapped the other way around (:hover:visited) but IE didn’t want to cooperate, so I got to thinking what I was really telling it (apply this to anchor tags when they are being hovered over that are visited) and how it made more sense if I flipped it (apply this to anchor tags that have been visited when they are being hovered over). Sure enough, it worked like a charm.

NOTE: While this method does allow for more customization and it works with IE, Mike’s method is better from an accessibility standpoint since it doesn’t use an image.

Advertisements

There’s a rather unknown property in CSS called text-transform. It allows you to force all the text for a particular element to be transformed to UPPERCASE, Proper Case, or lowercase.

strong {
text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */
}

It’s quite useful for making your links stand out, or making sure that all the links in your menu bar are uppercase. You can also use it in association with :hover, :active, :visited, and :link to make your links go all uppercase when hovered over.

Did I mention that you can also use this to force text to become Proper Case (so the first letter in each word is capitalized)? That means if you aren’t going to need to store the information differently, you don’t need to bother using a server side language to change text to proper case, you can just set your CSS up right!

Some other cool uses for this include making all the text entered in a CAPTCHA input text field uppercase so the user doesn’t have any question as to whether the CAPTCHA is case sensitive or not (note, this will only affect the display, so data sent to your scripts might not have caps), and showing the active link as uppercase, instead of changing the color or underlining it!

Centering your tables and divs can be confusing since not all browsers play nice with applying the parent element’s text-align attribute to block-level elements. No worries though, there is a quick and easy way to center any block level element.

margin: 5px auto;

As you should already know, when you set margin or padding you can alter all the sides individually like this:

attribute: top left bottom right;
attribute: topandbottom sides;
attribute: top sides bottom;

So in the example above, we set the margin for the top and bottom to 5px and the sides to auto. When you set the sides to auto, the browser will center it in it’s parent element because it makes the margins the same on each side. You could also set the top and bottom separately like this:

margin: 5px auto 10px;

So there you have it: the magic way of centering block-level elements in CSS!

If you’ve ever wondered how you could get a link to be one color and the underline to be another color, you’ve come to the right place. While this isn’t supported in CSS (yet, maybe one day), we can do something that will appear to do the same thing.

Here’s the CSS:

a {
color: #F00;
border-bottom: 1px Solid #00F;
text-decoration: none;
}

It’s extremely simple. Since all elements have a margin and padding, and they are all defined by boxes, we can add a border to one side of the element: the bottom. You can change the element to support your action selectors (hover, visited, link, active) and setup more complex things…like having only the underline color change on hover.

To change the underline color on hover only…

a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}

a:hover {
border-bottom-color: green;
}

You could also set the initial border to transparent instead of a color, then give it a color on hover and have the same underline-on-hover behavior as using text-decoration underlines, but with the additional flexibility of using the bottom border without the text shifting on hover.

If you’re a freelancer and you’ve ever had problems obtaining or retaining clients, or if you’re new to web design and you’re considering freelancing, this article is for you. I’m going to give you some great tips on how to get new clients and keep them coming back for more.

Obtaining new clients can be a challenge. Some freelancers do fine advertising their services on relevant websites and rely on potential clients contacting them. Others are more aggressive and like to go out and find clients instead of waiting for them to come to you. Either way, you still have to convince the client that you are the person they want working for them.

How can you do this? Be available. Its always easier to see someone who is doing it wrong and make sure you don’t do what they are doing, and that’s how I learned. Most Indian programmers have a language barrier, considerable time zone difference, and high-international rates discouraging you from calling them, so we should make sure we speak with impeccable grammar, punctuality, and spelling. We should ensure that we respond to emails within 3-6 hours at the most, and that we’re available via telephone at any hour of the day or night (weekend or weekday, the internet still runs). This alone will make people feel better about choosing you as their developer.

In addition to the tips above, you should make sure you are always open and honest with your clients. Don’t tell them you can complete a project that you aren’t sure of every single step. Explain to them exactly your understanding of their needs and have them verify to ensure everything goes smoothly. Give the client details on how everything will work, including the use of diagrams if relevant. Your potential clients will have no doubts about your ability to complete the job, and they will be confident that you are the developer they should go with.

Now that you have the job, you should continue to show your client the same level of communication that you have been. Give them an update daily (or every few days if it is a very large project) on where the project is. Don’t be afraid to call them up and speak with them personally to reassure them everything is going just as planned. Trust me here, they will appreciate it.

So you’re finished with your project and your client is satisfied? Great! You’re still not done! Give them a few weeks to use their new application/website/etc before giving them a follow up call to ensure everything is going well. Ask if there’s anything that they would like changed or any other projects they might like your assistance with. Chances are, they will request additional work on the same job or tell you about another project they are working on. If you don’t catch my drift, you can encourage repeat business this way!

Why is repeat business important though? Well, most of your work is already done for you. You already have the client in your pocket and you don’t need to convince them you are right for the job, and if you work on the same project, you should already know most of the code! Repeat business is much more profitable!

If you follow these tips, you can charge 3-5 times the rates of other developers or more! I’ve never had a problem gaining a client at a rate of $100/hr, and I’ve gained several at $300/hr! Good luck!!!

First you have to find someone that has a problem and is seeking a solution that you can provide. Then you have to get in contact with them and sell them on your ability to complete the solution, and convince them that your price is worth it. Even after you’ve obtained the job, it’s not all coding from there on. You’ll still need to keep your client updated on the status of the project, and after the project is finished, you should give them a call a few weeks later to make sure everything is running as intended.

I know a lot of people have trouble choosing colors for their website. Unless you’re an art student (or graduate) you probably don’t know all about color theory, complementary colors, and the like. Don’t fret though, I’ve got a fail-safe method for colors on the web!

First, too many colors can make your website chaotic. Pick a color that you want to use as the main color of your website. You’ll use this for the bulk of your website’s color. Now, pick a couple of different shades of that color to complement it. You will use these to accent your website and make certain elements stand out.

For your last 2 colors, use black and white. You can trade these for shades of dark and light gray and it works, depending on your color. Black and white have the most contrast though, so it really makes the content pop-out and helps show off the color.

Having trouble picking your complementary colors still? I can’t blame you. It takes some practice to start getting the right colors. In the meantime,  I strongly recommend checking out the following link. It’s a color scheme generator that allows you to pick a base color and have all of the rest of your colors given to you!

Color Scheme Generator

HTML stands for Hyper-Text Markup Language. It’s really just a fancy term for a language that is meant to format text for use on the internet. If you’ve ever used “tags” to style your text on Myspace, Xanga, LJ, etc, you’ve used HTML. The same goes for displaying images or slideshows…while they aren’t made with HTML (usually), HTML is used to display them.

The page you are looking at right now uses a form of HTML, in addition to CSS and images. The text you are reading is written in the HTML. Go ahead and right click on this page and go to View Source. It may look foreign at first, but it’s really not that complex. If you search for “donkey” you will find this paragraph. It looks just like normal text with some funny characters added in.

Those funny characters that look like <br> and <p> are actually called tags or elements. They are notes for your browser so it knows what to do with them and how to display them. If it runs across a <b> tag, it will display any text before the closing tag , </b>, in bold. That’s the core of every webpage…just a series of notes telling the browser how something should be displayed.

Next I’ll give you the basics on creating your own HTML pages!