Facebook Demos New Design

Here's another interesting video. If you are in any way involved with website design, development, or management, you spend a lot of time looking at other successful websites in an attempt to discover what works well. During this process you'll often contemplate what drove certain decisions. Therefore it's very intriguing when you get a chance to hear an actual Q&A about such topics. So, check out this press demo from Facebook:



Found via: Mashable

Charlie Rose on The iPad, With David Carr, Michael Arrington and Walter Mossberg

Despite the various "glaring omissions" that have been well debated in the past week, I agree that the iPad will be a success. It may not fully blossom, past the early adopters, until a v1.5 or v2, but it's going to be very popular. As a UI designer I want one to develop for, as a consumer I want one because it looks so fun to play with. Anyhow, this Charlie Rose segment (presented in iPad-reistant Flash) sums things up well:



Found via: TechCrunch

Browser-based Web Browser Testing: Litmus vs. Adobe BrowserLab

Below is a quick comparison of two browser testing tools. There are others out there, feel free to add in comments. However, since Adobe just made another press push for BrowserLab I thought it would be a good time to compare these two tools that I've been trying out.

Litmus

Litmus is out of the UK, and has been around in some capacity since 2005. They currently offer both an HTML-based web application, as well as a nascent desktop application counterpart.

Browsers supported at this time:

• Short answer - Litmus wins here big time with a very broad list of browsers on both Windows and Mac. Full list here.

Stand out features:

• Not just web browser testing, but also Email Testing - a feature Adobe doesn't have at all
• Browser tests can show both: Cropped, in-browser window; and Full page no browser window bordering image
• Save multiple tests
• Retesting / test history, iterative workflow
• Validation warnings and direct links to validation results
• Ability to download test results
• Ability to mark a test as complied and share the results (ie Social features)
• bookmarkelt lets you test any page you are visiting in your normal browser
• Rich Help and other resources

Adobe® BrowserLab

Adobe BrowserLab is in a limited time preview stage, this Flash-in-browser-based tool covers the website basics that Litmus does and has a few slick features. One immediate 'weakness' in comparison is that at the moment you can only run one test at a time and there is no apparent way to access test history.

Browsers supported at this time:

• Firefox 2.0 & 3.0 for both Win XP and Mac OSX
• IE 6.0 & 7.0 for XP
• Safari 3.0 for Mac

Stand out features:

• Views: single browser, 2-up for comparison, and a very cool "Onion Skin View" that overlays two different captures to show where layout diverges.
• Browser sets, with controls
• Zooming on captures
• BrowserLab Extension for Dreamweaver CS4

Verdict

IMO, Litmus offers a broader more user-friendly set of features for testing multiple sites in an iterative fashion. It's huge browser library and additional support for testing HTML Email give it a clear edge. Adobe may be able to catch up of course, but I also feel that it will ultimately come down to pricing. Both offer free options, but at the moment Adobe allows you to test IE 6 for free, whereas Litmus requires a paid plan to gain access to anything but IE 7 and Firefox 2.0. Adobe has not set pricing, but has stated that it will become a paid service after it moves out of preview release. We'll have to see how the pricing packages compare. For the time being, you could benefit by using both in tandem, which I'll likely do for a while until I feel there's reason not to. No matter what, the advent of powerful browser-based browser testing tools is a huge time, money, and headache saver for website builders concerned with providing the best user experience possible across a large spectrum of web clients.

How to Optimize for Google, a 3-part Series from SiteProNews

The slashing of paid search advertising is just one symptom of the current economic situation. I'm seeing a lot of questions out there, from Twitter to direct inquiries, regarding the dark art of SEO. While optimizing the heck out of your META tags may never grow your "Organic Search" results to the volume they might have been at when you were spending thousands of dollars per month on Adwords, there are things that can and should be done to move your site up in search engine rankings.

One mantra to keep in mind throughout any SEO effort is: Patience, Analysis, Creativity, Implementation, Repeat. SEO combines many disciplines such as Marketing, Competitive Research, Customer Awareness, and Web Development. It also helps if you are selling/making/talking about stuff that people are interested in. If you build it, it doesn't necessarily mean that 'they' will search for it. Don't try to get it all done in one day, break your site into prioritized blocks, and work to improve successful pages first, then work through the full site over time.

You are responsible for knowing what your customers are looking for, and the terms they associate with that need. Here's a three part roll up by SiteProNews, that covers of a bunch of helpful ideas to help you build an SEO framework that can close the gap between your site and the people searching for what you provide:

How to Optimize for Google:

• Part 1 of 3
  
• Part 2 of 3
  
• Part 3 of 3
  

Excellent Example of an Interactive Product "Configurator" from Data Robotics

Drobo is a recently announced product from Data Robotics, Inc. It puts a new spin on high-capacity desktop storage. The way in which the product differs from traditional desktop hard-drives can seem a subtle at first.

Therefore, they have created a very effective product configuration / simulation tool that they call the "Drobolator Capacity Calculator". This is one of the most useful product configuration tools I've seen in a while. It not only helps you simulate different personal storage scenarios, but it also clearly communicates the unique way in which Drobo allocates storage (for various uses) across the multiple installed drives.

It's always great to see user experience designs that help make complex systems easier to understand. Kudos to Data Robotics for leveraging an interactive drag and drop interface in such a user-centered and effective way.

Rutland Plywood launches e-commerce site for RiggerCore product line

J.Y. Design helped Rutland Plywood Corporation design and launch a website for their new RiggerCore product line. The site offers information and online purchasing options for RiggerCore Industrial Strength Outrigger and Crane pads. Check it out at www.riggercore.com

ShrinkTheWeb - FREE website thumbnails

"ShrinkTheWeb (STW) will allow any webmaster who wants to show a website preview to do so using our free, powerful, and reliable service. Thumbnails increase click-through and conversions..."

Some people have attempted to link to Snap.com previews, only to find that doing so violates the Snap TOS. I'm glad to see that ShrinkTheWeb noticed the demand, and jumped in with a simple service. An example of one of their previews (of their own site nonetheless) is shown at right. Go shrink.

Finding Information: Factors that improve online experiences.

The Institute for Dynamic Educational Advancement (IDEA) recently completed a survey about how people find information online. They've posted their findings online. In their own words, "...this report outlines key findings from surveys that explored factors that drive online experience as expressed by the three different subject groups – nonprofit organizations and cities, web designers and firms, and the general public." The survey’s major findings are summarized as:

• Designers underestimate the thresholds for an effective site
  
• Easy access to complete information is key to visitor enjoyment
  
• Good visual design and up-to-date information are critical
  
• Visitors want information fast
  
• Visitors want a broad range of topics
  
• Designers are overly optimistic about visitors’ ability to maintain orientation
  
• Visitors still need handholding
  
• Visitors point to the lack of breadth and depth of site content as causing an “Information Gap.”
  

You can view the information online or download the 17 page report in PDF at:

http://www.idea.org/find-information.html

Vitamin: "Creating Sexy Stylesheets"

Vitamin Features - Creating Sexy Stylesheets : "Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers."

This article summarizes common best practices and also introduces some handy tips and tricks for things you can do to optimize the CSS workflow for multiple contributors. Bottom line is keep it clean and think ahead to what it will be like to have to open up your CSS file 6 months later - 'what was that selector named again?...'

Adobe Delivers Flash Player 9 with H.264 Video Support

"HD Quality Web Video and Audio Now Available With Adobe Flash Player Update... Adobe Flash Player 9 now includes H.264 standard video support, the same standard deployed in Blu-Ray® and HD-DVD® high definition video players, and High Efficiency AAC (HE-AAC) audio capabilities. The latest update also features hardware accelerated, multi-core enhanced, full-screen video playback for high-resolution viewing across major operating systems and browsers. The combination of Adobe Flash Player 9 and Adobe Flash Media Server 3 (also announced today) enables the delivery of HD quality video to the broadest online audience. Adobe Flash Player 9 Update 3 is available immediately at http://www.adobe.com/go/getflashplayer"

read more | digg story

Four Paths to Mobile Web Design and Deployment

Here's a handy article...

creativepro.com : "In this excerpt, well-known -- and better yet, well-respected -- Web designer Cameron Moll explains four ways to design and deliver standards-compliant content for mobile devices:Do nothing with your current Web siteReduce its images and stylingUse handheld style sheetsCreate mobile-optimized contentCameron lays out the pros and cons of each method and includes real-life examples of how content from sites following each of these methods displays."

Thumbalizr Takes Screen Shots from a URL

via mashable.com: "Thumbalizr is an image tool that lets you take screen shots of web pages and offers up several dimension options for you to download your image. Just enter in the URL of the web page you'd like a screen shot for, and hit "go"..."

