Tuesday, June 30, 2009

Make it Right: Anatomy of a Website, Part 1 – HTML (Hyper Text Markup Language)

When you look at a website it is important that it looks good, has flow, and works well in devices that people choose to view it in. Websites today are eye catching, with broadband Internet access designers are not as limited as they once were in their choice of design and graphics. One of the main problems is that the basic structure that many websites are built on is poorly thought out and often out of date.

In the olden days of the web, designers were very limited in what they could make a website do. Designers always find a way to make things look good even with a limited language like HTML. Over the years some bad habits developed in the construction of sites and as a result many of these bad practices are being used even today.

Though some bad practices are being used for the most part websites have come a long way. HTML has most certainly changed for the better, instead of adding more tags to the language it has actually been simplified. With the invention of CSS (Cascading Style Sheets) HTML was able to shed its unneeded tags and get back to its roots. HTML is a markup language and should be used like one. Its purpose is to give content meaning, and weight to content that is more important that other content. It was not designed to position your pretty images or make text colored and it was certainly not made to make text blink!

Designers were introduced to wonderful programs with mystical names like WYSIWYG Editors. These miraculous programs would actually write the markup for you, and make your site look any way you wanted it to look. What did it matter that the markup wasn’t perfect you can’t see it anyway, right? As a matter of fact this way of thinking can come back to bite you. Sloppy code can mean lower search rankings, poor mobile functionality, decreased accessibility, not to mention make changes and updates a pain. Clean markup is lightweight, well structured, and makes proper use of tags. For programmers (and even for people who have never “viewed page source” in their life), clean markup is easy to read through and coherent. Small changes to your markup can make a big difference. By moving your embedded CSS and JavaScript and moving them to a separate file, and by removing depreciated tags and attributes like the font tag, and the align attribute, you can easily make site wide changes to your site by changing one file. This will also streamline your HTML you make it easier for search engine crawlers to get through your content. After all it’s all about your content, so showcase that in your pages and move all of the design and behavior out of the way. Google is the ultimate blind user and does not care what your site looks like, it just cares that it has relevant well-formed and meaningful content. By cleaning up your markup it makes it easy for other technologies to view your site. Screen readers for the blind, translation tools, and even mobile devices benefit from standards-compliant markup.

Think down the road when your client needs a change made to their site, or even a complete overhaul. With inline JavaScript or CSS, a simple text change could take hours, because you are forced to go through every page on the site and make the changes. With clean markup, a redesign becomes as simple as making a new stylesheet, saving you time and your client money. Who doesn't love that?

Imagine you created a site that was 100 pages, for the heading of each page you placed a div with inline styles to make the text inside bold red and 22px in size. Now imagine your client wanted you to change the color and size of all the headings on the site. You can see how a simple change can lead to quite a bit of work. Now you will have to manually edit every page on the site. If you had taken the time to think through your markup you cold have saved your self a lot of time. Simply by placing an h1 tag around the heading and styling it in an external stylesheet, allowing you to make a site wide change to one file in seconds.

We've established that clean markup is important, but how do you know whether or not your markup is compliant to web standards? The W3C offers tools that help you validate not only your HTML, but your CSS as well. Using these resources can get you on the right track to clean, fast loading, standards-compliant, and search engine friendly websites.

With a little time and thought in the beginning, you can save yourself and your clients time and money. Search engines will love you, and your website will be accessible to more people than ever before. So think about your content before you start slapping tags around it. Ask yourself questions like: “Is this group of sentences a paragraph, or a list?” and when linking to another page make sure you let your user (whoever, or whatever, that might be) know where that link will take them. Instead of making the link to the contact form say, “Click Here, to fill out our contact form”. Say something like, “Please Contact Us if you have any questions”. This gives the link meaning, and the link gives your content meaning, not to mention makes a lot more sense. In conclusion designers, use your powers of web design wisely and you will be rewarded with higher search engine placement, simple changes and happy clients.

Saturday, May 30, 2009

JavaScript is not as scary as you think.

In my last post I talked about the JavaScript library jQuery. The main focus of jQuery is manipulating the Document Object Model (HTML that makes up a web page). It is wise to learn how to swim in the fundamentals of JavaScript and how the DOM (Document Object Model) works before you dive right into the cold library.

If you think that JavaScript is a scary thing, or have been trying to learn it for some time and have been having some difficulty, I would like to recommend an excellent book for you to read called “DOM Scripting: Web Design with JavaScript and the Document Object Model” by Jeremy Keith. Here’s the description about the book from the DOMscripting website:

“The book is aimed at designers rather than programmers. If you've learned the benefits of Web Standards through CSS and you're now ready to move on to the next level, this is the book for you. It will show you how to add stylish, usable enhancements to your web pages using Web Standards that guarantee future compatibility.”

In my opinion this book will take you step by step through everything you will need to know about DOM scripting and ends with you building a website enhanced with JavaScript. You will learn how to use JavaScript for good, not evil, and how to implement it safely so your site is still usable for people who don’t have JavaScript enabled on their browser. You will walk away from this book with the basics under your belt, as well as some great code you can use on all your websites.

Friday, May 22, 2009

How jQuery changed the way I look at JavaScript.

Ok, I warned you that I was going to get geeky on you - so here it goes.

In the past, I thought JavaScript libraries were bloated with features and functions that made development time shorter but compromised the speed of load time for websites. It packed far more features than I would ever use in building websites that did not require a lot of scripting. So, I developed my own speedy set of functions like opening external links in a new window or making sure dropdown menus dropped down in Internet explorer 6 and below which accomplished the needed tasks without the added file size of a library. While those are still very good for simple websites, I prefer to use the JavaScript library from jQuery.

I was awestruck from the moment I looked at the example on jQuery’s home page. I thought, “How could something that seems so complicated be so easy to program?” I became more interested in jQuery when I saw more of it's very straightforward and consistent flow of attractive feature combinations like CSS3 and Xpath Selectors and Chaining. I’ve been using it for sometime now and it keeps getting easier and more effortless to employ it in creating functional and efficient websites.

jQuery is miraculous for websites that will be using any kind of Ajax (asynchronous JavaScript + XML) which is a geeky way of saying: Server Scripting and Client Side scripting working together to add functionality to a website without page refreshes. jQuery is perfect for animations and for people who are not that familiar with JavaScript.

For instance, let me show you an example of how it makes things easier. Look at the code for a simple drop down menu fix for Internet Explorer 6 written with regular JavaScript and jQuery.

JavaScript:

if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" hover";
}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
}
}
}
}

jQuery:


$("#nav li").hover(
function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")}
);

What its doing is finding the navigation, finding all the list items inside of it, then assigning an event to the list items on mouse over and mouse out. So when you mouse over the list item a class name of "hover is added, and when you remove your mouse it is removed

As you can see, jQuery gets rid of all the boring stuff and lets you get right down to the task at hand.

Both of these scripts work but jQuery makes it simpler, easier and more fun to accomplish the same task. It lets me spend valuable development time making things work instead of spending countless hours trying to figure out where I missed a comma and why the script doesn't seem to work in Internet Explorer.

If you come from the design side of web design and you are solid in your knowledge of CSS, look no further than jQuery. It is by far, the best choice when it comes to JavaScript libraries. Best of all, jQuery's functions and methods are supported in all the major browsers. This means that you will not have to worry about browser detection and branching code to support multiple browsers. In short, you write it once and it just works.

Friday, May 1, 2009

Beginning Web Development

Ian Lloyd’s book "Build Your Own Website The Right Way Using HTML & CSS“ is the best book to learn about building a website from the ground up. In my opinion, Ian does a very good job explaining the details of how to not just build a website but build it right.



Yes Ian, you hit the nail on the head. Not too long ago we at Avallo hired a graphic designer but needed a graphic designer slash web designer. Instead of hiring another student straight out of college, we decided to experiment and handed her your book. A week later she was laying out websites the right way (your way), with no prior knowledge. I was amazed at how fast she absorbed the material. In short, the experiment worked! I am very pleased with this book and as far as I’m concerned it is the only way to get into the field the right way.

Thursday, April 30, 2009

Much has been going on at Avallo

Avallo now has a website!
It took a little longer than we had expected but it is finally up and running. The reason for the delay was I developed a custom content management system to go on the back end enabling the employees of Avallo to make changes and updates easily. This will help us keep the website fresh, and our portfolio new and interesting.

I am pleased to report that we are finally hosting websites as well, and for a very reasonable price. The starting package is $12, so if you are interested in having your site hosted please sign up in our hosting section.

In some upcoming posts I will be reviewing some books and sharing tips and tricks to help you with your development. As well as cool API’s and libraries to make your projects come together faster, and look professional.

That’s all for now. Check back soon.

Saturday, February 28, 2009

Who has time for a blog?

All I hear nowadays is people talking about blogs and how everyone has one.

As a web developer I have been asked by my clients, "What is a blog?"..."Why would someone want a blog?"..."What can a blog do for me?" and then inevitably, "Do you have a blog?". My answer up until now was, "No, I don't see the point, blogs are just personal websites where people talk about their hobbies."

I build websites for companies that sell their products and services. What is the point beyond that? Now I realize that while I was spending all my time discovering fire in my geek cave with my buddies HTML, CSS, PHP and Javascript, the web-world was launching social networking satellites into deep space! Suddenly people are blogging and tweeting all over the internet.

I made a commitment to rebuild my company's website, and set aside some time in my schedule to "blog" my thoughts in the field that I love. I have been in my cave, but today I take my first small step into the light toward blogging salvation.

Join me on my journey and get a glimpse into the mind of this self-proclaimed geek.