I need a website. Knowledge level very low. As the components are essentially the pages of a book, I’m looking at doing the website using some flip book type of technology. I imagine there are variations from one software to another. My primary interest is having the most natural page turning appearance. Much of what I have seen so far is very mechanical, gimmicky – click click whish whish. Are they all like this, or is it possible to have page turning that appears more natural, perhaps slower, smoother, more cinematic, more beautiful?
2 Likes
The thing about the Web is that you’re basically limited to one technology for doing this: JavaScript. So unless you can write sophisticated JS yourself, you just need to search for a script that’s designed to do this. A brief search brought this one up, which looks okay to me:
That said, it’s worth pointing out that what you gain in “coolness” by using a script like this you definitely lose in accessibility and usability. There are ways to do this on the Web that are very nice looking and accessible — just without the artifice of trying to imitate a physical object.
At the end of the day, presumably the aim is for people to be able to read text. Having to turn pages like in a physical book will be quite difficult for some (if not impossible), while the Web makes it a lot easier to access text if you leave it to do its thing.
3 Likes
Thanks, Ralph.
This may sound odd, but your response seems like just the data I need – but I think you’ve gone over my head a bit. I’ll tell you what I’m understanding from this, and perhaps you can straighten me out. And keep in mind, I will not be doing the website myself, I will be hiring someone, and it’s an important project, so I’m okay with spending some money to get a very high-quality result.
-
So, you provided the page turn effect given at turnjs.com. The Steve Jobs book is pretty nice – slower page turn helps. However…I think you were saying that I would not need a script “designed to do this”…if I “can write sophisticated JS.” Do I understand that correctly? So, let’s say I find someone who IS very skilled at writing sophisticated JS. Are you saying that if I find such a highly skilled person, then that’s my best chance of getting the most natural, aesthetic product?
-
I think you are saying that if I did use the script at turnjs.com, I “gain coolness”, but lose accessibility and usability. I don’t want that. So let’s say I reject that. And you say there are “ways to do this on the Web that are very nice looking AND accessible.” So, what are those ways exactly? Are you referring back to using someone who can write sophisticated JS? Are there any examples on the Web I could look at?
-
Yes, the aim is for people to be able to read text, but there will also be a lot of images/art. So the overall aesthetics of the viewing experience is important; it’s not just “how to replace the transmission in the Chevy.”
-
Sorry, but your last sentence threw me a bit. I definitely don’t want to put something there that is difficult or impossible for others to deal with. But you note that “the Web makes it a lot easier to access text if you leave it to do its thing.” I think this is where my ignorance is a problem. Leave the Web to do its thing – what does that mean exactly? Are you again talking about “ways to do this on the Web that are very nice looking and accessible”?
Maybe it’s as simple as your directing me to: hire someone who is skilled in _____, and then you will get the best possible result which is aesthetic and accessible.
Thanks.
1 Like
Possibly, but that will presumably cost a lot of money, so it’s worth seeing if there are already scripts out there that do what you need.
The fact that you need JavaScript at all to do a page-turn effect is the problem. There are always downsides to doing something fancy on the Web, so I’m just pointing out that it’s worth first considering whether it’s really necessary to do something so fancy in the first place. A lot of people have trouble with JavaScript on the Web, so it’s better only to use it when absolutely necessary.
In many ways, web pages are a lot easier to read and access that the pages of a book, so trying to create a page-turning effect on the Web is kind of a backward step. It’s like buying a new car and getting it fitted out so you can drive it like the Flinstones — by running along the ground through a hole in the floor.
FWIW, I would argue the Web offers nicer aesthetics than you’d get in a physical book. You can do beautiful, continuous layouts without annoying page turns and the ugly gap/bend between left and right pages. Etc.
The Web is quite a different medium from printed media (obviously!). In the early days of the Web, designers (out of habit) just tried to stick with what they knew, producing fixed-width layouts like they had been doing for print. But over the years, web designers have more and more embraced the fluid nature of the Web and worked with it instead of against it.
Each website, for example, needs to expand and adapt to the device it’s viewed on. This drives traditional designers mad, as they want to have full control of their layouts, but this flexibility and adaptability is a bonus, not a curse. Imagine if people with poor vision could bump up the size of the text in a physical book to make it easier to read, for example. On the Web, it’s a cinch — unless the designer has imposed restrictions that don’t allow it.
As you start to do fancier things on the Web — particularly with JavaScript — you find that a lot of the flexibility and adaptability of the Web is lost. I don’t know for sure, but I’d wager that a lot of scripts for presenting a page-turning effect online prevent or interfere greatly with the natural flow and adaptability of the Web, such as increasing font sizes, viewing on different devices, listening via a screen reader etc.
Nah, I think this is something you should think about first, before running off to an expensive JavaScript developer. People around you will tell you how cool a page-turning effect on the Web is, but you’ll never see the many users at the other end of of the line struggling to access the content you’re trying to serve up to them. So think a bit about what the Web can offer first, and whether you’re making the best use of it by trying to make it something it’s not.
Maybe consider a modern website that presents the material in web-friendly way, and doing a print edition for those who prefer to turn pages?
4 Likes
Thanks Ralph. You have answered all my questions perfectly, and this strikes me as wise counsel. I will start thinking about this differently, and looking at achieving the aesthetics in a way that will allow the Web to, as you say, “do its own thing”. Thanks very much!
2 Likes
No problem! I’m sure others will chip in here soon and tell you to go for it and ignore me (most people out there would), but it’s at least worth hearing another perspective! 
3 Likes
This is what happens in that turn.js book example when I bump up text size so I can read comfortably.
Most of the page is now missing! On a normal responsive page that would not happen as the page could just expand naturally.
I think a flipbook effect is only good for a demo, a short story or a small storybook aimed at children to keep their attention. I think most normal users would get fed up with the turn effect after a couple of minutes and go and get the information from somewhere else.
It would be ok as maybe a small section in a website or just for an article or something but I don’t see it working for a whole website unless its is actually a simple story book for children.
As soon as I see a list of commands telling me how to access the content my eyes glaze over and I go somewhere else 
The Steve Jobs book in that turn.js demo is quite good (apart from the text resize problem) but it took me half a dozen clicks to open it to start with. Those problems could be fixed by a good developer but you still need to consider whether a flipbook effect is good for the content you want to display and for your users to access more than once. I see a lot of demos and think ‘wow’ that’s great but I seldom see a full implementation working in a usable way. It reminds me of the old days of 'Flash built websites’ and you learn each website anew before you could even use it.
They look great once but then you never return again as they are a real pain to use.
However, there are always exceptions to the rule so I try never to say never. (except I just said it twice) ;).
4 Likes
Just for fun I remembered I have a flip demo from a previous thread on here which might be of casual interest.
I’ve quickly updated it but it still needs a lot of work as it’s not keyboard accessible. It does not use any JS but the checkbox hack makes its a bit unwieldy to use for anything other than a demo.
I only post it here so that the issues with this type of structure can be seen.
(You’ll need to click on the “Edit in codepen” link on the top right to see the full screen version as I have linearised it for small screen).
2 Likes
I think a critical question is, does the application need to similate a printed book?
There is document viewing software such as for PDFs that flip pages. We can flip only a page at a time, not partial pages. When we view two pages at a time we can flip only two pages at a time. That might work well for art work documents and novels but for technical documents it can be frustrating to have to flip back and forth and all around. None of the major viewers support scrolling partial pages.
Also, note that functions and appearance are sometimes contradictory. Sometimes making something look good makes it impractical. I think that if convenience is important then you should design convenience first, then make it look pretty.
Actually no. There is also WebAssembly that can be compiled into a byte code for execution in the browser. It was originally designed to support use of C++ in websites but there are compilers of many other languages that generate WebAssembly. Microsoft’s ASP.Net Core Razor WebAssembly applications compile C# that is executed in the browser.
Then you should avoid trying to decide how to do it technically. Design it from a non-technical user’s perspective; how it would work from the user’s perspective.
In the past printed material used two-up formats. A two-up format could be used similar to showing two pages at a time. Also printed material used Justified text. You might want to read up about typography, it is the area of expertise that has existed for centuries before computers.
Technically speaking, I think the application should be designed such that it is more sophisticated than all-browser or all-server. If everything is done browser-side then the entire document would need to be downloaded at the beginning. That would be a problem for smartphones and other devices with limited bandwidth.
Addenda: While reading Why there’s no e-book or PDF I think the author’s comments about e-book formats are useful, relevant and amusing. The author is essentially saying that there is not an e-book format currently available that satisfies their requirements.
2 Likes
Okay, now you’re all just piling on! I was wrong!! 
Just kidding.
Thanks Ralph, Paul, Samuel. This all makes sense. For me, easy access to the words, anywhere in the world, is what’s important. Any aesthetic factor that inhibits that is self-defeating. As Samuel put it, “Sometimes making something look good makes it impractical.” And Paul’s comment about people getting fed up with the page turn effect also seems right on the money.
I will rethink this and focus on those aspects of aesthetics (e.g., fonts, design, art, etc.) which can enhance user experience without any negative effect on usability and functionality. And I can stay away from effects that go from “cool” to “gimmick” within a few minutes of viewer arrival. I want a website that is welcoming and doesn’t feel the need to slap me in the face, or “keep me busy”, as though I had a 2 second attention span (or is it now down to 1/2 second?). If you know of such, that might help. For me, give me 15 minutes in front of Maruyama Okyo’s 6’ X 10’ screen, Geese Over a Beach, and I’ll consider it time well spent. https://fineartamerica.com/featured/geese-over-a-beach-maruyama-okyo.html
Okay, thanks again for this sensible, “practical” input.
2 Likes