Archive for the ‘Web Development’ Category

The Survey For People Who Make Websites But Like To Do Other Really Cool Stuff Too!

Anyone who has seen Zoolander will get the joke about the title of this post. Moving on…

The boys over at A List Apart are doing a little survey about web developers and designers. The results from their survey last year are pretty interesting. I’ll be curious to see how many more people are focused on information design and information architecture compared to last year. 

If you’re in a web developer/design related field, take a few moments out and complete the survey. It doesn’t take long. I promise.  Just click on the banner below to start:

Dogfood Revisited

When I first started this blog last October, I chose to use Movable Type instead of MODx to power it. It actually was a pretty difficult decision mainly because of my belief that MODx is a good solution for just about any scenario due to its inherent flexibility. However, my final decision was narrowed down based on one factor: the iPhone. Although I’m sure I could still find a way to use MODx and blog with an iPhone, I simply didn’t want to invest the time it would take to accomplish this goal. It would be nice if I could eat my own dogfood, but given that this was to strictly be a blog that I could post to on-the-go, it simply just wasn’t achievable at the time. A MODx installation just couldn’t beat the sheer speed of deployment and the use of an iPhone webapp plugin for Movable Type.

With the launch of the iPhone 2.0 update and the iTunes App Store, things have changed with the addition of a few blog specific native iPhone apps. Two in particular that I looked at was TypePad and WordPress for the iPhone. TypePad for the iPhone looks great but it only works with the hosted TypePad service. I have my own hosting provider and want to customize the hell out of my blog so…that’s a “no” for TypePad. What was noticeably absent though was a native app that would allow for blogging to your own installation of Movable Type as well as what these apps provide. That left WordPress for the iPhone.

For the nine months or so that I’ve used Movable Type, I can say that it’s a great blogging platform. However, there are two things that really bug me about it. First, publishing pages seems to take a long time and, at times, you have to republish your entire site to get everything to work. I’ve also noticed that Movable Type can cause a bit of a strain on a server when you do this. Now, I don’t know if the use of CGI scripts has anything to do with this behavior…but it did leave me a bit concerned about the stability of the app as my database gets bigger. Second, I planned on updating my template a bit but upon looking at the code kind of frowned at the idea of doing so in Movable Type. Although Movable Type has a very powerful templating engine it’s still not the easiest thing to develop for.

So I took another serious look at WordPress and, after looking at the new features in WordPress 2.6, was sold. Templating is much easier, content editing has been greatly improved, there’s a wealth of great plugins available, and overall WordPress has turned into a great blogging platform. And with the addition of a native iPhone app it’s even better. There’s just something about being able to take a picture with my iPhone and post it to my blog on the fly that I find very appealing.

As of today, my blog has been completely converted over to WordPress 2.6. One of the things I did was update the design a little bit using the 960 Grid System. It’s more or a work in progress so the design isn’t complete. However, the fact that I was able to throw it all together in a single weekend just amazes me. As time goes by you might notice a few things changing here and there. 

The WordPress iPhone app is the really cool part. It’s a very simple app, really, but still powerful nonetheless. Although writing and posting blog posts is easy enough, it doesn’t appear that you can write in landscape mode just yet. Adding photos to a post is breeze, giving you the option to choose a picture from the iPhone photo gallery or take a new one from the built-in camera. The differences between TypePad and WordPress for the iPhone are very minimal. The main difference though is that the WordPress app allows you to use your own installation as opposed to using one that is hosted for you. That’s a big plus for me.

I’ve always said that the advantage of stand-alone apps is that they can do one thing really well. It may not be MODx but as a stand-alone blogging app WordPress is a great app. Hats off to the developers. They did a great job.

HTML vs XHTML: Rumble in the Jungle

A recent post on the MODx forums got me thinking a bit about some of the controversy surrounding web standards. The main question is this: Which specification should most developers use? HTML or XHTML? The answer you’ll get is mixed because, quite frankly, neither specification is being used as it was intended.

