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 Related:  Mobile

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.

HTML5 Techniques for Optimizing Mobile Performance Introduction Spinning refreshes, choppy page transitions, and periodic delays in tap events are just a few of the headaches in today’s mobile web environments. Developers are trying to get as close to native as they possibly can, but are often derailed by hacks, resets, and rigid frameworks. In this article, we will discuss the bare minimum of what it takes to create a mobile HTML5 web app. The main point is to unmask the hidden complexities which today’s mobile frameworks try to hide. You will see a minimalistic approach (using core HTML5 APIs) and basic fundamentals that will empower you to write your own framework or contribute to the one you currently use. Hardware acceleration Normally, GPUs handle detailed 3D modeling or CAD diagrams, but in this case, we want our primitive drawings (divs, backgrounds, text with drop shadows, images, etc...) to appear smooth and animate smoothly via the GPU. Page transitions Sliding For the slide effect, first we declare our markup: Flipping Rotating

Make an App for Your Small Business -- Without Hiring a Developer The Spark of Genius Series highlights a unique feature of startups and is made possible by Microsoft BizSpark. If you would like to have your startup considered for inclusion, please see the details here. Name: MobiFlex Quick Pitch: Build your own complex apps without hiring a developer. Genius Idea: In a world where there's always "an app for that," more small businesses see the value in creating their own mobile apps. MobiFlex launched a web application last week that allows companies, even those with minimal tech savvy, to create their own iPhone and Android apps. DIY app creation has been done before, but most of these sites have limited customization options. The resulting apps might not be topping "most downloaded" apps lists anytime soon, but MobiFlex's approach does make it easier to create an app that is valuable to a company's customers or employees. It's unlikely that individuals without business motives would use MobiFlex. Image courtesy of iStockphoto, onurdongel

Pretenders: Why mobile Web apps should stop trying to act like native apps « There are a lot of great reasons to build a mobile Web app just as there are a lot of great reasons to build any Web app and I’m certainly not here to continue the great Web versus native app debate. It’s not native versus Web, it’s both and it depends on your situation. But what I’m here to talk about are the pretenders. Pretenders are mobile Web apps that try to replicate the native experience. You’ve no doubt seen Web apps with iPhone-style back buttons, awkward attempts at implementing gestures, laggy scrolling and the like. Pretenders have problems They don’t meet user expectations Users of pretender apps get an experience that falls squarely in the uncanny valley — it looks like a native app, but something isn’t quite right. They are a huge drain on development resources Development teams can spend countless hours trying to make the Web act native. Embrace the Web If you’ve decided to deliver your app via the Web, you should embrace the capabilities and constraints of the Web.

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.

Supersized - Full Screen Background Slideshow jQuery Plugin Here it is, all the Supersized documentation you're so eagerly waiting to read. Enjoy. Glossary Getting Started First, you'll want to download the latest version of Supersized. Options autoplay Determines whether slideshow begins playing when page is loaded. type : boolean default : 1 fit_always Prevents the image from ever being cropped. type : boolean default : 0 fit_landscape Prevents the image from being cropped by locking it at 100% width. fit_portrait Prevents the image from being cropped by locking it at 100% height. horizontal_center Centers image horizontally. image_protect Disables right clicking and image dragging using Javascript. Allows control via keyboard. Spacebar - Pause or playRight arrow or Up Arrow - Next slideLeft arrow or Down Arrow - Previous slide min_height Minimum height the image is allowed to be. type : number default : 0 min_width Minimum width the image is allowed to be. new_window Slide links open in a new window. pause_hover Pauses slideshow while current image hovered over.

The Anatomy of an iPhone Site This is part five of the week-long “Website Anatomy Class” series In today’s world the internet travels. Not just through laptops and wireless signal, but through a growing number of smart phones. The trick? Getting your site to travel just as well. We’ll start with a brief history lesson. Then, about two years ago, a big change happened. Built to Touch The iPhone did two things differently. Site versus Application Especially when a uniform design is put in place it’s harder to distinguish between a web site and a web application. Facebook has an iPhone specific version of its site for the embedded browser. What’s the Difference? The standalone application version of a website is typically more comprehensive in both options and interface. For this article, you can define an application as an extension to a website. Which Should I Use? Which one is better for you? If you’re up for the challenge, go for it! Smaller Resolutions The iPhone screen has a resolution of 480 by 320 pixel resolution.

Why Mobile Apps Will Soon be Dead It’s hard to imagine Apple’s App store – 50 million users, 400,000 apps, 10 billion downloads – being threatened with extinction, but it’s not as if Tyrannosaurus Rex had a clue its demise was imminent until the process was well underway, either. We know that empires crumble: what’s interesting is how. Right now pundits are focused on the threat of Android. Apple is still shipping plenty of iPhones, but even Steve Jobs must recognize that if his were a Roman empire, the numberless device manufacturers selling Android devices are the metaphorical barbarians at the gates. The real threat are web apps. Steve Jobs thought web apps were the future too, in 2008 when he announced that the iPhone would have plenty of apps – all of them available through the browser. Here’s how Brian Kennish, formerly an engineer at Google and now something of a punk-rock privacy-protecting developer, put it in a recent email: “One word: distribution.

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