StudioTalk: Wellington Web Design and Branding Blog

As just about every web designer and developer will tell you, the Firebug plugin for Firefox is a godsend. Google and their new(ish) browser, Chrome knows this. Hell, even Microsoft knows this and has incorporated a similar (albeit, unattractive) tool of their own. It makes bug-testing and understanding how elements work a heap easier.

The world of developers need to know what is going on, and right now. In-browser utilities such as Firebug let us experiment, fiddle and play around with settings without having to go back to the original files, re-upload and then refresh each page.

I recently encountered a couple of Google Chrome Extensions that caught my eye, namely IE Tab and Chrome SEO. Somebody is listening to the developers! If only Microsoft would do the same by forcing users to update the severely crippling Internet Explorer 6!

There are two points to this blog post:

1. For those of you who don’t know about it already, get Firefox and Firebug. These two tools make your job as a designer/developer a great deal easier.
2. Look into Google Chrome Extensions.Be sure to check out IE Tab and Chrome SEO. This is going to be the way of the future of on-the-fly website development.

Any web developer could tell you that a web designer’s concept of what is achievable suggests they have their head in the clouds. Like what a builder would say about an architect.

Then along came this mysterious thing call CSS (or Cascading Style Sheets). First supported by Microsoft Internet Explorer 5 for Mac in 2000 (http://en.wikipedia.org/wiki/Cascading_Style_Sheets), CSS bought with it a standardised method to make all your html pages match a consistent theme. Personally, it was some years afterwards that I discovered the true potential that CSS offered.

During my time at Natcoll I was introduced to a website called the CSS Zen Garden. This illustrates the capabilities of completely re-organising a well-structured HTML page. Read the website to find out more, but basicly CSS Zen Garden’s purpose is to get web developers to totally redesign the website using ONLY CSS. The content and HTML is to remain untouched. Check it out for yourself …

Here are some examples of identical HTML but with a different CSS, resulting in entirely different web layouts:

Army CSS style

Sea CSS style

Garden CSS style

Using Javascript can be an awesome way to have user’s input alter the page content and style. For example a link could run a Javascript function to alter it’s class (with class styling via CSS):

<script type=”text/javascript” >
function changeMe(){
document.getElementById(“button”).setAttribute(“class”, “activated”);
}
</script>

<a href=”javascript:changeMe()” alt=”Change the class” id=”button” class=”notActivated” >Change the class</a>

This is all very well and said for Firefox, Safari or Opera users, but take a look on Internet Explorer 7 and you will have nothing happen! Luckily, this is very simple to fix. By adding a backup line of code into the Javascript function you can ensure IE knows what should happen:

document.getElementById(“button”).className = “activated”;

Click me to see a live example.

• 

  Build your website traffic

  Domain names – If you purchase your domain name for 3-5 years in advance search engines will rate your website higher as a more established/trusted website.

• Page titles & location – We’ve had some amazing results by add your business location to your page title. E.g. if you’re a builder in wellington add “Wellington builders”.

Give it a go and if your interested in improving your Google/Search results – give us a email

So in a recent web project I decided to incorporate some fancy Javascript form-verification code. Thinking it would be a breeze, I started with a link to submit the form and run the Javascript function:

<a href=”javascript:submitForm()”>Send form</a>

After I made the Javascript function work I then realised I had no idea how tell the page to submit the form. I discussed this problem with a colleague and he told me I was doing it all wrong. Best practice is to have a normal submit button and link the Javascript function at the bottom of the form. In my case I was using PHP which detected if the form was ready to send an email or not, so the form’s action was left empty (action=”").

In the Javascript I referenced the form with:

var f = document.getElementById(“contact-form”);
f.onsubmit = submitForm;

This code is vital to make this work as it links the HTML form and the Javascript function together. Once the submit button is pressed, the Javascript function runs (I called it submitForm) and if it encounters and error it returns false. This tells the HTML that the submission was unsuccessful.

Long story short, Javascript can be run between clicking Submit and the actual submit process to decide if the form is valid. From there you can run the appropriate error message or proceed to the submit script. Still don’t get what I mean? Check out a live test version at: http://www.jamesbarnsley.co.nz/mbv/dev.