|
|
|
After receiving many requests for advice on HTML and web design, I thought I'd post up this article. It was written for the 'expert help' section of Internet Magazine, UK - I hope some of you find it useful!
Please note: I've now written a book on the subject, 'Max Hits, Building and Promoting Successful websites', and the accompanying website has loads more tips and useful links!
Create an original website - without paying a fortune!
by Mike Slocombe, Internet Magazine, June 2000
» Intro
» What PC?
» Learning the code
» Get graphic
» Snap!
» Structure the thing!
» Getting your webspace
» How do I get my stuff online?
» How do I get people to look at my work
» Preparing graphics for the web
Forget all the tosh that some people might tell you: to produce your own original, inspiring and professional looking website, you don't need a huge bank balance, piles of the latest software and the brain of a mighty boffin.
Anyone with enough determination and dedication can produce a great looking site on budget tighter than a crab's arse, using nothing more than shareware tools, a lot of hard work and a whole shedload of imagination. With loads of companies now offering free internet access and web space, getting your work online no longer need be a trouser-emptying experience either.
The first - and hardest thing - is to come up with a good idea for your site. Don't decide on the first thing that comes into your head after a night in the pub, but take time out to research and plan out your site. Think long and hard about what would make your site uniquely interesting (in ad-speak they call this a USP = unique selling point) after all, if someone's already done a site on the same subject, why should anyone bother looking at yours?
Don't worry if your idea is a bit odd after all, in the mad world of the web it's often the most obscure and bizarre sites that end up becoming popular so pursue your own weird obsessions with pride just so long as they're legal, natch!
Some of my favourite sites are enthusiastic homages to failing football teams, dodgy bands and curious webcams so don't worry if you think your topic won't be of interest to others with all those billions of people on the web, you'll be sure to find some soul mates somewhere!
Trawl through search engines like Altavista typing in keywords relevant to your site and see what's out there. Learn from the mistakes of others and be inspired by the good sites you see, making lots of notes for future reference. If anyone's already done a site with a related theme to yours consider approaching them to swap links when your site is up.
It's important that whatever you decide upon, you must make a clear plan of action with set deadlines and realistic aims if you set yourself outrageously over-ambitious goals, you'll soon get fed up and head back to the pub. Start simple and let the site grow at a pace that suits you by putting aside some time every week for updating the pages.
Try and rope in as many people as you can to help keep the site stocked up with new content and if you find interesting articles in newsgroups, write to the authors to see if they'll let you reproduce it. Always strive to find new, interesting and relevant articles and archive any out of date material the trick is to reuse everything!
Remember that one of the beauties of building a website is that nothing is permanent so if you don't like the look of something you've done you can change it seconds. Use this freedom to experiment with ideas and learn from the feedback of visitors (be sure to include a feedback form on your site).
Many successful web designers started life with the crappiest of sites, but through perseverance, experimentation, grim determination and a sprinkling of luck eventually got noticed. Learn from some of these success stories at www.coolhomepages.com
What PC?
Even the crankiest old PC should be capable of putting together a basic website, but if you intend to be creating a site with lots of graphics, you'll need something that can at least run a basic paint editing program which could be nothing more than a steam-powered £200 vintage PC. You may nod off to sleep while it's working, but it'll get the job done just as well as a £1,000 beastie.
Learning the code
One of the biggest myths about starting your own website is that you need the latest wallet-crushing versions of expensive HTML authoring tools like Dreamweaver or Net Objects Fusion to make a 'proper' site. This is, of course, total bobbins. HTML is nothing more than a collection of plain text commands that tells the browser how to display the page, so all you need is a rough understanding of HTML and software no more advanced than Notepad (Simpletext on the Mac) to get the job done.
Sure, it might take a little longer at first but remember - some of the best sites have been made using nothing more, and a good knowledge of HTML will considerably enhance your job prospects if you fancy a job in the web business later.
While it's easy to get totally intimidated by all the technologies with baffling acronyms like ASP, DHTML, CSS and ActiveX surrounding the web, it's worth noting that many sites rely on nothing more than simple HTML for their core content and that it really is an easy-peasy thing to learn. Unlike tough programming languages like Java and Perl, the basics of HTML can be picked up in minutes it's that simple!
There's hundreds of great online tutorials around like www.webmonkey.com, http://www.wdvl.com and www.webpedia.com/ to help get you going, as well as comprehensive free manuals downloadable from www.ncsa.uiuc.edu/General/Internet/ and
http://www.htmlgoodies.com/primers/primer_1.html
However, if you're like me, you might find it easier brewing up an industrial sized cup of coffee and learning from a good ol' fashioned book.
I recommend you steer clear of huge bookshelf-threatening volumes that promise (threaten?!) to "UNLEASH THE POWER OF THE WEB!", and stick to straightforward and concise reads like the excellent, “HTML for the WWW” (4th Edition), E. Castro (Peachpit Press) (isbn 0-201-69696-7) or Hodder and Stoughton's HTML for Beginners. Both these books offer clear, concise and highly readable tutorials that will have you building pages in no time.
As your knowledge of HTML grows you might want to move up to more powerful HTML editors like Arachnophilia (PC) and BB Edit (Mac) which are both available for free download.
Get graphic!
Of course, a whole site of pure html with no images would be a dull experience indeed, so you'll need to learn how to create graphics for your website.
Remember that good web design is a skill that takes years to master and is not something to be slapped on at the end as an afterthought. Good design should reflect the content, tone and functionality of a site and graphics should be used where appropriate and relevant. Keep them as light as possible and try and use some restraint when deciding colour schemes.
If you're not confident about your design skills, it's always best to keep it simple very simple and concentrate on the content of the site. Try and pick up tips from sites you admire and experiment with some of their layouts on your own work (but don't just lift the whole code!)
Go easy on the bevelled edges and try to resist filling the page with pointless garish eye candy, ten ton animated GIFs and mad backgrounds it might look 'kewl' at first but most visitors will have already seen it a million times before. Never inflict horrendous MIDI tunes on unwary visitors to your homepage and if you really must have a page counter, hide it on a different page as they always look crap.
Thankfully, there's a load of great graphics resources out there to provide you with some basic design guidelines. Take a look at:
You don't need to mortgage your house for the latest version of Photoshop to get going - almost any old cheapo paint package is good enough, and thankfully there are plenty of perfectly adequate shareware packages out there (like Paint Shop Pro, www.jasc.com) which can help you create great graphics for your site. You can find plenty of graphics software to download at www.tucows.com and http://www.download.com and there's even a website that will optimise your images for you for free: http://www.giflube.com/?journal.
If you want your site to stand out, it's important to resist the temptation to trawl the web for off-the-shelf clip art and freebie graphics and slap them all over your site, as it'll only end up looking like everybody else's be original! And never, EVER, post up an 'amusing' "under construction" 30k animated GIF on your homepage while you're building the site. People will laugh at you and your web inadequacies forever.
There are a few basic rules for using images on the web (SEE BOXOUT) but a little time spent working on your graphics will result in much happier surfers. For a guide to preparing images for the web, look at: http://webreference.com/graphics/
Snap!
Try and use original photography on your site. This doesn't mean that you need an expensive digital camera try dusting off your old 35mm camera and scanning in the results.
Scanners have got ridiculously cheap recently and most film cameras will still outperform their digital equivalents, although a digital camera makes the process much simpler. If you've got a scanner, consider scanning in objects directly, or experimenting with different textures and materials (try to resist the office party favourite of putting your arse on the scanner, though). There's a handy guide to optimising photos for the web at: www.webtools.com/story/graphics/
If you fancy yourself as a bit of an artist, why not scan in some of your drawings to spice up your site? Or butter up an arty pal and get them to contribute anything rather than cheesy clip art!
Look around at other websites for graphic ideas, and check out some of the excellent graphics books available. They might be a little pricey, but they can quickly repay themselves with inspiration. Some of my favourites include Typographics 1 (HBI), Web Design 100 (Axis), Browser - The Internet Design Project (L King) and Hypergraphics (Rotovision).
Structure the thing!
Be sure to take your time planning out the structure of the site, as it's much harder to correct later. Try and work out a consistent and intuitive navigation system that makes it easy for visitors to know where they are in relation to the rest of the site. Always offer up relevant choices on each page rather than making visitors constantly bash the 'back' button. Check out Jakob Nielsen's excellent book, "Designing Web Usability: The Practice of Simplicity"
New Riders Publishing, Indianapolis, 2000. ISBN 1-56205-810-X.
Getting your webspace
These days you can hardly move for free ISPs and net companies falling over themselves to give you loads of free web space to get you started. Not only that, but it's really easy to register your own domain name too, so you can give your site a professional-sounding URL, rather than a hideously uncool address that rambles on forever.
Take a look at the classified section of this magazine for example companies. One word of warning though: some of the web companies bundling cheap domain names with their webspace can sting you when you try and move servers later, as can some of the ISPs who start to complain if your site gets too busy. If you're planning your web space as a commercial venture, it might be worthwhile checking out the terms of some of the more expensive ISPs and comparing details.
Either way, I'd recommend getting your domain name pronto: with 3 new co.uk addresses going every minute, it won't be long until there's only the really, really duff names left!
How do I get my stuff online?
With software like Cute FTP (www.globalscape.com) and WS-FTP (www.ipswitch.com), uploading a site is a breeze. All you have to do is log on to your ISP and copy the files from your machine to theirs just like transferring files on your machine. If you're not sure how to do it, check out the brief guide at www.whatis.com
When you've got your site up and running, there's some handy websites around which can check your links and look out for dodgy code. www.htmlhelp.com/tools/validator/ and validator.w3.org/ will analyse your HTML, while http://www.netmechanic.com/link_check.htm
www.websitegarage.com/ and www.fullsitetuneup.com will report on broken links and more.
How do I get people to look at my work?
There's no point in putting in all that hard work if no-one's ever going to visit, so the first thing to do is to try and get the site registered with the big search engines. This isn't exactly the most straightforward of tasks, but thankfully there's a handy free service at submit-it.com with useful guides at searchenginewatch.internet.com to help you get the recognition you deserve.
It's important that you put META tags throughout the site to help the search engines correctly index your work. For a guide to meta tags go to vancouver-webpages.com or let the Meta Tag generator osu.orst.edu/aw/promote/search/ generate them for you automatically.
Another way to get traffic is to enter the site for online awards http://awardsjungle.com will enter you for 150 of them in one go. Of course, most of these awards are utter pants, but it can help persuade easily impressionable folk that your site is worth visiting. There's nothing to stop you dreaming up your own awards and dishing them out to your favourite sites just make sure you offer them the code to have an icon linked to your own site.
You can also post up in related newsgroups and tell people about your site - but subscribe to the groups for a little while first to make sure it's appropriate and allowed.
Don't just go for online promotion either ring up your local paper/radio/TV station and spin a few yarns about the success of your site and see if you can blag a feature for yourself. Be cheeky and ring up PR agencies to get interviews with well-known people for your site.
But all this hard work will go to waste if you don't keep your site regularly updated with fresh content if the pages stay the same too long people will soon drift off, ne'er to return so keep it fresh! Consider offering a mailing list to keep visitors updated and be warned running a web site can soon become very addictive indeed!
Preparing images for the web
Remember that the larger the image, the longer it takes to download. There's always a compromise involved when putting graphics on the web too big and they take forever to download, too small and you can't see what's going on. Here's some tips to help you find the right balance:
Keep it tight: Get in close with your camera and fill the frame. Remember your picture may end up being very small on the page, so you need to crop out any extraneous details.
What's the resolution, Kenneth?
Don't save files for the web at a higher resolution than 72 dpi (dots per inch). This is the screen resolution of most monitors, so producing files with a higher definition won't make any difference to how it looks on screen - but it'll weigh a whole load more.
Beware the behemoth!
Keep your images light and fast. JPEG is usually the best format for photos on the web, but be careful how you compress the image: too little and it'll weigh a ton, too much and it'll look a blocky mess. GIFs work best for flat artwork. Many graphics editors let you preview what the compression will look like, but my favourite for this task is Image Optimizer (http://www.xat.com), which will crush JPEGs and GIFs mercilessly but keep them looking good. Aim to keep main images around 20-30k.
Backup your original images.
Each time you open a JPEG file and resave it, it loses quality, so always keep a copy of the original image in a lossless format, like TIF - that way you've got something to fall back on if your creativity gets the better of you.
Don't enlarge your images on the computer you'll only end up with fuzzy and pixelated images. If you need a larger image, retake the shots.
Note: some internet sites have an annoying habit of vanishing as soon as I've linked to them. If any of the links above are dud 'uns, please check out my other site at www.max-hits.net, where I make every effort to regularly check its admirable collection of links (honest!)
|
