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;
So thanks for reminding me why I love my mobile browser that much Facebook!
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.
Mobile WP YouTube Lyte; no-one said it would be easy!
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
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;
 |  | |
| 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.
So who’ll bring me my Spanish Firefox OS phone for €69?
Spain is the first country to see a Firefox OS handset on the market. Movistar sells the -admittedly low-end- ZTE Open for a whopping €69, which includes €30 prepaid value and a 4Gb memory card!
So is there anyone planning to go on holiday to Spain who would be willing to buy me an orange ZTE Open?
The best WP YouTube Lyte to date!
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:
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
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):
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!