Photo courtesy of Andrew Chen via 52 Weeks of UX

Do you ever feel that your design has become stale and that despite your making lots of little changes to it over time without any big overhaul there is just no way to drastically improve it?

If so you’ve probably hit what Andrew Chen calls the “Local Maximum”. The local maximum is a point in which you’ve hit the limit of the current design…it is as effective as its ever going to be in its current incarnation. Even if you make 100 tweaks you can only get so much improvement; it is as effective as its ever going to be on its current structural foundation.

The local maximum occurs frequently when UX practitioners rely too much on a/b testing or other testing approaches to make improvements. This type of design is typified by Google and Amazon…they do lots and lots of testing, but rarely make large changes. (Except, of course, Google’s homepage background change this week, which was quickly reverted)

While a cycle of smaller improvements is better than the dysfunctional design processes most of us are stuck with, one of the criticisms of this type of extreme optimization is that it’s always and only incremental: you can only make a few small changes at a time and therefore your design evolves slowly. And if you’re doing rigorous testing, by only changing one variable at a time, then you’re only changing one small part of your application in each iteration. This work cycle becomes dependent on how fast you can run tests. For Google and Amazon, who are blessed with millions of visitors per day, this is no problem because they can run tests extremely quickly. For most people building web sites, low traffic volume can be a huge hurdle because it means that tests have to run longer and thus slows down rate of iteration.

To illustrate the notion of local maxima Chen uses the example of a photo upload application, pointing out there are many ways to improve an offering by optimizing what currently exists. You can A/B test the current photo upload page, send out more emails reminding people to upload, add more calls-to-action to upload, etc. It’s easy to both design and test these options.

But after a while these low-hanging fruit get few and far between and as UX designer you have two choices: continue to try ever-increasing alternatives (optimize) that are small enough to test or to try and make a bigger, structural change that really shakes things up (innovate).

Chen points out that other approaches to improving a photo app besides optimization would probably have a higher return. These include:

* Repositioning the product for a stronger value proposition
* Going after a different kind of audience to target their needs
* Recalibrating the “core mechanic” of the product to make uploading photos a natural part of using the product

Because these changes are much larger than a single design element you can effectively test, making a change to them requires making a daring design decision. Someone has to step up and take a chance based on their intuition: what they think will work instead of what testing has proven works.

In order to design through the local maximum we need a balance between the science-minded testing methodology and the intuitive sense designers use when making big changes. We need to intelligently alternate between innovation and optimization, as both are required to design great user experiences.

One strategy we might employ is to optimize until we reach a point of diminishing returns: design until changes just aren’t having a big effect. Then, stop optimizing and return to other kinds of analysis to figure out the next steps. Conduct interviews. Do user testing. Give surveys, ask questions. Find out the biggest existing pain points instead of focusing on tiny design elements at this stage. Focus at the activity-level. What are people trying to accomplish? What are their higher-level goals? What aren’t people doing that we want them to? What big hurdles keep them from taking the next action? This level of insight will allow you to make those bigger changes.

And when the time comes to make the bigger changes, when you decide to jump from your local maximum to some other design possibility, make the decision with conviction. But don’t forget that the optimization has only just begun.

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.

I have always told my students that the best way to get backup help is to go to the bookstore, site down, and read 10 pages out of each book on the topic, and find the one that “speaks” to them. A teacher’s recommended text, the school’s required textbook, it’s rare that student find them legible or helpful (I think my logic teacher went out of her way to find the most confusing book on Earth). Find the book that they understand and start working. Work every day. Work at least 15 minutes or 30 minutes every single day, doing the exercises over and over, changing little things, until the whole concept is solved.

But not every great book can be found at the store. Of course there are the online standard – w3schools.com for example – and the plethora of smaller resources. But it is always a treat to find an online resource that has both extensive resources and is also an easy, if not opinionated, read.

Such is “Eloquent Javascript,” authored by Marijin Haverbeke. I remember coming across it a few years ago but a posting on DownloadSquad reminded me of it. It is available in its entire text online (in HTML) as well as via downloadable PDF. As with most good resources, I recommend grabbing the PDF (and if you’re ambitious, a local copy of the HTML) before the perishability of Web documents steals it away.

[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!

If Oracle buys MySQL as part of Sun, database customers will pay the bill.

In April 2009, Oracle announced that it had agreed to acquire Sun. Since Sun had acquired MySQL the previous year, this would mean that Oracle, the market leader for closed source databases, would get to own MySQL, the most popular open source database.

If Oracle acquired MySQL on that basis, it would have as much control over MySQL as money can possibly buy over an open source project. In fact, for most open source projects (such as Linux or Apache) there isn’t any comparable way for a competitor to buy even one tenth as much influence. But MySQL’s success has always depended on the company behind it that develops, sells and promotes it. That company (initially MySQL AB, then Sun) has always owned the important intellectual property rights (IPRs), most notably the trademark, copyright and (so far only for defensive purposes) patents. It has used the IPRs to produce income and has reinvested a large part of those revenues in development, getting not only bigger but also better with time.

If those IPRs fall into the hands of MySQL’s primary competitor, then MySQL immediately ceases to be an alternative to Oracle’s own high-priced products. So far, customers had the choice to use MySQL in new projects instead of Oracle’s products. Some large companies even migrated (switched) from Oracle to MySQL for existing software solutions. And every one could credibly threaten Oracle’s salespeople with using MySQL unless a major discount was granted. If Oracle owns MySQL, it will only laugh when customers try this. Getting rid of this problem is easily worth one billion dollars a year to Oracle, if not more.

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

For my students and UNLV colleagues: if you had never heard of the DreamSpark program, you should jump on it.  A program launched in 2008 by MSFT (don’t groan) can get you free software.  Yes, free.  Yes, I’ve gotten some of it.  In a blatant (and conducive) attempt to move budding developers and IT staffers to the Redmond dark side, they’re offering Visual Studio (2005 & 2008), Windows Server 2008, Expression Studio and more for free.  So while the university’s alliance program is broken and paltry, you could have just headed straight to the source and gotten legit, keyed copies.

Now the new stuff: just released by MSFT – WebsiteSpark.  Like it’s older brother, the new program is aimed at small companies – no more than 10 employees – and offers:

• 3 Visual Studio licenses
• 1 Expression Studio 2 or 3 license
• 2 Expression Web licenses
• 3 users license for WinServer 2008 and SQLServer 2008
• 4 processor license for self-hosting WinServer 2008 and SQLServer 2008

That’s a buttload of very expensive stuff for nothing.  The caveat is that you must launch a new web app (that’s app boys and girls, not a paltry PHP site) and if you hit it big, you have to exit the program and pay a $100 fee.  That’s peanuts compared to the value.  Or you could go to a bunch of MSFT seminars and collect copies but that takes a lot of time and snoozing through 4 hours of demos.

* Seamless curved screen, which eliminates bezel and screen gap issues for increased productivity and decreased frustration (according to Center for Human-Computer Interaction – Shupp et al, presented at Graphics Interface 2006)
* 2880 x 900 double WXGA native resolution
* 200 cd/m² brightness
* 0.02ms Rapid Response
* 10,000:1 contrast ratio
* Wide color gamut with 100% coverage of sRGB and 99.3% coverage of Adobe RGB
* Single link DVI-D and HDMI 1.3 input connectors
* USB 2.0 connectivity for easy use of peripherals
* Front panel controls
* On Screen Display (OSD®) and software-based GUI, which enables advanced display control options

Probably one of the best stated defenses I’ve read for UX comes courtesy of this post in Smashing Magazine.  In talking about the brand loyalty of Apple users…

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

How true. This week I’ve been tossed back and forth between clients and bosses struggling with all the wants and demands and needs and the bottom line came down to making sure everyone realized that it has nothing to do with personal preference and like and dislikes, it’s about experience, and more than that it has to be tangible, palpable and reach the emotion of a human in a way that makes it memorable, or at the very least engaging.

“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.

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.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container – with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

<div id=”container”> <div style=”display: block; top: 236px; opacity: 1;” class=”dialog”> <div class=”body”> <div class=”content”> … </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

Read the complete article here.

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)

Do androids dream of electric sheep? Possibly, but here’s something a bit more relevant: New research suggests that if you grew up watching a black and white television set, you probably dream in black and white.

The normal state of my students during class…do they dream in color or black & white?

The evidence comes from Dundee, Scotland, where it is now being estimated that while almost all those under 25 years old dream in color, thousands of those over-55 dream in monochrome, still to this day. “It suggests there could be a critical period in our childhood when watching films has a big impact on the way dreams are formed,” says Eva Murzyn, a psychology student at the University of Dundee who carried out the study. “What is even more interesting is that before the advent of black and white television, all the evidence suggests we were dreaming in color.”

Research studies from 1915 through the 1950s suggested that the vast majority of dreams were in black and white; Things changed in the sixties, and later results suggested that up to 83-percent of dreams contain some color.

Murzyn surveyed more 60 people (half of which were over 55 and half were under 25), and combined what she found with the older data to form her conclusions.

“The crucial time is between three and 10 when we all begin to have the ability to dream,” she said. “Television and films which by their very nature are interesting and emotionally engaging and even dreamlike. So when you dream you may copy what you have seen on the screen. I have even had a computer game player who dreams as if he is in front of a computer screen.” All of which explains a hell of a lot.

So next time the G/F tells you to turn the tube off, tell her you’re just making sure you don’t dream in monochrome.

[article from switched.com through The Telegraph]

For the most part, portals have kind of gone the way of the wind.  The only big competitors in the space (even MSN seems to be being overtaken by Live) are barely hanging on with the proliferation of all sorts of social networks from wikis to microblogs to blogs and mapping systems and mashups and blah blah blah.  But lets face it – the fact is that portals do something that few other sites can do, and as a testament to Yahoo’s continued efforts to delivering it – it continues to thrive. 

And one nice thing for Yahoo is that its customers are loyal.  I am not one to use portal sites.  I like most quasi-techs use Google to search, Live services for some communications, and a host of RSS aggregations for news, microblogs for fun, wikis for info and so on.  But I still use Yahoo for all my domain registration because their control panel is just about the easiest to use, and frankly because I have a weird sense of trust in Yahoo, probably not the least of reasons being that it’s survived for so damn long and strived to improve its services offerings over and over.

You’ve got to admit – look at the task at hand – what an enormous pain in the ass.  Back in 1998 I did some freelance consulting for Yupi, a Spanish-language portal eventually acquired by MSN.  Even in its infancy, the architecture was enormous and trying to wrap ones head around the breadth of information was unbelievably tough.  Of course back then we hadn’t begun to scratch the surface into the power of tagging (meta tags were still king), but even then, I doubt it would have made the job easier.

I have to admit that I’ve always felt that Yahoo does a pretty darn good job of piecing together their homepage.  I can’t quite always say the same for some of the divisions, but definitely the homepage does great for driving the ship.  Check it out,

[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:

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome.

I’m not going to bother repeating the article here – please take the time to jump over to SM and read it.  However, here’s a quick synopsis:

1. Consider the product’s goal
Determine that one primary goal of the site and make sure that everything you do revolves around that fundamental concept.  Every addition you make, every tool you provide, every piece of text you write should be dedicated to that goal.

2. Consider who will be using it
As JJG proposes, identifying the target audience can be a critical factor simply because most designers either fail to take it into consideration or misjudge it.  Audiences vary and so do their wants, needs, and abilities.  Cater to that need: a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it
What your audience does may not be what you do.  YOU are not the audience, your users are.  Every user comes with intention, learn what those intentions might be.

4. Is it clear how to use it?
We designer/developers have a tendency to go beserk with our functionality.  Don’t.  "Clarity is the key to functional design".

5. How does your user know it’s working?
Provide feedback…it’s the only way your user knows that he or she is using it right.  Provide visual cues, highlight the necessary parts.

6. Is it engaging to your users?
One of JJGs two tenets and the one that I believe is fundamental to all things Web – is it engaging.  I harp on it nearly every quarter but I don’t think many people really see it.  Example: four times this week alone I’ve seen references to Blackberry’s as engaging – owners cannot seem to put them down or stop fiddling with them.  Whether its the feel, the interface, the haptics or the information it provides, there is definitively something engaging about them.

7. How does it handle mistakes?
JJG makes a big point of discussing error handling.  We as dev-igners pretty much think we never make mistakes.  Just because you can run through your web site and never encounter an error doesn’t mean your user won’t.  Users make mistakes.  Or more succinctly, your user will not do the same things you do.  How does the site correct, adjust or respond to errors?

Forum Post: design or develop first?

Q: "just wondering if I should go about designing my site first before implementing any back end capabilities. i like to keep things organized and plan ahead. It would seem to make sense to create the static site first but i am somewhat unsure if I were to design first and end up redesigning to fit everything I plan on adding later, in terms of dynamic content."

R: "The approach you take probably depends on whether you are more of a designer or more a developer. A developer would tend to do the back end first without worrying too much about exactly how the page will look until after they know that it all functions properly. A designer would probably get the page looking exactly how they want and then worry about how to get it to function correctly. If you have separate people performing each of these tasks then all that needs to be done first is to define the interface between the two so that the two almost separate parts can be done separately in the knowledge that they will fit together once both are done."

Article: HTML or XHTML: Does It Really Matter? (excerpted, July 9, 2008 by James Edwards)

HTML was originally conceived as a semantic language, in which elements should describe only the meaning of their content, not the presentation. However, this good intention didn’t hold up very long.

In 1997, the HTML 4.0 specification was published, and although it continued to include presentational markup that had been instigated directly by vendors, it also began a push to clean up HTML, calling some markup “deprecated” and suggesting that it not be used.

XHTML 1.0 came along in 2000 as formalization of HTML 4 into XML. XML itself had been standardized in 1998 as a general specification for defining markup languages, and was a stricter and simpler offshoot of SGML, the Standard Generalized Markup Language from which HTML itself was originally derived.

XHTML is still worth using, because it’s a transitional standard that moves us towards a pure-XML Web. XML is inherently better than SGML, because it’s simpler and stricter, and much easier to parse (once you’ve understood its rules). I don’t know from where we’ve adopted the idea that we should be forgiving of markup errors, but I don’t share that view.

And some other choice reads:

• Custom Web Fonts: Pick Your Poison by Kevin Yank
• Fancy Form Design Using CSS by Cameron Adams
• 10 Tips for Being a Greener Web Designer by Matthew Magain

TIOBE Index, July 2008 by TIOBE bv

Position		Delta	Language	Ratings Jul 2008	Delta Jul 2007	Status
Jul 2008	Jul 2007
1	1		Java	21.345%	+0.33%	A
2	2		C	15.945%	-0.42%	A
3	3		C++	10.693%	+0.19%	A
4	4		(Visual) Basic	10.447%	+0.72%	A
5	5		PHP	9.525%	+0.87%	A
6	6		Perl	5.131%	-0.20%	A
7	8		Python	4.973%	+1.95%	A
8	7		C#	4.000%	+0.29%	A
9	9		JavaScript	2.757%	+0.24%	A
10	10		Ruby	2.735%	+0.64%	A

(For my students) In case you’re wondering why HTML is not included in this list, the definition used by the index is:

A language is considered a programming language if it is Turing complete. As a consequence, HTML and XML are not considered programming languages. This also holds for data query language SQL. SQL is not a programming language because it is, for instance, impossible to write an infinite loop in it. On the other hand, SQL extensions PL/SQL and Transact-SQL are programming languages. ASP and ASP.NET are also not programming languages because they make use of other languages such as JavaScript and VBScript or .NET compatible languages. The same is true for frameworks such as Ruby on Rails, ColdFusion, Cocoa, and technologies such as AJAX. Finally, we have also excluded assembly languages, although Turing complete, because they have a very different nature.

And finally, for those of you in my weekend classes…yes, it’s 2 hours after class and yes, I am still up.  Good night.

1. Design Meltdown: a site with excellent articles self-billed as “design elements, trends and problems in web design. Seriously the articles are pretty good, a lot of in-depth material. And I personally love the design of the site – reminiscent of a CHM but with more of a book feel.

2. Save the Pixel: an eBook from scratch. Still have to download it but from the looks of scratch’s other publications it should be fantastic. Authored by practicing usability pro Ben Hunt.

3. Windows Live Writer: more and more impressed with this thing. I’m installing the Silverlight Streaming, Visual Studio codepaste, Amazon affiliate link tool and geoMicroformat tools at this very moment.

4. POSH: ok, so this isn’t a “find” in the sense that the rest are but it’s something that I am going to be increasingly focusing on in class so figure it out – Plain Old Semantic HTML. As detailed on the microformats wiki “POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational.”

5. Edgepoint: an impressively clean, engaging, well put together web site. And oh yea, it’s a church web site. All beliefs aside, it is a very compelling site – check it out.

And two minor mentions for the week. One – did everyone see the new Walmart logo? What’s up with that? Two – AS3 – took my first real whack at it this week (built a packageable, transportable, skinnable, web service driven media player for both live and on-demand playback – will post it up next week) and honestly, it has promise but man, what a killer to learn. Maybe I just can’t get the old Actionscript out of my head. Oh well, we all have to grow up sooner or later, eh?

Is Twitter TOO good?

Twitter scares me. For all its popularity, I see at least three issues: 1) it’s a near-perfect example of the psychological principle of intermittent variable reward, the key addictive element of slot machines. 2) The strong “feeling of connectedness” Twitterers get can trick the brain into thinking its having a meaningful social interaction, while another (ancient) part of the brain “knows” something crucial to human survival is missing. 3) Twitter is yet another–potentially more dramatic–contribution to the problems of always-on multi-tasking… you can’t be Twittering (or emailing or chatting, of course) and simultaneously be in deep thought and/or a flow state.

[Disclaimer: I'm SO in the minority on this one... it looks like about a hundred-to-one in favor of Twitter, so I'm most likely way wrong on this one (but it doesn't stop me from trying). And this post is mostly a mashup of a variety of earlier posts I've made on related subjects.]

I’ll look at each of the three points in more detail:

1) The Twitter Slot Machine

One of Skinner’s most important discoveries is that behavior reinforced intermittently (as opposed to consistently) is the most difficult to extinguish. In other words, intermittent rewards beat predictable rewards. It’s the basis of most animal training, but applies to humans as well… which is why slot machines are so appealing, and one needn’t be addicted to feel it.

From a Time magazine feature story on multitasking:
Patricia Wallace, a techno-psychologist,…believes part of the allure of e-mail–for adults as well as teens–is similar to that of a slot machine.
”You have intermittent, variable reinforcement,” she explains. “You are not sure you are going to get a reward every time or how often you will, so you keep pulling that handle.”

 
2) The feeling of connectedness

The biggest benefit most people seem to be deriving from Twitter is the ability to feel more connected to others. Carson Systems’ Lisa put it this way in a comment to Tara Hunt’s defense of Twitter:
“Twittering fills in those gaps…recording our friends’ feelings, geographic location and actions as if we were spookily almost there. That makes us feel *really* connected…”

Is this really a good thing?

Probably, yes. For most people, perhaps. But I think it’s worth a critical look as opposed to an automatic connected-is-awlays-implicitly-good response. UCSF neurobiologist Thomas Lewis claims that if we’re not careful, we can trick a part of our brain into thinking that we’re having a real social interaction–something crucial and ancient for human survival–when we actually aren’t. This leads to a stressful (but subconscious) cognitive dissonance, where we’re getting some of what the brain thinks it needs, but not enough to fill that whatever-ineffable-thing-is-scientists-still-haven’t-completely-nailed-but-might-be-smell. He didn’t make this claim about Twitter… I attended his talk at The Conference on World Affairs, and he was addressing e-mail, chat, and even television (brain recognizes it’s looking at “people”, and feels it must be having a social connection (GOOD), but yet it knows something’s missing (BAD).

Dr. Lewis cited a ton of studies which I didn’t write down, so you can take this with a grain of salt. Plus, I’m extending his issues from e-mail and chat to Twitter. But part of the reasons he talks about are that our brain has evolved an innate ability to interpret body language, facial expression, tone of voice, etc. so the brain expects these channels of information and becomes distressed when the social interaction appears to be there, but these innate, legacy-brain pieces are missing.

Again, this doesn’t mean that it’s not worth it and highly valuable for people TO stay connected to far-flung family and friends, I’m just saying that it’s worth a look at whether that might be lulling some folks into a false sense of “I’m connected” at the expense of real-life connections.

Coffee with your next-door neighbor could do more for your brain than a thousand Twitter updates.

While this same argument has been going around forever, and is the same claim made about television, that doesn’t make it untrue. (There’s that study about the isolated Canadian village whose collective IQ went down once cable finally came to the village… Lewis cites it in his talks, although I can’t find it referenced online).

Ironically, services like Twitter are simultaneously leaving some people with a feeling of not being connected, by feeding the fear of not being in the loop. By elevating the importance of being “constantly updated,” it amplifies the feeling of missing something if you’re not checking Twitter (or Twittering) with enough frequency.

[credit: the original blog article]

3) Twitter is the best/worst cause of continuous partial attention

From an earlier post of mine:

Worst of all, this onslaught is keeping us from doing the one thing that makes most of us the happiest… being in flow. Flow requires a depth of thinking and a focus of attention that all that context-switching prevents. Flow requires a challenging use of our knowledge and skills, and that’s quite different from mindless tasks we can multitask (eating and watching tv, etc.) Flow means we need a certain amount of time to load our knowledge and skills into our brain RAM. And the more big or small interruptions we have, the less likely we are to ever get there.

And not only are we stopping ourselves from ever getting in flow, we’re stopping ourselves from ever getting really good at something. From becoming experts. The brain scientists now tell us that becoming an expert is not a matter of being a prodigy, it’s a matter of being able to focus.

We’re already seeing a backlash response to info overload, and it seems like a good chunk of Web 2.0 VC investments are going to companies that promise to help us get/stay organized. There’s a reason 43 Folders is a Top 100 blog, and it’s got to be more than just Merlin Mann’s good looks ; )

Lots of people are talking about this, and perhaps nobody more eloquently than Linda Stone:

“To pay continuous partial attention is to pay partial attention — CONTINUOUSLY. It is motivated by a desire to be a LIVE node on the network. Another way of saying this is that we want to connect and be connected. We want to effectively scan for opportunity and optimize for the best opportunities, activities, and contacts, in any given moment. To be busy, to be connected, is to be alive, to be recognized, and to matter.
We pay continuous partial attention in an effort NOT TO MISS ANYTHING. It is an always-on, anywhere, anytime, any place behavior that involves an artificial sense of constant crisis. We are always in high alert when we pay continuous partial attention. This artificial sense of constant crisis is more typical of continuous partial attention than it is of multi-tasking.”

Bottom line(s):

Do I think Twitter has benefits? Clearly, and Tara does a great job of defining them (although not everyone agrees that these things are all benefits, they are for her and that’s what matters).

Do I think people can use Twitter responsibly, without letting it get out of control or become too much of a distraction or encourage the same kind of voyeurism that makes tabloid news and TV so pervasively popular in the US?
Yes, definitely.

All I’m saying is that beyond the hype, we should consider just how far down the rabbit hole of always-on-attention we really want to go.

I am not in the target audience for Twitter–I am by nature a loner. I don’t want to be that connected. And I also have a huge appreciation for the art of keeping the mystery alive. I don’t want to know that much about so many people, and I sure don’t want people to know that much about me… mundane or otherwise. So, that puts me in the minority, and my Twitter fears are probably based solely on my own–quirky and less common–personality traits.

[via Passionate]

“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.

Anyway, so first off … by now I’m sure you’ve all tried it but just in case you haven’t, Firefox 3, well, rocks. Fast, efficient, excellent rendering, blah blah blah. Other than a few of the accoutrements (meaning the host of oddball plugins and addons) not working any more, and the little issue of a minor security hole, I have nothing bad to say about it (well, that and the annoying auto-complete address bar).

Second, pretty much everyone knows I am neck-deep in Silverlight development.  Microsoft recently released Silverlight 2 Beta 2 which did increase the footprint (from 4.2M to 4.6M) and a very annoying installation process (MS – what happened – the install in place was great compared to Flash – why’d you lose it?!?!?) but also added a host of great tools.  For those of you who say Silverlight cannot compare to Flash, I severely beg to differ.  By this time next year, things may look totally different on the RIA landscape.  Anyway, check out the Olympics video site for some pretty cool stuff (be sure to see the Enhanced Player and picture-in-picture and realize that Silverlight can do this with live video – show me that in Flash).

This cracks me up.  And here’s the blog post I found it on.  But seriously, great f—ing idea.  I need one.  Now if I can only find a headline that suits me.

Fourth – interesting question posed on CNET’s Matter/Antimatter blog – Facebook Platinum membership.  How much would you pay? Weigh in please.

Fifth – an interesting post from blog designer Rachel of cre8d design entitled “Questions around organizing my life online vs. information overload” begs me to consider where I stand in my own life.  I mean, I run research & development for a software company, I teach programming and user-centered design, I will be going to grad school for Informatics in the fall, I help my significant other run her online business and blog, and as evidenced by this post I am sitting online on a Saturday night instead of socializing with other people.  Yet I encourage human interaction over technology every day.  And I still write my notes on paper instead of my PDA.  And I still prefer books over PDF (despite the green guilt; I said prefer, not use).  A week or so ago I still questioned the use of Twitter and why people did it though in building an RIA app at work, I now get why other people might use it.  Any thoughts?

And finally – despite my press into RIAs, my interest in pure web design, client-side scripting languages, and all the basics has gone back on the rise.  And despite my distaste for Dreamweaver, I still have an acute interest in all-in-one editors.  If you happen to be working on Mac, try out Panic Software’s Coda…

More words tomorrow? Maybe.

That being said…I am playing around with the (JS) prototyping library and seeing how we can extend our Silverlight apps without having to rely on WPF and WCF.  Did I mention it’s Friday?  Where’s my beer?

In any case, some interesting and appropriate finds/posts/etc…

• 25 Reasons You Might Be a Hardcore Graphic/Web Designer (from Bittbox)
• 25 MORE Reasons You Might Be a Hardcore Graphic/Web Designer (also from Bittbox, duh)
• Omnes font family by Joshua Darden (sweet the “thin” – this isn’t the official site, just has a nice sampler)
• K-Lite Codec Pack (tons of really good codecs you never knew you needed until you didn’t have them anymore – like FLV without Flash – and if you don’t know what a codec is, take IMD302 or go look it up)
• Versions.app subversion software for OS X (trust me, you need this unless of course you are fortunate enough to be working in Windows with Team Server, but in either case, try out the beta quick since the freebie expires on July 1 when v1.0 ships)

And my book choice for this week … ok, I admit, I did not pick up ANYTHING this week so shame on me.  But I have a bitchin’ product web site/Silverlight player design just about ready for release so I’m happy.

OK, now it’s Satuday morning.  And no class this week.

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]

In his blog, DougT explains the concept of reflow which Mozilla defines as the process by which the geometry of the layout engine’s formatting objects are computed.  In any case, a couple of good examples cropped up on the net including this one below.  Check out this post for a couple more.

My first choice of good design is the “MacTab.”  This one actually kind of exists, just maybe not quite as slick.  I love the idea of a tablet-based Mac interface.

Then there’s the slightly far-fetched “Viao Zoom,” a holographic, thin-form factor design.

The Compenion has an OLED touch screen that can slide open to reveal an OLED-based keyboard (or second screen).

Check out the post for some more unique and innovative ideas.  How might these form factors apply to or suit your needs?  What other ideas can you come up with that might revolutionize laptop design?

[via Smashing Magazine]

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.

I’ve posted this article off Smashing Magazine because it illustrates some of the basic tenets of good web design and basic web usability that we’ll be discussing in IMD325 (User Centered Design). 

The Web has changed. This isn’t your neighbor’s nerdy kid’s internet anymore. Now the Web is home to your mom, your grandma and your technophobe sister. With computers as common a household appliance as televisions now, who might be using your web-application has expanded beyond the realm of just the power user.

Complicated menu systems, alert dialog messages that lock you out of the browser and flashy but confusing layouts aren’t necessarily going to help you make conversions. The Web user demographic has changed and to make your web application appeal to the masses your user interface needs to teach and to guide.

User Interfaces Should Teach
User interfaces need to teach your user how to use your application without resorting to a help screen. Many developers think that a help section will suffice for teaching users how to operate most any application, but this is not the case.

The help section of most applications, Web-based or otherwise, end up being used by the power users who are already trying to figure out every nook and cranny of the application. The proper way to help users understand how your application works is to bring the help section to them and in a format that can easily be understood.

In-line tips and interface descriptions work as an excellent introduction to the interface and how it operates. By providing your user with assistive instruction aside the interaction, it is easier for the user to relate the instruction with how it applies to your web application’s functionalities than a disconnected FAQ or help section.

[read the complete article here]

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!

One reason I learned as much as I did was because of the way I was taught.  As years have passed, the complexity of understanding the environmental problem from the perspective of how we contribute to it has become nearly impossible to describe, so I was very happy when I came across this site – The Story of Stuff.  In it, the narrator does a great job of not only explaining the extent of the problem but the vicious cycle of consumerism and how it makes the problem worse.

It got me to thinking, and probably something you all ask – why should I care (as a web designer)?  It still matters.  Remember that the Internet has become a ubiquitous lifestyle for our culture, and what we do as web designers directly influences everyone who comes in contact with our designs.  In other words, you have that power to change the way people think!  Use that power to your advantage.

For my new round of UCD classes starting in 2008, we will be adding a new dimension to the mix – what sustainable production is and how our actions as designer/developers can influence people to react in a certain way. 

An A/B experiment compares two variations of a single page.  The AdWords link alternates between the two variations and tracks the retention of the users based on all other issues being equal. The multivariate experiment adds variations to the paths the user might take and accounts for the quality in addition to the retention.

If you use AdWords to any degree, I highly recommend checking this out.  It’s not that you can’t create your own system for doing it, but this is one of the simplest systems for doing the tracking - and hey. why not let someone else do your dirty work?

Ted Nelson is, in short, the man who you should thank every time you click your mouse.  A philosophy student at Swarthmore, Nelson was dissatisfied with the limitations of paper as a medium for communication.  While enrolled at a computer course at Harvard, he discovered a resolution to enable unlimited communication.  In 1965, he coined the terms “hypertext” and “hypermedia” to describe these concepts.  Nelson is also credited as the second inventor of word processing.

Nelson led the Xanadu project, a competitor to Berners-Lee conceptualization of the Web (which eventually failed).  Nelson still works in the academic world where he researches alternative methods of non-linear thinking, believing that even the Web is still limited as a means of communication being nothing more than paper in computer form.

HTML is precisely what we were trying to PREVENT— ever-breaking links, links going outward only, quotes you can’t follow to their origins, no version management, no rights management. – Ted Nelson

As I’ve always told my students – knowing how ideas came about, knowing the context of ideas and how these inventions shaped our world are critical for understanding why the Internet world behaves the way it does and gives us a means of understanding how new ideas can affect ways in which we view the world.

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.

Manya found a really nice survey tool that was put together by Art Institute of Atlanta students in IMD420 (Advanced Interface Design, which unfortunately we do not offer).  It’s a Flash based survey but it’s demonstrative of how easy it is to put together a quick feedback tool about web interfaces.  In light of the fact that you should all be completing your group projects, including your testing plans, in the next couple of weeks I think this was an appropriate find.  Thanks!

Early origins of the hyperlinking concept, one of the foundations of the HTML language, can be attributed to an article by Vannevar Bush in the July 1945 issue of Atlantic Monthly entitled “As We May Think,” in which he describes a method or concept of interlinking human knowledge to create a continuous stream of information.

The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature.
- Vannevar Bush

Whether out of interest, knowledge or maybe you’re just a history buff, but I highly encourage all web design students to know the fundamental origins of the world they work in – from concepts like Bush’s to the relevance of ARPA to the IP addressing system.  Understanding the broad perspective of how science arrived to such a technological wonder is important.

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

FreelanceSwitch.com

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]