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 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:
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*.