David Janes' Code Weblog

November 14, 2008

How to make your blog readable on an iPhone

html / javascript,ideas,maps,mobile,tips · David Janes · 10:47 am ·

Here’s the following changes I made to this blog to make it readable on an iPhone

Add iPhone directives to header

  • the META tag informas the iPhone about how wide we want the page to look – i.e. the width of the iPhone
  • the LINK tag loads our iPhone specific CSS (tip from here)
  • this should be after your normal CSS LINK (or whatever) directive
<meta name="viewport" content="width=320" />
<link rel="stylesheet" type="text/css"
  media="only screen and (max-device-width: 480px)"
  href="/blog/wp-content/themes/davidjanes/iphone.css" />

Define iPhone specific CSS

  • this will obviously vary depending on what your current CSS does – that still gets loaded
  • most of this was pragmatically discovered
  • I hide several sections which I don’t think the user wants to see on an iPhone; I’ll probably play with this more
  • the PRE directive doesn’t use line breaking, so we just clip the examples, after making sure the font is small enough to get enough on a single line
body {
    padding: 5px;
    width: 480px;
}
div#content {
    float: none;
}
div#menu {
    display: none;
}
p.credit {
    display: none;
}
pre {
    overflow: hidden;
    font-size: 10px !important;
}
h1, h1 * {
    font-size: 36px;
}

What still needs to be done

  • we shouldn’t serve sections that users are not going to see – it’s a waste of bandwidth
  • we shouldn’t serve more than 10 articles
  • I’ll have to figure out how to do mobile browser detection on WordPress

2 comments

  1. David, also when you browse on the iPhone, it’s always painful to scroll pages and pages, it gets tiring on a touchscreen. whereas it’s not a concern on a laptop. so you might want work on the #content, see in the index.php file and show only an excerpt instead of the whole article.

    A theme for wordpress (WPtouch) only shows post titles when listing posts

  2. David Janes · 2008-11-21 07:46

    Ah thank you, excellent! There’s a couple of issues for me here:

    – I totally want to do this
    – first, I’d _really_ like to reduce the amount of data sent to the iPhone, so server side detection is going to come into play
    – I don’t want to add “excerpt” markers to my HTML, so I’m going to have to see if I can do something magic on the iPhone. I may just make the body invisible when in listing mode.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress