Monday, June 20, 2011

Making your site mobile friendly

I spent the last few days looking for a way to make an existing site mobile friendly for use in a classroom with iTouch toting kids. Pages I had already created were so small and illegible. Yes, students can pinch and swipe to make the text larger, but I wanted the page to load "mobile ready". (The result.)

 Short of re-creating my page from scratch (ie with a site like winksite or it seems I had very few options. I did find a google service that "cleans up" a page and makes it easier to view on a mobile device, but it applies this to every link on the page - sometimes that's not what you want! The readability site can work as a bookmarklet in Safari, but it can be tricky to explain, and in any case, doesn't happen automatically unless you purposefully select it. After much searching, I happened across a solution that works for me! Simply put, I take an existing page of links I had created for my students, make a copy of the file, and add the following code to the head of the document: (See code here)

This forces the mobile browser to view the page "close-up" and creates a very mobile friendly version.

Compare these two pages on a mobile device: