This belief is shared by the UK government, a recent report by the Cyber Security Operations Centre (CSOC) has brought to light the fact that a cyber attack on the nations internet service could have a “catastrophic” effect. The report has warned that huge emphasis and reliance placed upon the internet may soon reach “a point of no return.”

It is feared that any interruption to our broadband service could potentially cause serious harm to our productivity, our well-being and our already down trodden economy.

The report goes onto say: “A successful cyber attack against public services would have a catastrophic impact on public confidence in the government, even if the actual damages caused by the attack were minimal.”

This is quite a scary outlook as experts predict that wars in future could become digital and fought by way of cyber attacks, although I am sure no access to Facebook would be less harmful then a nuclear attack.

In an effort to emulate the Terminator film as best as possible robot networks known as Botnets have been created, with a ‘Botnet’ whole legions of computers can be taken over by internet hackers with a single push of a button causing Denial of Service (DoS). Twitter and Facebook were attacked in this way in 2009 causing hours of problems.

With the hackers becoming even more proficient at covering their tracks it is getting increasingly more difficult for governments to track them down. This prompted the launch of CSOC last year, they are dedicated to finding out what is causing the attacks, where they may be coming from and how to stop them.

It is hard to figure out what is a scarier prospect, the idea of cyber war or the idea of a nation driven crazy without the use of the internet, either way it is a very real prospect that will hopefully never come to fruition.

Related posts:

1. Government turns to social networking for inspiration Following recent government activity looking to reduce their spending on...
2. Cull on government websites scheduled The Central Office of Information has recently undertaken a review...
3. Domain register sued for hacking attack A search engine in China is breaking new ground when...

The first thing you need to realise is that people do not read web copy in the same way that they do books magazines etc. The main difference is that people tend to scan text on web pages as opposed to the more in depth attention they tend to pay to books and magazine articles. This is because they are searching for information in a variety of areas and are prepared to look elsewhere if they don’t get an answer from your site straight away.

Bear this fact in mind when writing your web copy. You get some leeway with things like blogs and online articles that are designed to be read in depth (in theory), though it’s essential to keep all other website copy very simple, especially when it comes to homepage text. Speak in concise, direct sentences. A good rule of thumb is aim for a 10 year olds reading age.

and avoid too much fancy grammar, by which I mean asides, semi colons, brackets, parentheses, etc.

It’s also a good idea to limit each paragraph to one idea. The internet is not the arena for dense complicated text. Leave that to the instruction manual writers.

Related posts:

1. Web Design School: Tips for writing good Web Copy #2: Formatting Never forget that a solid block of text...
2. Web Design Browser Testing And Bugs. Testing your new website on all the major browsers can...
3. Analytics School – Ten Top Tips As more and more people get into the exciting world...

Have you ever created a website, only to find that some of the links are broken?!

Using validation is Very useful, but it won’t pick up everything. For example, if you have a link where you have not added a URL value to the href attribute, the validator won’t flag it as an error. The syntax is valid, even if it’s a ‘broken user experience’. Similarly, the validator will be happy to let through empty class and id values.

Maybe you planned your site to work that way, but more likely not. That’s where using diagnostic CSS come in.

With a diagnostic stylesheet, you can quickly identify where your markup may be having trouble.

/* put the code below at the head of your generic style sheet (linked to every page you’ve created).
simply ‘uncomment and use to check anything that may have been missed!
—————————————————————————————–

div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding : 0.5em; background : yellow; }
*[style], font, center { outline : 5px solid red; }
*[class=""], *[id=""] { outline : 5px dotted red; }
img[alt=""] { border : 3px dotted red; }
img:not([alt]) { border : 5px solid red; }
img[title=""] { outline : 3px dotted fuchsia; }
img:not([title]) { outline : 5px solid fuchsia; }
table:not([summary]) { outline : 5px solid red; }
table[summary=""] { outline : 3px dotted red; }
th { border : 2px solid red; }
th[scope="col"], th[scope="row"] { border : none; }
a[href]:not([title]) { border : 5px solid red; }
a[title=""] { outline : 3px dotted red; }
a[href="#"] { background : lime; }
a[href=""] { background : fuchsia; }

—————————————————————————————– */

Related posts:

1. Looking to start building online applications? If you are looking to start building your first online...
2. Five Tips For Reducing Your Bounce Rate Part 2 For the second part of my ’5 tips for reducing...
3. CSS is Like Poetry – ‘Plan it to Perfection’ The more we rely upon CSS within web design, the...

After the form has been filled in we will send them to a php page that will process the data and send us an email .

First we have to start with the Form itself.

Here is a basic form asking for Name and Email address.

<form id=”form1″ name=”form1″ method=”post” action=”Submit.php”>

<table>

<tr>

<td>Name</td>

<td><input type=”text” name=”name” id=”name” />

</td>

</tr>

  <tr>

<td>Email</td>

<td> <input type=”text” name=”email” id=”email” />

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td> <input type=”submit” name=”button” id=”button” value=”Submit” />

<td>

</tr>

</table>

</form>

We are going to post the data through the server to our submit.php page.

This is where we put the script that is used to build the message and email the information over.

Create a file called Submit.php, and use the following code.

To tell the server that we are going to be using php we start with the tag “<?php” and close with “?>”

Right, lets get that data from the form and create the email message.

A few quick basics…

$_POST[‘name’]; //this is the vale of the name field in the form.

$_POST[‘email]; //this is the vale of the email field in the form.

Lets set the message up.

$message = ‘You have a received a new Newsletter Sign up customer.\n”;

$message .= ‘The details are Below. \n”;

$message .= ‘Name: ’ ;

$message .= $_POST[‘name’];

$message .= “\n”;

$message .= ‘Email’;

$message .= $_POST[‘email];

The full stop before the = sign says $message = itself + $message. This builds the email structure.(the ‘\n’ is a line break)

Lets get this emailed over to us.

mail(‘test@example.com’, ‘My Subject’, $message);

And that is it! 

Here is the code for Submit.php in full..

<?php

$message = ‘You have a received a new Newsletter Sign up customer.\n”;

$message .= ‘The details are Below. \n”;

$message .= ‘Name: ’ ;

$message .= $_POST[‘name’];

$message .= “\n”;

$message .= ‘Email’;

$message .= $_POST[‘email];

mail(‘test@example.com’, ‘My Subject’, $message);

?>

Related posts:

1. PPC School: Don’t ask too much from your Lead Conversions Contrary to popular belief, Pay Per Click advertising is not...
2. 5 Useful Tips for Creating Great Websites.. When it comes to creating a new website, there are...
3. Google first to sign deal with Twitter Twitter announced on Monday that they will be integrating with...

1. Website Title.

Make your website title catchy. A Web site title like “Dave’s Web Site” is not going to light up the eyes of your visitors. Without a relevant or intriguing title for your site, potential users may not click on it. For example, if you are a media company – try to use ‘media’ in the website URL (www.topclickmedia.co.uk) etc.

2. Design, Colour Palette & Layout

With so many websites out there, you will want yours to stand out from the crowd. It is useful to spend time shortlisting 5-10 websites (within the same industry, but not essential) that you like – it may be that the colour scheme appeals to you or it may be that certain elements give you inspirations, ideas, or help with brainstorming.

Navigation & Usability

Navigation is an essential part of any website (as it serves as the vehicle in which your users navigate your pages). You will need to decide how best to display your contents (whether horizontal pop-out menu, or vertical slide down menu etc).

An easily navigatable website will hit the ground running in terms of success – there is nothing more frustrating (and confusing) than a site where it is not clear how to find products / articles/ features.

Key Points for Usability

A. Don’t make me think (general layout, buttons, search features) -

Users will soon get frustrated, bored or both if they have to struggle to get around your site..

B. Facts of internet life

Users don’t really read pages (they skim over them).
Users don’t make optimal choices (more trial and error to navigate through the site with the back button being used alot!)
Users Muddle through – not usually taking time to read instructions.

KEEP YOUR SITE SIMPLE! A SIMPLE IDEA…. DONE WELL

C. ‘Comfort’ factor – Site ID, Page Name, Sections & Subsections, Local Navigation, “You are Here” indicators, Search etc.

D. Usability Testing.

DO NOT create a site with ‘blinders’ on!
Remember that users will be seeing your site through different browsers, different screen resolutions etc – so make sure you test cross-browser prior to launching!

Columns

You will no doubt want to create a design depending on what it is that your site offers; from multi-column layouts (seen on news sites like http://www.cnn.com/ and
http://www.ft.com) to less compact 2-column layouts (seen on sites like www.ebay.co.uk)

Using Grid Overlay

Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. Grid Layouts are used in all types of design – ranging from magazine layout, to poster design layout to web design layout.

In order for your grids to be really effective, you need to honer them. Do Not get into the practice of “this sort of lines up with this, which sort of lines up with that”. It has to line up flush, or the end result will feel amateurish and cheap. After all – attention to detail is what makes great designers great!

Typography & White Space.

Good typography is just as important on a web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial, it should still be pleasing to look at and easy to read.

In every situation where type is used – in publishing, signage, packaging, television etc. – the designer has to adapt his techniques to suit the medium.

A headline style that works in a magazine spread may not necessarily work on a website.

Designing for a computer screen has its own set of problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, and the problems get even worse.

White space can be (and should be) utilized for website readeability. If your website pages do not stream lines of text across vast distances, they will ultimately be more readable to your viewers.

3. Market Research

What are you offering your potential users / customers?
What will they expect from your site?
What do your competitors offer their customers?
How will your site differ in functionality and features?

4. Content

Engage your users – they are only going to remain ‘loyal’ if you provide them with something they find interesting / essential on a regular basis.

5. Stats

Empirical data & split-testing are very useful (invaluable even) when reviewing your site. It would be a wise move to incorporate a stats package (such as Google analytics) into the code of your site, so that you are able to see what your users are doing on your site and which areas will need improvement.

Related posts:

1. 5 tips for creating kick ass landing pages for pay per click The old proverb “you can lead a horse to water...
2. Web Design School: Tips for writing good Web Copy #1. Keep it Simple The first thing you need to...
3. CSS is Like Poetry – ‘Plan it to Perfection’ The more we rely upon CSS within web design, the...

At the very least you should be checking it on the 4 main browsers.

• Firefox
• Internet Explorer 6
• Internet Explorer 7
• Safari

One of the most useful tools I have found for fixing these bugs is Fire Bug.
Fire Bug is an extension for Firefox that allows you to look at the HTML and CSS.
Clicking on the element will pull up all the related CSS properties.

It can show you margin, padding, styles, overwritten styles, and that’s just the basics!
If you debugging your site, I would strongly advise downloading this as it can heavily cut down the time spent looking for those little bugs!

You will defiantly get the most headaches from Internet Explorer as they follow their own rules and just seem to display pages in a completely different way to everyone else.
If worst comes to worst, and you just can’t get your site to display the same on Internet Explorer using one CSS file, you can create an IE Fix!

This is a simple bit of Javascript that tells the site if its IE6 then load one fix, if its IE7 then load another.
This bit of code will sit after the universal CSS file, as the idea is to replace the troubled CSS styles with a new one that is only read by internet explorer.

Related posts:

1. Microsoft ordered to offer Web Browser choice The beginning of March and the blossom of spring is...
2. Most people dont know what a Browser is A Google staffer has claimed that the majority of people...
3. Attacks list 2009 dominated by Internet Explorer and Adobe Reader A hole in Microsoft’s Windows Server Message Block Protocol was...

As we know, an HTML sitemap is merely a webpage consisting of a list of links to all of your site’s pages that a search engine can easily follow. An XML sitemap, on the other hand, is a file that provides search engines with particular information on which pages to crawl and how often – they’re not obliged to follow these directives, but they do tend to broadly obey them.

An XML sitemap greatly increases the chance that search engines will be able to locate all the URLs you want them to. You can also set priority pages and date your modifications to ensure your most important or most recent pages get searched more often. What’s more, Google Webmaster Central integrates all your sitemap data with your other site data, so you can get a proper overview of your site’s performance.

XML sitemaps are useful to everyone. However, if your site is new or not well linked it’s an all but essential tool for helping Google crawl your site, since your lack of links will be making it hard for Google to find and index all of your pages the traditional way. XML is also particularly useful if you have dynamic content on your pages, or if you use pages which aren’t easily discovered, for instance, pages using Flash.

So, in conclusion, an XML sitemap is not a must have by any means. However, it is a very useful way of keeping search engines informed about your site and how you would like it to be viewed. In an arena where you need every advantage you can get, it could be well worth the effort.

Related posts:

1. Content is King? People often come to us with pages that previously ranked...
2. Page Segmentation Part 3: The potential Advantages for Search Engines The advantage of segmentation for search engines is increased relevance,...
3. How to increase your crawl rate (Part two) 4. Submitting an XML sitemap will result in increased crawling...

Set-up

I usually create a number of folders prior to even starting on a web design concept… this is great practice if you can get into the habit of doing this, so that every website project you start, you know what folders you are working with and the general files associated with those folders. Here are some Examples:-

buttons (containing any buttons used for navigation elements)
css (containing the CSS files used for styling the site)
flash (containing flash docs (.fla) and .swf (published files)  that are to be used on the project)
images (containing working files that are usually .jpg  or .gif extensions)
js (contains any scripts needed – such as for flash elements or for form validation on the website)
psd (usually contains psd files that I am using or will need as templates later on in the design stage of the website project)
ref (usually contains FTP login details, hosting, resources, image links, notes etc)

On top of creating systematically named folders for each website, I tend to save my file names as relevant extensions of the related project;

For Example:

bg_header-fade.jpg
bg_wrapper-image.jpg
bg_enquiry-form.jpg

home_online-courses.jpg
home_course-dates.jpg

link_ceFA-course.jpg
link_interactive-course.jpg

by using the same prefix, I have essentially created a ‘grouping system’ for the files I am working with, and if I need to reference a background image quickly, I know that I can search for bg_(…..) and I am sure to find what I need very easily.

Organization, is an important part (or definitely should be!) of your web design project. By ensuring small things like the above examples are used as best practice, you will find that a lot of time can be saved.

This method of organization should really flow right through your working documents; from your folders and  file names right through to actual css files, and the declarations, IDs and Classes contained within them (such as naming common ‘DIV’ elements consistently throughout your projects – #header, #wrapper, #content, #footer etc..

Related posts:

1. CSS is Like Poetry – ‘Plan it to Perfection’ The more we rely upon CSS within web design, the...
2. Google Analytics Tracking For Adobe Flash Google have announced a brand new way to track Flash...
3. Do I need Google Analytics Tracking For Adobe Flash? This one is fairly easy to answer. If you have...

Comment your stylesheet (using /* */) for example – /* this is a comment */

By getting used to doing this, you not only create quick reference points for both yourself and others who may be accessing the same css file, but you also create a well-plnned and easily navigatable document!

References - You can also use comments as quick references for the main style guides applied throughout the website:

/* Colours
Body: #ffffff
Main Text: #000000
Link Colours: #666666
etc etc…
*/

Organisation – Comments can be used to identify the different sections of your stylesheet.

/****************Header*****************/

/****************Footer*****************/

/****************Navigation*****************/

OTHER USEFUL POINTS:

Define Main Rules & General Classes at the Top of the Stylesheet.

Order the CSS in the same order as the HTML.

Know when to use elements, IDs and Classes.

1. Elements – Elements such as body, (<body>), paragraphs, (<p>) and headings, (<h1>,<h2><h3> etc.) should be used to define general rules.
2. IDs - These are unique identifiers and can only be used once within your HTML document. IDs should be used to style major structural sections of a web page such as the header, footer or navigation.
3. Classes – These can be used on any type of HTML element.

Name Classes and IDs logically. – This will SAVE TIME later!!

Group Selectors with Common CSS declarations. - This is known as ‘shorthand CSS’

Related posts:

1. Maximizing your ‘workflow efficiency’ Following on from last week, where I briefly outlined some...
2. Web Design Browser Testing And Bugs. Testing your new website on all the major browsers can...
3. What you need on your page to make SEO work for you In these blogs and as a company we talk an...

With a copy of Dreamweaver, PHP and MySQL installed on your computer and knowledge of Web Design you can build almost anything you put your mind too!

From a form that stores information in a database, a dynamic photo gallery that only requires putting images into a folder, or even a complicated content management system that can control all the pages on your website. PHP and MySQL are the simplest and quickest languages to use!

As the internet has so much information about php, getting stuck on how to do something is easy to overcome! This is because PHP is so widely used that any problem your likely to have has probably been resolved before.

PHP has a huge list of built in functions which makes it an ideal environment to quickly create you applications.

It also runs on multiple platforms (Windows, and Linux) so any good hosting company will offer the support of this service.

All this makes PHP and MySQL the most widely used online development tool in the world.

Related posts:

1. Google Voice Recognition Software recovering from slow start The voice recognition software that Google launched recently as part...
2. Online privacy enhanced by new ‘data fade’ initiative Remember when you were a child, and you wrote in...
3. Virtual keyboard launched by Google Search engine giant Google announced last week that they will...