Are you a web designer or developer who wonders if you are getting paid what you feel your skills are worth? Although earnings will always vary depending on geographical location, basing your skills set and experience on a solid foundation of raw talent is still what really counts in this industry.

With the employment of graphic and web designers set to expand by between 7% and 13% by 2018 this infographic will give you a better idea about the areas in which you should be honing your skills in order to improve your salary.

Average Salary for Web Design and Web Developer jobs

Dona Collins is an infographic artist, blogger and financial writer at CreditLoan.com. When she is free you can find her on twitter and other times you can find her writing articles for creditloan blog.

If you are thinking about pursuing web design as either a career or a hobby, you must be able to do more than simply design a pretty page. Professional web designers are experts in programming and coding as well. The most talented web designers are those that can adequately balance both their creative and artistic sides with their love of technical coding.

As a web designer, there are plenty of different web design standards one must master. The two most important in the industry today are HTML and CSS. What are these methods all about and how much time and money will you need to invest in order to learn them?

What is HTML?

Since the early days of web design, HTML has been the standard for professional websites. It stands for Hypertext Markup Language and can be quite confusing to someone who has no experience using it. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source – the code used to design that website is available for anyone to see.

Those who have used HTML will tell you that it is not difficult to learn. There are a few basic tags (codes) a designer has to learn and a simple webpage is at their fingertips. The more complex the HTML, the more you can do with a site.

Efforts have been made to dumb down the process even further so that anyone, even those who have no knowledge of HTML, can create their own website. These are typically called WYSIWYG (What you see if what you get) editors. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you. Some software programs now include an option to convert your document to HTML. These are great tools for newbies. Unfortunately, the processes of guessing what code you need breed mistakes and errors in design that can lead to further frustration.

What is CSS

CSS is a newer animal and is not as familiar to beginning web designers as HTML. CSS was created to allow designers to have even more creativity and control over their designs. Today there is more than just one type of Internet browser to design for and this can be tricky and time consuming for HTML designers. These saves users time, effort and most likely money when they are creating sites. Also, CSS encourages less effort by allowing designers to create style sheets. This means when an edit is made to one page, all other affected changes are automatically made. This keeps designers from having to make multiple edits for large, detailed websites.

HTML vs CSS

CSS is not really taking the place of HTML. It is generally used as an enhancement, not a substitute. HTML is still the perfect type of coding for the main structure of a site.

CSS excels when it comes to how a webpage will look. The outward appearance including backgrounds, colors, content and image placement can all be handled by CSS. Anyone who is familiar with the Microsoft Office version of style sheets has a good handle on the purpose of CSS.

While a webpage can certainly be accomplished still only using HTML, CSS allows designers to do things like set different page margins for all sides of a page, overlap words, better position page elements, and set a font for a whole table instead of just pieces. These make all seem like minor adjustments but these CSS tricks free up time for designers to worry more about overall layout, design and navigation.

Training

There are plenty of places where new designers can go to learn both HTML and CSS. If you are a manual type of student, the library has an abundance of tutorial manuals for these techniques. Any establishment that teaches computers classes will more than likely include these basic web approaches as well for the visual learners.

Of course, many a web designer learned their craft by simply jumping in and messing around. If you have the discipline, this hands-on method of learning is not only effective, but free.

With the popularity of today’s world wide web, it seems like everyone is designing a webpage these days. From the free online editors to full blown ecommerce Internet giants, there is a market and need for web design that is not going away any time soon. Whether you decide to take it slow and target small businesses or get serious and starts designing for large corporations, design fundamentals are the place to start your journey.

As you take on more clients it becomes increasingly difficult to keep accurate track of costs and the hours you should be billing for.  Keeping poor records will ultimately start to cost you money, thankfully there are a great selection of tools available to help.

There are more to benefits to these apps than just staying organized. Some of these apps enable small businesses to take the kind of control of their finance that was once just the preserve of big businesses with dedicated accounting departments.

Below we’ve compiled a list showcasing what we believe are the best 20 invoicing tools for web designers/developers in no particular order. However a word of warning’ be sure to choose your app with caution, once you have started using one it can be difficult to migrate if you later encounter limitations. Always sign up to free trials where available and compare a few alternatives before making a decision.

Billing Boss

Billing Boss allows anyone from freelancers to a small businesses to quickly and efficiently bill clients with an unlimited number of invoices. This app lets you add as many clients as you need to your database and help you stay organized by instantly saving and cataloging you invoices.  Billing Boss seamlessly integrates with Paypal so you can reach clients worldwide with its great support for multiple currencies.

Simple Invoices

Simple Invoices, a static web-based invoicing application that allows itself to be installed on a web-sever or a Windows PC. It can also be hosted by one of the following service providers as well.

LessAccounting

Not only can you invoice but you can easily keep track all of your business expenses with LessAccounting. You can put organize your expenses into categories, add notes and even upload a pictures of your receipts for each expense.

FreshBooks

Streamline your business with recurring invoices. Set up auto-billing to automatically charge your client’s credit card. Quickly and easily invoice clients in any currency. Create your invoice, select your currency and you’re done.

Blinksale

Blinksale is a great looking web application that has a powerful feature set. Blinksale has a quaint option that allows you to send invoices via snail-mail, whatever that is!  You can also customize your invoices by uploading your very own logo or if you have some time on you hands design your own invoices with CSS.

Billing Manager by Intuit

Billing Manager is a web-based invoicing solution that lets you create invoices, send professional estimates, and helps you get paid online.

In addition to online invoicing and estimates, Billing Manager lets you send PDFs of your invoices, send reminders to your customers, process eChecks, accept all major credit cards online and choose currencies.

Simply Invoices

SimplyInvoices integrates seamlessly with Basecamp so you can easily invoice clients the exact amount of time you have spent on a project..

Cashboard

Quickly invoice for time logged against a project, materials, or other goods. Create invoices for your projects with one mouse click, or set up recurring invoices to bill your customers automatically.

Bill My Clients

BillMyClients is a hassle-free way for businesses to quickly & easily create and print invoices and bills online. It makes it a breeze to send those same invoices via e-mail and the United States Postal Service – all without leaving your desk.

The Invoice Machine

The Invoice Machine takes a new clever approach to online invoicing. It’s beautiful and simple-to-use interface makes producing professional looking invoices a very pleasant experience. Create new invoices in a snap. Set options like currency, taxes, shipping, discounts, language, notes and more.

InvoTrak

Invotrak is a full-featured online invoicing and timesheet tracking application that can save you time and money. It’s also includes many of the features you need to speed up your billing tasks.

BillingOrchard

BillingOrchard provides enterprise electronic billing solutions through a simple, secure interface, supported by top notch service and priced for small businesses.

Invoice Journal

Use the client list to enter your customers into the Invoice Journal system and easily retrieve them later when you need them. When its time to create a new invoice simply type your clients name, company name or email address and Invoice Journal will show you which clients match your criteria.

Browse, sort and search all of you invoices quickly and seamlessly. Since there are no limits or restrictions on the invoices you create there is never a need to delete or archive invoices.

SmartInvoice

Smart Invoice is an easy to use, full featured, web based billing and time tracking system designed specifically for small businesses, freelancers, and other independent contractors. Use the recurring billing feature to send regular invoices to clients automatically – no extra effort required.

MarketCircle

Billings powerful application for the Mac features with stylish designs so you can send elegant invoices right out of the box. Choose from any of the customizable templates, or create your own with the built-in WYSIWYG designer. Either way you’ll send polished professional invoices in seconds. Billings also has a fantastic looking iPhone App.

InvoicePlace

Manage your billing and quotes from the office, home or on the road. Create invoices and quotes for any type of product or service. Use Invoiceplace no matter what you sell be it paint, jumping castles, hardware supplies, or cell phones.

Time 59

