Archive for the ‘Web Apps’ Category

Easily Preview Responsive Designs With ‘Responsivator’

Preview your website in Responsivator. Image: Screenshot/Webmonkey

Showing off responsive designs to clients can be tricky. Do you arrive with a bag full of devices in tow? Or open dozens of browser tabs running emulators? Resize a browser window and hope that the stuttering, @media-induced reflows don’t make clients question your sanity?

How about using just one browser tab that gives a quick preview of what a site looks like at any screen size you’d like?

That’s exactly what Responsivator does. Plug in a URL and Responsivator will load it up in a series of iframes set to whichever screen dimensions you specify. The default sizes cover common devices like the iPhone, iPad, Nexus 7 and desktop, though it’s easy to add anything you’d like to the list.

Responsivator is the work of developer John Polacek from Draftfcb, which also made the BigVideo jQuery plugin we featured previously. Responsivator builds on some similar, earlier efforts like Matt Kersley’s responsive web design testing tool and Benjamin Keen’s responsive design bookmarklet, but has some nice added features, like the ability to navigate your site within the various iframes.

Like Responsivator, but want to run your own custom instance? No problem, Responsivator is an open source project available on GitHub; just grab the code and fire up your server.

File Under: Visual Design, Web Apps

Flickr: When It Comes to Photos, Bigger Is Better

Size matters: Flickr's lightbox view now offers much larger images.

Yahoo is once again lavishing some attention on Flickr. Flickr has already launched a new photo uploader and a new photo editor in recent weeks, and now the site is making your images look even better with new, higher-resolution photo displays.

It’s been nearly two years since Flickr last redesigned its photo pages to display larger images. Since then screen resolutions have only improved, and when it comes to viewing photos you don’t have to be a pro photographer to know that bigger is better.

To make your uploaded images look better — especially when you’re browsing in fullscreen mode — Flickr is introducing two new photo sizes, 2048 and 1600 pixels.

Right now you’ll only see the new larger images when you enter Flickr’s “lightbox” view with its darker, photo-friendly interface (just click an image to enter lightbox view). At the moment the regular photo pages remain unchanged. However, the Flickr blog reports that the larger images will soon be available through Flickr’s API and “a few other places over the next couple of weeks.” While the new image sizes are probably too large for the default photo pages, we wouldn’t be surprised to see Flickr refresh the photo page layout with larger images in the near future.

The larger of the two new photo sizes also seems like a future-friendly choice since it works well with very high-res screens like what you’ll find on Apple’s latest iPad. Although Flickr does not appear to be doing so just yet, serving the larger images to the iPad would make for sharper photos on the iPad’s high-resolution screen. [Update: The Flickr team tells Webmonkey that it "just enabled hi-res photo sharing to the new iPad this morning."]

Naturally, to take advantage of the new larger image sizes Flickr is now creating, you’ll need to be uploading photos at least that large. But given that most phone cameras produce images in that pixel range these days, there’s a good chance you already are.

Flickr Pro members can control how large their images are displayed; just head to the new image size settings page. By default Flickr sets this to “best display size,” though if you want to stop people from downloading high-res copies of your images you can limit the display size to 1024 pixels. The new image size setting doesn’t affect who can download your original files, just those created by Flickr. But since the sizes Flickr creates are larger than what most original images would have been back when Flickr first launched, the new setting makes sense.

One thing to note with the new image sizes: they only apply to photos uploaded since Mar. 1, 2012; older images won’t be resized. The other thing to know is that if you upload something with a long edge of less than 2048 pixels, Flickr won’t upsize it so there’s no need to worry about small images being pixelated.

The new image sizes may not win over fans of filter-happy, low-res image sharing websites, but for Flickr aficionados it offers a compelling reason to stick around.

File Under: Mobile, Multimedia, Web Apps

Flickr Ditches Flash Photo Editor for Mobile-Friendly Aviary

Editing your Flickr photos in Aviary. Image: Aviary

Flickr is swapping out its existing Flash-based photo editor for a new HTML-based app that will work on any device.

Aviary, as the new editor is known, will start appearing as an editing option for your photos today, though some users may have to wait since Yahoo is staggering the rollout over the next few weeks.

Part of the change is out of necessity. Flickr’s previous photo editor was Picnik, which was purchased by Google in 2010. Google has since announced it will shut down the service Apr. 19 and roll its features into Google+.

To use Aviary to edit your Flickr photos, just head to the photo page, click the Actions tab and select the new “Edit photo in Aviary” option. That will open up the image in the Aviary window as an overlay. From there you can crop, rotate, add effects, adjust brightness and contrast and other editing basics.

Obviously Aviary is not aimed at people who takes their photo editing seriously, but for the casual user who just wants to crop an upload or add some punchier contrast, it works well. The learning curve is almost nil and it more than handles the 80 percent use case for casual Flickr users.

In that sense Aviary is a step up from Picnik, which was more of a Photoshop-inspired editor than an amateur-friendly option. However it’s surprising to see Flickr continue to ignore the Instagram-inspired trend of one-click image effects, which are not part of Aviary’s arsenal. Some may decry Instagram’s retro-inspired results, but there’s no denying the simplicity and popularity of its filters.

While Flickr obviously had to replace Picnik since Google is shutting the service down, Aviary offers another huge advantage over Picnik — it doesn’t use Flash. Dropping the Flash requirement means that Flickr users can now edit their photos on iOS devices and upcoming Windows Metro tablets, neither of which run the Flash plugin.

File Under: Web Apps, Web Basics

Building Better Single-Page Web Apps

Single-page, application-style websites offer web developers a way to replicate the user experience of native apps, particularly on mobile devices. Indeed, the application design model — that is, a single webpage that never needs to refresh or reload — is the basis for some of the web’s most popular sites like Facebook and Twitter.

But such app-based sites often break fundamental tenets of the web, eschewing HTML source for JavaScript, breaking the browser’s back button and removing the ability to link deep into the application. Some of these problems are addressed by standards like the HTML5 History API, which allows applications to update the URL bar without refreshing the page, but not every app bothers to take advantage of such recent developments.

The potential problems single-page apps can cause are not, however, sufficient reason to avoid them, argues Mozilla Developer Evangelist Christian Heilmann. Done responsibly and in keeping with the best practices of the web, the single-page app can be part of the future of the web, writes Heilmann.

Among the benefits of single-page apps are speed gains — stripping away the HTML means there’s very little to load initially and subsequent data loads can be done in very small increments, which makes for very fast apps. With the rise of web apps targeting mobile devices the speed advantages make single-page apps appealing to developers. Indeed, Heilmann believes “single page apps … are necessary for the web to be an apps platform.”

Naturally there will be problems with the rise of apps. “We have to battle two main issues,” writes Heilmann, “old conditioning of users and sloppy development for the sake of doing something ‘new’.”

In other words the danger isn’t the single-page concept itself, which, if done right, will yield an “app” that also has all the benefits of the web — deep linking, bookmarking, and indexing. It’s the latter problem Heilmann mentions, one that’s neatly satirized by sites like Hipstergrammers, that causes many developers concern: new just for the sake of new.

Heilmann’s post does a great job of cutting through the hype behind single page apps and presenting them for what they are — another tool with both positive and negative trade offs. Be sure to read through the whole article which offers a great list of potential problems and how to avoid them.

File Under: Web Apps

Flickr’s New ‘Photo Sessions’ Bring Back the Slideshow

Flickr has unveiled a new feature dubbed Photo Sessions, which are real-time slideshows you can share with your friends around the web.

Say you want to share a slideshow with some friends you met on your last trip abroad. You’re back home and they’re back home on the other side of the globe. No one is coming over for dinner and slides. Instead, you just create a new session on Flickr and send the resulting URL to your friends. Once everyone has joined in, sessions become a bit like screen sharing — you swipe to the next photo and everyone else’s screen follows along.

Flickr has thrown in a few interactive features as well, including the ability to chat while the photos roll by. There’s also a way for your friends to doodle on your images from their own laptops or iPads.

Combine Flickr’s new sessions with a group chat app — Skype, iChat or the like — and you have a kind of disjointed, thoroughly modern take on the good old carousel slideshows your parents subjected their friends to in the ’70s. Feel the shag carpet people.

Alongside Sessions Flickr also announced a new Android app, which is considerably more impressive than the company’s iOS app. The Android Flickr app offers filters, geotagging and sharing in a slick-looking app that seems aimed at catching up with Instagram.

See Also: