10 Reasons you should become a Web Designer

0 comments

10 Reasons you should become a Web Designer.


You've dabbled with Photoshop, and toyed with Dreamweaver, but you're not totally sure if you've got what it takes, or even if you'll like the lifestyle of being a web designer? This article outlines my top 10 reasons why someone who is artistic, and loves computers should try their hand at becoming a web professional. If you're already a web designer, then this article might help you remember the positive aspects of the job.


1. You always have something to show for your hard work.


My number one reason that anyone should become a web designer is that at the end of each project, you get something that you can show for all your hard work. If it came out worse than you expected you can learn from it. If it came out superbly you can sit back and revel in it. But only for a second as its onto the next project! Seriously though, the best part of the job for me is seeing everything come together to create a fantastic looking, fully functioning website.


2. You get warm & fuzzy when your sites gone live.


Very few things beat the feeling of sitting back in your chair and admiring a completed website that you've taken from an initial idea on a piece of paper, to a fully functional website. You can sit back, relax and enjoy your rollovers feeling like you've really got something to show for your efforts. If you get this feeling then you're among almost every single web designer who has a passion for the job.


3. Its a technical job. People respect that.


It doesn't happen all that often, but when a client really shows they value you as their designer, that they take on board your suggestions, and appreciate what you've done for them. it personally makes me feel really great. As the majority of people don't understand our profession you get to influence a lot of people and make decisions. As long as you can clearly explain in layman's terms your reasoning most people will trust your advice.


4. You get to be creative for a living.


When you think about it most people have to do pretty boring jobs for a living. They deal with figures, they write letters or important documents. I always try to remember this if Ive had a particularly bad day at the office. You're lucky to be able to create for 8 hours a day.


5. The job is rarely dull.


If you like computers, then being a website designer isn't a dull job. It might seem that way to people who hate computing, but a lot of the problems you will come to face each day are new, and can be very challenging. As Ive mentioned before about the industry being young, its moving rapidly, meaning that you'll have to keep you finger on the pulse to keep your skill set current. Although most of the job is office based, you do get to go out and meet some interesting people too.


6. You don't need a degree.


Now easy guys, Im aware this one could sturr up some serious debate! Compared with professions such as medicine, law and other industries along those lines, as a website designer you don't need to have a degree to get a job. With this comes the huge benefit of not incurring about £15,000 of debt from a three year university course. Im not saying you shouldn't get a degree, just that you don't necessarily need to have one to get a good job. As being a design is a creative job, having a strong portfolio will go a really long way.


7. You don't have to wear a suit.


Most days you don't have to wear a suit to work. Yay! If you've got a meeting with a really important client then you might want to dress to impress, but most of the time you can wear anything thats smart / casual.


8. You can talk about CSS with fellow web designers.


Its awesome when you can have a full on geeky chat with a fellow website designer without the person not actually having any idea what you're talking about. Sometimes you just need to vend your frustration about how Internet Explorer just isn't standards compliant.


9. Its more interesting than saying ‘Im an accountant'.


When someone asks you what you do for a living and you reply with ‘Im a designer' or website designer its much easier for them to ask you questions about your job than for example if you were an accountant. Nothing against accountants, but whenever someone replies with ‘Im an accountant', the best I can muster is usually, ‘Oh right, how long have you been doing that for?'.


10. Its one of those ‘new age' cool jobs…


Its 2007, get with the programme! Everything's moving over to computers and the internet. Web Design is a very new industry which is still growing and establishing itself so the chances are you're going to have a job for life. Theres definitely no immediate danger of the web dying out.


A closing thought…


Web designing for a living is a great job, I recommend it to anyone who loves to create and build things. If you're a fellow designer and have some other suggestions then feel free to add them in the comments below.

7 Essential CSS Code Snippets

0 comments

7 Essential CSS Code Snippets


Just a quick little post this week to get back into the swing of things. I'm not sure whether all of you will find this useful, but I hope you might do. This week at work I noticed that quite often when I'm building a site I'll take little snippets of code from an array of previous sites that I have built. After racking my brains for 10 minutes as to the last website I used the ‘PNG Hack' on, I thought I'd create a place on Evoart with all these useful bits of code stored!


Basic Link Styling


We all know how to write the code for this, but its often handy to just paste it straight into your CSS file at the beginning of a project. If you didn't know, the code below will style ALL of the links on your website, unless you otherwise specify styles for them.


a:link, a:visited, a:active {

color:#EAA423;

text-decoration:none;

}

a:hover {

color:#83CAF0;

text-decoration:underline;

}


Firefox Image Outline Fix


This little beauty does exactly what it says it does. If you weren't aware, Firefox has a nasty little habit of adding ‘outlines' to images that are links. This really bugs me on items in the main navigation of a website, but thanks to this handy piece of code you can say goodbye to these outlines forever!


A:focus, A:hover, A:active /* Firefox image outline fix */

{

outline: none}


IE6 Background Flicker Fix


You've probably noticed that in IE6 when you hover an image that has a linked background you get a very noticeable flicker as it jumps to the hovered background image. Well not any more! This is another really handy fix that I always implement these days. You can read more about it here.


html {

filter: expression(document.execCommand("BackgroundImageCache", false, true));

}


Header Tags


Another pretty basic one, but a real time saver to quickly paste into your code is the header tag. These bad boys should be a part of every web designers code toolkit. Headings are essential for search engine optimisation, and they also help keep you code semantic - meaningful and structured in other words.



h3 {

color:#fff;

font-size:18px;

font-family:Arial, Helvetica, sans-serif;

font-weight:normal;

margin-top: 0px;

margin-left: 0;

margin-right: 0;

margin-bottom: 0;

line-height:140%;

padding-bottom:0px;

}


Absolutely Positioned Images


Its not a good idea to get into the habit of using this technique, but in some instances it can be particularly useful. One such instance happened to me a few weeks ago. Basically after a design had been built, the client wanted a badge to be added in a really awkward position overlapping the main banner and the edge of the actual website itself. The image wouldn't have fitted nicely into the flow of the code, so I chose to absolutely position it using the code below.


All you need to do is change the ‘top' and ‘left' values and add the <div> below to your HTML


< div id=”namehere”></div>

#namehere{

background: url(../images/yourimagehere.jpg) no-repeat left top;

width: 26px;

height: 697px;

display: block;

overflow: hidden;

position: absolute;

top: 0px;

left: 184px;

}


Headers & Paragraphs Margin Reset


At the beginning of the development process its often a good idea to do a global reset of the margins on your header and paragraph tags, just to eliminate the possibility of any stray padding or margins creeping in when you progress further in the development.


h1, h2, h3, h4, h5, h6, p {

margin:0;

padding:0;

font-weight:normal;

}


Sliding Doors Navigation


This has to be the piece of code that gets re-used the most on any website.


The ‘Sliding Doors' technique enables you to have all the images your planning to use for each section of your navigation in one image. You then use CSS to reposition that image to show the hovered state, and the ON state.


However, just to make things interesting, I use this technique a slightly different way. I do this by only including the first and second image together as one image, and then have the ON state as a completely seperate image. You can see the two seperate images below.




I then use the following CSS code below. The ‘ul' section eliminates the padding and margins and the ‘#navigation' part displays the items horizontally, rather than vertically. Ive also included some comments in the code below which help to explain whats going on.


ul {

margin:0;

padding:0;

}


#navigation li {

display:inline;

padding: 0px;

}



li#articles a {

text-indent: -1000em;

background:url(../images/articles.jpg) no-repeat left top;

width: 117px;

height: 68px; /* 68px is the height of the single button image */

display: block;

overflow: hidden;

position: absolute;

left: 15px;

top:169px;

}


li#articles a:hover {

background-position: 0px -68px; /* This adjusts background positioning so that only the bottom half of the image can be seen */

}


li#articlesON a {

text-indent: -1000em;

background:url(../images/articles_on.jpg) no-repeat left top;

width: 117px;

height: 68px;

display: block;

overflow: hidden;

position: absolute;

left: 15px;

top:169px;

}


To get this working on your site we need to add some HTML:


< ul id = “navigation” > < li id = “articles” >< a href = “articles.html” accesskey = “1″ title = “Articles” >Articles</ a ></ li > </ ul >

CSS Reset

0 comments

CSS Reset

There’s plenty of different reset methods already available and I’ve been using Eric Meyer’s method for some time now but have started to realize that in most projects, I only use a fraction of the styles specified and much more often find myself rewriting a whole different set of styles that I use in all my projects.

Therefore, I’ve decided that it’s going to be more worthwhile using Meyer’s CSS as a starting point but putting together my own starter template which I can use for all my projects which I’d like to give you an insight into.

The CSS Reset

The first part of my stylesheet is very similar to Eric’s but is a little simpler. Within my version, all I want to do is remove the margin and padding’s from all elements but I’ve also included the legend and fieldset within the reset (I’ll cover the reasons why, later in this article).

I also like to remove the border from both images and fieldsets so I declare a border of zero for both of these elements.

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}

Formatting

The next thing that I want to tackle is the font formatting. Now, this is fundamentally different from Meyer’s reset as this is actually dealing with the format of the content whereas Meyer’s method deliberately only deals with creating a baseline to start a page from.

Within this rule, I always specify the font-size and line-height as 100%/1.2 as this gives all browsers consistency. You may want to change the line-height depending on the layout but I find that this gives adequate spacing for all fonts.

In most recent projects, I’ve started using lucida sans but you can obviously change this for the font that is suitable for your project. I also include the form elements within this style so that they don’t need to be explicitly set separately.

body, select, input, textarea {
font: 100%/1.2 "lucida sans", verdana, arial, helvetica, sans-serif;
}

The Container

I always use a container div immediately after my opening body tag and therefore I use the container to control the width of the content and to also adjust the font-size if required.

Again, this may vary from project to project but I always use it and therefore I think it’s worthwhile including within my CSS.

#container {
font-size: 0.8em;
width: 760px;
margin: 0 auto;
}

Headings

Headings are one of the elements that really have no consistency by default and therefore I like to include some settings to start with, even if I plan on changing these later in development.

The first thing I like to do, is to specify some padding on the bottom of all the headings. I use 0.8em as this coupled with the line-height we specified on the body gives us a nice gap underneath the heading which is exactly the same size as the heading text itself.

h1, h2, h3, h4, h5, h6 {
padding-bottom: 0.8em;
}

Next, I’ll give each heading it’s own font-size relative to the base font-size of the body. I start by giving heading6 a font-size of 1em and give each larger heading an increase of 0.2em.

h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}

Paragraphs

Most of the styles that we need for paragraphs have already been created due to the way that they’ll inherit the font-size, font-family and line-height from their parents but the one thing we do want to setup is some padding on the bottom to create some nice spacing between paragraphs.

I find that 1.2em tends to work well as this is slightly larger than the height of the text contained within the paragraph.

p {
padding-bottom: 1.2em;
}

Reusable CSS classes

I like to include reusable classes within my CSS so that I can easily reference styles that I tend to use across multiple projects.

I’ve included error and confirmation at the moment but this may grow with time. Please note though that this is generic and therefore shouldn’t include site specific classes but instead styles that you’re likely to use across different projects.

.error {
color: #C00;
font-weight: bold;
}
.confirmation {
color: #080;
font-weight: bold;
}

Fieldset and Legend

You might remember earlier in the article that I touched on the subject of fieldsets and legends being something that I like to deal with slightly differently. Currently they’re practically impossible to style consistently across multiple browsers so I like to use John Faulds method which you can read more about on his website in the article Legends of Style.

Just in case you haven’t read John’s article, the HTML that I’d use for the fieldset and legend would look something like this…




Legend


And therefore the CSS that I include within my reset css file is as follows.

div.fieldset {
border: solid 1px #999;
padding: 1em;
margin: 1em 0;
}
legend span {
display: block;
font-weight: bold;
font-size: 1.4em;
color: #000;
}

Summary

Here’s the complete CSS file that you may download and use within your projects.

This CSS is by no means meant to be a finished version but is something that I’ve started using as a step on from Eric Meyer’s version of the reset css file. It may not be suitable to everyone and I’m sure that you may want to change a few parts so that it’s tailored for your own individual project.

What it is meant for though is to be used as a starting point to reset styles to provide a consistent starting point for all browsers along with some basic formatting which can then be built upon to create much more complex and complicated layouts.

Please feel free to comment if there’s anything you think I may have overlooked or any extra styles that this reset css file could benefit from.

Thanks: http://www.dave-woods.co.uk/