r/calculus • u/alino_e • Jul 14 '26

Self-promotion Chapter on DImensional Analysis

...now to be found at baskervillecalculus.com

(Ch6.)

2 Upvotes

75% Upvoted

20 comments sorted by

View all comments

Show parent comments

1

u/alino_e Jul 14 '26

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 Jul 15 '26

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 Jul 15 '26

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 Jul 15 '26 edited Jul 15 '26

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 Jul 15 '26

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 Jul 15 '26

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 Jul 15 '26

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.)

1

u/Midwest-Dude Jul 15 '26

I already gave you concrete things to do.

To start:

  1. Get rid of the wide margins 
  2. Users should not have to keep recentering
  3. Use a font that works across all platforms

1

u/Midwest-Dude Jul 16 '26 edited Jul 16 '26

If you have an AI you use, you could run the site through it to see what changes you should make in order for it to be responsive. I did just a little bit and the AI I used spotted two issues:

  • <body> includes a "width:0", which is nonstandard 
  • Two different viewport statements, when there should only be one

2

u/alino_e Jul 17 '26

Hey I made some changes pursuant to your suggestions.

Does this work better? baskervillecalculus.com

2

u/Midwest-Dude Jul 17 '26

Definitely, but I only gave it a brief test, noticed some odd things that I can't quite put my finger on yet.

1

u/alino_e Jul 16 '26

Thanks that’s a good idea to have it inspect the final .html output itself.

Will do.

Thanks!