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

Letting Mobile Users See Desktop View of RWD Site

Originally posted on my blog on January 11, 2013.

Bruce Lawson tweeted out a seemingly random musing today that I have pondered myself — what if, while on a mobile device and surfing a RWD web site, I want the desktop version of a site?

There are many reasons as a user that this might be the case, ranging from poor development practices that hide chunks of content you need to see to just wanting to know what it looks like.

Clearly it’s enough of a use case that mobile browsers such as Opera Mobile, Chrome, Firefox, and so on, have a feature to request the “desktop” version of a site from a menu built into the browser.

Except that feature doesn’t work with a RWD-powered site because media queries, typically based on viewport width, are used to deliver styles for traditional desktop window sizes. The browser feature only sends a different user agent string (bypassing terrible user agent sniffing) but doesn’t do much else. Your 320-pixel-wide device is still 320 pixels wide, and the media queries know it.

Until the mobile browser makers report a false viewport (or, rather, assume one when choosing CSS from a set of media queries), we’re kind of stuck. While I have many ideas on how that might work, that won’t address the issue today.

While I had bandied about an idea to address this on the redesign of my site a couple years ago, it took a client request last year to get my team the time to finally code a solution.

There are some core steps the hammer out in the logic of any solution:

  1. Put a link on the page to view the desktop layout. I prefer to have it in the raw HTML over writing it in with script.
  2. In the more mobile-friendly CSS files allow this link to display. In the more desktop-friendly CSS files hide the link.
  3. Either using a round-trip to the server or client-side script, remove the media query logic and serve up the “desktop” CSS.
  4. Warning for Europeans: cookies. Set a cookie with that preference for the user. Whether it is for the current session, forever, or somewhere in between is worth an internal discussion.
  5. Now display a link to view the “mobile” version of the site. Again, this can be done with or without script.
  6. If the user clicks the link to see the mobile version, re-instate all your media queries, clear the cookie and pretend nothing happened.

This process is a bit oversimplified, but it covers the broad strokes.

There are some hurdles, of course. Your users might not understand what you mean by “desktop” or even “mobile.” You could make the link to get out of one of the views too hard to find. You could bump up against expectations set by the mobile browser feature to request the desktop site. If you serve mobile styles to IE6 users, you could confound them if you don’t clear the link from the page for them. And so on.

You can play around with what we implemented for our client at CHSBuffalo.org. View the source to see the styles and script. There is obviously logic on the server side, but you can make up your own for your own server platform.

These screen shots should give you an idea of what to expect when you visit the site:

The CHSBuffalo.org site as seen on an iPhone and on a Nexus 7, all styling determined by media queries.
CHSBuffalo_iPhone_desktop CHSBuffalo_Nexus7_desktop
The CHSBuffalo.org site as seen on an iPhone and on a Nexus 7 after clicking “View desktop layout” (with the zoom as the user would initially see it). The link to return to the mobile layout is at the top, though not as obvious as it could be.
CHSBuffalo_iPhone_desktop_oops
This is what the user on an iPhone sees as soon as the desktop view loads—note the link to return to the mobile view is nowhere to be found. We did a poor job there and will have to fix it. Don’t make the same mistake if you try this.

Related

HTML5 and Enterprise on Mobile

This post originally appeared on my blog on Saturday, March 10, 2012.

An Argument

HTML5, CSS3Early last week .net Magazine posted an article Why HTML5 is not the choice for enterprise mobility by David Akka. The article starts off with the statement HTML5 is being hailed as the programming language… That’s as far as I got before I realized this article had a fundamental misunderstanding of HTML5.

If you’ve read my blog enough, you know that I have been constantly struggling with how developers have shot themselves in the foot by allowing HTML5 to mean far more than just the HTML5 specification. Reading the comments to the article you can see that some people think the author is talking about just the mark-up language, and others seem clueless that there is a markup language.

I soldiered on and read the rest of the article. I realized that the main thrust of the article is less a technical assessment of HTML5, but is instead a discussion of how this collection of specifications is seen by so very many as a panacea for web application development. The author makes some valid points about security (specifically user-based, such as phishing scams thanks to bad browsing habits), lack of robust synchronization, and the ongoing changes to the W3C standards that can wipe away development efforts when the browser makers decide to change direction to match.

The author’s inability to clearly and correctly identify the appropriate specifications and speak to examples left the door wide open for anyone who rails against words such as “enterprise” to attack the article on its lack of technical merits.

A Response

In a response post, Why HTML5 is a choice for enterprise mobility by Kevin Sweeney, the three core arguments from Akka are challenged. The security issue is brushed aside as a function of poor development. The asynchronous nature of the web is addressed out of hand as a function of images and CSS, not so much about client-server communication and how best to lock and release records (for example). The argument about HTML5 as an unfinished specification isn’t addressed any more than to suggest that using it will make it wrap up sooner, but still with a fundamental misunderstanding of just which of the W3C specifications are really the ones in question.

A Response to the Response

Akka responded with another post, Why HTML5 is not the right choice for enterprises right now – or the defence of David Akka, which gets into some more detail on the technical side, but still gets some terminology wrong. As the one comment on the post demonstrates, people will skip the arguments within just to go after the technical detail, making the response effectively moot.

My Thoughts

When I get past all the misunderstandings of the specifications in the posts, including HTML5, I tend to agree with the overall message of the original post that rapid adoption, possibly for the sake of being cutting edge, is a real issue. This also assumes, of course, that the writer of (and responders to) the original article actually understand what “enterprise” means.

Security

So much of modern web security is about defending against user-initiated attacks — phishing scams, malware, adware, viruses-as-email-attachments, and so on — that I think the real issue with security is really a combination of keeping users from doing daft things and protecting your environment when they do.

Add to this developers who haven’t been inculcated in an enterprise environment and maybe don’t think about the sensitivity of data passed over the wire, or enterprise developers re-positioned to use these new web technologies, and you have some further risk.

Factor in web beacons that seem to come with the territory of developing all the “new shiny” and there is also an end-user security factor to consider. While a developer may not embed a Facebook button or an ad banner on an enterprise web app, that doesn’t mean they aren’t in the code borrowed from somewhere else, especially if the developer is new to the game.

Synchronicity

I’d like to think every developer has already built a system to lock records — ideally one that doesn’t halt all other operations on the system. This should always happen at the server level. The challenge here is how to handle dropped connections, users who don’t “log out,” and the other trappings of a stateless protocol propped up by a scripting language that has to manage calls to an API on the server that actually does the real work.

This can be addressed and has been successfully on the desktop. On mobile it’s a bit trickier with more likelihood of flaky connections and long wait times. It doesn’t need to be, but too many scripting solutions that ping the server (maybe for XML, maybe to order a pizza) don’t have clean methods of handling dropped connections and can end up leaving users stranded.

While that’s not the technology’s fault it is something that, lacking a clear standard, requires each company to re-invent for itself.

Unfinished Standards

Many sites are leaning on the W3C Web Storage specification (which is not HTML5, but is lumped in with it). If you’ve been paying attention over the last week you have seen a battle over this specification, with some developers calling for its termination in favor of a solution like Mozilla’s IndexedDB or the now defunct WebSQL W3C specification.

Those developers who might have wanted to use WebSQL only to see it get pulled may now fear the same thing happening to the localStorage API (Web Storage). Web applications they built to support it may need to be revisited. Clients, projects, etc. may need to be updated. Dollars will need to spent. This is enough to make a company hesitate.

If you aren’t in the loop, check out some of the ongoing discussions and remind yourself that anyone in enterprise development through web apps (mobile or otherwise) needs to stay on top of these battles to make ongoing informed decisions.

Conclusion

Look to the business case. Don’t fall for the arguments against enterprise mobile web applications just because someone is afraid of a new paradigm, but instead make sure the resistance is based on sound business and technical considerations. Don’t fall for the arguments in favor just because of a knee-jerk reaction against “stodgy” enterprise models or a gee-whiz fanboy/girl mentality to all things mis-labeled as HTML5.

Ongoing Misunderstanding of Flash and HTML5

This post originally appeared on my blog on Saturday, March 3, 2012.

The latest article that uses absolutes and broad generalizations to imply an otherwise non-existent struggle between Flash and HTML5 is from UX Booth, “What the Demise of Flash Means for the User Experience.” To be fair to this article, I see regular missives on Flash vs. HTML5 and this particular UX Booth article is just an example of many of them in one easy to cite place.

The opening gives away the false premises for the rest of the piece:

Adobe’s decision to cease development of the mobile Flash platform and increase their investment in HTML5-related efforts created perhaps the final piece of conclusive evidence that HTML5 is the current go-to technology for creating ubiquitous user experiences regardless of device.

First I have to accept that the author is talking about more than the HTML5 specification and is also referring to CSS3, JavaScript, and the W3C specifications that are related to HTML5. This lack of clear delineation chips away at the argument.

Adobe has held that the fragmentation of mobile devices is too hard to keep up with on its own. Flash will still exist for mobile wrapped in AIR applications instead, and Flash is not going away from the desktop. Adobe’s decision to increase investment in HTML5 (via Edge and to a lesser extent Muse) is mostly unrelated since there is a market for an HTML5 authoring tool independent of Flash.

Not only is this neither conclusive nor the final piece of evidence that HTML5 is the current go-to technology, this is anecdotal evidence at best. In addition, HTML5 itself is nowhere near complete and the element often regarded as the Flash-killer, canvas, isn’t anywhere near as robust as Flash and still lacks strong scripting or styling support in the specs.

I think it’s fair to challenge the claim that HTML5 creates “ubiquitous user experiences regardless of device” when you consider all the polyfills and shims that need to be implemented to create similar experiences on a few devices. It’s also fair to say that my netbook does not handle some of the related HTML5 specifications the same as my tablet or mobile phone, partly due to various levels of hardware and browser support. Let’s not even get into video and audio codecs or the touch events specification (neither of which are part of the core HTML5 specification).

HTML5 excels at giving users a delightfully inconsistent experience on any device through the concepts of “graceful degradation” and “progressive enhancement.”

Those terms pre-date HTML5 and I can do both with HTML4 and CSS2. The author continues on and cites responsive design as a feature of HTML5, even though my own site is an example of an HTML4 site using responsive design to adapt to assorted displays.

Additionally, more than 90 percent of all smartphones and tablets are HTML5-enabled, which means that all the benefits of HTML5 can be utilized today to provide impressive mobile websites.

The author’s math doesn’t bear out the assertion — by the author’s numbers, 10% are not HTML5-enabled and so cannot benefit from HTML5. For the other 90% that are, even they cannot enjoy all (author’s word) the benefits of HTML5 today.

Making or upgrading to an HTML5 site can be as minimal as simply using HTML5’s doctype […]

The implication here is that simply changing a doctype gets you all the benefits of HTML5, when in reality you still have the same HTML, CSS and script.

The post never does answer its own question — what does the demise of Flash mean for the user experience? From the article, more HTML5 use. In itself that doesn’t tell me how the user experience is affected, just how developers are affected. If the developer does a good job, the user experience doesn’t need to change. The user shouldn’t need to worry about the underlying technology.

Too many HTML5 articles and posts today, like this one, work to promote the markup language (and usually CSS3 and JavaScript, even if they don’t know it) by contrasting it against another technology that is falling away or is just a popular target of derision. The pro-HTML5 cheering is easy when another technology has already been recognized as out-of-date, but this doesn’t do anything to advance HTML5 and its related specifications.

I’d love to see more practical discussions of what HTML5 (and related specs) can do today along with all the nifty experiments that are moving the collection of specifications along.

The Mobile Web

Author: Garret Hussak
February 15, 2012

If you’ve been listening to the word on the street, you’ve noticed…everyone’s talking mobile. We now expect that companies will provide us with access to their sites from mobile devices like smartphones and tablets, and developers are being called upon to create mobile sites and applications more and more often.

So, Why The Push For Mobile?

It’s simple – people are using mobile devices and the technology isn’t going away.

  • By one count, there are 5.3 billion mobile device subscribers in the world.
  • In the 4th quarter of 2012, manufacturers shipped more mobile devices (100.9 million) than PCs (92.1 million).
  • According to one source, mobile browsing has jumped almost 200% worldwide in the past year and is closing on 10% of total browsing.
  • It is estimated that by 2014, mobile browsing will surpass desktop browsing.

What To Consider?

While we can probably agree that mobile development is “where it’s at,” we need to remember, of course, that developing for mobile devices is it’s own animal, with both limitations and advantages that need to be taken into account:

  • Smaller screen size
  • Potentially slower connection speeds
  • Higher resolution displays
  • Access to the user’s location with GPS & other technologies
  • Access to the user’s camera
  • Access to the user’s contacts

How Do We Implement Mobile Functionality?

There are a variety of methods to reaching mobile users and catering to the benefits and limitations of mobile devices:

  • Mobile Applications – Apps are a great, often fun and engaging way to present content to people on the go. But it’s important to remember that apps are platform specific and can a long time to develop. You also need to take individual device capabilities into account when creating mobile apps.
  • Mobile Web Sites – Mobile versions of web sites that are either already in place or are being redesigned or developed from scratch are a perfect way to ensure visitors have the best possible experience when they access your site on their mobile devices. Mobile sites come with some great advantages over applications, as well, since they don’t have to be platform specific (though they can be, if necessary) and usually have a faster development time. Device capabilities also aren’t the issue they can be when developing apps.

Finally, Let’s Talk About Some Of The Technological Hurdles Involved In Mobile Development

As I mentioned earlier, mobile development is its own animal and we have to keep a few important practicalities in mind when we think about a mobile project:

  • The “old-school” idea that tables can be used for layout simply won’t fly on mobile devices. In a mobile environment, elements need to be able to stack as opposed to live side-by-side as in a desktop element.
  • Fixed widths won’t work. A 450px element might fit great on a desktop version of a site, but on most mobile devices that will have be switched to a fluid width.
  • Different users will see things (slightly) differently. Each device can have a different display resolution, aspect ratio, and browser.
  • Flash is dead slow and dying. Content previously presented using Flash should now be displayed using one of many mobile friendly technologies.

Think You’ve Got A Great Web Site? Five Reasons It Needs To Change, Today.

Author: Steve Kiernan II   11/30/11

In our consulting practice, we’re often called upon to help companies redesign their web sites-nothing extraordinary there. What is extraordinary is how often we hear that the primary driver for changing a corporate site hasn’t been defined at all. This means that, when we’re engaging a client in a design/development project, our first question isn’t “What do you want on your new site?” it’s “Why do you want to change your site?”

Not sure what your own answer to that question would be? I’ll offer 5 reasons why it may be time to redo your web site:

1. Your site was designed with you in mind

Sure, you know what you want your site to be but unless you, or other people in your firm, are your company’s primary customer why would you spend time, effort, and dollars marketing to yourself? Don’t build sites that you love, build sites that your customers will love. I know it sounds like common sense, but ask yourself (and answer honestly) if your current site appeals to your customers or to you.

If you find that it’s the latter no worries, you’re not alone and identifying the issue is more than half the battle. Now, go find out what appeals to your customers and implement some changes!

2. You have a site just because your competition has one

To be clear, I’m an advocate for having a web site, especially if your competitors have them. But your site needs to be part of your ongoing business development process, one that you’re actively planning and executing. The “If you build it, they will come” strategy isn’t a strategy.

If you are not doing anything with your web site today, start thinking about how you can use it to engage people and create a dialog with your customers and prospects!

3. You haven’t updated your content in the last 30 days

This is an easy, but often overlooked, one. Look at your site’s metrics (we use Google Analytics on all our sites), specifically the “new vs. returning visitors” numbers. The quick regression is this: returning visitors turn into customers and customers turn into repeat customers. If you’re not giving people a reason to revisit your web site, you’re missing huge opportunities to generate additional revenue over the long term. Years ago it may have been ok to create a static web site based on your fancy tri-fold brochure but today, that’s a recipe for failure. I’m not suggesting that you turn your web site into a veritable cnn.com with ever-changing, up-to-the-minute information, but I do believe you need to provide valuable content that’s updated on a regular basis so that today’s visitors come back next week to see what’s new.

If the content on your web site today is the same as it was last year, it’s time to create new content! 

4. Your web site doesn’t consistently generate sales leads

Your web site should be the center of your firm’s marketing universe. A good site will help you measure all of your marketing activities and provide concrete evidence about what’s working and should continue and what should be changed to increase its effectiveness.

If your web site is just sitting there, not generating leads, what exactly is it doing for you?

5. Your web site isn’t mobile friendly

You can choose to ignore mobile, but you may do so at your own peril. The impatience of the average visitor to a corporate web site is well known-we give most sites less than 10 seconds to make an impression. And guess what? It’s even worse on the mobile web, and mobile web use is soaring so ensuring your site is accessible on mobile browsers is a good idea for today’s businesses.

If your web site isn’t readable, and fast, on a mobile device, it’s time to go mobile!