Peter Duffy said on Thu, 22 Aug 2024 13:08:09 +0100

>Thanks.
>
>I think my own problems boil down to:
>
>CSS: I'm not a graphic designer and have no skills/training in that
>line. So I can see when something isn't right, but all I can do is try
>tweaking things until it (hopefully) looks better. Presumably a graphic
>designer would see that something was wrong and would know why, and
>what to do to fix it.

The preceding paragraph exactly describes my aesthetic skills and
training. When I see a website that I like or is recommended as good
looking, I can replicate its look with CSS. But I can't create a good
design myself, without copying somebody else's design.

>
>Progressive enhancement: the tendency is always to imagine how the page
>will look on the desktop screen, and it's just a matter of having the
>self-discipline to force oneself to start off by imagining it on a
>mobile phone.

You're describing the "mobile first" discipline, which is preferred
today because more users will come in via narrow screens. But you could
also start out full screen and make everything collapsible.
See https://troubleshooters.com/web/css.htm a an example of collapsibility.
See
also https://troubleshooters.com/web/responsive.htm for tips on responsiveness,
which you accurately call collapsibility.

To do Mobile First, design while viewing it on Firefox's Responsive
tool with various phones.


>Plus - the vast majority of online examples start with
>big screen and use media queries to modify down to small screen.
>Modifying them (effectively "inverting" most of the CSS definitions) to
>start with small screen and modify up to large ones is the mind-
>boggling bit.

All you do is reverse the logic. The following two techniques produce
the same result:

/* Define full sized CSS */

@media screen and (max-width: 600px){
/* Modify for narrow CSS */
}

vs

/* Define narrow CSS */

@media screen and (min-width: 601px){
/* Modify for full sized */
}



SteveT

Steve Litt

http://444domains.com