Touch Target Sizes People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Ok, so how big? In the iPhone Human Interface Guidelines, Apple recommends a minimum target size of 44 pixels wide 44 pixels tall. Since physical pixel size can vary by screen density, Apple's pixel specifications apply best to the iPhone's 320 by 480 pixel, 3.5 inch display (164ppi). Since the release of the iPhone 4's Retina Display (326ppi) Apple has updated these specs to points instead of pixels. In the Windows Phone UI Design and Interaction Guide (PDF), Microsoft goes further and suggests: a recommended touch target size of 9mm/34px; a minimum touch target size of 7mm/26px; a minimum spacing between elements of 2mm/8px; and the visual size of a UI control to be 60-100% of the touch target size. Know of any other resources for touch target sizes?
iPad Usage Survey Results Freebie iPhone 5 PSD iOS 6 Mockup Collection Our iPhone 5 Cover Actions are a faithful recreation of Apple’s newest Retina display iPhone. These Action will render your 2D artwork, UI/UX workflow designs or wireframes onto a hi-resolution 300DPI glossy 3D product shot that you can freely place into your website, office presentation or marketing campaign. Each Action is approximately 300KB in size, but don’t let this small digital footprint fool you. Each Action in this set will give you a fully layered PSD file @ 300DPI and a resolution of 1150×1860. Allow us to render your mobile app and impress your clients, we have all the popular angles for the new iPhone 5 so we guarantee that your product will look consistent across all angles and positions. Our Cover Action mockups include black and white colours. All iPhones are rendered at the same resolution allowing you to create unique compositions and layouts. iPhone 5 PSD Mockups Thunderbolt Display Macbook Pro iPad 2 and iPad 3
Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution
Why 90% of Startups Fail [INFOGRAPHIC] There's a hot new startup in the limelight more often than not — but the cold truth is 90% of technology startups fail. Even companies which make it big out of the gate often lose momentum and shift from a potential powerhouse to a thing of the past. A new inforgraphic from Allmand Law analyzes the successes and failures of well-known tech startups from Zynga and Shopkick to AirTime and MySpace, helping us understand why some companies fall short. "The successful startups seem to be flexible enough to shift with changes in the tech climate," an Allmand Law spokesperson told Mashable. "Whereas with the failed startups, some fail due to a lack of vision and others have terrible timing. Ultimately, there is a lack of foresight which might have saved their companies." Check out the infographic below for a deeper look at some of the industry's biggest success stories — and their not so lucky counterparts. Why do you think some startups succeed while others fail? and Allmand Law
Our 50 Favorite Web Development Resources from 2012 Let’s keep it simple: last year, we did a roundup of 50 of the most useful web development resources. Today, we bring to you the 2012 edition, but only better. And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on. This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011. CSS Frameworks Base Framework Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. Bourbon Neat Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Kube CSS Framework The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. RWD Grid
alooma - modern data plumbing 11 Apps and Services for Sharing, Discovering and Organizing Music The Trendsetter Tech Series is supported by smart. Test drive the space saving, eco-friendly, totally unique, smart. Visit smartusa.com to find a new smart center near you. smart — unbig. uncar. The digital music revolution might have started in the late 1990s, but in the last few years, the way that we find, share and organize music has undergone drastic changes. Users are no longer reliant on file-sharing services to distribute tracks from person to person or device to device. Still, it can be difficult to differentiate one service or app from the next. Streaming Services Music streaming services are a dime a dozen — and depending on where you live, the differences between one subscription streaming service and the next is difficult to gauge. This is especially true now that companies like MOG and Rdio have followed in Spotify's footsteps, offering users free access to streaming music libraries on their computers. MOG — MOG might only be available in the U.S. Cloud Services and Apps
How to Make Your Site Look Half-Decent in Half an Hour Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional. I am a programmer. But although I am a programmer, I want to make my sites look attractive. For a very long time after I became a programmer, I was scared of design. But a little while ago, I decided to do my best to hack what it took to make my own projects look vaguely attractive. If I hadn’t figured out some basic design shortcuts, it’s unlikely that a weekend hack of mine would have ended up on page three of the Daily Mail. So, if you are a developer, my Christmas present to you is this: my own collection of hacks that, used rightly, can make your personal programming projects look professional, quickly. One thing to note about these tips, though. With that, on to the tools… 1. If you’re not already using Bootstrap, start now. 2. We are going to customize this Bootstrap example page. 3. 4. Bang: 5.
How to design for thumbs in the Era of Huge Screens - Scott Hurff After years of resistance, Apple’s iPhone 6 announcement last week officially signaled the Dawn of the Era of Huge Screens. And it’s going to crash into existence in a big way. Just this Monday, Apple announced that they’d sold over four million pre-orders for the phones the opening night of pre-orders. In only one night, they sold almost half of what they sold the entire opening weekend last year for iPhone 5s and 5c. So it’s looking like the 3.5” and 4” screens of yore will start their inevitable decline very quickly. The decline is already in motion. That means that learning how to design for thumbs is now more important than ever. Apple’s changes will make our lives easier as smaller screen sizes die off. If not, the future is going to be pretty painful for those thumbs. This is especially important for those of us who’ve only been building iOS apps. Apple's TV ad entitled "Thumb" from 2012. Designing for Thumbs? What does it mean to design for thumbs? But this gets complicated.