background preloader

UI Guidelines for mobile and tablet web app design

UI Guidelines for mobile and tablet web app design
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too. Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app. More tips on mobile web design on the Programming the Mobile Web book. Do you know any other UI Guideline? Tags: android, bada, design, ipad, iphone, nokia, sony ericsson, symbian, ui, windows Related:  Mobile

Effective Design for Multiple Screen Sizes So you’re a designer and have been tasked with the design of a mobile web site. Chances are, unless you’re designing for only one device you’re quickly going to be faced with a common problem experienced by designers who work with mobile devices; figuring out what screen size to actually design for. For instance: The iPhone is 320 pixels wide by 480 pixels high.Many Nokia N-Series devices are 240 pixels wide by 320 pixels high.Newer devices often support a landscape mode where the width and height are spontaneously reversed.Older (yet still popular) Nokia devices have displays ranging from 176 by 208 pixels up to 352 by 416 pixels.Blackberry screen resolutions range anywhere from 160 x 160 pixels all the way up to 324 x 352 pixels. This article is intended to help you develop effective design strategies to target a diverse range of mobile devices and screen sizes. Expect and manage diversity But wait, things may not be as bad as they first appear. The ‘Problem With Pixels’

Increase your headache by hiring a mobile app developer based on low cost « Suhel Khan's Blog I have been on both side of the fence in mobile app development, as a vendor providing services and as a client buying services from mobile app development companies. I have faced the heat from my clients for quoting high prices and I have given endless lectures to my vendors for the same. Point is high prices are not always “high prices”, it might actually be the right price to pay to get a great app. But the problem starts when we get trapped with a low cost vendor who promises you everything and delivers a shoddy application which even your kid will laugh at. I remember a old conversation with a client from Sweden, here is an excerpt from it :- Client: What on earth you were smoking when you did the estimation? Exactly, same thing happened with me, I burned my money, precious time and almost decided to abandon the project before somebody rescued me out of it. Cheers!! Like this: Like Loading...

A List Apart: Articles: Pocket-Sized Design: Taking Your Website to the Small Screen Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling. The Opera browser runs on handheld devices of all screen sizes and resolutions, some of them only 120 pixels wide. We work for the company that produces Opera, so we can offer a degree of insight into the functions of Opera for handhelds. In this article, we’ve prepared a set of general suggestions for creating a handheld-friendly style sheet, along with a few Opera-specific pointers that you may find useful. The Constraints#section1 The main limitation of a handheld device is the small screen, which may also lack a mechanism for horizontal scrolling. Now, what do these limitations imply for the designer? Scaling it Down#section2 <!

Redesigning a Site For Mobile: What's Involved? Home : Articles : Redesigning a Site For Mobile: What's Involved? Article by Simon Meek | Published on 17 June 2011 Categories: This article shows how you might redesign an existing site for mobile, using (what else?) the Elated site for inspiration. We'll see how the process of paring down features can produce a clean and elegant mobile design. Recently, Matt Doyle here at Elated published an excellent piece called 10 Ways the Mobile Web is Different. Here's how the site currently looks on my phone: Elated.com on my iPhone. There are clearly things that we need to change to make it work on mobile. Approaching a mobile web design For me, the process of working through a mobile website design is one of simplification and reducing the feature set to the bare minimum. On the visual side, the design challenge when presenting a mobile site is to produce a usable design which finds "space" in such a small area. Features: What goes, what stays? Articles & tutorials. Forums is a tricky one. @bamme

Welcome to dotMobi | dotMobi How Mobile Phones Are Repairing India's Broken Healthcare System Though India officially calls healthcare a right for all citizens, doctor and staff absenteeism from public medical facilities prevents many citizens from accessing their legally-entitled care. Now, one non-profit has created a system that uses mobile phones to check up on healthcare workers' attendance. The Indo-Deutch Project Management Society (IDPMS) tracks SMS messages reporting staff absences sent by local patients, and maps the regions and facilities where absenteeism is prevalent. These maps are then made available to locals and policymakers. "Technology presents great potential to influence the flow of information," says Oscar Abello, senior program associate at the Results for Development Institute, which created the IDPMS video. "Information used to be spread by the country or the state. IDPMS works in southern India's state of Karnataka, and focuses on bringing accountability to rural services provided by the government.

Fennec M9 (user experience alpha) for Maemo release notes This is an early developer release of the mobile version of Firefox, for testing purposes only, intended to: get wider community feedback on our approach to the user experienceengage Mozilla community teams, including localizers, add-on developers, and testersget feedback from Web developers The focus of development so far has been on building a new user interface that reflects Firefox's design principles, and adds touch screen support and other features that are appropriate for mobile phones and other handheld devices. We plan to do further alpha releases which focus on performance, including projects like TraceMonkey, speculative parsing, and many Fennec and Gecko optimizations. But in the meantime, we feel it is important to make this early release available to continue to grow the community and gather feedback as early as possible in the development process. Quick start Don't have an N810? What's in this version? Easy navigation to Web content: Web content: Security: Also: Installing Fennec

Mobile-friendly: The mobile web optimization guide - Opera Developer Community By Bruce Lawson Updated April 2012 to modernise references, eg "will be supported in IE9" and to change the default assumed width in Opera Mobile from 850 to 980 pixels. Contents Introduction If I had a Euro for everyone who asks me at conferences how they can mobilise their web site, I'd be extraordinarily rich as well as breathtakingly handsome. It's easy to see why people wish to make their sites mobile friendly; Gartner research suggests that by 2013, mobile phones will overtake PCs as the most common Web access device worldwide. Many customers are already using mobile devices as their main method of Web access, particularly in emerging markets — the July 2009 Statistical Report on Internet Development in China states that the proportion of [people] accessing the Internet by mobile increased enormously from 39.5% in late 2008 to 46% in June 2009, while the proportion of using desktops and laptops decreased. The difficulties of cross-device design You must remember this…

Related: