Russell Beattie

I spent a ton of time writing about tablets this weekend and playing with my iPad to get my thoughts in order. I was thinking about how I really miss being able to "page down" when reading websites. My desktop browsers are always set up not to "smooth scroll", so page movements are nice and quick, and I use the space bar or the page down key by default to quickly scan long pages. This is the same for my phone, actually. On my N900, I was testing out Opera Mobile, and was disappointed because the keys didn't do anything - I use the space bar with the N900's integrated Firefox-based browser to page down and it works great.

I started thinking about how to add some Javascript to my personal newsreader to enable me to just touch the side of the screen to page down - sort of like how the e-book readers work - when I ended up creating a new layout for my blog instead. As you can see from the images above (click for a bigger version), it's a two-column layout with no scrolling, and you touch the left and right of the screens to move forward and back on the page. It actually looks pretty slick I think.

I was able to rework the page easily because my blog style is so basic - I don't have a sidebar or anything to deal with. I used JQuery to dynamically change the page once it was loaded, and I used PHP to make sure I only show that stuff to iPad owners. There's probably better ways of doing this stuff, and in general the whole design and script could use some tweaking (I'm using pixel-specific numbers in some spots which worries me). But it's a fun proof-of-concept.

Here's the code:

<?

        if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false){ 

?>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/blog/jquery.scrollTo-1.4.2.js"></script>

<script>

 $(document).ready(function(){

    $("#content").height($(window).height() - 100);

    $("#content").css("overflow","hidden");
    $("#content").css("padding","0");
    $("img").css("max-width","300px");
    $("iframe").css("max-width","300px");

    $("#content").css("-webkit-column-count","2");
    $("#content").css("-webkit-column-gap","10");

    $("#page").click(function(event){

        var height = $("#content").height();

        if(event.pageX > $(window).width()/2){        
            $("#content").scrollTo("+=" + 816, {duration:400});
        } else {
            $("#content").scrollTo("-=" + 816, {duration:400});
        }
    });

    $(window).resize(function() {
        $("#content").height($(window).height() - 100);
    });

});

</script>

<? } ?>

A few points to note: First, by setting the content div's height to a specific value in CSS, I'm able to make a long page fit in a single iPad screen. Then by adding in the CSS3 column count, the overflow from the div goes horizontally, rather than vertically - and by hiding the overflow in CSS, you don't see the scrollbars.

Next I used the JQuery ScrollTo plugin to manage the interactivity. When the user clicks on the side of the screen, I scroll in that direction the width of the textbox, which moves the text over a couple columns, basically making a paging effect. I added in a little 500ms delay to improve the effect, and it seems to look ok. The last thing I did was add in a max-width on any images so that they don't flow outside of their column.

I need to go back and clean up a bit of the CSS as my footer is a bit wonky - maybe I need to absolute position it or something. Also, the page doesn't refresh itself properly when the screen orientation changes. But for now I think it's pretty ok.

It's nice to be able to make a design for just one platform, I have to say - not having to worry if another browser doesn't display the page properly is almost fun. That said, I do worry about focusing too much one device. Also, I wonder if breaking the normal scrolling paradigm is annoying, rather than convenient, to readers. Changing how a standard web page works isn't something I think is a great idea, as it would suck if you had to figure out a new way of reading a web page for each site out there. And admittedly, paging through the columns on my site now is *much* slower than being able to do it the normal flick-scroll way - Which is funny, considering how I ended going down the path to the design.

Like I said though, it's a proof of concept and seems interesting to me at the moment. I just like the way it *looks*.

:-)

-Russ