Category Archives: mobile web

Blogposts on blog.futtta.be about “the mobile web” (i.e. internet on your iphone, nokia with symbian, htc with android or windows mobile or other smartphone), including links, best practices and some reviews.

Redirecting to AMP (reader mode) for mobile

I’m not a big fan of AMP but I do have it active here on this blog using the official AMP plugin for WordPress, using it in “Reader” (aka “classic”) mode. That’s as far as I want to take it, but suppose (as was the case for an Autoptimize/ Critical CSS user I was helping out) you want to redirect all mobile traffic to AMP, then you could use below code snippet to do just that.

  add_action('init','amp_if_mobile');  function amp_if_mobile() {    $_request = $_SERVER['REQUEST_URI'];  	if ( strpos( $_request, '?amp' ) === false && strpos( $_request, '&amp' ) === false && ! is_admin() && wp_is_mobile() ) {      if ( strpos( $_request, '?' ) === false ) {        $_amp = '?amp';      } else {        $_amp = '&amp';      }      $amp_url = home_url() . $_request . $_amp;      wp_redirect( $amp_url );      exit;    }  }  

It might be a little rough around the edges, but it (mostly) gets the job done ;-)

Mijn m.deredactie.be-alternatief nu ook met Sporza

futttas-sporzaHet was exact een jaar geleden dat ik nog iets over mijn m.deredactie.be-alternatief schreef en het was nog langer geleden dat ik er aan gesleuteld had. Omdat ik tussen mijn echte werk en mijn WordPress plugin spielereien nog wat tijd had, heb ik één en ander verbeterd;

  1. Je kunt nu ook Sporza-nieuws lezen
  2. Op PHP-installaties zonder APC-support (apc_store/ apc_fetch) wordt de cache nu op disk bijgehouden
  3. Op PHP-installaties zonder CURL-support wordt nu teruggevallen op file_get_contents
  4. Een reeks kleinere UI-verbeteringen en fixes voor PHP-notices
  5. Getest op PHP 5.2, 5.5, 7.0 en HHVM (op openshift)

De (crappy) sourcecode staat nog steeds op GitHub, bug-meldingen of pull-requests zijn daar zeer welkom :-)

Mobile web vs. Native apps; Forrester’s take

So web is going away, being replaced by apps? Forrester researched and does not agree;

Based on this data and other findings in the new report, Forrester advises businesses to design their apps only for their best and most loyal or frequent customers – because those are the only one who will bother to download, configure and use the application regularly. For instance, most retailers say their mobile web sales outweigh their app sales, the report says. Meanwhile, outside of these larger players, many customers will use mobile websites instead of a business’ native app.

My biased interpretation; unless you think can compete with Facebook for mobile users’ attention, mobile apps should maybe not be your most important investment. Maybe PPK conceeded victory too soon after all?

QuirksMode: “The problem with Angular”

I’ve previously already expressed my doubts about the how well-suited AngularJS is for mobile web development (in Dutch, though, as I was discussing the merits of the mobile news-site of the Flemish broadcaster VRT).

QuirksMode’s PPK dove in a lot deeper in his “The problem with Angular“, stating amongst other things;

Angular is aimed at corporate IT departments rather than front-enders, many of whom are turned off by its peculiar coding style, its emulation of an HTML templating system that belongs on the server instead of in the browser, and its serious and fundamental performance issues. I’d say Angular is mostly being used by people from a Java background because its coding style is aimed at them. Unfortunately they aren’t trained to recognize Angular’s performance problems.

The performance problems PPK mentions are not the initial download of angular.js in the browser (which is one of the reasons why I dislike it), but the fact that angular.js does a huge amount of DOM-manipulations, which are costly, especially on mobile. This quote says it all;

Although templating is the correct solution, doing it in the browser is fundamentally wrong. The cost of application maintenance should not be offloaded onto all their users’s browsers — especially not the mobile ones. This job belongs on the server.

But do read PPK’s article for more insights on Angular and the road it is heading down with AngularJS 2.0!

Uw eigen mobielere deredactie in 5 stappen

openshift configureer uw redactieuwredacie op openshift uwredactie op openshiftOok al kunt ge mijn alternatieve mobiele redactie hier bekijken, dan zout ge toch, om redenen die geheel de uwe zijn, misschien liever uw hoogst persoonlijke redactie hebben?

Wel, dat kan in 5 eenvoudige stappen dankzij Openshift, het freemium PAAS platform van Red Hat en dat gaat ongeveer zo:

  1. Maak een gratis account aan bij Openshift
  2. Klik op “Create your first application now
  3. Vul PHP in in het zoekvenster en selecteer de PHP 5.4 cartridge
  4. Vul een naam in voor de public URL, copy/paste https://github.com/futtta/redactie in het source code veld en klik op “Create application
  5. Even geduld terwijl uw eigenste redactie wordt aangemaakt. In het laatste scherm kunt ge eventueel git access configureren (“Will you be changing the code of this application?”) of direct op “Visit app in the browser” (in mijn geval naar http://mijnredactie-futtta.rhcloud.com/) klikken.

Spreading the news, tiens!

Verder sleutelen aan mijn m.deredactie.be-alternatief

futtta-redactie-tabs-compressorDat ze daar aan de Reyerslaan niet stilzitten; http://m.deredactie.be/ is nu ook bruikbaar op een JavaScript-loze browser! Dat klinkt misschien onbelangrijk, maar zo een basis-versie die werkt, ongeacht de browser, is een grote stap in wat ik de juiste richting acht. Spijtig genoeg blijft de site voor de rest onder Google’s verwachtingen en de laadtijd en total download size blijven een mobiele site onwaardig. Daar ten gronde iets aan veranderen binnen het kader van de gekozen architectuur (MVC in de browser) zal niet eenvoudig zijn.

Daarom ben ik dus ook niet blijven stilzitten en sleutelde ik verder aan mijn alternatief voor m.deredactie.be. Video werkt nog steeds niet (misschien moet ik eens kijken of ik iets kan doen met de JS-file van de VRT), maar onder andere deze verbeteringen zijn er wel bij:

  • Op de homepage hebben “hoofdpunten”en “laatste nieuws” nu elk een eigen tab (ik ben zelf niet overtuigd van de kleurenkeuze, maar soit).
  • Op de detail-pagina’s kun je artikels delen op sociale media (met lyteshare.js)
  • De html is opgekuist en valideert nu bijna op de W3 validator (bijna maar nog niet helemaal; de imgsrc attributen op placeholder-divs voor image lazyloading mogen niet).

Daarnaast zitten er nog een handvol bugfixes en andere kleine wijzigingen in, cfr de  “done” lijst op Trello. Pagespeed Insights score en webpagetest.org testresultaten zijn nog steeds “up to snuff”. De geüpdate code staat op GitHub en het resultaat (als je het projectje niet zelf wilt/ durft/ kunt installeren) zie je op http://futtta.be/redactie/.