<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Teehan+Lax &#187; Mobile</title>
	<atom:link href="http://www.teehanlax.com/blog/category/mobile/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.teehanlax.com</link>
	<description>We define and design custom experiences in the digital channel</description>
	<lastBuildDate>Fri, 20 Jan 2012 16:51:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>No screen left behind: Creating a digital experience for multiple devices</title>
		<link>http://www.teehanlax.com/blog/no-screen-left-behind-creating-a-digital-experience-for-multiple-devices/</link>
		<comments>http://www.teehanlax.com/blog/no-screen-left-behind-creating-a-digital-experience-for-multiple-devices/#comments</comments>
		<pubDate>Wed, 18 Jan 2012 14:38:56 +0000</pubDate>
		<dc:creator>Christina Truong</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/?post_type=blog&#038;p=7891</guid>
		<description><![CDATA[When creating a web site for multiple screens and devices, many options need to be explored to determine how to create the best web experience...]]></description>
			<content:encoded><![CDATA[<p>When creating a web site for multiple screens and devices, many options need to be explored to determine how to create the best web experience while maintaining a consistent and optimal user experience. With the variety of devices used to view the web already, from phones and desktop computers, to netbooks and tablets, this list will only continue to grow.</p>
<h3>With so many options, how do you decide?</h3>
<p>The speed of technological developments introduces new devices into the market very frequently.   While this can be exciting, new capabilities bring new ways to interact with the user, which can make it more difficult to target all the variations.  No two projects are ever the same so it often boils down to which options are right for the current needs.</p>
<p>With a recent project here at Teehan+Lax, we decided to start the discussion using a simple visualization and listed different options to examine the pros and cons for each alternative.  It was helpful to see how different selections could target the same devices to decide which option or combination of options would work better for the specific project.  </p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/dev-options.jpg" alt="" title="dev-options" width="580" height="353" class="aligncenter size-full wp-image-7895" /></p>
<h3>Mobile vs. Desktop</h3>
<p>When designing for multiple screens, determining a starting point is key.  From there, the design can be scaled up or down, adapting the design and flow accordingly.  For many years, the 960 grid was sufficient for targeting the most common resolution sizes. However, with the exponential increase in the use of the web on mobile devices, is it better to approach a mobile first strategy?  </p>
<p>There are vast differences in the amount of space available for mobile browsing versus desktop browsing; starting with mobile first forces you to decide what&#8217;s most important and can therefore impact the design and content strategy greatly.</p>
<p>When thinking beyond the desktop, another consideration for mobile should include whether to add enhancements such as touch gestures.  Although, if touch navigation is available, there should also be an alternate call to action such as a button or link in the event that the touch actions are not immediately discoverable by all users. For example, Twitter&#8217;s mobile site for the iPad uses a two-column layout that gives the option of swiping the second column to the left to close it; alternatively you can use the back button.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/twitter.jpg" alt="" title="twitter" width="600" height="469" class="aligncenter size-full wp-image-7903" /></p>
<h3>Responsive Web Design vs. Mobile Web Site</h3>
<p>With the introduction of Ethan Marcotte&#8217;s <a href="http://www.alistapart.com/articles/responsive-web-design/" target="_blank">responsive web design</a> approach, there&#8217;s been a flurry of excitement around the idea that one website could target multiple screens.  Fluid websites are nothing new but with the introduction of CSS3 media queries, one site can now adapt gracefully between different resolution sizes and respond accordingly to the context being viewed by the user.  Fluid grid designs also allow for a consistent multi-screen experience while maintaining one codebase.</p>
<p>While responsive web design is a great alternative to creating a separate desktop and mobile site, it&#8217;s not simply about changing fonts and images to fit smaller or larger screens.  This concept requires collaboration between designers and developers to determine how to redistribute the elements.  Content strategy is also important to determine how content is shifted or even removed based on how each device is used.  Even for a single website, upon the initial creation, three to five mockups will be needed to plan the layout for all the different target resolutions. Also, some additional work is required to ensure that older browsers that don&#8217;t support CSS3 will degrade gracefully.</p>
<p>A good resource to see responsive web design in action is <a href="http://mediaqueri.es" target="_blank">http://mediaqueri.es</a>.</p>
<p>The main drawback for creating a separate desktop and mobile site would be the need to maintain two sites&#8217; content and codebase.  However, this may still be the best option for content heavy sites that require more simplicity or a layout for mobile users that goes beyond shifting and scaling content. <a href="http://flickr.com" target="_blank">Flickr</a> is a great example of how the desktop site includes the whole kitchen sink while the mobile site simplifies the homepage to a basic search and login, while adding additional content in a tabbed structure.  Responsive web techniques wouldn&#8217;t be the right approach for developing a desktop and mobile design that&#8217;s so distinct such as this. </p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/flickr-desktop-mobile.jpg" alt="" title="Flickr desktop and mobile site" width="647" height="698" class="aligncenter size-full wp-image-7907" /></p>
<h3>Web app vs. native apps</h3>
<p>If you decide to go with a separate desktop and mobile site, there is yet another option to consider: Native apps or web apps?</p>
<p>Native apps are specific to the device and can access the phone’s resources such as the address book, geolocation, and camera. It also doesn’t need to be connected to the internet, although some features may require a connection. Also, it can gain visibility and be monetized through the phone’s marketplace. However, native apps are built in the specific programming language of the device (Objective-C for iPhones, Java for Android for example), which can make it expensive and time consuming to maintain and develop different apps for various devices in a variety of languages. Native apps also require third party approval by the phone’s store, and can be a long process and in some cases, the app does not get approved. </p>
<p>Web apps run in the phone’s browser under a subdomain, usually m.domain.com or mobile.domain.com. It’s built using standard HTML, CSS and JavaScript so developers can use their existing skills to build the site. Because of this, it’s accessible across devices and doesn’t require any downloads or updates which can result in a wider audience reach.  However, the phone&#8217;s resources cannot be accessed through a web app and requires connection to the internet.</p>
<p>A third option is to use a combination of the two, a hybrid mobile app.  A hybrid app is native, and must be downloaded from an app store or marketplace and runs from the device.  However, the application code can be written with HTML, CSS and JavaScript and embedded.  Frameworks like <a href="http://phonegap.com" target="_blank">PhoneGap</a> can be used to tap into the features accessible in a native app. This option can help bridge the gap between native and web apps.</p>
<h3>So what&#8217;s the verdict?</h3>
<p>Going through so many options may feel overwhelming and guess what? There are no right or wrong answers.  There are those who would argue that some techniques are better than others but it really boils down to target audience, target device usage, resources, time and budget.  Whatever the final strategy may be, one cannot assume that a multi-screen approach is a thing of the future. It is here, now.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/no-screen-left-behind-creating-a-digital-experience-for-multiple-devices/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Going down the right Path</title>
		<link>http://www.teehanlax.com/blog/going-down-the-right-path/</link>
		<comments>http://www.teehanlax.com/blog/going-down-the-right-path/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 19:27:31 +0000</pubDate>
		<dc:creator>Geoff Teehan</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/?post_type=blog&#038;p=7768</guid>
		<description><![CDATA[We don&#8217;t often write about products that we didn&#8217;t work on, but I came across Path last night and felt it was worth talking about....]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/path.jpg" alt="" title="path" width="700" height="350" class="alignnone size-full wp-image-7776" /></p>
<p>We don&#8217;t often write about products that we didn&#8217;t work on, but I came across <a href="http://path.com/" title="Path">Path</a> last night and felt it was worth talking about. Path has been around since November of last year. I only vaguely remember looking at it when it first launched, and I don&#8217;t even recall what it did &#8211; obviously a problem.</p>
<p>The new version, Path 2, is about capturing and sharing moments &#8211; they refer to it as a smart journal. It&#8217;s not Twitter, Foursquare, Instagram or Facebook (though it does feel like the timeline). It&#8217;s a bit more like Evernote in terms of what it does, but is more about what&#8217;s going on in your life. What struck me about this app though, and made me want to write about it, was the interaction design.</p>
<h3>Native vs Custom</h3>
<p>Until recently, I&#8217;ve felt most apps fall into one of two camps. They either use core elements of an OS or they&#8217;re comprised primarily of custom UI. Neither one of these approaches is wrong, though some argue that breaking conventions is a no-no. I typically argue that it&#8217;s okay to diverge from conventions so long as the experience is intuitive and polished. If it improves things, even better. Experiences that start with an overlay teaching people how to use the interface obviously miss the mark. Thankfully, we&#8217;re beginning to see UI designers start to find some balance in between these approaches &#8211; Path is an excellent example. It feels familiar, but they&#8217;ve made some smart decisions that break away from the norm without wandering off into obtuse interactions or under/over-designed visuals. <strong>The decisions they&#8217;ve made not only make things better, they add personalty and delight</strong> &#8211; something that is crucial, and often overlooked when designing something functional. There are a number of things I love about the work the team at Path have done but I want to point out a few on iOS. </p>
<h3>First impressions matter: first-run &#038; on-boarding</h3>
<p>Signing up for a service is typically a painful, or at least, mundane experience. It&#8217;s a few fields, some buttons and some useless directional copy. It works though. With the exception of a system error, no one struggles with these experiences. As designers, our tendency is to focus in on the meaty parts of a project and innovate. Something as trivial as a signup flow is considered a commodity and typically little to no effort goes into them. Path chose to improve it. The first-run simply lets you understand the value by looking at a canned &#8216;Path&#8217;. From there, you either create an account or use an existing one. No fields, no useless directional copy, just a few intuitive interactions. I love that form elements and actions are suppressed until I&#8217;ve chosen what I want to start with. This non-linear approach is refreshing. Once registered, the app also does a good job of connecting you with other people on Path (albeit without Twitter integration, though I&#8217;m told it&#8217;s coming soon). The number of screens below make make this appear like a long, drawn out process, but in reality you never notice it.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/First-run.png" alt="" title="First-run" width="700" height="497" class="alignnone size-full wp-image-7788" /><br />
<strong>Best part about this:</strong> I don&#8217;t have to type in my email or phone number, just pick the appropriate info that&#8217;s pulled from my address book.</p>
<h3> Navigation: Learned and explicit</h3>
<p>There are two things that are noteworthy here. One is how you access the menu. There is an explicit button that slides the current view to the right revealing the menu below (the Facebook app does this too). Additionally, Friends are accessed through a button on the right. What&#8217;s nice about this is that there&#8217;s what I call UI hinting going here. By animating the panels left and right I&#8217;m given a hint that I can likely swipe them to execute the same action. Relying solely on swipe isn&#8217;t quite learnable enough, and obviously we don&#8217;t want a UI instruction sheet. But only using buttons isn&#8217;t the right choice either since a gesture requires far less accuracy and is therefor a more efficient means of performing the same action.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/nav.png" alt="" title="nav" width="581" height="316" class="alignnone size-full wp-image-7789" /><br />
<strong>Best part about this:</strong> This isn&#8217;t a simple swipe then animate action. It&#8217;s a pan gesture. There is an enormous difference between these two methods. The former, makes things feel sluggish and disconnected, while the latter feels physical and natural.</p>
<h3>Prioritization: Information when needed</h3>
<p>One of the things that I love about small screen mobile design is that the <strong>physical size constraints force us to make hard decisions</strong>. What matters most in a given context is something that I&#8217;d love to see designers ask themselves more when working with larger displays. Striking a balance between what navigation and content I need to see at any given moment is what Path does right. The &#8216;post new&#8217; button suppresses the options into a delightful radial fly-out menu &#8211; I&#8217;m not inundated with options by default. The best example though, is how they&#8217;ve prioritized the content. Because a Path is timeline-based, the common tendency for most designers would be to have a time stamp in some elegant, faint grey text &#8211; just visible enough, but not to loud as to cause a distraction. What Path decided to do, and I agree, is to focus on the content of the post and de-prioritize the timestamp by making it appear when you begin scrolling the timeline. This removes clutter from the screen but allows you to see the information when needed. </p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/priority.png" alt="" title="priority" width="700" height="960" class="alignnone size-full wp-image-7799" /><br />
<strong>Best part about this:</strong> That Path realized the timestamp isn&#8217;t all that important by default. It is after all, a timeline, so you already understand some element of time without the stamp &#8211; i.e. the stuff at the top is recent.</p>
<p>Congratulations to the team at Path for re-inventing themselves. It&#8217;s an incredibly thoughtful interface and very interesting product &#8211; <a href="https://path.com/" title="You should try it">you should try it</a> if you haven&#8217;t already. </p>
<p>Most of you likely know that Color is also reinventing themselves. I hope they read this and recognize that they too need a transformation like this. This is the level of care and polish that will become the standard for everyone &#8211; startups and established businesses.</p>
<p>You can follow me on on Twitter <a href="http://twitter.com/#!/gt" title="@gt">@gt</a> and us <a href="http://twitter.com/#!/teehanlax" title="@teehanlax">@teehanlax.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/going-down-the-right-path/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>iOS 5 GUI PSD (iPhone 4S)</title>
		<link>http://www.teehanlax.com/blog/ios-5-gui-psd-iphone-4s/</link>
		<comments>http://www.teehanlax.com/blog/ios-5-gui-psd-iphone-4s/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 17:13:39 +0000</pubDate>
		<dc:creator>Geoff Teehan</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/?post_type=blog&#038;p=7703</guid>
		<description><![CDATA[Every time we create one of these files we notice just how much has changed. I&#8217;m not talking about the obvious stuff like iCloud, Siri...]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/iOS5-GUI-PSD-header.jpg" alt="" title="iOS5-GUI-PSD-header" width="700" height="350" class="alignnone size-full wp-image-7737" /></p>
<p>Every time we create one of these files we notice just how much has changed. I&#8217;m not talking about the obvious stuff like iCloud, Siri or Notifications. I&#8217;m talking about the small stuff. It&#8217;s an eye-opening experience looking this closely at what makes up an interface. </p>
<p>You don&#8217;t notice this level of detail on a micro level, but you&#8217;re aware of it on a macro one. When you pick up your phone to send a tweet or check an email you&#8217;re seeing hundreds of these details a second. Those details add up to make the experience what it is. It gets me thinking about the endless hours of debate and decisions that must have occurred around a seemingly meaningless change to the weight of a stroke, or the depth of a shadow. For the most part, I think these changes aren&#8217;t meaningless &#8211; they&#8217;re purposeful and intentional. Some of these changes make things more consistent, others make things more useable. There are however, a few that might leave you scratching your head.</p>
<p>One thing to be sure of here is that this OS is tighter from a design standpoint than its ever been before. Apple&#8217;s passion and attention to detail is something that every designer and developer needs to have. Without it, you&#8217;re simply not putting your best foot forward. Now, go make epic shit.</p>
<h3><a href="http://www.teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/ " title="Download the iOS 5 GUI PSD here.">Download the iOS 5 GUI PSD here</a></h3>
<hr />
<p><strong>Examples of changes between iOS 5 and 4:</strong></p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/dropshadow.jpg" alt="" title="dropshadow" width="700" height="178" class="size-full wp-image-7713" /><br />
<em>iOS5 introduces a white drop shadow to an inset table view cell (iOS5 on left, iOS4 right)</em></p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/SHIFT.jpg" alt="" title="SHIFT" width="512" height="273" class="alignnone size-full wp-image-7730" /><br />
<em>The stem of the shift symbol on the keyboard is shorter in iOS 5 (iOS5 on left, iOS4 right)</em></p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/carrier.jpg" alt="" title="carrier" width="700" height="191" class="alignnone size-full wp-image-7733" /><br />
<em>The carrier name now has a deep inset shadow in iOS5 (iOS5 on left, iOS4 right)</em></p>
<p>You can follow <a href="http://www.twitter.com/gt" target="_blank">Geoff</a> and <a href="http://www.twitter.com/teehanlax" target="_blank">Teehan+Lax</a> on Twitter.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/ios-5-gui-psd-iphone-4s/feed/</wfw:commentRss>
		<slash:comments>31</slash:comments>
		</item>
		<item>
		<title>Android 2.3.4 GUI PSD (High-Density)</title>
		<link>http://www.teehanlax.com/blog/android-2-3-4-gui-psd-high-density/</link>
		<comments>http://www.teehanlax.com/blog/android-2-3-4-gui-psd-high-density/#comments</comments>
		<pubDate>Wed, 27 Jul 2011 14:13:54 +0000</pubDate>
		<dc:creator>Peter Hui</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/?post_type=blog&#038;p=6929</guid>
		<description><![CDATA[Yes, we &#60;3 Android, too! One of the challenges of an ever-changing digital channel, is that we find ourselves spending more and more time designing...]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/android_2.3.4_post_main1.jpg" alt="" title="android_2.3.4_post_main" width="645" height="435" class="alignnone size-full wp-image-7041" /></p>
<h2>Yes, we &lt;3 Android, too!</h2>
<p>One of the challenges of an ever-changing digital channel, is that we find ourselves spending more and more time designing for various platforms and form factors. One such platform is Google Android. This doesn&#8217;t come as much of a surprise: a <a href="http://www.changewaveresearch.com/articles/2011/smart_phones_20110718.html" target="_blank">survey</a> conducted in June, 2011 found that among consumers who plan on buying a smartphone in the next 3 months, 32 percent prefer an Android-based smartphone. This is a significant increase from 3 percent just a year ago. Both brands and designers should take note of the rising popularity in Android-powered devices as consumers continue to embrace this platform.</p>
<p>To help improve our design workflow (and hopefully yours too) we made a fully vectorized Android GUI PSD. The template is based on the <a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank">most popular screen size (normal) and pixel-density (high)</a> using the default Android skin as the baseline. And as always, we’re sharing it with everyone at no charge. All we ask in return is a shout-out in the form of a tweet. The PSD requires the Droid Sans font which can be downloaded from <a href="http://www.fontsquirrel.com/fonts/Droid-Sans" target="_blank">Font Squirrel</a>.</p>
<h3><a href="http://www.teehanlax.com/downloads/android-gui-psd-high-density/">Download the Android 2.3.4 GUI PSD Here</a></h3>
<p>License: This file may ONLY be used for mocking up Android apps. No, it can’t be used in a theme to sell or go in ads for your new app or use it to build your Web site. It is a tool for designers, that is it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/android-2-3-4-gui-psd-high-density/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>Three things about mobile content</title>
		<link>http://www.teehanlax.com/blog/three-things-about-mobile-content/</link>
		<comments>http://www.teehanlax.com/blog/three-things-about-mobile-content/#comments</comments>
		<pubDate>Wed, 15 Jun 2011 13:49:24 +0000</pubDate>
		<dc:creator>Kim Lawless</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/?post_type=blog&#038;p=6388</guid>
		<description><![CDATA[Last week I joined the masses of content strategists, editors, marketers, and developers who met in Chicago for WebContent 2011: Going Mobile. In a variety of ways, all of the presenters asked the question ‘what does the shift to mobile mean for working with content?’ ]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/wp-content/uploads/mobilephoto31.jpg" alt="mobile" title="mobilephoto3" width="640" height="350" class="alignnone size-full wp-image-6432" /><br />
<h2>What does the evolution of mobile mean for the discipline of content strategy?</h2>
<p>Last week I joined the masses of content strategists, editors, marketers, and developers who met in Chicago for <a href="http://www.webcontent2011.com/">WebContent 2011: Going Mobile</a>. In a variety of ways, all of the presenters asked the question ‘what does the shift to mobile mean for working with content?’ – and attempted to answer it through discussions of user testing, social media marketing, message architecture, SEO, and the strategy and design process. Slides from <a href="http://www.slideshare.net/duoconsulting/presentations">most of the presentations</a> are now available. </p>
<p>Even with sessions covering this variety of topics, a few big themes emerged, and over the past week I’ve thinking about three main takeaways for content strategy. They’re not exclusive to mobile, but really reflect the growing need for user experiences to travel across platforms, and for content to go where it’s needed. </p>
<h3>Context</h3>
<p>This was definitely the big one, as mobile is making it clear that we need to understand and plan for a variety of different user contexts. Comscore&#8217;s <a href="http://www.webcontent2011.com/speakers/mark-donovan-comscore">Mark Donovan</a> was the first to bring this point up, asking how, when, why and where content is being consumed, and what other data is it being combined or mashed up with. In other words, with mobile, time, place, attention level, and the presence of other content sources create very different contexts through which users are accessing your content. While this has always been true, mobile has expanded the scope of possible contexts.</p>
<p><a href="http://about.me/RobertRose">Robert Rose</a> made context the main point of his presentation as well, looking at how ‘context aware everything’ shapes the kinds of experiences we can offer. Looking beyond time and place, he asked us to consider social and augmented reality, contextually-based security, management and delivery and personalized search results. </p>
<p>In her presentation on structuring editorial and messaging for mobile, <a href="http://appropriateinc.com/">Margot Bloomstein</a> made the point that users expect content and functionality to be specific to their particular situation at any given moment. She suggested that maintaining your brand and experience demands content strategy that ensures a clear ‘message architecture’ (a hierarchy of communication goals) that carries across contexts, and supports navigating between them.</p>
<p><a href="http://www.dopedata.com/">Erin Scime</a> and Jessica L’Esperance from <a href="http://www.hugeinc.com/">HUGE</a> talked about the differences between a web and mobile strategy for a major hotel chain. One major difference is telling multiple stories (web) vs. telling a single, focused story at a given moment (mobile). To make this happen, along with the functionality, the editorial structure had to change significantly. For example, for the mobile site, content that encouraged booking was prioritized, and the language became less marketing, more instructional.</p>
<h3>Flexibility</h3>
<p>In order to migrate to mobile, content needs to become more flexible (it can’t be tied to ‘pages’, for starters). For this transformation to happen, the ways in which we produce and manage content need to change. </p>
<p>What does this mean? <a href="http://karenmcgrane.com/">Karen McGrane</a> and <a href="http://www.lullabot.com/about/team/jeff-eaton">Jeff Eaton</a> attacked this question head-on, emphasizing that content needs to be structured with flexibility in mind, i.e.  structured for use and re-use across platforms. </p>
<p>They warned against merely thinking of creating a &#8216;mobile version&#8217; of your site or content, quoting <em>Responsive Web Design</em> author <a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>: “Fragmenting our content across different &#8216;device-optimized&#8217; experiences is a losing proposition, or at least an unsustainable one” – and pointing out that while responsive design solves at the design level, we need to do the same thing with content.</p>
<p>How to do this? Build for flexibility, not the latest trend. Separate of content from form and make content semantic. Transition to a content API. All of this helps build flexibility into your content so you can create once, publish everywhere.</p>
<h3>Agility &#038; cooperation</h3>
<p>Maybe it goes without saying that content strategists need to work closely with designers to create effective mobile experiences. This is true for all platforms, but on mobile, the boundaries between content, design and functionality get blurry, while tighter, more focused mobile experiences demand that they be seamlessly integrated.</p>
<p>Erin Scime and Jessica L’Esperance highlighted the close working relationship between the content strategists, designers and developers on their projects, and talked about shifting from a reliance on documentation to continuous communication. On their hotel project, Jessica, the designer was focused on user goals and tasks, features and functionality, and navigation and flow. Erin, the content strategist was focused on the content experience, business case, and content production and distribution. </p>
<p>Giving the example of designing the hotel chain&#8217;s mobile booking system, Jessica worked to optimize the booking flow while Erin prioritized content that would encourage booking. Clearly, this process had to happen in a highly collaborative work style. They kept their team for this project “lean and mean” and reminded us that “Mobile moves fast. Collaboration is essential.” </p>
<h3>A fourth thing: active content</h3>
<p>I’d like to add a fourth thing to this list of mobile content considerations—something that seemed to be missing at WebContent 2011, at least as a major area of focus.</p>
<p>What is different about mobile content? It&#8217;s easy to point out things like small screen sizes, different input modalities, and its consumption in an ever-growing number of contexts&#8230; but what is changing about the content itself? </p>
<p>One of the biggest shifts we&#8217;re starting to see is that mobile content is aspiring to become active. Both in substance and form, we now need to pay special attention to the ways in which users actively engage with, rather than passively consume content. In other words, content is finally, truly becoming something that&#8217;s interactive.</p>
<p>This is an opportunity and a challenge for content creators – to create content that inspires people to take action, to actually do stuff out in the world; and content, moreover, that is responsive to the actions they take. Recipes have a natural niche here. A number of sites and mobile apps <a href="http://itunes.apple.com/ca/app/how-to-cook-everything/id367690249?mt=8">are onto this</a>, and they allow users to create shopping lists, and break recipes down into navigable steps. Some go further in <a href="http://www.bigoven.com/">making content active</a>, allowing users to comment, modify, add photos, or favorite recipes. Content becomes a living thing that changes from one moment to the next.</p>
<p>Not all content is as obviously and neatly actionable as recipes are. But, knowing that users have become more active in their intentions around content gives us new things to consider as we produce content for mobile platforms and beyond. A major challenge for content strategy will be how to meet an active consumer who wants to take action, and how to make content that is truly suitable for the interactive medium. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/three-things-about-mobile-content/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Ideas that inspire T+L</title>
		<link>http://www.teehanlax.com/blog/ideas-that-inspire-tl-3/</link>
		<comments>http://www.teehanlax.com/blog/ideas-that-inspire-tl-3/#comments</comments>
		<pubDate>Thu, 14 Apr 2011 15:16:11 +0000</pubDate>
		<dc:creator>Laurel Cole</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/blog/?p=4629</guid>
		<description><![CDATA[TV: passive to active? Have our attention spans become so short that we cannot simply watch a TV show without posting our thoughts or looking...]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Screen-shot-2011-04-12-at-4.08.10-PM.png" alt="" title="Screen-shot-2011-04-12-at-4.08.10-PM" width="579" height="325" class="alignnone size-full wp-image-5232" /></p>
<h3>TV: passive to active? </h3>
<p>Have our attention spans become so short that we cannot simply watch a TV show without posting our thoughts or looking up info on our phones? It’s clear that advertisers and producers recognize this, as they’ve begun to weave digital campaigns and social media into TV programming. It’s possible that as TV and the digital world become more integrated, content will seamlessly be shared across platforms, and watching TV could become a more active participatory experience. A few brands such as <strong><a href="http://www.psfk.com/2011/02/iphone-interacts-with-new-honda-tv-ad.html" target="_blank">Honda</a></strong> and <strong><a href="http://www.youtube.com/watch?v=8vWVtpCfLX8" target="_blank">AXA</a> </strong>auto insurance have recently created commercials and implemented the use of mobile apps. The spots are well executed technically as content is transferred via QR code and sound-syncing technology. Despite the innovative approach, the importance of these types of ads is to take the user from viewing to product purchase.</p>
<p>In terms of TV programming, the <strong><a href="http://www.crunchgear.com/2011/02/06/how-does-ufcs-new-improved-internet-pay-per-view-stream-compare-to-the-real-thing/" target="_blank">UFC</a></strong> has begun streaming pay-per-view while simultaneously allowing users to interact on multiple platforms by tweeting, chatting and judging the fights. The service is quality programming and might be a look into what the future holds for TV and the Internet. This appears to work better than regular programming trying to incorporate social media, such as a live twitter stream during events and award shows. It seems that social networks are becoming a legitimate resource. <strong><a href="http://www.lostremote.com/2011/03/07/al-jazeera-to-launch-social-tv-show/" target="_blank">The Stream</a>,</strong> a news talk show is actually using social media as a basis; producers will script the broadcast using tweets, Facebook posts, and YouTube videos. Furthermore, major events have called for the use of specialized apps<strong> </strong>that offer complementary information. For instance, the <strong><a href="http://www.lostremote.com/2011/02/22/from-abc-to-twitter-the-battle-for-oscars-second-screen/" target="_blank">Oscar Backstage Pass</a> </strong>app<strong> </strong>this season<strong> </strong>gave an exclusive behind the scenes look into the awards show. The problem is that without proper integration of these apps and social media, viewing all the different screens becomes a challenge. It’s hard to tell if this activity will soon become normalized, or if people will always prefer to relax and enjoy TV.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Oscarapp.jpeg" alt="Oscar app" title="Oscar app" width="640" height="200" class="aligncenter size-full wp-image-5462" /></p>
<h3>Rewards can make an impression. Inspiration can ignite a movement.</h3>
<p>A great way to make a lasting impression is to deliver immediate gratification or offer some type of tangible reward. For example, <strong><a href="http://www.digitalbuzzblog.com/foursquare-check-in-activated-dog-treats/" target="_blank">GranetaPets</a>, </strong>a premium dog food in Germany,<strong> </strong>had key insight to stop dogs and owners when walking by their billboard. The company concealed actual dog food within the billboard; dogs were therefore attracted to it, as they have a heightened sense of smell. Owners that took notice were encouraged to check-in via Foursquare and once they did, a free bowl of dog food was dispensed.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Dog-food1.jpeg" alt="dog food" title="Dog food" width="640" height="252" class="aligncenter size-full wp-image-5464" /></p>
<p>Many great ideas involve the user and depend on them to participate in the making of a campaign. <strong><a href="http://www.coca-cola.com/music/en_US/24hrsession/html/Coke24hrs_PostEvent.html" target="_blank">Coca Cola’s</a></strong> latest crowdsourcing campaign got rock band Maroon 5 on board to create an original song in 24 hours with fans contributing to the song via Twitter. Fans were able to tweet lyrics and ideas as inspiration for the band. Once the track gets 100k downloads, Coke will make a donation on their fan’s behalf to the RAIN Foundation (Replenish Africa Initiative). This is not just a campaign, it’s a part of a bigger movement to help make the world a better place, with the ultimate goal of providing at least 2 million Africans with clean water by 2015. Many companies have made similar moves such as <strong><a href="http://www.refresheverything.com/index" target="_blank">Pepsi</a> </strong>with their <em>Refresh the World </em><em>project</em>, and <strong><a href="http://www.brewsomegood.ca/" target="_blank">Maxwell House</a></strong><a href="http://www.brewsomegood.ca/" target="_blank"><strong>’s</strong></a> <em>Brew some good</em> initiative. A successful campaign can usually create a movement when it’s inspiring, for the common good, and has a unique idea that is cohesive with the brand.</p>
<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Maroon5.jpg" alt="Maroon5" title="Maroon5" width="640" height="327" class="aligncenter size-full wp-image-5465" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/ideas-that-inspire-tl-3/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Can the mobile wallet beat the hype?</title>
		<link>http://www.teehanlax.com/blog/mobile-wallet/</link>
		<comments>http://www.teehanlax.com/blog/mobile-wallet/#comments</comments>
		<pubDate>Tue, 22 Mar 2011 12:30:58 +0000</pubDate>
		<dc:creator>Peter Horvath</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/blog/?p=4463</guid>
		<description><![CDATA[Depending on your level of involvement in the digital industry, you might not have heard of near field communication (NFC) or you’ve heard so much...]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Post-Mobile-Wallet.jpg" alt="Can the mobile wallet beat the hype?" title="Post-Mobile-Wallet" width="640" height="289" class="aligncenter size-full wp-image-5306" /></p>
<p>Depending on your level of involvement in the digital industry, you might not have heard of near field communication (NFC) or you’ve heard so much of it you’re starting to wonder if it’s all hype. NFC relies on an underlying technology that wirelessly identifies objects from a short distance through tags that are inserted into pretty much anything. The benefit of NFC over something you’re probably more familiar with like RFID, which is used in key fobs and current forms of electronic payment like <a href="http://www.paypass.com/">PayPass</a>, is that it can send and receive information two ways, where RFID is limited to sending information just one way.</p>
<p>This is a significant improvement over the existing technology because it&#8217;s inexpensive, offers an increased efficiency in configuration and pairing, provides instantaneous connection between devices, and it enables interactive advertising opportunities for merchants.</p>
<h3>The challenge for consumers</h3>
<p>The challenge for adoption is to make it significantly easier and more convenient to use than the typical way we do things already. To become fully accessible, it must permeate our everyday actions in the same way text messages and emails have done. <a href="http://www.sybase.com/detail?id=1091780">Marty Beard</a>, president of Sybase, strongly believes that “for mobile commerce to take off, industry stakeholders must harmonize their efforts in the same way that led to proliferation of SMS and MMS technologies.&#8221;</p>
<p>For consumers to see the value in using their mobile devices as a primary form of payment, it has to find an anchor in their lives and redefine the rituals of their everyday actions. To do this, the NFC forum has developed the three pillars for near field devices: sharing, pairing and paying. They believe that  these modes are where it can have the most impact in people&#8217;s lives.</p>
<blockquote><p>The challenge is finding the incentive for consumers to switch from swiping to waving.</p></blockquote>
<p>For example sharing, like <a href="http://bu.mp/">Bump</a> for iOS currently does, allowing you to exchange contact information on the fly. NFC can enable these interactions offline in a more convenient and instantaneous way. It also has the capacity to improve the pairing process between mobile devices and desktops. Imagine no more passwords, bluetooth pairing or router codes. This can all be stored on an NFC chip embedded in your device, and a single swipe is all it takes to verify your digital identity.</p>
<p>The most signifiant pillar is payment. Take <a href="https://squareup.com/">Square</a> for example: it enables merchants to accept payments virtually anywhere through mobile devices. The hardware they use to enable credit card swipes is a stopgap implementation—that&#8217;s why they&#8217;re actively giving Square dongles away for free. Their strategy is less about the hardware they use and more about the service they provide. I imagine that Square would readily adopt NFC-enabled devices when they become standardized and evolve their current hardware solution.</p>
<h3>The challenge for merchants</h3>
<p><a href="http://en.wikipedia.org/wiki/ISIS_(mobile_payment_system)">Isis</a>, a partnership between telecom juggernauts Verizon, AT&amp;T and T-Mobile, is actively developing the common standard for mobile payments that they hope will be eventually adopted by merchants. The challenge for merchants is putting faith into the added-value that these new systems can provide their customers, like coupons and loyalty programs.</p>
<p>Google has already integrated NFC support for Android 2.3 and is rumoured to be working with VeriFone to roll out point-of-sale solutions for merchants. Gingerbread users on the Nexus S, can start using <a href="http://nfc-taglet.com/index_e.html">Taglet</a> right now and take advantage of contactless information.</p>
<p>The rumour mill is undoubtedly churning around the iPhone 5 and if it will be enabled for mobile payments. Some believe that Apple is concerned about the lack of standards across the industry. Yet <a href="http://twitter.com/ewoyke/statuses/48504128854441984">others</a> claim they have sources who confirm that Apple is looking at ways of integrating NFC into the next-gen iPhone.</p>
<p>RIM is also working on their own mobile payment solution. &#8220;Many, if not most, of BlackBerry devices throughout the year will have NFC in them,&#8221;  said CEO, Jim Balsillie at a mobile conference last month.</p>
<p>Japan has been using RFID-enabled mobile devices for some time and they’re starting to adopt NFC more rapidly than the west. <a href="http://en.wikipedia.org/wiki/Mixi">Mixi</a>, Japan’s biggest social network, will be rolling out new features that enable checking in through near field devices. The advantage of this over something like foursquare, is that it will continue to work in areas where GPS and data signals are weak. But the most interesting implementation are objects embedded with tags that can be shared across their network. Imagine reading a booking or unwrapping a new product you&#8217;ve purchased, waving your mobile device over it and sharing it as a status update. This is attractive to merchants because they can embed promotional information into their products which can tie into digital campaigns that run on Mixi.</p>
<p>The merchant perspective is similar to Apples. They aren&#8217;t ready to adopt mobile payments and take on the risk of a potentially deprecated infrastructure. They&#8217;d prefer to wait for the industry to establish a common standard.</p>
<h3>The challenge for designers</h3>
<p>How NFC becomes adopted is an exercise for interaction and product designers. The idea that physical objects can talk to each other and exchange our personal information requires designers to have a deep understanding of the spatial dialogue in which they communicate. This is just a fancy way of saying that they need to know how things interact without touching. <a href="http://www.nearfield.org/">Timo Arnall</a> and <a href="http://www.nearfield.org/">Jack Schulze</a> from BERG, are actively engaged in design research, using prototypes, to experiment with the possibilities of near field devices. They&#8217;ve <a href="http://www.nearfield.org/2009/10/immaterials-the-ghost-in-the-field">visualized</a> what invisible radio waves look like when an NFC chip and reader are in proximity. They&#8217;ve been able to tease apart the <a href="http://www.nearfield.org/2009/09/nearness">nuances</a> in the simple interactions involved in waving your device over a reader.</p>
<h4>Possible use cases for the mobile wallet</h4>
<p><img class="alignnone size-full wp-image-4579" title="Use cases for mobile NFC" src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/nfcusecases1.png" alt="Use cases for mobile NFC" width="579" height="652" /><br />
<small>Source: NFC Forum</small></p>
<p>These are just some the possible use cases identified by the <a href="http://www.nfc-forum.org/">NFC forum</a>. The designer&#8217;s goals is to uncover the pleasurable and motivating factors for consumers to use their mobile devices for payment instead of more familiar and established mechanisms. Consumers are comfortable with swiping their cards and there&#8217;s nothing broken about it, so adopting a new technology for them is unnecessary. The challenge is finding the incentive for consumers to switch from swiping to waving.  As industry practices and consumer behaviour become adjusted to mobile devices as the primary mode for sharing information and digital identities, we&#8217;ll start to see an uptake in adoption. But the question remains as to just how quickly we&#8217;ll start to see heavy adoption of the mobile wallet in the near future.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/mobile-wallet/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>The Race to the Bottom for Native Apps</title>
		<link>http://www.teehanlax.com/blog/iospricing/</link>
		<comments>http://www.teehanlax.com/blog/iospricing/#comments</comments>
		<pubDate>Tue, 15 Mar 2011 12:30:05 +0000</pubDate>
		<dc:creator>Adam Schwabe</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/blog/?p=4062</guid>
		<description><![CDATA[Now that Apple&#8217;s iOS platform has had a few years to mature, it has become a major source of revenue for the company, having recently...]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/ivyfield/4731067716/"><img src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/iphonenativeapps.jpg" alt="" width="579" height="192" class="alignnone size-full wp-image-4442" /></a></p>
<p>Now that Apple&#8217;s iOS platform has had a few years to mature, it has become a major source of revenue for the company, having recently announced that they&#8217;ve <a href="http://www.lukew.com/ff/entry.asp?1275">paid out $2 Billion to developers.</a> But is that enough? There&#8217;s certainly amazing potential in terms of revenue for certain apps — those that have a wide appeal, can reach a global audience and are novel concepts. But unless you&#8217;ve got a blockbuster app <a href="http://www.joystiq.com/2011/03/14/angry-birds-downloads-soar-past-100-million-across-all-platforms/">like the wildly popular game &#8216;Angry Birds&#8217;</a>, the reality is that the practical costs of app design and development will probably outweigh the revenue potential for most developers.</p>
<p>There&#8217;s been a certain amount of novelty to being able to say your company &#8216;has an app&#8217;, but many have started to question how much it actually costs to create a native app. The most realistic estimate I&#8217;ve seen <a href="http://mashable.com/2011/02/24/mobile-app-dev-cost/">sits at around $30,000</a> for an entry-level app — iOS apps are quite sophisticated and, when executed well, require great care in design and development. For a $0.99 app, after Apple and the government takes their cut of each sale, you&#8217;ll end up with about $0.50 per app, so you&#8217;ll need to sell at least 60,000 copies just to break even. Want to also offer an Android or BlackBerry app as well? Some design use cases could possibly be reused, but expect around the same costs of development since the platforms don&#8217;t share any technological commonalities. </p>
<h3>App Pricing</h3>
<p><img src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/developercheque-579x261.jpg" alt="" width="579" height="261" class="alignnone size-medium wp-image-4428" /></p>
<p>The major impediment to having more app developers realizing a profit on their apps is the glass ceiling that exists in terms of app pricing. You can spend six months and write tens of thousands of lines of code paired with the most beautiful design assets, but ultimately you won&#8217;t be able to price your app for much more than the <a href="http://ax.search.itunes.apple.com/WebObjects/MZSearch.woa/wa/search?entity=software&amp;media=software&amp;page=1&amp;restrict=true&amp;startIndex=0&amp;term=fart">hundreds of fart apps</a> that took week and zero imagination to put together.</p>
<p>Why? Users are unwilling to spend more than a few dollars on apps because their perceived value is much lower than the actual value of the app. While people may not take much issue with paying $5 for a coffee, they&#8217;re unwilling to pay the same for an app that might bring them much more value. </p>
<p>The <a href="http://twitter.com/3rdparty/status/15779461769203713">value of a mobile app is intangible</a> unless it&#8217;s coming from a developer that the user trusts or has been recommended by their friends. Apple may boast that they have hundreds of thousands of apps available, but the fact of the matter is that the large majority of these apps are terrible. The end result of intangible goods in a saturated market is that developers are undercutting each other on price, trying to make up the difference in volume.</p>
<h3>Trials and Returns</h3>
<p><img src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/amazon_lookinside1.png" alt="" width="579" height="270" class="alignnone size-full wp-image-4413" /></p>
<p>Users have to take a pretty big gamble on buying an app today. Apple&#8217;s App Store offers nothing more than a text description and up to five screenshots of the app in action as a sample of its functionality. With rich interactions and experiences left completely up to the user&#8217;s imagination, Apple recommends developers create separate microsites that show off video of the app in action, like the <a href="http://campl.us/">demo site for the app Camera+</a> that provides video of the app in action and an overview of its features. The issue is that these are all hands-off demonstrations of the app in action — videos can&#8217;t convey the actual interactions a user will make and the resultant performance and experience of the app. These sites also burden developers with additional creation and maintenance costs.</p>
<p>One of the brilliant features of Google&#8217;s <a href="https://market.android.com/">Android Market</a> is that they allow users to get a full refund within 30 days of purchase. All they have to do is give the developer a reason, and Google automatically refunds the transaction. This allows users to buy an app, and keep it if they decide it provides value, or return it if it doesn&#8217;t. The developer in turn receives valuable feedback from unsatisfied customers. The end result (theoretically) is that valuable apps will rise to the top of the charts while those that don&#8217;t deliver on their promised functionality will have to go back to the drawing boards. Empowering the users in this way could allow developers could try to charge more for their apps since users won&#8217;t have to gamble on its value. Amazon&#8217;s &#8220;Look Inside&#8221; feature works in a very similar way, allowing users to immediately get a sense of value from intangible goods, mimicking a customer&#8217;s action of leafing through a book in a brick &amp; mortar store before purchase.</p>
<p>As Apple begins to think about <a href="http://arstechnica.com/apple/news/2011/02/apple-may-plan-to-move-software-off-its-retail-store-shelves.ars">removing software for sale from its retail stores</a>, they need to consider how they can improve the quality and value of their platform&#8217;s apps. They have a sophisticated DRM-equipped rental system already available for TV shows and movies that automatically deletes media from a user&#8217;s devices after a certain number of days, and there&#8217;s no reason why this couldn&#8217;t be applied to app trials as well. </p>
<h3>The Value of a Platform</h3>
<p>One would hope that Google and Apple could boast about the quality of experience that their apps deliver rather than merely the hundreds of thousands of apps sold.  As the native app market becomes more saturated, it&#8217;s becoming increasingly difficult for users to separate the good from the bad. For developers and companies assessing the mobile market, the cost of entry to native apps, as well as the fragmentation of devices available is forcing them to start to rethink their approach to mobile, with <a href="http://37signals.com/svn/posts/2761-launch-basecamp-mobile">many taking the Web app road</a>. Mobile web browsers continue to become more sophisticated to support much of the same functionality that native apps support today, making it difficult to justify investment in a single platform. </p>
<p>To ensure native mobile apps are a viable and attractive market to talented developers, Apple needs to take responsibility for the amount of value those developers are deriving from the platform.</p>
<p><strong>Update</strong>: Geoff points out that you can, in fact, <a href="http://www.knowyourmobile.com/features/408977/how_to_get_a_refund_from_the_itunes_app_store.html">return a purchased iOS app through iTunes</a>, but they sure don&#8217;t make it easy to find.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/iospricing/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>How to Design Pixel Perfect Photoshop Files for iOS Apps</title>
		<link>http://www.teehanlax.com/blog/how-to-design-pixel-perfect-photoshop-files-for-ios-apps/</link>
		<comments>http://www.teehanlax.com/blog/how-to-design-pixel-perfect-photoshop-files-for-ios-apps/#comments</comments>
		<pubDate>Fri, 04 Mar 2011 20:01:24 +0000</pubDate>
		<dc:creator>Geoff Teehan</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/blog/?p=4316</guid>
		<description><![CDATA[Here&#8217;s a quick Photoshop setup that helps us make better design decisions when designing for iOS devices. The primary thing to keep in mind here...]]></description>
			<content:encoded><![CDATA[<h2>Here&#8217;s a quick Photoshop setup that helps us make better design decisions when designing for iOS devices.</h2>
<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/Post-Perfect-Pixel.jpg" alt="How to Design Pixel Perfect Photoshop Files for iOS Apps" title="Post-Perfect-Pixel" width="640" height="500" class="aligncenter size-full wp-image-5327" /></p>
<p>The primary thing to keep in mind here is that designing for a device like an iPhone, especially one with a retina display, using only a computer monitor leads to a good deal of guess work due to the differences in pixel density. We hate unnecessary guess work. Sure, you can export flats and look at them on the end device but you&#8217;re probably not going to do that as often as you&#8217;d need to &#8211; and it&#8217;s a waste of time given that tools like <a href="http://zambetti.com/projects/liveview/">LiveView Screencaster</a> are available. It&#8217;s a free app (Nicholas, we&#8217;d gladly pay) that let&#8217;s you view your Photoshop canvas in real time on your iOS device. It&#8217;s the best addition to our toolkit since Photoshop added layers and multiple undos. </p>
<p><img src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/new-window-instance.jpg" alt="" title="new-window-instance" width="579" height="355" class="alignnone size-full wp-image-4318" /></p>
<p>Set up Photoshop with a new blank document (640&#215;960 in this case) and make a second instance of it (this is key). It&#8217;s done by selecting Window>Arrange>New Window for&#8230; in Photoshop. See the screenshot above for reference. Assuming you have 2 monitors, drag one of the instances over to the secondary monitor making sure the entire canvas is viewable at 100%. Leave the other instance on the main monitor. Get LiveView Screencaster running on both devices and line up the LiveView frame to fit perfectly over the canvas on the secondary monitor (use the arrow keys for fine-grain adjustments). You&#8217;ll now want to work solely off of the main monitor instance leaving the secondary one alone. This allows you to freely zoom or move the canvas as much as you want for pixel perfection, while simultaneously watching how your actions are affecting the design on the actual device at 100%. Without the second instance, any canvas movement or zooming is mirrored in the iPod, and that&#8217;s not a good thing.</p>
<h4>Here&#8217;s a quick snap of the sample set up:</h4>
<p><img src="http://www.teehanlax.com/blog/wp-content/uploads/2011/03/design-set-up.jpg" alt="" title="design-set-up" width="579" height="355" class="alignnone size-full wp-image-4317" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/how-to-design-pixel-perfect-photoshop-files-for-ios-apps/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
		<item>
		<title>Ideas that inspire T+L</title>
		<link>http://www.teehanlax.com/blog/ideas-that-inspire-tl-2/</link>
		<comments>http://www.teehanlax.com/blog/ideas-that-inspire-tl-2/#comments</comments>
		<pubDate>Mon, 14 Feb 2011 19:04:50 +0000</pubDate>
		<dc:creator>Laurel Cole</dc:creator>
		
		<guid isPermaLink="false">http://www.teehanlax.com/blog/?p=4206</guid>
		<description><![CDATA[Building on some industry trends we have previously noted, there are a few marketing ideas that have recently caught our attention. Useful campaigns Campaigns and...]]></description>
			<content:encoded><![CDATA[<p><img src="http://teehanlax.com.s3.amazonaws.com/roger/wp-content/uploads/lightbulb.jpg" alt="T+L ideas" title="lightbulb" width="640" height="360" class="alignnone size-full wp-image-5684" /><br />
Building on some industry trends we have previously noted, there are a few marketing ideas that have recently caught our attention.</p>
<h3>Useful campaigns</h3>
<p>Campaigns and apps that are inherently useful make a more impactful UX. Many campaigns have used augmented reality in their approach, but the <a href="http://www.macrumors.com/2010/12/17/word-lens-offers-real-time-ios-language-translation/" target="_blank">World Lens</a> app, is one of the most useful implementations that we’ve seen. The app for the iPhone and iPod Touch offers real time translation of text. You simply point your device&#8217;s video camera at a sign and the program translates and superimposes the translated text onto the video.</p>
<p>Another useful print ad for <a href="http://probablythebestadintheworld.be/" target="_blank">Carlsberg</a>, gives a step-by-step process for turning the ad into an actual bottle opener. Although, you might have missed its intention when flipping through a magazine.</p>
<h3>Retail marketing </h3>
<p>Shopping retail is becoming an increasingly more immersive and interactive experience. <a href="http://adage.com/article?article_id=147566" target="_blank">Puma</a> has recently implemented iPads for in-store use, and <a href="http://www.digitalbuzzblog.com/adidas-adiverse-virtual-footwear-wall/" target="_blank">Adidas</a> is using large LCD touch screens to help explore inventory and allow the user to build their own shoes and even checkout.</p>
<p><a href="http://www.fastcompany.com/1716684/whats-for-dinner-intel-and-kraft-can-help-with-that-video" target="_blank">Kraft</a> has been experimenting with facial recognition technology to hone in on targeted users. They put a kiosk in a grocery store that asked, “what’s for dinner?” The kiosk zooms in on the users face and instantly determines gender and age group to suggest products that might be appealing. It even goes one step further dispensing product samples like a vending machine. This type of marketing is great for point of purchase sales and is highly personalized. On the other hand, it’s possible the kiosk could identify the wrong gender or age altogether; hopefully, it won’t offend and mistake your Justin Bieber hairstyle for a little girl and suggest Teddy Grahams.</p>
<h3>Social media </h3>
<p>Many social media campaigns have encouraged themes of kindness and generosity, and have elements of planned spontaneity and tangible rewards.</p>
<p>A Dutch airline, <a href="http://www.facebook.com/KLM?v=app_6009294086">KLM Airlines</a> has used Foursquare as a platform and employed a ‘Surprise Team’ to give passengers personal, unexpected gifts at the airport. As soon as someone checked-in at a KLM Foursquare location, the Surprise Team went online to find out personal information about the person, and delivered a unique gift before they traveled. For instance, one traveler tweeted he would miss a PSV soccer game while he was in New York. The Surprise Team gave him a Lonely Planet guidebook of NYC with all the sports bars highlighted in blue.</p>
<p>Similarly,<strong> <a href="http://www.interflora.co.uk/" target="_blank"><span style="font-weight: normal">Interflora</span></a></strong><strong>, </strong>a flower delivery service launched a campaign to brighten up the lives of Twitter users. They monitored Twitter looking for users that they believed need cheering up. Once found, the users were sent a bouquet of flowers. Privacy had to be a big concern during the course of these campaigns, since they are largely focused on social monitoring. Hopefully all of the recipients were pleasantly surprised and didn’t become paranoid that Big Brother is always watching.</p>
<p><img class="aligncenter size-full wp-image-4234" src="http://www.teehanlax.com/blog/wp-content/uploads/2011/02/3.jpg" alt="" width="579" height="283" /></p>
<h3>Converging devices</h3>
<p>The most significant trend that we see evolving in the future is the convergence of mobile devices, computers and TV screens. The key is to understand how devices will interact, and how to seamlessly integrate the entire experience from one screen to another.</p>
<p>Through the use of a banner ad,<strong> <a href="http://www.digitalbuzzblog.com/gol-airlines-mobile-controlled-banner-game/" target="_blank"><span style="font-weight: normal">Gol Airlines</span></a></strong><strong> </strong>has turned the mobile phone into a remote control. Users input their mobile number into the banner, and they immediately get a call connecting them to the desktop. The banner then becomes a flying game controlled by the mobile device. The ad comes together in the end, reminding customers that they can conveniently check-in via mobile phone when they fly.</p>
<p>The<strong> </strong><a href="http://eu.techcrunch.com/2011/01/20/shazam-continues-to-invade-the-living-room-partners-with-cable-channel-syfy/" target="_blank">Shazam</a> app is evolving, as the logo will be ‘embedded’ into programs ready for users to tag TV shows. This entails using a mobile device to listen and recognize the TV episode in question. Shazam will then provide complementary info; links to exclusive video and previews of upcoming episodes, access to playlists from the series and downloads. This will completely integrate the web browsing and TV watching experience.</p>
<p><img class="aligncenter size-full wp-image-4235" src="http://www.teehanlax.com/blog/wp-content/uploads/2011/02/2.jpg" alt="" width="579" height="400" /></p>
<p>Check out other notable ideas:</p>
<ul>
<li><a href="http://www.thedailybeast.com/blogs-and-stories/2010-12-09/retail-and-digital-technology-what-the-future-holds-for-shopping/" target="_blank">E-paper</a></li>
<li><a href="http://abcnews.go.com/Technology/seasons-tweetings-great-twitter-secret-santa/story?id=12406068&amp;page=1" target="_blank">Twitter, Secret Santa</a></li>
<li><a href="http://optimalbranddevelopment.com/blog/heinekens-entrance-video-viral-supported-facebook/" target="_blank">Heineken, The Entrance</a></li>
<li><a href="http://gizmodo.com/5739679/san-francisco-gets-inter+bus-stop-multiplayer-gaming" target="_blank">Yahoo, Multiplayer Gaming</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.teehanlax.com/blog/ideas-that-inspire-tl-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

