Starting a web design business might seem something anybody can do, but is definitely a difficult task. Note that this discussion is purely theoretical, if you wish to read a real opinion, then find someone who owns such a company and ask him how it was in the beginning.

The difficult part about starting your own company is that you need to be patient – the good stuff comes to those who wait. It is a long-term commitment and results might not come right away. Actually, it might be a bumpy ride up until the results come; or worse, they might not come at all and you will fail miserably.

Image by kristja.

In the beginning it sounds nice. You are your own boss, make lots of money and do pretty much nothing besides sign papers. This might be the life of huge company owners (although I would like the right to disagree), but it will not be yours. You might have to work even more than your own employees, you will not really make that much money and yes, you will be your own boss, but the clients you work with will still decide whether or not to hire you – they have the money, right?

Statistics say 80% of new businesses disappear within their first year. It takes a lot of determination and it is not the path to take for people without drive and stamina. If you’re still reading and think you have a fairly good chance of being one of the 20%, then continue reading, this is for you.

Owning a company

Great, are you ready to embark on this journey? Then you need to know things will change for you. Your career will not be a 9-5 job and won’t even be similar to the bits of freelancing you experienced before. Expect to get a feeling of accomplishment when things happen as you wish them to – expect to put your head down and be disappointed when things don’t turn out the way you want. Now you are on the other side of a business. You control what is happening and you give jobs, order people around and decide on wages. Landing a big project will mean much more for you now than if you were working in an agency, where you just get assignments and, when you deliver them, you get new ones. Your life has changed!

Now you can also employ people and let them do your work, while you spend time with your family or doing whatever else you wish to. However, most designers or developers who start their own businesses have no, or a limited, amount of money in the beginning and choose to do some of the work themselves, to save up until they have a bigger budget. You will most definitely have to do this in the beginning, unless you find a partner who is willing to contribute to the finances.

Advantages of owning your business are many. You are able to schedule your own time and have more freedom to experiment; even more freedom to hang out with your friends. You get total control, price up jobs as you think and have a different feeling knowing this time everything you do is for your own purpose. You are in charge of everything. But challenges arise at any minute too…

Get ready for problems

The first part of the article was about the nice stuff. Now it comes the ugly. Just because you are a great web designer doesn’t mean you are a great entrepreneur. There is a whole new path for you to learn and there is not much free time for you after you throw yourself out there. As in freelancing, you need to be able to motivate yourself and the ones you work with and be the boss, not just a friend or co-worker.

Unlike in a company, there is no one who takes care of other things for you. Unless you hire people for it, you will need to do the bookkeeping, taxes, client meetings, project presentations, project management and so on. This doesn’t allow too much time for hanging out with your friends.

Image by iprole.

Working on your time and whenever you want is an advantage – like in freelancing. But in both careers you need to be able to motivate yourself and start working right away instead of doing laundry or walking your dog. Also, you need to be good at following a schedule. If you slack off a day, the second day you will find yourself in a lot of trouble. Distractions are also something difficult to deal with, from social media to e-mails and, if you work from home, to kids and family members.

Maybe the most time-consuming task is email. This time you need to create them yourself; from scratch! There are no short answers to your project manager anymore. Now you are also in charge of communicating with the client and there is a reason why every company hires specialized people to do this – because it requires special skills. Now go and ask yourself, will you spend the necessary time to learn them or will you hire someone to handle the external communication? If you prefer to do it alone, get ready for some difficult challenges. Not every client is a joy to work with and you need to learn how to get the best out of them. Your job will be even more stressful if most of the clients are difficult to work with – and you probably already know most of them are difficult to work with.

Some good tips I can give you for when you decide to start your own design company is getting an accountant and focus on smaller tasks. Having an expert to keep control of all the stuff you have no idea about will pay off because it will allow you more time for the things you know how to do. It is not really possible to keep track of everything and doing both administrative and technical tasks will only give you sleepless nights.

If you are out there always looking for clients and you do it well, keep doing it and hire somebody at the office to actually turn the ideas into projects. Chasing clients and doing the work is quite impossible to do at the same time. It is possible for freelancers, as they have more free time than you do, but don’t forget – there is no real free time for you in the following months or even years. On the other hand, if you’re really good at completing the design briefs, then do that and hire someone else on commission to land projects. All big companies have several departments for a reason: keep sales, finance, design and technology apart from each other.

What’s in for you later?

Now we talk about the future. What are your opportunities in the future? Well, there are actually only two: success and failure, but we all know failure is never an option. Forcing yourself to be successful is the only way to actually reach your goals. If in the beginning you only run a business, in the future you have the opportunity to own it and hire people to run it – this is the dream, I would say. It is as far as it will go for you.

Image by cobrasoft.

You will pick up business skills along the road that might help you get back in with another agency. If at some point in time you wish to start working again, nobody will reject you – with the experience of leading a small project to running a company everybody will be delighted to have you around.

If you fail, however, the only thing you can do is go back to an agency or freelance. You can still have the company on your CV, but is it really worth? How likely are you to get a job if you state your small business failed? If you disagree with this, you are more than welcome to share your opinion with us; I would love to hear them.

Bottom line

Well, now you’ve heard it all. You know what is good about owning your own business and you know what challenges to expect. I would be glad to hear that some of you still want to pursue your dream or maybe start or continue on this path. I can’t wait to hear about your results.

Until next time, let’s hear your opinions on the topic…

Actually you lose 7% (maybe even more!) of sales without even noticing… Sounds bad, huh?

I mean, you work carefully to put things in the right place, good call-to-actions, nice design, spend a few bucks with ads.. And then you lose 7% of sales just because you forgot to minify your CSS. We’ll, this is not going to happen again.

We’ll put every future project that you work on a diet. And this one, won’t wait for next monday, or next january :)

Here we’ll see amazing tips to reduce your files size and increase your site performance without affecting important things like image quality or a files readability for future edits.

Grab your meter and let’s rock!

Every Second Counts

Before the practical stuff, I would like to share with you a few numbers about page loading X users satisfaction.

I saw this infographic several months ago, but it’s still amazing. Click on it to see all the data, here’s what I liked most:

• If you hit 4 seconds of page loading you have 25% abandonment increase
• About 80% of users expect mobile pages to take almost the same amount of time as the desktop version

Credits: Kissmetrics

Image Optimizing – File formats & Tools

So, the best way to optimize images starts with using the right file format. Basically we have 3 common formats for web (no, I won’t talk about .bmp, .svg, .tiff or anything else):

• JPEG – Really good for photos and bigger images
• GIF – Good for icons and images with fewer colors
• PNG – Good for small images with a lot of colors or when alpha channel is needed

This is really just the basics, there is a lot of particularities for each image type that we won’t be talking about (right now). But you should be good with this, when you are exporting a psd to code a layout you should use .jpg for photos or bigger backgrounds, use .gif for smaller elements or elements with a restricted color palette (like simple icons or replacements for common inputs) and png where you can’t lose any data or small colorful images.

I know many people say that png are bad and too big, but actually if you know how to use them they can give you a better effect (exactly what you designed) AND smaller or similar file size as gif or jpg.

Let’s see some tips for each image type:

JPG Minimizing

JPG does “lossy compression”. That means that its algorithm stores data using much less disk space but will also save less info about your original file. Once compressed it’s impossible to decompress .jpg files. Your best choice in this case is to always keep the original file safe and just save copies.

Ideal quality for jpg is pretty tricky, but most times you’ll be good with 60-80.

When you take photos your camera stores metadata about the photo that you may not use in future. Also image size is often bigger than your entire screen. So get rid of useless data and reduce your image to what you really need.

Irfranview is a small tool that can do this for you even as batch conversion for lots of files.

Recently I heard about an amazing tool, called JPEGmini. They have an amazing compression algorithm that works pretty much like our eyes do, so it makes what gets our attention higher quality and what doesn’t, lower. You should give it a try!

GIF Minimizing

GIF files have a really small color table, ranging between 2 and 256. 256 may sound a good figure, but when you realize that jpg has up to 16 million colors, 256 isn’t that good, huh?

What you can do to cut files size is to reduce their color palette. Above is an example where reducing a file from 128 to 64 colors we saved almost 30% of file size.

PNG Minimizing

PNG compression is similar to gif compression. You reduce the color palette and gain a few kbytes. In above example, png-24  instead of png-8, would be a huge file since it’s completely lossless, so you would have a perfect image, but pretty big.

The best part of png-24 is full alpha channel, but we can handle that. Image Alpha gives us full alpha channel over PNG-8, so we have much smaller files but pretty good-looking for overlays and advanced effects.

Code Compressors – HTML, CSS, JS

Actually I’m not too much a code-compresser type. But images aren’t the only thing we should care about in our websites, HTML, CSS, JS files should be compressed too since they can eat precious bytes from your diet.

Let’s take a look at a few options:

minify – PHP solution

HTML Compressor

YUI compressor

HTML Minifier

Server caching

Another good way to improve site loading is server-side caching. If you don’t use cache your page needs to be processed by the server every time it’s accessed, even if you don’t change your site for ages.

So, here are the best WordPress Caching plugins:

WP Super Cache

W3 Total Cache

DB Cache Reloaded Fix

GZip, a.k.a. Compression Like a Boss

I’m pretty sure you’ve heard about zip files. Or maybe .rar files or .7z files. Well, GZip is an implementation of GNU Zip, which does pretty much the same thing as ZIP files, but gives you a really good compression rate.

The crazy idea here is to drastically reduce download time by sending users compressed files, instead of the uncompressed original ones, and their browser will handle the decompressing in much less time than if it had to download original files.

Your hard work here is to paste this code into you .htaccess file:

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#End Gzip

Then you’re done! Well, hope it doesn’t take you more than 5 minutes :)

Now I am not saying all freelancers are focused on the money. Some of them are not even full-time freelancers, but do this as a hobby after their normal 9-5  job; but even they charge money.

Image by caltiva.

So you might ask yourself now and then, how much should I charge the client? Should I charge him by the hour or maybe a flat rate per project and should I ask for milestone payments or not? At some point you will find answer to all these questions and then the supreme one will come: how can I charge my clients more than I do now?

This is a difficult question to answer because the internet is a relative new domain thus unknown to many. Sometimes it is difficult to even convince the client that the sum you ask for is actually quite decent – how will you manage to convince them to pay even more?

Now I know many freelancers prefer to work for a lower fee to get the project, than ask for an outrageous sum and not get anything. I totally get it. I’ve found myself in this situation many times. Sometimes I still do. I probably always will, but if you are able to land your dream project, money shouldn’t stop you. However, we’re not talking about dream projects, but about the normal, weekly design or development assignments you can get.

The main question

The question you will always have to answer is how much is the client willing to pay. Think of the importance of your job, which is also the criteria used in any other business to determine the salary of an employee. You also need to think about how much demand there is for the kind of work you do, and how many other people can do it. While you can be a genius at comic book design, there might not be anyone interested in them anymore, as they are not profitable. Moreover, there are so many designers out there who can do the same job and there is always someone out there who can outclass you, that landing a huge project is highly unlikely for the average freelancer.

Image by immrchris.

How much to charge

The first step is knowing how much you are worth. You need to determine how much you can charge and the way you do it (per hour or by project). Think of costs versus profits, your experience and skill level and the demand we talked about earlier. Then try to research the market for and see how much a designer in the same situation as you would charge. There is no shame in asking other fellow freelancers how much they charge and set your price accordingly.

If, for example, the demand is very high, which means more people are in need of your service than you can provide, you can ask a higher price and you will get it. But consider that unless you do something really special, this is not the case, as the market is saturated with professional designers and developers with years of experience. And talking about experience… consider it when setting your prices as well, because it matters, regardless of what many nut jobs in the field think. Would you like to be operated on by a surgeon on their first day, or a surgeon with more than 30 years experience?

Consider who you work with

It is also rather smart to know the client you work with. This is not easy to do all the time, as many clients you land are new to you, but just think of it for a while. If you ask $1,000 for an integrated blog, to an individual it might seem too much for him, but you might get away with $3,000 from FedEx or Coca Cola for the exact same product.

Most freelancers start low, with small companies and individuals, build their portfolio and then thanks to this, and their experience, are able to land higher clients who will pay more. This is the normal path. Hoping to charge hundreds of thousands dollars per year in the beginning is unlikely to happen – there are designers with more than 20 years experience out there who don’t earn that much.

Market yourself and your products

Selling you and your products is crucial. The way you do this will affect your final price. But knowing how to sell yourself and your skills will definitely help you get away with a bigger paycheck. You are in charge of developing products and also in charge of marketing yourself and landing clients. This is not easy to do because you need skills in two areas of the web, but knowing how to properly use these skills will give you an advantage over the others.

Many freelancers out there undersell themselves because they want to get hired. As said earlier, they would rather work for a small fee than not work at all – which is a normal way of thinking. But for how long are you willing to work for lower wages than the others?

Image by Cognition Coach.

It is very easy to spot in a supermarket two products from different companies (with the same ingredients and same weight) that are priced differently, only because individuals place more value on one than the other. To give you a more familiar example, consider an Apple computer and a PC. Or to go even more in-depth, consider a Sony Vaio laptop and an Asus. They do the same thing, both of them have the same warranty, the Asus might even have better specifications – but the Vaio will always be more expensive.

Underselling yourself is strongly linked with this principle of undervaluing yourself to the client. If you don’t undersell yourself, the client will not think less of you., always be confident about what you can deliver.

There is no shame in negotiating your prices down – everybody does it. But try to stand by your standards as much as possible and always have a clear minimum that you don’t go under. You might lose some clients now and then if you negotiate strongly, but don’t be afraid of doing it. The clients who will accept your demands will respect you more and we all know this can lead to further collaborations.

Show you are a good guy

This is much easier than you think. It has something to do with knowing how to sell your products and knowing something about selling in general. Just ask salespeople how often they use the “and there’s even more” technique. The main idea is to make the client think he gets a good deal. Little does he know you would have charged the same amount regardless, but at least you look like a good guy. Let me explain:

Let’s say your price for developing a customized CMS plus customized graphic design is $750. Now you go to the client and tell him you will develop a customized CMS for him for $750. And there’s even more; you tell him that for an additional $250, you will also throw in the design for his web page. The bottom line is that now you get $250 more for the same products, and all you did was pull a simple sales trick. Tell him that if he is interested, you will do both for only $750, as you are really excited about working with him.

Image by jnobles100.

What did just happen there? You still get $750, your original asking price, and you still have to develop exactly the same products, but now you seem like a good guy and the client thinks he got a deal out of you. Not only did you get the client, but he will also recommend you to others and we all know how much viral and word of mouth marketing means.

Explain everything in detail

Laying out every detail to the client is important, especially when working with clients who don’t know too much about the web. They might search Google to see what a development process entails and realize it would be much easier to hire an expert than try to do it themselves. They just don’t get it and don’t care about it, it is not their business.

Therefore you might want to explain to your clients what your products mean. Explain to them why you charge so much, put everything on paper, from domain and hosting costs to each hour you spend on developing the website. If you show them in detail why you charge as much as you do, it is an increased possibility that you will land the project.

Image by Winter Bicycles.

Keep in mind you don’t do this because you are desperate to land the job, you do it to help the client. You will earn more gratitude by treating them with respect and they will appreciate you even more after this, because not everybody takes the time to explain the process and what the client is actually paying for.

Bottom line

If you expected me to tell you precisely how much to charge during the course of this article, you were obviously wrong. I can’t tell you how much to charge because it depends on many internal and external factors and there is no way for me to discuss this with each of you individually.

The conclusion is that very few clients will pay less than the market dictates. You can try whatever you want, you will not fool many. Don’t ask for outrageous prices and always remain within the market price range. Selling yourself properly is what will help you charge closer to the higher end. Always make the customer feel like he gets a great deal and that you do something for him by developing these products, not him for you by paying. Don’t forget to treat every single client with respect, this is what will bring you more referrals from him in the future, and keep you in their minds when they have any projects in the future.

How do you try to set your prices and when do you think is the right time to start charging more? Are you pleased with what you get or you would like to charge more, but the market does not allow you?

But being a designer can take a great deal of time, with multiple clients to please, working in an environment that moves fast and changes even faster, where we have to learn new skills over and over again, market ourselves and even find clients on a monthly basis if we don’t work in an agency.

As with any other career, web design has its own challenges and they arise all the time for us, even if we are experienced or well-known. It can be a difficult client to work with, an impossible deadline or a bad example of outsourcing, it doesn’t really matter. Unfortunately these things can’t be avoided, but to ensure you enjoy a better career anyway I created a list with some tips for all of you.

Success only comes if you work smarter and more efficiently, not necessarily more than you do now. It will not be possible to pull all nighters or work 36 hours straight in 20 years anymore, your body will just not be able to handle it. You will end up burning out and will start hating your job and career choice. Therefore you have to reconsider the way you work; design and development are careers for organized and smart people. Not that we do something incredibly special, but let’s face it, there are more designers that don’t manage it than the ones who do and enjoy success – it is definitely not easy.

1. Be organized

This should be the first new rule of your career. You can only work more efficiently and smarter by being organized. Everything from your working hours and sleep to breaks and time for a personal life. Being organized or becoming organized is difficult and requires time and effort. We try to focus more on deadlines and projects (which are short-term) than on improving the way we work (which is long-term and more efficient).

If you just can’t handle both of them, take a break from design for a month and organize your life. Catch up with your bills, see everybody in the family, get out with all your friends and handle anything that has been causing you stress. Then start being organized.

Keeping yourself and your schedule organized is crucial.

Image by tome213

Create and use a schedule, this will allow you to avoid a chaotic life. It is not important what kind of system you use, the most important thing is to actually have one – and to rigidly respect it no matter what.

Actually, this part of the article is focusing more on freelancers than on agency employees and this is simply because the first have to manage their own schedule, while the second already have a schedule imposed by their companies.

You decide what your schedule going to look like. You know what you want to start with and at what time, although I do not think that starting after 9 is beneficial. On a normal, 8 hour work day  you will finish at 5pm, which might be a bit too late if you need time for other activities such as running, family meetings, working out or seeing a football game. E-mails with new tasks might appear throughout the day, the best way of dealing with them is ignoring and revising them at the end of the day, when the work you planned to do is already done. Otherwise you will end up reading e-mails and not delivering the projects on time.

Having a schedule is more important than you think - stick with it!

Image by biewoef

Another tip is to take 30 minutes at the beginning of each day to read e-mails, plan ahead and get rid of everything that might concern you. Then just start working. At the end of the day take another 30 minutes to read and write e-mails, send milestone reports and other work related emails. Sure, you lose an hour a day, but being organized is important and this hour you use for things other than work will pay off long-term. You will notice that you will not be concerned with new e-mails after you get used to only reading your email twice a day. Incoming e-mails are only a distraction. Talking about distractions…

2. Get rid of Social Media

Yes, of all of them. From Twitter and Facebook to e-mail and phone. By being surrounded by all of these you only risk getting distracted and doing anything besides your work.

You might not realize it, but your probably use Facebook and Twitter even more than you think. Install one of the activity tracking applications you can find on the internet and you will be amazed at how much you use Facebook and Twitter.

By only checking them from time to time, I spent almost two hours per day on Twitter, Facebook and e-mail combined. Quite a lot thinking I can bill a client $50 for two hours of development here in Denmark. Using this logic I lose around $250 per week by being distracted, which means $1000 per month. Quite a lot, I would say, there are freelancers out there not even earning $1000 per month.

Facebook is one of the biggest distractions a freelancer can have.

Image source

Even if you think Facebook and Twitter are the biggest distractions, they are not. E-mail is the biggest and I can’t stress enough about how important it is to only check it in the morning and in the afternoon, before and after your working schedule. If you don’t believe me, use one of the tools recommended above and see for yourself.

You might be afraid of missing important e-mail messages, but we all know most of our e-mails end up in spam anyway and very few of the others require immediate attention. You will not miss your dream job or even a big client if you answer at 4.30 instead of 12.30. You can also create filters and only get notices when a specific person sends you an e-mail, so you can act on it immediately if needed.

Cleaning and managing your inbox is important too, because it will turn your one-hour habit of checking e-mails into a 30-minute one – and there’s half an hour more of earning money per day. Make sure your inbox is not cluttered, get rid of anything you don’t need and move all the spam to the spam folder – don’t forget to always block the sender and maybe even the sender’s domain. If spam is sent from there, you might not want to have anything to do with them anyway.

3. Use methods to concentrate

Our bodies are not like computers. This means we can’t just inject food and energy drinks into it and expect it to work at its best all the time. Our bodies work according to how much energy we have. Therefore we can aid our schedule by using some well-known methods.

Our energy, however, depends on our natural rhythm. This means some of us work better in the morning, while others are more energetic at night. And even under these circumstances, our concentration increases or decreases throughout the day. These methods I am talking about are ways of properly managing your energy so that you work as effectively as possible.

The Pomodoro Technique is one of the best out there. It means you force yourself to work in short bursts. You set a timer to 25 minutes and during the 25 minutes the only thing you do is work without being distracted at all. Just work. After the 25-minute cycle take a five minute break and continue with another sprint afterwards. After four cycles take a longer break.

If The Pomodoro Technique does not fit your working style, then try something else. Use the morning and the first hours of work for the more demanding jobs – this is when you have the most energy – and then keep the easier tasks for later in the day. You don’t really feel like coding, but would like to read something, save the reading for later since it isn’t as demanding as coding is.

There is nothing wrong with taking naps after lunch either, just don’t take long ones. Half an hour should be enough for your body to rest and to give you enough energy for finishing the work day. We know that once you are done working, the energy just comes back out of the blue.

And if this doesn’t help and you still feel tired, then it’s time for…

4. Working out and exercising

Yes, this is always a way to get rid of the tiredness. I am not saying you have to work out until your muscles get sore. Go out and take a short run, do some push-ups (I love this one, that one or the other one) or just move around the house for few minutes. Just moving your muscles for a short amount of time will give you back some energy and will make you active again.

Exercise during your breaks - it will give your energy back.

Image by Johhnyberg

In general, having a healthy life style will do much more for your freelance career than you think. Only being healthy and managing to sleep well during the night will give you more energy than others have. Therefore you will be able to work for longer periods of time, avoid naps and be able to concentrate better. I’m not saying you should, but going and talking to a doctor about your situation might be good advice. See if you need some vitamins and if you do, don’t hesitate to take them. You might not feel a difference, but I am sure your body will.

5. Outsource if you can

Outsourcing is one of the ways a freelance designer can take on a huge amount of work. Because you can’t do them all, having someone to help you might come in handy. If there are things that you hate doing or are just not good at, think of getting another freelancer to help you. It can be paying bills, invoicing, administrative tasks or even chasing clients. Get somebody who can find clients for you, this way you will never have to spend time on it. Find somebody to market you and the only thing you will have to worry about are your deadlines.

Paying somebody else to handle some of your business is not wrong and is a very common practice these days. You can even charge the client a bit more and use that extra cash to pay someone to help you. There are so many virtual assistants out there that price will not be a problem at all – there are many of them who will do a fantastic administration job for a few dollars an hour.

If you want to get more serious and hire other designers or developers to work with you, this means you are ready to create a small business and as long as it works for you, why not try it?

6. Reuse work

Because time is important, it’s smart to “recycle” the products created before and use them again in new projects. You can save some time and stress and get a bit more free time and also get ahead of schedule.

There is nothing wrong with using the same JavaScript snippet again, as long as it is developed by you. If you develop a really good default CSS stylesheet, reuse it every time you start a new project. Moreover, search for work on the internet which is available for free and make use of it. The three hours spared by using something free from the internet can be used for other projects or tasks.

Reuse your previous work if you can - it will spare you time.

Image by 7rains

Lots of clients come and ask if I can develop a web page with a Content Management System. Well yes I can, WordPress is out there and it also takes only a few minutes to install. Why develop their own, when I can instead use the same amount of time to customize a theme for them? Reusing work you’ve previously done is a smart way of saving time and working more efficiently, and don’t forget, free stuff from the internet can help too.

Conclusion

It fascinates me how people choose web design for a career when they are young and so passionate about it, but when they get close to their 30′s start hating their job and are not motivated anymore. Success is one way of staying motivated and if you can follow the rules above, you will most likely achieve it. Pulling all-nighters is something you will have to do often and if your body can’t handle it, then you need to make sure you’re the most organized person you know so that you can complete your work and not need to pull all nighters.

Being organized is one of the most important skills of a web designer in my opinion because I am sure not many of us can afford being otherwise for the following 20 years. Try to have a schedule and stick with it, it is important for short-term, but crucial for long-term. This is the only way you will be able to achieve success, stay motivated and have a better design career and a happier life.

Now it’s your turn. What advice do you have for your fellow freelance web designers / developers?

So you might ask yourself what to do to improve the code before delivering a web page. Well, lucky you, there is a tool out there which I will review for you today. The tool is called CSS Lint, it is totally free and I definitely recommend trying it and see what you can get out of it. The difference between a good and a great programmer is all in the small details CSS Lint can fix for you – or, at least, can tell you to fix them and why.

CSS Lint is an open source application that checks your code syntax and, according to the latest web standards, gives you a list of mistakes it spotted in your CSS code. It is similar to the W3C Validator, only it gives you better descriptions of your issues and offers suggestions about how to solve them. The tool is very easy to use. The only thing you have to do is paste the source code and choose the rules you want to be enforced (and there are lots of them). CSS Lint will start analyzing your code immediately after you hit the lint button and it will not take too much time until you will see a full preview of how good your code is.

The rules

As said before, you can choose your code to be checked by certain rules and I will give you a list with all the rules you can choose from.

1. Errors

• Beware of broken box sizing.
• Require properties appropriate for display.
• Disallow duplicate properties.
• Disallow empty rules.
• Require use of known properties

2. Compatibility

• Disallow adjoining classes.
• Disallow box-sizing.
• Require compatible vendor prefixes.
• Require all gradient definitions.
• Disallow negative text-indent.
• Require standard property with vendor prefix.
• Require fallback colors.

3. Performance

• Don’t use too many web fonts.
• Disallow @import.
• Disallow duplicate background images (new feature)
• Disallow selectors that look like regexs.
• Disallow universal selector.
• Disallow units for 0 values.
• Disallow overqualified elements.
• Require shorthand properties.

4. Maintainability and duplication

• Disallow too many floats.
• Don’t use too many font sizes.
• Disallow IDs in selectors.
• Disallow !important.

5. Accessibility

• Disallow outline: none.

6. OOCSS

• Disallow qualified headings.
• Heading should only be defined once

The good part about any of these rules is that CSS Lint gives you a full explanation of each of them and, in most of the cases, recommendations on how to improve your code and keep the same functions, but avoid the specific mistake you made.

All these rules definitely make sense, but there is no time to take a look at all of them, so I will choose the most important and give you an explanation about why it’s a mistake to use them, and also some tips about how to replace them with valid code. This is only to give you a preview of the tool, you can obviously dig into it more later.

Disallow duplicate properties

A few years ago assigning the same property to a container was a mistake, although it is not considered one today. Today this is used as a way to deal with varying levels of browser support for CSS properties. There are browsers out there which support RGBA colors and there are some that do not, so a snippet like the following one would be accepted:

. container { background: #000; background: rgba (255, 255, 255, 0.5); }

Moreover, the following lines are also OK:

. container { border: 1px solid black; border: 1px solid red; }

However, this is not accepted and is puts up a warning when the two properties are separated by another different one or when the properties have the same value:

.container { border: 1px solid black; border: 1px solid black; }

or

.container { border: 1px solid black; color: red; border: 1px solid black; }

Require use of known properties

As more and more properties are accepted in a CSS file, this rule makes sure you don’t have any typos in your code. It is like spelling check in Microsoft Word. This rule checks each property name and makes sure it is a known CSS property. If there is a vendor-prefixed property (the ones beginning with a -), they are ignored by the tool, because they may add in their own properties. A normal CSS validator would warn when such a property is used (-moz-border-radius sound familiar?), because it doesn’t recognize the name, but CSS Lint doesn’t.

a { color: red; } would be accepted, but a { colr: red; } would be displayed as a warning, because the property colr does not exist. The following snippet: a { -moz-foo: bar; } would not be displayed as a warning.

Don’t use too many web fonts

Using too many web fonts is clearly bad technique, not only from a design perspective, but also from an accessibility and usability point of view. A web page that has to load more than one (maximum two) web fonts at every refresh is going to load very slowly and we know how this affects the user experience on a site.

Web fonts should not be overused.

The tool searches for the popular @font-face property and warns you when there are more than five of them. However, I personally don’t recommend you use more than one and, if you can, try to avoid using them at all.

Disallow too many floats

The float property is used to achieve a columnar layout in CSS. Some of us have been thought we have to use as many floats  as possible to ensure everything stays in place, but this is not the case anymore. Today there are lots of grid systems out there which you can download and they do not have an excess of this property. They are also made by expert developers and do not have usability flaws. The 960 Grid System and The Grid System are two incredible grid generators and I recommend you check them if you haven’t already.

Moreover, using one of these grid systems will decrease the amount of code you have to write yourself, which will help you deliver the web site faster and make the final product better.

CSS Lint warns you when there are more than 10 floats used (which is something most of the designers already use when they create the basic layout). Analyzes have been made and it seems the grid systems improve web site performance (source), so why not take advantage of them?

Don’t use too many font-size declarations

If your website is well-organized, then it probably has a small set of font sizes. However, many designers prefer to use a clearly visible hierarchy and do this by playing with the font sizes. Well, this would not be a problem either if developers would code it properly. Instead of using font-size 15 times, define three classes and use each one of them five times. To better illustrate, take a look at the code below:

.small { font-size: 10px; }

.medium { font-size: 13px; }

.big { font-size: 16px; }

The font-size property should not be overused - try classes instead. Image from: www.dtelepathy.com

This way, instead of declaring the size of the font 15 times, just point the container to a class. This is known to be much faster and to improve the loading speed of your web page. If there are more than 10 font-size properties used in your CSS file, this tool will show you a warning and a description of the issue.

Disallow !important

The !important property is used to increase the specificity of a given property value. If a web page has many instances of this property, it is a clear sign that the developer uses it because he has problems styling the page effectively. Therefore, CSS Lint displays a warning when the !important property is used.

Heading should be defined only once

The heading is an Object-Oriented CSS (OOCSS) which works by defining certain objects that can be used to place a particular object anywhere on a web page and display the same. For example, the heading elements (h1 to h6) are built-in objects and should look the same wherever they appear. This means developers are not allowed to define the same element multiple times.

The following code displays as a warning:

h3 { font-weight: normal; }

.box h3 { font-weight: bold; }

As you can see, the h3 has been defined twice, once for general use and once when used together with the class called box. This is not allowed! However, headings can be defined more than once when the hover property is used:

h3 { font-weight: normal; }

h3:hover { font-weight: bold; }

CSS Lint is nothing more than a tool

The bottom line is that CSS Lint should be taken as what it is – a tool. This means that no developer should code like this tool wants only because it says so. There are some rules that developers might not agree with (like the controversial OOCSS rules) and nobody forces you to use this tool as a Bible. CSS Lint should only be a tool to help you if you want to know where you can improve. None of us like to find out that we have issues in the way we code – so some of us might reject it.

So, the conclusion?

Even though there are some issues with it, I think CSS Lint is a tool you should start using. None of the ways of coding is the best one, unless we think it is for the purpose of our project. If you think you’re doing everything right, then so be it. Otherwise just try to use CSS Lint a few times and see if it improves your results. If it does, it might be worth to stick with it.

CSS Lint is also a very good way for beginner developers to learn more about the way they code and the way they should do it. There is nothing wrong with that and it is never too late to learn something new.

Do you think CSS Lint is useful? Did you know about it or have you used it? Did it improve the way you code or the loading speed of your website? Or was it a waste of time?

1. How do you feel about working alone?

Freelancing can get pretty boring sometimes and working alone is not something everybody can do. If you find enjoyment in working with people in a group, then freelancing might be something to avoid. You will probably get lonely and might want to have someone to chat with and this is not likely to happen if you freelance – don’t forget there is a schedule to follow and a deadline to keep.

Moreover, there are lots of designers and developers who like to ask for feedback or ask people around for help, this is something you should consider as well.

On the other hand, working alone has some clear advantages. If you like to work in a peaceful and quiet environment then working freelance in your own office might suit you better than a nine to five company job. Some of us really need to concentrate when we work and therefore prefer to work alone.

Anyway, regardless of which way you like to work, it is always a good idea to have some backup places to go and work from if you need. As a busy freelancer your social life might suffer and being near people while working might even increase your results. Bookstores, libraries or any place like Starbucks or McDonald’s are sometimes good for your workflow.

2. How about motivation?

OK then, you like working alone and can’t wait to start, but are you motivated enough to keep this up when it becomes your everyday life? Otherwise freelancing might not be for you either. Think of all the moments when you will need to step it up a notch without anyone pushing you. Can you push yourself?

Source: somewhere on the internet

Can you get up in the morning, eat and start working immediately instead of connecting the yoke and flying that Boeing from Amsterdam’s Schiphol to Charles de Gaulle in Paris? Just think this is only one of the few moments when you will need to go make some money instead of having fun. Deadlines are always tight and you always need to meet them in time, otherwise you will be considered unreliable and will end up with no clients and without clients you end up with no money.

3. Are you pleased with just enough money?

Freelancing for extra money is a bit different from freelancing for a living. Unlike what everyone thinks, freelancing does not fill your bank account too much. Sure, you control the amount of money you charge, and to some extent the amount of money you make, but if you want lots of money at the end of the month, you will have to work a lot, because money doesn’t just fall from trees on the internet – as a matter of fact, there are not even trees on the internet. In the beginning you might not even make enough, because nobody knows you and you need a portfolio to land big jobs (sure, if you have a portfolio already, lucky you, but not everyone who starts freelancing has one).

The good part is that you have full control of your money. You decide if you charge per hour, per project or if you work for free just because you want to. You also decide how much you charge for maintenance of a previous project or for a client that has been with you for five years. This is all in your hands – and you need to be able to manage your money wisely. If you make a fortune this month, the following three could be dry.

4. Will you go abroad?

Working freelance allows people to collaborate with individuals or companies from all over the world. This is a huge opportunity for anybody who knows a foreign language (English should be enough though) and is willing to go abroad and look for work – not necessarily going there physically, but who knows, it might land you that dream job of yours.

Photo by fraserd

Thinking of this beforehand is important because you need to market yourself in such a way that clients from China, India, Croatia or Greece will all be interested in your services – or only some of them, depends who are you interested in. Working with local clients might not be so difficult, especially if you have lived somewhere for a long time and know the surroundings and the culture, but going abroad is definitely a challenge and you need strong personal skills for it. When the internet is full of scammers, only a strong portfolio and personality will convince someone abroad to hire you for big bucks.

If you market yourself to the local clients, then you will also rely on some other channels than internet. If you want to go abroad, internet is the only way to become known and get some work.

5. How does your portfolio look?

It had better be good, otherwise everybody will skip it. Having a powerful internet presence is the only way you can make a name for yourself out there, with so much competition. Before going and marketing yourself, make sure your portfolio looks at least decent. Update the content, keep the latest contact information and make sure everybody gets what it is you offer. Your online portfolio is the place everything starts from, so make sure that when users look at it, they imagine and wish to hire you.

6. What are you good at?

This is a question you should ask yourself regardless of the career you choose and it is of utmost importance when freelancing because you have to market yourself in a specific way. In a company, once you get hired, you don’t need to advertise you or your services, but when you are a freelancer you need to do this all the time. Find out what it is you are good at and make sure people know it only by looking at your work.

It is also important to have general knowledge, but to specialize in something is crucial. Don’t market yourself as a generalist (and don’t be one either). Sure, it is good to know a bit of everything, but have strong knowledge of one or two things and call yourself an expert in those fields.

7. Where is your office going to be?

This is a bit different from the first question although it is closely related. If you like to work alone, then home might be a good choice, otherwise you might even need to rent an office in order to be around people, or maybe even work in a public place (although I do not recommend this third choice).

Photo by barunpatro

There are advantages and disadvantages to each of them and even if working from home seems the best one, it is really not. It is always difficult to stay focused on work and not start doing laundry, mop your floor or watch TV. In an office space you won’t have these problems, so this is the advantage of a more professional working space. However, if working from an office, talking too much with your colleagues will have the same effect and you will not be able to meet your deadlines. It is smart to find a balance between working alone and around other people and finding the right working space for you.

You can find some tips for your home office here.

8. Do you have future plans?

And if you do, where do you see yourself in five years? Will you be a freelancer forever or do you just want to do it now until you will be able to find an agency job? Do you wish to hire some more employees to work with you and turn your freelance hobby into a professional small company? Do you wish to work your way up in the freelance world and become well-known all over the internet?

You need to consider all these things; not only for the sake of having something to think about, but also because you need to run your business accordingly. Moreover, you don’t want to freelance for life if you don’t enjoy it too much. On the other hand, if you really like to be a freelancer, then why search for a more stable, agency job for the moment?

9. Should you become one of us?

Well, if you went through all the questions above and still think this is for you, then this is the final test. Do you really think freelancing is for you? Is it something you are truly passionate about? Are you ready for all the challenges, for getting clients on your own, be maybe close to starving in some bad months, take vacations rarely because you don’t have time for it and so on? Are you certain freelancing is the way you want to go? Because if your answer is still YES, then I am sure you will enjoy a lot of success and will avoid failure at all costs, only because this challenging career seems to suit you better than many others.

Do you think there is something else to consider when starting a freelance career? How was it when you started, what was the most challenging thing? How did you manage to go through with it?

Well if you haven’t, I can tell you for sure that you do. By using portable devices more often and desktop computers less the latest gadgets quickly become out of date. Without realizing we have become unplugged and do not need computers anymore – which also means we do not need browsers anymore. And why would we? At the end of the day we have our smartphones filled with apps that can keep us busy for a long time. Sometimes I don’t even check my Facebook from my computer, even if I am close to it, because it is much easier to do it from the phone. Ever since the IT world made it possible to connect to the internet wirelessly, nobody has looked back. People invest much more money today in phones and portable devices like tablets or eBook Readers than in computers.

Image by ~jeroen-tje

Internet without a Browser

It is easy to see how we’ve become unplugged. Apple’s iOS and Android do it; Adobe Flash Player 10.2 and AIR technologies as well. HTML5 starts becoming more popular and supported on many portable platforms and other companies like Blackberry or Nokia follow in close. There are over 400,000 applications in the App Store, an incredible growth from 500 in the beginning. Android has around 400,000 applications and the numbers are increasing. The year started with around 300,000 apps for both platforms and ends with, very possibly, close to 1 million of them. Android included Flash from the 2.2 Froyo version and this made the portable devices running on the open-source platform even more popular. And you know what the good part of this is? That you don’t need anything besides a WiFi or 3G/4G connection to access them from all over the World.

Why do we talk about apps when we’re talking about browsers? Because if you think about it, the applications are nothing less than websites which are accessed without a browser. And more than 10 million of them were downloaded in 2011. That’s a huge amount of users who accessed this information from a portable device, avoiding using a browser. And it should be a clear sign about the future of the web. The apps are more intuitive, faster and easier to use, therefore they are preferred to Chrome, Mozilla, Safari or any other application. Another advantage is that the apps can be accessed from everywhere, while for a browser you not only need internet, but also a computer.

Smartphone and the Internet

A smartphone will also always allow you access to the internet, so why have a big laptop when you can have a pocket device that can do the same? A study made two years ago concluded that by 2013 mobile browsing will be more popular than desktop browsing. With the usage of smartphones growing by 110% in the US in 2009 and by 148% all over the world, this seems quite possible. Also, the younger internet users get educated in the world of smartphones, meaning that the computer will mean even less for them than it does for us.

source: BettyArmado via Chrome Store

This could be great news for designers – up til now everybody had to have a webpage, soon everybody will have to have a mobile device version as well. More work, more money for the design industry. China for example is a huge industry with tremendous potential. Not many people there have tablets or smartphones, but many say in 3-4 years everyone there will own one. With a market of almost 1 billion mobile subscribers, there will be a huge need for mobile websites for the companies and business individuals. So, bottom line, the fact that web browsers are on a downhill is not that bad for us – we will still have a lot of work anyway.

Right now there are more than 300 million mobile internet users in China and this is around 60% of all mobile and desktop internet users all over Europe – we’re talking huge numbers here. We’re talking about the Chinese equivalent of eBay, Taobao on which the transactions for the last year totaled roughly $60 billion; and this is while eBay was delighted with a total of only $2 billion. All of these things happen while the major internet providers already update the speeds to 4G. You see where I’m heading? As designers, we might be concerned that our jobs will disappear in 15 years but really, who knows how many other challenges will appear for us by then?

However, the truth is that it always takes up to five years after a new web technology appears until people get a hold of it and learn how it really works. Smartphones are huge today, but I don’t think they reached their maximum potential yet. There is still a lot yet to come and just because we think we know everything, it doesn’t mean we actually do. Web browsers are still popular and widely used, but they will be a thing of the past at some point in time, because nothing lives forever on the web. There is no such thing as a technology which didn’t improve since it was released (unless it was released recently).

Conclusion

The bottom line of this article is that even if the browsers disappear in several years (or at least their use will decrease), there will still be a lot of work for designers and developers. The internet is almost fed up with designs and experts, in five years time it will all move on portable devices. This means, as stated before, much more work for us, both for desktop and portable devices. All the technologies will be available on portable devices as well at some point in time and designing for them will be maybe even more challenging than designing for desktop use.

The beginners of today are the experts of tomorrow. We all know what’s coming in the short term, so why not try to become better at this while letting the current experts do their work? Who knows, in five years it might be you who earns the big bucks from all kind of clients and, as its normal, there will be others taking your place in the “follower seat”. The increasing use of smartphones and tablets bring a new taste in the design industry, with many new challenges yet to come. Get ready to take on all of them!

Forms

Pretty Checkboxs with jQuery

This is a cool tutorial that teaches you how to turn your ordinary check boxes into something stylish, and quite fun to use.

Pretty Checkboxes with jQuery

Rethinking Forms in HTML5

This is a great tutorial by the people at Nettuts+ about how you can get the most out of HTML5 for your fomrs.

jQuery Impromtu

jQuery Impromtu is a great replacement for alerts, prompts, and confirmations that users will enjoy and not find annoying in the slightest.

jQuery Simple Modal

Simple Modal is a flexible modal dialog framework which provides a great interface for development, allowing for some really nice looking forms too.

jQuery Simple Model

mcDropdown

This multi-column drop down layout is great for giving users a detailed tree of options to select from.

mcDropdown

jQ Transform

jQ Transform is a great tool for adding some style to your forms, giving them cool skin elements.

jqTransform

Emblematiq Niceforms

Niceforms by Embematiq is a cool jQuery plug-in that allows you to turn your boring forms into something cool with one of their designed themes, or with your own custom made one.

Emblematiq Niceforms

Uniform

Uniform masks your standard forms with custom skins and works in perfect sync with your real form elements, ensuring great accessibility and compatibility.

Uniform

Image Buttons a Part of Input Fields

This is a great tutorial to learn how to have image buttons inside of your input fields.

Images As Apart of Input Fields

DynamicWP Contact Form

This is a great WP plug-in that gives you a contact form that slides conveniently from the side of the page, and then back once it is no longer of use.

 

DynamicWP Contact Form

jQuery Highlight

jQuery Highlight is a great jQuery feature that gives your active input fields a highlight over them, as we know some users need all the extra guidance they can get.

jQuery Highlight

jQuery inline form Validation

jQuery inline form Validation is a cool hassle free form validation option that takes away the mess that is usually associated with this form feature.

jQuery inline from Validation

Navigation

White Smoke Menu Style

This jQuery powered navigation menu is very reminiscent of what was usually done in flash, and moves so smoothly you might think it was. It is fully browser compatible, and even maintains functionality if Javascript is turned off.

jQuery White Smoke Menu

jQuery mb.Menu

This jQuery menu plug-in is a great option to look into when aiming to build a complex multilevel tree menu with some style and great functionality.

mb.Menu

Coda Slider

Coda Slider is a very versatile and feature full panel slider. It comes as is very well suitable for your panel slider needs, and there have been great advancesin how to better it.

Coda Slider

 ID Tabs

This is by far the best tabs and/or panel navigation jQuery plug-in when level of how extensibility is concerned.

ID Tabs

Smooth Horizontal Sliding Menu

This is a cool tutorial that teaches you how to make a jQuery powered menu with the sub entries sliding out horizontally.

Horizontal Sliding Menu

jBreadCrumb Menu

This collapsible bread crumb menu that collapses based on the the amount and length of the elements in the set.

jBreadCrumb

jQuery FLOWERNAV

FLOWERNAV is a cool animated navigation plug-in that, well gives a flower effect to your link.

FLOWERNAV

jQuery Accordion

This is an easy to follow jQuery accordion style navigation menu tutorial.

Accordion Style Menu

Interface

jQuery Slide Note

Slide Note is a great plugin for giving your visitors a little hint, or note about something on your website.

Slide Note

jQuery Page Peel

Page peel is a simple to use jQuery plug-in that is great when you want to advertise something in a cool way.

jQuery Page Peel

jQuery InfiniScroll 

InfiniScroll is a cool plug-in that allows for an never ending scrollable section. This is great for websites that have sections with long lists.

jQuery InfiniScroll

jQuery SliderNav

SliderNav is a jQuery plug-in that allows you to incorporate dynamic vertically sliding content to your website.

SliderNav

jQuery Tipped

Tipped is a cool plug-in that easily allows you to add tips to your website’s content, there are also cool skins to choose from.

Tipped

Supersized

Supersized is a jQuery plug-in that allows you to have a image slideshow as your website’s background.

Imagin8

Imagin8 is not just another jQuery image slider. This one allows for you to direct a path folder, so ALL THE IMAGES DON’T HAVE TO BE IN YOU HTML! Just label your first image as 1.jpg for example, and the following the numerically after that, and they will be automatically added to your slideshow. Great for clients.

Imagin8

jQuery Lettering

Lettering is a jQuery plug-in that allows you to have complete control of  every letter, opening for great creative web typography experimenting.

jQuery Lettering

jQuery Stylesheet Switcher

Stylesheet Switcher is a jQuery plug-in that lets you set links within your page to change to different stylesheets.

jQuery Stylesheet Switcher

Flip

Flip is a jQuery plug-in that lets you flip your web elements in one of four directions.

Flip

To all website owners out there who are wondering what’s wrong with their website, I suggest you read this (and part one) and learn from the grave mistakes of others. This is also good for people who are thinking of creating their own website. Be sure to read the comments because, very often, the gems are hidden there!

Too Much Pagination

Have you visited Cracked.com lately? Their articles are paginated, but that’s a good type of pagination since you’ll rarely see it exceed two. The problem with other websites is that they’re too concerned with page views that they tend to chop a 1000–word article into five or ten parts (seriously, I saw one news website do this)! Needless to say, I never visited the website again. This might not be the designer or developer’s fault, but internet entrepreneurs should be educated on how to deliver content well.

Hidden Text and Links

You have text in your navigation and content partly because of SEO, right? As mentioned in Part 1 by our readers, using images for navigation is okay, but how will search engines crawl them? Answer: “text-indent: -9999px” (it’s over 9000!), or hiding the text using CSS.

Now, this is something very controversial. In my search for free, and good, WordPress themes I stumbled upon this article by Siobhan which talks about hidden “spam” links on many free WordPress themes. These free themes are bad for SEO, Google has a policy about hidden text and links which states that intentionally hiding the text/link behind an object or out of the screen’s view may be cause for the removal of the site on Google’s search results page.

Click to read more about Google’s take on Hidden text and links.

In-line Styling

To demonstrate the evils of in-line styles and what damage they can do, here is James’ comment:

Again, this was pointed out in the previous part. Instead of using an external CSS, some insist on styling on the spot –  which I am very guilty of! While the appearance will clearly be the same, this is still a bad practice because as the website grows, so does the styling for everything. While using an external master sheet may seem to be a daunting task for some, the ease of access to it is far superior than navigating through a series of HTML tags looking for the thing you need to change.

Again, stop in-line styling and create an external CSS. It’s also a good way to recycle codes, right?

Too many Social Media buttons

(website’s name is intentionally withheld for my safety; some are highlighted look below)

Competition is high, we understand, but having 10 social media buttons at the end of each article? Seriously? Today, people are content with Facebook, Twitter, Google+, and sharing via e-mail (share via e-mail?) so let’s keep it at that. No need to add seven or ten buttons because 1) it doesn’t look good because it seems like you’re hogging, and 2) it’s not pleasing to the eyes.

Splash Pages and Pop-ups

Well, it actually depends. If it’s an 800 x 600 advertisement I probably won’t visit again. 1stwebdesigner is also guilty of this, and I’m pointing this out because I’ve seen comments  and e-mails jeering the pop-up. The good news is, we will be limiting its appearance and probably remove it totally. For that, we’re sorry for any inconvenience it might have caused you. But, again, blocking the view is never a good practice, save for a limited-time campaign.

While I was looking for a cheap hosting company for my website there was this hosting company that won’t let me get out of their website. The first click on exit button there was a JavaScript pop-up telling me that they’ll offer me a 50% discount. What?

Also, I’m sure you’ve seen this “Share” button somewhere. I really hate this, and I’m sure many of you will feel the same. It pops out whenever the cursor is hovered over it and stays for a few seconds.

This will be my second time calling names. GooglePlusAnswers.com is a whole new level of splash/pop-up/irritating.

Why must I share or like or tweet or +1 your website or wait 30 seconds before you grant me access? Sadly, it does not stop there. If you don’t want to share, you’ll keep on seeing the same thing all over the website.

This lame stunt also happened during Facebook’s debut. “Like this to unlock content” my a–-!

Dark Background and Light Font Color

To demonstrate, click the image to open the website and read a line or two. After reading, open Google. It buuuurns!

Perhaps the greatest affront a designer can do to the world is…

…not striving to learn new techniques when the whole world is changing rapidly. As a designer, it is your duty to go with the flow, to commit necessary changes when the world demands it. Part of it is to educate those who are below you so that the spread of good practice will propagate. If there is enough reason to believe that your design is not doing any good, instead of waiting for it to work, why not find a different method to make things work?

So, what say you? I’m pretty sure I’ve missed quite a lot of bad practices, so fire them all below!

Up Next

Next time we will talk about the small things that web designers do which make people love them. Small things mean a lot, right? For instance, a simple horizontal rule to separate content smoothly, usability options for challenged individuals, and many more. Stay tuned!

For professionals and experts in the field, we need your knowledge and opinion here!

When designing you should always think several steps ahead because the initial design can make or break everything. Always ask yourself the following:

• Will it be easy to maintain when it grows?
• Will it be easy to access?
• How about SEO?
• Will it be easy to update/make revision?
• What will it cost?
• How will the users react to it?

iFrame and Tables

For employers/clients out there, there will be designers/developers who will sacrifice future convenience for a little comfort at the present moment. Like doing things the wrong way (because you won’t notice the difference anyway) because it’s easier and faster to do. For goodness sake designers and developers, do the right thing from the start even if it’s harder to do and harder to learn.

Wait, what did I just talk about?

First, with tables. <table> was designed for tabular data, not for structuring websites. It’s for showing figures like in Microsoft Excel. Obligatory, it was once a fad to use tables to structure websites, but that was pre-CSS. If you made the reckless mistake of structuring a website using tables, I’m afraid if you do not correct it soon, it will be a snowball of problems in the future.

Problems how, exactly?

1. SEO –  according to a friend of mine who’s into web development, although content inside a table is crawled by search engines it is still better to use <div> because it is crawled first. When it comes to crawlers, the first thing they see is the most important.

2. Code and Maintainability –  wait, code is for coders, not for designers! Wrong. Even if you consider yourself a pure designer, you should still learn how to code. Especially learn the workings of HTML and CSS. Now, tables are very hard to maintain, especially when the website is a large one. Aside from the labyrinth-like nested code of tables, there is the issue of maintaining it properly. In cases where a large website, using tables, needs to be updated..it will be hard to pull data and restructure the website. That I promise you.

How about iFrames? iFrames are cool. You can load a single frame without affecting the other frames. It can also be used to..wait, what? iFrames are more ancient than tables (lol). Users will have trouble bookmarking an iFramed website because there are literally many pages in one page.

So, what should a budding designer and developer use?

For the love of Batman, use CSS and learn AJAX. <div> is much better, and was designed for this very purpose: easy to maintain. You want to load data easily without refreshing the whole page? Learn AJAX!

Animation

Even Nathan Fillion is disappointed.

Even the slightest movement can be detected by your peripheral vision. Humans have evolved with very sensitive peripheral vision to avoid a predator’s attack. Over thousands of years, once we’ve all become conveniently secured from vicious animals, the almost-instant reflex is still with us, making slight movements outside our focus irritating.

This is also the reason why advertisements with animations should die, especially on blogs and news websites where people spend a great deal of time reading, with eyes focused on each line. A slight blink to the right will instantly remove a reader’s attention, although in due time people will learn to filter them out, it still bugs many people including me.

This brings us to marquee. They were once hot, at least for noobs, I even used to add one on every webpage during my freshman year in college. To beginners out there, NEVER! Sadly, I know a couple of high schools and colleges that teach their students to use marquee.

Images

No, please, don’t use images for your navigation. Aside from sacrificing the website’s loading speed, you are also telling the whole world that you’re greatly outdated.

Let’s take bad practice to another level: different image on hover. Never. Even if your client says so, fight to the death for your right to practice what is proper.

If the website’s purpose does not require it to display images, it’s better to design using CSS. I’ve seen websites use background images that load like a turtle, what’s worse is that they’re full 1024×800 images.

Instead of using images for navigation, use text and CSS for effects.

Then there’s the question of what image format to use. I’m no expert when it comes to this so I’ll refer you to a post by Rachel Arandilla (one of 1stwebdesigner’s regular contributors) about Different Image Formats. It should give you a good idea of what image format to use for the web. Mostly, it’s PNG and GIF, with an exception of JPEG for high-quality photos. Still, visit and read the article for an in-depth explanation.

Music and Video

Specifically background music. A startled visitor will ask, “where is the boombox?!” and will just close the site, a 100% bounce.

I’m not a fan of name calling, but just this once I will name one website that auto-plays its video: Sidereel.com. Follow these easy steps: 1. select one TV show and click it, 2. wait for it…, 3. wait for it…, 4. did you hear it? It’s auto-play!

In any case, never auto-play anything. If you need to auto-play it, at least have the decency to start it on mute.

Your Turn to Share

These are very basic, and very old, practices that were once hot. A lot of has changed since these outdated methods were considered cool or good, but there are still people who are go down the wrong path. So, how do we prevent this from happening? By telling the world the correct practices. Now it’s your turn to share!

Ancient practice is ancient. Watch out for part 2!