File Under: Uncategorized
Mar
11
2013

The Web of the Future Wants to Hear What You Have to Say

By

Please speak slowly and clearly. Image: Vikramdeep Sidhu/Flickr

Earlier this year Google’s Chrome web browser added preliminary support for voice commands, opening the door to a voice-driven future where you can browse the web, send an e-mail or post to Twitter all without touching a mouse, trackpad or screen.

Naturally there’s a considerable way to go before this vision of a voice-driven web browser is a reality, but if you’d like to see one early experiment check out developer Jordan Moore’s voice driven demo page.

Moore’s page uses voice input to control things like font size, page color and line-height. Try saying “Make it darker,” “Make the text larger” or, for some scrolling Comic Sans, “Clown Mode”.

You’ll need the latest version of Chrome to see the demo in action since that’s the only browser that currently supports Google’s proposed Web Speech API. You’ll also need to click the microphone icon at the top of the page to activate voice input. As Moore notes, you currently “can’t bind an input to the speech input field.” That’s probably a good idea for security/privacy reasons, but it does detract somewhat from the vision of a purely voice-powered web.

Moore’s demo is creative and fun to play with and it hints at a voice-controlled web of the future, but it also showcases just how far away that future remains.

While Google’s voice transcriber (which converts your speech to text behind the scenes) is fast, it’s still not very good. It struggled with many of my deliberate, slowly spoken commands — struggled enough in fact that I doubt it would work at all for anyone with a strong accent, let alone non-native speakers. (Moore says it was “incredibly difficult to test voice commands with a Northern Irish accent.”)

Moore is the first to admit that voice-driven apps like his experiment aren’t ready for prime time. “I’m not sure of the practicality of this experiment right now,” he writes. “But I can see voice commands becoming a bigger part of what we do in the near future.”

As Moore notes, now is the time for experimentation. It’s a time for developers to try out new ideas and discover how voice commands might fit with and perhaps even rearrange the web as we know it. “Let’s think of the possibilities and other situations this might apply to,” Moore suggests, “We can have a bit of fun with this.”

File Under: Mobile, Responsive Design, UI/UX, Web Basics
Mar
8
2013

Mobile Browsers Help Users Avoid Bloated Webpages

By

Stop feeding your website donuts. Image: D. Sharon Pruitt/Flickr.

Websites are getting fatter, dramatically fatter, with the average page size of sites tracked by the HTTPArchive now nearly 1.3 MB. If the current rate of page size increase continues, that number will reach 2MB sometime early next year.

That’s bad for pretty much everyone, but doubly so for mobile users with constrained bandwidth.

Fortunately for mobile users, the network increasingly seems to see large page sizes as damage to route around.

Services like Instapaper, Pocket or Safari’s Reader have long offered an easy way to strip out extraneous content. Now mobile web browsers are increasingly taking it upon themselves to speed up the bloated web.

The recently unveiled WebKit-based Opera Mobile borrows Opera Mini’s proxy-based Turbo Mode, or “Off Road” mode as it’s known now. Once only deemed necessary for feature phones (Opera Mini’s primary market) proxy-based browsing will soon be available in all Opera browsers.

Google’s Chrome for Android browser is getting ready to follow suit.

The beta channel release of Chrome for Android recently introduced an experimental data compression feature which Google says will “yield substantial bandwidth savings.” Chrome’s compression is nowhere near the level of Opera’s, but it does roughly the same thing — puts a proxy server between the user and the bloated site in question and then applies various speed improvements like using the SPDY protocol and compressing images with WebP.

To turn on the compression head to chrome:flags and look for the “enable experimental data compression” option.

Here’s Google’s description of the various optimizations:

For an average web page, over 60% of the transferred bytes are images. The proxy optimizes and transcodes all images to the WebP format, which requires fewer bytes than other popular formats, such as JPEG and PNG. The proxy also performs intelligent compression and minification of HTML, JavaScript and CSS resources, which removes unnecessary whitespace, comments, and other metadata which are not essential to render the page. These optimizations, combined with mandatory gzip compression for all resources, can result in substantial bandwidth savings.

In other words, Google and Opera are doing what web developers ought to be doing but aren’t. Just like developers should have been making reader-friendly pages, but weren’t, so “reader” modes were born.

It works too. In the video embedded below Google’s Pete Le Page shows how Chrome’s new proxy options take a page from The Verge and reduce it from a husky 1.9MB to a still fat, but somewhat better 1.2MB.

Want to make sure the internet doesn’t see your site as damage it needs to route around? Check out developer Brad Frost’s article Prioritizing Performance in Responsive Design, which has a ton of great advice and links, including what I think is the most important thing developers can do: Treat Performance As Design. In other words, if your site isn’t svelte and fast, it’s not well designed no matter how pretty it might look.

[Note: It is not ironic to post about web page bloat on a page that is, arguably, pretty bloated.]

Tags: , , ,
File Under: CSS, HTML, UI/UX, Visual Design
Mar
7
2013

Simplify Responsive Design With ZURB’s ‘Foundation’ Web Toolkit

By

Foundation 4. Image: Screenshot/Webmonkey.

ZURB has released a major new version of its popular Foundation framework, a web development toolkit for quickly building responsive websites. The new Foundation v4 is a ground-up re-write that sees ZURB taking a mobile-first approach.

Like its erstwhile competitor Bootstrap, Foundation offers a set of HTML and CSS building blocks you can use to quickly develop basic site structure and design — layouts, typography, forms and other common design elements are all available.

There are three ways you can try out Foundation 4. You can download the straight compressed CSS and use that as a starting point for your own customizations. Alternately you can customize your build of Foundation, including only the elements you need; or you can install the SASS version of Foundation and customize it within your SASS code.

If you’re upgrading from Foundation 3 be sure to read through ZURB’s migration guide as the syntax for the grid and other elements has changed.

The real power of Foundation 4 doesn’t really come into play unless you go with the SASS option. Thanks to SASS’s “mixins” concept you can now use the grid tools in Foundation 4 without littering your HTML with the various (purely presentational) grid class names. Using Foundation 4 within your SASS project also makes it dead simple to use only the components you need, for example, you can include the grid mixins, but skip the typography if it’s not to your liking.

Be aware that the new mobile-first approach in Foundation 4 means browsers which don’t support media queries will only get very basic styling for the grid and other UI elements. Yes, that pretty much only affects IE 8. But, if your project needs more robust support for IE 8, there is a modified version of Foundation 4 with support for IE 8 (alternately, you could stick with Foundation 3).

It’s also worth noting that, because Foundation 4 is such a departure from the previous version, ZURB plans to continue supporting Foundation 3 for some time.

If you’ve got questions about Foundation 4, head on over to the official site and check out the documentation. You can also explore the code on GitHub — Foundation is one of the top 20 most-starred projects on the site.

Tags: ,
File Under: Browsers
Mar
6
2013

Curvy, Chrome-Style Tabs Coming Soon to Firefox

By

So, so round. Image: Screenshot/Webmonkey.

Firefox’s tabs will soon sport a sleeker, rounded design.

The new design will likely arrive in the Nightly Channel in the next few days, but if you’d like to test it today, you can download the Firefox UX branch. Retina MacBook Pro users should note that, thus far, the new curvy tabs don’t support high-DPI screens.

The new curved tabs look like slightly over-sized, more rounded versions of the tabs Google Chrome has always used. Unlike Chrome, tabs in the background are nearly invisible.

The big question is why? Mozilla’s answer seems to be little more than “because we can”. On the plus side, the re-skinned tabs will bring a bit of a speed improvement thanks to new graphic elements and faster “paint” times.

For more details on the speed improvements see Firefox developer Mike Conley’s write up on the new curvy tabs.

Tags:
File Under: Browsers
Mar
5
2013

Reborn Opera Mobile Sings on Android

By

Opera old and new on a Galaxy Nexus. Image: Screenshot/Webmonkey.

Opera software has unveiled the first version of its new WebKit-based browser for Android.

The new WebKit-based Opera is not just different under the hood, for all intents and purposes this is a totally new web browser and, surprise!, it’s better than its predecessor.

If you’d like to take this beta for a spin, head over to the Google Play Store. The Opera Mobile beta requires Android 2 or better and, fear not, it’s a separate app so you can keep the old version around if you’d like.

Last month Opera announced it would be abandoning the Presto rendering engine that has been the basis of the browser since its inception. Instead the company will use the WebKit rendering engine for all its future releases, starting with this Opera Mobile for Android beta.

The revamped Opera for Android isn’t just different under the hood, Opera has redesigned the entire browser from the ground up opting for a more Android-native look. The new user interface is cleaner and reminiscent of Chrome for Android with a single menu button at the top of the screen rather than the space-eating toolbar found in the old Opera Mobile. While I prefer the new UI, it’s worth noting that the new design is decidedly less thumb-friendly.

Other cosmetic changes include combining the URL bar and search bar, and a new tab switching interface also similar to what you’ll find in Safari on iOS.

However, while the first WebKit-based Opera Mobile is clearly different it manages to retain, and even improve on, much of what made (makes) Opera unique.

For example, Opera Mobile’s trademark “Speed Dial” page has been revamped and is much easier to customize with your favorite sites. Speed Dial now looks and behaves much like the home screen on iOS. You can even drag your bookmarks and favorites on top of each other to create folders. The changes make it possible to fit more links in less space.

Opera Mobile’s new iOS-ified Speed Dial screen. Image: Screenshot/Webmonkey.

Also new in this release is what Opera is calling “Off-Road” mode — the data compressing power of Opera Mini is now available (when you want it) in Opera Mobile. Off-Road mode uses Opera’s servers to compress webpages before they’re sent on to your device. That means faster browsing on slower networks. Off-Road can even save you money if you’re caught roaming or running out of data on a limited data plan. Unlike Opera Mini, which always compresses pages, Opera Mobile allows you to toggle the Off-Road settings.

Opera’s simplified menu with “Off-Road” toggle. Image: Screenshot/Webmonkey.

Opera Mobile’s Save for Later feature can also save on bandwidth if you download pages for offline reading while you’re connected to Wi-Fi.

While there is much to love about the new Opera for Android beta, be forewarned that it is very much a beta. In my testing it was stable enough, but Off-Road mode frequently failed to render pages and there’s currently no way to sync your Opera Link data. Provided Opera works out the bugs though Opera Mobile is shaping up to be one of the best browsers on Android.

Tags:
« OLDER POSTS