While experimenting with the use of Unicode characters in a small proof of concept, I stumbled upon what I think is a bug in Chrome for Android. Apparently character ☰, which renders as ☰ and which most people consider the “options”-icon, cannot be given a color in Chrome for Android whereas other Unicode characters can.
As you can see when visiting this test-page, the 3 symbols styled correctly (font color white) in most browsers (tested on IE8, FF on W7, Ubuntu and Android, Chrome on W7 and Ubuntu), but the options-symbol is not white on Chrome for Android (at least on my Samsung Galaxy S4).
So, does this qualify as a bug, or did I just mess up? Anyone happens to know a workaround?
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!
(Update December 2014: ik bouwde zelf een alternatieve versie die sneller en toegankelijker is op http://futtta.be/redactie/)
Ik ❤ 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
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 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.