Proponents of each specification make many claims as to why each specification is flawed. Some will claim that XHTML isn’t fully supported by any version of Internet Explorer and thus should not be used. Others will claim that HTML is stale and isn’t as semantically correct as XHTML. For each developer you talk to you’re going to get a different set of complaints on each side of the fence.

I’m a web standards advocate and I’ll plainly admit it. One link provided by a poster on the MODx forums was to an article called HOWTO Spot a Wannabe Web Standards Advocate. I found this article to be quite humorous because, as the poster said, “there’s a lot of ignorance and hype” around this topic, which is certainly the case in this article. He seems to be just blindly attacking people who support web standards rather than addressing the real issues. So before I go into what the real problems are with web standards, let’s take the Pepsi Challenge and see if I’m a match, a “Wannabe Web Standards Advocate” if you will:

Talks about the importance of the alt tag.

What can I say…you’re right, there is no alt tag. It’s an attribute. Move on.

Claims <b> and <i> are deprecated.

If you look at the HTML 4.01 spec it states that although they are not all deprecated, their use is discouraged in favor of style sheets. The HTML 5 spec goes on to say that the i element should be used as a last resort when no other element is more appropriate and that style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized. So, yeah, to claim that these are deprecated isn’t entirely correct. The word “discouraged” is more accurate.

And spells it “depreciated”.

We’re human. We make mistakes. Even spellcheck doesn’t always work. Have you ever misspelled a word?

Uses <span style="font-style: italic;">, because <i> is presentational.

That’s because the use of <i> is presentational. <i> means italic which does not describe the intension of use but rather how the word or set of words is to be displayed.

Wants software to use <em> and <strong> when the UI says italic and bold.

The use of italic and bold is a convention used in user interfaces, NOT markup code. The intended purpose of HTML was to describe data, NOT what it is supposed to look like. Using UI conventions to describe data isn’t a step in the right direction and isn’t proper semantics.

<em> and <strong> on the other hand are better because they describe the data and thus are far more semantically correct that the bold and italic equivalents. <em> denotes emphasis and <strong> denotes stronger emphasis. The default presentation of these elements ended up being italic and bold respectively.

Even Tim Berners-Lee, the father of the world wide web, has talked at great lengths about what he calls the semantic web and how HTML documents and the like are supposed to describe the data. Who am I to argue with him?

Marks up quoted text as <cite>.

Yeah, that would be incorrect, wouldn’t it. A <cite> is supposed to contain a citation or a reference to other sources. On the other hand, both a <q> and <blockquote> can be used for quotes depending on their use.

Complains about upper-case tags in HTML.

HTML may not be case-sensitive but XHTML is. Personally, when it comes to coding markup, javascript, and server-side code it’s better to stick with a standard of coding. Having a mix of upper-case and lower-case tags in your markup is sloppy at best. So, yeah, it’s better to stick with lower-case tags to promote consistency and avoid errors with javascript code simply because someone didn’t write proper markup.

Claims XHTML 1.0 is more semantic than HTML 4.01.

Claims XHTML 1.0 is more structured than HTML 4.01.

Claims XHTML 1.0 is less presentational than HTML 4.01.

Both HTML and XHTML are virtually identical when it comes to the HTML specific tags available. One isn’t necessarily more semantic or less presentational over the other. How a coder decides to use the tags is what makes code semantic or not.

However, the claim that XHTML 1.0 is more structured than HTML 4.01, that is actually true. Since XHTML follows the same syntax rules as XML, XHTML documents are required to be well-formed and thus are more structured than HTML. More on that in a sec.

Claims browsers parse XHTML served as text/html faster than they parse HTML.

I don’t believe this is true provided that an equivalent HTML document is written to be as well-formed as an XHTML document. HTML is pretty forgiving and thus if your document is riddled with unclosed tags then that could potentially cause a browser to load the page a bit slower than the XHTML equivalent due to the extra processing needed to interpret the HTML code properly. However, the same could be said about XHTML documents.

