Responsive on the vertical

// What can the visitor see on the first glance of your website? How can you accommodate users with different screen sizes?  Read on +Chris Coyier's article on #responsive   #design  above the fold :) 
http://bit.ly/PzETlp

Google+: View post on Google+

The Subtle Art of Documentation Advertising

The screenshot below is from a case study article of Microsoft's MSDN developer site. In a great example of how to advertise #Metro over iOS without shouting "Metro kicks ass!", the article describes all the steps the authors/developers took to convert an iPad app to Metro. At the same time, every single part of the interface was improved (thanks to #Microsoft and amazing new ideas like #SemanticZoom !)

With a little warning then if you are highly devoted #iOS developer, enjoy reading (it is actually a good introduction for people looking into developing for Metro) :) http://bit.ly/NKTJle

Google+: Reshared 1 times
Google+: View post on Google+

Download: Windows Metro Icon Collection

Here is http://bit.ly/PI0JkX a collection of 690 #icons in the visual style of #Windows 8 (also known as #Metro ). The collection comes with 
- Separate PNG files 26×26 pixels for each icon, ready to use
- Single EPS source file so you can scale the icons in any vector image editor
Many thanks to the kind people of VisualPharm.com!!

Google+: Reshared 1 times
Google+: View post on Google+

It's not you, it's the user

Software as social hacking

Finding out how you site/app/whatever is being used and percieved by the users is as important (or more) as your original specifications for it. This is what Grupper (a social service that sets up up drinks between 3 men and 3 women) discovered when they realized that cancellation rate for their events was extremely high.

On paper, they had done everything right. They had made cancelling an event very easy in order to provide a great customer service. What that meant though was the their system was allowing people to cancel for insignificant reasons. While this is was convenience for the person who was cancelling, it was quite the opposite for the other five persons who had their plans cancelled on them. So, if you could "sum the experiences", for each one good experience Grupper was creating, it was also creating five bad ones. And that terrible for the entire service, which could easily be end up being characterized as "site filled with %#%%!" ;) In the end, Grupper made the cancellation process personal, by forcing people to call up and announce themselves their change. That dropped cancellation rates 90%

One might argue that this is just the case of a social site, and it can't be applied elsewhere. But the point is understanding how your users are actually using your software (application, site, anything), what they expected to do and what they thought they got from the result. For example, consider a search form in a database with 40 category choices. Presenting all 40 options to the user sounds like the way to go. But if 60% your data is in 5 of the options, this means that user will start clicking on options and mostly get few results. This instantly is a bad experience, blamed on the system ("I tried it but I got no results. The system is broken"). Obviously, there should be a better way for the interface to allow the user to get the data he was looking for.

In the end, it's good to remember that it's not you that is using the software, it's the user. ;)

Read Grupper's article here http://bit.ly/GEPjuv (found via +Guy Kawasaki)
Somewhat related video: George Constanza on "It's Not You, It's Me" :) http://bit.ly/GCBZTs

Google+: View post on Google+

Responsive design strategies

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

Full read: +Luke Wroblewski's article "Multi-Device Layout Patterns" at http://bit.ly/xo77F7

Google+: Reshared 1 times
Google+: View post on Google+

Glyphs, Icons, Pictograms, Free!

I've been a long time user of the famfamfam.com icon library but recently I've been looking for something fresh. Here are some very nice choices for your icon greed :)

Entypo by +Daniel Bruce
Over 100 icons in EPS or as OpenType font. Free with attribution (you can donate, 50% goes to wikipedia)
http://bit.ly/wEuNiE

+GLYPHICONS by +Jan Kovařík
350 icons in 16x16 PNG. Free with attribution (royalty free options available with additional AI, PSD files)
http://bit.ly/xKQ1Dw

Fugue by +Yusuke Kamiyamane
A very large icon (16x16 PNG) collection with a total of 3.346 variations! Source files provided as well. Free with attribution (royalty free option available)
http://bit.ly/w5AWz3

Enjoy! :)

In album 2012-03-12 (3 photos)

Entypo

Google+: View post on Google+

It's an upside down world

I know you like maps on signs so I put a QR code on your sign to open up a map...

Someone please explain the rationale for placing a huge QR code on a sign on the space where you would normally put a map, and then having the QR code be a link to the map (if you happen to have a proper device to handle it). And of course placing driving directions aligned centered :)

This distorted view that everything is better done digitally doesn't end there. Yesterday, finally the big the news came: there is now an app so that you can knock on people's door with an SMS http://bit.ly/AmVWe8

At some point we need to see that some things can also be done physically ;)

Google+: View post on Google+

Responsive design wireframing

The #responsivedesign concept is quickly becoming a must-have item in any new web design project. But while the miracle of "code once, run everywhere" is upon us, some challenges are ahead for the designer. Suddenly, it's not one #wireframe , but three or four (for each #layout of the website). And while there may be some tricks to make the process easier, you might not have the best result in each device/resolution case.

Leigh Howells explores the situation on boagworld http://bit.ly/yFyZx4

Google+: View post on Google+

iOS 1986

Awesome retro iOS icons by Anton Repponen http://bit.ly/xq0RJj

Google+: View post on Google+

Can you convince me in 5 seconds?

Value proposition is the #1 thing that determines whether people will bother reading more about your product or hit the back button. It’s also the main thing you need to test – if you get it right, it will be a huge boost. If I could give you only one piece of conversion advice , “test your value proposition” would be it.

The full article: Useful Value Proposition Examples (and How to Create a Good One) at ConversionXL http://bit.ly/zoS2HF

Google+: View post on Google+

How to Design User Flow

Getting visitors to your site is one thing. But once they are there, you need to provide an exciting/useful/engaging/you-name-it experience if you are going to have results.

The good folks at conversionXL.com have a very thorough post on how to guide your visitors to the desired action (whatever that may be: sale, quote form, support information, etc). The article include actual examples on getting started with the described concepts.

Check the full thing at http://bit.ly/A5BbnO

Google+: View post on Google+

Testing your responsive design

So you're following the latest trends in #web development and have decided to develop your new site with a #responsive design. You quickly realize that's kind of hard testing the site on multiple resolutions every time you make a change.
+matt kersley has a nice solution: http://bit.ly/ycYno9
A simple setup with iframes will show the same URL is four different resolutions.

Of course this doesn't fully replace testing on actual machines (and their specific browsers) but it will certainly speed up the initial development time.

If you want to host it locally, you can grab the html/js on GitHub http://bit.ly/xu39c5

Google+: Reshared 1 times
Google+: View post on Google+

Amazing Cisco

What kind of mind decides that a "contact support" form should have a 128-characters limit? That said, when there is an issue with an account and it gets disabled, what kind of mind decides "let's not send an e-mail to the customer about it, he'll figure it out next time he tries to use our service!"?
#CustomerSupportFail #UIFail :)

[Update] So 24 hours later, #Cisco support has contacted me once, to tell me that my request was bumped from one department (technical support) to another (client manager)... Awesome...

Google+: View post on Google+

Building a website in 2012?

If you are planning on developing a new website, here as some concepts (some old, some new) on how to go at it:

- Think responsively - Even if you’re not implementing a full responsive design, simply thinking in responsive terms goes a long way to achieving usable universal design.
- Think touch-first - A button sized for a fingertip will always work for a mouse cursor. But a button sized for a mouse cursor will often be too small for a fingertip. Designing for touch first ensures that your website or application translates well to other contexts.
- Think universally - "Test early, test often” the saying goes. In your design process, think early and often about how your design will function on various devices.
- Think mobile-first - Starting your design with mobile focuses you on what really matters to your users. By maintaining focus on the essential features, achieving a consistent experience across devices will be much easier.
- Be careful with interaction behavior that is not supported universally across interfaces. Hover states don’t function the same on touch devices. Touch gestures can’t be performed with a mouse. It doesn’t mean we can’t use these things, but we have to be aware of their limitations.
Full article: Designing The Well-Tempered Web by Rob Flaherty at Smashing Magazine http://bit.ly/y4w9M5

See also mediqueri.es http://bit.ly/xHP8oe an excellent directory of responsive-designed sites.

Google+: View post on Google+

Advancing the HTML experience

www.mycookingdiary.com by +Mike Matas is great example of what you can do (and how to do it properly) with #HTML and #CSS today:
- A continuous user experience using AJAX to keep the user engaged. However, each "slide" has it's own URL. This means you can bookmark it, share it, etc.
- Animation - but on user action: Yes, animations can liven up a site. But it should be controllable by the user otherwise they end up being irritating. The user needs to feel he is in control of his experience of your site
- Flexible layout: the site looks great at 800px as well as 1200px
- CSS effects to enhance the visual result: #CSS3 blur is here used to bring the attention to the main content area not as a gimmick
- Keyboard navigation: a small issue for some but shows attention to detail and professionalism

Do you have any more example sites along these lines?

Google+: View post on Google+

Creating an effective company/product presentation

An excellent post by +Guy Kawasaki on presenting your company and product. Extremely long but really analytical!

Read on...

Reshared post from +Guy Kawasaki

(Mon01) Welcome to the first in a series of posts I’ll be doing as part of a partnership with Microsoft and Office Web Apps. Over the next two weeks, I’ll cover everything a budding entrepreneur needs to turn an idea into an enchanting investment opportunity—from the perfect pitch to a killer business plan to financial forecasts.

I’m going to start with a little dissertation on creating effective PowerPoint pitches for your company. I embedded the sample deck for you to click through by using the PowerPoint Web App. When you’re ready to get started, you can download the deck from my public SkyDrive folder and use it as the starting point for your own perfect pitch. Enjoy!

To cut to the chase, there are two extremes in online dating: eHarmony and Hot Or Not. When you use the former, you provide the data along twenty-nine dimensions to find your soul mate. When you use the latter, you look at a picture and decide if the person is “hot or not” in a few seconds.

When it comes to PowerPoint pitches for your company, think Hot Or Not, not eHarmony.

End. Of. Discussion.

This post and PowerPoint outline will enable you to succeed in the real world of presentations to potential investors. Mind you, very few investors will tell you what you’re about to read—that’s because it’s much easier to smile and say, “That’s interesting” than to tell you the truth. First, some background information for you:

You do not present in a vacuum. There were pitches before you. There will be pitches after you. (Just like there are pictures of people looking for dates before and after you.) You need to look hot in a river of bright, shiny objects.

The scintillating adjectives that you think apply to your business are tired and worn out—”patent-pending,” “revolutionary,” “innovative,” “scalable.” Been there, heard that. Four times. Today. Just like people who describe themselves as “bright,” “outgoing,” and “warm” on dating sites.

Think of two airplanes: 747 and F18. A 747 lumbers down the runway and takes one to two miles to get off the ground. A F18 catapults off an aircraft carrier and reaches 165 mph in two seconds on a 270-foot deck—or falls into the ocean. Guess which plane you’re in when you are making a pitch.

The best-case outcome of pitch is not a request for wiring instructions. There is a much more modest goal: rising above the noise and avoiding elimination. You want to “live another day” and get to the next stage: due diligence.

--------------
Download the PowerPoint slides here:

http://bit.ly/yz9m5O
--------------

Slide #1: Title page. This slide should be visible as people walk into the room. Its purpose is to orient people so that they know who you are. From the start, you need to look more professional than you are, so spend a few bucks on a decent logo. Include your contact information on this slide—God forbid that an investor is interested in your company and has to search for how to get in touch.

Slide #2. Overview. This slide is the so-called “elevator pitch”—thirty seconds to explain what you do in a clear, if not “wow,” manner. For example, “Manufacture solar panels that are 2 x as efficient at 1/10th the cost.” In many pitches, fifteen minutes goes by, and I still don’t know what the company does. But I have heard that you are a proven team with a proven technology in a proven market.

Here’s a power tip for wowing people: Tell your audience (if it’s true) that you’re already doing $100,000/month, you’re adding 1,000 users a day, or you’re in beta tests with five Fortune 500 companies. In other words, you have proof that the dogs are eating the food. The longer you can bootstrap without raising money, the more powerful your pitch.

Slide #3. Problem/Opportunity. The purpose of this slide is to cause your audience to salivate when they hear about either the pain that you relieve or the opportunity that you enable people to tap. Note: this is about your customer’s pain or opportunity, not yours. Your opportunity is a derivative of what you do for your customers.

Rookie entrepreneurs cite a bull shiitake study from a market-research firm that proves that the opportunity is big. Something along these lines: according to Jupiter Research, there are 300 million Americans, one in four owns a dog, therefore there are 75 million dogs, each dog eats two cans of dog food per day, therefore there is a 150 million can per day total addressable market—how hard can it be to sell 1% or 1.5 million cans per day?

Make this slide work by either addressing a problem/opportunity that is intuitively obvious (for example, “people who want to listen to music”) or, if the market size isn’t obvious, discussing a case study or scenario (for example, “the person who runs social media for Virgin America needs to monitor Twitter, Facebook, LinkedIn, and now Google Plus”). The goal is to enable the audience to fantasize about how great the market is, not for you to prove it using high-order mathematics.

Slide 4: Unfair Advantage. By now, the mouths of your audience should be watering because they understand what you do, they’re wowed by the potential, and now they need to start to believe that you can take advantage of this green and fertile pasture. They want to know, “Why you?” “What is your competitive advantage?” “Why is the field tilted in your direction?”

Stuff that won’t work: “We really believe in what we’re doing.” As opposed to the five other teams that the audience met today that don’t believe in what they’re doing? “We have a patent.” So you have years of time and millions of dollars to litigate? “We have the first mover advantage.” There are probably ten other teams as far along as you are, pitching just up the street. “We are smart and work hard.” Unlike that other five teams the audience met today? Get real: this isn’t elementary school where trying hard is enough to get by.

Stuff that will work: You were the vice president of sales for CNN, so you know all the buyers of the major brands. You ran industrial design for Apple. You have a PhD in materials science from Stanford. You implemented social media for Starbucks. Your audience wants to believe—just give them a rational reason to do so that is beyond “we’re hardworking folks who really believe in what we are doing.”

What if you didn’t work for Yahoo, Apple, or Starbucks, or you don’t have a PhD (or any degree) from Stanford? Then you do what all great entrepreneurs are good at: take your best and brief shot with competitive advantages, admit that you don’t have a “perfect, world-class team” to deflect objections, and move quickly to a demo that makes heads explode.

Slide 5: Demo. This really isn’t a slide. It’s where you dive into a demo that lasts approximately ten minutes. What if your product isn’t at a stage to do a demo? Then you are pitching too early, and you’re wasting people’s time. Of course some technologies are easier to demo than others. If you have a novel architecture for a nuclear reactor, you are probably going to be limited to compelling graphics.

There are three questions that you can answer in a demo: what, how, and why. Don’t waste time on “why.” You should have answered this already with your Overview and Problem/Opportunity slides.

You need to focus on “what” and “how.” Whether you emphasize “what” versus “how” depends on your product. Generally, if you do something that’s never (or seldom) been done before, then focus on “what.” If you do something that has been done before, but you do it much easier, faster, or cheaper, then focus on “how”

Slide 6: Sales and Marketing. Let’s say that people are salivating so much after your demo that they’re choking on their spit. Now you have to answer the question, “In a world of TVs, telephones, websites, blogs, social media, and smartphones, how are you going to roll out your product and ‘make a dent in the universe?’”

Again, investors want to believe—you just have to give them something believable. What’s not believable? “We’ll use viral marketing.” Viral marketing isn’t a strategy—it’s at best a goal, not a means to a goal. And the single greatest determinant of viral marketing is luck, so saying that your strategy is viral marketing is the equivalent of saying that your strategy is “to get lucky.”

What is believable? Your established contacts with the buyers of large companies—that is, circling back to the Unfair Advantages slide. Investors love it when they hear that you have already lined up brand name, referenceable customers or partners. Other believable means: an email database that your founders have compiled throughout their careers, a successful pitch to SXSW for a panel, 50,000 Twitter followers, and 50,000 Google Plus followers.

What if you have none of these? That’s why they are called unfair advantages. Life’s tough—you just have to be willing to grind results out. If everyone had them, the field was level, and everyone was created equal, then they would be called fair advantages, which is an oxymoron.

Slide 7: Competition. Most entrepreneurs put up a slide that says that there is no competition or that the competition is feeble. The problem with the former is that that lack of competition indicates that you are either addressing a market that doesn’t exist or you don’t know how to search the internet.

The problem with the latter is that the competition probably isn’t feeble if you’re going after a meaningful market. And your competition’s competition slide probably says you’re feeble, but I digress.

You want competition. It shows, though it doesn’t necessarily “prove,” that the market is attractive. Your task with this slide is to show how and why you can beat the competition—that is, what you can do that it can’t. You also want to provide information about your weaknesses vis-à-vis the competitions. There are three reasons to do this.

First, it shows that you know how to use the internet, and you’ve done your research about the capabilities of the competition. Second, it shows that you’re intellectually honest—or at least not delusional. Third, if you tell people what you cannot do, they’ll believe you when you tell them what you can do.

Slide 8: Business Model. Investors are not your friends or your soul mates, so they want to know how you’ll make money—and therefore how you’ll make them money. The key to this slide is simplicity: show that you rely on simple, proven business models, not a new technique that has never been done before. These kinds of business models include sales, licensing, advertising, sponsorship, affiliate fees, digital bling, and upgrades to additional features and services.

Pick one or two and stick with them until you need to try another one or two. Many entrepreneurs throw up (in more ways than one) multiple models because they think several revenue streams will make investors believe that the company is more attractive. However, it’s far better to have one business model that prints money than several that don’t.

In fact, you could purposely exclude an obvious additional revenue stream. Then when an investor has an aha! moment and shows off his brilliant business strategy mind by mentioning it, you could flatter him by adding it to your plans and exclaim, “Wow, this is why we need a seasoned investor like you.” Then, theoretically, the brilliant investor has a psychic investment in your success.

Slide 9: Forecast. I hate this slide because everyone knows that you’ve made up numbers that are big enough to interest people but small enough to prevent them from laughing out loud. (I see a pitch a week that conservatively forecasts the fastest sales ramp up in the history of man.)

Alas, you need to include this slide to communicate the rationale behind your fabrications. My advice is that you make your first year sales $0 because your product will be a year late and make your fifth year sales $75-$100 million if you want to raise venture capital. (History has shown that your actual results will be 10% of your most conservative forecast.)

You should concentrate on the reasonableness of the assumptions behind your business model and forecast. Business models vary, but think along these lines: Are you going to do more business than Apple, Amazon, and Cisco achieved in their first five years? Because the likelihood of this is smaller than the odds that I’ll play in the NHL.

Do you need roughly the population of India to make your model work? Are you assuming advertising CPMs that are 20x typical advertising rates? Do you predict that more than .5% of the people who see your ads click on them? Do you require more than 1% conversion rate from free to paid use of your service?

The first two rows of the forecast are windows into the soul of your company because it reveals how many customers and employees you need. If you need an ungodly high number of customers to make your sales numbers, you’ll discourage investors. If you need an unrealistically low number of customers, investors will think you’re clueless.

Ditto for employees: if you need a lot, something is wrong—or maybe your business isn’t scalable. If you hardly need any, then investors, again, will think you’re clueless. It is a wicked web that you must weave to make investors truly believe.

Slide 10: Team. This the infamous team slide. You may wonder why it’s not earlier in the pitch. After all, you’ve heard and read that investors invest in teams, not simply products, services, or markets. The problem is that at the point of investment, it’s hard to truly “know” that a team is good. If this was possible, then investors would only back good teams, and every investment would pan out.

The fact is that your team isn’t proven or complete—this is why you’re raising money. If you were Steve Jobs, John Chambers, Steve Case, Larry Ellison, Howard Schultz, Jeff Bezos, or Bill Gates, you (a) wouldn’t need outside money and (b) you could simply make one or two phone calls to get it. You certainly wouldn’t be reading about how to make a good PowerPoint pitch.

The most likely case is that you can show that your backgrounds are relevant to the market that you’re serving and the technology that’s necessary to build. For example, it’s a stretch to think that a bunch of friends from Home Depot are going to find the cure for cancer. But it is believable that they could create a DIY advice site sponsored by Home Depot with ads from Orchard Supply with a freemium model that requires membership to receive answers to questions.

Don’t let this depress you. The people who founded the great tech successes—Apple, Microsoft, Facebook, Cisco, YouTube, and so on—were hardly proven entrepreneurs. In fact, you could make the case that these companies represent unproven teams in unproven markets with unproven technology. In other words, they were zero for three according to what “professional” investors say they are looking for.

This is why the Demo slide is earlier in the presentation than the Team slide. A mind-blowing demo makes up for a lot of shortcomings and objections. I’d rather see a great demo than a great presentation. Ideally, you’ll have both.

Slide 11: Status and Milestones. The purpose of this slide is to “tie a bow on the present.” You recap where you are in terms of delivery of your product or service, how customers are reacting to it and what the next major milestones are. A word about milestones: these are events that are so big that you’d call your spouse up to tell him/her that it occurred. For example, printed stationary isn’t a milestone. A milestone is an event such as shipping, first sale to a customer, website launch, or profitability.

Conclusion

What happens next? The best case is that the investors start due diligence—that is, checking your references, talking to the customers that you said loved what you’re doing, and investigating the current state of your market. All you want at this point is to get on the investor’s “short list” of deals he or she wants to follow up on.

However, believe it or not, it’s hard to tell when you are turned down. For this reason, I will translate investor speak for you. When the investor says, “Come back when you have a lead investor,” “Come back when you’ve built out your team,” or “Come back when you have some sales traction,” it means that she’s saying, “No.” When the investor says, “Let’s start due diligence,” it means “maybe.”

So now you have it: all you need to know to make an enchanting presentation to potential investors.

One last word: most companies have the same general challenges to overcome, and this guide is intended to cover those. But each company has its own unique combination of challenges that represent the critical priorities of that company. For an electronic medical records company the key issues are different than for a mobile game company.

Make sure that you put the emphasis on the most important issues for your company, rather than giving equal weight to everything. One of the most important assessments investors will make about you is whether or not you really understand your business and whether or not you know how to prioritize. You don’t want to look like someone who is just filling out a template.

With that in mind, download my PowerPoint presentation from SkyDrive to get started right away:

http://bit.ly/yz9m5O

Onward and upward!

Promotional consideration paid by Microsoft.

Meeting Room with White Screen Ready for a Presentation

Google+: Reshared 1 times
Google+: View post on Google+

Searching for a font, Part II

After my first attempt, I thought it was time for a small visual update on the site.

The previous choice: Ubuntu

The alternative: Adelle Bold by TypeTogether (you can get the font via Font Squirrel)

Current choice: Franchise Bold by Derek Weathersbee (free download, donations accepted)


The last choice also lead to some minor layout changes to fit the sharing buttons better and give more space to the main content area. Runner-ups (also free downloads, considered but not tried): Luxi Sans and Hattori Hanzo.

Your thoughts? :)

LEGO 404 page

Very nice #404 image by LEGO :)
(via +Sebastian Schmidt)

I think I'll start a collection! What's your favorite 404 page?

Reshared post from +Daniel Waisberg

Greatest 404 page I have ever seen!
Had to be from LEGO...

Google+: View post on Google+

How to build a brand identity

Excellent comment by #xkcd :)

Google+: View post on Google+

Introducing... the MacPhone in 1984

Follow the link to see concept work done by Hartmut Esslinger, designer of the Apple IIc. Among them, a design for a future (for 1984) phone in co-operation with AT&T.

http://fudder.de/artikel/2007/07/17/origin-of-the-iphone/artikel/

[Update] see also: Appledesign: The Work of the Apple Industrial Design Group
http://www.amazon.com/Appledesign-Apple-Industrial-Design-Group/dp/1888001259
(thanks +Charis Tsevis)
[Update] the book mentioned above is rare to find (Amazon sells it used for $500), but here is an excellent source on the issue with information and photos copied from the book http://liquidpubs.com/blog/2010/11/08/apple-their-tablet-computer-history/

Google+: View post on Google+