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

Switch to our mobile site