The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> Responsive and adaptive design
Christian J
post Jan 29 2024, 07:54 AM
Post #21


.
********

Group: WDG Moderators
Posts: 9,623
Joined: 10-August 06
Member No.: 7



QUOTE(Lee Batchelor @ Jan 25 2024, 04:22 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Jan 29 2024, 03:14 PM
Post #22


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 30 2024, 05:57 PM
Post #23


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Lee Batchelor @ Jan 29 2024, 09:14 PM) *


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

QUOTE


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.

QUOTE


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



I would suggest that you use em instead of %.

QUOTE


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Jan 30 2024, 07:19 PM
Post #24


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



Once again, many thanks Coothead!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 31 2024, 06:49 PM
Post #25


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Feb 1 2024, 09:41 AM
Post #26


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Feb 1 2024, 10:04 AM
Post #27


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 1 2024, 11:09 AM
Post #28


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Lee Batchelor @ Feb 1 2024, 03:41 PM) *


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




Checkout the attachment instead.

Attached File  FIles.zip ( 15.04k ) Number of downloads: 14




coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 1 2024, 11:24 AM
Post #29


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Lee Batchelor @ Feb 1 2024, 04:04 PM) *


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 1 2024, 12:23 PM
Post #30


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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

Attached File  music.html ( 3.77k ) Number of downloads: 12




coothead

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Feb 1 2024, 03:04 PM
Post #31


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 1 2024, 03:56 PM
Post #32


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Lee Batchelor @ Feb 1 2024, 09:04 PM) *


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.

IPB Image

There will probably be a similar reaction in other browsers.



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Feb 1 2024, 04:18 PM
Post #33


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 1 2024, 05:30 PM
Post #34


Advanced Member
****

Group: Members
Posts: 192
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Lee Batchelor @ Feb 1 2024, 10:18 PM) *



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


QUOTE


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.


QUOTE


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. IPB Image



coothead

This post has been edited by coothead: Feb 1 2024, 05:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Feb 1 2024, 07:15 PM
Post #35


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th February 2024 - 04:27 AM