A Web Design Blog

New web design - Wirral Vocal Workshop

Dan Taylor — Mon, 11 Aug 2008 07:28:02 +0000

We have continued our charitable work by undertaking a 24 hour redesign of www.wvworkshop.org. The new site is built on the robust Word Press CMS.

This gives the site admins the ability to quickly and easily update their own site, including pictures and music.

If you are interested in free charity web development please email daniel@cullinanweb.co.uk.

Google to be offline for 48 hours?

Dan Taylor — Fri, 08 Aug 2008 11:10:01 +0000

Google is re-booting its massive server structure tomorrow in order to improve performance and also strip out all dead links.

Of course this isn’t happening but what would happen if Google (and even other search engines) went offline for any extended period of time? I for one would be left without at least 7 services that I feel are vital to my business:

Google Search
Google Analytics
Google Maps (iPhone Version)
Google AdSense
Google Webmaster Tools
Google Mail
and even iGoogle

Of course these all have varying importance to my business but Gmail and Search I would definitely miss, and so would my customers. As someone that works in SEO and web design I target most of my time at getting rankings in Google as it has over 70% of all daily searches and is so important that it has entered the English dictionary.

Google Analytics :- I lose the ability to monitor all of my sites traffic and therefore do not know how to target my resources to improve the rankings in search results.

Google Maps :- I get lost or have to remember Duke of Edinburgh training in how to read maps and compasses.

Google AdSense :- I lose 20% of my daily total income

Google Webmaster Tools :- I lose track of crawl data and site map data (of course this doesn’t matter if Google Search is down)

Google Mail :- I lose all of my archived email that I no longer store locally, aggghh wake up call.

iGoogle :- Yes this is the least important but its still so convenient to store all my feeds in one place, and I use it to monitor comments on my blogs too.

So in conclusion: We rely so heavily on some web based applications that the ramifications worldwide would be huge if such a thing as Google going offline ever happens, maybe we should have some sort of contingency for this, or maybe just maybe this will never happen….

Here’s hoping…

New Everton Blog Designed - The Peoples Blog

Dan Taylor — Sun, 27 Jul 2008 08:18:48 +0000

We have developed and contribute to a new Everton blog called the Peoples Blog. It is as you may have guessed all about Everton Football Club, Everton News and Views.

10 Evertonians have gotten together to write for the blog which we hope will become a regular read for many Everton fans.

The address is http://www.peoplesblog.co.uk

The Peoples Blog Logo

The latest Post is http://www.peoplesblog.co.uk/general/those-who-dont-understand.html

New Job, New Start

Dan Taylor — Thu, 26 Jun 2008 12:24:06 +0000

I now have a new job for an SEO firm in Cheshire so Cullinan Web Services Ltd and Pay Monthly Websites will be closing down.

I will however be updating this blog more regularly with trick and tips as well as web design tutorials.

Pay Monthly Websites Closed

Dan Taylor — Mon, 19 May 2008 21:50:51 +0000

The service offered by Cullinan Web Services Ltd, paymonthlywebsites.com has now officially closed. All traffic is now being redirected to www.cullinanweb.co.uk, where there is a limited pay monthly service on offer.

All queries relating to the service should now be made to Cullinan Web Services Ltd.

Styling a form with CSS

Dan Taylor — Wed, 22 Aug 2007 07:57:08 +0000

We have already learnt how to create a simple form with PHP, now we are going to style it

Below is the form we created in the previous tutorial:

if(isset($_POST['Submit'])) { $name = $_POST['name']; $email = $_POST['email']; $comment = $_POST['comment']; $sendto = "example@email.com"; //enter your email address here $subject = "A new comment has arrived via your site"; $body = 'A new comment has arrived via your website from: '.$name.' ('.$email.')n Name: '.$name.'n Email: '.$email.'n Commentn---------------------------------------n'. $comment; include("emailvalidator.php"); if (check_email_address($email)) { mail($sendto, $subject, $body, "From:".$email); echo "Mail sent successfully!"; } else { echo "The email address you supplied in invalid please try again"; } } ?> Untitled Document

`Contact Us`







  Name

  





  Email

  





  Comment

From this form we can see that we have various items that can be styled, they are ‘form’, ‘p’, ‘label’, ‘input’ and ‘textarea’.

To style these first create a stylesheet called style.css, then add the following code to the ‘head’ section of your webpage.

Now we can open style.css and start adding our code. The first thing you may want to do is limit the size of your form, we can do this easily by adding a ‘width’ property to the form selector as follows:

form { height: auto; width: 400px; }

Now how to make all of our input boxes line up. To do this we style the ‘label’ selector as follows:

label { float: left; width: 100px; text-align: right; padding-right: 25px; }

But what does this do? The float property, combined with the width makes our labels a block level element, meaning that they are all uniform in size so the input that is next to them all line up correctly. The text-align right and padding right are to aid usability.

Now we have a basic styled form but we can go a little further. The input boxes as standard are of the 3D variety, we can change this by adding a simple border around them, remembering to add this to the textarea too.

input, textarea { border: 1px solid #CCCCCC; }

We can now decrease the spaces in between the rows of the form:

form p { padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; }

So there we have it, a styled form using CSS. The full CSS code is listed below for your convenience.

Please feel free to leave any comments below.

Full CSS Listing

form { height: auto; width: 400px; } label { float: left; width: 100px; text-align: right; padding-right: 25px; } input, textarea { border: 1px solid #CCCCCC; } form p { padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; }

Building a simple ‘Contact Form’

Dan Taylor — Tue, 05 Jun 2007 23:09:09 +0000

Ok so you want to build a simple form that takes basic contact information from your clients and sends it to a given email address (or addresses), so where do you start? Well you have taken the first step by reading this tutorial.

I am writing this tutorial in response to the amount of forum postings I have seen on the matter recently so here we go

Step one:The form.

The form we are building will be very basic, it will gather the information, validate the email address then send a formatted plain text email to the specified email address.
The fields I will be collecting from the page are: Name, email and comments. These are the staple requirement of most pages on the net.

We start off our page by putting our usual DOCTYPE information:

PHP Form Example

Now we start our contact page, with our header and open the form control:

`Contact Us`

Next we add out form fields remembering to give each one a label, if you remember we are using just 3 fields here, name, email and comment.

We then add the ‘Submit’ button and close the form.

Name





  Email

  





  Comment

Note: I always add the paragraph tags around the form controls as it makes them easier to style with css.

And thats it for the form so now we close the page:

Step 2: The PHP

Now we will create some simple PHP that will check the email address to see whether it is valid, then if it is send the comments, if not then return an error

We always start by opening PHP with its FULL tag

Then within these tags we add our code.

First we check that the user has clicked the ‘Submit’ button

if(isset($_POST['Submit'])) {

Then we define are variables for use in the sending later on

$name = $_POST['name']; $email = $_POST['email']; $comment = $_POST['comment'];

Now we can define where we want the email to be sent to and what the Subject of the email should be

$sendto = "example@email.com"; //enter your email address here $subject = "A new comment has arrived via your site";

Next we build the body of our email

$body = 'A new comment has arrived via your website from: '.$name.' ('.$email.') Name: '.$name.' Email: '.$email.' Comment ---------------------------------------'. $comment;

Now we have all of the building blocks of our PHP mail() command, we could simply slot them in to place as shown below, but we also want some email address validation.

mail($sendto, $subject, $body, "From:".$email);

So first we have to add our php email address validator, (download it here and upload it to the same directory as the contact us page (right click and save as). REMEMBER TO CHANGE THE FILE TYPE TO .php!)

First we incude the file, then we check our email address. If the email address is valid we send the mail, if not an error is returned

include("emailvalidator.php"); if (check_email_address($email)) { mail($sendto, $subject, $body, "From:".$email); echo "Mail sent successfully!"; } else { echo "The email address you supplied in invalid please try again"; }

We then close the ‘if’ statement from the submit button and close our php tag

} ?>

So now the full code you should have is:

`Contact Us`







  Name

  





  Email

  





  Comment

You should now have a fully functioning form ready for styling with CSS (further tutorial to follow). If you have any problems simply leave a comment below and I will reply as soon as possible.

Remember: Change the $sendto variable to your email address!

EDIT

You also need to create a page called sucess.php and upload it to the same directory as your contact us page. The script automatically re-directs to the new page after completing.

The page should say something like ‘Thank you for submitting your comment, we will be in touch sooner than you think. Please continue to browse our site.

CSS rounded box corners

Dan Taylor — Tue, 19 Dec 2006 22:42:15 +0000

I have recently come across a neat little technique whilst trying to implement rounded corners on a site I was building. It uses JavaScript, CSS, no images and degrades nicely (in to square boxes).

The website for the tecqnique is http://webdesign.html.it/artic……y-corners/

It is extremely easy to implement with just a few lines of code, take a look, you won’t be disappointed