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 Wix.com) 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: