Jeffrey Zeldman thinks so. In his essay, “iPad As the New Flash,” the author and standards guru argues that designers are now coding up device-centric user experiences at the expense of web standards, accessibility and the advancement of open web technologies.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

He takes issue not with apps in general, but with the design choices being made by popular magazines as they rush to embrace the new shiny. His ultimate conclusion: “Masturbatory novelty is not a business strategy.”

The comments are enlightening, too. A few make the point that web standards like JavaScript and CSS can now be used to develop experiences that can be delivered both natively and through a browser. Another suggests this is just the Old World struggling to understand a new platform.

See also:

• Who Needs Flash?
• Flashy HTML5 Experiments Point to Web’s Future
• Video: Watch Flash Hand HTML5 a Beating on Mobiles

Twitter launched a full redesign to its website Tuesday, showing off changes that lead Twitter.com away from its humble stream-of-updates past and towards a more interactive, app-like future.

The new Twitter went live to a select few users Tuesday afternoon and began rolling out to everyone else Wednesday. If you don’t see it yet, you will soon.

The website now has a new two-panel view. Your familiar stream of tweets runs down the left side. On the right side is a dashboard of sorts, where you can see recent activity from your followers and the people you follow, trending topics, and the list of people you might want to follow.

Click on a tweet and it expands in the right panel. There, you’ll see rich media like photos and videos, associated conversations, recent tweets by the author, and mini bios for any other people mentioned in the tweet.

Overall, the update plays on features found in popular Twitter client apps like Tweetdeck and Seesmic, and it looks quite a bit like the official Twitter app for the iPad. Somewhat like those apps, you can dive right into videos or photos without leaving the Twitter website, whereas the old site required you to leave the site or launch links in new browser tabs.

Scrolling in the timeline on the left panel is infinite. New tweets keep loading at the bottom as you scroll, so you can just keep cruising backwards into time as far as you’d like.

When you expand a tweet by clicking on it, if there’s a video or a photo from a supported site (YouTube, Vimeo, Flickr and TwitPic were all included in Tuesday’s launch) it shows up nice and big. Videos play right there, and Flickr photos are accompanied by thumbnails to the rest of the photoset, if there is one. You can choose to see embedded photos and videos from only from people you’re following, or from everyone.

Images, videos, maps and retweets are all carried over to the new individual tweet pages. “People can much more quickly grok the context of a tweet,” Twitter CEO Evan Williams said at the launch event Tuesday.

To send a new tweet, you can either use the old box, still in its familiar location, if you’re on your home page. Or, if you’re elsewhere in the system, you can click on the little icon up next to your user profile picture to launch a floating window.

Something else very appy — Twitter has incorporated keyboard shortcuts.

Keyboard shortcuts are definitely a geeky power user feature, but ask anyone who uses them in Google Reader or Gmail and they’ll tell you they can’t live without them. In fact, the keyboard shortcuts are very close to those apps.

@mentions are now accessible from a tab at the top of your timeline:

As are retweets:

There’s a new search box at the top of the page. Run searches and you can save them (click the “Save this search” button up top) to keep track of new results. Saved searches will then live in a tab next to Retweets at the top of your timeline.

Lists are handy — I keep two or three that I browse every morning to catch up on tech news. Twitter has moved your lists into the last tab at the top of the timeline.

The redesign uses some cutting-edge web technology, including LABjs to speed things up and jQuery for the animated, Ajaxy twiddly bits. Also: the awesome Modernizr library, which checks your browser’s capability of handling different HTML5 doo-dads and adjusts the website’s code accordingly.

These changes show Twitter extending a big juicy lollipop to users — by providing people with a more rich experience directly inside the browser, there’s less of a reason to go download an app. This is bound to cheese off a good number of developers who have much blood and sweat (and cash) invested in their own Twitter client apps and web experiences. However, there’s still a place for those apps — Twitter has built this new interface on top of its own API, which means that any capable developer out there can do something very close to this design, or improve on it, on their own.

One big caveat: Twitter has the power to bypass its API rate limit of 20,000 requests per hour that it enforces for third-party applications. Only Twitter and selected partners can pull more tweets than that. These rates will change as Twitter grows, especially now that the service has got over 90 million tweets per day to play with.

Also, it’s doubtful this update will coax users away from their favorite apps.

Many people who use the website to tweet — Williams says 78 percent of active users have used Twitter.com in the last 30 days — will likely adapt to this update rather than reject it and run to a different experience, like a Tweetdeck or Seesmic. It exposes much more information than they’re used to, but by and large, the changes are useful and add more contextual value than visual clutter.

So for people who have only ever used the old Twitter.com, or even those (like me) who use apps occasionally but heavily favor the website, this is a radical change, but a positive one.

Those endeared to their third-party apps will probably look at the new Twitter.com and say, “Huh, neat, looks more like my favorite app than the old site.” Then they’ll go back to their app and tweet about it.

What do you think of the redesign? Tell us in the comments.

See Also:

• Does OAuth’s Complexity Alienate Small Apps?
• Twitter Moves to OAuth: The OAuthcalypse Is Nigh
• Twitter Now Lets You Automatically Follow Your Facebook Friends
• So Tweet: Geek Couple Plans Twitter Wedding
• Jurors: Stop Twittering

Huge CSS files can gunk up your page loads, creating annoying wait times for your readers and (if things get really bad) even driving people away before the page fully loads.

The trick to avoiding breaking your user experience is to make your CSS as lean, clean and fast as possible. There are tried and true techniques for speeding things up, like using Gzip, or serving one or two files instead of dozens. There are also poor optimization methods you should avoid.

Today, we bring you an informative video from the recent 2010 O’Reilly Velocity conference on how to optimize CSS while avoiding some of the most common mistakes developers make. It’s especially useful for those of you with big CSS payloads. The first speaker is a little dry, but the fun picks up when Nicole Sullivan takes over about five minutes in.

See Also:

• Advice From the CSS Guru: Embrace Prefixes
• Got Slow Web Pages? Find Out Why With YSlow
• Dealing With Browser Differences in CSS 3

Visual Design

By now you know a number of things about your site:why you are building it, who the audience is, what will be on the site (i.e., the content), and how the whole thing is structured. You are now ready to work on the visual design, which is often the most satisfying aspect of site design.

One of its main purposes is to provide users with a sense of place. They need to know where they are on the site, where they have been, and how to get to where they want to be. A good site structure combined with an effective visual design enables users to construct a mental map of the site.

The goal of this lesson is to take the site’s structure and map it onto the visual design. A number of tools are useful in creating the design. The first step is to make layout grids that define the structure and organization of the site as it will show up on the page level. Then design sketches will establish a general look and feel. Layout grids and design sketches together lead to page mock-ups, which in turn lead to the construction of Web-based prototypes.

At this point, you’ll need the help of graphic designers, art directors, and creative directors, as well as your production crew.

Layout Grids

Layout grids are templates that describe Web pages. Content – the focus of every page – requires prominent placement. You’ll need to block out space for global and local navigation and integrate other aspects of the site that may not be part of the site structure. The company’s brand must be present on each page. Advertising and sponsorship deals should be incorporated into the design. Here is an example of a layout grid:

To get started, take the site structure listing and make a list of all the possible page types. Individual pages within the site should be very similar in form across all the major sections. Review the content inventory, then try coming up with two or three generic page types. You’ll start by designing these and then use them as the basis for all the other page types.

To begin, break out your sketch pad or favorite graphics program. Create a rectangle representing the page, and block out the elements of your design. Since content is the most important element, start with that – even though it’s a little tricky, since you won’t yet know what else will be on the page. Several other elements must be considered:branding, advertising and sponsorship, navigation, page titles, header graphics, and footers, which include copyrights.

Branding plays a prominent role on every page because it informs users that they are still on the site. A common place for the branding is in a page’s upper left-hand corner.

Advertising and sponsorship can be integrated in a number of ways. Perhaps you have a full-sized ad banner (typically 468 by 60 pixels) on every page. Do you put it at the top? Do you put it under the title of each page? How do you integrate sponsorship? Is sponsorship integrated into the graphics headers on each page? Is there a small sponsorship logo at the bottom of each page? These are all questions you need to answer.

Finally, navigation also has to play a prominent role. Global navigation must be consistent across every page of the site. Local navigation systems can change, depending on the content, but try to be as consistent as possible.

This is an iterative process. You will need to revise the layout grids several times. You will probably want to do two or three different styles for the layout, if you have time.

Design Sketches and Page Mock-ups

Design sketches are used to establish the look and feel of the site. They can be integrated with the metaphor or site structure rationale, but this isn’t always necessary. Often, they are done concurrently with the rest of the information-architecture process, so you may already have the design sketches worked out and approved by the client.

The sketches don’t necessarily need to represent structure or organization. However, the graphic designers do need to know the size of the graphics files, as well as any technical constraints.

The next step is to create page mock-ups, which represent the actual site, by integrating the design sketches with the layout grids. These should be as close to the actual pages as possible. Use your favorite graphics program to break up your sketches. Try cutting and pasting the pieces over their respective parts of the layout grids. Another option is to build the page mock-ups in HTML, using the pieces of the design sketches as the graphics.

The page mock-ups are the basis for a Web-based prototype or, if your site is small enough, the basis for building the actual site. Page mock-ups need to be approved by the client, although it may be sufficient to have approval on the site structure and design sketches in order for you to move forward with the prototypes.

You have now completed the steps in shaping the information architecture for your site! You have all the materials you need to construct a prototype, and everything else should fall into place. Before you dive into prototyping, add one last entry to your design document.

Design Document

You are almost done. You just need to document the visual design of the site. Create a new chapter in your design document called Visual Design. Document the layout grids, and be sure to include the diagrams you made. Compile the design sketches, and add those, as well as the pictures of the page mock-ups, to the document. Include snapshots from the Web-based prototype, if you can. The design document is now complete, providing a thorough description of the site’s design. It will be useful in constructing the site, for adding content, and in revising the site when the time inevitably comes.

Example:

5 Visual Design

5.1 Layout Grids

5.2 Design Sketches

5.3 Page Mock-ups

5.4 Web-based Prototype

You have just completed the last lesson. Now all it takes to be a true information architect is a lot of practice.

This is the JavaScript example from the Webmonkey tutorial Make Images Grow and Shrink With JavaScript. This script will allow you to put “live thumbnails” of images on your website. The thumbnails will grow and shrink when users click on them.

<script type="text/javascript">



var links = document.getElementsByTagName('a');



for (var i = 0; i < links.length; i++)

	if (links[i].className == 'livethumbnail')

	{

		var img = links[i].getElementsByTagName('img')[0];

		img.state = 'small';

		img.smallSrc = img.getAttribute('src');

		img.smallWidth = parseInt(img.getAttribute('width'));

		img.smallHeight = parseInt(img.getAttribute('height'));

		img.largeSrc = links[i].getAttribute('href');

		img.largeWidth = parseInt(img.getAttribute('largewidth'));

		img.largeHeight = parseInt(img.getAttribute('largeheight'));

		img.ratio = img.smallHeight / img.smallWidth;

		links[i].onclick = scale;

	}



function scale()

{

	var img = this.getElementsByTagName('img')[0];

	img.src = img.smallSrc;



	if (! img.preloaded)

	{

		img.preloaded = new Image();

		img.preloaded.src = img.largeSrc;

	}



	var interval = window.setInterval(scaleStep, 10);

	return false;



	function scaleStep()

	{

		var step = 10;

		var width = parseInt(img.getAttribute('width'));

		var height = parseInt(img.getAttribute('height'));



		if (img.state == 'small')

		{

			width += step;

			height += Math.floor(step * img.ratio);



			img.setAttribute('width', width);

			img.setAttribute('height', height);



			if (width > img.largeWidth - step)

			{

				img.setAttribute('width', img.largeWidth);

				img.setAttribute('height', img.largeHeight);

				img.setAttribute('src', img.largeSrc);

				window.clearInterval(interval);

				img.state = 'large';

			}

		}

		else

		{

			width -= step;

			height -= Math.floor(step * img.ratio);



			img.setAttribute('width', width);

			img.setAttribute('height', height);



			if (width < img.smallWidth + step)

			{

				img.setAttribute('width', img.smallWidth);

				img.setAttribute('height', img.smallHeight);

				img.src = img.smallSrc;

				window.clearInterval(interval);

				img.state = 'small';

			}

		}

	}

}





</script>