03 March, 2011

Vertical-align

Having trouble with my vertical alignment.
It works in one example but not the other.

See test code at jsbin: http://jsbin.com/imecu4/5

13 February, 2011

A summary of 'Rethinking the Web' by Yiibu

This post is a summary of the original slides by Yiibu which you can see on slideshare.
I have reworded, cut and added to make it more readable as a blog post.

Rethinking the Web

The point of the internet is to reach people, not devices. There are approx 6.8 billion people in the world, 3.4 billion of whom have access to a mobile device. 1.3 billion people use the internet on their devices ~19% of the population. Many of these are using old phones with outdated browsers.
The problem with web developers is that they mostly have iPhones and develop exclusively for that device, but most of the world are using non-html5 mobile devices. 6% of the US population have iphones and less than 4% for the rest of the world. That's 15% of the world population you're missing out on.

So let's look at the main mobile browsers

Webkit
- Open source, Excellent standards support, Used by many leading companies, and many leading phone OS's
Opera mini
- Free to install, Ajax, Excellent Standards, Available on the same phones as Webkit and even more (including older phones), Very efficient with low data usage, Proxy browser.
For more on this see PPK's recent blog series on Mobile browser market share:part1, part2, part3 and part4

Building a web app

Start with familiar territory in HTML5, css3 and JavaScript. Most smart phones support all these very well. Older devices will still struggle with some of the latest concepts. However HTML was designed so that if the tag is not recognised it's content is just displayed. We should be able to get an adaptive experience that works on all html supporting devices. (We'll forget about wap for now)
So what is the correct adaptive experience? First, you do not know what the screen size is going to be. For mobile devices, the screen size can be between 128x160 to 1280x800, with various aspect ratios & changeable orientations. Therefore we need an adaptive layout for the site.
Case study: Colly
Flexible, squishy layout which resizes based on the available screen width - except it doesn't work well for proxy based browsers. The proxy server renders the page the same way a desktop would, giving the user the full site rendered on a small screen as very small image, which you then have to scroll around. This is keyhole browsing, the viewport is much smaller than the content, like looking at a room through the keyhole.
In this case the site only really works on a webkit based browser. Challeng: Is webkit the new IE4? ("this site works best in IE4/Webkit").

Some guidelines for writing for mobile

see also LukeW's Mobile first Blog entry.
1. Mobile first
traditional thinking: Desktop site + @media queries = mobile site But most devices fail the @media queries so they end up with the desktop site anyway (partly because they are based on older standards). Also mobiles will still have to download and parse the default desktop content before getting to their bit.
New thinking: Mobile site + @media queries = desktop site. (also known as progressive enhancement) This works because the desktop browsers move faster and (generally) get updated more often then mobiles, so most desktop browsers now follow the @media queries. Older browsers will still get a usable site.
2. Use well structured meaningful markup.
Make use of the new elements in HTML5 to give the content semantic structure. Well defined class names make the structure even more meaningful. That way the browser can do some heavy lifting for you.
3. The Absence of @media queries is the fist @media query
An all in one css file helps with http requests, browser caching etc. but will include a lot of cruft that small devices (don't forget expensive bandwidth costs) do not need. Also putting mobile specific rules at the bottom of the file is backwards!
Instead, thinking of point 1, the default stylesheet should be mobile compatible then add a extra stylesheets afterwards to progressively enhance the site.
Which is really point 4...
4. Progressively enhance the site with JavaScript and @media queries
JQuery is a massive library for a mobile device to download and parse. Instead try using xui.js or jQuery-mobile.
Use CSS 3.1 for animations instead of JavaScript. less code and it's faster where supported. e.g.
.scrollto {
 transform: translate(540px, -200px);
}
Make sure the core of the site works without JavaScript.
5. Adapt content (Especially images) appropriately for mobile devices.
Use smaller images for smaller screens. Background images can be altered by the media's style sheet. Many cms systems (e.g. WordPress) can pre parse the html before sending it to the client. You can use info from the user agent or JavaScript+cookies to alter the image markup to use smaller/bigger images. Don't forget to alter the width and height attributes as well. Use relative sizes to ensure that element fit the width of the screen.
6. Compress content where possible, avoid sending unnecessary data.
If you do not display or use something on a mobile device make sure that it is not downloaded. Bandwidth costs more on mobiles. display: none on an image still causes the browser to download the image source. Fonts are still not supported on many devices and can also be quite large. Minify CSS & javascript before sending it (but you do that anyway, right?).

Why even bother?

Because the mobile web is growing fast, especially in developing countries which are skipping the wired/pc based internet and going straight to the relatively cheap mobile market.
This post is licensed under cc-by-nc-sa

22 September, 2010

Rethinking the Mobile Web by Yiibu

Excellent presentation about building for the web with Mobil at the
forefront of your mind

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

03 August, 2010

Chrome 6's API for site performance

The latest version of Chrome 6 now has support in the API for measuring
the performance of the page.

You can access this with javascript via the object window.webkitPerformance

More info on the Chromium blog
<http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html>
and the Technical Spec <http://dev.w3.org/2006/webapi/WebTiming/>.

They also mention that a similar object is available in the IE9 preview
window.msPerformance and that Mozilla are also working on one.

Maybe we could have a unified object in the future with a standard
implementation?

30 April, 2010

Firefox Account manager

Today Firefox have announced new plans to help users control their
online accounts.
The user should be able to select an account, log in or out from inside
the browser.

This should be easy to support for most web sites.

see http://hacks.mozilla.org/2010/04/account-manager-coming-to-firefox/
for more details.

26 January, 2010

SVG: double dose

A List Apart have a double helping of SVG goodness including a quick
how-to on implementing a scalable background image cross-browser.

http://www.alistapart.com/issues/299

23 December, 2009

Firefox 3.6 File upload API

Mozilla have announced a new file upload api allowing users to just drag
and drop files from other applications into the browser and then submit
them in a normal form. It even loads thumbnails into the page.

For a demo visit http://demos.hacks.mozilla.org/openweb/uploadingFiles/

18 November, 2009

oEmbed

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

10 April, 2008

Grep with Perl objects

I was having trouble getting grep to work today. I'm a bit of a perl newbie so still unfamiliar with many of perls basics. Anyway I was trying to loop through a list of objects, get the id of the object and see of that was in another list. Looking through as many tutorals as I could find They all had the same basic example:
    @foo = grep(!/^#/, @bar);    # weed out comments
Or elaborated on the regexp theme. So I wrote the equivalent with a comparison operator instead of a regexp.
    my $temp = grep ($object->{'id'} eq $_, @object_id_list');
No, no, no, no! says the compiler, I don't like this at all! Talking to my colleague revealed one small fact. For regular expressions there is no problem with using
    grep(EXP, @array)
But, if you want to do something more complicated then you must use
    grep {BLOCK} @array
So my line becomes
    my $temp = grep {$object->{'id'} eq $_} @object_id_list';
My biggest bugbear with perl is that sometimes the documentation is not very clear and some more  examples in perldoc would help to clarify a lot of confusion to the perl beginner.