Flashy Where It Counts download deep purple purpendicular

Financial software have a bad wrap for being boring to look at, even more boring to use, and incredibly boring to think about. When Mint.com debuted’ it was like a godsend to people who wanted a ‘prettier’ online banking experience. Mint delivers by offering Ajax log-ins, dynamic charts and interactive menus! They don’t go over board though, there’s just enough there to make it Web 2.0, mixed in with enough of the basics that make it a competitor to Quicken.

Break Convention

Where Mint truly makes it’s name is in its ability to log into all your bank accounts and fetch account data from multiple accounts so as to centralize everything in one place. This is revolutionary because the existing banks simply will not do that for customers. They created a perfect market for a third party like Mint to step into the space and build a business. Likewise, the Web 2.0 features that Mint.com boasts are absent from most large banking institution websites.

Sell the Homepage

The most important thing to remember about a good web app is that you need to be able to translate your elevator ‘pitch’ into an enticing homepage. This is because, much like a big shot VC or investor, users are only going to stop by once. If you fail at ’selling the product’ that first time, they probably aren’t coming back. The homepage should list all the major features, feature a screenshot and allude to pricing info if there is any. Copy and typography here are a large portion but layout is also critical. What I like about Mint.com’s homepage is that they include screens shots while making a pretty compelling argument for using their service.

Web applications are the commodity to deal in on the internet these days but what makes them successful isn’t always their function, often times design plays a huge role. Today I’m taking a look at five apps that exemplify various aspects of great Web App design.

Don’t Waste Space

In the early days of the internet there was a lot of discussion about what went on ‘above and below’ the fold. The fold is a term used to describe the break in a web page created when content extends below the visible browser window. Last.fm have probably studied this as a quick look at their interface reveals a tabbed browser that helps keep all their most critical content ‘above’ the fold.

Make it a Utility

Web Applications are just desktop applications in the cloud and as that line blurs even more, it’s important to remember what your goal is…to provide a service. That said, there should never be a question in the users mind about what your product does. Usually, they should be able to tell by looking at it. If not subtle reminders help. Below you’ll see three images of things that you’ll see when looking around a Last.fm user profile page. They all remind me of one thing: I’m here for music.

Simple Colors

Since you want to create a memorable, easy to decipher brand, it’s important to keep your color palette narrowed down to shades of no more than five or so colors. Last.fm only uses three (white, grey, red) which helps to create an easily identifiable identity in the mind of customers. Sure you can use as many colors as you want but beyond looking good will people remember it as being you or your client?

• download chris norman rock away your teardrops

37Signals are like the MVPs of web developers. Not only did the lead developers here invent the Rails framework for Ruby, but they built a highly successful company out of it that even Jeff Bezos of Amazon.com loves! So what gets their product recognition?

Branding Similar Products

The one thing that 37Signals seem to understand more than anything else is that ‘branding’ a family of products makes them all that much more valuable in the long run. Take a look at the images below:

Although 37Signals have released several strong, unique products that stand alone, they all work together (look similar) and function similarly. Familiarity breeds loyal customers so when it’s time to turn your new app into a sister product, remember not to stray too far from where you found success the first time!

Incorporate the Explanation

Another thing you’ll notice is that all 37signal products incorporate the instructions right into the design of the site. Why ever consult a manual or customer service if your every question is answered before you ask it? This won’t work for every app but I think 37signals have pulled it off well in their product line.

Give the End User Freedom

Customers want to feel like they own the software and not the other way around. One way to do this is to make your application customizable or offer an API that allows users to incorporate your app into their site’s design theme. This versatility is key. Ass you’ll notice above, 37signlas recently began allowing for more customization of color and brand identity than they used to.

Leah Culver is the designer and lead developer of Pownce, a microblogging and file sharing service backed by Kevin Rose and designer Daniel Burka. It began as a project while she was hosting Wink!, a webcast produced by Webshots.

Pownce has since become one of the hottest, most highly scrutinized web applications on the market. Will it go big? Or will it sputter out and die before the masses really find a place for it? Regardless, here are a few things that I note when I see an start-up application like Pownce start to take off…

Choose The Right Framework/Language

When developing Web Apps the biggest thing you can do to save yourself a lot of time and money later on is to choose the right language to build in. Should you use Ruby on Rails, Django, Flash or something else? The decision making process can be tireless, each language has it’s pros and each has it’s cons. Django is very well renown for being built to scale, one of the reasons Leah Culver and Daniel Burka built it, loosely based on the LAMP standard (Linux, Apache, MySQL, and PHP) with Django/Python thrown in for good measure. This will not only affect your choices as a designer, but it will also affect your business model, your content choices and your ability to meet demand. A great example of how not to do this is Twitter, who deployed Ruby on Rails without fully being prepared to scale to meet the demand they received.

Differentiate

Pownce was probably the 100th social network to debut in 2007, a time when social networks were springing up all over the place to take advantage of eager VC’s and investors who were salivating over a second boom in web based business models. What made Pownce different from Twitter and Jaiku (it’s nearest competitors) was not just in function, but in design. Pownce simply looks good. In fact, when I first began using it I was convinced it was a useless application (at the time you could only send messages to your other friends on Pownce) but it looked so damn good I wanted to find a way to use it every day. Did I really need another blogging application? No, but Pownce was around and it was so strikingly good looking I would work it into my activities online. This might sound superficial but in world of a thousand “Me too’s!” sometimes looks might be all you have to stand out from the herd.

oregon out of the woods download
Keep it Practical

The other thing that set Pownce out from the crowd was the fact that because its features were minimal, it’s design matched perfectly. There is no excess, no flash, no bling. Pownce seems to pride itself on doing what it does (sharing content) and not being pretentious (del.icio.us) or ugly (yousendit.com) while doing it.

Snipplr.com is like del.icio.us for people who write a lot of code. Whether you develop for Ruby or Django, hack WordPress or MovableType, or if you just write XHTML, you probably keep a “Code Diary” full of useful tricks, hacks and hints that you’ve used in past projects. Snipplr exists to let you share that code with other developers just like yourself. It’s become indispensable to my work flow since I found it!

1. Flickr.com or StumbleUpon’s Flickr channel are two good places. Just stumbling through and seeing some of the amazing people your age, younger and older are doing always makes me feel like a bit of a slacker. There’s no particular place or group I go to on these sites, I just let the fates guide my searches to see what looks interesting.



2. Magazines. While design magazines are great, what really inspires me is looking at magazines that aren’t necessarily design oriented. Things like National Geographic, Wired, Adbusters, Maxim, UTNE…event mostly text mags like The Economist or The New Yorker. Anything to put my head into a space that I don’t normally go.



3. Album covers and Movie Posters are great places for inspiration. When I first started using Processing I had some big ideas about creating the type of user interface that Tom Cruise used in The Minority Report. Even bad movies can give you good ideas, at least that’s my excuse for owning Stephen Dorff’s FearDotCom.



4. Museums. Whether it’s contemporary art or the masters, Museums are a great place to witness at another artist’s work and influence and either get really depressed or really inspired. Either way, you’ll come out with a different perspective than when you went in.

There are lots of places, parks, theaters, your backyard. Anyplace can serve as inspiration it’s really more about varying your daily routines enough that your start to notice all the beautiful inspiration around you.

Quentin Muhlert – 5:03 pm

Q: I’ve got a question about internationalization: I have a multinational site with country-coded subdirectories and I’ve registered these as such in Webmasters’ tools, will this be exempt from duplicate content rules for a site spanning uk/us/aus?

Susan Moskwa – 5:16 pm

A: Geographic targeting doesn’t affect the fact that we only want to show one version of a piece of content in search results; we will still try to filter out duplicates when we serve search results.

—

Oliver Gonzalez – 5:10 pm

Q: Is there any limit on the number of redirections 301, a Web site?. In a large site, if you change the URL structure, is the optimum time to do it with 301? or is best done gradually

Matt Cutts – 5:17 pm

A: There’s no per-page limit on the number of 301s you can do, so you could move 100K pages to 100K new location. However, if we see a really long chain of redirects, eventually we will decide to stop following the chain.

—

Abhijeet Mukherjee – 5:18 pm

Q: Whats the average time after which the PR of a site gets updated?

Matt Cutts – 5:22 pm

A: We typically do pushes to the toolbar every 3-4 months, so it can take that long between toolbar data pushes.

—

Andrew Evans – 5:11 pm

Q: Do 301 redirects send PR to its destination? I have several domains that 301 to 1 domain, and a couple have PR. Will it now send that PR to the 1 domain now that it is 301 redirected? Thank you.

Susan Moskwa – 5:27 pm

A: 301 redirects are the best way to let us know that you’d like a particular URL to get “credit” for factors from another URL; we’ll pass those signals across a 301 redirect as appropriate.

—

Antony Johnson – 5:23 pm

Q: Hi Matt, Are there any guidelines available on keyword density we have pages that are about 1 single subject and the keyword density is quite high

Matt Cutts – 5:27 pm

A: Antony, you may not believe this, but we tend not to think much about KW density here at Google, b/c our algorithms handle it pretty well. My advice is to pull in an innocent/non-search friend and have them read the text. If they raise their eyebrow, …

—

Quentin Muhlert – 5:29 pm

Q: Does GoogleBot tend to have a preference for long or short filenames/directory names?

Pedro Dias – 5:36 pm

A: Hi Quentin. No Googlebot doesn’t have preference on short or long filenames/directory names, usualy short names are preferred by users for usability purposes.

—

Alan Rothstein – 5:31 pm

Q: When you use the robots.txt tool in Webmaster Tools does it abide by this case sensitive rule?

Maile Ohye – 5:36 pm

A: Hi Alan, yes. The robots.txt analysis tool is case sensitive in the correct areas. Directives like “disallow” can be lower or uppercase. Path and directories are correctly case sensitve.

—

Rabin Acharya – 5:37 pm

Q: i have noticed multiple times that some of my competitors have multiple pages listed on certain keyword search. i believe google is trying to make sure only one page from a site is going to be listed. am i hearing it wrong?

Matt Cutts – 5:40 pm

A: Rabin, we’re typically happy to show up to two pages from one hostname in our search results. For a navigational search, it might not be bad to show more results from one domain. But we like diversity and try to preserve it.

—

Michael Nguyen – 5:42 pm

Q: Does removing your site’s low value pages from the index help the other pages rank better?

Matt Cutts – 5:45 pm

A: If they are just regular web pages, I wouldn’t remove them. If they were really spammy or doorway pages and you suspect that it could have affected your site’s ranking or reputation, then I would remove any spammy pages.

Firefox CSS3 Highlights

• Support for the inline-block (CSS 2.1) and inline-table (CSS 2.0) values of the display property
• font-size-adjust is a property in CSS 2.0 (which was dropped from CSS 2.1 due to lack of implementations). Think of it as a way to a way for style sheets to pick font size by the size of the x-height rather than the size of the font.
  

  Anyway, why would you want to use this? Largely because, on the Web, you don’t actually know what font is going to be used. Different machines, especially when running different operating systems, have different fonts on them. Even the same font might be used slightly differently on different operating systems. The lowercase letters in different fonts take up a different proportion of the font’s size. How big text appears and how much width it takes up is often more closely related to the size of the lowercase letters than the uppercase.

• rgba() and hsla() colors will allow for easier control over transparencies and color separation
• New values for the width, min-width, and max-width properties: -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available. This value lets authors do some things that previously weren’t possible without tables, such as putting backgrounds on headings that won’t fill the whole width of the container unless the heading does, but is a single rectangle if the heading breaks to multiple lines.
• white-space: pre-wrap will allow for the displaying of preformatted text in a way that wraps when the text doesn’t fit in the width of its container. This can be useful for things like source code samples and mailing list archives.

Opera CSS3 Highlights

• Media queries are a CSS 3 construct, which work in a similar manner to conditional comments, except that these are web standards, rather than proprietary constructs—you can enclose a block of CSS rules inside a media query, and then have them applied to your markup (or not) depending on a condition, such as “is the screen size less than 480 pixels”?
• text-shadow Using drop shadows with text used to mean serving the text as an image, and messing about the positioning, but that’s no longer the case. In the text-shadow property, the values from left to right set the color of the shadow, the left/right and top/bottom offsets of the shadow (negative values move the shadow left/up, and positive values move the shadow right/down), and the amount of blurring for the shadow.
• -o-background-size allows for the dynamic or conditional control of background images.
• HSL. CSS 3 allows you to specify colours as HSL (or Hue, Saturation, Lightness) values—this is good, HSL colors overcome some of the limitations of RGB colors.

You can review even more of the plans for CSS3 for Firefox and Opera and some developer feedback here.

The 10/90 rule is also a reproach to companies who tend to spend too much on their web analytics service, sometimes amounting to tens of thousands of dollars, when the same metrics can be had with free tools such as Google Analytics. Avinash recommends the following steps to cut cost on tools and rededicate resources to the more vital task of analysis:

• Apply for a free Google Analytics account at GA Sign Up Page
• Once you get the code implement Google Analytics on your website in parallel with your favorite expensive analytics tool
• Get a comfort level for delta between the two sets of key numbers (you know visitors, conversions, page views etc etc) and create a multiplier (my tool shows visitors 10% higher and page views 10% lower than Google). You will use this multiplier in future to compare year over year trends if you want to.
• Cancel the contract with your favorite expensive analytics vendor and take that $50k or $100k or $200k and: 1) Hire a smart analyst for between $50k to whatever maybe your areas great salary 2) Put the rest of the money in your pocket.
• Your smart analyst will be able to extract just as much value from GA than your old tool, in fact my prediction is that it will be a lot more.
• As the level of savvy in your org grows, as the level of sophistication of supporting processes increased, perhaps in two years you might be ready to plunk down $200k on a web analytics tool and then be ready to extract a corresponding amount of value from it.

Ever noticed some of the URLs in Gmail? Here’s a few samples:

https://mail.google.com/mail/#inbox
https://mail.google.com/mail/#sent
https://mail.google.com/mail/#(some long string) – for a message

Gmail uses the in-page anchor part of the URL to identify a particular section of the page. In this case, the client-side JavaScript then handles any events relating to the URL to show the appropriate content. Javascript includes events that can be fired when a new anchor within the current page is requested. As an upside, links on a Gmail page are real links – <a> tags with URIs, not onclick handlers or the like.

The most commonly used library to achieve this is Really Simple History, by Brad Neuberg and Brian Dillard. Really Simple History maintains an internal data store of the current history, so that you can implement your own back and forward buttons. Most importantly, however, it provides a simple API to handle your events, such as adding an item to history or responding to a new location request.

Using Really Simple History is easy; after including two .js files, the library is ready to go. It doesn’t jump into action automatically – you initialize it in your code to control when and where it’s used. There’s also a version for Prototype users, which cleanly integrates with the namespaces. Two JavaScript classes, DhtmlHistory and HistoryStorage, provide access to the library’s functionality. The project even provides complete demo files to get you started, with samples demonstrating all common usage scenarios.

Head over to the project page and check it out.