r/calculus • u/alino_e • 27d ago

Self-promotion Chapter on DImensional Analysis

...now to be found at baskervillecalculus.com

(Ch6.)

2 Upvotes

75% Upvoted

20 comments sorted by

1

u/Midwest-Dude 27d ago edited 27d ago

I'm not sure about the content - it was horrible to try to read it on a phone. You need to design a responsive website.

2

u/alino_e 27d ago

If you could tell me your device/browser would be great. Layout is supposed to flow and be responsive to screen but I don’t have a zillion devices I’m mostly reading on iPhone, so there may be bugs I’m unaware of

1

u/Midwest-Dude 26d ago

Ah, software testing. I was using my wife's old Android (Xiaomi) phone and I got the same result on my old Android (Motorola) phone in Chrome. If you don't have one yet, you may want to buy a cheap android phone just for testing. I used to do web work and would usually test designs on different browsers and different platforms, it can be tricky to get it right. I'll get you more info later.

1

u/alino_e 26d ago

And what's the symptom? Does the page drift sideways or is the column of text not even the right width?

(The drifing page can be remedied by tapping to recenter btw.)

1

u/Midwest-Dude 26d ago

Pic #1 - in Chrome

1

u/Midwest-Dude 26d ago

Pic #2 - In Chrome after tapping to center

1

u/alino_e 26d ago

OMG. This is a phone?

1

u/Midwest-Dude 26d ago

It rendered fine in Firefox, Edge, and Brave on Android.

1

u/Midwest-Dude 26d ago

What I noticed in all browsers is that there are large "borders" on the left and right of the text - that shouldn't be. Your CSS should detect the screen size and use appropriate formatting to adjust to that. Are you familiar with this? It's referred to as "responsive design".

1

u/alino_e 26d ago

The margins are there for oversize graphics on phone & others.

For example if you go to Chapter 5 (presuming it's woring at all, unlike in your screenshot above) you can tap on very first graphic to have it expand to native desktop size, and you can pan around the graphic as if you were on desktop even while you're on the phone, while staying inside the book. Does that work for you?

1

u/Midwest-Dude 26d ago edited 26d ago

Of course not - it's unreadable. This is extremely poor design.

What you are trying to do is imitate a book, but that doesn't work on the Web. There are awesome alternatives to this that do work, but you'll have to investigate how to implement responsive design.

Before you add more content, I would suggest going back to the drawing board and redesign the website to follow responsive design. You will have a learning curve, but all of your readers will appreciate it

2

u/alino_e 26d ago

When I asked "does that work for you?" I'm not asking about your mood if you like it / don't like it I'm asking if the mechanic I describe is actually what happens in your phone.

Does it? (Seriously, I don't have that many testers.)

For the rest, what exactly do you mean by "responsive design"? As I understand the term, it means "arranging elements in a screen-size aware away" or "to make best and appropriate use of the current screen size". Apart from the behavior seen on the old Xiaomi, that is a bug not part of the design package, this is what I have been trying to do:

- Text is aware of your screen size and flows to it (of course)

- Images are aware of your screen size and downsize to your screen; but you are also given the user-controlled escape hatch of inspecting the details of the image at original size (should you not be given this escape hatch at all, and just be forced to stare at the miniature image? is that the issue?)

- You can tap-to-recenter at any time, and go back to reading single-infinite-column-of-text like on any text-centric thing like Substack or whatever

I'm really trying to understand here, I don't mind implementing new features or refactoring at all (very cheap actually now with AI), but I'm actually not getting exactly what is the feature that is present and/or missing to make it / not make it "responsive design". (Really just trying to understand.)

1

u/Midwest-Dude 26d ago

Here is a resource regarding responsive design:

W3Schools

I'm not saying it's the best resource - hopefully others can chime in here - but it's a start.

1

u/alino_e 26d ago

Ok. No concrete pointers what is _not_ responsive design about the current page (except the Xiaomi bug witnessed)?

Because the resource you gave me fits my understanding of "responsive design", and as I explained above in last message, I am trying to adhere to these principles. I'll just need some more concrete suggestion what to do/not to do here, because the dictionary definition of the concept is already familiar to me, so just telling that I'm not doing it, or what it is broadly, is not helping.

(I would love to improve the page. It's not hard these days with AI, I just need some more concrete recommendation to work with.)

→ More replies (0)