Beyond Tags: 7 things to take web design further

Puzzle graphic

Good web design is about putting the pieces together to create websites that are attractive, usable, fast and useful.

So, you’ve completed an introductory web design course and now you’re starting to feel comfortable with HTML tags and perhaps you’ve even done a bit of PHP. The next step is mastering the art of putting it all together to make websites that are attractive, usable, fast and useful. This post will outline 7 of the most important technologies, concepts and approaches that will help you make the transition from theory to practice.

1. Get a project

A really good way to learn web design is to read web design books. But a better way, is to design websites. Doing is also more fun than reading. So, choose a project to work on and get stuck in. Here are some ideas to get you thinking:

  • A personal website, perhaps with details of any projects you’re working on and your CV.
  • A blog – about a hobby, interest or a challenge you’re going to be undertaking.
  • Family archive – with details about your family history, a family tree and old family photos.
  • Photography – show off your photo collection.

2. Learn how to publish

You can start designing straight away, but there’s two things you’ll need in order to publish your website online – a domain name, and web hosting. The domain name is your unique name (www.example.com), you can choose any name you like as long as nobody else has registered it first. You can check the availability of a domain here. The final thing you’ll need is web hosting, which is online storage space where your website lives, and where your domain name directs to.

There are thousands of web hosts, and you have to be careful to ensure the one you choose supports everything you need – in particular ensure it has support for PHP 5 and MySql databases. The w3schools website has a good indepth tutorial on web hosting. Here are a few UK based hosts I can recommend:

So how much is all this going to cost? Setting up your own website is surprisingly cheap – for domain names think less than £10 per year, and for hosting £2+ per month. Once you have your domain and hosting, you’ll have somewhere to experiment with ideas, as well as a home for your latest project.

3. Learn the 4 web languages

Printed HTML code

Concentrate on HTML, CSS, Javascript and PHP

There are so many web programming and markup languages you could learn, many of them with very admirable aims. But in truth, if you are accomplished at HTML, CSS, PHP and Javascript then that will be sufficient to achieve about 99% of what you’ll ever need to. If you feel the need for extra information about any of them, then I suggest you start with the excellent w3schools website. Your ability to use these languages will strengthen magnificently once you’re pitted against a real problem that you’re passionate about, so use them in your project from point 1.

These languages are most likely what your introductory course focused upon, and rightly so since they are the foundation of web design. However, while these languages are indeed the foundation, they become so much more powerful when wielded effectively, and used alongside certain tools. The following points will introduce you to some exciting tools that you will need to know about if you’re going to be designing the next facebook, flickr or twitter.

4. Use PHP Extensions

When learning PHP you were probably given exercises to do such as validating an e-mail address but in truth, common tasks like this have been done thousands of times before and there is no need to do them again. Enter PHP extensions. There are PHP extensions for handling all sorts of problems such as the GD extension for processing images or FTP for transferring files. PHP extensions have generally been written by far cleverer people than you or I and have been tested thoroughly so are likely to be far more robust and quicker than what we would write. If you find yourself writing a piece of PHP to do a task that you’re sure is quite common, there almost certainly exists a PHP extension for it. Use it.

Some extensions are built into PHP installations by default, others need to be installed specially.

5. Use a Content Management System

Content Management Systems (CMS) are amazingly useful, and using one makes it trivial to maintain your website once it is setup. Since they allow off-the-shelf layouts to be used, they can also be an extremely quick way of getting a website up and running. Two of the most popular are WordPress and Drupal. They provide fine configuration options to allow you to update content, insert pages and track users, all without having to write any HTML. Most of this can be done without using any of your web languages, but don’t feel like you’re cheating – as with the PHP extensions above, it is all about reuse, to avoid repeating the work that thousands of people have done before you.

If you want to experiment with using a CMS, then start by installing one on your web hosting and set about configuring it. Once you understand how to configure your CMS of choice, the next big step is designing your own layout for it. Each CMS has plenty of guides and tutorials on how to get started with this.

6. Make it load FAST!

Stop watch

If your website loads slowly, your visitors will not wait.

Performance tuning is a vital skill for a web designer, but it is so often overlooked. If your web page loads slowly then your visitors will lose interest. Thankfully, it is very easy to make some massive savings simply by being aware of what takes up the time. There are two excellent web pages that I highly recommend for information about this – webpageanalyzer.com which will analyse the load time of the different components of your website, and this Yahoo! article which covers just about all the things you can do to improve load time.

7. Go interactive with Ajax

Web 2.0 and Ajax are big terms that are thrown around these days. Knowing what they are and how to use them can turn a rather dull set of web pages into an interactive web application. So what are they then? Well, web 2.0 refers to all those neat little features that websites such as facebook, flickr and google use such as updating automatically and Ajax is a way of using your web languages to achieve that web 2.0 functionality.

The primary language that is used to implement Ajax features is Javascript, although some server-side elements are usually required – so thats your PHP. However, manually writing all the necessary Javascript code to perform complex tasks like this is not straight forward and is very time consuming. But, remember it’s all about reuse reuse reuse. So, we reuse code that has already been written to make the job easier – these are Javascript toolkits or frameworks. My favourite one is Dojo, but the most popular is jQuery, there are also numerous others.

There are many, many more possible topics that you could choose to look into, I’ve merely chosen the ones that I believe are most important and relevant right now. But, I’ll name-check a few others that I considered including, and I’ll leave you to google them: accessibility, usability, CSS grid systems, SSL, stock photography, promotion and search engine optimisation.

Posted in Web development

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">