Here's a handy service for quick web captures. The site appears to be slow right at the moment due to heavy interest. I wonder if it will allow for specifying a particular browser type for rendering, like browsershots.org does?

The Impact of Social Media on Search Rankings

SiteProNews:: "Over the past few years, the Internet has increasingly become a participatory social network where user-generated content is just as important as traditional advertising messages. This means your articles, blog posts, videos, podcasts, and other comments on the Web are now critical sources of information about your company, your products and services... Social media, therefore, becomes increasingly important to a Web site's success and its visibility in search engines...

With the advent of universal search by Google and others, search marketers and site owners will soon find it necessary to optimize their Web sites for a broad range of content types. This means creating content in every media and vertical niche applicable to your brand..."

This article summarizes the importance of a broad-media approach very well, highlighting the categories of: Search Personalization; Universal Search; Optimizing Podcasts; and Optimizing Google Base Data Feeds.

You don't want to necessarily implement content types or social media frameworks that aren't appropriate to your business, but be sure you are not overlooking a variety of options. And another trend is to NOT lock-up assets like PDF downloads and demos behind registration walls. Give a prospect all you have, if they are interested, they'll eventually wind up in your CRM database.

Google Announces Hosted site search for businesses

Official Google Blog:: "Today we've released Custom Search Business Edition (CSBE) to do just that. CSBE is a hosted site search solution that provides Google-quality results for your website. It's fast, relevant, reliable, and flexible, so that users can quickly find what they're looking for through search results customized and integrated into your business website.

CSBE builds on the Google Custom Search Engine, a hosted search solution we introduced last October that allows organizations to create a search engine and search results that are tailored to their point of view... Businesses that want further control over results presentation and integration with their website can obtain results through XML. Now those of you with business sites have the option to turn off ads and have further control over branding. In addition, CSBE provides options for email and phone support. The pricing starts at $100 per year for searching up to 5,000 pages."

Finally Google is offering a 'private label' search service, and seems affordable too. Now I feel bad for folks like Picosearch.

iPhoney - an iPhone simulator for designers

Marketcircle: iPhoney: "Looking for a way to see how your web creations will look on iPhone? Look no further. iPhoney gives you a pixel-accurate web browsing environment powered by Safari that you can use when developing web sites for iPhone. It's the perfect 320 by 480-pixel canvas for your iPhone development. And it's free."



This is very handy for those that may not be in the market for an iPhone strictly for testing purposes. Also, you can actually use new specialized sites like the Digg iPhone Beta.

Cover Flow and the scrolling horizontal subnav at the new Apple.com

37signals has a thoughtful post on the proliferation of the Coverflow UI metaphor: "As the world gets iPhonified and Leopardized, get ready for more Cover Flow (video), the scrolling interface with forward/backward arrows that mimics a CD collection or jukebox selection..." As they point out how aspects of the horizontal scrolling UI have been incorporated into the new Apple.com, they summarize it all well: "At least there’s more conventional text links in the footer."



I think that is an important takeaway. Coverflow is one of many 'views' that you can choose to enable within iTunes. As variations on these newer navigation models start to hit the web, it will continue be important to offer multiple ways to get to the same content. And IMHO, the Coverflow interface as demonstrated in the iPhone port is the most usable version I've seen. It skips the file list below the images, and allows you to interact directly with the thumbnails, flipping albums over to see their contents. Until iTunes can do this too, I will fully understand why Coverflow gets slammed so much.

read more | digg story

Apple Safari 3 Public Beta Fixes Flash Drop-menu Issue

Apple has released a Beta version of its Safari browser for both Mac and Windows. While this is news itself, I'm more excited about the following revelation.

Anyone out there who has done website work where the design called for drop-down navigation menus which overlap Adobe flash content will be happy about this announcement. In previous versions of the Safari Mac browser, there was a 'bug' where drop down menus would flicker badly if they overlapped Flash content. This issue even plagues www.adobe.com in Safari 2.x!

After testing both the Mac & Windows versions of Safari 3, Apple appears to finally have fixed this problem!



Check out the Apple - Safari 3 Public Beta

Adobe Launches Adobe Integrated Runtime (AIR) BETA

"Adobe® AIR™, formerly code-named Apollo, is a cross-operating system runtime that allows developers to use their existing web development skills to build and deploy rich Internet applications to the desktop."

70 Expert Ideas For Better CSS Coding

via digg: "Smashing Magazine does it again with a superb list of little CSS tips & tricks to increase your productivity."

This is an excellent compilation of many of the tips and tricks posted to digg, but all rolled up in a nicely organized package with plenty of source-links to expand on the techniques outlined. There's definitely a buzz around what's to be considered "Best Practices" when it comes to CSS design and development. I see a strong opportunity out there for the development of a tool or app that puts a ui on top of these practices, making it easier to replicate across multiple projects.

read more | digg story

A List Apart: The Web Design Survey, 2007

The Web Design Survey, 2007: "Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?"

Give it a go to improve the findings, and you may even win something...

Panic Releases Coda "One-Window Web Development for Mac OS X"

Panic.com: "So, we code web sites by hand. And one day, it hit us: our web workflow was wonky. We’d have our text editor open, with Transmit open to save files to the server. We’d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web. “This could be easier,” we realized. “And much cooler.”

When Panic releases an app, it's usually just perfect for the subset of users that they choose to target. So Coda has definitely caught my attention. I've only played with the trial a few moments and can say that it looks pretty interesting, especially if you don't already have Panic Transmit and/or CSSEdit. With CSS editing properties still squished in a small floater within Dreamweaver, this could be an actual threat for those more into hand-coding. As always it's beautifully Mac-like and the visual bookmarks are a sweet touch.

Here's a more in-depth review by MacApper.

Web Apps 101: Your Three Point Success Plan

TechCrunch - Building a web app is easy. Building a successful and profitable web app is where most people fail. If you want your app to stay out of the Dead Pool, you need to know the answer the following questions:

1. Who is it aimed at?
2. Why will they use it?
3. Will they pay for it?

Also, you can download the MP3 audio and PDF presentation that appear to be the foundation for this article at: http://www.futureofwebapps.com/

read more | digg story

Don't Lose Your Visitors: Better 404 Pages

Devlounge: "Error pages control a lot more of our destiny than you may think. If a visitor has the unfortunate coincidence of reaching an error page on your site, chances of them attempting to access the page again are slim to none, especially if they were referred to the page from a direct link. How can you prevent this? Don’t let your error pages, especially 404, go un-noticed..."

This article is a handy summary of why it is important to carefully consider the design of your error pages when developing your site strategy. This can be of particular importance if you are doing a major redesign or any other thing that will change the existing structure of your site. You don't want to completely lose what you've worked hard to gain in terms of bookmarks and search engine entries.

The Mobile Web Offers a Rich Platform for Content and Advertising

Online Publishers Association: "With strong usage growth and consumers watching and acting upon advertisements, the mobile Web is a compelling platform for content and marketing, according to the latest research from the Online Publishers Association (OPA). Going Mobile: An International Study of Content Use and Advertising on the Mobile Web is the first OPA study to go beyond the U.S., involving over 6,000 interviews in the U.S., the U.K., France, Italy, Spain and Germany. The study was conducted in partnership with TNS Media and Entertainment."

Key findings: "Heavy Access and Growing Usage, Advertising is Driving Action, PC Web Brands Driving Mobile Web Activity, Mobile Web is Vital for Consumers of Sports, Weather and News"

They've also got the Presentation of Findings in PDF.

The 50 Most Important People on the Web

pcworld.com: "Despite what Time magazine would have you believe, you are not the most powerful or influential person on the Web. At PC World we love online personals, social networks, and videos of people falling on their keisters as much as the next person, but without the folks who create the Craigslists, MySpaces, and YouTubes of the world, much of the Web's potential would be lost among spam sites and other online detritus."



read more | digg story

The Best (FireFox) Browser Extensions for Web Development

This article summarizes things well IMHO. Glad, and not surprised, to see the Web Developer extension as number one on the list. Thanks to mondaybynoon.com for compiling this list! (via Vitamin)

Microsoft releases Expression Web

news.com: "As a start, the company on Monday released Expression Web, a tool for designing user interfaces. It is offering the product as an upgrade to its Microsoft FrontPage Web authoring tool.

In addition, Microsoft posted a public beta download of Expression Blend, its Windows-specific design software. And in the third related announcement, it delivered an early version of Expression Design, a tool for creating logos, animations and other individual visual elements.



These three products will be in Expression Studio, set for shipping in the second quarter of 2007."

Also, see the Microsoft Expression site for more details. I'll be interested to see what Adobe has in store for Dreamweaver post acquisition. Hopefully this release from MS will provide some healthy competition.