What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

Validators

• Total Validator: simple HTML/CSS Validator with browser plugin support
• W3C Validator: the organization that defines markup standards, and validates according to those standards
• Cynthia Says: screen reader which will help you with accessibility in mind

Accessibility

• WebAIM: Introduction to Accessibility
• WCAG: Web Content Accessibility Guidelines
• WCAG Overview: Overview of WCAG Standards
• WCAG Tutorial: A useful educational resource to learn the standards
• Section 508: Federal requirements for web accessibility

Javascript Libraries

• jQuery
• Prototype / Scriptaculous
• MooTools

Firefox Plugins for Developers

• CSS Validator
• CSS Viewer
• Web Developer Toolbar
• Firebug

Tutorials

• W3Schools: Very in-depth, free tutorials on the most commonly used web markup and programming languages
• A List Apart: Articles and tutorials on an extensive list of topics
• QuirksMode: Good articles and test pages concerning javascript and CSS

• Copyright is an issue for downloading and sharing fonts via the font-face attribute
• Internet Explorer 6-8 do not support font-face
• Font-face could potentially pose a threat if malicious sites attach/spread viruses via the font files

Until font-face is fully adopted, web developers must resort to complimentary or supplementary solutions to make non-traditional typefaces work. There are few major flash and javascript solutions in existence that offer solutions with different approaches to displaying these typefaces. The three major typeface scripts that I am going to discuss are SIFR, FLIR, and Cufón. Before diving into details about each I’d like to point out that all of these solutions that I discuss are 100% SEO friendly, and all require JavaScript (and flash in the case of SIFR) but degrade to standard markup if JS is not enabled, also note that each of these play well with jQuery.

SIFR (Scalable Inman Flash Replacement)

First I must address the acronym, thought not the most relevant seeming, “Inman” is referring to Shaun Inman who originally conceived the idea of using the DOM and Flash together to support non-traditional typefaces. SIFR uses a flash object to render to the font face, and then Javascript to identify the DOM and replace the text as specified.

Pros of SIFR

• Text can be selected
• Does not violate EULA or copyrights, since font is contained within the SWF object
• You can easily add shadows, anti-aliasing, and other text effects in Flash

Cons of SIFR

• Slightly slower load times
• Requires both JavaScript and Flash to be enabled

My thoughts on SIFR

Some people complain that SIFR is harder to implement, but if you’re a front-end web developer it’s vital to learn and master new technologies including really basic flash. All you have to do is open the flash file included in the zip, change the font of the text to the font you want to use, and then publish it. Instructions are included on how to do this and if it is “too challenging” than you’re in the wrong field!

Many have also commented and argued that SIFR is no more secure to stealing a font file and using it on your website. While I do agree with that statement, the issue is a legal matter. Like it or not, and argue it as you may, Adobe Flash is legally allowed to embed and use fonts that the developer has purchased. This is not true for any of the others.

FLIR (Face Lift Image Replacement)

Using PHP (and the GD library) FLIR renders text into a font of your choice by reading the text in a DOM and sending a request to the server with that string and returning an image of that text rendered in the new font. It’s a very clever idea, and works behind the scenes, but it’s not without it’s quirks.

Pros of FLIR

• Does not violate EULA or copyrights, since font is rendered as an image
• Prints in the font rendered since it is an image

Cons of FLIR

• Requires PHP with the GD enabled
• Text cannot be selected

My thoughts on FLIR

While FLIR is fast and efficient with few flaws, one restriction I cannot overlook is the requirement for PHP and GD on the server. Many corporate websites (addressing the big guys, not the freelancers with this one) work exclusively with .NET on Windows/IIS servers without PHP installed at all. This eliminates FLIR from the mix for many websites unfortunately. In addition, FLIR disables the user to be able to select text. This is not a huge draw back if used on headings, but if used on a even body of text then you’re killing usability.

Cufon

Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 Canvas element for the more advanced browsers.

Pros of Cufon

• Faster load times than SIFR and FLIR, since it is all JS and nothing more
• Has all the strengths of Typeface.js with fewer weaknesses.

Cons of Cufon

• Violates EULA and copyrights due to fonts being embedded. Not many fonts are permitted to be rendered with this method
• Text cannot be selected
• You can’t apply a hover state to converted text

My thoughts on Cufon

For many, Cufon is the best solution to work with. It allows for rendering on the fly, and works well for a developer to match a design without having to replace each heading with an image. Cufon even works quickly with large bodies of text! One thing I remain disappointed about is text selection; if this library aims to provide a solution for larger bodies of text, then it seems that text selection is a must.

As I have tested and worked with Cufon, I recommend it for the developer looking for a quick solution but only for personal or non-profit website. I’ve talked with a few professionals including a lawyer and confirmed that Cufon is not a legal solution for font-embedding on ANY website, but that unless you’re developing a large profile commercial site, you should be safe to use it freely.

If you’d like to learn more about Cufon, check out the tutorial on TutsPlus.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

With growing technology and standards, I take pride in meeting new standards according to W3C, in order to achieve a highly functional site and good user experience for everyone. These standards include but aren’t limited to W3C standards, semantic markup, meeting WCAG usability standards, and Section 508 Compliance. This guide provides a medium level of understanding of accessibility standards. If anything in this article is confusing you, then I recommend you refer to Nathan’s post on Accessible Web Design for a more broad prospective.

Semantic Markup

Working with HTML and XML markup languages, it’s important for the code to be standards compliant by using tags, structure, and information that can be read and translated by all browsers. Semantic Markup is just a way of structuring code so that a browser/machine can do more work and take less off the user. For example, search engines, like Google, are heavily driven on specific tags such as Meta information, Alt tags for images, recognizable XML and HTML formatting, etc. Using meta tags for keywords, content definition, and descriptions all improve functionality for search engines and browsers.

Section 508 overview

• Software Applications and Operating Systems: includes usability for people that are visually impaired, such as alternative keyboard navigation.
• Web-based Intranet, Internet Information, and Applications: assures accessibility to web page graphics by the visually impaired using assistant technology such as screen readers and refreshable Braille displays. This is accomplished by using text labels and descriptors for graphics.
• Telecommunications Products: addresses accessibility for people who are deaf or hard of hearing. This includes technology compatibility with hearing aids, assistant listening devices, and TTYs.
• Videos or Multimedia Products: includes requirements for captioning of multimedia products such as training or informational multimedia productions. Captioning or video descriptors must be able to be turned on or off.
• Self Contained, Closed Products: products with embedded software, such as information kiosks, copiers, and fax machines, often cannot be used with assistant technology. This standard requires that access features be built into these systems.
• Desktop and Portable Computers: discusses accessibility related to mechanically operated controls such as keyboards and touch screens.

WCAG summary

The Web Content Accessiblity Guidelines (WCAG) is the only international draft for following web standards. It describes standards that may be used, should be used and must be used. The WCAG is considered the stable version of standards, but for more current standards for accessible websites you can refer to the Web Accessibility Initiative (WAI). They define standards more relevent and specific to newer Web Browsers, Operating Systems, and so forth.

There is a lot of best practices and examples defined in the WCAG and WAI, and though these standards are important, not every web developer needs to know them by heart or implement them into every site. They are mainly important for sites that provide a service, such as e-commerce, educational resource, government sites, etc. That’s why many times you’ll notice that government sites and educational sites have poor creativity, because they need to focus on delivering content to all audiences more than aesthetics. However, if you’re a web developer and interested in learning more about standards and implementing the, refer to the WCAG and the WAI and start creating hierarchy using headers, putting navigation into lists, and using Title and Alt tags appropriately.

W3C summary

The W3C is a working draft defining all aspects of markup languages and some Object Oriented Programming (OOP) languages used on the web. They define standards that are compatible across multiple browser, operating systems and languages. As web developers, we live by these standards and must know them to properly breakdown a website. These standards are a guideline that we follow in order to have our sites be dynamic and compliant for future technologies and software.

Where does your site fall according to these standards?

Below are some highlights that you should become familiar with as you populate a site with content. It’s important that if your site is developed by a professional that applies these standards, to ask for documentation on how to use functionality that may have been put into place for you, such as Meta tags, Header Tags, and Listed Links.

• Compliance across all major Operating Systems: Windows XP, Windows Vista, and Mac OS X
• Access to the visually impaired: JAWS, Window-Eyes, and Hal
• W3C & WCAG standards
• Organic Search Engine Optimization
• Meta information for pages, scrips, and images
• Alt tags for alternative text on images
• Color contrast and color schemes legible for those with color blindness or vision problems
• Em based layout and font: allowing sizes to be relevant to the browser-defined size for compatibility with mobile devices, increasing the font size in the browser, and different screen resolutions.
• Listed links for navigation hierarchy
• Header tags to establish Hierarchy and SEO

How I try and meet those standards in Web Development

As a web developer, I know the standards well. Like an electrician must know state codes and regulations, I follow standards laid out by federal law (Section 508), good practice guidelines (W3C) and usability requirements (WCAG). I also make sure to read up on other articles and refer to other professionals to practice what is most commonly needed and used, for more in depth on how to tackle accessibility as a web developer, check out Nathan’s post at redswish.

Search Engines: The law of the wild west

Many businesses may have heard the terms SEO (Search Engine Optimization) or Organic SEO, but not many fully understand what those terms mean. Search engines (such as Google, Yahoo, and MSN) are in the position to guide and control where a user goes when browsing because, aside from directly going to a web page, most users search the web for a specific purpose or topic. These search engines are really the authority when it comes to what web standards are followed and best practices for writing content, linking to content or structuring pages based on content. We rely on these engines to help us standardize the web and make searching and browsing easier, and at the same time these engines rely on us to code semantically and efficiently according to their standards, as well as format our content the same. This is what SEO is all about.. learning how search engines rank and find web pages and then optimizing a site for engine readability.

A Deeper look into SEO

Let’s start with a scenario of a company that hired some college student to develop their website — this student knows a little about design/html/css and maybe even how to put in a shopping cart or some other sales ability on the site. If this student has no experience with SEO and the company doesn’t get SEO work done on their site.. the fact that they saved money by getting a college student to develop the site rather than a professional company screws them. “You get what you pay for,” it’s a saying that’s all too true when it comes to the web. Sure anyone can get a site developed by Joe Shmoe for $200 but that doesn’t mean it’s going anywhere.. unless you have some REALLY strong advertising that happens outside of the web, you’re not going to get hardly any traffic to your site.. If a search engine doesn’t see content matching with META information, external links, internal links and higher ranking sites linking to yours, then it’s going nowhere and you’re not going to get indexed or ranked well. Search engines have total control when it comes to SEO so you have to play by their rules.

So how do you play by their rules? How do you improve your site’s search engine optimization or rankings? There are two routes you can go.. if you’re a stubborn do-it-yourself kind of person, then you should start out by looking into some SEO tools. I’ve got a few tools listed in another post which integrate right within Firefox that you can check out. Focus on researching and learning SEO for a while until you understand where your site is weak as far as META information, content relevancy and hierarchy.

Once you feel that you understand SEO a little better, then setup a Google Analytics account to track site traffic and source (organic search, direct, external site, etc). Google Analytics is a free service that can dramatically help you to monitor where your viewers are coming from and what they are doing once on your site.

Another service from google that will help you understand SEO is Google Webmasters Tools. The Webmasters Tools are great because they allow you to submit your sitemap and validate it, as well as see how often google is crawling your site (a term that basically means checking across content and links) and what information the robot sees when it crawls.

Next, I recommend signing up for social sharing services such as Digg, Twitter, Delicious, etc. These services are all free and they will help boost your sites rankings and network. This requires a lot of viral marketing and organic optimization. In order to get “tagged” by other users that use these services, you need to network, socialize, and interact with other sites that relate to your own. If you’re in web development especially on the freelancing side, then you probably already know about the huge network of freelancers and developers that continually comment on each other’s posts, link to each other, and help each other to grow and achieve more. This is the best SEO technique out there, but the hardest to execute as well. Quality is better than quantity when it comes to organic optimization, don’t just make pointless comments on numerous sites. You need to interact, genuinely care about, and get to know other sites and bloggers. It’s all about who you know in the web community!

Semantic Web: The new Sheriff in town

If you’re don’t know HTML/CSS and you’re looking to increase rankings for your business on your own.. this is where you stop reading. Semantic Markup isn’t something you can learn overnight, but it’s rather a process that continually growing and developing as new standards are defined.

..What it means for developers..

There are lot’s of areas to cover when it comes to semantic web, accessibility, validation and best practices, but for now, I’m just going to talk about the basics. Semantic web essentially means using HTML tags properly to define content. For example headers should use <h1> through <h6> tags following a specific hierarchy based upon parent/sibling/child relations. Another example is as simple as using <p> tags for paragraphs, <ol> tags for ordered lists, <ul> tags for unordered lists, and so forth. These standards and structures aren’t NEW by any means, but their value and importance have dramatically increased recently and will continue to rise.

This also requires the community to improve search engines and the companies that run them. As web developers we need to recognize which of these engines is the most accurate and fair in it’s algorithm and how it reads a web page. Most would agree that google is by far the greatest and most powerful search engine because it is so organic. Given that fact, we need to match their standards and continue to push browsers, search engines, and markup to match newer and better standards in a more uniform way. Let’s unite and continue to move towards a better more structured future and say no more anarchy on the internet or in web development!

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…