Category: Software

Android Instant Apps and the web

Today‚Äôs Google I/O keynote intro¬≠duced a new tech¬≠nol¬≠o¬≠gy called Android Instant Apps. In a nut¬≠shell, Instant Apps dis¬≠plays a small, focused por¬≠tion of an app when a user clicks on a relat¬≠ed link ‚ÄĒ even if the app isn‚Äôt installed on their sys¬≠tem. The exam¬≠ple used in the keynote was the Buz¬≠zfeed Video app: when a user clicks on a URL to view a Buz¬≠zfeed video, and doesn‚Äôt have the app installed, the URL is inter¬≠cept¬≠ed by the Android sys¬≠tem and opened in a part of the app, deliv¬≠ered from the Google Play servers, rather than in a browser.

Instant Apps requires the app cre­ator to build their app in a pre­scribed way, using deep link­ing and set­ting up mod­u­lar views, but it appar­ent­ly only takes about a day to mod­i­fy an exist­ing app to work in this way. There are still some unan­swered ques­tions about Instant Apps, not least in regards to whether their use is optional.

This cer¬≠tain¬≠ly solves the biggest prob¬≠lems with apps: hav¬≠ing peo¬≠ple find them, and install them. And from the per¬≠spec¬≠tive of the user it prob¬≠a¬≠bly makes no dif¬≠fer¬≠ence if they ful¬≠fil their task through the medi¬≠um of a web¬≠site, app or Instant App‚Ää‚ÄĒ‚Ääpro¬≠vid¬≠ed the medi¬≠um is seam¬≠less to tran¬≠si¬≠tion, fast to load, and focused on the task.

But for devel­op­ers, an Instant App doesn’t seem to offer much val­ue beyond a web­site: as it’s an Android-only ser­vice, the URL that launch­es it can be shared across iOS and desk­top also, mean­ing there is still a dupli­ca­tion of effort to build that web presence.

So then what’s the incen­tive of putting in the extra work for Instant Apps? Per­haps it exists only when the app can offer some­thing that the web is unable to, such as access to sys­tem-lev­el APIs (like pay­ments); or per­haps when the web alter­na­tive isn’t optimised.

Oth­er­wise this seems like it’s a drop-in replace­ment for the web; and, as Klint Fin­ley said when dis­cussing the con­cep­tu­al­ly-relat­ed uni­ver­sal links on iOS:

If you want apps that work like the web, the web is still your best choice.


Innovation in Mobile Browsers, and the iPhone

Last week I wield­ed the mighty pow­er of Twit­ter to say this:

If you use an iPhone I feel a bit sor­ry for you, because you’re miss­ing out on the real­ly inno­v­a­tive stuff hap­pen­ing in mobile browsers.

A few peo¬≠ple asked me what I meant by that, per¬≠haps think¬≠ing that I was crit¬≠i¬≠cis¬≠ing iPhones in gen¬≠er¬≠al (I wasn‚Äôt[1]), so I want to take a moment to elab¬≠o¬≠rate on my state¬≠ment. To do that, I‚Äôll begin with a story.

Read the full article

Remote debugging with weinre

Remote debug­ging of sites on mobile and tablets is get­ting a lit­tle eas­i­er, but still has too many pain points; for exam­ple, while you can debug iOS Safari through desk­top Safari, you can only do so with a sin­gle device at a time; and to debug on Android you have to down­load and install the full SDK, and even that only works with Chrome.

Adobe Edge Inspect is use­ful for remote debug­ging but is lim­it­ed by many require­ments: you must install an app on each tar­get device, so it won’t work on any plat­form oth­er than Android or iOS; it uses Chrome desk­top for the debug tools (although a new open API may open that to oth­er browsers); and you must buy a sub­scrip­tion to unlock mul­ti-device debugging.

If you want to do tru­ly cross-plat­form remote debug­ging on the cheap you need weinre, a free and open source project which is actu­al­ly the basis of Edge Inspect; Adobe bought the tech­nol­o­gy, then released the orig­i­nal source under an open license. wein­re’s quite easy to install, although it does­n’t appear to be, so in this arti­cle I’m going to lay out the few sim­ple steps required to get it up and running.

Read the full article

Creating a custom icon font using IcoMoon

As you prob­a­bly know, icon (or, sym­bol) fonts are a great way to imple­ment scal­able, styleable icons which work across pret­ty much every brows­er (every one that sup­ports web fonts, any­way). There are many top qual­i­ty icon fonts avail­able, such as Pic­tos and Font Awe­some, but some­times you’ll want to cre­ate your own bespoke icons. Github wrote detailed instruc­tions of how they made their icon set, Octi­cons, in their post The Mak­ing of Octi­cons, but that relies on using some pro­fes­sion­al tools. In this arti­cle I’m going to show sim­ple alter­na­tive method that uses the bril­liant free tool, Ico­Moon. Read the full article

50 fantastic tools for RWD

As part of .Net mag­a­zine’s Respon­sive Week, I’ve updat­ed an arti­cle by Denise Jacobs to now bring you 50 fan­tas­tic tools for respon­sive web design.

On Adobe Muse

Today Adobe released a pre¬≠view of their new WYSIWYG web¬≠site cre¬≠ator, Muse. Short¬≠ly after, I had a good old moan about it on Twit¬≠ter. Not, as you may think, because I feel threat¬≠ened by web¬≠site cre¬≠ation being made easy ‚ÄĒ it‚Äôs been easy for ages, but ‚Äėeasy‚Äô does¬≠n‚Äôt always mean ‚Äėgood‚Äô ‚ÄĒ but because it gets a few fun¬≠da¬≠men¬≠tal things bad¬≠ly wrong.

My code purist side reject¬≠ed it because the markup it out¬≠puts is hor¬≠ren¬≠dous; if you don‚Äôt believe me, take a look at the code for one of their exam¬≠ple sites, ‚ÄėLucid Syn¬≠er¬≠gy‚Äô. My edu¬≠ca¬≠tor side reject¬≠ed it because it teach¬≠es you noth¬≠ing about how a web page is made; I learned to code by using Microsoft Front¬≠Page many (many) years ago, and under¬≠stood HTML by edit¬≠ing the source of the doc¬≠u¬≠ment and tweak¬≠ing it until I got it the way I want¬≠ed ‚ÄĒ but Muse has no code view, so this is made very difficult.

But the real prob¬≠lem with Adobe Muse is deep¬≠er than that: it‚Äôs that all seman¬≠tic sense is com¬≠plete¬≠ly removed from the page. There are no head¬≠ings, no lists, all text is in p ele¬≠ments, inline styles are applied with span rather than em/i/b, etc; this gives no struc¬≠ture, no mean¬≠ing, no about¬≠ness to your page, which at the very least means penal¬≠ties for SEO.

And worse still is that there’s no doc­u­ment flow; all the ele­ments you add to the page are posi­tioned rel­a­tive­ly to their par­ent and fol­low no par­tic­u­lar order, which is pret­ty bad for search engine spi­ders (and hence your SEO), but absolute­ly ter­ri­ble for vis­i­tors using assis­tive technology.

It’s the prod­uct of a com­pa­ny that cares only about appear­ance, and noth­ing for con­tent. As @paulrobertlloyd said on Twit­ter:

It’s not that the code Adobe Muse gen­er­ates is ugly, it’s that it’s meaningless.

The issue with the lack of seman­tic ele­ments is not insur­mount­able, it just needs some work by Adobe before the final release. The lack of doc­u­ment flow and con­tent order is more seri­ous, how­ev­er, and will need a com­plete rethink; I hope that this happens.



I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment