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.

Nieuwe m.deredactie.be niet meer mobiel!

by

(Update December 2014: ik bouwde zelf een alternatieve versie die sneller en toegankelijker is op http://futtta.be/redactie/)

m.deredactie.be homepageIk ❤ mobiele websites, zelfs op de desktop. Bij het refreshen van m.deredactie.be vandaag (12 mei) kwam ik op de nieuwe versie uit. De developers hebben zich ongetwijfeld goed geamuseerd om niet alleen de nieuwe look & feel te implementeren, maar ook om de achterliggende technologie grondig te herbouwen naar een JavaScript-based UI volgens de “single page application“-filosofie (iemand heeft zich wel héél erg in angular.js verdiept, daar aan de Reyerslaan).
Maar ik, eenvoudige gebruiker, ben minder enthousiast. De site ziet er misschien moderner uit, maar is minder bruikbaar; zonder javascript is er niets te zien (neem een voorbeeld aan “cut the mustard“, progressive enhancement zoals de BBC die predikt), “above the fold” staan er enkel afbeeldingen en vooral; alles is plots trager!
Want over snelheid kun je niet discussiëren; sneller is beter, trager is slechter, zeker mobiel. De voorgaande versie van m.deredactie.be “woog” pakweg 150KB en laadde volledig in minder dan 2 seconden, maar de nieuwe versie tikt af op 2560KB in 6 seconden (gemeten op webpagetest.org met “cable” bandbreedte-profiel, met “fast mobile” wordt dat 17s).
Is m.deredactie.be een mobiele site? 2 megabyte aan data zeggen van niet.

Facebook force-feeding Messenger, going mobile web instead

by

So Facebook wants me to install yet another permissions-greedy app just to read messages? That is so frustrating! So no, don’t think so guys. I’m putting Facebook back into the (slightly) safer sandbox that is the mobile web;
facebook forces users from app to web
So thanks for reminding me why I love my mobile browser that much Facebook!

Mobile WP YouTube Lyte; no-one said it would be easy!

by

WP YouTube Lyte and mobile, I must be honest, it is not an easy marriage. Light YouTube Embeds focuses on optimizing performance by displaying a dummy player which takes less then a tenth of what a normal YouTube embed requires. Only when clicking on that dummy player, the real YouTube embed is loaded and auto-played. Simple and efficient, no?
Mobile is an whole other ballgame. For starters, there’s no autoplay on YouTube mobile embeds. At all, because Apple prohibits autoplay in HTML5 video and browsers on Android seem to agree. So the trick with the dummy player does not work (unless you would accept users having to click twice) and as a consequence, WP YouTube Lyte on mobile loads the (mobile) embed straight away.
But that’s not all; for audio-only to work, auto-hide has to be disabled (as the bottom controls are the only player elements that remain visible) but that despite setting autohide=0&controls=1, controls still remain hidden in mobile YouTube embeds, rendering the audio-only player UI useless, as a consequence of which WP YouTube Lyte has to show the full video on mobile. And YouTube playlists on mobile are known to be broken as well, one can only hope this is being worked on by YouTube.
And then one week ago a user posted about yet another mobile-specific problem on the wordpress.org WP YouTube Lyte supportforum; when rotating your smartphone or tablet, the size of the embedded video did not adjust. The reason in a nutshell; while LYTE (the dummy player) is responsive, the YouTube iframe-embed that is loaded on mobile is not. To solve this, I added an orientationchange event handler (WebKit-only to my disappointment, although I do have an alternative approach that I might introduce at a later stage) in version 1.3.3 which I released earlier today, re-requesting the embed when the orientation changes.
The conclusion; WP YouTube Lyte works on mobile, but it is not the most elegant of solutions at this particular stage. So in the spirit of full disclosure; if desktop & performance are key, then WP YouTube Lyte remains one of the best solutions for YouTube on WordPress out there, but if your main target audience is mobile web, you should at least be aware of these limitations (some of which also exist outside of WP YouTube Lyte).

Why I love the mobile web

by

This is why I’m a big fan of good mobile websites; the normal BBC Sport Formula 1 page loads in 6 seconds, where the mobile version loads in a mere 2 seconds (when over cable, DSL and 3G are off course slower). Same content, less clutter and based on progressive enhancement for ultimate responsiveness (from low-end phone on a mobile data network to a tablet on WiFi). Guess which site I use on all my devices (smartphone, netbook, the family tablet and my work laptop)?
The details, for both document complete and fully loaded (between round brackets) as seen from the Brussels webpagetest.org node using IE9 and the cable-bandwidth profile;

bbc sport desktop thumbnailbbc sport mobile
load time 6.011s (7.371s) 2.057s (3.243s)
download size 988 KB (1015 KB) 184 KB (657 KB)
requests 134 (141) 32 (65)
test report webpagetest.org result webpagetest.org result

Notice the big difference between document loaded and fully loaded on mobile; that’s where the progressive enhancement kicks in. If you visit the same mobile site with a small screen-size device or without JavaScript, page load time drops to 1.467s for just 76 KB.
An even more extreme example; the desktop news-site for the VRT (the non-commercial broadcaster here in the northern part of Belgium) loads in 10,598s (11,482s) for a whopping 4.337 KB (4.406 KB) (on cable, it gets way worse when on DSL-bandwidth!) while their (one site fits all) mobile site only needs 0,869s (1.475s) for 116KB (120KB). Guess which site I use?
The conclusion is simple; don’t assume that just adding some mediaqueries will make your dog-slow site truly mobile-ready. It’s 2013 and websites should be lean and mean, but most of them still remain way too fat for our smartphones.

The best WP YouTube Lyte to date!

by

Today WP YouTube Lyte 1.2.0 got finally pushed out the gates! This new version is beyond any doubt the best version to date, with the following new features:

  • LYTE embeds are now fully responsive
  • automatic inclusion of scheme.org microdata (VideoObject) (also known as “rich snippets”)
  • even better performance (less requests; was 5, now 3)
  • updated to the current YouTube look & feel, see this YouTube video about microdata:
Introduction to Rich Snippets
Watch this video on YouTube.

Although I did go through a small beta-cycle, with feedback from 5 users (thanks guys), I am pretty sure there still are bugs that will rear their ugly head in the following days (some strings haven’t been translated yet, for example). Do contact me, add a comment here or create a post on the wordpress.org forum in case you encounter unexpected behavior!

WP YouTube Lyte 1.2.0: beta testers needed

by

Yesterday I pushed a beta version of the long overdue 1.2.0 to the SVN trunk at wordpress.org. This is the version at least some of you have been waiting for, as it includes the following new features:

  • LYTE embeds are now fully responsive
  • automatic inclusion of microdata
  • less in JavaScript, more in CSS
  • better performance: even less requests (from 5 to 3), with one CSS sprite containing the player UI.
  • updated to current YouTube look & feel, which results in something like this (Ultraïsta‘s Smalltalk in a Four Tet remix):
Ultraísta - Smalltalk (Four Tet remix)
Watch this video on YouTube.

But don’t go running off to your WordPress admin screens just yet, there’s no update notification to be seen there. This is very much still work in progress: the microdata-stuff isn’t complete yet, I’ll probably load the CSS differently, I’m still not sure what widget sizes will be supported, the translations have to be updated, there’s some PHP notices to take care of … And most importantly: as this isn’t just another small, incremental release, we need lots of testing.
So I’m looking for people who want to join in on the fun and test the in-development version on their blogs. To do so, download the zip-file from http://downloads.wordpress.org/plugin/wp-youtube-lyte.zip and (optionally) drop me a line so I know who I have to ping when I push an update out. I’m looking forward to receiving feedback from you guys & girls!

Are you wishing WP YouTube Lyte a responsive new year?

by

I’m spending some of the last hours of 2012 as a preparation for one of my 2013 resolutions; a new version of WP YouTube Lyte that will be fully responsive. I just finished a “template” (i.e. plain static HTML + CSS, not integrated in the plugin yet) which I’m pretty happy with.
It features:

  • A responsive player which in this test-case means a width of 820, shrinking when needed. The default width will remain an option.
  • Closer to current YouTube look & feel with a black play button that becomes red on hover
  • All player chrome loaded from just one image sprite (2 images in current, non-responsive version)
  • Embedded microformat data for better search engine discovery (will probably be configurable, “off” by default)
  • Works on all browsers (although e.g. positioning the play-button without CSS3 calc in e.g. IE8 and below is less precise)

You can check out the template on http://dl.dropbox.com/u/9207036/new_lyte_test.html. Feel free to give feedback on this early test-implementation.

Firefox Mobile 16 & 17: continuous improvements

by

I updated Firefox Mobile Beta on my Samsung Galaxy SII a couple of days ago to version 16 and out of curiosity I participated in the pissing-contest which is html5test.com. It scored a whopping 372 points, which apparently makes it the best mobile browser (for now).
More important, as it is an immediate and noticeable advantage: reader mode. Reader mode,  as seen in the screenshots on the right, allows me see articles on e.g. the chaotic, non-responsive dewereldmorgen.be in a non-crowded context which is optimal for reading the article.
I also installed the latest Firefox Mobile Aurora (version 17) and I’m pretty pleased to see support for iFrame sandboxing (which would up the html5test.com score to 377) and integration with a.o. the upcoming Firefox Marketplace (which will also be core to Firefox OS).
So yeah, for me Firefox Mobile remains the best mobile browser no-one uses.

Quick hack: making Journalist slightly more responsive

by

I’ve been using the Journalist WordPress theme ever since I migrated to my self-hosted wordpress.org instance, away from wordpress.com back in 2007. The Journalist is a pretty basic theme, 2 columns and fixed width. The last version on wordpress.org dates from mid 2008, but the developer did work on support for threaded comments and sent me a beta-version (1.9.1) in January 2009 which I currently use. A couple of months later, after having been stalked by yours truly for info on further development, Lucian replied he was busy with other projects and that he could not do too much “free” work any more (which is completely understandable). Ever since, I’ve been making small changes left and right, fixing minor bugs and making small improvements.
But the problem with fixed width themes such as Journalist; they’re not responsive. Although responsive design is great and all, I didn’t really bother with it until I needed some responsiveness to be able to test upcoming changes to my own WordPress plugin. And that’s why I added the following in /wp-content/themes/journalist/style.css:

@media only screen and (max-width: 880px), only screen and (max-device-width: 880px) {
  #container, #content { width: 98%; }
  #sidebar { display: none; }
  #bubble { background: none; height: 32px; margin-top: -24px; position: static; }
  #bubble p { background: none; color: #000000; font-size: 14px; }
}

This is just a quick hack, making the main content div variable in width, hiding the sidebar and moving the tagline from the bubble on the right to the left, underneath the site title for all screens with a width of 880px or less.
Feel free to use and to provide improvements in the comments or via the contact-form! And Lucian, if you happen to read this: any chance anyone could resume work on the Journalist?