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.

WP YouTube Lyte 1.2.0: beta testers needed

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?

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

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

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?

My failed Firefox Mobile Private Browsing AddOn experiment

Nope, there’s no Private Browsing in my favourite mobile browser (yet). But as I have Firefox Sync activated between my 3 Firefox instances (winXP@work, Ubuntu-netbook@home and on my SGS2), I very much want to avoid syncing some of my browsing history over to my work-laptop. Developing addons for Firefox has become very easy and the JavaScript API does include access to the Private Browsing features, I quickly wrote this little addon to switch between Private and Non-Private browsing via the context menu using the online addon-builder:
var pb = require("private-browsing");
var myItem = require("context-menu").Item({
label: "Start Private Browsing",
contentScript: 'self.on("click", self.postMessage);',
onMessage: function () {
 if (pb.isActive) {
  pb.deactivate();
  this.label = "Start Private Browsing";
 } else {
  pb.activate();
  this.label = "Exit Private Browsing";
 }
}
});
All seemed great on my desktop Firefox, but it doesn’t work on Firefox Mobile. I could have known, if only I had read the documentation a bit more carefully: the context-menu and private-browsing modules aren’t functional on Firefox Mobile yet. Guess we’ll have to be good boys (and girls) while browsing on synced Firefox Mobile. But instead we can play around with the online Firefox addon-builder, that’s (another kind of) fun as well!

WP YouTube Lyte on Android: native or in-browser playback?

With the latest release of WP YouTube Lyte I fixed a problem where iOS users had to click twice to view a LYTE-embedded video; once to activate the iOS YouTube player and once to start the actual playing. On Android that problem does not exist, as LYTE embeds can be played inline in the browser. Based on my own tests however, performance and quality aren’t always optimal when compared to the experience the native YouTube app provides. So now I’m wondering; wouldn’t it be better to not only detect iOS, but also Android and have both of them play in their respective a native players, even if on Android this isn’t an absolute requirement? Advantages:
  1. better video playback performance/ quality
  2. somehow feels more professional (it’s the way the YouTube mobile site seems to work as well for example)
Disadvantages:
  1. you force visitors out of the context of your webpage
  2. a small percentage of Android visitors will get an ugly error message as they do not have a native YouTube player
  3. only works for single video’s, not for playlists (or at least so it seems) and the audio-only trick obviously won’t work either
What do you think? Speak now or be silent forever! And let me throw in a vid (Spiritualized with “Hey Jane” live) just for the heck of it;
Spiritualized – Hey Jane (live @ Maida Vale for BBC 6 Music)
Watch this video on YouTube.
And if you’re on Android you can click here to trigger the YouTube app to see the exact same thing.

Workaround for Mobile Safari quirk in WP YouTube Lyte

Yesterday I released WP YouTube Lyte 1.1.5, which amongst other things has a workaround for the bug that required 2 clicks to play an Lyte-embedded Youtube on an iOS-device. The reason for the bug: WP YouTube Lyte replaces the “lyte player” with an autoplaying YouTube embed upon the first click, but Mobile Safari does not allow any media to autoplay. 1.1.5 now checks for the useragent (yeah, I know) and immediately adds a normal YouTube embed instead of the Lyte one if that useragent contains the strings iPhone, iPad or iPod. So there you have it, only one click to hear and see this great “Here we go Magic“-clip  on your iPad.
Here We Go Magic – "How Do I Know"
Watch this video on YouTube.
Neat huh? ;-)