Responsive and adaptive design Options

[Lee Batchelor]

Hi all,

When I was trained in HTML and CSS, it was when desktop computers were the only platforms. Now that mobile devices are used for 51% of all web browsing, we need to use responsive and adaptive design so that the website resolves correctly on all devices. I recently completed a web design and used this code in the meta tags,
<meta name="viewport" content="width=device-width, initial-scale=1">

Sadly, this doesn't cause the website to resolve correctly on mobile devices in landscape and portrait modes. I have a feeling there's a 500 hour course of instruction in my future if I want to fix this issue. Perhaps there are some easier lines of code that will solve my problem? Thoughts?

Thanks...

[coothead]

Thoughts?

If your page appears to be unresponsive, disable your CSS
and you will find that it actually becomes responsive.

So you will then know where the problem lies.

If you cannot resolve it give the members here your HTML
and CSS code and they might be able to help.

coothead

[Lee Batchelor]

Thanks Coothead. If I disable my entire CSS sheet, the pages will be a jumbled mess. How will I know if the result is reliable? I assume you mean, "Yes, things will be messed up but the messed up pages will look the same on my iPad, Android, cell phone, and other devices as my PC."

Do I have this right?

[coothead]

Do I have this right?

Not really.
Your page will be responsive when the page is rendered without
horizontal scrolling on all devises.

HTML alone does this.
CSS can mess it up.

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

Jason M. Knight - How to make a web page

coothead

[Christian J]

If I disable my entire CSS sheet, the pages will be a jumbled mess.

That shouldn't be the case with a good HTML structure. A link to a sample page might help.

"Yes, things will be messed up but the messed up pages will look the same on my iPad, Android, cell phone, and other devices as my PC."

Not sure what you mean with "the same" here, but one of the strenghts of web pages is that they can (and should) adapt to different media.

[Lee Batchelor]

Thanks, Coothead. I'll give that article a read.

[Lee Batchelor]

Christian, I nulled out the CSS sheet and opened the index.htm page on my PC. Everything displayed perfectly but the alignments were all to the left. I can upload the page to the server and test it on various mobile devices to discover how and if my CSS structure is causing issues.

As a matter of history, I studied technical writing for two years and obtained my diploma, about 12 years ago. Two of my courses were HTML and CSS but that was long before mobile devices became the norm. Over the years, I have basically self-taught myself, so a modern-day, formally trained web developer may look at my coding and tell me to go back to school! The only code proofing tool I use is the W3C validator. I'm happy to post the code to my index.htm page and CSS sheet. There is nothing proprietary or private in the content. It's a simple band website containing eight pages. I am the piano player in this band. Before I joined, they created a website from bandzoogle and used a dismal template. The url is https://www.theoffbeats.ca/. Of course, you can view the page source directly from the site.

Thanks for the help. Further thoughts?

This post has been edited by Lee Batchelor: Jan 12 2024, 10:36 PM

[Christian J]

Everything displayed perfectly but the alignments were all to the left.

That's the default for most HTML elements.

The url is https://www.theoffbeats.ca/.

That looks like a decent HTML structure, semantically speaking. The NAV menu links could be in a UL list. Perhaps you could use only one H1 element, and H2 for the less important one. Things like

CODE

<p class="pad"><b>A brief history of The OFFBEATS</b>

should be replaced with H2 elements as well.

Structurally speaking, you might apply CSS directly to the FIGURE elements, not need for the containing DIVs. Perhaps also use similar HTML for the banner?

I also think it's good practice to always use end tags such as </p>, even though I don't think it's incorrect to omit them in your example. Instead of using BR elements at the end of the P's, use CSS for margins.

It's usually more practical to avoid inline CSS (STYLE attributes directly in elements).

[Christian J]

The CSS looks like it can be shortened in various ways.

NAV becomes increasingly truncated in narrower windows, perhaps because the Flex column layout has no room for the links, and (being positioned) NAV produces no horizontal scrolling? Perhaps you could use Media queries to only apply the Flex column styling above a certain width?

On the rest of the page it seems a horizontal scrollbar appears below 1200px width, perhaps due to the 900px width of .maindiv. It also seems a second .maindiv is nested inside the first.

[coothead]

Thanks for the help. Further thoughts?

Check out a reworking of your home page here...

Lee-Batchelor.zip

coothead

[coothead]

I forgot to mention that I have used index.html rather than index.htm

coothead

[Lee Batchelor]

Hi Coothead,

Many thanks for the file. I'll check it out. So sorry for the late reply. I was away for a week or so.

[Lee Batchelor]

Hi Christian,

Thanks for the analysis. You and Coothead have succeeded in showing me how much I don't know about CSS and HTML !

Coothead sent me revised CSS and index.html pages. I'm viewing them now and will post back. Thanks again!

[Lee Batchelor]

Okay, I opened the new page design Coothead did for me and it looks perfect on my Android and iPad. The only issue I see is the words "The Offbeats" and our group picture are forced to the outer left and right margins respectively. How do I fix that so they reside in the middle? I don't want to ruin the code that Coothead wrote. Much appreciated!!

Note
On the current index.html page, I added a link at the bottom beside the StatCounter. It's labeled "Test". It displays Coothead's reworked page.

This post has been edited by Lee Batchelor: Jan 17 2024, 10:52 AM

[coothead]

The only issue I see is the words "The Offbeats" and our group picture
are forced to the outer left and right margins respectively.

How do I fix that so they reside in the middle?

Replace the existing rules with these...

CODE

h1 {
   margin: 0;
   padding: 3rem 0;
   font-size: 4rem;
   font-weight: normal;
   line-height: 1.5;
   color: #f5f5f5;
   text-align:center;
   background-image: url(images/band2.png);
   background-repeat: no-repeat;
   background-size: 28rem 17.72rem;
   background-position: center 1rem;
}

@media ( max-width: 28em ) {
h1 {
   font-size: 3rem;
   background-size: 17.5rem 11.77rem;
}  
}

Also note that I resized and compressed all the images used for the page.

coothead

This post has been edited by coothead: Jan 17 2024, 12:00 PM

[Lee Batchelor]

Great, thanks again Coothead. Send me your invoice 😬.

Edit
How easy would it be to convert the remaining pages? I certainly don't expect you to do that. I should be able to work with your coding examples. Thanks!

This post has been edited by Lee Batchelor: Jan 17 2024, 01:42 PM

[coothead]

Great, thanks again Coothead. Send me your invoice 😬.

No charge.

How easy would it be to convert the remaining pages?

Easy for me.
I have put your amended page on my site....

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

If the pages meet with your approval, then I will zip all the files for you to download.

coothead

[Lee Batchelor]

OMG Coothead. What a tremendous offer. You're a saint! The pages look fine. I usually right align the picture in the banner and left align the band name but I can probably adjust the CSS file to suit.

I'm a technical writer and technical writing instructor. If I can ever be of service to you, please ask. I owe you. Many thanks again!!

[coothead]

I usually right align the picture in the banner and left align the
band name but I can probably adjust the CSS file to suit.

I am a little confused.

In post #14 you wrote...

The only issue I see is the words "The Offbeats" and our group picture
are forced to the outer left and right margins respectively.

How do I fix that so they reside in the middle?

Do you want me to now revert it?

coothead

[Lee Batchelor]

Sorry for the confusion, Coothead. When I opened your first revision, The OFFBEATS was tight to the left of the computer screen, that is, fully left aligned. The picture was fully right aligned.

I think you can ignore that issue. I can likely figure out from your code how to duplicate the name and picture as it is displayed on our current site. Thanks...

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.

This post has been edited by Lee Batchelor: Jan 24 2024, 10:26 PM