Refers to “the benefits of XHTML” without specifying what the benefits are.

There’s a good SitePoint forum post that has some of the frequently asked questions about XHTML vs HTML. There are some differences, but there is one key difference that I think makes XHTML better. Since XHTML requires that documents be well-formed, validation has to be more thorough and thus code errors are spotted much easier. I’ll illustrate this towards the end of this post.

Uses large XHTML 1.0 Transitional documents with table layouts while claiming enhanced compatibility with handheld devices thanks to XHTML.

“Future proofs” a site by migrating from HTML 4.01 Transitional to XHTML 1.0 Transitional and keeps serving it as text/html with all the old JavaScript scripts in place.

These are hybrid approaches and, honestly, probably shouldn’t be used anymore. A hybrid approach to using a transitional doctype with some table-based layout elements was used primarily with sites that needed to be transitioned over but the underlying code couldn’t be completely rewritten yet. For sites done from scratch, I wouldn’t even consider a hybrid approach. Browser support is much, much better these days and thus a hybrid approach is no longer valid.

Uses the XML empty element notation on pages that are supposed to be HTML pages.

I’m not sure I follow you here. Both HTML and XHTML specification allow for certain tag types to be self closing empty tags: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param.

Now if you’re talking about the practice of having an element with nothing it it (ie. <div></div>), I can sort of understand it. Why would you need to have an empty element in your code when you can simply insert it on the fly with javascript?

Complains about doctypeless application/xhtml+xml or SVG documents and smugly points to validator.w3.org.

The W3C clearly states that you have to have both a doctype and a xmlns declaration in the head of every XHTML document for it to be considered valid. Not having it means that you run the risk of a browser working in quirks mode and many not render the page as it was intended.

The W3C Validator is nothing more than a tool that allows people to validate their code to ensure there are no errors. A simply check can and will reveal problems like a missing doctype and xmlns declaration, thus the reason why everyone smugly points people to this site.

Claims all tables are evil.

Tables aren’t evil if they are used properly. Tables are meant for tabular data, NOT presentation purposes. Even the specification says this about tables:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.”

So, yeah, if you’re using tables for layout purposes then you’re doing evil.

Advocates pixel-based absolute CSS positioning as the righteous replacement for evil tables.

The use of CSS doesn’t automatically mean pixel-based absolute positioning. You can use floats and static widths and heights instead of absolute positioned layers. CSS is for the presentation layer of a properly written HTML/XHTML document. A raw, unstyled HTML document will look ok on any device in any browser. Adding CSS allows the looks of your document to degrade gracefully in any browser. Plus, you can easily change the look and presentation of a site simply be switching out the CSS on the fly, something you can’t do easily with table-based layouts. If you’re still using tables for design and presentation then good luck getting it to work on a variety of browser and devices.

Changes //EN at the end of the public identifier in the doctype to the language code of the language the page is written in.

Omits the namespace declaration in XHTML or SVG and claims it is OK, because it validates.

Man, that is pretty stupid, isn’t it considering doctypes and namespaces are explicit. After all, if you don’t declare the doctype and namespace properly then the browser won’t recognize it.

Serves documents written using a home-grown XML vocabulary along with an XSLT transformation to HTML to browsers instead of serving HTML, because XML is more semantic.

Uh, what? If you’re serving XML with an XLST transformation then it isn’t HTML anymore. That’s the whole point of using a strict XML doctype and namespace with XHTML. Now, if you require your document to be parsed as an XML-based document then, yeah, that would be ok provided you don’t need Internet Explorer to parse it. People who use strict XHTML document usually do it for very specific valid reasons. But for someone to do it simply because they think it makes it more semantic, yeah, that’s stupid indeed. But using a XHTML 1.0 Strict doctype isn’t such a bad thing even when you’re using it with a “text/html” MIME type.

So, am I a “Wannabe Web Standards Advocate”? Nope, and neither is the guy who wrote this article. I’ve taken the time to understand what web standards are really all about and what the specifications for each standard really say. To not educate yourself on the issues and claim yourself to be any kind of advocate is a great disservice to yourself and others.

And, I’ll be honest, I still have a lot to learn. There is much to learn about the current HTML 5 drafts as well as what all of the current HTML and XHTML specs have to say about certain practices.

Here’s the real problem with HTML: it’s too forgiving. HTML is more forgiving and doesn’t require that you explicitly close tags. Most browsers will render HTML just fine even when everything isn’t perfect with the code. I’m not 100% sure, but I would assume that HTML code that isn’t well-formed could potentially cause issues in scripts that rely on the DOM to function properly. This is one area that I would really like to test.

As with most script and programming languages, it’s good practice to use well-written, elegant code. The main reason is that it helps eliminate typical mistakes made that cause errors. It also makes it easier to validate the code. The problem with HTML doctypes being too forgiving is that most of the validators out there allow for simple mistakes in the code. For example, consider the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type"
            content="text/html; charset=iso-8859-1">
        <title>Test</title>
    </head>
    <body>
        <p>This is a test paragraph
        <p>This is another one
    </body>
</html>

This is perfectly legitimate HTML code and if you run in through the W3C Markup Validator (http://validator.w3.org/) you’ll see that it passes with flying colors. But what about those paragraph tags? Shouldn’t they be properly closed? Would code like this cause issues with being able to properly parse the DOM for the paragraphs? What about search engines, spiders, document readers for the blind? To me, this is a sloppy way to code and doesn’t promote the kind of standardized code that’s possible with XHTML. Again, I’d really like to run this through the grinder with various script libraries to see if it can cause potential issues with parsing the DOM.

Although the use of XHTML with a “text/html” MIME type might seem like a bad use of the format, it’s so engrained now that to go back to HTML 4 would be a bit of a step back. The use of XHTML as HTML isn’t a documented standard per se, it’s more of a standard that came to be out of necessity. No one can argue that HTML 4 is a well documented standard. The problem though is that it’s also a stale standard. The whole idea behind the “X” in XHTML was that it was “eXtensible” HTML that could be parsed either as strict XML or HTML. As such, developers flocked to it because of the promise it had. Yes, it’s true that XHTML isn’t supported on Internet Explorer…but that only applies to strict XML MIME types, not HTML.

Keep in mind that XHTML with a “text/html” MIME type is still just HTML. From a browser point of view, one is not better than the other when it comes to parsing the HTML and CSS. The tags are the same and the rendering is the same if both are written properly. Aside from a few subtle differences, the main difference is in the syntax and validation. Arguments that one is better than the other is pretty moot at best. I think it boils down to personal preference as well as the tools you use that dictate which standard to use.

The necessity for using XHTML is such I think because it’s unclear exactly when the HTML 5 standards will be finalized. No one knows anything about what is going on. There is entrenchment in the web standards community about the direction HTML 5 should take. The W3C is saying one thing, WHATWG saying another, with the Web Standards Project putting their two cents in as well. The end result is that we probably won’t see HTML 5 being put into a release candidate state until probably 2012 (which ironically enough is when the Aztecs predicted the end of the world would take place).

Based on all this, I’m leaning more on the continued use of XHTML. I use script libraries like MooTools and jQuery pretty heavily and I just don’t like the idea of getting something really screwed up simply because the HTML I’m writing doesn’t get validated properly. For me, it’s all about well-formed code and the ability to properly parse the DOM. Not that that isn’t possible with a strict HTML doctype, but I think most of the tools we use are more geared for XHTML validation.

If it takes four more years to get a final specification for HTML 5 drafted then it could potentially take another 4 years before we see widespread browser support. For that reason alone, I don’t see any reason why we shouldn’t continue to use a strict XHTML 1.0 doctype even if it’s not a 100% documented standard. It’s standard enough and that works for me.

Hands-free hygeine products = good design?

The other day I went into a public restroom and was confounded by the placement of the hands-free sensor for the faucet. My thought was,”If the spout itself is so high up, why did they put the sensor so low?” To amplify the problem the sensor didn’t work the first time. I literally had to wave my hand in front of it like three times to get it to work.

The solution to this problem is simple: give me an alternative other than the faulty sensor. A traditional way of turning on a faucet would have been much faster.
I’ve seem other similar devices with similar problems: towel dispensers that spit out towels by just walking by it, toilets where the manual flush button isn’t obvious, and hand dryers that don’t turn on or stay on when you place your hands underneath them.

Good product design starts by recognizing that user experience is important. The problems that exist with these hands-free products tells me that the designers didn’t fully realize the problems they had to solve or that changes were introduced midstream that effected the products ability to do its job. As such the products ended up having defects that stunted the user experience, something that could have been easily solved with testing early on in the development phase.

Good product design is about communication and solving problems. Think about that the next time you go to a public restroom and a hands-free device fails to work properly. Ask yourself what you would change about it that would make it better. Do you think the rest of the public would get it and agree with that change? If so then that’s a good place to start.

Building brand loyalty

Think about some of the best product designers out there. Think about a product that you have seen that left an impression in your mind. The best analogy I have about good product design has to do with a can opener. Sure, for most people a can opener is a can opener. There’s nothing really about a can opener that would give you an emotional response. But if a company that designs can openers was to create one that not only looks different but feels different and opens cans better than anything out there then someone using it might get an emotional response from it. They may very well think to themselves,”This is the best damn can opener I’ve every used! I don’t think I’ll ever buy another can opener from another company every again!” Not only did they design a good product that solves the customer’s problem but they also created a loyal customer who doesn’t see any other solution as being as good as theirs.

The lesson here is that getting your customers to use your product is only one part of it. The other is keeping them. And the only way you’re going to do that is to develop a good product that speaks to the customer. In essence the product must speak for itself. If you were building can openers you have to tell yourself, “We’re not in the business of making can openers…we’re in the business of opening cans”. That’s a big distinction in philosophy, don’t you think?

I find that the reason why many web developers/designers and software companies fail is that they haven’t properly defined their business model, philosophies, and processes properly. The ones that stick out for me are the ones who focus on user-centric design, implement proper IA into the process, and maintain proper communication at every level of development. Companies like Google, Apple, Dyson (great vacuums btw!), 37 Signals, and others.

In fact, my wife and I ended up having to replace our vacuum and ended up going with a Dyson. All you have to do is do the math: 5 year warranty on part and labor, no bags or filters to replace, and it never looses suction. If it lasts more than 5 years then it clearly makes up for the extra cost compared to other vacuums. You could go through two vacuums in the same amount of time one Dyson would last you. But it’s not in the cost that makes it better…it’s how good the damn thing is. The minute you use one you’re hooked. I mean, this thing sucks…literally! Best damn vacuum I’ve every used, hands down. That’s building loyalty for ya! :)

It’s official! I’m a full-time web developer!

It’s been a little while since I’ve written anything on my blog. A lot has happened just in the last month.

I’ve been working as an IT Assistant for the same architectural firm for the past 3 1/2 (almost 4) years. The decision was tough but, to be perfectly honest, was inevitable. Early last week I turned in my resignation. As of February 1st I will be a full-time web developer for Collabpad.

I say inevitable because a number of events have led up to my resignation. Now, before I go on I will point out that I have no wish to burn bridges. The architectural firm I worked for is a good one and I wish them continued success in the future. As such I will not refer to them by name or any of my co-workers by name. Instead, I’ll take the Harry Potter approach and refer to them as “The architectural firm that must not be named” or “You Know Who”.

Working for “You Know Who” has been a great experience. The decision to leave was tough because I enjoy the people I work with, many of whom I call friends. The decision ultimate boiled down to three main things: philosophy, ownership, and pay.

3 1/2 years is a long time and in that time my philosophy about IT has changed quite a bit. I’m more of a Mac guy now than a PC guy. I no longer believe that Microsoft provides the right solution for businesses. A lot of that is due to the release of Windows Vista. But that’s beside the point and is actually a fairly minor reason for my departure from “You Know Who”.

What weighs more is my feeling that “You Know Who” has not placed the proper emphasis on the IT staff. My philosophy is that you take care of your IT staff, you give them a proper budget, you allow them to dictate a common sense set of IT standards and procedures, and that you don’t take their requests with a grain of salt. IT is not an after thought and it most certainly isn’t “just another admin position” either. The IT department should be placed in as high regard as the production, management, and accounting staff. Just because the IT department doesn’t generate revenue doesn’t make them any less important than the ones that are. Without IT the whole infrastructure of a company can fall apart.

I’m a firm believer in a bottom-up approach to business management. The only way to succeed with a bottom-up approach though is to make sure you’re employees are happy and productive. Productivity these days is big business. You can’t go a week without hearing about some kind of seminar about how to be more productive at your job. Businesses are learning that boosts in productivity have a tremendous impact on the bottom line. One of the ways to do this is to reduce stress. If an employee is comfortable physically, emotionally, and financially then they are more likely to be more productive due to the reduced amount of stress. Let’s face it…personal finances is one of the biggest contributors of stress and quite possibly the primary factor on a loss of productivity on the job. With a bottom-up approach, everyone benefits from gains and growth in a company…not just the upper management!

“You Know Who” tries to be a bottom-up company (or at least pretends to be) but practices more of a top-down management style. There are nuances here and there of a bottom-up approach but, to be honest, I think you have to have some vested interest in the firm before you see them. “You Know Who” would do well if they leaned more towards a bottom-up approach. Hell, if they did I probably wouldn’t have left.

When I started, I was told that after 2 years I would be eligible to become an Associate with the company. What that means is that the company acknowledges my desire to stay with the company over the long term and that I have a sense of ownership in what I do with the firm. It also means that I would get actual stock ownership in the firm…which means vested interest, better bonuses and pay. 3 1/2 years in the firm and not once has anyone asked me of my interest to become an Associate in the firm.

I’ve been an IT Assistant for 3 1/2 years…but what I actually did was more like an IT Supervisor. Based on research done on PayScale.com and Salary.com, my salary was well below the 25th percentile. I addressed this early last year and asked for a raise. I felt a 20% raise was necessary but I would have been satisfied with a 15% raise. What I got was a mere 0.5% raise. Not good! The topper came at the end of the year when I got my bonus. Prior bonuses were pretty good. This year was an absolute slap in the face. It was literally almost half of what it was last year.

Now, I’m no dummy and I do pay attention to what my employer tells me. It was said to everyone in the whole company that revenues were not as good as last year and that profitability wasn’t as good either…which translates to our bonuses not being as good. However, what I don’t understand is if the total net profits are the same as last years why would our bonuses be so much smaller? Where did the profit go? How much was distributed to bonuses? These are the questions that ultimately led me to believe that I was not being treated fairly as an employee of this company. 3 1/2 years in this company and I was still being treated as “just the IT guy”. Something needed to change.

Collabpad shares my vision and philosophy and is a good fit for the future of my career. I’ll also have ownership in the company and in what I do. As a web developer and contributor to the MODx project I have an opportunity to make an impact in an industry that has a tremendous potential for growth. Going with Collabpad also means getting an instant 30% increase in pay. But that’s just the start. Compensation over the long haul of my career could potentially increase substantially based on many developing Collabpad, MODx, and other personal projects.

Collabpad is the new home for my career. I’m very excited and proud to be a part of this company. The future is looking a little brighter!