Time59 is web-based software that let’s you track billable time and expenses, create and e-mail invoices, and record payments. Time59 keeps everything perfectly organized. Critical details and totals are instantly available. Time59 on your mobile device is included FREE with your account.

PaySimple

With PaySimple billing and receiving payments is safe for you and your customers, all information is securely stored with 256-bit encryption and SSL protection.

ProfitTrain

With ProfitTrain you’ll easily be able to keep contact information up to date, store reoccurring services and products, send estimates and export to spreadsheet for more exotic totaling.

Harvest

Harvest lets you and your staff track time and send invoices from one integrated application. Use Harvest’s visual reports to see the distribution of your company’s resources at a glance. Create an online invoice and easily bill your client. Get paid faster by collecting online payments from your clients instantly and securely via the web.

Do you know of any other invoicing tools that work great for designers/developers? or have any good or bad experiences with any of these apps?  Please contribute and share with us what you’ve found.

A really interesting question was asked recently on Answers, discussing the importance and relevance of CSS validation. It would be interesting to discover how much stock developers actually do put in to it, or, is it more important to focus on the actual page being able to function? We would love to hear from you.

You can leave your thoughts, tips and insights in the comment section below, or you can leave your answer on the original question on Answers here: CSS validation, How Important Is It

This question was originally asked by Ben G.

Here is the best answer, as voted by our users, so far:

So, what do you think, how important is CSS validation?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

In this modern era you can very well stumble across quality animated slideshow scripts, but how can we design a good slideshow interface to use these scripts on?

In this article we’ll analyze the current design trend when it comes to slideshows. We’ll start by taking a look at common uses of slideshows but also alternative and creative solutions. As you probably know, we can define a slideshow as a collection of items that can slide within a container. The content of every slide will be revealed for a fixed amount of time within the container.

A slideshow is a great solution to save space in a web layout and to catch the user’s eye with animations. Since slideshow scripts for popular javascript libraries are everywhere, this technique is becoming a little bit overused. This is the reason why, we would like to show you how you can still use a slideshow to make your website stand out without falling into mediocrity.

The Standard Slideshow

The first example is dedicated to the standard slideshow pattern. As you can see from the picture, it’s an animated slideshow with a non numbered navigation. Although this is the most utilized slideshow pattern of all, let’s try to understand why this example stands above the rest. First off, the animation is not a common fade or slide. It’s a slide with a subtle easing, that gives to the animation a personal look.

There’s a lot of space around the slideshow and the controls that creates a very elegant and subtle feel. The last important detail is the number of slides. By using a small amount of slides you’ll be able to ensure that all the slides will be viewed. If you use too many slides the user will be probably be repelled.

The Left/Right Slideshow

This is another very common slideshow pattern in web design. The container shows a fixed number of slides and the left and right controls make it possible to scroll left or right and reveal the next slides. Apart from the websites great design, there’s a detail in this example that makes this slideshow uncommon: the image at the center will never slide.

Your users are not expecting it and it’s a detail that you’ll never forget. Basically when you scroll left or right, in a normal slideshow all the three images will scroll in the selected direction. In this case the featured project in the center will remain in the same position, and the three slides will scroll behind it. If you take a look at the website you can delve into it and understand why it’s so different.

Another stand-alone detail is the slide up effect that every project name has. If you click on a project name, the description will slide up, without the necessity to go to the actual project page. It’s a slideshow with a different approach and an internal slide up effect. This is a great example of how it’s possible to use a common design pattern and take it to another level.

Different Location Slideshow

This pattern was very common when the first version of Flash became readily available. When you click on an element, something changes in another part of the website. In these days it seems to be less popular, but it could be useful in some cases. If you take a look at our example, when you click on the thumbnail images at the bottom of the page, the main image will be revealed in the iPhone illustration.

This is a clever slideshow example. The designer probably needed to show some screenshots of the iPhone app, and instead of using an overused lightbox effect (that is what the user probably expects) found the solution to show the screenshots directly in the iPhone illustration.

This approach has two main goals: avoiding images overlay and showing the screenshots in their real environment, an iPhone. When you click on the thumbnails you get the feeling that you’re currently seeing the real application on the iPhone, and you can better understand how the application works. When you use a screenshot outside the context (the iPhone in this case), it’s not so immediate for the user to understand it.

The Hover Slideshow Effect

This is another really common slideshow pattern that uses a small amount of space withiin the area of design. It can also relay quite a bit of information if you hover over the labels. In this particular example from Threadless, hovering over the labels will show an image related to that specific label.

If you click on the label you’ll be redirected to the right section of the website. It’s like a navigation menu with more information associated to the menu item. There’s a big debate on the Internet these days on subject matter of hover effects and hiding information beneath hovering.

The reason why these techniques are so discussed is that in touchscreen devices like the iPad or the iPhone there are no hover states. If this is true, it’s also true when you tap on an element containing a hover effect, the information will be shown on devices such as the iPad. And at the second tap you’ll be taken to the link specified. Point being, you shouldn’t avoid hover effects because you believe mobile devices do not have the capability of supporting them, as this is untrue.

The Full Screen Slideshow

Now we’re entering to the top chart zone. This is an example of one of the best full screen slideshow ever designed. You have two arrows at the top right corner of the website and when you click on one of them, the entire product page will shift and slide, revealing yet another product. This is beautifully designed and it gives the feeling as though you’re purchasing the product from a live store.

If you don’t immediately warm to the slideshow idea, there’s always a normal menu at the top left corner that will let you navigate between products within the slideshow. The combination of a great slideshow and a menu fallback is a state of the art full screen slideshow.

Numbered Slideshows

We’re closing this article with a great example of all previous patterns combined in one slideshow. Take a look at the screenshot to understand the power and simplicity of this approach. The slideshow on this page is the entire website. You have multiple controls, the left/right arrows and the numbered controls at the bottom.

After the numbered controls you have the website menu items, that will show the content of every section directly in the slideshow viewport. It’s the perfect slideshow. You can’t miss a section of the website, the navigation is clear, you’ll be totally captured by the slideshow and after navigating through it you visited the entire website.

As you may have noticed, from time-to-time we like to highlight to our readers some of the best freely available and freshest possible icon-sets. We really do love them, and we are sure you will love the selection we have for you today. You will find a mixed bag of social icons, an almost complete e-commerce set, and, finally, a flag icon-set that consists of a monumentally huge 2400 icons.

Discons

The Discons icon set, designed by Dave McNally, consists of 95 icons and all are 24px circles. Each icon has one unified shape – the glyph was combined with the background and knocked out of the shape. This means it’s easier for you to alter colours as there’s only one shape for each icon.
Discons

Glossy E-Commerce Icon Set

Ecommerce Glossy has been created by the folks at Iconshock for Hongkiat readers. It consists of 21 different e-commerce related icons in total and comes in these formats: AI, PSD and PNG.
Glossy E-Commerce Icon Set

2400 Flag Icon Set

Liquidcity has created a flag icon for every major country in the world, plus a few more. They've created them in several sizes so they'll look great no matter where you use them – 16×16, 24×24, 32×32, 48×48, and 64×64. They also come in 2 variants – as flat and standard, and the other with a lovely glossy finish.
2400 Flag Icon Set

By Paul Andrew (Speckyboyand speckyboy@twitter).

Just as there are fantastic web designs launched every year, there are even more websites launched that are atrocious and go too far with design. What are the parameters for an artist or web design creator on knowing when to step on the brakes with their design?

Need hosting? Visit host monster reviews community.

The most common mistakes made in designing a website are:

Too Much, Too Soon

Ever opened a website and felt dizzy seeing too much content, color, intricate borders and graphics? The top web layouts always have just one or two focal points, nothing more. In the first place, you don’t have to limit the website to just one page. However, you should also not bombard your main home page with too many directional guides and links to the other pages. If a web design has too much going for it, it will be its own worst enemy. Remember that a visitor to the website has a million other site choices, and so your window of opportunity to keep him interested is so small and be just a matter of seconds. The general idea is that a person should be able to tell within 4 seconds after opening a site what it’s all about.

Using The Wrong Design Elements

You may know a lot about web design, but you do not have to use them all at once. Neither should you be random about which design elements to use.  For instance, if the website has products to sell, then do not let design detract from the product so much so that the person looks at the design rather than the product. Neither should you have elements that stop a person from buying by using “come on,” “wait,” or “there’s more” kind of tactics.

Getting Drunk on Contrasts

The use of contrast is a great design technique, but it can get in the way, especially if you try too hard to create a visual smorgasbord battling for attention. On the other hand, many designers tend to disregard the use of contrast because they know the content by heart, and fail to look at the design from the angle of a visitor.  Thus, they look at the overall effect, and end up using too light text color that affects visibility and readability.

Inconsistency From Top To Bottom, Side to Side

Often a web design gets attention because it has no focus, which means it’s not a compliment. Think of it as a room – you cannot have gothic mixed with country because they do not work together at all. It’s wrong to have a different theme for every page in your website, just as it can get to be too much if you keep changing the color scheme.

Creating a Navigational Maze

Web navigation refers to links to different parts of your website. An inconsistent web design uses different kinds of navigational designs in one page, or even in the entire website. Again, you need to maintain consistency. At the same time, the navigational keys should be concise and simple. This is the wrong aspect of the web design to “decorate.” It should be as easy for a 10 year old as it is for a 70 year old to figure out how to get to the Home Page or About Us page.

Making Web Design More Important Than the Content

Unless you are creating a design or artsy website, then content should reign supreme. The web design should not be the main selling point. It should be whatever the main focus of the site is. If anything at all, design should enhance content, and by doing so, get its due recognition.

Using Flash Techniques Improperly

A web design that incorporates a video that automatically pops up when a person goes to the Home Page should always have a Skip option. Making visitors go through the same Flash animation every time is abusive and inconsiderate. It will also cause a drop in interest. The same applies with music, especially in game sites. Not everyone wants to listen to the same tune again and again. There should be the option to lower the volume or put it in mute mode.

Playing Around With Text

Adding design to the fonts is generally a bad idea. People just want to read the content, not be impressed with its font, size, or color. It will also cause a problem with optimization. Thus, it is important to choose a font that is easy to read, and not be too small or too big.

Web design can easily go overboard, so the best way to avoid this problem is to have an objective independent person give you his or her point of view. If you get several opinions, you can come up with a consensus. Just choose your critics well.

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block. It aims to cut down on development time and help you create beautiful-structured websites.
The Square Grid ?

Jo – HTML5 Mobile App Framework

Jo is a new and lightweight JavaScript framework designed for HTML5 apps.
Jo – HTML5 Mobile App Framework ?

Frame Box – Lightweight Tool for Creating Mockups

Frame Box – Lightweight Tool for Creating Mockups ?

Ultimate CSS Gradient Generator

HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. This easy to use copy-and-paste tool gives you complete control when creating your CSS3 gradient.
Ultimate CSS Gradient Generator ?

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have a small, yet cool, selection of useful tools, apps and resources for web designers. First up, we have a wonderfully useful jQuery plugin Quovolver) for displaying quotes in a stylish way, next up we have a small, yet very handy app for generating a grid (Gridulator) and finally a fun time-killing bookmarklet that can destroy everything on a web page.

Quovolver – a simple jQuery plugin for revolving quotes

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Quovolver – a simple jQuery plugin for revolving quotes

Gridulator – Make pixel grids, lickety-split

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based design folk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you.
Gridulator – Make pixel grids, lickety-split

Hello, want to kill some time?

Hello, want to kill some time?

By Paul Andrew (Speckyboyand speckyboy@twitter).