Sunday, August 10, 2014

Simple Fixes for Improved Mobile Web Browsing

I recently started reading Hacker News, and discovered to my frustration that a) the main site is not really useable from a mobile phone and b) they don't have a mobile version. I played around with the HTML, and found that it wouldn't be hard to improve the mobile experience significantly. These tweaks to the HTML make a real difference by letting the content wrap to the screen:
  • Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the <head> element.
  • Remove the width="100%" attribute from the table (and maybe the width="85%" from the sub-table, too).
 As it turns out, several of the sites I visit regularly are hard to use on mobile devices:


But every problem is an opportunity, right? It should be possible to create a system that uses various transformations to reformat web pages to make them more useable on mobile browsers. It might boost text sizes, relax table specs, and push sidebars to the end of the page, for example. The result wouldn't match custom designs, of course, but might get the pages from bad to useable, particularly if the user has some input into what transformations are applied.

I wonder what tweaks would help those other sites ...

No comments:

Post a Comment