Archive for the ‘Mobile’ Category

Responsive Web Design: What Not to Do

Testing a responsive site across devices (using Adobe Shadow). Photo: Adobe.

We’ve covered quite a few ideas on how to build more responsive websites — that is, websites that use flexible layouts, media queries, image scaling and other tricks to make sure that the site looks great and works well on any screen.

Sometimes, though, it’s helpful to see what not to do. Responsive design guru Brad Frost recently outlined five common mistakes responsive developers make over at .Net magazine. Frost covers responsive sins like relying on specific screen sizes to trigger layout changes (it’s far better to create design breakpoints based on a site’s actual design than to just use the screen sizes du jour) and avoiding a one-size-fits all experience.

Of the latter Frost writes:

Mobile is much more than just various small screens…. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

We should do all we can to make the entire experience respond to what the device is capable of. Addressing constraints first gives us a solid foundation to stand on, then we can utilize progressive enhancement and feature detection to take the experience to the next level.

The entire post is well worth reading, but we’d like to add a sixth rule to the list: Don’t assume that what you did yesterday will be the best thing to do tomorrow.

That’s not to imply that what you do today won’t work tomorrow, just that chances are there will be an easier way to do it.

Responsive web design is a very new challenge and the best ways of meeting it are still being worked out. That can be a pain, but it also means that some very smart people are solving some very hard problems and you can benefit from their work provided you know about it.

We see new things popping up all the time, whether it’s a new way to handle responsive images or a browser update that adds widespread support for a new CSS feature. We encourage developers to spend some time reading up on the latest tips and tricks before each new project. New responsive tools are being developed and refined so rapidly that the hack you used on your last project might turn into a stable, well-maintained JavaScript library by the time you start building a new responsive site.

File Under: Browsers, Mobile

Opera: Over Half of Mobile Users Are Mobile-Only

Can you hear me now? Photo by Aramolara/Flickr.

Opera has released a new “state of the mobile web” report that shows 56 percent of Opera’s mobile users access the web only via their mobile device. Some 43 percent of non-Opera mobile users also call mobile their sole browser.

Opera’s numbers were gathered in conjunction with mobile research firm On Device Research and are pulled from some 34,000 users in 22 different countries across four continents over the course of one year (Nov. 2010 to Nov. 2011).

There are two lessons for web developers in this report. First, globally, mobile is not the future of the web — it’s the now of the web. And second, hiding content on the mobile version of a website means a significant number of users will never see that content at all since they only access sites via a mobile device. Consider your hidden-from-mobile content non-existent content.

Naturally every website’s audience and needs are different. If your site is U.S.-centric then Opera’s report may have very little bearing on your users, but for those who’d like to expand to, or are already serving a global market, clearly making sure your site works well on mobile devices is key.

Delving into the Opera-centric portion of data offers some insights for developers as well, namely that building WebKit-only sites is not a good idea.

It’s one thing to know that building sites that only support the -webkit browser prefix is bad form, it’s another thing to realize it may be costing you money.

Not only are Opera Mobile and Mini the most widely used mobile browsers worldwide — which means not supporting them excludes the majority of mobile users from your site — according to Opera’s white paper, 55 percent of Opera users make purchases on their mobile devices. Only 43 percent of people without Opera installed do the same. In other words, websites that don’t support Opera on mobile may well be losing money.

Unfortunately, Opera is going forward with its plan to support -webkit, so possibly WebKit-only websites may work in Opera Mobile at some point in the future. But if you want to support Opera (and other browsers) today be sure to use all the various browser prefixes when writing your CSS. You can even take advantage of automated prefixing solutions to do all the hard work for you.

For more info on Opera’s data be sure to check out the actual white paper (.pdf) which also provides some more country-by-country data for those interested in what mobile trends look like in specific parts of the world.

File Under: Browsers, Mobile

Chrome for Android Doesn’t Need No Stinking Mobile Websites

Chrome for Android. Photo: Ariel Zambelich/Wired.com

Google has released an upgrade for its new Chrome for Android web browser. Chrome for Android — which was released earlier this year — is still a beta release, but the latest version adds several nice new features, including a way to circumvent websites that try to force a mobile version on you.

The latest version of Chrome for Android can be downloaded from the Google Play store. Note that Chrome for Android requires Android 4.0 or better.

This release fixes a number of bugs and adds some new features, like the ability to reload a site that has redirected you to a mobile page. Despite Jakob Nielsen’s recent pronouncement that users want to be auto-redirected to simplified mobile sites, Google’s Chrome for Android developers think otherwise.

Chrome for Android’s new feature subverts websites that automatically redirect you to a mobile version by spoofing Chrome for Android’s user agent string, in this case sending the string for the desktop version of Chrome instead of the mobile (which developers should note has been updated as well).

The new feature means that if a site offers a sub-par mobile experience by default, you can always reload the desktop version with the press of a button.

Also new in this release is the ability to add bookmarks to your home screen for fast access to your favorite sites and web apps.

In addition to the new features, Chrome for Android is now available in 31 more languages and in all countries where Google Play is supported. Chrome for Android is still a beta release and there are plenty of known issues, but the browser is getting closer to a finished product.

File Under: Mobile

Why Jakob Nielsen Is Wrong About Mobile Websites

Make the logo smaller. Photo: Ariel Zambelich/Wired.com

Web usability guru Jakob Nielsen has come under fire for his latest suggestions on building mobile websites. Nielsen’s controversial advice can be distilled down to this nugget: “good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”

Among the many negative responses to Nielsen’s latest Alertbox post is that of web developer and mobile specialist Josh Clarke, who calls Nielsen’s questionable advice “180-degrees backward.”

Indeed, much of Nielsen’s advice may seem like a shockingly bad idea not just to developers, but to anyone who uses a mobile device to browse the web.

This isn’t the first time Nielsen has taken a contrarian stand about mobile websites. Last year he suggested that a mobile-first approach to design was wrong because “PCs will remain important,” which is, at best, a false dilemma since a mobile-first design doesn’t mean ignoring the desktop. Just because you’re focused on the future doesn’t mean you’re ignoring the past.

Nielsen’s latest advice has similar false dichotomies. For example much of Nielsen’s advice rests on the premise that a single site cannot serve the wants and needs of both mobile and desktop users. In fact you don’t need to choose between mobile and desktop, the page can adapt and serve the needs of both users. There are plenty of examples of sites that do just that with responsive designs. To be sure there are plenty of websites that claim to be mobile-friendly and obviously aren’t. But that doesn’t mean the solution is to toss out the whole idea of responsive design and go back to separate websites for every device.

In fact what Nielsen considers one of the “main guidelines” for a successful mobile website is something that many people would probably consider the most irritating thing about mobile sites: “If mobile users arrive at your full site’s URL, auto-redirect them to your mobile site” (emphasis in original).

The problem with this advice is that, as Clark puts it, “Nielsen is confusing device context with user intent.” In other words, just because someone visits your site on a small screen doesn’t mean they won’t want access to all the same things they would see on a slightly larger screen. It may be necessary to rearrange elements for smaller screens, but hiding them is a bad idea.

“All that we can really know about mobile users is that they’re on a small screen, and we can’t divine user intent from that,” writes Clark.

Nielsen, however, does just that, divining that — because a user has a small screen — they will want to do less on your site. He suggests you serve up a limited site and then offer a link to the full site “for those (few) users who need special features that are found only on the full site.”

We suggest you don’t do that. You can do better than that.

You can use responsive design patterns to make sure that the same content is always available, but that the experience is tailored to the device at hand. In other words, responsive design means your site works just as well on mobile as it does on the desktop. If it doesn’t that means something is wrong with your site, not the whole approach. Sure, there will be times when a separate mobile site is the right way to go, but those times will likely be few and far between.

Nielsen’s argument is based on copious research and we have no doubt he found plenty of horribly designed websites that completely fail on mobile devices to justify his recommendations. But just because Nielsen is finding a lot of poorly made mobile websites does not, as Clark writes, “mean we should punt on creating great, full-featured mobile experiences.”

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.