Web Design 101

This blog is designed to give those of you with no previous experience in web design a quick crash course on what web design is, and how it works. Im hoping that i can give you a bullshit free introduction into this medium.

So lets start. A website is a media vehical which can serve multiple purposes, the two main types of website are informational and e-commerce. however no matter what the purpose of a website they all share one commonality, websites are interactive, they require the user to interact with them, be it by clicking a link, or entering search criteria into a form. There are 2 distinct methods in making websites, the most popular is HTML, the second is flash. Although both have their strengths and weaknesses, this blog will focus on HTML.

The anatomy of a website comprises 4 components; the header, content, navigation and footer. The header, most commonly the first part of the page the user engages with, it will most often have a logo and possibly imagery or something eye catching. The footer component closes the header, and surprisingly is always located at the bottom of the page. The navigation is one of the fundamental components of any site it is the means to locating information and maneuvering around the site. Finally comes the content which is usually located between the header and footer.

Colours in web design are unique the bet rule one can work to is to have 3 colours which compliment each other, this is instrumental in good web design, as it can build a theme and feel of a site, thus getting it right is imperative.

Websites can include pictures but to get the most out of a site CSS (Cascading Style Sheets) are used to compliment the HTML(Hyper Text Markup Language) this is an independent file which is attached which can enable the user to change colours and positions of elements on a page, an extremely powerful tool in the modern age of web. A stylesheet is attached to a page like so:

<link rel="stylesheet" href="http://theodin.co.uk/blog/wp-content/themes/theodin/style.css" type="text/css"  />

This enables you to work with seperate files which link to the same page, meaning that you can seperate your content. This becomes more relative when youwork with larger sites which may require multiple stylesheets for certain aspects of the page.

When working with websites you there are a multitude of ways to create your site, some prefer to use software applications such as dreamweaver, however many, myself included prefer to use text editors to create websites, with. This gives complete control over the coding, and whether you work on PC or mac text editors are freely available.

Once you have your HTML  page created you will wan to put it on the internet. you will want to save your home page as an index.html page, as this is how severs read your homepage. Yor domain name should be the first requirement, you can buy this from any hosting on dmaon company, such as pipex, Low Cost names, or as i have done in the past Switch Media. However  if this is your first time setting up on the internet, yu may wanna check these guys out One.com, as they offer a domain and hosting free for a year. Which leads me on to my second part. You will also require hosting, this is the place where you will put all your files, and when you go to your domain, your files will be displayed from. Once you have setup your domain and hosting you will be sent an FTP login for your hosting, you will then need an FTP(File Transfer Protocol) client, which will enable you to talk to your hosting. Thease can also be found for free filezilla is a prefered choice. Then one you have followed all these steps you should be up up and away!


Jquery Input Selectors

Just lately, its come to my attention thats its very hard to find a clear definition of how to use jquery to find the value of input selectors, so for my future refference and your here it is:

If you want to select a text input by name, use:

$("input[@name=nameGoesHere]").val()

If you want to find a select box’s value by name, use:

$("type[@name=nameGoesHere]").val()

Alternately to this you may wish to work out the value based on the type like this

$("type[@type=text]").val()

This can come in useful when you want to look for every instance of a text box or input field, which does have its uses. Overall this is of great help when you want to use jquery without having to attach classes and div’s willy nilly. I could go on to list every type of select possibility, but I wont instead you can get an extensive list of jquery selector here. Happy coding!


Why Isnt Flash W3C Complient?

Although there is a great contrast between flash designers and web designers, the medium through which their work is viewed is always the same. I found recently however through adding flash objects to my website theOdin when i came to validate the code at the W3C I recieved 14 errors, all related to the way in which I had embedded the object. This had me somewhat miffed, so i began researching this through serveral trusted websites, such as theFWA and one of my personal favorites theRonin, which all to my suprise failed the validator, on primarily flash objects.

