WordPress version 3.0 was released at the end of last week. It’s a little later than the intended May 1 release date, but WordPress is one of the most popular blogging and content management systems on the planet, so it was better to be late than cause issues for thousands of websites.

The update is the result of six months’ work by 218 dedicated contributors, culminating in 1,217 bug fixes and feature enhancements. So what can you expect from WordPress 3.0?

New Installer

WordPress has always been easy to install but it’s become even simpler. Few administrators will have to fiddle with the wp-config.php configuration file: all the MySQL settings can be specified within the installer panels now.

The new installer also allows you to specify the administrator ID and password. I suspect few people ever bothered to change it from the default “admin” in previous versions, so the facility to create your own ID will aid security.

New Interface

The WordPress 3.0 administration panels have received a polish. It’s hardly a radical change from version 2, but it’s lighter and feels slicker.

There are few obvious changes to the interface until you reach the Appearance section.

New Default Theme

RIP Kubrick: you’ve served us well and many websites use you to this day. Kubrick has been replaced by “Twenty Ten,” a new theme that has built-in support for child themes, background alterations, header customization, and drop-down menus.

The theme’s look and widgets can be customized within the administration panel, so I expect many people will never venture beyond the Twenty Ten theme. For those that do, there’s a new “Install Themes” tab that allows you to search for templates by color, type, and features.

Not impressed but then again, if they made a nice one, I’d be out of extra work!

WordPress Multi-user

WordPress MU was a fork that allowed hundreds of blogs to run from a single installation; it has now been merged with the main version 3.0 application. It’s disabled by default, but can be switched on by adding the following line to your wp-config.php file:

This could be the most important feature for web developers: you can create a number of websites using just one installation of WordPress. Updates are easier and hosting space is drastically reduced.

Custom Post Types

Pages and Posts were available in previous versions of WordPress:

• Pages were normally used for static content such as About Us or Contact Us pages.
• Posts would commonly be used for date-stamped news, articles, or blog posts.

WordPress 3.0 supports custom post types. For example, you could have a Product type that’s specifically used for items sold on your website. Product pages can then be treated separately; for example, have their own menu or search box.

Custom post types are configured using PHP rather than within the administration panels. Watch out for a full tutorial on SitePoint shortly.

Other Features

Where do I start? I suggest you visit the WordPress 3.0 Codex page for a comprehensive list.

Should you upgrade now?

I have no hesitation in recommending WordPress 3.0 for a new installation. But what if you’re upgrading from WordPress 2.x?

I’ve rarely experienced problems with the WordPress automated upgrade; it’s a quick one-click process that just works. However, my first attempt failed abysmally and I was left with a broken site. You should note that this was a test installation of 2.8.6 with lots of dodgy code and plugins, but you need to be wary: some themes and plugins are certain to break.

I would recommend updating a local test version of your site before attempting to upgrade the live server. Remember to back up your files and MySQL database, and you can’t go wrong.

If past experience is anything to go by, the WordPress team will almost certainly release 3.0.1 within a few weeks. If you’re especially nervous, you might be advised to wait a little longer …

Background: I’m a 22-year-old university student with aspirations of practicing rural medicine. I’m also a freelance web/print designer. It’s my sole source of income, and it’s what I do to put myself through school. I don’t have much of a social life because I balance a full-time university schedule with twenty to thirty hours a week of volunteer and paid design work.  I wouldn’t change a thing here. I’m happiest a-codin’ and designin’, and I count myself as pretty lucky to be able to make a living from my hobby while I’m working towards my doc dreams.

I’ve always been a nerdy and creative kid, so I got into computers and art at a fairly young age. I knew I liked designing and I spent a lot of time playing with Python to pick up on basic programming in middle school. In high school, I designed posters and crappy Geocities websites for nearly every extra-curricular club around. So when I was fifteen, I was really excited when my dad asked me if I’d be interested in doing some design work for a good business acquaintance of his, whom I’ll refer to from now on as CFH (for Client From Hell – what else?).  The job involved developing some simple layouts and promotional materials for an industry-specific print career guide. Armed with Publisher and Photoshop, I got to work.

The pay seemed pretty damn great for someone my age, and the idea of getting paid to do something I loved from home seemed pretty attractive compared to the notion of finding a summer retail job, an experience that had bored me out of my mind the previous year.

I did the job, CFH was happy with my work, and I continued working on small projects for him every now and then, past graduating high school and entering university.

In early 2009, I received a scholarship to study abroad for a semester. When CFH heard, he gave me his heartfelt congratulations, attended a goodbye party my parents had for me, and even gave me a generous monetary gift for my travel expenses. He’d become a very supportive family friend at this time, and was often the only non-South Asian face at family gatherings. I was really grateful for his support and thought the world of him. When I returned six months later, CFH let me know that the website I had designed for him had been voted into the global top ten of its field and that he would be branching out to cover a greater range of clientele. I knew that it was making him boatloads of money and I was happy to have been involved in a project that had achieved such status. He asked me if I’d be interested in taking a lead role in helping out with the company’s growth. I agreed enthusiastically, and got to work.

Fast forward to September, when I started as CFH’s primary web designer. The work was substantial, and took up much more of my time than previous projects had, but it was completed on time and he was thrilled with it. Prior to starting, I had let CFH know that I’d be changing our previously casual business relationship, and that I’d be invoicing him all Official-Like from now on since I was going to be using my work as my primary source of employment, and needed to keep good records for tax purposes. At this stage, CFH had started outsourcing all his back-end development work to India because it was cheaper than hiring Canadian-based developers, so I think my invoice took him by surprise as he had thought that web work would be ‘cheaper’ and ‘easier to do’ than print, for whatever reason.  Keep in mind that I was asking for what was essentially cents above minimum wage per hour of work not including the many hours I spent on development, consultation, edits, etc. because I was a little insecure in my legitimacy as a designer due to my lack of formal education in the subject. I now know this to be BS, as my current clients continue to hire me, citing the diversity of skills I offer and the highly creative and efficient nature of my print and web work. Nevertheless, I decided to give CFH a very steep discount because we hadn’t pre-negotiated the terms (even though he was aware of how much time each project was taking me). He took his sweet time with my invoice but finally, and begrudgingly, decided to pay up.

Things get a little ridiculous here.

CFH became increasingly imposing. His phone calls to me became increasingly longer and unrelated, bordering on uncomfortable.

He started demanding additional amounts of work to be done ‘immediately’, and when I’d ask about payment, he’d get irritable and tell me that it was ‘all about the money’ with me, and that he’d pay me as soon as I sent him an invoice via snail mail. Everytime I would mail out an invoice, he’d complain about some charge, and insist that I send him an updated invoice with this or that detail changed. This continued. I didn’t see a cent. I was even paying for stock photos and fonts out of pocket and not being reimbursed like I had earlier been promised. Keep in mind that I was in a particularly delicate position given that this person was my father’s good friend, and regretfully, my pride got in the way of actually saying anything to my father at the time. At the time, I didn’t think things would (could?) get worse.

They did, so in January, I put my foot down. I told CFH I’d no longer be working for him as he had become unbearably imposing, and had unreasonable expectations of me. Primarily, I was concerned because I hadn’t seen a cent from any of this work I’d done since September. He countered this by telling me that I was a rip-off and that he’d found a “professional design agency” that was better equipped to meet his needs. I wished him the best despite the fact that I was disappointed at having let go of my biggest client. I tried not to think about the many hours of work I wouldn’t be seeing a cent for anymore. At the same time, I was relieved that I wouldn’t have to put up with his borderline psychotic behaviour, or compromise the quality of my work anymore to meet his increasingly ass-backwards demands (white text on beige?).

Two days later, I received a phone call from CFH. He apologized profusely right off the bat, said that he’d pay his complete owing sum, and that he needed me to come back. He told me that he was extremely unhappy with the quality of, and the speed at which his new designers were completing his work. He begged me to come back, saying that this time he’d be more considerate of my time and reasonable in his expectations of me. I hesitated, but agreed to come back on the terms that he had to agree to the estimate I gave him prior to starting each job. Since my prices were ‘too steep’ for him and he didn’t want to contend with the fact that I could only work in the evenings due to my class schedule, we worked out a system where I would design the main graphical elements and primary pages, and his “professional design agency” would use these elements to develop subsidiary pages for the back-end. He agreed, and I got to work. As a sidenote, I should mention that his “professional design agency” pulled out when they realized the extent of work that needed to be done and his unreasonably demanding nature, but I digress.

So I hadn’t realized that my new agreement with CFH would otherwise translate into a one-way ticket to hell, with him reigning as chief Satanic commander.

His behaviour become fairly unbelievable at this point: he’d call me at 11:30pm and asking to have something by 7am the next morning. He’d whine when I’d decline. He’d have me sit on the phone for hours while directing me to this stock photo or that website to “get inspired by” (i.e. steal). At the time, I was under a lot of stress because I was experiencing a flare-up in an existing neurological condition that was putting me in the emergency room almost every week. I mentioned at one point to CFR that I was scheduled for an MRI in a couple of months, and he suggested that I pay out-of-pocket to get it done privately to avoid the wait. A private MRI has to be done out-of-province, and runs upwards of $1500. I explained that this was not an option for me given that a recent astronomical increase in tuition costs, and my student aid being cut substantially due to the increasing conservatization of my post-secondary institution.

Unsurprisingly, he didn’t ‘get’ it, telling me to bug my parents for the money or ‘something’. For the record, I’m completely financially independent, and have no intentions of harassing my parents for money I’m perfectly capable of making myself. My lifestyle ain’t so lavish that it requires a lot of  dough either: I’m a herbivore, don’t go out much, share an apartment with two other people, and ride a bicycle or take public transit everywhere. I use open-source software and recycle hardware whenever possible. Textbooks (which I generally buy secondhand) and tuition are my major expense, so while my living costs might be minimal, they’re still there. I wasn’t sure what part of this CFH couldn’t comprehend. Surely, he’d understand, having himself been a student forty years ago?

April was the final straw. I hadn’t seen a cent since September despite many false exclamations of  “the cheque is in the mail!” and what I now knew to be CFH’s lavish income from MY work.

He even had the nerve to call me to share his excitement about his new ‘keyless’ car, which he eagerly explained cost about as much as a house.

A myriad of other reasons followed, and you should tell me if I’m being a bit too sensitive here: Rape jokes? check. Racist remarks about his Indian developers DESPITE the fact that I’m South Asian too – but ‘not like one of them’, according to him? Check. Pictures of, and forwarded emails from women he was sleeping with? Check. Pervasive questions about my sexuality and personal life? Double-check.

I quit. I fucking quit. I sent a politely-worded e-mail explaining that I would not be working for him anymore. I don’t believe in leaving people in the dark about their behaviour, so I explained very clearly exactly how his behaviour had influenced my decision to leave. CFH responded by saying that he hadn’t “bothered to read my e-mail” but that “as a professional, [he] anticipated that [I] would provide [my] assistance in bringing the new resources up to speed..”. Regarding my invoice, his exact words were: “It shall, of course, be paid, in full, upon receipt” (all those commas, must be, compensating, for, something) seeing as how he was continuing to use my work. I had no problem with this, and made the remaining incomplete files available in their raw form on my server, alongside a detailed explanation of what the new designer/s would need to know. I’m not a vengeful person, so when the new designer got in touch with me, I was quick to direct him to where he needed to be. I just wanted to get paid and get CFH out of my life already.

Things seemed like they were ending on a slightly more positive note. A few days later  I got a call from my father. CFH had taken him out for drinks and then gotten him call me to “tell me” to come back to work for him. CFH had explained to him that I was upset about my pay (I didn’t realize zero dollars was pay?) but that he had ‘forgotten’ that I was now a grown-up with financial responsibilities, and not that same fifteen-year-old who was estatic about getting some spending money from his hobby.

He told my dad that I had left him hanging despite having given me a pretty decent deal; apparently my ‘mental health issues’ and ‘greed’ were getting in the way.

Clearly, this wasn’t just about the money for me anymore, and I realized that CFH’s new designer had probably bailed on him as well as a result of his.. loopiness.  Naturally, I declined. This upset my father initially, though he changed his mind later when I gave him a (heavily censored) account of what had actually happened.

Besides, hadn’t CFH mentioned that he’d be paying me for the work I’d already completed? The invoice was in the mail for the fourth time. Of course, I didn’t set my expectations too high because on May 11, I received  the following message:  “Let me be quite clear about things. Unless you immediately finish the projects you started for [Company Name], we shall not pay your invoice. Enough is enough!”

So now I know better than to expect any pay at all. Over 300 hours logged since September, and not a cent.

CFH continues to use my work and profit from it. I have no legal backing because (1) CFH happens to be a retired lawyer, and (2) I never drew up a physical contract because of the sporadic nature of the work and our long-standing business relationship. My own fault.  The best part? I have to defer my next semester at university to work more, because I couldn’t come up with my minimum tuition payment in time this year – seeing as how my job didn’t pay me, and I had to use my existing funds for things like rent, medication, and food. CFH is well aware of this. Sucks, but I’m not one to dwell in the past recognizing my own mistakes. I’m also far too grateful for things like a roof over my head to feel sorry for myself.

I learnt my lesson and since then, I have had no problem putting what I’ve learnt into practice with my current clients. Keep in mind that these are primarily charitable organizations and student groups with very limited funding – yet they have no problem respecting my time, signing contracts without complaint, agreeing to my terms and putting down a 50% deposit before I do any work.  These clients believe in my right to make a living wage from my work, and that’s exactly how all clients should treat their freelancer.

In closing, please don’t make the same mistakes I did with CFH. I don’t care if you’re making invites for your neighbor’s son’s friend’s girlfriend’s baby shower: always draw up a physical contract, regardless of whether the work is for-pay or not.

It’s a sad fact, but there is no guarantee of sanctity in a long-standing relationship regardless of how long you have had your client. There are people out there whose only motivation is to make as much money as possible while taking credit for your work and screwing you over in the process. A contract gives you some legal backing, and at the very least ensures that both parties understand the terms of service. Deposits are great too, because they ensure that both parties are invested in the project to some extent. Lessons are better learnt earlier rather than later.

And finally, to CFH? I trust Karma.

Rather than take a traditional page-design approach, we architected the database and interaction to be slim and exchangeable. First, the database was managed by use of two .NET-based Web Services written in C# that ingested via POST marking transaction success with 32-character IDs, output via XML and with multi-purpose edit functions using switches and variable inputs. Next, the authentication was built on a combination Basic and session-based approach using ASP – quick and efficient and easy to modularize should the system need to be moved to another platform. Finally, the front-end was built on a single HTML page with jQuery and jQuery UI to support the large number of Ajax exchanges and interactive features.

The result is a clean, easy to use, transportable DAM-CMS capable of complex transactions (multi-tiered, synchronous updates), hooks to a Silverlight-based rough cut editor from Southworks, and most of all, easy and quick to modify without affecting the production environment. By deploying a single jQuery-based controller separate from the parser and presentation components, new objects could be introduced to the interface based on a modifiable, dynamic XML document at login (or pushed in real-time, even after the user had logged in).

Some of the things we learned seem pretty silly but in fact were critical to the project completing in such a short amount of time.

First, segregate all the processes – by constructing the database, the web services, and the interface separate from each other, different developers could rapidly deploy all of it and mesh together quickly at stop-points each day. Chandler and I (with a big assist from Srini and Mio) were able to work independently and merge as he completed parts of the web service, or make changes as parts of the interface came together. Likewise, during testing, changes to the interface and sequence could be done in real-time and re-tested within minutes instead of having to go back to the drawing board. This was eased by the fact that issues could be easily attributable and divisible to interface or back-end, and handled separately.

Second, it’s the little things that make a difference. Providing small visual cues – update notifications at the top of the page that disappear, Ajax loader starburts, highlighted labels and input boxes – all give the user information, information that helps them get through difficult or tedious and complex processes (for example, in creating a VOD asset, a user had options that might require upwards of 50 different pieces of information – eliminating unnecessary components on the screen made it easier to get through).

Finally, architect it but be flexible. Changes happen, and while developers and project managers all try to keep scope creep from happening, we all know that in the real world, so does feature change. It is unrealistic to assume that projects will get started 6 months before the deadline. It is also unrealistic to assume that, in such a project with a short deadline, that you’ll remember to include everything. Likewise, it’s also unrealistic to assume that during the process you’ll realize that the planned interface will work – prototyping is great but it takes time and testing that you may not always have. Being able to be flexible by following a basic interface design, using modular builders (in jQuery UI or other framework) and XML-based instruction sets, and providing error catching systems in both the front-end as well as the web services makes the project continue to move, even when not all the parts are correct.

In the end, we had a lot of hiccups and it didn’t go as smoothly as we’d hoped but it did get done and delivered on-time. The client goes to training in 9 hours and there will likely be another round of changes, but that we were able to post a full-featured DAM CMS in such a short amount of time gives us new methods and targets for the future.

For years, the only other options were to use images (which then lose the semantics and made it difficult to update over time) or sIFR (which still rocks and can provide much more extended support for very unusual fonts).  Now you can add Font API support with:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

body { font-family: 'Tangerine', serif; }

Produces (though this is an image):

According to Google, the back end system converts the font into a format acceptable to the browser (including MSIE6), serving up only the weights and styles you specify, and can be cache headered in order to optimize/improve performance over the span of the site.  They also work with HTML5 and CSS3, so transformations like rotation and drop shadows still works.  Currently support exists only for Western European languages (Latin-1) but I’m pretty sure that will expand quickly once it takes hold.

Nice job!

Read the Google announcement here.
See the fonts available in the Google Font Directory.

[authored by Matthew Carpenter at Six Revisions, images courtesy of Six Revisions]

When it comes to expanding per-project revenue, service businesses are at an immediate disadvantage. As our “product” is essentially our time, increasing income on a per-project basis almost always comes with extra work and an increased time commitment. Office hours increase, personal time slips away, and before we know it, the “extra” $300 weekly income has turned into little more than lost time.

Product-based businesses have a distinct advantage when it comes to increasing revenue. Rather than increasing per-hour costs or per-project estimates, all that’s required is an increase in scale. Expand your operation, ship more units, and earn more money. While service businesses can take a similar approach–more employees, more projects, and relatively more income–scale can again become a problem.

These ten approaches to per-project earnings could help you boost total revenue and profits. Of course, they’re not foolproof, and some businesses will inevitably invest time into a strategy only to have it prove ineffective. However, they do work, and with the right balance of time investment and experimentation, they could become the changes that drastically increase your per-project, per-client, and per-hour revenue.

1. Don’t take on stressful or high-risk projects

Risk is a part of business. While service businesses operate at a slightly lower level of risk than a major product-based business or global company, they’re still taking cost-related risks whenever they accept a new project. The amount of time required could surpass expectations, the project’s complexity could be deceptive and surprising, or the entire project could be a stress-test disguised as something simple.

Whenever certain revenue is the goal, take on projects that offer security and relatively smooth income. Increasing revenue can be as simple as taking on more work, which is made easier when you’re not juggling complex projects.

2. Keep a network of contracted designers for project overflow

There are hundreds of reasons to network with other designers, and managing work overload and excess projects is just one of them. As with any business operating at 100% capacity, there are going to be times when your clients will expect you to take on work that’s simply not possible. Rather than scrambling to find new designers, managers, or developers, it’s best to keep a relatively wide network of professionals ready to offer contracted work to.

This selective and optimized outsourcing also gives you an opportunity to increase overall revenues. While your design team works directly on clients projects – earning on an input basis – outsourced design teams can bring in a relatively stable per-project income for you.

3. Use affiliate programs to help clients with hosting

If your design business specializes in local businesses and low-tech companies, it’s not unlikely that your clients will need their own hosting space or dedicated server. While it’s unwise to take care of hosting entirely on your own – problems can often arise, and client support is not a business that you want to be involved in – passing clients on to an affiliated hosting company is never a bad idea.

A range of hosting providers offer affiliate programs, some of which are more lucrative than others. Whenever possible, aim to provide hosting that meets a clients needs, not those of your business. It’s worth eating a small commission to keep a major client, and it’s never worth selling out a client for a one-off hosting kickback.

4. Don’t use a reseller hosting program for clients

Reseller hosting programs are often viewed as an ultra-simple passive income solution for web designers. Unfortunately, they’re about as far from passive as anything can be. Whenever you take responsibility for web hosting, you also inherit every problem that would otherwise be directed to the web hosting company.

Every second of downtime becomes your concern, every connection speed issue becomes a phone call  to your office, and every time a client forgets their cPanel password, you’re the person that’s called for support. Focus on low-maintenance revenue increases, not income streams like reseller hosting which require ongoing support.

5. Market yourself as a premium provider

Don’t want to deal with clients that pay poorly? Then don’t market to them.

Whether you’re a freelance designer or part of an established design business, the audience that you market your services to is by far the largest influence on your per-project income. Audiences that have come to expect low-cost services will expect the same from you, and explaining a premium cost structure instantly compromises your ability to offer services.

Study the market that your business operates in, and approach premium clients with your services. Most businesses don’t mind paying a higher price for high quality services, and if you can back up your promises, those clients can be great long-term assets.

6. Network other creatives and online professionals

Networking gives you an opportunity to hand off work to extra designers in the event of a quantity crisis. It also gives you an opportunity to market your services to other online workers, increasing your professional network and creating another stream of incoming clients.

However, there’s another benefit to networking, one that can do wonders for per-project earnings. Most online services businesses are happy to pay for business leads, or at least offer a commission for valuable projects. Create a professional network between yourself and some online marketers, copywriters, and other service businesses that are beneficial to new businesses.

That way, when you’re approached by a new client, you can offer them extra value through related services, and yourself more per-project income through related commissions. Win-win.

7. Offer extra services in project updates and pitches

There’s nothing wrong with a friendly, non-pushy upsell. By including an ‘extra services’ rate card or list of related products or services with every project email, you’ll find your business increasing and your professional relationships extending. Most clients want your web design services to increase their long-term business income, and extending projects to incorporate long-term marketing, design, or website upgrades can often do just that.

8. Aim for ongoing business relationships

Short-term projects can be a hassle. While they’re often worthwhile from an earnings perspective, the amount of stress and unnecessary headaches that come with them can drive a sane business owner crazy.

There are two ways to deal with short-term projects effectively. The first, and most effective method, is to ignore them completely and focus entirely on long-term projects and ongoing work. The second method is to make your short-term work more immediately profitable and effective. Charge higher rates for short-term projects, let your clients understand that you work with other clients too, and create accommodating timeframes your yourself.

9. Prioritize clients that have long-term growth potential

When seeking out new clients, it’s tempting to fall for the “take all” approach where you let accept almost any project, so long as it meets your income criteria. While this strategy is great for filling out a schedule, it almost never works effectively for maximizing per-project income and total revenue.

Opportunity cost is a true nightmare for a service business. Product-based companies can pass over opportunities only to focus on scale, but service businesses with set resources and time allotments are always stuck with the projects that they’ve taken. Taking each and every project that’s offered to you leaves you with no room to focus on the most profitable and valuable clients.

Whenever possible, prioritize new clients that have massive growth potential. The brand new marketing firm with a dedicated owner is more likely to need your ongoing services than an aging local business with relatively low online needs. Give time to clients that have huge potential to expand, and you’ll end up getting it back again in projects that are lucrative, long-term, and very secure.

10. Say “No” more often

Saying “yes” wins you clients, opportunities, and information, but it also locks you into deals that might not work in your favor. Despite the old “customer is always right” maxim, the reality of service businesses, particularly design businesses, is that the client often isn’t right. Design is subjective, and when a project comes coupled with a client that just doesn’t know what they want, things can become a major headache.

Increasing per-project revenue isn’t just about optimizing what projects you do have, but making sure you pick the right projects not to have. Every potential opportunity can be a drag for your business – an ongoing annoyance that brings in income but leaves you shut out of more lucrative products. Fight away per-project time-killers by saying “no” more often. It hurts at first, but the more you do it, the more effective your business will become.

Have you ever experimented with different revenue streams or per-project income strategies? There are hundreds of ways to increase per-project earnings, and we’ve just scratched the surface!

But I thought you weren’t supposed to mix apples and oranges.

[posts here, here and here]

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.

A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.

What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.

[MatSays: some rambling by the author omitted]

CSS transitions are being introduced right now in CSS Level 3 but have already been added as an extension to Webkit. Right now that means they work only in browsers based on Webkit, including Apple Safari and Google Chrome. [MatSays: so use a "real" browser but don't forget your graceful degradation for MSIE and stuff]

Where CSS Transitions Come From

Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot.

But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.

But many designers and developers, myself included, argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.

Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the CSS Transitions Module to the CSS Level 3 specification, closely modeled on what Apple had already added to Webkit.

[read the complete tutorial here]

The jury is still out on why I would need an iPhone app (though I guess it would make it simple for presentations maybe?) but I’m sure I’ll eventually fall into that one (of course, I still have to be convinced to get an iPhone in the first place).

Anyway, I admit that my only issue is that the box could be a bit larger (2GB on the free version) but face it, it’s still a business and it still has employees to pay so they can’t give away the farm. And it probably keeps me from storage too much digital crap that I don’t need.

PS: double bonus if you need a quick web page

While is why I am extremely proud of the evolution of the CMS that I designed and built for the Wimbledon Live player (see this post).

To understand the complexity behind designing the UX it’s important to understand the nature of the data and the critical effect of the workflow. First, video was being supplied from six sources, some to us using Saviant direct to our servers, some we pulled via FTP, and then of course the live streams (some HD and some SD). Then there were multiple parties…NBC (as the news reporter) needed editorial control over metadata, while iStream’s Managed Webcasting team needed to control the timeline over when items went to publication. My team, RnCS (Research & Creative Services) needed to insure that everything was tested before going live so we needed to throw the whole thing through a staging server before hitting a production server that then fed a cluster of edge servers on Akamai’s network.

So we structured it in several parts. First we put automated bots to determine when new assets had been dropped, specifically seeking out XML files that held the initial metadata, and dropped that into the CMS DB. Once there, the appropriate parties were notified by email (or in my case as PM, by SMS) – to update metadata, insert images, begin video transcoding, etc. Through the entire process, we designed screens to make it as easy as possible to follow the flow of assets, provide enough ability to each staff person so that overlaps in duties existed but that checkpoints assured data integrity throughout.

The grid above, for example shows the visual layout of the thumbnails that would appear in the cover-flow style playlist inside the player. Deep linking was provided so editorial users could create pointers on the MSNBC/NBCSports sites. Drag and drop allowed us to reorder objects to maximize the visibility of prominent players.

Each level of user had various modal windows to insert data. Even imagery was uploaded first to the staging, processed for size and then sent to production.

Because of the nature of edge servers, we also had to purge the cache after any update, so we provided a three-section grouping that allowed us to send the feed XMLs to production and clear the cache in one shot. And to make THAT process even easier, we built it so that it was accessibly by mobile phone so even if I was in transit, I could still update the CMS in a timely fashion.

Finally, the live streams had the ability to be toggled on and off so that the matrix of available feeds, particularly the Smooth HD stream, was optimized and prioritized. To be sure, there was still much room for improvement but given that the whole CMS was built in 6 days and now, five days into Wimbledon, has eased us into a steady, smooth workflow, speaks volumes for making it easy to use, intuitive (for example, the color designations on the player match the ones in the CMS, big text and extensive micro-transaction Ajax created an interactive environment), and overall a good experience.

Excellent article on a consistently overlooked problem for most web designers – help elements.  A help element is anything that provides the user with assistance in completing a task.  They come in many shapes, sizes and formats but the primary goal is to be unobtrusive but noticeable and, well, helpful.  Most designers/developers look at help elements with trudgery but in many cases it can actually enhance the user experience.

The place we frequently see help elements is in form completion and validation.  Why we somehow can’t provide scripts that reduce error rates in the first place is beyond me, but I suppose in a lot of cases you still have to provide visual cues and alerts to help some users out. 

In HCI we consider that a standard free-form entry is the most volatile of inputs and sure enough, that’s where you’ll encounter the most errors, but don’t neglect the other visual aspects, including external labels, internal (low contrast, like the one shown below) labels, direct manipulation (such as calendar popups). 

The extremes of direct input error handling might be dates and telephone numbers, but here you may need to also consider flow; if within the form you require country, simply provide formats that the user will be more familiar with (such as auto-complete country codes).

From Matt Cronin’s post:

Usability is the Key

With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?

Don’t Confuse the User
Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.

Placement Has a Major Impact
In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.

Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.

Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.

Next time you’re designing your site, put some extra consideration into the help elements and see what ideas you can come up with.  Send me some examples of your clever solutions via comment.

“Site conversion” is a very dry and unexciting way of saying “how to get more profíts from the same amount of website traffic.” Isn’t that a more upbeat way of expressing it? Who doesn’t want to get more profíts from the same number of visitors?

Increasing your conversion rate is a straightforward, even dramatic way of positively impacting your bottom line. It really cannot be emphasized too much that any improvement at all in your conversion rate means additional revenue that is total profít.

Remember this fact when you are told that the way to “make more money” is to invest in more traffic-generating schemes (and dreams, at times). Before you start spending more money to generate additional traffic, you need to do as much as you can with the traffic you are already getting. If you keep the horse ahead of the cart in your planning, you will have an efficient, stable, measurable conversion rate from which you can extrapolate x amount of additional profit from y amount of new-traffic generation.

The following tips are not in any particular order (except for Number 1), and can be modified and reordered to suit your particular situation. Take ownership of the change and improvement, and make sure everyone involved understands the importance of maximizing every revenue source, beginning with the existing ones!

1: Before you can repair or improve something, you have to have a good way of measuring where you are, what you’re doing, where you’re going, etc. You can sign up for a free Google Analytics account and use other low- and no-cost tools to develop your “analytics” and “metrics” – essentially fancy words that tell you how you’re doing with numbers.

2: Create landing pages that are both keyword- and campaign-specific. Try separating any related pay-per-click keywords into smaller and tighter groups, and then create the landing pages for each of those new subgroups. Conversions will almost certainly be better if keywords, advertising approaches and landing pages are thematically related and tightly integrated.

3: Test different headlines and copy writing. This might be the most effective way of quickly showing improvements. Therefore, you need to write compelling copy or find someone else who can do it for you. There is plenty of free advice about this (much of it worth every penny you pay for it), but the importance of copywriting as it affects site conversions cannot possibly be overstated. This is key.

4: It is very important to test your pricing, as it really does make a huge difference in conversions. If your goal is to maximize customer value, then the highest converting price may not actually be the optimal one. In other words, if you raise your price by 50% and only see a 10% reduction in conversions, you will more than compensate for the drop. Going the other direction, if you lower the price 15% and this doubles or triples your ratio, your gain compensates for your price reduction. Test your prices, and test them in both directions.

5: Website load time has become an oft-overlooked item in this age of “broadband everywhere.” Load time is critically important in reducing your “bounce rate” on landing pages. There are various online services that will measure your load speed (websiteoptimization.com), and when you know what it is, you can reduce it by compressing images, removing redundant items, optimizing your style sheets (CSS) and HTML code, and so on. The referenced website will also give you advice on other ways to improve your site’s load speed.

6: Clearly identify the sales path(s) and discard any points of resistance, or bottlenecks. Even if you have just a single product, there may be a number of different “paths” that lead to a sale. Perhaps you have a landing page to acquire visitor contact data, which then takes them to a sales page, thence to an order page, and so on. Check your metrics and analytics carefully and you should start seeing patterns in how your visitors navigate your site. If you can see when, where and how visitors are leaving the site, you can delete unnecessary steps, enhance the sales copy or the “call to action,” insert a few testimonials, emphasize your warranty or something else to capture that business. Do everything you can to keep the sales process simple and straightforward. The less confusing it is, the less resistance visitors will display.

7: Let your praises come from others’ lips. Sometimes talking about oneself can sound egotistical, and it has been clearly proven that third-party testimonials boost conversions. In marketing it is called “social proof” when you bring in statements and assessments from others to buttress your message. If you add testimonials – short blurbs, highlighted quotes, letters – to your various landing pages, sales pages and even shopping cart pages, you will almost invariably notice an improvement in your conversion rate.

8: You need to understand the mind of your market, and your customer’s experience with your website. Place an order on the site yourself as you step into the mind of a first-time visitor. Identify the hang-ups, inefficiencies and confusing or missing components that hinder your conversions. In concert with step #6 above, you want to identify why you are not converting, so that you can make the necessary improvements, whatever they may be, to improve your ratio.

9: Some people believe passionately in the power of media on landing, sales and order pages to raise conversions considerably. Others are not convinced, and there is not much hard data from controlled studies to consult. You should consider testing this idea yourself. You should try pages both with and without automatic play engaged. The idea is to lower buyer resistance, and if media helps, all the better. Music, motion graphics and video do add life and personality to your website, but there is a “sweet spot” (balancing point) and the fact remains that different age and cultural groups respond differently to the media. You need to make changes here in the context of your site’s demographics. You wouldn’t put rock music on your page of ladies’ perfumes, probably – unless you have a 20-something demographic and it’s a signature fragrance from U2 or some other chart-topping band.

Aren’t most of these lists called the “top 10″ this or that? You can count this tip as a bonus, then: Keep track of everything you do! Nothing “goes without saying” anymore, so you are hereby reminded that all your hard work can go for naught if you do not keep good records of what changes you are making, when, where, why and how. Chart your progress, review it regularly and don’t be afraid to make continuing refinements as you move along your strategic path.

Finally, as a “super bonus tip” – use some kind of sales accelerator, “offer intensifier” or other method to move people faster through the sales process. It could be a special “one time” or “limited time” offer, a limíted quantity offer or even a “special event” promotíon. Research what’s going on at other sites in your industry and others, and stay abreast of what seems to be working. Add your creativity to the mix, tailor things to your company’s situation and you should start seeing increased conversion rates in short order.

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

[read the entire article at Smashing Magazine]

Once installed, it adds an additional panel to the FireBug console labelled “Reference”. Check out the screen shot to see the changes and be sure to get all the details on SitePoint’s web site.

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

• Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
• Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
• Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

• Using large imagery and diagrams to illustrate the function of your product or service.
• Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
• Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
• Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

[excerpted...article by Kate Rutter via Adaptive Path]

There’s always been a strong visual element to our work: architecture diagrams, interface wireframes, concept models, system and service models. We’ve become adept at the computer applications that help us create these things, but there are other tools out there, such as the simple tools of pen, paper and sketching.
About two years ago, Adaptive Path experienced an upwelling of analog approaches. We started using design tools that jumped out of the screen and into the real world. We started using our hands to make things.

Alongside our computers there appeared slabs of blank paper. Rather than reaching for a mouse, we started reaching for a Sharpie. Large rolls of paper and drafting dots became part of the lingua franca of client working sessions. Sketching was the new black.

And we saw the impact of these approaches in many ways: more visibility for design solutions. More engagement in collaborative working sessions with clients. More design artifacts co-created in real-time. Our design solutions got faster and stronger.

There’s a lot of research to support the idea that visual thinking activates different parts of our brains than language thinking. Pictures allow a holistic view of something. "Seeing is believing" holds especially true when working with a diverse group of people.

Graphic elements create stronger memory and recognition points; it’s easier to remember an image than a page of text. Illustrations communicate ideas faster than descriptions, because processing pictures requires less "translation" than written language. This means more meaning in less time. In addition, there is a tactile pleasure to hand sketching that is rich and engaging.

Analog tools of pen and paper have had a major impact on our work. Looking back over the past two years, there are overall themes in the hands-to-paper trend. Below are four techniques that have supported more rigorous capture and exploration of ideas, fostered clearer communication of concepts, and as a result have enabled better and faster design. Each one is illustrated with a visual so that you can see how the different methods shift the nature of the info.

1) Hand Sketching
In order to become adept at capturing ideas and concepts visually, we need to know the basics of hand sketching. For the work we do, hand sketching falls into two main categories: drawing people, places & things; and drawing abstract concepts and ideas.

Drawing People, Places, Things
Getting comfortable with hand-sketching things, people and objects is key to communicating complex ideas for service design, product design and environments/spaces. We need to be able to communicate scenarios and interfaces clearly and visually, but at low fidelity. Tools in the toolkit are the basics of composition, shape, line quality, color, perspective and creating abstract human forms. Put together, these elements comprise a visual language for telling compelling stories visually and quickly.

What it’s good for:

• Illustrating product concepts and product interfaces.
• Creating scenarios and storyboards.
• Drawing physical spaces.

What it looks like:

View the larger image on Flickr.

Drawing abstract concepts & ideas

• Using simple shapes and lines to create compelling pictures of abstract concepts.
• Distilling thoughts from a group into a unified, clear picture.
• Creating visuals that "solve problems and sell ideas" (Dan Roam’s great quote!)
• Forwarding conversations with product and business stakeholders.

What it looks like:

View the larger image on Flickr.

• Capturing group conversation and contributions in real time.
• Using visuals and note-taking to guide the conversation.
• Developing a language of symbols to communicate potent concepts.
• Create an artifact of a shared experience.

What it looks like:

View the larger image on Flickr.

• Pushing your thinking out from a central concept or idea.
• Organizing your thoughts and ideas.
• Breaking away from lists and creating spatial notation.
• Figuring out what the heart of an idea is.
• Understanding the scope of a concept.

What it looks like:

• Capturing a presentation, talk, article, book or personal idea exploration.
• Combining words and pictures to illustrate and evoke meaning.
• Developing a personal style for visual communications.
• Maintaining a strong personal visual practice.
• Sharing ideas with others: friends, colleagues and community members.

What it looks like:

1. Proper use of <h#> tags
Many themes I’ve looked at do not use <h1>, <h2> and so forth properly.  Remember that the search engines (and POSH) dictate that the header tags place emphasis on specific information (which should include things like the title, the date of publication or the author).  Comb through the single post and main index templates to make sure there is consistent use of both <h1> and <h2> tags (at the very least, and preferably <h3> as well) and adjust the CSS to get the look and feel you want instead of relying on class-based <div> markup.

2. Too many links on the index page
Two problems here – first, the increase in links (past 40) decreases or dilutes the value of importance placed on the page.  At the very least, push the most important posts on the front page and consider whether or not you need the others.  Second, why are you sending people elsewhere in the first place?  Sure your friends might run a great blog but do you really need 100 listings in your blogroll?  Consider that external links in your posts should not go past 2 each and that you should keep the total number of links as close to 40 as possible.

3. Bad keyword choices
Especially on the main index page, it is critical that you consider your choice of keywords and mold your page to the proper density.  Use a free tool like Google’s Keyword Tool to find ones if you’re unfamiliar with structuring keywords.

4. Alt and title text
Always, always, always include alt attribute text on images and preferably include a title attribute on links and lists so that search engines know what tags to associate with the image.

5. Unique keywords
Every page in the site should have a) unique titles and b) different keywords.  You may even opt to remove the name of your blog from the page title because in the end it’s just a vanity thing isn’t it?  There are several plugins that can help you do this by converting the text and tags on the posts into the keywords and description <meta> elements.

6. Fix your markup
Bad markup is, well, just bad.  This goes for both the HTML as well as the RSS feeds.  By default (the newer versions of) WordPress provides at least 4 places to get the feeds from: www.domain.com/feed/, www.domain.com/comments/feed/, www.domain.com/wp-rss.php, and www.domain.com/wp-rss2.php and you should provide appropriate links to them as needed.

Now many of you (all 5 reading this post) are probably asking why I don’t even follow these rules necessarily and the fact of the matter is that for this blog, I don’t personally care.  I publish this for information purposes and largely for my students, not really for the public at large.  Should I teach by example, sure I should; but there are many other ways to get this information across, so I do as I wish.

Note for my students: especially #s 1, 2 and 6 I’ve spoken about in class frequently – if you have questions about any of this over the coming week – ASK!

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

1. Use Shorthand
Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).

2. Axe the Hacks
But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

3. Use Whitespace Wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.

4. Prune Frameworks and Resets
If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. This goes for resets as well.

5. Future-proof your CSS
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section.

6. Document Your Work
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.

7. Make Use of Compression
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies.

[Read the article in its entirety at Smashing Magazine]

For example, let’s say that you’ve created a table to hold all of your users logins and passwords (and some other info):

CREATE TABLE users (
   userID INT NOT NULL IDENTITY(1,1),
   login NVARCHAR(32) NOT NULL,
   passw NVARCHAR(100) NOT NULL,
   email NVARCHAR(50) NOT NULL,
   uName NVARCHAR(50) NULL,
   uCreated SMALLDATETIME NOT NULL DEFAULT (getdate())
)

On the one hand you can simply write a simple query in your server-side script (here in ASP.NET):

string mySqlQuery = "SELECT * FROM users
   WHERE login = '" + strLogin + "' AND passw = '" + strPass + "'";

And that would work great.  But now lets say you’ve constructed a second table containing more normalized information about the user:

CREATE TABLE usersMetadata (
   userID INT NOT NULL DEFAULT (0),
   dataDescription NVARCHAR(50) NOT NULL,
   theInformation NVARCHAR(1000) NULL
)

So what if you wanted to pull certain information about a specific user?  Once again we can write a simple query:

string mySqlQuery = "SELECT usersMetadata.*,users.*
   FROM usersMetadata
   LEFT JOIN users ON users.userID = usersMetadata.userID
   WHERE userID = " + intUserId + " AND dataDescription = '" + strSomeInfo + "'";

And that would work great too.  But as those of us who develop large-scale web sites know, we re-use queries over and over, frequently.  So what happens when we change the query on one page and neglect to change it on another?  Now we have two pages with different results.  Not good.

Using a stored procedure, we now give ourselves direct access to a centralized query.  This means that if we change it once (on the server), it changes for all instances of it.  So how do we do this?  Writing a stored procedure is relatively simple. 

CREATE PROCEDURE dbo.getUserMetadata
   @userID INT,
   @dataType NVARCHAR(50)
SET NO COUNT ON
BEGIN
   SELECT usersMetadata.*,users.* FROM usersMetadata
   LEFT JOIN users ON users.userID = usersMetadata.userID
   WHERE userID = @userID AND dataDescription = @dataType
END

Calling stored procedures is a snap too. Instead of writing out the entire query, we can just execute the procedure as:

string mySqlQuery = "EXEC getUserMetadata @UserID, @dataType";

Note that we would declare the @ parameters as well

Stored procedures can also be great when you need to extrapolate data from multiple places and perform additional actions on the data before output.  Stored procedures, for example, allow you to create, use and destroy temporary tables of information without affecting the whole.  Say, for example you want to test how your data might react if performed but you don’t want it to go against the live table first.

CREATE PROCEDURE dbo.testUserUpdate
SET NO COUNT ON
BEGIN
   -- this is the temporary table
   CREATE TABLE #users (
      userID INT NOT NULL IDENTITY(1,1),
      login NVARCHAR(32) NOT NULL,
      passw NVARCHAR(32) NOT NULL,
      email NVARCHAR(50) NOT NULL,
      uName NVARCHAR(50) NULL,
      uCreated SMALLDATETIME NOT NULL DEFAULT (getdate())
   )
   -- inserts all users created in the last month to the temporary table
   INSERT INTO #users SELECT users.userID,login,passw,email,uName,uCreated FROM users
   WHERE uCreated > DATEADD('dd',-30,getdate())
-- apply some silly change like altering the password for any user with a login beginning with an a
UPDATE #users SET passw = 'KILLED-YOUR-PASSWORD' WHERE login LIKE 'a%'
   -- now display the data
SELECT * FROM #users ORDER BY #users.login
-- and be sure to destroy the temporary (it is temporary after all)
DROP TABLE #users
SET NOCOUNT OFF
END

This procedure will have the same basic effect as having made the update to the users table but instead applied it to transitory data that was destroyed before leaving the query. Now assuming that the results were good, you could ideally just have a second procedure to actually alter the original table.

Shortly we’ll add to this post with an update. In the meantime, code on!

This morning I spent 90 minutes in line with Jennifer waiting to buy her 3G.  I’m not quite sure what the fascination is with actually waiting in line that long (more than 7 hours all in all) to get one, but I’ll give her credit for persevering that long.  Now on the other hand, the Touch Pro will reportedly be out in September, so maybe I’ll eat my own words.  Unless I break down and import one instead.

I sat through an enlightening department meeting today in which the issue of, amongst other things, design came up.  Without going overboard I would like to elicit a challenge to all WDIM students this quarter not only to complete the work they are assigned but to challenge themselves one step further and "polish" your design. 

Mr. Anderson had an interesting point – a lot of you don’t seem to know where to begin and he gave out a lot of recommendations that I strongly agree with: stepping away from the computer and drawing by hand, layering screencaps of choice sites on top of each other in Photoshop and deconstructing or morphing them together, cutting clips from magazines and arranging them together like a scrapbook.  The point being that despite everyone’s creative talents, sometimes finding direction is the hardest part.  Take a step to be different.

From my end I would like to see more polish.  Hopefully we’ll be able to incorporate a few good example of what we mean by this in IMD345 (UCD3) this quarter.  Or if you need some examples, pick up Web Designer Magazine (a glossy, expensive British mag – find it at Barnes & Noble) and check out some of the great design coming out of the UK.  Aspire to get that kind of cleanliness or artistry in your design.  By the same token, don’t lose sight of the content and functionality.

See you next week!

No, I didn’t write this but it’s something I wish I could lay claim to.

1. Inability to reason about code

Reasoning about code means being able to follow the execution path ("running the program in your head") while knowing what the goal of the code is.

Symptoms

1. The presence of "voodoo code", or code that has no effect on the goal of the program but is diligently maintained anyway (such as initializing variables that are never used, calling functions that are irrelevant to the goal, producing output that is not used, etc.)
2. Executing idempotent functions multiple times (eg: calling the save() function multiple times "just to be sure")
3. Fixing bugs by writing redundant code that overwrites the result of the faulty code
4. "YoYo code" that converts a value into a different representation, then converts it back to where it started (eg: converting a decimal into a string and then back into a decimal, or padding a string and then trimming it)
5. "Bulldozer code" that gives the appearance of refactoring by breaking out chunks into subroutines, but that are impossible to reuse in another context (very high cohesion)

Remedies

To get over this deficiency a programmer can practice by using the IDE’s own debugger as an aide if it has the ability to step through the code one line at a time. In Visual Studio, for example, this means setting a breakpoint at the beginning of the problem area and stepping through with the ‘F11′ key, inspecting the value of variables–before and after they change–until you understand what the code is doing. If the target environment doesn’t have such a feature, then practice in one that does.

The goal is to reach a point where you no longer need the debugger to be able to follow the flow of code in your head, and where you are patient enough to think about what the code is doing to the state of the program. The reward is the ability to identify redundant and unnecessary code, as well as how to find bugs in existing code without having to re-implement the whole algorithm from scratch.

2. Poor understanding of the language’s programming model

Object Oriented Programming is an example of a language model, as is Functional or Declarative programming. They’re each significantly different from procedural or imperative programming, just as procedural programming is significantly different from assembly or GOTO-based programming. Then there are languages which follow a major programming model (such as OOP) but introduce their own improvements such as list comprehensions, generics, duck-typing, etc.

Symptoms

1. Using whatever syntax is necessary to break out of the model, then writing the remainder of the program in imperative/procedural style
2. (OOP) Attempting to call non-static functions or variables in uninstantiated classes, and having difficulty understanding why it won’t compile
3. (OOP) Writing lots of "xxxxxManager" classes that contain all of the methods for manipulating objects that have little or no methods of their own
4. (Relational) Treating the database as an object store, possibly going as far as serializing the state of the object to a binary column
5. (Functional) Creating multiple versions of the same algorithm to handle different types or operators, rather than passing high-level functions to a generic implementation
6. (Functional) Manually caching the results of a deterministic function
7. (Pure Functional) Using cut-n-paste code from someone else’s program to deal with I/O and Monads
8. (Declarative) Setting individual values in imperative code rather than using data-binding

Remedies

If your skills deficiency is a product of ineffective teaching or studying, then an alternative teacher is the compiler itself. There is no more effective way of learning a new programming model than starting a new project and committing yourself to use whatever the new constructs are, intelligently or not. You also need to practice explaining the model’s features in crude terms of whatever you are familiar with, then recursively building on your new vocabulary until you understand the subtleties as well. For example:

Phase 1: "OOP is just records with methods"
Phase 2: "OOP methods are just functions running in a mini-program with its own global variables"
Phase 3: "The global variables are called fields, some of which are private and invisible from outside the mini-program"
Phase 4: "The idea of having private and public elements is to hide implementation details and expose a clean interface, and this is called Encapsulation"
Phase 5: "Encapsulation means my business logic doesn’t need to be polluted with implementation details"

Phase 5 looks the same for all languages, since they are all really trying to get the programmer to the point where he can express the intent of the program without burying it in the specifics of how. Take functional programming as another example:

Phase 1: "Functional programming is just doing everything by chaining deterministic functions together"
Phase 2: "When the functions are deterministic, they don’t need to be executed until the output is called for, and only for as much as needed. This is called Lazy Evaluation and Partial Evaluation"
Phase 3: "In order to support Lazy and Partial Evaluation, the compiler requires that I write functions in terms of how to transform a single parameter, sometimes into another function. This is called Currying"
Phase 4: "When all functions are curried, the compiler can choose the best execution plan by using a constraint solver"
Phase 5: "By letting a constraint solver figure out the mundane details, I can write programs by describing what I want, rather than how to give it to me"

3. Deficient research skills / Chronically poor knowledge of the platform’s features

Modern languages and frameworks now come with an awesome breadth and depth of built-in commands and features, with some leading frameworks (Java, .Net, Cocoa) being too large to expect any programmer, even a good one, to learn in anything less than a few years. But a good programmer will search for a built-in function that does what they need before they begin to roll their own, and excellent programmers have the skill to break-down and identify the abstract problems in their task, then search for existing frameworks, patterns, models and languages that can be adapted before they even begin to design the program.

Symptoms

These are only indicative of the problem if they continue to appear in the programmer’s work long after he should have mastered the new platform.

1. Re-inventing or laboring without basic mechanisms that are built-into the language, such as events-and-handlers or regular expressions
2. Re-inventing classes and functions that are built-into the framework (eg: timers, collections, sorting and searching algorithms) *
3. "Email me teh code, plz" messages posted to help forums
4. "Roundabout code" that accomplishes in many instructions what could be done with far fewer (eg: rounding a number by converting a decimal into a formatted string, then converting the string back into a decimal)
5. Persistently using old-fashioned techniques even when new techniques are better in those situations (eg: still writes named delegate functions instead of using lambda expressions for one-offs)
6. Having a stark "comfort zone", and going to extreme lengths to solve complex problems with primitives

* – Accidental duplication will also happen, proportionate to the size of the framework, so judge by degree.

Remedies

A programmer can’t acquire this kind of knowledge without slowing down, and it’s likely that he’s been in a rush to get each function working by whatever means necessary. He needs to have the platform’s technical reference handy and be able to look through it with minimal effort, which can mean either having a hard copy of it on the desk right next to the keyboard, or having a second monitor dedicated to a browser. To get into the habit initially, he should refactor his old code with the aim of reducing its instruction count by 10:1 or more.

4. Inability to comprehend pointers

If you don’t understand pointers then there is a very shallow ceiling on the types of programs you can write, as the concept of pointers enables the creation of complex data structures and efficient APIs. Managed languages use references instead of pointers, which are similar but add automatic dereferencing and prohibit pointer arithmetic to eliminate entire classes of bugs. They are still similar enough, however, that a failure to grasp the concept will be reflected in poor data-structure design and bugs that trace back to the difference between pass-by-value and pass-by-reference in method calls.

Symptoms

1. Failure to implement a linked list, or write code that inserts/deletes nodes from linked list without losing data
2. Allocating arbitrarily big arrays for variable-length collections and maintaining a separate collection-size counter, rather than using a linked list or other dynamic data structure
3. Inability to find or fix bugs caused by performing arithmetic on pointers
4. Modifying the dereferenced values from pointers passed as the parameters to a function, and not expecting it to change the values in the scope outside the function
5. Making a copy of a pointer, changing the dereferenced value via the copy, then assuming the original pointer still points to the old value
6. Serializing a pointer to the disk or network when it should have been the dereferenced value
7. Sorting an array of pointers by performing the comparison on the pointers themselves

Remedies

A friend of mine named Joe was staying somewhere else in the hotel, but I didn’t know which room number. I did, however, know which room his acquaintance, Frank, was staying in. So I went up there and knocked on his door and asked him, "Where’s Joe staying?" Frank didn’t know, but he did know which room Joe’s co-worker, Theodore, was staying in, and gave me that room number instead. So I went to Theodore’s room and asked him where Joe was staying, and Theodore told me that Joe was in Room 414. And that, in fact, is where Joe was.

Pointers can be described with many different metaphors, and the data structures you can build translated into many analogies. The above is a simple analogy for a linked list, and anybody can invent their own, even if they aren’t programmers. The comprehension failure doesn’t occur when pointers are described, so you can’t describe them any more thoroughly than they already have been. It fails when the programmer then tries to visualize what’s going on in the computer’s memory and it gets conflated with their understanding of regular variables, which are very similar. It may help to translate the code into a simple story to help reason about what’s going on, until the distinction clicks and the programmer can visualize pointers and the data structures they enable as intuitively as scalar values and arrays.

5. Difficulty seeing through recursion

The idea of recursion is easy enough to understand, but programmers often have problems imagining the result of a recursive operation in their minds, or how a complex result can be computed with a simple function. This makes it harder to design a recursive function because you have trouble picturing "where you are" when you come to writing the test for the base condition or the parameters for the recursive call.

Symptoms

1. Hideously complex iterative algorithms for problems that can be solved recursively (eg: traversing a filesystem tree), especially where memory and performance is not a premium
2. Recursive functions that check the same base condition both before and after the recursive call
3. Recursive functions that don’t test for a base condition
4. Recursive subroutines that concatenate/sum to a global variable or a carry-along output variable, and aren’t implementing tail recursion
5. Apparent confusion about what to pass as the parameter in the recursive call, or recursive calls that pass the parameter unmodified

Remedies

Get your feet wet and be prepared for some stack overflows. Begin by writing code with only one base-condition check and one recursive call that uses the same, unmodified parameter that was passed. Stop coding even if you have the feeling that it’s not enough, and run it anyway. It throws a stack-overflow exception, so now go back and pass a modified copy of the parameter in the recursive call. More stack overflows? Excessive output? Then do more code-and-run iterations, switching from tweaking your base-condition test to tweaking your recursive call until you start to intuit how the function is transforming its input. Resist the urge to use more than one base-condition test or recursive call unless you really know what you’re doing.

Your goal is to have the confidence to jump in, even if you don’t have a complete sense of "where you are" in the imaginary recursive path. Then when you now need to write a function for a real project you’d begin by writing a unit test first, and proceeding with the same technique above.

Signs that you are a mediocre programmer

1. Inability to think in sets

Transitioning from imperative programming to functional and declarative programming will immediately require you to think about operating on sets of data as your primitive, not scalar values. The transition is required whenever you use SQL with a relational database (and not as an object store), whenever you design programs that will scale linearly with multiple processors, and whenever you write code that has to execute on a SIMD-capable chip (such as modern graphics cards and video game consoles).

Symptoms

The following count only when they’re seen on a platform with Declarative or Functional programming features that the programmer should be aware of.

1. Performing atomic operations on the elements of a collection within a for or foreach loop
2. Writing Map or Reduce functions that contain their own loop for iterating through the dataset
3. Fetching large datasets from the server and computing sums on the client, instead of using aggregate functions in the query
4. Functions acting on elements in a collection that begin by performing a new database query to fetch a related record
5. Writing business-logic functions with tragically compromising side-effects, such as updating a user interface or performing file I/O
6. Entity classes that open their own database connections or file handles and keep them open for their lifespan

Remedies

Funny enough, visualizing a card dealer cutting a deck of cards and interleaving the two stacks together by flipping through them with his thumbs can jolt the mind into thinking about sets and how you can operate on them in bulk. Other stimulating visualizations are:

• freeway traffic passing through an array of toll booths (parallel processing)
• springs joining to form streams joining to form creeks joining to form rivers (parallel reduce/aggregate functions)
• a newspaper printing press (coroutines, pipelines)
• the zipper tag on a jacket pulling the zipper teeth together (simple joins)
• transfer RNA picking up amino acids and joining messenger RNA within a ribosome to become a protein (multi-stage function-driven joins, see animation)
• the above happening simultaneously in billions of cells in an orange tree to convert soil, water and sunlight into orange juice (Map/Reduce on large distributed clusters)

If you are writing a program that works with collections, think about all the supplemental data and records that your functions need to work on each element and use Map functions to join them together in pairs before you have your Reduce function applied to each pair.

2. Lack of critical thinking

Unless you criticize your own ideas and look for flaws in your own thinking, you will miss problems that can be fixed before you even start coding. If you also fail to criticize your own code once written, you will only learn at the vastly slower pace of trial and error. This is the root of lazy thinking and egocentric thinking, so its symptoms seem to come from two different directions.

Symptoms

1. "Business Rule Engines"
2. Fat static utility classes, or multi-disciplinary libraries with only one namespace
3. Conglomerate applications, or attaching unrelated features to an existing application to avoid the overhead of starting a new project
4. Architectures that have begun to require epicycles
5. Adding columns to tables for tangential data
6. Inconsistent naming conventions
7. "Man with a hammer" mentality, or changing the definitions of problems so they can all be solved with one particular technology
8. Programs that dwarf the complexity of the problem they solve
9. Pathologically and redundantly defensive programming ("Enterprisey code")

Remedies

Start with a book like Critical Thinking by Paul and Elder, work on controlling your ego, and practice resisting the urge to defend yourself as you submit your ideas to friends and colleagues for criticism.

Once you get used to other people examining your ideas, start examining your own ideas yourself and practice imagining the consequences of them. In addition, you also need to develop a sense of proportion (to have a feel for how much design is appropriate for the size of the problem), a habit of fact-checking assumptions (so you don’t overestimate the size of the problem), and a healthy attitude towards failure (Isaac Newton was wrong about gravity, but we still love him and needed him to try anyway).

Finally, you must have discipline. Being aware of flaws in your plan will not make you more productive unless you can muster the willpower to correct and rebuild what you’re working on.

3. Pinball Programming

When you tilt the board just right, pull back the pin to just the right distance, and hit the flipper buttons in the right sequence, then the program runs flawlessly with the flow of execution bouncing off conditionals and careening unchecked toward the next state transition.

Symptoms

1. One Try-Catch block wrapping the entire body of Main() and resetting the program in the Catch clause (the pinball gutter)
2. Using strings/integers for values that have (or could be given) more appropriate wrapper types in a strongly-typed language
3. Packing complex data into delimited strings and parsing it out in every function that uses it
4. Failing to use assertions or method contracts on functions that make assumptions about their arguments
5. The use of Sleep() to wait for another thread to finish its task
6. Switch statements, on non-enumerated values, that don’t have an "Otherwise" clause
7. Using Automethods or Reflection to invoke methods that are named in unqualified user input
8. Setting global variables in functions as a way to return multiple values
9. Classes with one method and a couple of fields, where you have to set the fields as the way of passing parameters to the method
10. Multi-row database updates without a transaction
11. Hail-Mary passes (eg: trying to restore the state of a database without a transaction and ROLLBACK)

Remedies

Imagine your program’s input is water. It’s going to fall through every crack and fill every pocket, so you need to think about what the consequences are when it flows somewhere other than where you’ve explicitly built something to catch it.

You will need to make yourself familiar with the mechanisms on your platform that help make programs robust and ductile. There are three basic kinds:

1. those which stop the program before any damage is done when something unexpected happens, then helps you identify what went wrong (type systems, assertions, exceptions, etc.),
2. those which direct program flow to whatever code best handles the contingency (try-catch blocks, multiple dispatch, event driven programming, etc.),
3. those which pause the thread until all your ducks are in a row (WaitUntil commands, mutexes and semaphores, SyncLocks, etc.)

There is also a fourth, Unit Testing, which you use at design time.

Using these ought to become second nature to you, like putting commas and periods in sentences. To get there, go through the above mechanisms (the ones in parenthesis) one at a time and refactor an old program to use them wherever you can cram them, even if it doesn’t turn out to be appropriate (especially when they don’t seem appropriate, so you also begin to understand why).

Signs that you shouldn’t be a programmer

The following may not have any remedies if you still suffer from them after taking a programming course in school, so you will stand a better chance of advancing your career by choosing another profession.

1. Inability to determine the order of program execution

Symptoms

a = 5
b = 10
a = b

print a

1. You look at the code above and aren’t sure what number gets printed out at the end

Alternative careers

1. Electrician
2. Plumber
3. Architect
4. Civil engineer

2. Insufficient ability to think abstractly

Symptoms

1. Difficulty comprehending the difference between objects and classes
2. Difficulty implementing design patterns for your program
3. Difficulty writing functions with low cohesion
4. Incompetence with Regular Expressions
5. Lisp is opaque to you
6. Cannot fathom the Church-Turing Thesis

Alternative careers

1. Contract negotiator
2. Method actor

3. Collyer Brothers syndrome

Symptoms

1. Unwilling to throw away anything, including garbage
2. Unwilling to delete anything, be it code or comments
3. The urge to build booby-traps for defense against trespassers
4. Unwilling to communicate with other people
5. Poor organization skills

Alternative careers

1. Antique dealer
2. Bag lady

4. Dysfunctional sense of causality

Symptoms

1. You seriously consider malice to be a reason why the compiler rejects your program
2. When called on to fix a bug in a deployed program, you try prayer
3. You take hidden variables for granted and don’t think twice about blaming them for a program’s misbehavior
4. You think the presence of code in a program will affect its runtime behavior, even if it is never invoked
5. Your debugging repertoire includes rituals like shining your lucky golf ball, twisting your wedding ring, and tapping the nodding-dog toy on your monitor. And when the debugging doesn’t work, you think it might be because you missed one or didn’t do them in the right order

Alternative careers

1. Playing the slot machines in Vegas

5. Indifference to outcomes

Programming could still be a hobby for you, but it would be in society’s best interests to defend itself against your entry into the world of professional software development.

Symptoms

1. You aren’t interested in fixing a bug that can be worked around by rebooting the computer
2. Your installation program silently deploys unsolicited third party programs that are unrelated to the function of yours *
3. You don’t use any ergonomic model when designing user interfaces, nor do you have any interest in usability studies
4. Your program exhibits pretension and grandeur beyond its utility, eg: displaying splash screens over active programs while loading in the background, or placing multiple launch icons in premium desktop locations *
5. Your program produces output to be read by another (eg: a browser), or implements a network protocol, and relies on the other party’s software to be significantly tolerant to spec violations
6. You write busy-wait loops even when the platform offers event-driven programming
7. You don’t use managed languages and can’t be bothered to do bounds checking or input validation
8. Your program asks for exploitable personal information from the user (passwords, social security numbers, credit card numbers, etc), but stores and transmits it without effective encryption
9. Your user interfaces do not make the difficulty of accidentally invoking a function proportionate to its destructiveness (eg: the "Delete Database" button is next to "Save", just as big, has no confirmation step and no undo)
10. You don’t use whitespace, indentation or comments

* – These are actually imposed by management more often than by the programmer, who only implements them. We’d still group them together for the sake of this self-test, though, and at the most suggest that one seek employment at a better firm, while the other goes back to business school to learn less destructive ways of making a profit.

Alternative careers

1. Debt collection
2. Telemarketing

This article from VandelayDesign makes a pretty good point about that first impression. Of course you’ll want to make the best one possible but don’t forget that because of the plethora of choices, a lot of visitors will forget anything other than the visual in a web design – throw some makeup and a new dress on it and frequently a visitor will not even know it was the same skeleton underneath. Nonetheless, it’s those fundamentals a web site still needs that counts and this post makes a clear and concise listing of them.

And for those of you too impatient to read the whole thing:

1. Load Times
2. Error Messages
3. Colors
4. Logo/Branding
5. Header Images
6. Typography
7. Layout
8. Advertisments
9. (Your) Reputation
10. Ease of Navigation
11. Clarity of Purpose
12. Unprofessional Items
13. Quality of Images and Photos
14. Accessibility
15. Popups and Popunders
16. Video and Audio
17. Associations
18. Quality of Content
19. Tone
20. Number of Comments and Trackbacks
21. Flash Intros

[via VandelayDesign]

Read the post “The Paper Version of the Web” and see the pics at deeplinking.net.

Dan Catt’s concept sketch for Flickr Places

“Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.

So how does one create sexy stylesheets? What characteristics would your stylesheets have?

A few months ago, I had the opportunity to present on this very topic at Web Visions 2007 conference in Portland, Oregon. In preparing my presentation, I surveyed twelve people who work in web design and development. The results of this survey, combined with my own work experiences helped me to compile a list of essentials to remember when creating stylesheets.”

01. Keep CSS out of the markup.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.

It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets.

02. Semantics is not just a buzz word.

You know I have to bring it up; semantics are your best friend. Beyond choosing the most appropriate, meaningful elements to describe your content, make sure also that you’re choosing semantic class and ID attribute values. Besides being the “right thing to do,” it really does make your life easier (and it makes the lives of your fellow team members easier too– if you working as part of a team). Take a look at the following rule:

.l13k { color: #369; }

If you were new to the job, and you saw that in the CSS file, are you going to know right away what that class is for? Most likely not. This class name could be an abbreviation for something, but there’s no real way you can tell right off the bat. Alternatively, maybe you put it there, so you know what it means, right? Today. But will you know what it means three years from now?

Now, let’s take a look at this rule:

.left-blue { color: #369; }

You might immediately know what purpose this class selector serves as you know exactly where the left-side blue module appears. So it would appear that this works. Until along comes that redesign you have to build in a week, as I mentioned earlier. In the redesign, this module is now to be positioned on the right, and colored red. The class attribute values no longer makes any sense, so now you have to either change all your attribute values, or leave it as it is (which could lead to mass confusion).

It is always best to refrain from using colors (either the color name or its hex value) or width/height dimensions in your class attribute values. You should also avoid any attribute values that are presentational (such as “box”).Presentational attributes defeat the purpose of separating presentation from content.

Finally, let’s look at this more appropriately named rule:

.product-description { color: #369; }

Here you can see that the rule styles product descriptions, no matter how many times your design changes. Clarity is a beautiful, beautiful thing.

03. Take advantage of commenting.

Commenting your CSS files can be a great deal of help to you and others during development if you use comments in creative and meaningful ways. At the most basic level comments provide little reminders why a certain rule is used. But you can use comments to really help improve organization and efficiency.

Reminders and notes

The common approach for commenting, leaving reminders and notes for yourself and other developers can help avoid confusion later. Keep these brief and simple. For example:

/* Turn off borders for linked images */
img { border: 0; }

Time stamp and signature

Some designers and developers also note the date and time that the CSS file was last updated, along with their name or initials. This information can provide a quick indicator of who to contact, as well as how up-to-date the file is.

/* Sushimonster Typography Styles
   Updated: Thu 10.18.07 @ 5:15 p.m.
   Author:     Jina Bolton
   ----------------------------------------------------*/

Depending on the project, this can be a good idea, particularly if you are working on a team. Keep in mind that some organizations require leaving this type of information out (some companies prefer to keep names and dates out of files), so it is best to find out if there is a mandate on this sort of thing.

Organization

It’s a good idea to use comments to indicate the different sections within a CSS file. For example, if all header styles are grouped together, you can use a comment to section these styles off from the next section’s styles:

/* HEADER
   ----------------------------------------------------*/

I’ll go more into this a little later, when discussing “Separating style types.”

Comment flagging

If you have your CSS file organized into sections as I described above, comment flagging can also be useful to make it easier using FIND to skip down or up to the parts of the file you want to see. You can use a character (such as an equal sign [=]), along with a keyword (typically the name of the section, such as “HEADER”) to provide “anchors” in your CSS file:

/* =HEADER
   ----------------------------------------------------*/

This is particularly useful in long and complex stylesheets. You can read more about this at Stop Design.

Reference

A less common, but nonetheless useful approach is to use comments as reference guide. One example of this might be to include a color guide as you can see in Steve Smith’s CSS file:

/* COLORS
   Body Background:       #2F2C22
   Main Text:             #B3A576
   Links:                 #9C6D25
   Dark Brown Border:     #222019
   Green Headline:        #958944
*/

You should place this guide at the top of your CSS file to help you remember what color values you use throughout your site. Another example is of an index-like approach. Here you can define different sections so that you can jump down to them (perhaps by using comment flagging). Here’s one example:

/* GENERIC
   HEADER
   SIDEBAR
   FORMS
   TABLES
   FOOTER
*/

/* =GENERIC
   ----------------------------------------------------*/

04. Know when to use conditional comments or hacks.

There are many articles regarding the problem with hacks, and why Conditional Comments are a better way to handle Internet Explorer issues. Then there are articles that say otherwise. While I agree that Conditional Comments can be a much better solution than littering your CSS file with hacks, only recently have I come to realize there are instances where they are actually not the most appropriate solution.

Imagine that you want to set a minimum height for an element. The IE6 developers did not implement min-height, so you know that you can use height, which will be treated the same way. Does it make sense to create a whole new stylesheet, and inject it by way of Conditional Comments in your markup, when all you need is this one rule? Would it make better sense to keep the min-height and height rules together, and opt for a small “hack” within the same CSS file? In this case, I would consider it less efficient to use Conditional Comments.

Another thing to consider: if you have multiple places that your styles are located, using multiple CSS files and Conditional Comments can make your debugging process more difficult. Also, if you need to alter something (perhaps the min-height value in the above-mentioned scenario), you have to open more than one file to make this change. In many cases, this may not be such a big deal for you, but imagine if you have something defined in your main CSS file, and then redefined in 3 different IE stylesheets. That could turn out to be a hassle later down the road, especially if another developer making the edit doesn’t realize that these overrides exist.

If you do use Conditional Comments, I recommend leaving a comment in your main stylesheet letting you or a fellow developer know that an IE-specific rule exists. That way when you have to edit a height or something of that nature, you know that you have more than one file to open.

As always, if you do use hack, remember that browser updates can change what works later down the road, and the hack you use now may not work later versions.

05. Organizing selectors and declarations

Always, always keep your CSS clean and organized. I prefer organizing my selectors by style groups:

• reset styles
• typography styles
• layout styles (header, content, footer, etc.)
• module or widget styles
• etc.

Then, within each of those groups, I organize selectors by DOM hierarchy (working down the page, from the outside in):

• any parent styles (containing elements, working outside-in)
• block-level element styles (paragraphs, lists, etc.)
• inline element styles (links, abbreviations, etc.)
• etc.

Then within those, I work by element types:

• paragraphs
• blockquotes
• addresses
• lists
• forms
• tables
• etc.

Finally, I prefer to organize my CSS declarations by style type:

• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles

Some people like to organize declarations alphabetically. It doesn’t make sense to me, but it might make perfect sense to you. Whichever method you choose, stick with it, and be consistent.

06. Creating a framework

When it comes to developing CSS, If you find yourself doing the same things repeatedly, it is a good idea to consider creating a library or framework. A framework can be made up of a group of stylesheets that act as a foundation for your site, and help speed up your development time. Typical stylesheets you may find in your framework might include:

• screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
  • reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
  • typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
  • grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css – A print CSS file would include your styles you want to be used when the page is printed.

One example of a framework is the Blueprint framework put together by Olav Bjørkøy (which based itself off of work developed by authors including Jeff Croft and Eric Meyer). Another popular framework can be found at the Yahoo! User Interface Library. Many developers do feel that these pre-built frameworks contain markup and CSS that are a bit “bloated” and also that they contain presentational class attribute names.

NOTE: As I was writing this article in its draft stages, Jeff Croft released the post What’s not to love about CSS frameworks?, in which he mentions in the comments he was told that people think I am strongly against frameworks. I’m not sure where this came from, but as I stated in my response, I am not against CSS frameworks, and am very much for them.

For the best results, I recommend that you create your own framework that works best for you or your organization.

07. Balance readability and optimization.

Styles in formatting vary from developer to developer. Some developers use formatting styles that offer great readability, and then optimize the files (removing comments, spaces, tabs, carriage returns, etc.) before pushing the file live. This is a great technique and one I would recommend (done carefully). However, if you are somehow in a situation where you can’t really go through those steps, try to find a style that balances readability and optimization. Steve Smith has a great suggestion that offers a little bit of both.

Also, consider using hyphens instead of underscores. Microformats use hyphens as a standard separator, and certain older browsers have a hard time with them. You can read more about this at Underscores in class and ID Names.

08. Master your text editor.

Just as an artist has proper tools they know well, it’s important for a designer/developer to know the tools they use well. For CSS, that would be the editor you are using.

There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc. I’m not here to tell you which one to pick; they all have their pros and cons, and the right editor for you is up for you to decide. However, once you have decided on a text editor, make sure you learn everything you can about it. Find out what the shortcuts are, and learn all the tips and tricks you can.

Mastering your text editor is the best way to speed up your development time, and help you be more much more efficient when creating sexy stylesheets.

09. Use version control.

Smoother maintainability is also an important part of creating sexy stylesheets. This is where version control can be your best friend. It’s not only helpful for teams, but it can be a lifesaver even for the sole designer/developer.

Some applications have built-in mechanisms for source control. DreamWeaver uses a check-in/check-out system (that can help make sure that a developer doesn’t edit a file that is already currently being edited), as well as synching capabilities (which lets you sync and merge your local files with your remote files, or vice versa). This can be very handy, but are somewhat limited.

Subversion (SVN) or Concurrent Versions System (CVS) are great tools to use for more robust management, with additional options, like being able to revert, view changes (which is extremely helpful for teams — you can track who added/edited/removed code and when they did it), and resolving conflicts. There’s a great article by Jonathan Snook, called “Hosted Subversion” you can read for more information on how to set this up quickly and easily.

10. Create and maintain a style guide.

While in some cases, a style guide is an author’s guide with grammar rules and writing standards, it can also be used to outline standards for design, development, and content. A style guide is a great way to have a reference manual that can clarify rules on typography, grid, color, image sizes, etc.

When creating a style guide, it is a great idea to provide reference for the markup and CSS. This reference can be used as a handbook for the development team and future developers. It can include defined layouts, in which you can list the different layouts that can be used, and provide the associated markup and styles.

Finally, you can also leave steps for quality assurance for developers, (such as checking validation and accessibility) to ensure the highest quality.

Conclusion

Being an expert in CSS is so much more than having advanced CSS skills (i.e.: fully understanding the cascade, the box model, and how browsers work). I encourage you to think about ways you can constantly and consistently improve maintainability and efficiency. Think beyond what is designed in the comp, even if that is all that you have been provided. Make the CSS intelligent and plan for the future. Overall elegance in workflow is essential to master.

1. Pick one book. Concentrate on one thing and one thing only.  If you try and spread yourself too thin you’ll get frustrated, learn very little or both.  Instead, pick one topic.  Go to the bookstore, sit down and read 2-3 pages from each book on the topic, and pick the one that suits you.  Get that book.  If you can’t read it, you won’t get far.

2. A little a day. Pick a specific time each day and force yourself to do 30 minutes to 60 minutes every single day during that time to work a bit farther…make it a routine and reward yourself when you complete each day’s work.  Less than 30 minutes is too short, more than 60 will just cause too much confusion.

3. Pick another book. And I mean a non-technical book.  Read 15-30 minutes a day of some literary classic, a self-help guide, some biographical … anything not related to what you are working on but pick something that will expand your mind.  Some ideas:  “We the Living” by Ayn Rand, “Day in the Life of Ivan Denisovich” by Solzhenitsyn, “The Hottest State” by Ethan Hawke or anything by Roald Dahl (for fun) or Orwell (if you need some futuristic ponderings).

4. Enjoy the Day. Like myself, I am sure most of you have to work and I’m sure you got a lot going on but take some time to enjoy yourself.  If you can’t learn to enjoy the free time in your life, why bother living it?

Fortunately for most designers, the performance impact is only in extreme situations. But it’s definitely something to be aware of when writing CSS.

For the Web designer n00bs reading this: CSS selectors are names given to styles — font-size, color, background-color, etc — in internal and external style sheets that dictate a Web page’s design. By using sibling, descendant (two or more selectors) and child selectors (a selector that’s a “child” of another selector), designers can apply greater control over the CSS for their pages.

Sykes’ test uses a 20,000-item loop in an HTML document. Within that document, he uses three levels of nested “div” tags, the lowest containing a “paragraph” tag that also contains an “anchor” tag. The anchor tag is targeted and styled using the CSS.

The test also consists of three parts: class (each anchor tag gets a unique class name), descendant selectors and child selectors. The results — listed by the browsers with the largest performance hit — were as follows:

See Sykes’ graph of his results

Class

1. Firefox 3 (OSX)
2. Firefox 2 (OSX)
3. IE 7
4. IE6 and Safari (aprox. tie)

Descender selector

1. Firefox 3 (OSX) and Firefox 2 (OSX) tie
2. Safari
3. IE 7
4. IE 6

Child selector

1. Safari and Firefox 3 (OSX) tie
2. IE 6
3. Firefox 2 (OSX)
4. IE 7

Note that Opera 9 (OSX) was excluded because it couldn’t render the test page for Sykes.

Sykes does point out that this test measures the performance under extreme circumstances — there aren’t many Web pages with this amount of markup or styling. But he does caution that descender and child selectors can cause at least a slight drop in browser performance.

You can download Sykes’ tests in ZIP format.

[via DownloadSquad via comment by Dave Hyatt via ShaunInman.com]

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

[Excellent article from 3.7CREA.TV - click here for original article]

This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs. Of course, there are many possibilities. Hopefully, this post will help you to find your way to more effective and beautiful web designs or at least provide some good starting points you can build upon or develop further.

[Read the rest - via Smashing Magazine]

Image: Adaptive PathI was also recently at Mix08 where it was apparent that there was an huge interest in more collaborative approaches to problem solving and with the advent of socializing technologies, you should broaden your means of getting ideas generated.

I was prompted to think about this after reading a blog post on Adaptive Path about this very topic here and after watching one of my own UCD groups use overhead projections and whiteboarding.  But this is only a slice of the puzzle.  Be proactive, and be open-minded when searching for solutions.  Use colors, use technologies, use visuals and be big.  The answer is always out there, but it may be buried in a mound of ideas, so give it a reason to pop out.

[read "Tapping Into Conference Participants’ Brilliance"]

So I saw this post on Treehugger and it brought me back to my own college experience (yes, back in the Dark Ages), also known as “three years of malnutrition.”  Like most of you, money was never easy to come by and for some unknown reason, one of the bare necessities in life that we always seemed to scrimp on was food (mind you I was in culinary school).  In any case, I did in fact test it out once and discovered that (in 1987 dollars), I could eat for a week on less than $10 (I had actually written a small journal in one of my notebooks).  My week’s groceries consisted of 35 packs of ramen (then 8¢ a pack – and yes, that meant 5 a day), some broccoli, a bunch of carrots, a small oil, a spaghetti sauce and a pack of ham.  Steal a few soy sauce packets from the Chinese takeout and you have at least 5 varietal dishes.  Any stories of your own?

Want to start a podcast, but don’t know the first thing about audio engineering, web hosting, or RSS feeds? Blogtalkradio’s newest service makes podcasting a cinch, which is probably why they call the service Cinch.

All you have to do is a call 646-200-0000 from any phone and start talking. Cinch will record your conversation and create a feed with your call as an MP3 enclosure. You never even need to visit the Cinch web page or sign up for the service. So how do you find your feed? Simple, just add your phone number to the end of the Cinch URL. For example, if your phone number is 555-253-4756, your feed would be published at http://cinch.blogtalkradio.com/5552534756.

Now, the audio quality isn’t going to be amazing. We’re talking about recording telephone calls here, after all. If you’re serious about podcasting, you’re going to want to get a decent microphone, some audio editing software, and so forth. But if you just want to record short interviews on the go and you don’t have any other equipment handy, Cinch could be a lifesaver.

And if you’re worried about sharing your phone number with the general public through the URL, you can always use FeedBurner to republish your feed with a different URL.

[via Scripting News]

The New Iteration: How XAML Transforms the Collaboration Between Developers and Designers in Windows Presentation Foundation (WPF) by Karsten Januszewski and Jaime Rodriguez

Blog post by Client Platform Technical Evangelist Tim Sneath

Download the Whitepaper

Please note that this is a beta build and not intended for production use.

First, lots going on with iStreamPlanet, our Silverlight development and other technology advancements.  For those of you who are able to, head on out to CES – it looks like this will be a pretty good show this year.  And if you have a chance to head to Mix08 – there will be some really cool things to see there too.  In any case, the contractors didn’t finish our new office build-out so me and the team are stuck in temporary office space – no thanks to Wynn practically pushing us out the door from the office I’ve been residing in the last 5 years.

Second, I know a lot of you use and have gotten comfortable with Firebug.  Here’s a similar plugin I found that you should also get.  It allows you to do a lot of those user variations that you might not otherwise account for – exact screen resolutions, Javascript on/off, etc.

Finally, I admit, I use cheat sheets.  It’s bad enough trying to remember markups, commands, syntax, functions, and methods for 1 or 2 languages, what about 5 or more languages that a web developer typically has to know (and if you have no idea what I’m talking about, see below)?  UK-based Internet dude Dave Child, who writes good, poignant articles and blogs about a ton of topics, has a great set of free (yes, FREE – and if you use them you should send him a note and thank him for saving you a few bucks after all the tuition you’ve paid) cheat sheets in PDF format for download.  I recommend grabbing them (at least the list below) as soon as you can – with the Web, you never know when something’s going to disappear.  Check out the list and links here.

And as far as the list of languages you should know as a web developer (and this rant is aimed directly at my students) …

1. HTML/XHTML (and you should know the difference)
2. CSS (and be current and know the hacks)
3. Javascript & Javascript prototyping
4. ASP Classic (sorry guys, I still think it’s a good fundamental language)
5. SQL (for MySQL)
6. PHP (both functional and object based)
7. XML (and variants of it, plus XSL)
8. ActionScripting
9. And if you really want to get ahead, you need to learn at least one of the following to stay ahead of the curve in the next few years: ASP.NET, JSP, Ruby on Rails, or C#

And no, AJAX is not a language as many of you still think – if you thought it was…GO LOOK IT UP!

See you in class … don’t be late!

All you have to do is (in MSIE) go to Internet Options, click over to the security tab and add these locations to the Block list:

127.0.0.1 www.google-analytics.com
127.0.0.1 google-analytics.com
127.0.0.1 ssl.google-analytics.com
127.0.0.1 *.google-analytics.com

As to my question above, here’s a pretty interesting post on Google’s reach…

The reason we do a “Luhn-10 check” on an entered credit card is to verify that the user did not enter invalid information before it gets sent to the credit card processor. Why? Because a transaction request, whether it’s valid or not, costs the site owner money! Every request is charged a base transaction fee (and this varies depending on the size of the company, the volume of transactions and many other factors; my company for example, has a transaction fee of 12 cents*). So in other words, we want to make sure that if we’re about to get charged that fee, we’d better make sure ourselves that we have as accurate a number as possible.

Luhn-10 (which used to be known as Mod10) was developed by an engineer at IBM in the 1960’s. The basic premise is that a homogenous formula, when applied to a string of numbers, will always yield the same result. In the case of Luhn-10, the result is 0. For this example, use the Visa card:

4563 9601 2200 1999

Step 1: Reverse the number. Beginning with the (new) first number of the whole sequence, multiple every odd digit by 1 and every even digit by 2:

Step 2: For all of the results that are greater than 9, add the two digits in the result:

Step 3: Sum those numbers:

9+9+9+2+0+0+2+4+1+0+6+9+3+3+5+8 = 70

Step 4: Modulus the sum (this is why it used to be called Mod10). In arithmetic, the modulus is the remainder after a number is divided by a specified number:

70 = 0 mod 10

All major credit card providers use the Luhn-10 system (Visa, Mastercard, American Express, Discover, Diner’s Club, Carte Blanche and JCB). There is currently an alternate system that uses a 1 instead of a 0 as the modulus but they are not widely accepted cards. Note that there are several card numbers that are widely accepted as test card numbers and are always overlooked. The most common one is 4111111111111111 (and is therefore never considered to be a real credit car number). Also note that credit card numbers can have 13, 15, or 16 digits

Screen Resolution ≠ Browser Window Resolution

As the screen resolution increases with high resolution monitors, users generally tend to avoid browsing in the full screen mode. Besides, in many cases sidebar is floating left or right on the desk while browser extensions are placed within the browser window.Therefore it’s important to understand that in most cases the browser window resolution is much smaller than screen resolution. Although some dependencies might exist, it’s hard to estimate what screen resolution is actually used.

Target Your Audience: Find An Average Profile

In order to gain a better understanding of your average user profile it’s a common practice to use the data provided by modern analytics tools such as Google Analytics. Most of them not only track an average screen resolution of your visitors, but also users’ behaviour and their preferences.Thus you can determine which users stay longer on your web-site and improve the user experience by fine-tuning of your design. Once you know the average profile of your visitors, you might motivate your design decisions by expected values. You can find some of the heuristics derived from recent studies in one of our recent articles Who Is Your Visitor: An Average Profile.

Common Screen Resolutions

Eoghan Mccabe, the project manager of FoldSpy, has provided Smashing Magazine with exclusive data about the screen resolution which users tend to browse with on large web-sites. Foldspy measures browser screens for advertising purposes.Over 18,000,000 browser screenshots above the fold have been analyzed which makes a quite impressive data set one can rely on. Here are the results of the survey. According to the data, you can be sure that your visitors will be able to see the content placed within the 500px-800px screen height. Over 80% will be served well with 1000px screen width, 28% of the users tend to browser with 1250px screen width. You can click on the image to get a a live chart.You can find a further survey related to the widely used screen resolution in the article by Thomas Baekdal which was published last year.

So what do we do?

Don’t optimize your web designs for your personal convenience. Don’t guess blindly; instead try to estimate the profile of your visitors and leverage your design accordingly. In most cases you can improve the user experience by keeping the width of your layout at 1000px. Design for your visitors, even if it means that your design looks terrible on your high-resolution wide-screen laptop.

Original article by Vitaly Friedman and Sven Lennartz posted on Smashing Magazine.

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.

Hmmmm … smell of five planes!

2. Do it by hand

Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.

There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.

Oh yea baby - except I think you should throw out the Dreamweaver – learn it with NOTEPAD!

3. Stylesheets: importing vs linking

There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.

Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:

<link rel=”stylesheet” href=”simple. css” type=”text/css” media=”screen”>
<style type=”text/css” media=”screen”> @import url(simple.css); </style>

4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.

Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.

Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

Be a bit careful with this one.  Remember that MSIE6 does not support transparent PNGs…see #11.

5. Commenting

When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.

Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.

Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.

<!– HTML commenting looks like this and is enclosed within angle brackets and two dashes. The opening tag includes an exclamation mark. –> /* CSS comments are enclosed by a forward slash and an asterisk. */

Thank you, thank you!

6. Use simple PHP to build sites

There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.

Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:

<?php include(“filename.html”); ?>

Coming soon, as in this week – scripting for consistency!

7. Set fonts using ems

Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?

The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:

body { font-size: 62.5% }

This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:
<div>
<div class=”hack”>
Your content goes here
</div>
</div>

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:

<form style=”margin-top: 0; margin-bottom: 0;”>

“Whitespace doesn’t matter in HTML” is a fallacy – it does – refer back to #2 and learn it by hand – that’s the only way you’ll ever find out when they happen so you can learn how to fix it.

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:

<img src=”logo.gif” alt=”logo” title=”logo/” />

Not to mention SEARCH ENGINES.

13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.

15. Favicons

Favicons are the little 16×16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.

h1 { text-transform: uppercase; }

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.

<img src=”image.jpg” align=”left”>

18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.

With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:

<meta http-equiv=”content-type” content=”text/ html;charset=utf-8” />

19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:

<link rel=”stylesheet” type”text/css” href=”print.css” media=”print”>

or

<style type=”text/css” media=”print”> @import url(print.css); </style>

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Source: 20 pro tips by Jason Arber in .NET Magazine

Microformats have actually been around for over 2 years but are starting to become more and more prominent.  They are defined as “a set of simple, open data formats built upon existing and widely adopted standards.”  In layman terms, they are extensions to tag markups that provide bits of information (based on the microformat used) in a comprehensive format that can be used to network with other bits of information.  Some of the better known ones are hCard, hCalendar and rel-tag.  You can read more about microformats here.  And if you happen to be in a bookstore that has a fairly good computer section, check out “Microformats” by John Allsopp.  I actually found a copy at B&N the other day and read half over a cup of (puke) Starbucks. For an example of microformat code I use, look at the source of the page.  Notice two meta tags:

<meta name="ICBM" content="36.02674, -115.08997">
<meta name="DC.title" content="Mobimeet:Art Institute of Las Vegas"> 

The first one defines my lat/long coordinates (more specifically, those of the Art Institute of Las Vegas), which associates me with other users near and around me – basically maps out social-to-web providers.  The second one is an unratified format that provides for better compatibility across meta tagging systems.

Gravatars are also not new but grew up pretty quickly, and word on the street today is that Gravatar just got bought (oh, sorry, acquired) by Automattic, the company headed by Matt Mullenweg that owns WordPress.  Gravatar stands for globally recognized avatar and conceptually its pretty simply but the implementation is much more defined.  You can create your own gravatar(s) and upload them on the main gravatar web site.  So long as you continue to use a primary email address in your blog (or other social network) registrations, the back-end system will automatically insert your gravatar in place of your avatar – basically it keeps you from having to upload a new one each time you register in a new site and keeps your identity consistent.  I’ve posted a comment under this article so you could see an example.

Goes to show you, some of the simplest ideas – as both microformats and gravatars are – can sometimes be the most powerful despite the impetus or platform.

For all my students, read this – this is a great article full of information to keep in mind as we move through the quarter.

Pay particular attention to:

• 2-Second Rule
• 3-Click Rule
• Inverted Pyramid
• Satisficing (Krug is big on this one)
• User-Centered Design (please read this definition – excellent point about one of the major differences between regular web design and Web 2.0 in that with Web 2.0 content – it is user-need driven)

And be sure to follow the links and resources - good stuff.  If you haven’t noticed the recent flurry of UX related postings in both blogs and magazine articles, you must not be reading enough.  In 2007 and going into 2008, UX is quickly becoming one of the most important aspects of web design since it was so long disregarded.  It’s not enough to make a cool design – your users have to be able to use AND learn from AND remember it to make it a good design.

However, Flash does have some drawbacks (which I won’t bother to enumerate here).  Enter Microsoft Silverlight.  For those of you who haven’t caught the buzz, Silverlight was officially released by Microsoft last month though it’s been under beta development and deployment for most of the year.  At iStreamPlanet, we’ve jumped on it quickly – largely because of its ability to integrate directly into .NET based applications, its support for Windows Media streaming, and because of the flexibility in creating full-fledged applications without requiring re-compilation.

In many ways, Silverlight is very similar to Flash.  One of the primary reasons we’ve elected to use it over Flash (as I mentioned) is the ability to create applications quickly without recompiling it and without (pricey) authoring tools – Silverlight “applications” can be written in Notepad or any other text-editor.  In the past where we’ve used embedded Windows Media Player, we are now deploying Silverlight media players because we can construct modular, branded interfaces, but still using the same CDN repositories for the media.  A recent example is the deployment of a player for the Phoenix Suns fan community Planet Orange (site was authored by one of your AILV classmates).  While Silverlight does require a download and installation, it does work cross-platform (Windows and Mac) and across major browsers (MSIE, Forefox, Safari).

It’s simplicity comes from the fact that the interface is written in plain text using an XML-based file system called XAML.  A XAML document looks pretty much like any XML with a definitive set of tags and attributes.  The XAML can also control the animations in the same manner that tweening or ActionScript would in Flash.  Events and methods can be scripted in Javascript, which makes debugging and modification very simple and very flexible.

Example of XAML Canvas:

Example of HTML Document (fragment):

Example of Javascript handlers:

Several early adopters have written applications.  I urge you to visit the official Silverlight web site (www.silverlight.net) and check out some of them.

[by Stephan Spencer for CNet]

Links are the fundamental vehicle that gets us from here to there on the web. Without them, we’d have no where to go, or at least a much harder time getting there. Links are, of course, deeply important to search engines as well. In fact, links and PageRank are at the very core of Google.

Spend a little time on just about any website and it won’t be long before you come across a “click here,” “click this,” or “more” link. You probably wouldn’t trade a $20 bill for $5, yet that is exactly what is happening when you use completely generic, non-descriptive anchor text with your links.

Search engines place even greater weight on links as another signal of what the destination page and site is about. While this is one of the basics of SEO, there seems to be no shortage of suboptimal links in the world. Links, whether internal or external, are too valuable to waste.

[read more]

[Can you tell that today was my reading day?]

From an article in smashingmagazine.com, this post was so appropriate and pertinent that I am posting the entire article verbatim here. Here’s the original article just in case…10 Usability Nightmares You Should Be Aware Of.

• a clear, self-explanatory navigation,
• precise text-presentation,
• search functionality and
• visible and thought-out site structure.

And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don’t drive them away, right?

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.

1. Hidden log-in link.
Backpack, 37signal’s one of the most usable organizational and project management tools out there, explains exactly what the tool can be used for, how one can use it and which features it has to offer. However, once you’ve signed up, you might need few minutes to find out what you should do to actually start using the tool.

The “Log in”-link (hint: in the yellow box) should have a greater font-size — also icons would do the job.

2. Pop-ups for content presentation.
Almost every modern web browser uses a popup-blocker to prevent pop-ups, ad blocks and further site content recognized as advertisement. Firefox, Safari, Opera and Internet Explorer make use of it — therefore the idea to use pop-ups to present the main content isn’t probably the most reasonable idea web-designer might come up with.

However, Adidas developers team seem to consider pop-ups as a creative approach for their target audience. It’s not clear what ImpossibleStory.com is actually about — most users will never find out; even we were too lazy to deactivate our popup-blocker.

3. Dragging instead of vertical navigation.
Actually, this technique — not a real nightmare, but very unusual — might become a new trend in the future. Dragging, as used from .pdf-documents, can also be adapted to web-sites. Fichey offers a Flash-based solution. Interesting approach, however you can’t bookmark specific parts of the site – a typical problem for Flash-based designs.

An introductory info box on the start page of the site informs its visitors about the new way of navigation. The tool shows sites which are currently popular in social media. By the way, the displayed links don’t work – apparently, the tool shows the screenshots which are saved and embedded as images.

4. Invisible links.
Visitors have to know where they are, where they’ve been and where they can go next. If designers don’t present this information in an appropriate way, visitors can have serious problems with site navigation. Real Player had been using a bunch of invisible links for a while. Take a look at the picture and the labels below (originally created by Trenton Moss) — can you spot the links?

1, 3, 4, 6, 7 and 11 are links, and 2, 5, 8, 9 and 10 aren’t.

5. Visual noise.
Often less is more. Visual noise is probably one of the most typical problems large web-sites’ designers have to cope with. And it’s extremely easy to get it wrong. As Overstock does.

Bonus: It’s also not quite clear what is a link and what’s not. Overstock also uses a number of different link presentations and hover effects. Link or not a link? You might have a lot of fun finding out.

6. Dead end.
You can use different approaches to introduce your new web-service to your visitors. Scriblink welcomes its visitors with a pop-up and a Java-applet. Visitors have to provide some input to start browsing through the site.

Nothing helps:

• clicking on “cancel” doesn’t help,
• OK doesn’t help,
• full-screen mode doesn’t help,
• clicking somewhere else doesn’t help,
• closing the browser window doesn’t work,
• clicking on the question mark for help doesn’t work.

Unfair, really. We just wanted to see what the tool does…

7. Content blocks layering upon each other.
A typical problem which always appears if large Flash-movies are used on large web-sites. The site navigation is hidden; whatever users might be willing to browse to — they have no chance.

The same problem on Yahoo.com:

8. Dynamic navigation.
What looks like a usable site navigation, shows itself soon enough from its worst side. Nevermind where you point your mouse pointer to — supporting images slide down and up and change the focus of the link you’ve clicked on. On the image below the link “history” was clicked – it moves away; and no, the sliding images aren’t linked to the page you’d like to browse to.

The effect appears in both left- and right-side navigation menus. Visitors might need some time to find out what is happening. However, once the idea is understood, the navigation isn’t that hard to deal with.

The same idea on Kabe243. Bonus: visual noise at its best.

9. Drop-Down Menus.
Drop-Down menus are useful for web-developers and almost always get on users’ nerves. If you — as a designer — hide navigation items in a drop-down menu you can save yourself a large amount of vertical space; however users have to focus the mouse precisely to get to the section they’d like to visit. It’s not usable.

However, it can be even worse. If the distance between different levels of navigation is too large (for instance because some navigation items have more text) users have to move the mouse horizontally. If the mouse focus changes its vertical position, users have to start from the beginning.

2Advanced and Brita.net are excellent examples for these usability nightmares.

Notice: it took us a dozen of attempts to actually make these screenshots.

10. Blinking images.
Sometimes you just want to read the content of a web-site you are visiting. And you can’t. To fight against the banner blindness advertisers make use of animated ads — usually animated .gif-images or Flash-movies. In both cases it might become extremely hard to focus on reading if such images are blinking all around the content.

Digital Web Magazine, an excellent online magazine we read on a regular basis, has a disturbing animated ad on the left side of every article.

Future Nightmare? Pointing the mouse instead of clicking.
Dontclick.it explores a clickfree environment. It wants to explore how and what changes for the user and the interface once you can’t rely on the habit of clicking.

Within this interface you won’t find any buttons. Instead you navigate the contents in a different way — by pointing the mouse to the areas of the site you are interested in.

8 Usability Check-Points You Should Be Aware Of

1. You don’t use pop-ups.
   Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
2. You don’t change users’ window size.
   The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions.
3. You don’t use too small font sizes.
   Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
4. You don’t have unclear link text.
   Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
5. You don’t have dead links.
   There are too many of them anyway; why would you want to point your visitors to a dead end?
6. You have at most one animation per page.
   If blinking images are wide-spread through the site, it’s extremely hard to focus on one single site element. Give your visitors an opportunity to perceive your content. Using animated ads, don’t place them right along your articles.
7. You make it easy to contact you.
   Maybe because you just don’t want to be contacted, but If visitors do want to get in touch with you, but can’t find any contact information, you lose their interest and trust. Disastrous for online-shopping, a missed opportunity for the rest.
8. Your links open in the same window.
   Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

Install multiple versions of IE on your PC

http://www.engr.ncsu.edu/learningstyles/ilsweb.html
http://www4.ncsu.edu/unity/lockers/users/f/felder/public/ILSdir/styles.htm

ADDIE Approach
The ADDIE model is a generic and simplified instructional systems design (ISD) model. ADDIE is short for Analyze, Design, Develop, Implement, and Evaluate.

http://ed.isu.edu/addie/

Most webmasters go totally “gaga” for top 10 rankings in Google. And for good reason, Google is the most dominant search engine on the net and will deliver the largest amount of traffíc.

More importantly, those same webmasters will also inform you, getting top 10 rankings in Google often means your site will prove profitable. Mainly because obtaining targeted traffíc is usually your first obstacle in creating a viable online business. In other words, if you get top ten listings in Google for good searchable keywords, it is almost impossible not to earn money.

How To Proceed?

First, you must know the rudimentary basics of how keywords work. Keywords and keyword phrases are the exact words someone types into a search engine to find what they’re looking for online. If you have a site on “dog training” then your goal is to get a top 10 ranking for the keywords “dog training”.

Now if no one searches for “dog training” it would be a useless keyword, you would get no traffíc no matter how perfectly your site is optimized for that keyword.

How Do You Know If A Keyword Is Good?

To find out, you have to do some keyword research on your particular keywords. Many professional online marketers use keyword research software like Brad Callen’s Keyword Elite. However, you can also use the keyword suggestion tools supplied by Google Adwords or Overture. Try here: http://www.digitalpoint.com/tools/suggestion/

Now if you chëck “dog training”, you will find it receives around 4,469 searches each day. That’s a lot of traffíc but you must realize that it may be too good, or rather too competitive for your purposes, especially if you have a new site.

Biggest Mistake When Choosing Keywords

The most common mistake most novice webmasters make is targeting keywords which are too competitive. You simply will not be able to compete or place for extremely competitive keywords. Well established sites and businesses with very deep pockets have the resources to completely dominate those keywords.

While it is not entirely futile nor a waste of time to concentrate your efforts on highly competitive keywords, you will have better success if you target low to medium competitive keywords.

Long Tail Keyword Marketing

Besides online marketers have discovered that longer keyword phrases are usually the most lucrative. These phrases deliver traffíc which is better targeted and more likely to convert into a sale. “Dog hunting training” which gets around 100 searches a day will be more targeted than the general term “dog training” and if you have a site devoted to training hunting dogs then this keyword phrase may convert better for you.

Always keep this “Long Tail” keyword strategy in the back of your mind as you implement the following steps to achieve your own Top 10 Rankings in Google.

1. Make A Master Keyword Líst
Your first step is to make a master líst of the keywords you wish to target. Obviously these should be closely related to the theme of your site. Chëck the keyword competition by seeing how many sites are listed in Google for that keyword. Webmasters should also chëck the Google PageRank of the sites that hold the top 10 positions. If all those sites are PR6 and above it may be hard to get ranked high for your keywords.

2. Choose Related Keywords
Once you have your master líst of keywords, find long tail related keywords to target. Again, chëck out the competition and daily searches made for each chosen keyword.

3. Use Quality Content For Your Keywords
Creating quality content should always be your main goal. Write for actual visitors who will see and read your content. First and foremost you must have good useful content that your visitors will use themselves and recommend to their friends or colleagues. Tie this quality content in with your chosen keywords. Use one keyword phrase per page.

4. Keyword In Domain Name, Title and URLs
Having your keyword in your domain name will score big points from search engines. Plus, each page of content should contain your keywords in the title & meta tags for that page. Most experts also suggest you have your keyword in the URL and use hyphens to separate your keywords. Although the author has gotten good results by using an underscore and htm in URLs.
Example: www.yoursite.com/your_keyword.htm

5. Do On Page Optimization
Keyword ratio is a much discussed topic by SEO experts and many suggest you should have your keyword in the H1 or headline title of your page. Sprinkle your keyword and variations of it throughout your page. Don’t over do it but make sure the robot/spiders will clearly discover what your page is about. Many webmasters make sure they include their main keyword in the first and last 25 words on their pages.

6. Use Traffíc Modules
One technique that works extremely well in Google is clustering a closely related topic or subject into a distinct separate section on your site. For example, if you have a marketing site, you could create a whole section on article marketing where you would have 50 to 100 keyworded pages all relating to your subject. Writing articles, formatting articles, submitting articles, article software… place a keyword linked menu on each page to connect all your pages together.

Keep in mind, your main objective is to supply quality information to your visitors. One reason Google may favor this type of structure is because they want quality content returned in their SERPs.

7. Try Article Marketing
Side Note: iStreamPlanet uses this tactic widely – the last article I posted (my shameless promotion) was a reprint of a press release that was released July 10th (2007). As of July 13th, the search term “istreamplanet silverlight” in Google yields 173 returns which pushed several pages past the PR6 mark into the elusive PR7 realm.Article marketing is writing short informative articles on keyword topics related to your sites. You then submit these helpful keyworded articles to ezine directories on the web. When your articles are picked up by related sites, you receive quality One-Way links. The higher the quality of your article, the more links you will receive.

Another ranking tactic to use: If you’re just starting out your site will probably have a low PR rank and you will find it hard to rank for even modest keywords. That’s why it’s useful to take advantage of the higher PageRank of the major ezine directories. Your keyworded articles on these high PR sites will get picked up by Google and displayed in the top 10 rankings. Now the displayed URL will be the article directory site but the links in the resource box will be pointing back to your site. Over time this article marketing technique will raise your own site’s rankings for those keywords. Simple but effective.

8. Anchor Text And One Way Links
Off page optimization is important in obtaining high rankings in Google. Getting quality One-Way links is very important. Anchor Text simply refers to “the underlined clicked on words” in your links. Most webmasters include their keywords in their anchor text as this tells the search engines exactly what the links are about.

9. Tags, Blogging And Web 2.0
Take advantage of Web 2.0 by using blogs, RSS feeds and the social bookmarking sites like Reddit and Digg. Try AddThis.com for a simple social bookmarking system. At the very least your site should have a blog and RSS feed attached to it as this is an effective way of boosting your keyword rankings.

Tags have become very important for getting higher rankings. Keep in mind, in free blogging software such as WordPress, categories will automatically be seen as tags. Blogger, which is owned by Google, now has a form where you put your keywords (tags) for each post you make.

10. PPC vs Organic Search
Of course, one of the fastest ways to get your links displayed on Google is to pay for them by using Google Adwords. Your ad and links will sit side by side with the organic link results. In Pay Per Clíck advertising you bid or pay so much per clíck for your keywords and you only pay when someone clicks your links. But smart marketers also know since you’re getting millíons of impressions advertising your products, acquiring name recognition and branding through PPC advertising can be a major side-benefit.

However, most webmasters would say that organic links (SERPS) will return better traffíc than paid links or advertising. In most cases, this may be true because Google’s organic rankings are becoming more respected and more trusted by users. They simply carry more weíght with surfers.

This makes it even more beneficial to obtain top 10 rankings for your keywords in Google. Depending on the competitiveness of your chosen keywords reaching the first page listing or even the favored number one spot is well within any webmaster’s reach. Just go for it. The rewards are well worth your efforts.

About The Author
The author is a full-time online marketer who contributes his high rankings in Google as the major source of his online income. For the latest web marketing tools try: MarketingToolGuide.com. For the latest Internet Marketing Strategies go to: BizwareMagic.com . Titus Hoskins. [This article may be freely distributed if this resource box stays attached.]

A lot of website owners are upset or puzzled when their website’s Google PageRank goes down or does not rise. Is it worth losing any sleep over changes in that green line and number that appear in a Google tool bar at the top of your browser? I think that excessive worry or thought about PageRank is not constructive, and it is better to put it all in perspective by taking a rational look at what PageRank is and what it is not.

First of all the concept behind PageRank is indeed at the heart of Google’s ranking process. The Google founders came from academia and they noticed that in many academic documents some sources were continually cited. They reasoned that if a particular document such as a book or research paper was mentioned in many places then it must be important. They applied this to the web and assumed that if one website links to another it is in fact, giving a “vote” for that site. A website that has many incoming links must have a certain degree of importance. In the current Google algorithm the quantity and quality of incoming links is certainly a factor in deciding the ranking of a particular website for any given search-query.

Think about it. In the early days of the web people would build websites and then they would tell their visitors to check out other “cool” sites and they would link to these sites. This is the process of natural linking and it still goes on. If you really have good content, people will link to you without letting you know. Similarly, if your name is Bob Dylan and your website is www.bobdylan.com, thousands of people will link to you without you having to send a cheesy email begging for a link.

Various government agencies, educational institutions, established companies and anyone else who is “big” in the “real world” is likely to also be big on the Internet simply by virtue of their previous fame and accomplishment. Google’s ranking system took this into consideration and this is one of the reasons why Google is currently the number one search engine. It gives better results and that is why people use it.

But, does that mean that only the big players can be seen on the net? Far from it. While there is a difference between one guy working in his house with one computer and a corporate giant with a whole staff, and this is indeed reflected in rankings, the Internet provides a much leveler playing field than in yesteryear. Prior to 1995, it would have been very hard for someone to spread their news and views far and wide as bloggers do today. It costs millions of dollars to publish a daily newspaper or to print and circulate a magazine, but it costs far less to publish a website or a blog, and lots of “little guys” have taken advantage of the power of the Internet.

But what about PageRank, how much of it do I really need to get my site noticed? For those who are not familiar with the PageRank system. Google supplies a tool bar which you can download and install on your browser. If you make a complete installation with all the advanced features, then every time you open a new website you will see a green and white bar with the label PageRank. Put your mouse on the bar and you will see a number from 0 to 10. If a website is not indexed by Google or banned by Google, the bar may be grey or all white.

But what do the numbers mean? I had a client who was worried about his number 3 PageRank figure and based on my observation I answered him with my unofficial view on the rankings. Here is how I currently see it:

PageRank 0-2 shows that a site does not have many links and needs work, However, and this a big “however,” it may not really affect your search engine rankings. I have a client with a page rank of 2 and his site ranks well, even number one, for several search terms in a fairly competitive industrial category. So PageRank is not everything; it may have an impact on your rankings and traffic, but in some cases it may not matter. In any case if you have a PageRank of 0-2, you can work on it through proper link building activity which I will explain at the end of the article.

PageRank 3 can be OK in some cases but in highly competitive industries you should work to improve it.

PageRank 4 is quite a normal number and indicates that you have enough links in either quantity or quality to make your site competitive.

PageRank 5 indicates that a site has many links or links from authoritative sites, and that Google has good “trust” in the site. It is a respectable and attainable PageRank.

PageRank 6 is very difficult to attain. This rank indicates that the site has many links and links from respected places. Remember the example of www.bobdylan.com, which I mentioned above; it has a PageRank 6, so you can get an idea of the difficulty involved.

PageRank 7-10 is usually earned by large and established institutions or websites which have tremendous authority, due to the quantity and quality of the incoming links. It is extremely difficult to attain this ranking. You really have to be special to get it.

So, don’t worry excessively about PageRank. First look at your traffic, then look at your sales and finally at your bottom line. They are the important numbers to watch. If you want to increase your traffic and also PageRank, then here are a few steps that you can take:

1. Add content to your website. Make your website so good and so useful that people will link to you without you asking for a link.
2. Write articles and get them published on other websites and blogs with a link back to your site.
3. Distribute online press releases
4. Judiciously exchange links, or even better, exchange content (containing links back to your site) with other websites.
5. Get your site listed in online directories.

These efforts will certainly help you to build targeted traffic, and they most probably will also help you to increase your PageRank as well.

Here’s the scenario that we faced.  iStreamPlanet produces a software application that is run during live poker tournaments which places an overlay on top of the encoded video similar to poker tournaments you might see on TV.  The actual system uses an interface built in C++ that writes an XML file as it is updated, which in turn is read by a Flash component layer and then drawn into the video card (the result is something that looks like the image below).

For those of you who have been through any of the scripting classes, by now you should recognize that this needs a multi-dimensional array to work best.  Don’t be scared off by multi-dimensional arrays – think of them as just Excel spreadsheets.  So if you have a spreadsheet that looks something like this:

Then the your array would have been written as:

Download the materials here: Multi-Dimensional Array Sorting from XML Data in ActionScript (ZIP)

In the course of adding components to the application, we needed to output the current chip counts of each player and present them in order of most to least chips.  Of course, our XML ordering was based on the C# output which was not sorted and also contained string data where we needed to sort numerically.

First, we read the XML.  To do this you’ll need to open a socket:

Next, we created a function that broke up the data and put it into the array.

At this point we need to consider how to sort the data.  Remember that our original spec required that the output be sorted in descending chip count order.  But notice that the XML data that has symbols in it.  If you know a bit about programming, you’ll know that sorting is done based on the operating system preference.  In this case using a normal sort() function, Player 7 (Roosevelt) with $15,616 chips would be first…

While ActionScript does have conversion capabilities, the problem in this scenario is that the symbols will not allow conversion to a numeric.  So let’s create a function that will “convert” the formatted field into a number.

Using the conversion function (and note, you can use this function – albeit very simplistic – to do pretty much any type of string replacement), now we can finish off the original function.

Now test the movie (Ctrl+Enter) and check out the chip counts.

Incidentally, if you’re a poker buff, check out how this actually looks on screen by watching the World Series of Poker at http://www.worldseriesofpoker.com/

Is Google Killing SEO?
The empasis of paid search listings is killing the organic search algorithm because of the “link reward” system used by Google’s relevancy system.

As Social Networking Rises, TV Watching Decreases
Uh…duh. Why watch unidirectional broadcasting when it can be interactive?  It didn’t take a genius to figure out that this was bound to happen.

How Google, Yahoo & Ask.com Treat the No Follow Link Attribute
“There seems to be a common misconception in the webmaster and search engine marketing field that inbound links which use the ‘no follow’ attribute have no value to the site which they point towards.”

Use Robots.txt, Save the World
I’ve been asked time and time again about the use of the robots.txt file – what does it mean, what does it do, how do I use it.  Read this article for good, layman term information.