Media Queries - Screen Size for Samsung Devices

[rsuchwani]

Hello Experts,

I have a question, I'm working on an ePub that needs to be absolutely responsive on specific Samsung devices (Mobiles and Tablets) and I'm thinking of using Media Queries for screen size adjustments.

What do you guys think about that? Is it a good idea to use Media Queries and if not what other options/methods can I use to make it absolutely responsive for specific devices?

The reason behind making the ePub responsive only for a few devices is that the ePub will only be read on the mentioned devices and won't be available to any other device, it's a very specific informative ePub for company employees only.

Any suggestions or alternate methods will be highly appreciated.

[JSWolf]

What do you mean by responsive? How responsive the ePub is depends on the program used with the ePub.

How are you making the ePub? What format ePub? What are you trying to achieve?

[rsuchwani]

Hi @jswolf,

Thanks for responding.

The ePub will be in a fluid format/layout, the generalized format. I want to achieve the best reading experience and display possible on the devices. The ePub reader that will be used to view/read that particular ePub will be generic, free, or open-source which are easily available, that's why I have some reservations and want to have the ePub as good-looking as possible.

I want suggestions about using media queries, whether it's a good idea to use them or to avoid them altogether and style the ePub as generic as it can be and leave the display to the ePub reader.

[DNSB]

Media queries will help if the renderer supports them. Unfortunately, the number of ePub renderers that I have seen on Android devices that support any media queries are pretty small.

My personal preference is to have all images/boxes sized in % as this seems to be the best supported option.

You might want to take a look at a Vellum created epub since the media.css file is nothing but a collection of media queries which can give you some ideas that you can use.

[Turtle91]

I guess we're just not understanding what "special thing" you'd like to achieve with the MQs. An ePub is designed to be generic text which can reflow based on the user's selections: font, font-size, justification, margin size, line spacing, images, etc. etc. etc. A good 'generic reader' should be able to natively reflow your book in a pleasing manner.

Usually MQs are used if you want to change the way something is presented based on a specific query. For example:

Query: Is this a kindle?
Answer: yes
Result: display a generic '***' chapter divider because kindle can't handle
transparencies in their images and make them look like garbage.

Answer: no
Result: display an awesome .png image as the chapter divider which blends
with the background color selected by the user.

I think your bigger concern is 'are you using a "good" generic reader'. Android book readers are kinda hit and miss when it comes to following the ePub standards and honoring the publisher's styling (css). You should first determine which reader software you are using and then code your css to work to the reader's strengths.

[JSWolf]

Originally Posted by DNSB

Media queries will help if the renderer supports them. Unfortunately, the number of ePub renderers that I have seen on Android devices that support any media queries are pretty small.

My personal preference is to have all images/boxes sized in % as this seems to be the best supported option.

You might want to take a look at a Vellum created epub since the media.css file is nothing but a collection of media queries which can give you some ideas that you can use.

if @rsuchwani looks at a Vellum created ePub, his head might explode.

[JSWolf]

Originally Posted by Turtle91

I guess we're just not understanding what "special thing" you'd like to achieve with the MQs. An ePub is designed to be generic text which can reflow based on the user's selections: font, font-size, justification, margin size, line spacing, images, etc. etc. etc. A good 'generic reader' should be able to natively reflow your book in a pleasing manner.

Usually MQs are used if you want to change the way something is presented based on a specific query. For example:

Query: Is this a kindle?
Answer: yes
Result: display a generic '***' chapter divider because kindle can't handle
transparencies in their images and make them look like garbage.

Answer: no
Result: display an awesome .png image as the chapter divider which blends
with the background color selected by the user.

I think your bigger concern is 'are you using a "good" generic reader'. Android book readers are kinda hit and miss when it comes to following the ePub standards and honoring the publisher's styling (css). You should first determine which reader software you are using and then code your css to work to the reader's strengths.

I suggest @rsuchwani use Pocketbook Reader or BookFusion to read ePub and get all of his colleges to do the same.

[rsuchwani]

Originally Posted by DNSB

Media queries will help if the renderer supports them. Unfortunately, the number of ePub renderers that I have seen on Android devices that support any media queries are pretty small.

My personal preference is to have all images/boxes sized in % as this seems to be the best supported option.

You might want to take a look at a Vellum created epub since the media.css file is nothing but a collection of media queries which can give you some ideas that you can use.

Hi @DNSB,

That's actually a really helpful suggestion, I'll definitely check out the ePub created by Vellum.

@Turtle91,

The Context, once again, is rephrased for better understanding:

My experiences with ePubs, especially when they're read on any Android-based epub reader are not something we might call satisfactory, there's always some kind of mishap, images cut off, text doesn't flow right, and pages don't always break or break too soon, even though epub styled very generic, there's always something that doesn't work. That's why I want to have absolutely restricted display options using media queries. The devices that will be used to read this ePub are very specific (because this ePub is a kind of learning manual that will be distributed only to the workers/employees of the company, and on very specific devices that are given by the company to the employees).

@JSWolf,

Thanks for suggesting the ePub readers, I guess if I don't follow on media queries, I can style the ePub as best as I can and suggest the same ePub readers.

[DNSB]

Originally Posted by rsuchwani

My experiences with ePubs, especially when they're read on any Android-based epub reader are not something we might call satisfactory, there's always some kind of mishap, images cut off, text doesn't flow right, and pages don't always break or break too soon, even though epub styled very generic, there's always something that doesn't work. That's why I want to have absolutely restricted display options using media queries. The devices that will be used to read this ePub are very specific (because this ePub is a kind of learning manual that will be distributed only to the workers/employees of the company, and on very specific devices that are given by the company to the employees).

As I mentioned earlier, the Android ePub renderers tend to be the most idiosyncratic implementations and very few of the ones I tested support media queries. For the most part, the authors seem to have little to no familiarity with the various ePub specifications and no desire to listen to suggestions that their application is other than perfect.

[Turtle91]

If you want to lock it down and make it ‘perfect’, then I recommend PDF. lol

[Hitch]

Originally Posted by Turtle91

If you want to lock it down and make it ‘perfect’, then I recommend PDF. lol

Yeah, exactly. The deeper into this thread I got, the further my eyebrows climbed up into my head.

If I've learned ONE THING in all these years here, lads and at the shop, it's that this line right here:

"I want to have absolutely restricted display options using..."

...is a recipe for disaster. That's a DANGER, DANGER WILL ROBINSON, DANGER! moment.

MQs are fine--but they're not going to do what the OP wants, not without causing greater grief somewhere else. This is the nature of ePUB--it reflows. It's never going to be "print perfect," as if print were ever perfect, either.

PDF then. That's what I'd do, if the goal of "locking it down" is more important than portability and ease of use. (And the other thing is that unless you "lock down" what eReader or software they're using--that's the tail wagging the dog, too.)

Hitch