This has since got me thinking about why flash doesnt validate. I know there are many who would argue its flash, it doesnt need to, but simply refuse to accept that as an answer. So i have decided that i will find a solution to how this can be acomplished through CSS and HTML, as i am sure that flash and html can live in harmony, even if the developers of flash are not willing to figure this out for you. I hope to post my findings shortley, is anyone reading this has any suggestions i would also be most interested to hear your thoughts.


Client Vs Server Side Validation

With the developments in javascript frameworks such as Jquery and the ever growing speed at which we can access the web, are we going about form validation the wrong way? This is a question i have been thinking about a great deal just lately.

Depending on who you ask, you will get a range of answers when it comes to validation. There are of course 2 main schools of thought, both operating in different environments, however both achieving the same ends. Server side validation focuses on using programming languages such as PHP to quickly validate information and check against errors, it benefits from being cross browser compatible, as well as being a faster method of handling the information. The alternative to this, and often the preferred method is to go with client side validation. Using languages such as javascript to handle information before it is sent. This can cause problems across browsers and especially if the user has javascript turned off. The one over riding advantage is that javascript allows form information to be validated before it has even been sent. meaning when information is sent there is no need to validate, or it can be validated server side as well, making absolutley sure the information is valid before it reaches its final destination.

However websites are now being offered the best of both worlds with the introduction of jquery’s ajax functionality which means you can run PHP code through a web page without having to submit any forms or redirect to any other pages. Complete validation from the comfort of your own DOM.

This new technique has been slow to catch on, but finally we are beginning to see the fruits of ajax labour. I hope to bring you a tutorial with a walk through of how to achieve this soon, but until then i strongly recommend anybody who is not familiar with the bassistance
jquery form validation to check it out, its worth its weight in gold


Maintaining Motivation

One of the hardest parts of being an web designer/developer, is maintaining your motivation. In a world were everything has a sell-by-date of 5 minuets its incredibly difficult to keep ones self focused and positive to the possibilities that the web can offer. One of the best methods for treating this dreaded ailment is to take some time to look around, see what other people are doing.

One of the most important skills you can learn is how to find something marvelous, intricate and splendid, then pick it apart piece by piece. To understand its most inner workings. If your a designer this is no truer than in CSS, looking at well rounded flowing designs, and deciphering how they were put together.

More than any of this though, sometimes its important to just stop. Whatever it is your doing, and just look around. Appreciate how far the web community is advancing, and the pace at which it is doing so. You should always ask yourself one question throughout, be it at 3am when your finalizing a project for a deadline, or when your project manager is giving you a new build scope. Ask yourself, if you happy, if your enjoying the challenge, because web should not be perceived as a job, it should be a lifestyle choice. Its that love and enjoyment that enables one to carry an idea into a fully dynamic living breathing site.


Managing Aspirations

Working as a freelance web designer, has enabled me to understand a great deal about all aspects of managing peoples aspirations, particularly the aspirations of clients. Understanding that what they ask for and what they want are not always one and the same. When you sit down and write out a scope or brief, call it what you will, it is critcal to pinpoint the needs of the client. From my experience, i would guesstimate around 30% of project time is spent working back to the requirements of the user, regardless of how the initial statement was scoped.

This is where the delicacy of delegation comes into force, you as the designer, the developer, the project manager see all sides of the process, what was asked, how it was interpreted and what was output. This can then make it harder to recognize that you did not produced what was asked for, when in truth, it may not have been that you did not deliver, but that the client did not articulate themselves as best they could. In this instance you as the designer need to ‘manage their aspirations’(theres that word again!). As this is what makes the difference, between a talented web designer, and a talented fool, to have talent that extends beyond the confides of the browser, to recognize where the design split from the request, but better than this to have been able to pre-empt it when the foundations were being laid down, and through suggestion and imagination guided the client to what they were actually getting at.

This again brings me back to the point i made previsouly, much of the time you client will not be fully switched on to new media solutions, if you can even call web new media these days, but you are. You the web designer have a full library of code and solutions to action your clients desires, nothing is impossible. Im not saying were gonna get it right first time every time, but by working out a process, by thinking about the method in which we deploy our skills, we can make ht entire process a less stressful, more enjoyable, more proactive experience all round!