Responsive and adaptive design Options

[Christian J]

Edit
I selected the "notification by email" option for any replies but it doesn't work. I've had similar issues with other forums when using a Microsoft email address. The spam filters on their servers are not well designed. If I can change my email address on this forum to my Gmail account, I'll receive email notifications about replies.

I moved the replies to its own topic:

Email notifications not working
https://forums.htmlhelp.com/index.php?showtopic=61436

[Lee Batchelor]

Coothead was generous enough to devote his time to making my website responsive to mobile devices. I was trained long before mobile devices were used and didn't know how to do this. Thanks again, Coothead!!

I uploaded the Home page and it works perfectly on every device we tried it on. The only remaining issue is, the menu is displayed in two rows and is confusing to read. I'd like to use a media query to resize the menu to fit smaller screens and be readable. I don't really want the menu to change to a hamburger menu.

It looks straight forward, however, I don't know what to set the maximum size to before the query is invoked. Some people say to not use px as the units, but rather %.

For example, I found this on the W3schools website:

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {...code}

Your thoughts are most appreciated. Thanks.

[coothead]

The only remaining issue is, the menu is displayed in two rows and
is confusing to read.

I would suggest that you simplify it somewhat like this...

1. Home
2. Photos
3. Audio - put a link to "Songs" in that page
4. Videos
5. Future shows - put a link to "Previous shows" in that page
6. Contact
7. Testimonials

I don't know what to set the maximum size to before the query is invoked.

Check out items 4 - 5 on this page...

Jason M. Knight - How to make a web page

To get the page width in Chrome click the F12 function key.
To get the page width in Firefox click Tools > Browser Tools > Responsive Design Mode.
Reduce the page width to find the break points.

Some people say to not use px as the units, but rather %.

I would suggest that you use em instead of %.

I found this on the W3schools website

I would suggest, instead, that you use...

MDN - Resources for Developers, by Developers

...for all your coding problems.

coothead

This post has been edited by coothead: Jan 30 2024, 05:57 PM

[Lee Batchelor]

Once again, many thanks Coothead!

[coothead]

Hi there Lee Batchelor,

after a look at your latest site, I've made a few modifactions
to my version which might meet with your approval.

Try the link shown in this previous post...

Post #17

You should find that all the pages are fully responsive.

coothead

[Lee Batchelor]

They look great, thanks Coothead!

I just finished modifying the menu bar to preserve space, by removing some titles and using links, as per your earlier suggestion. Looks like you did the same but were able to keep the Testimonials page on the menu bar.

Shall I download the HTML and CSS files from those pages? Thanks again!!

[Lee Batchelor]

Coothead, I used the Inspection tool in Chrome and set the breakpoint to 340px. The site looks fine! The band name floats over top of the picture but that too is fine.

[coothead]

Shall I download the HTML and CSS files from those pages?

Checkout the attachment instead.

 FIles.zip ( 15.04k ) Number of downloads: 34

coothead

[coothead]

I used the Inspection tool in Chrome and set the breakpoint to 340px.

I believe that I pointed out previously that we now use em instead of px.

Simply divide 340 by 16 to get the em value of 21.25.

Having said that I can see no reason to set any further @media values
to the CSS which I have already coded.

Which page(s) do you believe requires it?

coothead

[coothead]

Hi there Lee Batchelor

The music.html file included in the zip file was misssing a couple of hr elements.

Please replace it with the attached...

 music.html ( 3.77k ) Number of downloads: 37

coothead

[Lee Batchelor]

Thanks, Coothead. That looks better. I forgot to mention that the music page has a script that turns off a clip if another one is chosen. I added it to your code. it reads as follows:

<script>
document.addEventListener('play', function(e){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
}
}
}, true);
</script>

This post has been edited by Lee Batchelor: Feb 1 2024, 03:08 PM

[coothead]

I forgot to mention that the music page has a script that turns
off a clip if another one is chosen.

That's OK, simply add it just before the closing body tag.

I ignored all JavaScript when working with your site as it wasn't
relevant to the layout.

I did notice, though. that this...

CODE

<script>
var sc_project=12839916;
var sc_invisible=0;
var sc_security="d7c72ec0";
var scJsHost = "https://";
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/12839916/0/d7c72ec0/0/"
alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>

...appeared to be a problem.



There will probably be a similar reaction in other browsers.

coothead

[Lee Batchelor]

Good catch Coothead.

I ran the the pages through the W3C Validator and they said it wasn't necessary to specify the Java script type. I don't know if you use this validator or find it unsuitable at times. I tried using the one on this site but it won't let me. Something about not having permission to use the "htaccess" file?

I ran the finished CSS file through the W3C, CSS validator and flagged an error with the margin definition.

p {
margin: 1em 2;

It didn't like the 2 not having a unit (px or em). I tried modifying it but it messes up the paragraphs. I like them they way they are. Thoughts?

EDIT
I just ran the CSS code through three different validators. They all found a million things wrong 🙄. It's so sad that in this hi-tech society, we can't all get on the same page 👿.

This post has been edited by Lee Batchelor: Feb 1 2024, 04:42 PM

[coothead]

I ran the the pages through the W3C Validator and they said it
wasn't necessary to specify the Java script type.
I don't know if you use this validator or find it unsuitable at times.

I use it regularly

p {
margin: 1em 2;

It didn't like the 2 not having a unit (px or em).
I tried modifying it but it messes up the paragraphs.
I like them they way they are. Thoughts?

I changed it to

CODE

p {
   margin: 0;
}

In the css file that I sent to you.

I just ran the CSS code through three different validators.
They all found a million things wrong 🙄.
It's so sad that in this hi-tech society, we can't all get on
the same page 👿.

I tested the css, as used here...

https://www.coothead.co.uk/theoffbeats/

...and it is identical to that which I sent to you.

You may see the result of the test here...

W3C CSS Validator results forcoothead.co.uk/theoffbeats/

Don't worry to much, I will stay with you until your site is
rendered exactly as you desire.

Having said that, at almost eighty years of age it is quite
possible that I might shuffle off this mortal coil at any
moment. Luckily, if this should happen, I am certain that
other members here will finish the task in my stead.

coothead

This post has been edited by coothead: Feb 1 2024, 05:57 PM

[Lee Batchelor]

Hi Coothead,

Many thanks for the validator information. When I trained in 2012, there were no mobile devices for websites, so we were only taught how to code for PC and Mac computers - much simpler days!

I'm delighted you use the W3C validator. I used it in training and for every website since. Never had any reported issues with the code not working on certain browsers.

I've learned SO much from reading through the code you wrote for me. The band members extend their gratitude as well. I'll be 71 in July, so I'm not that far behind you. All our band members are between 69 and 72.

I'll finalize the website and then upload it. As it stands, the pages all look fine at a breakpoint width of 340px. I modified some of the design concepts in your finished pages. I teach technical writing at Humber College in Toronto. In one of my courses, I teach the concepts put forth by Dr. Robin Williams (not the actor of course). She wrote a book entitled, The Non-Designers Design Book. In it, she coins the acronym, CRAP. It stands for Contrast, Repetition, Alignment, and Proximity. I use these rules exclusively in all my website and document designs for large companies. The goal is to drastically increase readability and information retrieval. Your designs follow these principles, with only a few minor differences.

Off topic - I have a friend who will hit the 80 mark this May. He's doing well and I'm sure we won't see you fall off the planet anytime soon either. At any rate, I'm eternally grateful for the help. Stay well...

- Lee

This post has been edited by Lee Batchelor: Feb 1 2024, 07:18 PM