Mobile, Touchscreen

HTML5 vs Native: The Mobile App Debate. Introduction Mobile apps and HTML5 are two of the hottest technologies right now, and there's plenty of overlap. Web apps run in mobile browsers and can also be re-packaged as native apps on the various mobile platforms. With the wide range of platforms to support, combined with the sheer power of mobile browsers, developers are turning to HTML5 as a "write one, run many" solution. But is it really viable? There are still compelling reasons to go native, and clearly, many developers are indeed going that route. Feature Richness Point: Native can do more We can divide mobile functionality into two dimensions: the experience of the app itself, and the way it hooks into the device's ecosystem, e.g. for Android, this would be features like widgets and notifications.

In terms of app experience, native apps can do more. It's more than the in-app experience though. Counterpoint: Native features can be augmented, and the web is catching up anyway Overall, mobile is evolving. Performance Conclusions. Best Collection of Mobile User Interface Patterns. By anthony on 05/10/11 at 11:30 am There are plenty of user interface pattern resources on the web.

But very few of them are for mobile interfaces. Here are excellent resources for mobile user interface patterns. These pattern libraries will show you different ways on how to tackle common interface components. A User-Centered Approach To Web Design For Mobile Devices - Smashing Magazine. Advertisement For the past few years, we’ve heard pundits declaring each year as “year of the mobile Web”; each year trying to sound more convincing than the previous.

Whether 2011 will be the real “year of the mobile” remains to be seen, but what is indisputable is the fact that the mobile usage of the Web is growing and evolving. As it evolves, so does the mobile user experience, driven by advances in mobile device technology — from better browsers on basic mobile phones (or feature phones — remember the Motorola RAZR?) To the increased adoption of smartphones and tablets. The term “Mobile Web” (although often criticized) is commonly used to describe accessing the internet using a mobile device. This definition is broad enough to cover everything from using a browser on a feature phone, to using highly customized apps on smartphones or tablets. The ongoing user-centered mobile design life cycle Let’s discuss each phase of this life cycle in more detail. 1. 2. 3. 4.

Simplify Navigation 5. Three Layers of Mobile User Experience. By Shanshan Ma Published: May 23, 2011 “When looking at what makes mobile user experiences successful, we should consider the multiple layers of a mobile user experience.” In comparison to traditional cell phones, smartphones do a much better job of letting users stay connected on the go. They have bigger screens and higher-resolution displays, and their industrial design is more fashionable. Common features of smartphones include, but are not limited to touchscreens, high-megapixel cameras, global positioning systems (GPSs), and many gaming and entertainment options. What’s driving the industry forward? The hardware user experience the operating system user experience the mobile application, or app, or mobile Web site user experience Figure 1—The three layers of mobile user experience Overview of the Three Layers “First Layer: Mobile device hardware—This layer of the mobile user experience comprises the hardware with which users directly interact….”

Figure 2—iOS user interface Conclusion. Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices.

UI Mobil Framework

Cactus Blog - 10 UX Tips For Your Mobile Checklist - E-commerce insights and strategies. Mobitest – Mobile Web Performance Tool. Lessons from mobile web design. Mobile development is all the rage, and the interactive industry is in great turmoil as countless tablets and smartphones come to market. Mobile app development gets most of the attention, while the mobile web somewhat quietly creeps along. But the mobile web is making progress every day as more and more developers launch mobile-optimized interfaces. The great thing about the mobile web is that it is fundamentally built with all of the same tools used in traditional web design and development. This makes it far more approachable than app development. Building websites optimized for mobile is so similar yet so different then designing for the desktop.

These same issues are ever present on the desktop but are sometimes easier to overlook. Simplified navigation on mobile websites One of the first things that becomes evident when digging into mobile websites is the extreme simplification of the navigation. So, what is the lesson to learn? This reflects a very task-oriented mentality. Optimizing a Screen for Mobile Use. Summary: A single mobile screen with almost no features still required 10 design changes to meet usability guidelines for mobile websites. During our recent Asia-Pacific tour, we took the opportunity to conduct several usability studies. Sometimes we tested regular websites to update seminars such as Fundamental Guidelines for Web Usability. But we spent more time on issues where we expected to find bigger regional differences, such as mobile usability and social user interfaces. One of the mobile sites we tested was AllKpop.com, which covers a topic of seemingly great fascination in many Asian countries: Korean pop stars.

AllKpop.com mobile site, as tested in Hong Kong. AllKpop does many things right: Most important of all, it supports a task that's perfect for mobile use : celebrity gossip. However, the site doesn't follow all the guidelines for mobile usability, so we decided to create an alternative design that did: Our proposed redesign of AllKpop's mobile homepage. Full Report. Index - 4ourth Mobile Design Pattern Library.

Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns. Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will have a base of knowledge to make up your own mind, and react to the always-changing mobile environment.

"Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Buy it from Amazon: Buy it direct from O'Reilly: Or, you can just read it right here on this wiki. Read in other languages Preface Designing Smartphone Interfaces The Patterns Additional Topics References. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers - Smashing Magazine. Designing For Android - Smashing Magazine. Mobile UI Patterns ? Splash Screens. Introduction to Widget Handset APIs in WAC 1.0. By Michał Jankowski Introduction In the brand new release of Opera Widgets Runtime for Android there are plenty of new exciting features, including support for the newly available Widget Handset APIs from the WAC initiative.

These provide widgets with a greater level of device access previously only available to native applications. Using these new APIs we can take pictures, check GPS location, browse our address books, access accelerometer information, and even send SMS, MMS and E-Mail messages! Where do I start? The best place to start is to look at the widgets demo provided by the Opera Widgets Team. There is also an another article available on this site, which takes you through building a complete functioning WAC Widget: Building a spirit level widget using WAC 1.0. Using available objects WAC talks about the use of <feature> elements, which are additional elements added to a config.xml file in order to provide information about what kind of APIs a widget wants to access. <? AudioPlayer. Building a spirit level widget using WAC 1.0. By Michał Borek Introduction The WAC initiative is a joint effort by mobile industry leaders to make mobile applications more interoperable across devices, easier for developers to create, and more powerful and useful for end users.

It includes a community website containing useful resources, and the WAC 1.0 specification. This specification includes requirement lists for phones wanting to be able to support the spec, links to the W3C widget specs that WAC 1.0 is based on, and perhaps most interestingly, the Widget Handset APIs. And this last feature is what this article is about. AccelerometerInfo, and the three phone axes Our spirit level tool uses the AccelerometerInfo API to obtain information about the phone's acceleration in three different axes (see also Figure 2): x: The right side of the phone y: The top side of the phone z: The front side of the phone Based on this three values you can calculate tilt in every direction. Building our Widget The config.xml file <?

Summary. Mobile compatibility tables. Page last changed today This series of compatibility tests is sponsored by Vodafone. On this page I give a quick overview of the mobile browser compatibility tests I’ve done so far. If you want the latest inside scoops on my mobile tests, follow me on Twitter. See also the CSS table. These tests are in no way complete. Essentially, you’re looking over my shoulder while I work. That’s fine, but don’t use these tables for serious decisions about the compatibility of your mobile apps yet. There’s a lot of incompleteness here; from the tests themselves down to the table grid.

Not all tests are done on the same phones and/or with the same browsers. Anyway, you see the problem: I just don’t quite know what a proper mobile test is, how to write it, or how to interpret the test results. Retest to make sure that there’s a difference between text-transform: uppercase and font-variant: small-caps. Nokia fires blur when cursor moves out of area of currently focused element. Test page. Touchscreen. Mobile Web Best Practices 1.0. [THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices. [CAPABILITIES] Exploit device capabilities to provide an enhanced user experience. [DEFICIENCIES] Take reasonable steps to work around deficient implementations.

[TESTING] Carry out testing on actual devices as well as emulators. [URIS] Keep the URIs of site entry points short. [NAVBAR] Provide only minimal navigation at the top of the page. [BALANCE] Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for. Les cartes des bonnes pratiques des applications Web mobiles. Épargnez le réseau Maîtriser les protocoles réseaux du Web permet de réduire la latence et de chasser le superflu. Compressez le contenu avant envoi Ajoutez une empreinte aux adresses Web pour une mise en cache efficace Mettez en cache les données AJAX Réduisez les ressources externes Minimisez taille des données et application Optimisez le nombre d’échanges réseau Modérez l’utilisation de cookies N’envoyez pas les cookies lorsque ce n’est pas nécessaire Evitez les redirections Haut ↑ Libérez les utilisateurs Les terminaux mobiles sont utilisés dans des contextes très différents.

Pour gagner la confiance des utilisateurs, informez-les et donnez-leur le contrôle. Informez l’utilisateur de la collecte et de l’usage d’informations personnelles Favorisez l’ouverture de session automatique Laissez le choix de l’interface aux utilisateurs Ne modifiez pas l’élément actif lorsqu’une section de la page est mise à jour dynamiquement Appliquez les principes du Web Soyez flexible. Mobile Web Application Best Practices. Abstract The goal of this document is to aid the development of rich and dynamic mobile Web applications. It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful.

Status of This Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at This is the W3C Recommendation of Mobile Web Application Best Practices. Since publication as a Proposed Recommendation on 21 October 2010, the Working Group clarified that alternative compression formats (such as EXI) referred to in section 3.4.1 Use Transfer Compression may not share some of the impediments of common compression formats. List of Best Practices 1 Introduction 1.1 Purpose of the Document 1.2 Audience 1.3 Scope.

Développement Web pour mobiles - iUI côté CSS. La toolbar de l'application correspond à la partie haute de chacune des fenêtres de l'application. Elle contient au centre le titre de la fenêtre, puis un éventuel bouton sur la partie gauche permettant de revenir à la fenêtre précédente. Cela correspond à une partie du code HTML de notre exemple test précédent : L'élément <h1>(dont l'id est obligatoirement pageTitle) contiendra le titre de la fenêtre actuellement affichée, tandis que l'élément <a> (dont l'id est obligatoirement backButton) contiendra un bouton permettant de revenir à la fenêtre précédente (si elle existe). La classe button associée à ce lien permet de lui donner par l'intermédiaire des CSS l'apparence d'un bouton. L'adresse du lien est indiquée par l'attribut href et celui-ci sera mis à jour automatiquement par le code JavaScript de iUI.

Chaque fenêtre affichée dans notre application sera en fait un <div> contenu dans la page HTML principale de notre application. TERMINOLOGIE : page ou fenêtre ? Sélectionnez. Iui - Project Hosting on Google Code. How the World Is Using Cellphones [INFOGRAPHIC] Wilson Electronics, Inc. sent us this interesting (rather large) infographic outlining the demographics of cellphone use (click for full version).

The infographic illustrates, among other things, the number of cellphones per capita in various countries, the rate of cellphone adoption in the U.S. during the past decade and the acceptability of certain behaviors regarding cellphone use. According to the infographic's sources, there are nearly two cellphones for every one person living in the United Arab Emirates (1.95 to be exact) and Estonia (1.94). By comparison, there are .87 cellphones per person in the U.S. China has the greatest number of cellphones within its borders (640,000,000), followed by the U.S. (270,000,000).

In addition, 15% of Americans take phone calls during sex, according to a survey (although 6% to 10% think it's acceptable, according to another survey), and three in 10 Americans used a cellphone in 1999, versus nine in 10 a decade later. [via Wilson Electronics] MobiForge. Effective Design for Multiple Screen Sizes. Mobile Web Design: Getting to the Point - Part I. Mobile Web Design: Getting to the Point - Part II. A Very Modern Mobile Switching Algorithm - Part I. A Very Modern Mobile Switching Algorithm - Part II.

MobiReady - dotMobi compliance & mobileOK checker. Designing for the iPhone 4's Retina display. Designing for Retina display, part 2. Fonts for iPad & iPhone | Michael Critz. All the sizes of iOS app icons. Designing the new Campaign Monitor iOS icons. Redirection iPad & iPhone par PHP, Javascript ou htaccess | Victor Coulon. Mobile-friendly: The mobile web optimization guide - Opera Developer Community. Penser mobile d'’abord. Penser mobile d'’abord aide pour les décisions critiques. Rethinking the Mobile Web by Yiibu. Modeling the Mobile User Experience. XUI | javascript micro-framework. Next-generation UX. Mobile - Table of contents. There is no WebKit on Mobile. A tale of two viewports — part one. A tale of two viewports — part two. The Great WebKit Comparison Table.

State of mobile web development, part 1/3: the problem. State of mobile web development, part 2/3: progressive enhancement. State of mobile web development, part 3/3: the mobile industry’s failings. Considerations for Mobile Design (Part 1): Speed. Building Mobile Web Apps the Right Way: Tips and Techniques. Mobile Strategy, Data Visualization, and Design Process - Big Challenges, Big Rewards. WURFL. DeviceAtlas | DeviceAtlas. Tera-WURFL - Mobile Device Identification. Simulez votre site sur téléphones mobiles avec ProtoFluid - Alsacréations. Mobile 10 and the Opera Widgets Mobile Emulator on your desktop - Opera Developer Community. Mobile emulator for desktop - Opera Developer Community. Mini Simulator. ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.