All posts tagged ‘Mobile’

File Under: Mobile, Multimedia

TinySrc Shrinks Your Images for Mobile Browsers

If you’ve played around with optimizing your website for small screens, you know one of the big headaches is resizing images. You can set the viewport in your head tags to make sure your main content is the focus on mobile devices, but you can’t easily shrink images.

On many mobile devices, rendering the images is what slows down page load times. That’s where TinySrc comes in. It’s a clever service that parses your images and presents scaled-down versions to mobile devices.

Using tinySrc is pretty simple, all you need to do is prefix your image URLs with the tinySrc domain, something like:


http://i.tinysrc.mobi/http://foo.com/foo.png

TinySrc will then detect the device that’s visiting your site (tinySrc has partnered with Device Atlas so its device listings are extensive) and serve out an appropriately shrunken version of your image.

If you’d like complete control over the size of your images, you can specify parameters in the URL. For more details on all of tinySrc’s settings see the documentation.

While you are relying on a third party service — a choice which always carries the usual concerns about speed and reliability — tinySrc is definitely one of the fastest, easiest ways to shrink your images for the small screen.

[via Ajaxian]

See Also:

File Under: HTML5, Mobile, Web Apps

How Do Native Apps and Web Apps Compare?


Two roads diverge on a tablet screen. One is the path to the native app, the other leads to the open web.

Luckily, you can take both. The latest mobile devices ship with a thoroughly modern browser capable of handling emerging web standards. Beneath that is a modern operating system with access to the magic inside the hardware: the camera, GPS, gyroscope and compass. But if you had to pick one — native app or web app — which would you choose? Your decision will make all the difference in how you approach your design, development and distribution.

The Issues Native Apps Web Apps
Internet access Not required Required, except for rare apps with offline capability
Installation/updates Must be deployed or downloaded Hit refresh
User interface Native apps are responsive and functional Browsers can be clunky, but new advancements in JavaScript like jQuery Mobile are catching up fast
Device compatibility Platform-dependent, hardware-dependent Platform-agnostic, content can be reformatted with CSS to suit any device
Animation/Graphics Fast and responsive Web apps are getting closer, but will probably always lag
Streaming media Few problems with audio and video. Flash works, but only if the device supports it Flash works where supported. Browser-based audio and video are getting there, but still beset by compatibility headaches. Give it a year or two
Fonts Tight control over typefaces, layout Almost on par, thanks to advancements in web standards. Give it six months
Is my content searchable? Not on the web By default
Sharable/Tweetable? Only if you build it in Web links are shared freely. Social APIs and widgets allow easy one-click posting
Discussion and collaboration Only if you build it, and it’s more difficult if data is disparate Discussion is easy, all data is stored on a server
Access to hardware sensors Yes, all of them: camera, gyroscope, microphone, compass, accelerometer, GPS Access through the browser is limited, though geolocation is common
Development Specific tools required for some platforms (like Apple’s). You have to build a new app for each target platform Write once, publish once, view it anywhere. Multiple tools and libraries to choose from
Can I sell it? Charge whatever you want. Most app distributors take a slice, up to 30% Advertising is tolerated, subscriptions and paywalls less so. No distribution costs beyond server fees
Distribution Most app stores require approval. And you gotta wait No such hassle
Outside access to your content No, the reader must download your app Yep, just click a link
Advertising Control over design (though limited in iAds) and rate More choices for design, plus access to web analytics. Rates vary widely

See Also:

File Under: JavaScript, Mobile

iPhone ‘Pull To Refresh’ in JavaScript

When it first arrived in iPhone apps, the simple “pull to refresh” action was instantly hailed as a genius bit of user interaction engineering.

It’s an ultra-intuitive way of refreshing the displayed page content by simply pulling the page down with your thumb, then releasing it — sort of like pulling a lever on a slot machine. The official Foursquare and Twitter (nee Tweetie) apps use it, so if you’re into social networking, you’re already familiar. But so far, its use has been limited to native apps.

Now developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s found some of the limitations.

Point your mobile browser at waynepan.com/s/pull to test it. It’s a little jerky, but it does work. And his code doesn’t rely on any JavaScript libraries, so with a little tweaking, this behavior can be integrated into any web app and will work on Android and iOS devices. Nice work!

[Hat tip to Dion]

See Also:

File Under: JavaScript

Video: jQuery Gurus Talk About Mobile, the Future

Here’s a short video about the future of jQuery, our favorite JavaScript library for creating rich, animated site interactions.

The interviewees are Mike Hostelter and Jonathan Stark, co-founders of appendTo, a consulting company that trains and supports jQuery programmers. The video was shot this week at O’Reilly OSCON 2010, taking place in Portland, Oregon through Friday.

In the interview, they talk a little bit about what’s next for the jQuery Core group — currently, jQuery creator John Resig is auditing mobile browsers to build more mobile features into jQuery, making it easier for JavaScript developers to make HTML5 iPad and smartphone web apps that are more “appy.” Also, there ultimately won’t be a separate pack for mobiles and desktops — the future of jQuery is one code library that works on all browsers and all devices.

See other OSCON 2010 videos on O’Reilly’s YouTube channel.

See Also:

File Under: Browsers, Mobile

Firefox Home Syncs Your Faves to Your iPhone

Mozilla’s new Firefox Home app for Apple mobiles is now available for download. You can get Firefox Home for the iPhone and iPod Touch in iTunes. It’s a free download.

As we mentioned when we first told you about it, the Firefox Home app is not Firefox on your iPhone. It’s a companion to Firefox.

It securely syncs your bookmarks, browsing history, user preferences and open tabs from the last time you used Firefox, and it brings them down to your iPhone or iPod Touch so you can access that stuff on your mobile. It works in tandem with Firefox Sync, Mozilla’s hosted, cloud-based service that keeps all of your installations of Firefox synced up with one another.

Browsing my Firefox bookmarks on the iPhone

It’s especially welcome now, as most of us use multiple screens every day — one or two computers, and at least one smartphone with a web browser. Firefox Sync tied our work machine and our home machine together by syncing all of our browser data in the cloud, and Firefox Home completes the circuit for iOS users, making all the hard-to-remember stuff — your myriad “starred” favorites and bookmarked URLs — available in your pocket.

Needless to say, this app is only going to be useful to you if you’re a Firefox user with an iPhone or iPod Touch. Android users have had Mozilla’s mobile version of Firefox available on their phones since April.

You also need to have Firefox Sync set up to use it. If you don’t have an account, you can sign up when you install the app on your phone. You will also need the Sync add-on for Firefox (newer versions of Firefox will ship with Sync pre-installed). As Charlie Sorrel notes in his Gadget Lab post, this is a bit more work than syncing your desktop Safari data to your iPhone, which just involves checking a box in iTunes (and you can keep Safari and Firefox in sync — and by extension, the iPhone — using Xmarks, but only on the Mac). Opera’s mobile browsers have easy syncing as well. But unlike those choices, this isn’t a new browser or a half-way-there solution, it’s a direct line to the same browser data that’s on your desktops and laptops.

Once the app is set up, you can search your history, access your Firefox bookmarks and see the tabs you most recently had open when you walked away from your computer. All of this info is accessible from within Firefox Home’s search bar, which is sort of a miniature version of the “Awesome Bar” in Firefox. It will search both page titles and URL strings, and it will auto-suggest results as you type.

Searches use the Awesome Bar approach

Just like using the Awesome Bar in Firefox, everything shows up in a single list as you type, and a little icon shows up next to each item to tell you what sort of result it is — a bookmark, a piece of history, an open tab.

Click on an item and the page opens inside an in-app browser. It’s your standard iOS WebKit browser in a pretty blue wrapper, and it performs about the same as the built-in browser inside other popular apps like Twitter.

So Firefox Home is not Firefox on your iPhone, which is something we’re not ever likely to see. Mozilla’s brass has made it clear that Apple’s app policies are too restrictive for Firefox, and the company doesn’t want to dumb the browser down for the iPhone. For people who use Firefox as their primary browser everywhere else, this app is the next best thing.

You can read Mozilla’s announcement for more links, troubleshooting tips, and feedback channels.

See Also: