I am always looking for lists to help with my online website design and search engine optimization business.
Recently, my friend Herb over at “What’s This Web Thing“, posted this list of 55 SEO tips. There is a lot of helpful information in here, without any of the hype that you often see in these sorts of lists. I am republishing this with Herb’s permission.
Enjoy!
(more…)
CSS can be the most frustrating part of website development. This is solely due to the the inconsistencies and lack of implemented standards on the part of Microsoft for their Internet Explorer (IE). The only reason I still take the time to ensure my web pages look good in IE is because 30% of my visitors are still using the browser.
So I decided to embark on a journey using CSS Frameworks to see if they could reduce my CSS pain and allow me to design a website more rapidly. Here is a summary of my first experience.
I began to consider my options for choosing a CSS Framework in response to a post I saw on Noupe ( 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started ).
I began by going through the list of frameworks reviewed and downloading each one. I have an XAMPP distribution installed on my computer which I use for development. So I unpacked the files for each framework distribution into its own directory from the web root.
It is noteworthy that the version numbers of most distributions are pre-release or beta (i.e. – Blueprint is version 0.8).
I then set out to examine each one for how easy it was to use in my development environment. My first task was to review the documentation and see how easy it was to use. I was reminded of the painful reality that good developers are very impressive at getting your applications to do cool things. But they still lack the desire to document anything to the point that the rest of us can understand how the thing works. This doesn’t apply to all developers of course. But it certainly applies to most of the framework developers.
The most thorough documentation provided was for the YAML (Yet Another Multi-column Layout) CSS Framework. Full documentation was provided in English and German and the examples included were very impressive. But it was still difficult for me to determine the best way to use their CSS classes. In every distribution, I was looking for something that resembled a quick reference sheet of their classes. Looking through the CSS code didn’t offer too much more comfort either. It looked like I would need to spend a lot of time trying to understand what they did before I could begin to use it.
My preferred CSS Framework is Blueprint. The BluePrint CSS Framework had minimal documentation, but it was concise and easy to understand. Of all of the distributions, I was up and coding quicker with BluePrint than with any other distribution. The grid system used is a 24 column approach that allows you to easily specify the width of column and container with just a class.
The BluePrint CSS Framework was the easiest to use and understand from my viewpoint. However, they all need a bit of work to become the Rapid Application Development tools they are striving to be. They have all included fixes for the faults of Internet Explorer, but this is still no guarantee that you won’t have cross browser compatibility problems.
After quickly designing a new layout for my site, I was disappointed to see that IE still didn’t respect my layout options. I needed to tweak the CSS to make the page work in IE. The good news was that the amount of effort in tweaking was far less than if I had developed the CSS from scratch. Also, the website looks great, and as expected in all browsers non-IE. The bad news is that, even after the tweaking, there are still some minor formatting issues in IE.
I really came to appreciate the challenge it must be to develop a CSS Framework when one of the most popular browsers doesn’t conform to the industry standard. Any respect I ever had for IE is now completely gone.
Many CSS Frameworks still require some work if they want to become what they are meant to be – a Rapid Application Development tool.
It is still early days for CSS Frameworks. I am looking forward to seeing these develop further. I am sure it will become much easier once all browsers comply with the standard.
Have you ever visited a website and noticed the compliance or validation badge? The badge usually says something like “HTML Valid“, “CSS Valid” or has the HTML or CSS word in it with a big check mark. There are many variations but the idea is to portray the page as “VALID”.
I got to seeing this enough that I began to wonder what it meant. And why was it important that a page be “valid”.
First, let’s understand what it means to have a valid web page. Then, this will help us why we might want our website to be branded as “valid”.
According to the World Wide Web Consortium (W3C), “validation is a process of checking your documents against a formal Standard … for HTML and XML-derived Web document types”. The WC3 develops and maintains the specifications and guidelines for the web in the interest of keeping standards at the heart of what the Internet is built upon.
These same standards effect how browsers work and render web pages.
So as long as your web pages are written, or generated according to the specifications outlined by the W3C, your website site should be “valid”. This is true to a point, and much easier said than done.
If you have ever undertaken a website design project, you have probably played with your HTML files until everything looked absolutely perfect. Happy with your accomplishment, you pop off an email to all of your friends to proudly show off your new creation. Moments later, one of your friends tells you about a part of your page that just doesn’t look right. Horrified, you bring up the page in your browser and feel relieved for a very brief moment to see it render properly. Then you realize that your friend is using a different browser, and that the trick you read about on the web that caused that cool effect was causing the page to render improperly in certain browsers.
Non-valid pages are relying on the built-in error-correction of the users browser. This error correction acts very different across the various browsers and versions. Not so long ago, many website authors used a trick that worked in Netscape 1.1 and suddenly found their pages were totally blank in Netscape 2.0. As browsers have moved more towards being standards compliant, we see less of this issue with the way browsers render HTML and more problems with the way they handle CSS.
This brings us to the reason why to validate your website.
The difference in the way browsers render a page is a primary reason to validate your code. Many of us start out designing websites with WYSIWYG web page editors that can improperly generate a web page, and not necessarily to a published standard. Running a web page through a validation service will point out where any problems might exist.
Many of use also enjoy the creativity we can engage in when designing a site. When rendered properly, these creative tricks are reason for website visitors to be impressed. But if you’re a designer looking to make an impression on a client, and they visit using a different browser, the effects could be disastrous to our website design careers. Validation helps us stick to the standards.
With the popularity of WordPress and other Content Management Systems (CMS), many web pages are generated dynamically. Validation will help point out any errors in our code where the HTML is not being generated properly.
Using non-standard HTML also introduces the risk of having to rewrite your web pages later. There are HTML tags that are introduced from time to time that don’t last very long in the standards. Using one of these may produce some cool effects. But once the browsers stop supporting it, your page will look like an amateur. Does anyone remember the “layer” or “ilayer” command?
Now that we have some compelling reasons to validate, how do you validate a web page?
The crew at W3C have been kind enough to provide a Free web page validation service that tests your pages against the world wide industry standard. There are other services, but as the W3C has taken lead in an effort to prevent web fragmentation, it makes sense to use a validation service that was designed to work to the W3C Recommendations.
They also provide services to validate specific content such as RSS/Atom feeds or CSS stylesheets, Mobile content, or to find broken links in your web pages. The W3C offers a range of Quality Assurance validation tools.
Now for the a dose of reality.
Once you run your web page through the validation service, you will notice some very unexpected results.
If you have used a DOCTYPE declaration (DTD), you will immediately notice that this value is used to determine how the rest of the page should be validated. This makes a significant difference. The DOCTYPE or DTD is required for HTML and XHTML pages and must be spelled out exactly according to the specifications. What I didn’t realize is that there is even a DTD for CSS Stylesheets as well. Here is a complete list of DTDs you can use in your web pages.
Getting past this first step is a major hurdle to getting your pages validated. Don’t get too frustrated. If you cannot seem to get rid of one or two errors, your pages will still render properly. The specifications and guidelines are still going through changes that are difficult to understand for most of us.
It demonstrates the fact that there is some significant ground to cover before we can say that there are a complete set of standards for designing web sites. It also makes you appreciate how far the industry has come and the work involved to get to where we are today.
