background preloader

Building Mobile Web Apps the Right Way: Tips and Techniques

Building Mobile Web Apps the Right Way: Tips and Techniques
Mobile web apps are useful alternatives to native apps for mobile devices. These days, Android-based products and iOS devices like the iPhone and iPad all come packed with fantastic mobile browsers (Mobile Chrome and Mobile Safari respectively), and Opera fans can install their preferred browser, too. From a desktop point of view, these products make browsing just about the most pleasurable experience possible. CSS3 transitions, beautifully crafted HTML5 and embellishments mean their users get the highest possible browsing experience (assuming the content being viewed has been crafted with care and consideration). Their mobile counterparts equally do not disappoint. Fast-loading JavaScript, combined with equally impressive CSS3 and HTML rendering mean that your mobile browser can provide you with as rich an experience as a native app. Being mobile and Web-based, there are obviously going to be performance concerns. Mobile Web App vs. Mobile as a Platform Desktop vs. Keep File Sizes Small

Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers - Smashing Magazine Advertisement According to Brandweek, “brands are the express checkout for people living their lives at ever increasing speed. This article shows you how, and why, to add “app”-like icons to your sites for several mobile and desktop browser displays, to clearly and elegantly identify your site with an icon that stands out from the crowd. Logo Presentation And The Nine Basic Ballet Movements When I was a lad growing up in rural America, we only got four channels on television, all local affiliates of the four national networks (yes, four; you’re forgetting PBS, which I only watched when they did dinosaur specials). Not too far off from what sat in our living room. NBC’s station came in over the new-fangled and somewhat unfathomable UHF channels — we had to actually twiddle a dial that looked like an old radio selector to tune it in. The television was also a black-and-white job. Short answer, we didn’t. The 1960s version of the ABC Network logo. The 1960s version of the NBC Network logo.

Mobile Strategy, Data Visualization, and Design Process - Big Challenges, Big Rewards By Jared M. Spool Originally published: Apr 22, 2011 Every year, our research turns us to what's currently top of mind for designers. As we've been preparing for our Web App Masters Tour this spring, we uncovered three hot trends that everyone wants to know more about: designing for a mobile world, visualizing our data in meaningful ways, and upgrading our design process to handle the rapid world of web-based applications. The challenges we face are great, but when we come up with the right solutions, we see big rewards. Challenging Trend #1: Designing for a Mobile World The last few years have seen a dramatic shift in how we access and interact with the applications in our lives. The sheer breadth of platforms presents the first obstacle. Do we go native or use a web-based interface? It's harder, in the browser approach, to access the gyroscopes, cameras, microphones, and proximity sensors that are packed into the mobile device. We're seeing a new category of hybrid applications.

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

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.

Designing For Android - Smashing Magazine For designers, Android is the elephant in the room when it comes to app design. As much as designers would like to think it’s an iOS1 world in which all anyones cares about are iPhones, iPads and the App Store, nobody can ignore that Android currently has the majority of smartphone market share2 and that it is being used on everything from tablets to e-readers. In short, the Google Android platform is quickly becoming ubiquitous, and brands are starting to notice. But let’s face it. Further Reading on SmashingMag: Link If all this feels discouraging (and if it’s the reason you’re not designing apps for Android), you’re not alone. This article will help designers become familiar with what they need to know to get started with Android and to deliver the right assets to the development team. Android Smartphones And Display Sizes Link When starting any digital design project, understanding the hardware first is a good idea. 10Two common Android screen sizes. Advertisement Dashboard Link

Considerations for Mobile Design (Part 1): Speed This article is a part of a series: How do traditional screen web designs translate on handheld devices? This series aims to identify constraints in mobile web design so we can better serve our users. I remember when I first dabbled in Mobile Web Design. That part of my life was short-lived. Fast-forward five years and mobile had begun to gain traction. As it turns out, the Mobile Web is no longer the web of last resort. Let’s get considerate This series—Considerations for Mobile Design—aims to help experience designers understand how the transition to mobile affects their audience and, in turn, their designs. Speed. Let’s begin with an exposition. Two trains leave from the same points of origin, traveling towards the same destination. This illustration is more or less straightforward (especially in our case when users are watching a progress bar instead of some beautiful scenery), but it’s still an important concept. Kbps vs. People often get confused when working with Kilobytes vs.

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. 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 In this section we will look at all the files involved in our widget. The config.xml file If we want to use AccelerometerInfo to gain access to a phone's accelerometer we need to specify additional features in our widget's config.xml file. <? Summary

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. 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….” What constitutes each layer of a mobile user experience? Key Factors for the First Layer: Mobile Handsets and Network Technology Handset manufacturers include big names such as Nokia, RIM, Apple, HTC, and Motorola.