Design Archives

If you haven’t noticed yet within your apps, the login screen for Facebook Connect has updated to feel more “iPhone friendly,” and Facebook has dropped this idea of “connecting” as a result.

Additionally, there are many cues in the new UX which assume an experienced Facebook user, which seems like a shift in Facebook’s approach for their API.


Facebook Connect side-by-side

Facebook Connect side-by-side comparison


Notable changes include:

  • Removed all “Connect” language in favor of “Login”
  • Simplifies language overall, which assumes experienced user
  • Title “Connect to Facebook to “Facebook Login”
  • Removed description of what Facebook Connect is for
  • Remove visual cue that helps users understand the purpose of the screen
  • Removed Facebook terms/conditions fine print
  • Removed “Cancel” button
  • Asks for either your email or your phone number
  • Increases size of user input fields




Japanese electronics-giant Sharp recently unveiled an LCD touchscreen that displays 3D images without requiring special glasses. Sharp identified mobile phones as a potential outlet for this technology, and this week announced the first 3D camera to be used in mobile devices.

In a press release, Sharp explained how its 3D technology works:

“3D images are composed of two views taken using two cameras that simultaneously capture separate images for the right and left eyes. Consequently, a 3D camera requires peripheral circuitry to apply image processing to the two images, for example, to adjust color or to correct positioning between the images from the two cameras.”

The glasses used to view 3D images have lenses with colored filters. This creates the illusion of something popping off the screen known as parallax. The left and right eyes see separate images because of the apparent displacement of an object as seen from two different points.

The reason 3D technology did not successfully gain widespread use in the 1970s was because technologists failed to create a 3D user experience without the need for funky glasses. In order for parallax to work without glasses on mobile, viewers will hold a mobile device 12 inches (30 centimeters) in front of their face – approximately the same distance a mobile phone is typically held.

Sharp plans to ship the cameras as soon as July, and will begin mass-producing the product this year. Could we be on the verge of capturing and presenting eye-catching 3D images and video with our mobile phones? It’s an exciting prospect.

How will 3D content change our mobile experience?

Three-dimensional imaging technologies are changing the way we experience media, first in movie theaters, now in our homes, and soon in our hands. If 3D cameras become standard in our mobile devices, a wave of new content would contribute to the refinement of the technology.

Here are five ways we’d like to see 3D cameras and imaging for mobile applications:

1. Games. (Did we hear someone say Nintendo 3DS?)

2. Data charts and interactive surveys. Information architecture in 3D would be amazing.

3. Product previews for smaller items like jewelry could change the way we pop the question.

4. 3D profile pictures and video chat.

5. Navigation and maps with pop-up landmarks to guide viewers along.

What are some of your ideas for 3D imaging in mobile applications? Tell us what you’re thinking in the comments section.


We’re excited about the Mobile University event that’s being put on by the Heartland Mobile Council. The one-day Chicago event promises to address the importance of a long-term strategic approach to mobile marketing, as well as demonstrate how to integrate mobile into your business.

Here’s a description of the event by the Heartland Mobile Council:

“Mobile University 101 is the interactive one day educational event that will address the importance of a long-term strategic approach to mobile within your business. Whether you’re interested in creating a mobile marketing campaign, or understanding the various kinds of rapidly evolving mobile technologies, Mobile University is the place to get started with a mobile strategy, and begin to leverage mobility to improve your bottom line.”

There are going to be some great educational topics covered at the event, and both Ryan and I will be leading a break-out session focused on different ways to successfully integrate mobile within an overall marketing strategy.

Pre-registration tickets for the event are $99 and can be purchased here.

If you’re interested in reading the official release for the event, click here.


The Business Insider has posted an article titled How To Hire A Great iPhone Developer and it features a few quotes from our creative director, Ryan Unger. It’s a good read with some valuable insight, so feel free to give it a look.


Mobile Web DesignA one-size-fits-all approach to solving problems rarely seems to work in the real world, and the mobile Web is no different.

Up to this point, most mobile sites have been developed by re-hashing traditional Web content and squeezing it onto the small screen—an unfortunate “Mini-Me” approach to mobile Web design. The result? While the traditional Web becomes more useful and creative every day, the significance of the mobile Web has largely stalled. The mobile Web has yet to realize its awesome potential, and the problem isn’t a technology issue like you may be already thinking. The problem is design, or rather, a lack thereof, within the mobile medium.

1. The Mobile Web is Not the Little Sister of the Traditional Web.

What makes a mobile site so different?

It’s not the screen size—it’s the intent of the user. Very often, traditional Web users browse the Web for entertainment or to kill time. Even when traditional users need to perform work-related tasks, they are easily sidetracked by Twitter, YouTube, or any of the thousands of social networking sites.

Mobile users, on the other hand, typically browse the mobile Web when they are in need of specific information. These experiences tend to be much shorter than they are on the traditional Web, and users rarely browse for entertainment purposes. Let’s just be honest with ourselves—if a user could be in front of a computer, that’s where he or she would be.

Suppose that you were offered a chance to view a new Red Hot Chili Peppers music video on your phone. Would you actually navigate to the video and watch it, when you could just as easily view it on a speedy home computer? Re-purposing traditional Web content and stuffing it into a mobile browser is a recipe for disaster. Instead, it’s time to look at the mobile Web as a uniquely distinctive medium.

2. Give People What They Want, When They Want It.

All mobile Web users across the globe want the same thing: the ability, at any time, to easily access any information.

What this means for mobile Web designers and developers, is that first and foremost, we need to approach mobile Web sites as an information-architecture problem, and NOT as a technology problem. Mobile Web sites should be formatted in a way that allows users to easily navigate and make decisions. Users don’t want to dig through the clutter of a traditional Web site to find the tiny link they were looking for.

Companies that merely ensure their existing Web site is viewable on mobile phones, have, for the most part, wasted their time and money. This is primarily because this type of mobile Web site will likely be hard to navigate through, or be terrible looking. All too often, users get frustrated when they can’t find the content they are looking for. This fact is exactly why wireless carrier “decks” exist.

3. Build Unique Mobile Content, or Don’t Bother Building Anything at All.

Mobile is a unique medium and it should be designed with this idea in mind. If you are not willing to rewrite, modify, or create custom mobile content, then don’t bother creating a mobile site in the first place.

This point is best illustrated by an example:

A university could easily mobilize its existing Web content to create a mobile Web site, but do freshman really need to be able to schedule classes from their phone when they are lost in the Quad? The answer should be, obviously, no.

Wouldn’t the university mobile site be more effective if it was limited to custom information that is relevant for on-the-go students—such as mobile maps, a one-click phone number directory and faculty office hours? The answer is yes.

4. Make It Useable. Make It Useable. Make It Useable.

Mobile Web sites MUST always work on every phone. Period.

What this means is that mobile Web designers need to consider multiple screen sizes, as well as multiple technologies. A mobile Web site should dynamically transcode content such as forms, images, videos, ringtones and layouts, so that any user, with any phone, can enjoy a seamless browsing experience. Users should never have to tell a mobile site what kind of phone they have—it should already know.

Consider that for the traditional Web, designers and developers need to account for differences between Internet Explorer, Safari, Firefox, Opera, screen sizes, color depth, Flash versions, and more. Why would mobile be any different?

5. Don’t Forget About Design. Seriously.

Mobile Web surfers are still consumers, and consumers are deeply impacted by design. Don’t believe this? Allow us to introduce you to a fine company called Apple.

Because the concern at the forefront of people’s minds has been technology, brands and agencies often neglect the importance of design in the mobile space. It is almost assumed that because the mobile Web has to work on every mobile device, it can’t also look great. We couldn’t disagree with this mindset more.

When a mobile marketing firm approaches a mobile Web design project, it should design a series of visual layouts for a client that illustrate how the mobile site will look on a variety of different devices. For example, our firm refines a selected visual design concept into a WML layout (old school WAP 1.0), an XHTML-MP (WAP 2.0) layout at several different screen sizes, and (when possible) an iPhone-specific layout. The goal here is to ensure that no matter what phone is viewing the content, it will look its absolute best.

In Summary:

1. Think about the mobile Web in a new way. Get creative.
2. Clear and concise information-architecture specific to mobile is an absolute must.
3. Create compelling mobile content or don’t bother at all.
4. Mobile sites have to work—always. No ifs, ands, or buts.
5. It’s called mobile Web DESIGN. Not mobile Web cram-it-on-the-screen.

About Punchkick Interactive

Punchkick Interactive is America’s first design firm to focus exclusively on full-service mobile marketing. The firm specializes in creating text-message campaigns, mobile games, Flash Lite content, branded mobile Web sites, custom BREW and Java ME applications, iPhone apps, mobile media distribution systems, Bluetooth proximity marketing campaigns, and more. For additional information about mobile marketing visit http://www.punchkickinteractive.com or call (800) 549-4104.


College@Home created a list of 50 useful iPhone tips for librarians and researchers, and it actually brought up a few points directly related to mobile marketing…

2. Creating a texting service for patron questions. Giving patrons the option of texting in their questions to the library can make it easy for those who prefer to avoid telephone conversations the ability to get quick and easy answers to simple questions, and if librarians within your library are using iPhones they can respond to questions in between checking in or shelving materials and other tasks.

5. Check how your site looks on an iPhone. Many sites don’t quite translate well to mobile devices like the iPhone. Check how your library’s webpage looks by using an online tool like iPhoney or by checking it yourself on an iPhone.

7. Optimize your site for mobile devices. If you’ve checked out how your site looks on an iPhone and the result is not so great, consider creating a special page for mobile users to access your site. Many libraries are already doing so to maximize the usability of their webpages by patrons.

18. Track requests. You can use your iPhone as an easy way to alert patrons that their requests have arrived whether by phone, email or text and you can record and keep track of these requests as well.

23. Create content that’s easy to browse over an iPhone. If you’ve decided to develop a version of your site that’s more easily compatible with mobile phones, consider scaling it down the the basics. Simple search tools and information will be easiest to browse on the go.

Get the full list here


I just stumbled across a great game on ilovetypography.com called The Rather Difficult Font Game. If you’re a fellow typophile, you should check it out. And, should you have the hardware, there is also an iPhone version to play with as well.

Font Game


20+ Tools For Working With Colors
Sometimes all you need to get inspired to build a site is picking a color scheme, or even if you get stuck later in development you need some color help. Mashable.com has gathered 20+ tools for helping the “color challanged” designers.
Source: Mashable

The Analog Cellphone Timeline
Source: Gizmodo

Hide an Image in HTML — Reveal it by Highlighting Text with your Mouse
Source: BoingBoing
p.s. This is really cool.

14 Hidden Hotel Fees to Avoid
Source: Fodors

Hottest Google Search Terms for February 18:
1. patricide
2. ziggs
3. dancing with the stars
4. alex cambert
5. dan cortese
6. kit carson
7. my dad is better than your dad
8. ziggs.com
9. marlee matlin
10. juicy campus


Cameron Moll has just finished and released his book, Mobile Web Design.

Much has been written about mobile devices. Plenty has been written about developing websites for the so-called “standards era” of the web. However, little has been written about the two colliding. This resource aims to fill that void.

As a reviewer of the book, and more specifically the Flash Lite section, I have had a chance to read through the entire book and it is really a great piece of writing. It is certainly not written for the mobile Web expert, but rather, it speaks perfectly to anyone in a position to develop for, manage, or give advice regarding your organizations foray into a web strategy for mobile devices.

PDF copies can be purchased for $19. Well worth it for anyone interested in the mobile space. You can also download a preview sample.
Mobile Web Design


These are just fun to look at (although it hurts your eyes after a while). Keep in mind that these are NOT animated. The movement that you see is simply your peripheral vision playing tricks on you.

Rotating snakes
Rotating snakes

Rollers
Rollers

Rotations
Rotations

Vibrations
Vibrations

Checkered heat
Checkered heat waves


Brand Experience

Pearson
intel
Allstate
Liquid Wrench
Qualcomm
ups
ASPCA
Motel 6

Punchkick Interactive in the news

Punchkick Interactive Launches Full-Featured Mobile-Web Site for ASPCA
—March 8, 2010,

CHICAGO, IL (March 08, 2010)—Punchkick Interactive®, a Chicago-based mobile marketing company, today announced the launch of the mobile Web site for the ASPCA® (The American Society for the Prevention of Cruelty to Animals®).

Zend / OOP PHP Developer
—January 5, 2012,

Your role as a PHP Developer includes the responsibility to develop large-scale web sites and mobile Web applications.