- Internet & the Web
A List of Essential Web Design Skills
Your Web Designer Needs To Know These Things . . .
Hi - My name is Liz, and I'm going to describe the key list of skills I think you need in order to become a freelance web designer, or web developer.
These are the skills list you need to work towards if you decide to build your own site by hand. If you are freelancing on your own, it is not the same as working as a web designer for a company. As a freelancer you need a broader understanding of a wide range of web skills. You also need to know when your skills are good enough for the job at hand, and when you need to get help.
You can also read this hub as a list of skills that your web designer should have if he or she is going to be of real value to you.
In either event, what follows is a personal opinion. So please do comment if you agree or if you disagree.
Stuff You'll Need
Before you start on your web design journey, you're going to need
- A fast PC (or MAC), but preferably a PC with a screen capable of a high resolution (1900 x 1200 preferably)
- A fast internet connection that is always on
- Some reliable hosting
- A domain name and an email address of your own
- You'll need software too, but much of what you need to develop your own sites is either free, or very cheap. The only really expensive software I use at the moment is Photoshop, but there are cheap (and free) alternatives to that too.
Efficient Working Environment
A Little More About That Computer Of Yours
A Quality Working Environment Matters
When you start doing web design work for yourself, you'll find you need access to a number of web pages and tools at once. You may have a number of open windows up on your screen and if your PC is under-powered, you'll find the process more frustrating than it needs to be, which will interrupt your concentration, so hinder your progress.
Why Do I Say You Need a High Resolution Screen?
The benefit in having a display with a high resolution - practically this means you won't have to move windows around in order to read a page or use a tool. The whole window containing the entire thing you are looking at, will fit on the screen. This saves time and your temper.
See How A Typical Screen Looks at 1900x1200 Pixels
If you click on the image above, it is a screenshot of my PC screen - see how many windows I can have open all at once, that I can see without having to move them around too much? This saves you HOURS of time.
Learn XHTML for Free
- Click to learn XHTML
W3Schools is the best free resource online for learning XHTML.
XHTML / HTML
XHTML is the basic language of the web. Using this technology alone will enable you to write simple, text based web sites. If you put your mind to it you can learn enough of this in an afternoon to make a simple, no frills, static web site.
Now I don't advocate this if you are trying to sell your web design skills, but if you are a newbie, just starting out, you can write a very simple site just using XHTML and you can do it without too steep a learning curve.
An example of what XHTML looks like is shown on the right. Click the image to see it full size.
XHTML is the computer language used to build the ordinary text on a web site and display images. Almost every website you'll see is made up of XHTML or HTML. This is a relatively easy language to learn and if you put your mind to it, you'll be writing XHTML pretty well within a few hours.
You can type this stuff in using notepad or an ordinary text editor. Or you can obtain an XHTML editor which will colour code what you type and help you correct syntax (the grammar of programming languages) errors.
Same XHTML - Different CSS - See The Different PagesClick thumbnail to view full-size
Learn CSS for Free
- Click to Learn CSS
The best free CSS learning resource for beginners
The Power of CSS
CSS stands for cascading style sheets, which is a bit of a funny name.
It basically means that if you write a nice plain XHTML web page, you can make it look completely different by applying a separate CSS style sheet file to it.
This is powerful and simple - imagine - you can write a web page that looks one way, and by only changing the style-sheet you can make it look completely different.
Click the image thumbnails on the right. Each one is exactly the same web page, using exactly the same XHTML. The only difference is each one has a different style sheet and images applied to it.
Now do understand, to get these types of results with CSS you'll need to be very good at it, and have great graphic design skills.
BUT the point I want to make is that even just using pure CSS and XHTML, (and practically no graphics), you can still achieve a simple, good looking site that people will love. Actually people tend to prefer simpler sites in the long run - the ones they visit every day.
Bottom line - you'll need to learn CSS. And more importantly. IT'S NOT HARD.
- change something when the user rolls his cursor over an image or a link - for example you might change the image or re-colour the link
- validate some user input on a form
- open a new window - a pop-up window.
- DOM Example
Learn the DOM for Free
- Click to Learn About the DOM
One of the best free resources online to learn about the Document Object Model
The Document Object Model
The Document Object Model, or DOM, allows a web designer to programmatically manipulate the contents of a web page.
What do you mean I hear you say?
Well, if you are new to web design I don't blame you for wondering what on earth I am talking about.
So - if someone clicks a link on your page, you could (if you wanted to) decide to make a new paragraph of text appear, as if by magic next to the link.
Knowing about this sort of stuff, even if you don't strictly know how to do it, means you will be more aware of the possibilities available to you on your web pages.
- Example of a DHTML Script
Snowy scene with subtle falling snow.
Learn About DHTML For Free
- Click to Learn DHTML
The best free introduction to DHTML
Next you'll need to learn about DHTML - known as Dynamic HTML. It's not another type of XHTML - it's the same XHTML we talked about earlier, but rather DHTML is concept of using all the following technologies together :
- The document obect model (DOM)
These components of DHTML have already been described so I'll just talk about what DHTML does for you.
Ok - are you ready?
Now when I say dynamic, I don't mean images jumping about all over the place. Rather more that at some point, you might need to send an item of data from one place on the page to another at run-time.
However, just to show you the sort of thing DHTML can do and also to let you see something you should no longer think about doing to a web page -the link shows a subtle snow effect over a photo.
- Ajax Example
Substitutes an image at run-time using Ajax, and without refreshing the screen.
Nowadays AJAX is used widely in Web 2.0 style web sites as it can, in most cases, significantly increase the user experience.
A simple example is shown in the link on the right : A random image is substituted by going to the web server, generating a random number which corresponds to an image, and then sending the image to the page. The page does not refresh. Cool uh? Look - don't despair - if you don't understand why this is cool. Yet!
How A PHP File Is Processed into XHTML
Server Side Scripting - e.g. PHP
You'll need to understand and use at least one server side scripting language. Examples of these are:
- ASP or ASP.NET
to mention just a few. I use PHP as do many freelance web developers.Server side scripts allow your web pages to do a lot more than straightforward XHTML pages.
Basically, a server side scripting language is something that the webserver runs before building the XHTML web page, and may even generate XHTML on the fly. It is also used to access databases, so you can retrieve information about customers, products or users and once say a user is logged onto your web page, you can make the page personal and relevant to the them.
SEO Squirrel is Written With CodeIgniter
CodeIgniter Introduction Tutorial
Although you don't need to use a PHP framework, (assuming you are using PHP as your scripting language), it can help to do so. I resisted for some time, but found that I was coding the same boring bits of web applications time and time again, so now use my PHP framework of choice which is CodeIgnitor.
CodeIgniter suits me because it is EASY. The advantages of CodeIgniter are many. The number one advantage being that it is utterly simple to install, both on your Windows development box AND on your Linux webserver. To install on both, I guarantee will take you a maximum of 1 minute per installation. Try that with symfony, Zend Framework CakePHP or any of the others.
CodeIgniter is small and fast and easy to use. Even if you have never heard of the MVC architectural pattern.
That said, if your web developer does not use a framework, no worries. It is just better usually for productivity if he/she does.
Database Skills - e.g. MySQL
MySQL is a freely available relational database management system and is the best choice for the freelance web designer.
A database enables you to store information that you can retrieve at a later date and enables you to store :
- specific items of data about customers
- allows for customer login and password retrieval
- personalisation of web pages
- customer accounts and history of transations
- product descriptions and pricing
The list is in fact, endless and is entirely dependent on how you want the database to enhance the functionality of your website.
You will need database design and maintenance skills in order to create well organised and extensible design. But, I want to say - it is another thing to learn, true - BUT - it really isn't that hard. I did a Computing Science University degree in the UK, and studied database design so I know it from the academic viewpoint and from having been a database consultant for years in the City of London banking environment. That was a challenging time - I mean I had to tune (like tuning an engine) databases with many millions of records.
You probably won't be dealing with more than a few thousand records in any database you create for your first or second web design project. So don't worry about it. It is a lot to learn, but if you want to, you can do it.
If you don't, then like I said earlier (or maybe in some other hub) - go see Ken Evoy.
Search Engine Optimization - Internet Marketing
There are four elements to internet marketing - the process by which you bring targetted traffic to your web site. Namely :
- on page search engine optimization - this is where you construct each page on your web site to be as appealing to search engines as it is to humans
- paid advertising - this might be pay per click advertising
- excellent website content- this means you can't just have a 5 or 10 page website (well you can initially, but you have to add a new page or three every week, or so until you have hundreds of pages on your web site). Excellent and copious content will attract incoming links
- off page optimization - this is where you use directories, social media sites, forums and others to bring in relevant traffic and add to your search engine density.
Build It And They Will Come . . . No They Won't!
Many people believe that all you have to do is build a pretty, web site with a cool design with about 5 pages and people will flock to it. They just don't get it. The site shown up above is one such site. Since creating this hub, the site has been taken down.
How cool is a site that looks good when it gets few visitors.
- web design is not all about graphic design
- web design is not secretarial (typing)
- web design is not something a graphic designer can just turn his hand to
- web design is a comprehension of, and ability to use a large number of internet technologies
Photoshop - Making It Look Good
All right - you don't need to learn how to use Adobe Photoshop in particular. There are lots of other image manipulation programs out there that cost a lot less. However, there are zillions of Photoshop tutorials for practically anything you'll ever want to do, so I tend to favour the use of this program.
Now don't get me wrong. I am not suggesting that by learning this program you will become a talented graphic designer - you may already be one, in which case good for you.
But if you are like me, you don't have any graphic design skills. Just make your mind up to learn a few simple tasks using this tool, and you'll be able to make professional, graphically enhanced websites without being artistic.
Sister Snog Flash Website
Flash Examples and Resources
- Flash Animator
An easy to use flash animation tool
- All About Flash
Wikipeadia on Flash
- Sister Snog
I have no idea what this site is or does. It IS a Flash website - but I was too bored by it to stick around long enough to watch it unfold. Imagine if you signed up to their site - it wouldn't do to be in a hurry to log in, would it?
You Can Avoid It If You Want To
Unless 100% Flash web sites are something in which you want to specialise, there is no need to dash out and buy a copy of Macromedia Flash right now.
Check Out Sister Snog
See the link on the right ->>>>
Like I said - what this site is about doesn't hit you straight away. I think that is the downside of slow reveal flash sites. It is graphically beautiful BUT the information it contains is severely limited. This means people will not be flocking this this site in their thousands from the search engines. They won't be able to find it. The site owners probably don't value Google search engine listings and must have found a better way to make their site known. Maybe off-page, via Twitter and other social media, and/or by PPC.
Try doing a site command in Google like : site:www.sistersnog.com. You can see there are very few listings. That's the sum total of what Google knows about the site. But interestingly, if you do this command instead : site:sistersnog.com (without the www), you'll find they've tried to address this by starting a blog in a subdomain of sistersnog. This looks like a new addition to the site, and should help a lot in bringing in visitors.
Flash Doesn't Work Well In Search Engines, True . . .
The reason is, that whilst a full-on Flash site can look wonderful and display safely in any size of screen, using any flash enabled browser, it generally has very little textual content. And what little content it has, (unless you take extra steps to duplicate the content in XHTML and employ a measure of cloaking), can't been seen by search engines. This situation is changing and a friend of mine called Fadi is an expert in making Flash sites visible to search engines. If this interests you, please contact him at solutions416.
. . .But Text Isn't What Flash Is All About Anyway
Flash is after all primarily a graphical tool, and text features low on the agenda of most fully Flashed web sites because if the designers wanted a lot of text, they would probably have used XHTML instead.
The answer to using Flash for most of us is not to build 100% full Flash sites, but rather to use Flash in key situations on a standard XHTML site, deploying it only where you need to make a visual presentation of the type that Flash does so well.
Used in this way, Flash is not the container, but rather one of many possible items in an XHTML container. Used this way, Flash has no impact on search engine visibility and you can use the rest of your site to communicate using text and images.
There are many low cost, Flash generation tools that you can use to create small Flash presentations. I really like 3DFA and use it for most of my Flash output.
On Page Search Engine Opimization
As you build your website, you'll need to keep in mind what your goal for building it is. Presumably you'll want visitors - a website with no interested visitors isn't really up to much is it?
It's Not Hard
There are a number of simple steps to take to optimize each page for search engines like Google. Other types of optimization nowadays take place off page (i.e. with the other things you do to create interest in your site that don't take place on your site), but you should not neglect the foundational importance of on-page optimization. It is part of what makes your site eligible for appearing on a first page position in Google for example.
Briefly, you'll need to create good quality title tags, description tags headings and content, that are on target for each page's topic. You'll need to make sure each image is properly tagged, (I saw a 'guru' on a YouTube video the other day actually say that alt tags on images are no longer important - like DUH!). Alt tags on images ARE important. But maybe you need to learn how best to write them for both your visitors and for Google.
There is a lot to learn if you decide to become a web designer, and more importantly as I hope I have emphasized, a lot your web designer needs to know before you hire him/her. I will add to this skills list over the next couple of days as I can think of quite a few more items to include.
Just Starting Out With A Business Web Site?
If you are just starting out with a new business and need a website, you can of course hire a web designer to do everything for you, but do consider
- finding the right web designer with the types of skills I have talked about
- maintaining the site yourself without resorting to tools that turn the process into some sort of WYSIWYG-fest. If you hide behind point-and-click tools you will never understand what is going on and never know how to apply subtle but important code changes to site. You only have to spend some time in Site Build It forums to see that much.
- I don't believe you can really be serious about making your living online unless you have a big starting budget and can afford to hire people to work (and think) on your behalf, or if you already know everything you need to know and can therefore competently outsource.
- well, this hub is over 3 years old now, and a lot of stuff has happened since I wrote it. One of the things we have done is to stop doing so much web design work and now we create more products. We are building a new product that will create sites -WordPress sites - professionally for you at a low price, including all aspects of what we believe makes a good website. It won't stop you having to learn, but it will prevent you getting stuck on the way as your site will be technically correct and good looking from day 1. If you would like to be on the mailing list to be notified when the first version of this product is ready, please visit the contact page here : and let me know you are interested.
Think About Maintaining Your Website Yourself
So by all means pay someone to start the site for you - you know set up the basic template and the first few pages, but thereafter you or someone in your organisation needs to be in control. I believe your web site is too important to entirely outsource its development.
If you can find someone competent to start you off (and I don't mean someone who can only do beautiful drawings, I mean a technical web designer who knows how to use a template to make up for their graphics shortcomings) who can do everything functionally you could ever dream of with a web site, and ask that person to answer your questions when you get stuck, you could think about handling the update and maintenance of the site yourself.
You'll be amazed at how your confidence will grow and the upside is that when you do really need help, you'll be in a strong position to figure out who can help, how much it should cost and you'll be pyschologically prepared to learn from the experience.
Please don't forget to contact me here if you want to be one of the first to use our new low cost WordPress site builder product.