How to work with a Chapter

[SaranacLake]

This question is part PHP and part MySQL...

For my site, I need a design that will allow me to store and display and online book.

Let's say that I have a chapter that is 40 pages long, and contains 10-12 images, where a "page" is a page in MS Word.

Currently, I have an ONLINE_BOOK table and then a one-to-many relationship to an ONLINE_BOOK_COMPONENT table.

For version 1.0, images will simply be stored on a file-share, although I am interested in seeing if I could store the images in MySQL for a later version.

Anyway, on to my question/concern...

If a person loaded a webpage (simple HTML/CSS) that was 40 pages long, including 10-12 images, that could cause some loading issues - at least with the images.

And if a person was on a mobile device and tried to do the same thing, I suspect would cause real issues?!

From a database standpoint, I'm not sure of how I could logically break things down smaller than into chapters - especially since chapter size in a book will vary.  (One chapter might be 10 pages, and another 50 pages.)

The only way I can think to make sure that the web page - which will represent a chapter - loads quickly is to use something like the AMP project.

But are there any considerations I need to consider from a PHP and MySQL standpoint?

Thanks!

 

[requinix]

58 minutes ago, SaranacLake said:

If a person loaded a webpage (simple HTML/CSS) that was 40 pages long, including 10-12 images, that could cause some loading issues - at least with the images.

Not necessarily. Tons of websites out there are heavy on images, and many of them need those images to be available soon. You don't - we're talking about a textual book with some illustrations, not a picture book. (Even if it was a picture book, people only read one page at a time.)

Meanwhile text isn't particularly strenuous on browsers. 40 pages * 500 words/page * 10 characters/word (spaces, punctuation, some HTML markup) = 200,000 characters. A fraction of a megabyte.

So don't worry about it. Not yet.

 

58 minutes ago, SaranacLake said:

And if a person was on a mobile device and tried to do the same thing, I suspect would cause real issues?!

40 pages could be a lot for a mobile device, so for that it would be worth considering paginating the content. Perhaps on desktop too, if you want the aesthetic of it.

 

58 minutes ago, SaranacLake said:

From a database standpoint, I'm not sure of how I could logically break things down smaller than into chapters - especially since chapter size in a book will vary.  (One chapter might be 10 pages, and another 50 pages.)

Unless pages are important concepts you need to account for, and you should try to avoid that if you can (pages are just so arbitrary), then you don't need to break it down beyond chapters.

 

58 minutes ago, SaranacLake said:

The only way I can think to make sure that the web page - which will represent a chapter - loads quickly is to use something like the AMP project.

Worry about AMP later.

[maxxd]

To add to the advice @requinix gave - optimize your images, make sure you serve the correct version of your image for the situation, and lazyload the images that are shown on the page. Shouldn't be a problem at all.

[SaranacLake]

@requinix,

 

10 hours ago, requinix said:

Not necessarily. Tons of websites out there are heavy on images, and many of them need those images to be available soon. You don't - we're talking about a textual book with some illustrations, not a picture book. (Even if it was a picture book, people only read one page at a time.)

Meanwhile text isn't particularly strenuous on browsers. 40 pages * 500 words/page * 10 characters/word (spaces, punctuation, some HTML markup) = 200,000 characters. A fraction of a megabyte.

So don't worry about it. Not yet.

Well, the reason I was concerned is that last year I made a small website with several photo galleries.

Each gallery loaded with thumbnails, and then you could click on a thumbnail and load a larger picture.  Because I don't know Javascript, I had to load everything at once - although I did optimize the photos the best I could.

At any rate, the larger galleries (e.g. 50 - 100 photos) took MINUTES to load, and so I am fearful that a 40 page chapter with 20-30 screenshots could have the same issue.

I believe that a lot of the larger media sites (e.g. NY Times) uses AMP to help with image loading, and I could use that.  But the problem is that I am trying to just get my website up and running, and so I have to weigh having a "usable" site versus a "perfect" site.  (Of course if it took minutes to load a book chapter, that might get me in hot water!)

 

10 hours ago, requinix said:

40 pages could be a lot for a mobile device, so for that it would be worth considering paginating the content. Perhaps on desktop too, if you want the aesthetic of it.

Can I still have the concept of a BOOK -||-----|<- BOOK_CHAPTERS and do that?

 

10 hours ago, requinix said:

Unless pages are important concepts you need to account for, and you should try to avoid that if you can (pages are just so arbitrary), then you don't need to break it down beyond chapters.

No, I just mention pages because my books are written in MS Word and so I was trying to give you a sense of how big things are.

To me, what matters are the parts of the book (e.g. cover, table of contents, chapters, index, etc.)

 

The books I have written are tutorials, and rely heavily on images to help people "see" what to do.  (If you removed the images, my books would fall flat.)

That being said, what do I do for mobile?  (I don't use a smart phone, so I'm rather ignorant on how these younger generations interact with the Internet and websites and all?!)

Apparently the majority of people now access the Internet entirely on mobile devices, right?

If so, then would they also use mobile to read a "hot-to" book? 

Specifically, would any sane person read a book that is a tutorial and heavy on images on a mobile device??  For example, "Introduction to Photoshop".  (I would think that would be extremely painful to read and learn that way, but who knows what Millennials and Generation Z thinks and does?!)

I ask, because the answer to those questions will impact how I design both my back end and my front end.

 

10 hours ago, requinix said:

Worry about AMP later.

How difficult is AMP to learn and implement for someone who doesn't know Javascript?

 

 

[SaranacLake]

@maxxd

 

8 hours ago, maxxd said:

To add to the advice @requinix gave - optimize your images,

Yes, I have done that for another site I built.

 

Quote

make sure you serve the correct version of your image for the situation,

What do you think about my questions above?

Would any sane person buy a tutorial book (e.g. on using some computer application like Adobe Photoshop or MS Excel) and expect to do so on a smartphone?

If so, then how should I handle the images?

I cannot image someone could go from reading text talking about something, and then look at an image that is sized to the a small smartphone size and be able to even see what the image is about without a lot of zooming and scrolling.

Then again, it perplexes me that most younger people are more comfortable surfing the Internet and even reading eBooks on a smart phone versus on a normal sized monitor like a desktop or a laptop,

 

Quote

and lazyload the images that are shown on the page. Shouldn't be a problem at all.

I believe that is what the AMP project does, right?

And to my fear, that requires knowledge in Javascript.

 

Edited May 14, 2020 by SaranacLake

[maxxd]

Yes, people will read books of all types on mobile devices. My wife interacts exclusively using her iphone and ipad, and I'm currently reading a tutorial-style book on my desktop, surface, and galaxy phone depending on where I am and what I have on me at the time (and just to give some frame of reference, we're both older than you are so it's not just GenZ and Millennials).

As far as javascripting goes, there are many drop-in libraries that only need the user to modify the image attributes in order to add lazyloading to the page - this one, for instance. And even then, you can use the picture element and media queries to display completely different images to different screen sizes (and to a degree devices, if you hack the media queries enough).

Really, what you're concerned about isn't newfangled technology or practices, it's modern HTML. Assuming, of course, that you're building your website from scratch - if you're using a CMS it might be a bit more difficult. I know that trying to use the picture element inside a WordPress post is (or was about a year ago, anyway) damned near impossible.

This is a completely unrelated thought and I'm not even through my first cup of coffee so please excuse it, but have you considered just offering downloadable PDFs of your tutorials? That way people know what they're in for before they click the link and you save yourself all this work - there's no need to worry about layloading and mobile performance and whatnot.

[SaranacLake]

9 hours ago, maxxd said:

Yes, people will read books of all types on mobile devices. My wife interacts exclusively using her iphone and ipad,

Well, an iPad I can see because the screen is like a small laptop or notebook, but on a smartphone?

 

9 hours ago, maxxd said:

and I'm currently reading a tutorial-style book on my desktop, surface, and galaxy phone depending on where I am and what I have on me at the time (and just to give some frame of reference, we're both older than you are so it's not just GenZ and Millennials).

Does your tutorial have pictures/images/screenshots?

If so, how in the world can you see them on a smartphone?

I mean I can understand how you can see a picture of someone painting a fence, but let's say you were reading a book on how to use a pivot table in MS Excel or how to use the alias tool in Photoshop - you'd have to have eagle eyes to see those screenshots!

Since the books I have written so far of how-to guides on using software and working with your os, and thus have lots of detailed screenshots, I'd be surprised if anyone could read them on a smartphone, but since I myself don't use mobile, I just don't know.  (For me personally, I would much rather read a web page or PDF or book on at least a laptop if not a desktop.)

 

9 hours ago, maxxd said:

As far as javascripting goes, there are many drop-in libraries that only need the user to modify the image attributes in order to add lazyloading to the page - this one, for instance. And even then, you can use the picture element and media queries to display completely different images to different screen sizes (and to a degree devices, if you hack the media queries enough).

I am pretty sure the media queries just determine which image gets displayed, but they don't have the ability to stop your web page from downloading a larger image, but maybe I'm wrong.

 

9 hours ago, maxxd said:

Really, what you're concerned about isn't newfangled technology or practices, it's modern HTML. Assuming, of course, that you're building your website from scratch - if you're using a CMS it might be a bit more difficult. I know that trying to use the picture element inside a WordPress post is (or was about a year ago, anyway) damned near impossible.

No, all hand-coded.

 

9 hours ago, maxxd said:

This is a completely unrelated thought and I'm not even through my first cup of coffee so please excuse it, but have you considered just offering downloadable PDFs of your tutorials? That way people know what they're in for before they click the link and you save yourself all this work - there's no need to worry about layloading and mobile performance and whatnot.

Yes, I have thought about this and am sorta torn...  Originally my fear of PDFs and the like was piracy.  After all, once one person buys the PDF book, then they have the master copy forever, and they can turn around and email that to all of their friends and even put it on a file downloading site.  My thinking of offering an online book version is that it would be much harder for someone to steal the book - although if someone had the gumption it would be doable, of course.

Also, as a geek, I thought on online book would be better since it adapts to device sizes and is just easier to work with - in my opinion - than a PDF where you might have to zoom in or out, and keep adjusting things as you change pages.  (With a web page, it automatically fits and all you need to do is scroll.)

I also thought about offering eBooks, but I have the same fear of piracy as with PDFs.

 

[maxxd]

2 hours ago, SaranacLake said:

I am pretty sure the media queries just determine which image gets displayed, but they don't have the ability to stop your web page from downloading a larger image, but maybe I'm wrong.

I'm talking about media queries associated with the picture element, not CSS. There's more information here.

2 hours ago, SaranacLake said:

I also thought about offering eBooks, but I have the same fear of piracy as with PDFs.

I've not created any eBooks myself, but doesn't it handle the DRM natively? I'm pretty sure if I buy a Barnes and Noble book on my nook I can't just transfer the file to my wife's computer and open it - I think I have to be in another nook app and logged in with the same credentials. Although I'm not actually sure I've tried that now that I type it out loud...

Edited May 15, 2020 by maxxd

[SaranacLake]

 

13 minutes ago, maxxd said:

I'm talking about media queries associated with the picture element, not CSS. There's more information here.

I've not created any eBooks myself, but doesn't it handle the DRM natively? I'm pretty sure if I buy a Barnes and Noble book on my nook I can't just transfer the file to my wife's computer and open it - I think I have to be in another nook app and logged in with the same credentials. Although I'm not actually sure I've tried that now that I type it out loud...

Maybe if you buy an Amazon or B&N book, but if I created my own EPUB or MOBI, I don't think it comes with any DRM but I could be wrong.

What about my questions/concerns about trying to read a tutorial with lots of photos/images/screenshots on a smartphone?

I'm not sure how I could make that work?

[maxxd]

3 hours ago, SaranacLake said:

Maybe if you buy an Amazon or B&N book, but if I created my own EPUB or MOBI, I don't think it comes with any DRM but I could be wrong.

Honestly, I don't know - as I said, I've never published my own eBook.

3 hours ago, SaranacLake said:

What about my questions/concerns about trying to read a tutorial with lots of photos/images/screenshots on a smartphone?

I'm not sure how I could make that work?

If you're going the straight HTML route that's where the picture element comes in - it's not just the same image resized, you can specify completely different images for each media query break and not have to worry about downloading the other(s) first. So you can crop a screen shot differently for smartphone display than for desktop or tablet, and the media queries would call in the correct one.

[kicken]

On 5/14/2020 at 3:23 PM, SaranacLake said:

At any rate, the larger galleries (e.g. 50 - 100 photos) took MINUTES to load, and so I am fearful that a 40 page chapter with 20-30 screenshots could have the same issue.

That's just due to a poor implementation or a slow connection it sounds like.  I've had larger galleries load in much less time.   If you properly thumbnail your images (ie, not just set the width/height in the html/css) then things should load fairly easily and quickly on any sort of modern connection.  Then you link those thumbnails to the full size version so that it will only load if the user clicks on it.

In any event, this thread sounds to me like a case of premature optimization.  You're worried about performance issues without having any real data showing these is a problem to begin with.  10-12 images and whatever text is pretty much nothing for the modern web for most people on the desktop.  

On mobile, size can still be an issue, so it can help to reduce the image load.  Start by just employing one of the lazy-loading libraries and then see how things work before investing more time into something else more complicated.   You're already worried about images being illegible on mobile, so test it and see.  If they are then maybe you need to create new images or re-write the text to accommodate mobile which might make the loading problem moot.

5 hours ago, SaranacLake said:

but let's say you were reading a book on how to use a pivot table in MS Excel or how to use the alias tool in Photoshop - you'd have to have eagle eyes to see those screenshots!

That depends a lot on how the screenshot is composed.  If you're taking a screen shot of a full 1920x1080 monitor to show the pivot table sidebar then yea, it'll be hard to read.  If you crop that to just the sidebar and eliminate wasted space to show the specific options however then there shouldn't be an issue.

This is something that the <picture> element mentioned by maxxed a few times could help with.  Aside from just different resolution images for different devices, you could have entirely different images.  Maybe the desktop users get the full 1920x1080 shot because it's similar to what they might see, but mobile users get the cropped version so the pivot table options are legible.

 

[SaranacLake]

8 minutes ago, maxxd said:

If you're going the straight HTML route that's where the picture element comes in - it's not just the same image resized, you can specify completely different images for each media query break and not have to worry about downloading the other(s) first. So you can crop a screen shot differently for smartphone display than for desktop or tablet, and the media queries would call in the correct one.

I understand that, but I'm asking from a practical standpoint...

Let's say you bought an online book on "Intro to Photoshop" and as you might expect, it contains as many screenshots and images as it does text, because you can't teach people how to do Photoshop in just text.

And as you might suspect, there would be lots of screenshots where you'd need to see the *entire* screen to make sense of what is going on, so presenting a crop of the upper right hand corner of the screen wouldn't cut it because you might be using a tool palette on the left side of the screen and another palette of read out on the right side of thes screen. 

If you were on an iPhone or Android, how pleasant (or painful) would it be trying to following along?  (Sure, you could grab and pinch to zoom in and out, and then move left and right to find what you need to look at, but even if that was doable, how could you read the text/instructions while doing that?

And like most books, this book could be several hundred pages long with many chapters 0 and where a "page" means 8" X 10" and not what you'd see on a smartphone.

Personally, I would *hope* nobody would try and read one of my books - with tons of supporting screenshots - on their smartphone, but if lots of people would do that, then I would need to know and try to come up with some sort of compromise.

 

[kicken]

5 minutes ago, SaranacLake said:

If you were on an iPhone or Android, how pleasant (or painful) would it be trying to following along?

If you think the entire screen is necessary to understand the content then so be it and the user's choice of device isn't really your concern.  The user can either choose to struggle on their device or move to a more capable device.

Your focus needs to be in determining if the entire screen truly is necessary, or if it's just a "nice to have".  For a desktop user, it might be nice to see the whole thing, but maybe they only really need to see the top left corner and bottom right corner and you can cut out all the middle stuff.  Something I do frequently when creating screenshots it to resize my windows so they are as small as possible to remove wasted empty space then take the screenshot.   If you can't per-emptively make the window smaller, cut the middle part later and leave some jagged edges indicating it was cropped.

 

[SaranacLake]

1 minute ago, kicken said:

That's just due to a poor implementation or a slow connection it sounds like.  I've had larger galleries load in much less time.

Not poor implementation - just not knowing Javascript.

And to be clear, my thumbnail gallery also loaded the full-sized images as well, so when you clicked on the thumbnail the full-sized image loaded. (Without using Javascript, there is no way to point to a thumbnail and a larger image and not have your browser load both the way that I coded things.

 

1 minute ago, kicken said:

 If you properly thumbnail your images (ie, not just set the width/height in the html/css) then things should load fairly easily and quickly on any sort of modern connection.  Then you link those thumbnails to the full size version so that it will only load if the user clicks on it.

Well, with how I did things, that wasn't an option.  But either way, what I did in the past is not what I am trying to do here.

If I have an online book, there won't be thumbnails, but just the regular sized images.  (Since I haven't converted my book from MS Word to HTML, I don't know what size the images will be, but assuming you are reading the book on a laptop, I am thinking most images would be like 600 x 800?  Maybe you have a suggestion?)

 

1 minute ago, kicken said:

In any event, this thread sounds to me like a case of premature optimization.  You're worried about performance issues without having any real data showing these is a problem to begin with.  10-12 images and whatever text is pretty much nothing for the modern web for most people on the desktop.  

When done correctly, I agree!  🙂

But I learned the hard way with my other - largely unrelated - website, that what I *assumed* would be easy was not!

And I read on the Internet enough - mainly the news - to know that even large websites often struggle to load images in a reasonable amount of time, and I end up twiddling my thumbs waiting for the image to load before I keep reading.

I appreciate the "over thinking" things, BUT I have also been doing this long enough to know that 90% of IT system problems come about because people were too lazy or dumb to ask the tough questions up front.  (I have made a career of fixing enterprise systems because nobody did any planning up front!)

Based on the little I know, it seems that the AMP project would take care of these concerns, but that leads to another concern - I don't have another 6-9 months to get really good with Javascript?!  (It may be easy for you since you know it, but I'm just trying to get this dumb website online, and I'm afraid that implementing something like AMP might take me longer than I have for v1.0.)

 

1 minute ago, kicken said:

On mobile, size can still be an issue, so it can help to reduce the image load.  Start by just employing one of the lazy-loading libraries and then see how things work before investing more time into something else more complicated.   You're already worried about images being illegible on mobile, so test it and see.  If they are then maybe you need to create new images or re-write the text to accommodate mobile which might make the loading problem moot.

Okay, but back to what I asked @maxxd...

If you were trying to learn new software, and software that is not easy to learn, e.g. Photoshop, then would you do it on a smartphone?

Furthermore, could anyone in their right mind expect to be able to have legible screenshot of the entire screen of something like Adobe Photoshop fit on a smartphone screen?

And even if the screenshot could fit, you'd still have to scroll like the dickens to read the corresponding text!

I would pray that people wouldn't go smaller than an ipad, but i don't know, so what do you think?

(I need to get a better sense of what your average user would do, because i could build an awesome solution made for desktops and laptops, but if everyone reads my book on their iPhone, then I'm gonna have problems on multiple levels.  (And since I am not a smartphone user, I can't just go off of what "I" would do!)

You guys are younger and probably more "hip" than me, so you can probably answer these questions better than I can.  🙂

 

1 minute ago, kicken said:

That depends a lot on how the screenshot is composed.  If you're taking a screen shot of a full 1920x1080 monitor to show the pivot table sidebar then yea, it'll be hard to read.  If you crop that to just the sidebar and eliminate wasted space to show the specific options however then there shouldn't be an issue.

Well, I have been doing documentation and training as part of my day job for decades.  And, yes, in may instances, you can simply do that.  But I use Photoshop as an example of where often you'd want to see the entire screen, or at least most of it.

On an iPad, I could adapt screenshots and text to make it so you can see one logical step in one screen.  But on an iPhone?  That is pushing it unless the book was about MS Word or something easier.

 

1 minute ago, kicken said:

This is something that the <picture> element mentioned by maxxed a few times could help with.  Aside from just different resolution images for different devices, you could have entirely different images.  Maybe the desktop users get the full 1920x1080 shot because it's similar to what they might see, but mobile users get the cropped version so the pivot table options are legible.

On the website I built last year - and someone was helping me out, so I don't recall all of the specifics - I know that the issue I ran into was that the thumbnails and larger images all loaded at one time, and I was told - based on that particular UI design - that the only way to avoid that was to use Javascript which I didn't have time to learn.

I believe I'd have the same issue with my book, because - again - you do not have thumbnails in the chapter of a book, you load all of the regulr sized images at once - unless you are using AMP or  "lazy loader" which I think are the same things.

So even if using the < picture > element would allow me to adapt from desktop to mobile, it would NOT address the issue of 30 images loading when someone goes to to Chapter 5.

Right?

[SaranacLake]

12 minutes ago, kicken said:

If you think the entire screen is necessary to understand the content then so be it and the user's choice of device isn't really your concern.  The user can either choose to struggle on their device or move to a more capable device.

In the past, I would have agreed with that statement.  But everyone at work tells me that almost NO ONE users laptops or desktops anymore - unless they are at work.

So my fear is that - especially with people under 40 - that EVERYONE will buy my book expecting to be able to read it on a smartphone, and then they will have a bad experience, and then I will get a made customer screaming for a refund?!

In fact, I know lots of people at work - all younger - that do not even own a computer?!  (They do EVERYTHING on their smartphones...)

So how worried do I need to be about all of that?

 

12 minutes ago, kicken said:

Your focus needs to be in determining if the entire screen truly is necessary, or if it's just a "nice to have".  For a desktop user, it might be nice to see the whole thing, but maybe they only really need to see the top left corner and bottom right corner and you can cut out all the middle stuff.  Something I do frequently when creating screenshots it to resize my windows so they are as small as possible to remove wasted empty space then take the screenshot.   If you can't per-emptively make the window smaller, cut the middle part later and leave some jagged edges indicating it was cropped.

Yeah, I may have to do that.  Sadly, I naively wrote my book last year from my laptop, and I just assumed that was how people would see things.

Maybe that is another questions...

Based on your personal and professional experience, how much do I need to cater to "Let me read an entire computer tutorial book on my smartphone" group of people?

If it is 50-60%, then I need to be worried and will have to redo everything I have.

If it is 25%, then I'd probably just move forward with what I have, and then after I go live, try and go back and offer a more mobile-friendly version later on.

Thoughts?

 

[kicken]

19 minutes ago, SaranacLake said:

And to be clear, my thumbnail gallery also loaded the full-sized images as well,

Aka, poor implementation.  No JS is necessary to avoid loading the full sized version, you just link it separately.

<a href="full-size.png"><img src="thumb.png"></a>

 

20 minutes ago, SaranacLake said:

If you were trying to learn new software, and software that is not easy to learn, e.g. Photoshop, then would you do it on a smartphone?

I personally wouldn't, no.  I have a dual-screen desktop so I'd open the book on one screen and Photoshop on the other.   In the particular case of Photoshop it seems unlikely in general anyway to me.  The person would need a desktop to run Photoshop on anyway so if they were trying to follow along and learn why not just open it in a browser on the desktop.

 

32 minutes ago, SaranacLake said:

So even if using the < picture > element would allow me to adapt from desktop to mobile, it would NOT address the issue of 30 images loading when someone goes to to Chapter 5.

Right, but if you're loading appropriately sized images then 30 images loading shouldn't really be a big deal.  A full-size 1920x1080 scaled down to roughly phone-screen sized images should only be around 20-100k in size.  100k * 30 = ~3MB.  3MB on an average mobile connection would take all of 1 second to download.   It's basically illegible sure, but that's where the previous point of having mobile-friendly versions comes in.  Alternatively, link the illegible version to a full-sized version they can load and zoom/pan around on demand.

 

44 minutes ago, SaranacLake said:

In the past, I would have agreed with that statement.  But everyone at work tells me that almost NO ONE users laptops or desktops anymore - unless they are at work.

A lot of people do things on mobile now, so it's certainly worth considering that market, but in my experience people still acknowledge when something isn't really a good fit for mobile and will move to a desktop/tablet in those scenarios (if possible).

I have a friend that does practically everything from her phone mainly because for a long time she had nothing else.  From time to time however she will come by to use my computer for things because they are just not mobile-friendly tasks and she recognizes that.   Most people I know are still rational about what is and isn't a good fit for mobile, so I think your fear of everyone demanding a refund because your site isn't 100% mobile friendly is irrational.  Sure, there may be some because people can be dicks but that's part of business.

If your books deal with teaching software and that software is primarily a desktop thing I'd wager most people will interact with the site from a desktop.  I'd make some considerations for mobile (responsive layout, smaller images) for those who might want to read some on their phone while away from a desktop (ie, commuting) but wouldn't spend a ton of time up front trying to make that experience perfect.  I'd push that until later when everything else is up and running and more time is available to focus on that and/or real customers start requesting it.

 

[SaranacLake]

3 minutes ago, kicken said:

Aka, poor implementation.  No JS is necessary to avoid loading the full sized version, you just link it separately.

<a href="full-size.png"><img src="thumb.png"></a>

Well, it wasn't that simple, because I had it so when you hovered over a thumbnail the larger image loaded.  Trust me, in that particular situation I needed Javascript.

But that was a completely different beast, so it doens't matter either way.

 

3 minutes ago, kicken said:

I personally wouldn't, no.  I have a dual-screen desktop so I'd open the book on one screen and Photoshop on the other.   In the particular case of Photoshop it seems unlikely in general anyway to me.  The person would need a desktop to run Photoshop on anyway so if they were trying to follow along and learn why not just open it in a browser on the desktop.

Very good point!

The only problem is that at least one of my books deals with configuring your OS, so in that case a person might be more inclined to use a smart phone, since most normal people don't own two computers, right?

 

3 minutes ago, kicken said:

Right, but if you're loading appropriately sized images then 30 images loading shouldn't really be a big deal.  A full-size 1920x1080 scaled down to roughly phone-screen sized images should only be around 20-100k in size.  100k * 30 = ~3MB.  3MB on an average mobile connection would take all of 1 second to download.   It's basically illegible sure, but that's where the previous point of having mobile-friendly versions comes in.

How big would an image have to be on your average sized smartphone to have enough quality to show details of, say, a screenshot of Photoshop? 100k?  More?

 

Fwiw, the problem I ran into with my photo gallery is that the larger images were like 2-4MB because they were of landscapes and I felt that you needed that level of quality to appreciate things.  With screenshot of a computer application, I can probably get away with smaller file sizes, right?

 

3 minutes ago, kicken said:

Alternatively, link the illegible version to a full-sized version they can load and zoom/pan around on demand.

Good idea.

(Or even just put in a disclaimer that if they choose to use the mobile version, the quality may not be so great, but if they use the desktop version, then they can expect better quality screenshots, right?)

 

3 minutes ago, kicken said:

A lot of people do things on mobile now, so it's certainly worth considering that market, but in my experience people still acknowledge when something isn't really a good fit for mobile and will move to a desktop/tablet in those scenarios (if possible).

That's good.  I just happen to work with lots of 20-somethings, and if it weren't for their work laptops, I wonder if they would even know what a computer is!!

 

3 minutes ago, kicken said:

I have a friend that does practically everything from her phone mainly because for a long time she had nothing else.  From time to time however she will come by to use my computer for things because they are just not mobile-friendly tasks and she recognizes that.   Most people I know are still rational about what is and isn't a good fit for mobile, so I think your fear of everyone demanding a refund because your site isn't 100% mobile friendly is irrational.

That's good to know!!

Fwiw, while my entire website is sadly built for desktop only, v2.0 will be responsive, and I'm not as worried about people going purely mobile on my main website.  I just think people will have a poor experience trying to read an 800 page, 20 chapter book on something like Photoshop from their iPhone/Android!

 

3 minutes ago, kicken said:

Sure, there may be some because people can be dicks but that's part of business.

True.

 

3 minutes ago, kicken said:

If your books deal with teaching software and that software is primarily a desktop thing I'd wager most people will interact with the site from a desktop.

Yes, many of my books will be dealing with computer applications, although like I said, some deal at an OS level, so I'm not sure what people will do there.  me, I have 5 laptops to chose from, but I'm guessing most people will only have one desktop/laptop, so if they are dealing with tweaking the OS, then they might turn to their smartphone since some of the things I cover require installing things, reboots, etc, and so you'd need a completely separate device to learn.  But more of my books will be delaing with a dedicated application like Photoshop.

 

3 minutes ago, kicken said:

I'd make some considerations for mobile (responsive layout, smaller images) for those who might want to read some on their phone while away from a desktop (ie, commuting) but wouldn't spend a ton of time up front trying to make that experience perfect.  I'd push that until later when everything else is up and running and more time is available to focus on that and/or real customers start requesting it.

Yeah, that is what I am hoping to do.  Also, as is implied in your comments, I really need to get some metrics to know if I have any customers, who those people are, and what they expect.  So I'd prefer not going too far down the mobile rabbit-hole until I know for sure I need to.

At the same time, I guess what I was driving at in my OP was trying to make sure that I architect things NOW so that regardless of which direction I go later on, my backend database and frontend Ui scale smoothly.

And on that note, do you agree that have a BOOK table and then a one-to-many BOOK_COMPONENT table were each record would hold a book chapter.  is that okay?  or because of mobile, would I need something more granular?  (You or someone else said that was okay, but just double-checking now that you understand better what I'm trying to do.)

 

Thanks.

 

[kicken]

1 hour ago, SaranacLake said:

At the same time, I guess what I was driving at in my OP was trying to make sure that I architect things NOW so that regardless of which direction I go later on, my backend database and frontend Ui scale smoothly.

And on that note, do you agree that have a BOOK table and then a one-to-many BOOK_COMPONENT table were each record would hold a book chapter.  is that okay?  or because of mobile, would I need something more granular?  (You or someone else said that was okay, but just double-checking now that you understand better what I'm trying to do.)

Don't be afraid of having to re-factor things in the future.  You don't have to get the perfect layout from the get go.  I find that many times even when I tried to plan for the future and design accordingly I'd usually miss something and end up doing some refactoring anyway.  Best to just wait until you know what you need rather than guess at what you think you'll need.

The book/component table structure sounds fine.  If in the future you decide to split it up further you can.  If in the future you decide to do pages/sections you could probably do so with relatively little changes to the tables. 

[SaranacLake]

5 minutes ago, kicken said:

Don't be afraid of having to re-factor things in the future.  You don't have to get the perfect layout from the get go.  I find that many times even when I tried to plan for the future and design accordingly I'd usually miss something and end up doing some refactoring anyway.  Best to just wait until you know what you need rather than guess at what you think you'll need.

The book/component table structure sounds fine.  If in the future you decide to split it up further you can.  If in the future you decide to do pages/sections you could probably do so with relatively little changes to the tables. 

The plan was to take my MS Word book, convert it to HTML (and CSS), make sure it displays okay in a test template, and then paste the HTML into the BODY field in a given record in the BOOK_COMPONENT table.

Sound right?

And based on what you have been saying, if I do my HTML right, and make things "responsive", then I will only need that one record/field to handle things for desktop or mobile, right?

Oh, and for v1.0, the plan was to store all images as files in an image folder on the web server.  Sound okay?

Thanks!

[SaranacLake]

@kicken,

Thoughts on these follow-up questions from last night?

15 hours ago, SaranacLake said:

The plan was to take my MS Word book, convert it to HTML (and CSS), make sure it displays okay in a test template, and then paste the HTML into the BODY field in a given record in the BOOK_COMPONENT table.

Sound right?

And based on what you have been saying, if I do my HTML right, and make things "responsive", then I will only need that one record/field to handle things for desktop or mobile, right?

Oh, and for v1.0, the plan was to store all images as files in an image folder on the web server.  Sound okay?

Thanks!

Edited May 16, 2020 by SaranacLake

[gizmola]

Your plan is fine.

Just to throw this out in general, but over 50% of web traffic is now done with a mobile device.

I would urge you do some research into responsive design.  These days, you want to start with your mobile design and build it up for larger viewports, vs the old days when you started with your primary design and figured out how to scale it down.

It's concentrated into css, with the exception of the newer picture element supported by most browsers.  Layout is also important.  Let's say that you have a layout where you have a picture and next to it a column of text talking about the image.  On a mobile device you are going to move that all to 1 column, and will need the descriptive text to go underneath the image.  You want to learn grid or flexbox (grid is the current state of the art).

Images on mobile is a complicated subject, due to technology like retina.  You can't just generate a scaled down version for mobile devices and serve that on a retina device, unless you don't care that the image may become illegible.  Any illustrations would be best off rendered in svg, and in fact everything you can render in svg is ideal, because it intrinsically will scale up and down whereas any raster format images won't.

Again for the raster images, this is where the html picture element is helpful.

I hope that you are not using the web publishing model because you had concerns about "piracy" or content sharing.  Having your content in a subscription website won't prevent privacy.  Every browser has built in capability to save html, print, and print to pdf. 

[SaranacLake]

@gizmola,

 

2 hours ago, gizmola said:

Your plan is fine.

I got something right for once?!  😄

 

Quote

Just to throw this out in general, but over 50% of web traffic is now done with a mobile device.

I would urge you do some research into responsive design.  These days, you want to start with your mobile design and build it up for larger viewports, vs the old days when you started with your primary design and figured out how to scale it down.

Yes, I am familiar with "responsive web design".  Unfortunately, I have already bitten off too much and haven't had time to learn it and apply it.  (To give you some perspective of my predicament, I was trying to learn and implement RWD 5 years ago when it would have given me a leg up, but a lot of life has happened, plus when you try to be a "Jack of all trades" you end up with an unfinished website 5 years later like I have!!

Assuming I ever get my stupid website online, the first thing I am going to focus on for v2.0 is Responsive Web Design!!

 

Quote

It's concentrated into css, with the exception of the newer picture element supported by most browsers.  Layout is also important.  Let's say that you have a layout where you have a picture and next to it a column of text talking about the image.  On a mobile device you are going to move that all to 2 column, and will need the descriptive text to go underneath the image.  You want to learn grid or flexbox (grid is the current state of the art).

Right.

 

Quote

Images on mobile is a complicated subject, due to technology like retina.  You can't just generate a scaled down version for mobile devices and serve that on a retina device, unless you don't care that the image may become illegible.  Any illustrations would be best off rendered in svg, and in fact everything you can render in svg is ideal, because it intrinsically will scale up and down whereas any raster format images won't.

I use SnagIt it a lot for my screenshot.  I believe all it offers are .jpg, .bmp, and .png  

So what would you advice i do there?

 

I would also like to point out that images are *complicated* for the reasons I mentioned above - if you have followed the entire thread.

Recap:  If I was hypothetically writing an online book called "Teach Yourself Adobe Photoshop in 21 Days", then what would I do with all of the screenshots I took using SnagIt where I captured my entire screen on my Retina MacBook Pro?  If you have any experience with Adobe products, you certainly can appreciate how many concepts require that you see most, if not all, of the screen.

So to @kicken's point, yes, for some things (e.g. menus, palettes, etc) I could capture something that would easily fit in the screensize of a smartphone.  But what do i do when you need to see the entire application window?

I cannot image a person could look on their iPhone or Android at an image that is what, 2.5" x 5" in size?

So what is your advice to deal with that?

Remember, if you are reading an entire book on learning a software application, and I have maybe 20-30 screenshots PER chapter, and a book could have 10-20 chapters, then that would seem like an enormously daunting task for someone to read an entire book on a smartphone, right?!

 

Quote

Again for the raster images, this is where the html picture element is helpful.

I hope that you are not using the web publishing model because you had concerns about "piracy" or content sharing.  Having your content in a subscription website won't prevent privacy.  Every browser has built in capability to save html, print, and print to pdf. 

I chose online books primarily because of fears of piracy, yes.  But as a geek, I am also used to reading everything online, in a browser, on my laptop so it seems like the most natural way to read and learn.  (Web pages scale automatically, where PDFs don't.)

Yes, I realize there are lots of tools and add-ons to capture web pages, but in my opinion it is MUCH easier to buy a book in PDF format and give it to the rest of the world for free, versus trying to save 500-1000 pages of an online book.

Btw, being an expert on capture web pages, I can tell you that Save As HTML and Print to PDF rarely work on modern webpages - although on my website they would probably work WYSIWYG.

 

Edited May 17, 2020 by SaranacLake

[gizmola]

5 hours ago, SaranacLake said:

I use SnagIt it a lot for my screenshot.  I believe all it offers are .jpg, .bmp, and .png  

So what would you advice i do there?

The point is that like thumbnails, you have to create different sizes and qualities of the image for mobile.

 

5 hours ago, SaranacLake said:

Btw, being an expert on capture web pages, I can tell you that Save As HTML and Print to PDF rarely work on modern webpages - although on my website they would probably work WYSIWYG.

Actually I would disagree.  When things don't print well, that is often because styles have not been applied appropriately for all uses or specifically for print purposes.  It might not look great, or even correct, but the print to pdf option is going to work, and if that doesn't then saving as html is going to work.  Someone who really wants to distribute your content is going to have no problem doing it.

[SaranacLake]

8 hours ago, gizmola said:

The point is that like thumbnails, you have to create different sizes and qualities of the image for mobile.

So what is the proper way to do that?  

Do I save the raw screen-capture from SnagIt as a .png and then use something like Photoshop to make a smaller mobile size?

Or after I capture something in SnagIt, do I use SnagIt to resize the image, and then save it as a smaller mobile size?

I'm not sure if the sequencing impacts the image quality?

 

8 hours ago, gizmola said:

Actually I would disagree.  When things don't print well, that is often because styles have not been applied appropriately for all uses or specifically for print purposes.  It might not look great, or even correct, but the print to pdf option is going to work, and if that doesn't then saving as html is going to work.  Someone who really wants to distribute your content is going to have no problem doing it.

Well, since my website will (hopefully) use proper HTML/CSS, yes, people will be able to easily save things and get a WYSIWYG.

But for arguments sake, as far as other websites on the Internet, most of the time Save As HTML fails and Print to PDF rarely yields something workable?

Trust me, I am someone who spends a good part of his day researching things and saving (thousands, if not tens of thousands of) web articles each year for later reference.

Javascript breaks most modern websites.

The days as File Save As are long gone on the Internet.

 

[gizmola]

4 hours ago, SaranacLake said:

Do I save the raw screen-capture from SnagIt as a .png and then use something like Photoshop to make a smaller mobile size?

Yes, make your screen shots however you want them at highest quality.  With most quality mobile phones these days, as well as computers with high density displays like the macbook retina displays, you want your images to be 2x the desired size.  So if you are going to display an image at 300px wide, then you want the image to be 600px.  

Here is an article that provides a visual demonstration of the noticeable difference in quality.  On an Iphone or Samsung Galaxy, this could make the difference between a screenshot that is blurry and illegible and one that is clear.

Having done some mass conversions in the past, Photoshop has tools for automating conversions, using Automate|Batch

4 hours ago, SaranacLake said:

The days as File Save As are long gone on the Internet.

You should spend more time in the chrome developer tools if you believe this to be true.