New iPad Browser: Coast by Opera


This post originally appeared yesterday on my blog.

Yesterday Opera announced the release of its newest browser, Coast, built specifically for iOS tablets (I would say just iPads, but if my fridge gets an iOS tablet UI then I’d be wrong and will have paid too much for a fridge).

Background

Recently Opera moved away from Presto as its rendering engine and hitched its future to Blink, the rendering engine born from WebKit that powers Chrome. Now instead of Opera worrying about the rendering engine, it is focusing on the user interface, the place where it can set itself apart from the other browsers.

Essentially Opera is removing the browser chrome (implying to the user that a web page is just an app) and adding gesture support. Given that Opera was the browser that introduced us to mouse gestures well over a decade ago, and given that a touch screen is an inherently gesture-based UI, this seems like a natural fit.

Bits for Developers

Sadly, my office wifi was down and I couldn’t play with the browser immediately (my crusty iPad 2 is wifi only). So instead I took some time to read through the developer notes.

Tablet First

Overall Opera recommends general responsive design current best practices, though it promotes a tablet-first approach. Opera offers some CSS you can use to specifically target iPads Mini, 2, 3 and 4 (Retina and non-Retina), though it leans on vendor prefixes with only a brief note to also use other prefixes and unprefixed rules.

Responsive Images

It’s also clear that Coast supports the new srcset option for responsive images. It even offers a code example: <img src="image.jpg" srcset="retina.jpg 2x">

Note: As Bruce was kind enough to inform me (because I missed it in the dev notes), responsive images will be supported only in iOS7 and up.

Update as of September 20, 2013

According to Opera, iOS7 did not come with a WebKit update. That means Coast cannot support responsive images via the srcset attribute without a polyfill. Nor can Safari, of course.

Tile Speed Dial Web App Image

Instead of “Speed Dial” icons/images, Coast now looks for a “web app image.” If you don’t have one, Coast will first look for a Windows 8 tile image, then an Apple touch icon, then a shortcut image, then just a favicon. You can, however, create your own 228 × 288 pixel image and stuff it into your site with the following HTML:

<link rel="icon" href="$URL" sizes="228x228">

User Agent String

Don’t use this to do any browser sniffing. Browser sniffing bad. This is instead handy for recognizing it in your logs:

Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.0.2.62956 Mobile/10B329 Safari/7534.48.3.

General Review

Getting going is pretty easy, just start typing into the only field on the screen. As you type you can see a Google preview on the left, which you can tap at any time to go to Google, or a list of icons on the right which correspond to sites you might mean. The icons start out just displaying the first letter of the site, and then identify the site’s tile or shortcut image.

Screen shot of Opera Coast navigate screen.
Note the handy “.com” and “.net” options that appear above the right end of the text box.

Once you are on a page, you can go back by swiping from the left, forward by swiping from the right, or reload the page by pulling down from the top — but not too far or you get the iOS menu instead.

Vine of me playing with back, forward and reload in Opera Coast.

Opera Coast skips tabs and windows altogether and, frankly, feels a lot more like Internet Explorer for Metro than other current tablet browsers. It’s pretty easy to see the open “tabs,” flip through them, get more details, and discard them. It’s also incredibly easy to forget you have so many tabs open. I regularly found myself littered with tabs because of all the links opening new windows.

Testing Opera Coast window/tab management.

While in that tab view, you can also see how “safe” the page is and can get to options to share it, email it, print it, and so on.

Screen shot of Opera Coast safety and share information.
The arrow on the right gives you all the share options.
Opera Coast print dialog.
I don’t have a printer installed, so I’d love to hear feedback on how Coast honors print styles.

Adding and removing a bookmark, tile, whatever, is pretty easy. It took a few swipe-fails, but I got the hang of it well enough to show the whole process in one uninterrupted Vine:

It takes a little getting used to, but it’s not too hard

Gotchas

There were a few things that threw me off. Perhaps because I am a power user, perhaps because I only played with it for one evening.

Swipe History

The swipe for back/forth is handy, but conflicts with behavior I have already learned. In Chrome for Android, swiping left or right has the infuriating feature of bringing me to the next or previous tab in the stack order. For those rare sites that implement a slide that is swipe-friendly, imprecise swipes will move me back and forth in the history instead.

Web App Images

Using the browser in portrait view, the additional screens of tiles (speed dial icons if you are already familiar with Opera) aren’t immediately apparent. It wasn’t until I turned to landscape that I saw them. The tiny dots under the Coast icon weren’t enough for me to intuit that. They also aren’t nearly large enough to tap to jump to a specific screenful of tiles.

Hit Sizes

The 9-box grid at the center bottom as well as the three rectangles at the bottom right are the only real browser chrome in play as you surf. They are also maddeningly small to tap. And I have dainty, lady-like fingers, so I suspect it may cause consternation for others.

Address Bar

If I am on a site and I want to change the address of the current page (maybe I fat-fingered and got to a 404, or I know a super-secret URL), I could not find a way to bring up the address bar and change it. It also made it impossible to know the current page address at any time. As someone who regularly looks at the URL for familiar addresses, indications of scam sites, quick commitment to memory, and so on, this alone takes it out of the running as an everyday browser for me.

Email a Page

I did not care for the email feature one bit. Not only does it embed a screen shot of the page (with a Coast watermark), the screen shot won’t display on other devices. Outlook blocked the image because the attachment ended in .com (not .png or .jpg). Had it not come from me, I wonder if Outlook would have blocked it as spam. My Android email client couldn’t display it because there was no file extension to give it a clue.

Screen shot of emailing a web page from Opera Coast.
What you see when you choose to email a web page from Opera Coast.
Screen shot of received email from Opera Coast.
Best case scenario of what the email recipient sees, though the attachment was blocked in Outlook and unusable in my Android email client.

Tweet a Page

Tweeting a page left me similarly dissatisfied. By default it includes a Twitpic screen shot of the current page with an Opera Coast watermark. When composing the tweet, I tapped the paperclip icon to see if it would do anything, but nothing happened. I opted not to tweet again.

Screen shot of tweeting a page from Opera Coast.
Tweeting a page from Opera Coast.

The resultant tweet:

Wrap-up

Overall, I like the browser. I like what it’s trying to do for consumers. As a power user, however, It’s not a fit for me though I’d be interested in bringing it in front of some other members of my family.

I also didn’t get to try out unsafe sites, printing pages, responsive images (need iOS7), or poorly-built sites. My opinion might change as I continue to play with the browser.

Open Question

There are a lot of Android tablets out there, not just the four screen size offerings from Apple. So how long before we can see Coast on my Nexus 7, if ever?

Updates

I’m adding notes throughout the day as they come up.

Surprising no one, the following reviews from more mainstream sources completely fail to include any screen shots or videos that weren’t pilfered from Opera. I only say that to remind you that by reading this post you have gotten the most in-depth review currently on the web and you should be excited and send me a thank you note and maybe read all my other posts and high-five me on the street.

These articles are, however, worth visiting just to see the comments and how others are reacting to it.

Tips from Bruce:

Update: September 18, 2013

Opera has fielded some questions about Coast and collected them into two posts (so far):

Advertisements

Modern Browsing

If you’re reading this article, then chances are that you’re sitting at your desk using a web browser. Sure, you might be using a tablet, phone, or some other device, but in this blog post, I’m going to focus on desktop browsing.

There are several very good desktop browsers that you may be using right now, or maybe not. Take a moment, locate the “About” option (usually under the “Tools” menu) in your browser, and take a look at what it says.

If you are using the latest version of Google Chrome, Firefox, or Opera, hurray for you! You have made a conscious choice to download and use an alternative browser, a browser that most likely did not come installed on your computer. Maybe you’ve even set that browser as your default.

Now, if you, like many users, are accessing the web in Internet Explorer, that’s not necessarily a bad thing, especially if you’re using Internet Explorer 9 (very soon to be IE 10). However, if you are using IE 6, 7, or 8, you’re really not experiencing the web to its fullest.

Recent browsers, including Chrome, Firefox, Opera, Safari, and IE9, have very good support for emerging technologies like CSS3 and HTML5, that are already being adopted by many web developers to present web content in new and exciting ways. But there’s more to it than just that. Here’s a quick breakdown of some of the benefits you get from a modern browser:

  1. Speed: Modern browsers generally have more powerful rendering engines that handle JavaScript and other technologies better than older browsers. This means that web sites load faster and more efficiently.
  2. Security: Although modern browsers can be subject to security flaws, they’re generally far more secure than their predecessors.
  3. Support: Over time, support for older browsers will continue to diminish. Already, many leading sites like YouTube and Facebook have dropped support for IE 6 and many other sites serve up limited functionality and visuals to older browsers.
  4. More space: Modern browsers generally have less “chrome” and maximize your working space.
  5. Features: Over time, browser developers continue to optimize and expand their products. Modern browsers have some really wonderful and convenient features that serve a variety purposes and enhance user experience.

There are a lot of great features that modern browsers have started to adopt across the board and there’s no way that I can mention them all, but here are some highlights.

  1. Tabbed browsing: If you are still using IE6, you’re missing out on a major convenience that has been otherwise available for many years.
  2. Searching: Many browsers have a dedicated search box next to the address bar for running quick web searches. You can usually adjust the box to use your favorite search engine if the default is not to your liking. In addition, if you type a keyword into the address bar and it doesn’t match a site URL, then the browser will run a web search instead. Chrome has taken this a step farther and has eliminated the separate search field entirely.
  3. Add-ons: Browser developers have opened their doors to the community and allow other developers to create small pieces of software that add onto your browser. These are usually used to complete a discreet function like taking a screen shot of the current web page, but there are add-ons for all sorts of things like news, weather, and music, as well as number of great tools for web developers. In my experience, Firefox and Chrome have the most and highest quality add-ons.
  4. Syncing: Many browsers, including Chrome, Firefox, and Opera, allow you to sign in to your browser and synchronize bookmarks, add-ons, and other data between all of your computers and devices. This is perfect for when you stumble across something at work that you want to check out later, at home. You can create a bookmark at work and it will be right there in your toolbar when you load up the browser at home.

If you’re running an older browser and it’s in your power to upgrade or download an alternative browser, I highly recommend that you do so. At this point, you may be wondering what browser you should download. Truly, there’s no correct answer because it’s a really a matter of preference, but here’s a quick breakdown of the most common options:

  • Google Chrome: Chrome is fast, secure, has tons of add-ons, and, not surprisingly, tends to work really well with Google products like Gmail. Chrome is the default browser on my machine. Available for Windows and Mac.
  • Firefox: Firefox has recently lost some of its market share to Chrome, but is still a solid browser in many ways. It may not be quite as fast or secure, but still boasts a solid feature set and a massive amount of add-ons. Available for Windows and Mac.
  • Internet Explorer: Although Internet Explorer 10 will be coming out shortly, IE 9 is fast and secure, but lacks the add-ons of Firefox and Chrome. IE 9 is the first version that has included support for CSS3 and other emerging technologies and is definitely a large step towards bringing IE up to current web standards. Available for Windows Vista and higher.
  • Safari: Safari and Chrome are built on the same rendering engine and have many of the same features, although, in my experience, Chrome runs more quickly and is far superior in the add-on department. Safari seems to have dropped support for Windows as of version 5.1.7, so I would only recommend it for Mac users.
  • Opera: Like Chrome, Opera is fast, secure, and has add-ons, though perhaps not so many as Chrome. Opera is also a leader in the web standards community and is constantly innovating new ways to experience the web. Available for Windows and Mac.

If you made it through this whole post without downloading a new browser, do yourself a favor and test drive one of the browsers listed above. You won’t regret it.

Amazon Silk, Yet Another Web Browser

Amazon Silk logo.

Amazon’s long-awaited tablet/e-reader was formally announced Wednesday, and the conversations about whether or not it will compete the iPad are underway. I don’t much care about that. I am far more interested in the web browser that it includes.

Amazon Silk is a new web browser, built on Webkit, and that is really the news of interest here. Add to that Amazon’s super-proxy approach to help users get content more quickly and efficiently and you’ve now got a new pile of potential chaos as a web developer. It’s far too early to tell how this will shake out, but in a client meeting Wednesday I already had to address it, so I think it warrants a little context for the current state of browsers so we can consider potential developer impact.

Amazon posted a video on its brand new blog to provide an overview of Silk (with an obligatory Geocities reference):

The 400+ comments raise some questions that tend toward a common theme — in the absence of a technical explanation, when can we get our hands on an emulator? Granted, there are plenty of comments about privacy, security, and some wild speculation, but the theme is clear.

As a web developer, I can tell you that we all feel overburdened with the assault of browsers we have out there already. We can champion the ideal of targeting the specs, not the browser, but when the clients call to complain about a rendering difference, not even a problem, on another browser it can get pretty draining. As Silk comes to market we’ll need to account for it, its hardware configurations, and its coming release versions (within reason, of course).

For some context about the burden we already have, yesterday Google Chrome developer Paul Irish wrote that, only taking into consideration Internet Explorer for desktop, we’re already on track to need to support 76 versions of just Internet Explorer (including version 8) through 2020. There are some broad assumptions in his article regarding how people will use the IE document modes, but the potential is still there. Add to that the new release schedule of many browsers (Firefox has gone from version 5 to 7 in ~90 days), and then pile on the browsers available for mobile devices, and we’re already at well beyond the number of variations of browsers that we had to support even in the heyday of the browser wars.

But Silk isn’t just a web browser — it’s got a super-charged proxy server that will compress images, compile JavaScript into its own machine-readable format, and batch files into a singular, smaller download. While this is nothing new (Opera Mini has done this for some time on mobile devices), Amazon’s implementation raises the hairs on the back of my neck when I think about all the years I’ve had to troubleshoot web applications because proxy servers are caching files, munging JavaScript, brutalizing images, and generally gutting the real-time features that the web had been moving toward more and more. I don’t know if this will happen with Amazon Silk, but given my experience with Opera, proxy servers, and users in general, I am filled with apprehension.

Related

Opera responded to the Amazon Silk announcement with its own explanation of how its own “cloud-compression” technology works:

Picture of web pages being process by HAL 9000 and delivered to Borat.