Tag Archives: css

How to Visualize CSS Font Properties


Add to iTunes | Add to YouTube | Add to Google | RSS Feed

What is your favorite font of all time? If you say Comic Sans, I’m going to jump through the camera. I admit I used to use Comic Sans back in the day when I started doing newsletters. If you’ve ever had the need to create a web page and needed to change the way the font looked… you likely opened a CSS editor. And then – you were probably lost, since it’s not easy. There’s a tool out there, however, that will easily help you tweak any font you can find!

Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. The code structure is XHTML, styled with CSS and driven by JavaScript. Typetester won’t work for you unless you have JavaScript enabled.

Choose your type face from the list, including all that are commonly installed on your computer. Change the color, background, size, tracking and more. There are three columns of text, and you can change each column individually of the others. This way, you can just keep messing with things and tweaking them until you are completely happy with the way your font looks!

If you’ve ever wanted to change your font settings, and know nothing about CSS – this is the way to go. It’s very easy to use, and there’s nothing to install. You’ll learn about the elements inside of CSS, and you’ll get an idea of how things work!

Go ahead – you know you want to play around with your fonts!

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

How to Organize Text and Programming Code


Add to iTunes | Add to YouTube | Add to Google | RSS Feed

Managing text in a single text file is a bit of a kluge. Let’s say that text happens to be code, such as PHP or CSS. You may want color highlighting, so that if you make a mistake you’ll be able to detect it easier. You want to have a text management tool at your disposal, no matter what operating system you happen to be using.

The free Snippely is just what you’re looking for. It’s an Adobe AIR app, made by the folks at Google Code. Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location. A snippet is a collection of one or more pieces of code and notes. Snippets are stored in groups for organization and quick retrieval.

You set up groups, and you have sub-groups within those. You can add notes and colors to different parts of your group areas. It’s really easy to do, just drag-and-drop things where you need them to be. You can even choose to make the notes appear in plain text!

Whether you’re managing plain-text snippets, or code snippets, Snippely is going to work great for you.

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

How to Make Money With Web Design

Geek!This is Ashmiester’s submission for the HP Magic Giveaway. Feel free to leave comments for this article as you see fit – your feedback is certainly welcomed! If you’d like to submit your own how-to, what-is, or top-five list, you can send it to me. Views and opinions of this writer are not necessarily my own:

Do you want to make money with web design? Almost every organization has some kind of web presence on the web today. Does that mean there is no room left for new designers to get into the business of designing bespoke websites? No. In fact, it is a good thing, because a huge fraction of the existing websites out there are full of issues including bad design and technical errors. This can be for a majority of reasons with any bad website; perhaps the buyer was on a low budget, made it themselves with little experience, or just got completely ripped off by a bad service.

Whatever the reason, this opens a door for designers to do website redesigning. This is not much different from designing a website for a business that does not have one. The only difference is that it can be a bit easier because at times you will be transferring content from the client’s old website, or perhaps using an existing structure. I would say around 80-90% of my clients already have some kind of web presence, and they are at a stage where they are willing to spend some real money.

Getting Started

As long as you have some kind of skills in creating websites, you can absolutely do this. And you know what? Even if you do not have any website creation skills, I have provided some great resource links at the end of this article for those that would like to get started on the skills necessary for this lucrative industry. The first time I was paid to make websites, I only knew the basics, and then the more I did the more I improved. It is actually not that hard becoming a web designer, all it takes is some time commitment. It is good to start off learning HTML, CSS, and some basic interface graphics. Scroll to the bottom if you would like to check out the learning resources right now. Otherwise, read on.

A Safe Investment Opportunity

A great thing to keep in mind is that web design can be such a low-investment business opportunity as long as you go about it the right way. The only costly things tend to be some of the one-off costs, such as having the right software and actually having a computer to work on. I am not saying that these do not need upgrading ever, but to me a one-off cost is something where you are not paying for it on a recurring basis. Here are a couple of important tips on keeping this all a safe investment:

  1. Work from home. At least to begin with. It means you are saving money on the rent and bills involved in having an office. In my experience, it is best to start small because you then do not have to put as much funding into things that are not so necessary to have right away.
  2. Buy cheap but quality hosting. This is done by finding a small package offered by a reputable hosting company. I use the smallest package at www.1and1.com, because it is all that is needed for the hosting of a web design company’s website. It costs $3.99 per month ($23.94 per 6 months) and includes a domain.
  3. You do not have to quit your day job (if you have one) straight away. You can start by doing the odd project here and there while you are still employed. I actually do part-time studies and work full-time with my web design business. I love it, and I would not have it any other way.

Name or Business Name?

You have two choices, you can work as a freelance web designer under your full name, or you can operate under a business name. In my eyes, the latter is much preferred. Freelancers can be awfully undercut these days; you are more likely to make good money as a business. Not only will people take you more seriously but there will be the opportunity to get staff or partners later on if you so please.

The first thing you need to do is secure a .com for your business. Having a .com is pretty standard, I would ignore .net and .org if I were you. You can always have them additionally later on if you like. When thinking of a business name, do not try to be too smart with it. "[Something] Designs" or "[Something Media]" are the kind of names that give people an idea of what your business does when they hear the name. What goes at the front does not matter too much as long as it is not particularly ridiculous. It is also more appropriate on a corporate level if you eventually get some big-time contracts. Create a shortlist of the names you have thought up that you like, and see what is available for domain registration (I use GoDaddy).

If you are having trouble thinking of a business name, you could, for example, try combining colors with animals. Black Crow Designs, Red Wolf Designs, Purple Monkey Media (or not). You do not have to worry too much about thinking of a name, because it is your service that will be defining your company’s quality.

Setting Up Your Web Presence

Whether you are looking to deliver to clients locally, across the country, or all over the world – you need to have a home website for your web design company. The website is to show information about what the company does, what work it has done (a portfolio), how you can be contacted, what services you specifically offer and what the prices are. There are other things too, such as providing the general terms for contracts and the payment options. The more details, the better. But don’t cram your website with too much, keep things neat and spaced appropriately. This website is going to be a big part of selling yourself, so it should be a breeze to navigate and read.

Also, the design and layout are going to show what you are really capable of (besides your actual portfolio). And make sure you have a nice and recognizable logo in your header somewhere. If the website looks bad then you could be losing out on a crazy amount of business. So put your all into making it look great!

Putting a Portfolio Together

So, are you wanting to get into web design business but lack a strong portfolio to get people interested in your services? I will be honest, this will take some work if you really are at square one.

Do not worry, you can rapidly build a portfolio by doing some free websites for businesses, bands/musicians, artists, freelancers, etc. These are also the kind of clients you can get paid business from in the future. And while you are doing work for free, you are in return getting the experience of working for clients and having something to put into your portfolio on your company’s website. Once you have built these sites, you can charge money for any maintenance they would like from you in the future. They just got a free website from you, so that is completely acceptable.

Getting Clients

To be honest, getting clients is not actually too difficult. Back when I wanted to start my own web design company, people would tell me it was a bad idea because there would be “dry patches”. This means going for a while without any business. Put it this way: if you put effort into marketing yourself effectively, you will absolutely get clients. Before I learned to become more organized, I had queues of clients that I just did not have the time for. This excited me though. I really enjoyed marketing myself because I believed in what I was trying to sell. I truly believed that my potential clients needed my services in order for them to further their business, and I still do believe that.

The best way to start getting clients is for you to find them, rather than them finding you. It costs a lot of money advertising for people to come and find you, so do not worry about spending that kind of money just yet. Here are some tips on marketing yourself effectively at low-cost:

  1. Get some business cards printed. I started by getting a few hundred printed for cheap, with my company name and business logo on them. Include important details such as your own name, along with your cell number, e-mail address, and of course the URL of your company’s website. I used cardsmadeeasy.com as I am based in the UK. If you are in the US, uprinting.com has some good value printing services. 1000 cards for $25 is pretty awesome.
  2. Walk into small businesses of any sort and tell a member of staff who you are and what you do, then just leave your business card with them. If they show an interest and ask questions, give them as many details as possible. And remember, you are selling yourself, so give them the reasons why your services will benefit them greatly. You may get their business there and then, or you may have to wait for a call. Do this to as many local places as possible, especially independent businesses.
  3. For potential clients that are not based quite as close by, write a short letter explaining your services just like you would face-to-face, then mail multiple copies, with a business card, to places that have bad websites or perhaps even no website at all. I got a good few clients by doing this, but the only downfall is that they may want you to travel to them if they do business with you. That is why local clients are best. It can be very worth it anyway though, especially if it is someone paying you a lot of money.
  4. Referrals. Ask all of your friends and family if they know anybody who needs a website doing. Hand out more business cards and tell them to pass them onto people. If you are not getting results, then put a twist to it. Offer potential referrers a small percentage of what a client will pay you if they find that client for you. You could offer around 5-10% depending on what you are being paid. Advertise it on your website too. This is useful for getting those first paying clients in, but to be honest I still use this method today because it does get me good business, and word about the company spreads.
  5. Similarly to the above, you could do a special offer that is to take place for limited time only. You could offer 10% off of any quoted price, or something like $50 off with a promotional code. I now only do this with some of my fixed-price services, such as website packages and my hosting services. These kind of things are really great for drawing customers in, trust me. We all love discounts.

Be Prepared…

I have met some great people through my design business, but there will always be clients that are difficult to deal with. To avoid clients walking all over you, make sure you put everything into writing if someone is going ahead with your quoted service. Also, take a deposit upfront. Usually anywhere from a third to a half of the full amount is a good idea, then they can give the rest during and after the development of the product. Or the rest of it could be put into the form of a monthly payment plan if the client is budgeting.

The last thing you want is a client refusing to pay for many long hours of your hard work. Yes, people can be this cruel, even if they seem very nice! So secure some money upfront before going ahead with the project.

Extending Your Services

Doing bespoke web design is great to start with and as your primary service, but why stop there? As you grow, your services can too. Why not also offer logo design, video creation, Flash animation, DVD authoring, media printing, or perhaps multiple-use web templates? How about buying reseller hosting so that you can provide a hosting service to go hand-in-hand with your clients’ websites? You can also look at offering services for certain types of websites such as e-commerce, database-driven websites, CMS (Content Management Systems), etc. You could do work for marketing campaigns. I have also seen design companies provide website management training at hourly rates.

There are so many possibilities in this industry which gives you the opportunity to make more than a comfortable amount of money. Just be sure not to offer too much from the beginning, because you may find that it is just too difficult to deliver. It may also mean more investing in one go.

Conclusion

Thank you if you had the patience to read this little guide, and more importantly, I hope you got something out of it. I think that anybody is capable of starting a profitable web design business, and to top it off, it is something that is so flexible it can be worked around your job or studies if you wish not to do it full-time.

If you have any questions or suggestions then please post a comment. Keep in mind that everything I have written is based on my own experience in becoming a self-employed web designer. Perhaps you disagree on a part of the guide due to your own experiences. If so, please do post a comment. Other established designers reading may well have other methods of becoming a good business. I am interested to hear.

Thank you again my precious readers, and good luck on your quest to making money with web design.

Learning Resources

Learning HTML/XHTML (Hyper-Text Markup Language) is definitely the first step. It is the code that structures and formats the appearance of a web page, and is particularly easy to learn and use.

Here are some great HTML guides to get you started. Plus a whole array of different HTML tutorials for once you get some basics down:

CSS (Cascading Style Sheets) is a very structured language for formatting websites more efficiently, also enabling more enhanced formatting. It is also easy to use. Here are some great CSS guides to get you started. Again, there is a ton of different tutorials you can try out once you have some basics in mind:

It may be worth investing in a copy of the latest version of Adobe Photoshop if you are serious about web design. There are some nice and basic web interface design tutorials at these links:

Free learning is the way it should be. Enjoy your learning experience.

How to Get Started With Computer Programming

Add to iTunes | Add to YouTube | Add to Google | RSS Feed

Programming is NOT as scary of a task as you might imagine. I know some people who shudder at the thought of learning any programming language. However, take a read through these tips, and find out for yourself how to get started.

  • Save your coding often! Everybody knows the feeling of having worked for several hours on the same thing and you lose it for various reasons (the computer goes down, program crash, power out). I usually save every five minute or every time I have written a line.
  • Backup your code! Kind of for the same reason as tip 1. When working on a mac it is really easy to back up with Time Machine. I do this every night before I go to bed.
  • Write proper comments everywhere. Comments are very important. Even though you might not find it useful at the time you write the code, imagine how it is if you do not look at the code for a year. It will take you up to several hours to figure out how the program runs if you have to read the code instead of the comments. It is also a requirement to use commenting if you are developing code as a team.
  • Keep your code clean. Linebreaks are free. Separate your code in chunks sorted by what it does. Make it easy to overcome. Combined with tip 3 you are good to go. It is also good to separate the code in files. Files for functions, common used files and so on.
  • Test your code often!!!! Whenever you have made a simple part of the code, test it. Writing 400 lines of code before testing is a nightmare. Do it as often as you can. Output your variables to see if they contain what they are supposed to. Also twist your mind to be predict every possability of program crashing and error reporting. E.g. If the end-user is supposed to input a variable. Check if it is a variable, if not, stop and tell the user. Not checking stuff can be fatal and is the main reason websites get hacked.

[rsslist:http://shop.tagjag.com/products/Computer+Programming]

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

Aptana Studio Web Development IDE

Add to iTunes | Add to YouTube | Add to Google | RSS Feed

A community member who uses the name of Fatal email me today. He said he was looking for an alternative to Dreamweaver, and came across Aptana. This is a free, open-source application, and wanted me to try it out.

Aptana Studio 1.0 is indeed an open-source application… for the community version. There is, of course, a Pro version, which is right around $100.00. The caveat to this program at first glance is that it is Java-based. Not to diss any Java programmers out there, but let’s face it. Java is just doggy at times.

If you look past the speed issues, you’ll probably be quite happy with Aptana. There is a lot of troubleshooting built in, and not just for HTML. You’ll also find support for CSS, Javascript, and more. There are tons of features in this program, much more than I would normally expect from an open-source project… especially in its early release stages. This is definitely going to be something to keep an eye on. With a 1.0 version this good already, it will be interesting to see what the developers do with future versions.

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

TopStyle 4.0

If you’ve been itching to get ahold of the next version of TopStyle for CSS editing, looks like you’ll have to itch a little while longer. From the official forum thread, Nick Bradbury weighs in on the Cascading Style Sheet fanatical discontent:

Apologies for not jumping in here sooner – I guarantee that while I’ve been quiet in this thread, I haven’t been quiet about making sure that TopStyle has a future. The delay in our response hasn’t been due to a lack of desire to create a new version, but instead a lack of time and talent (let’s just say that I bit off more than I could chew when I decided I could handle two popular apps by myself!). As Ronnie states, we’re still planning a TopStyle 4.0. However, there’s a good chance that someone other than myself will be in charge of developing it (I will, of course, still be involved in its design).

I use TopStyle for CSS editing, too – as does most of the working Windows world. No word on whether Microsoft’s new Visual Web Studio is any better (or worse) than TopStyle, though. PSPad comes with TopStyle lite, which enables me to quickly edit Cascading Style Sheets. For the most part, I can do simple CSS tweaks from personal memory. Still, I’m looking forward to new versions of TopStyle (the definitive CSS editor on the Windows platform).

Mnemonic Web Design

I’ve been in tweak mode for the past few days, getting this blog ready to duplicate for a coming Lockergnome project (based on MultiUser WordPress). In futzing with my CSS, I’ve had to enter values for positioning left and right (literally). You can define the spacing for margin-top, margin-right, margin-bottom, and margin-left separately – or you can define the spacing for all four (or less) in a single margin property. Employing “margin: 10px 3px 3px 10px” is easy. The trouble is, I could never remember which one was for which position! But I didn’t stay in TRBL for long. Top, Right, Bottom, Left – no trouble at all, so long as I can remember to keep myself in TRBL. Mnemonic devices are so nices.