Making an old site responsive

HTML & CSS
41

You know, I didn’t even notice that, But I can clearly see the difference here in your “side by side.” I have since fixed it. Thanks for that. I have a feeling that the // comments worked on my local machine (I don’t know why) when testing, but caused a problem on the live site when I failed to clean up after myself before uploading the style sheet to the server. Strange. I’m thinking that at the time I created this site, I was using IE 7 (most likely) and it probably didn’t care. Where I picked up that practice, I do not know. At the time I created the site I knew nothing of Java Script, so I wouldn’t have known they were JS comment marks.

While I was at it, I got rid of the border between the menu items. Decided I didn’t like them.

I have validated my CSS now with the W3C validation service and get no errors.

1 Like
42

I notice that too. IE 8, no problem. Page hangs together even zooming way in.

43

Another question: I see more often now that there is no Doc Type declaration, but only <!DOCTYPE html> . Is it no longer necessary to declare Doc Type?

Second question: There has been mention of not using a wraper div. Why is this no longer considered good practice? I have used a wrapper when I wanted to apply shadows around my main content container, which I usually call, div id=page.

Finally, what would be the first steps to make this site (auntievspizzeria.com) responsive? I know to add the W3.CSS style sheet. How do I then need to change my CSS? (And I understand as you have mentioned before that I need to eliminate specifying a height)

44
Off Topic:

If you want inline code to show up, like <p> tags or whatever, you need to type a backtick ` before and after it.

45

What’s a “backtick”? I thought you meant backslash, but that doesn’t work either. Never mind; I figured it out.

46

Something I’d never used (and didn’t know the name of) until I needed it for formatting code here. It’s in the top left of my UK keyboard - to the left of the numbers - but some European keyboards don’t have it at all.

1 Like
47

That’s the short version of the SGML dcoteype for HTML2 through HTML4. HTML 5 doesn’t have an SGML doctype because it doesn’t follow the SGML standard. Rather, it just has an HTML tag that replicates it. It technically is still a doctype.

You definitely should continue to declare one. The <!doctype html> is just fine.

[quote=“WOtis, post:43, topic:205596”]
There has been mention of not using a wraper div. Why is this no longer considered good practice? I have used a wrapper when I wanted to apply shadows around my main content container, which I usually call, div id=page.
[/quote]Just because it hasn’t been mentioned, doesn’t mean it’s no longer good practice. It depends on the design. Wrapper divs are still fine depending on the design.

Do you have widths anywhere? Turn them into max-widths so that the page can scale up/down reasonably well (but will probabl ystill break).

From there, identify where problems arise (e.g. at 800px, let’s say you need to stack 2 columns). Then you’d write your media query for 800px and below, and remove teh float/table-cell/inline-block (whatever it is) and that way, it’ll stack at that resolution.

48

It is still necessary for HTML5 to distinguish standards mode (with) from quirks mode (without).

You can omit the doctype for XHTML5 as XHTML doesn’t have a quirks mode.

49

As @RyanReese said, <!DOCTYPE html> is the HTML5 accepted doctype. The second thing that I did while dabbling with your code was change the doctype from XHTML to HTML5… nothing changed (that’s a good sign). Updating your doctype would be painless

I don’t think you followed the conversation very well. The outer or “wrapper” div is still good practice. It is possible to avoid using a wrapper div, but there are “considerations” (things to remember) if you choose to not use it. Personally, I have no wish to not use a wrapper. It is a very simple, stable device and it works predictably. Eliminating the “wrapper” div comes with caveats… more rules to remember (not difficult, just something more). I recommend that you continue using your wrapper div until you understand the interactions a little better then reevaluate you goals.

The layout. Anticipate/plan the way the “look” of the page will change at different widths. From what to what. Generally, I start with a desktop layout and see what happens as the page narrows. At points where the layout “breaks”, I consider a media query and code changes. “Mobile first” is another school of though… start small and expand. My imagination seems to work better resizing from large to small than from small to large, so I do the “Desktop first” thing.

1 Like
50

No it isn’t - HTML 5 doesn’t have a doctype - a doctype is an SGML tag whereas that tag in HTML 5 is an HTML tag not an SGML tag (since HTML 5 doesn’t follow the SGML standards for defining markup languages).

1 Like
51

Sorry, I think I phrased my sentence poorly. How about…

“The general doctype, <!DOCTYPE html>, is acceptable for use with HTML 5.”

If that is incorrect, then please correct it.

52

The SGML general HTML doctype, <!DOCTYPE html>, is acceptable for use with HTML 2 through 4 and XHTML 1 (the versions where the markup follows the SGML standards) as none of the browsers actually use any of the more specific information that the standard definition provides.

The HTML tag <!DOCTYPE html> was introduced in HTML 5 and should be used with all HTML 5 pages to avoid quirks mode.

Neither is needed with XHTML 5 as it is neither follows the SGML standard nor has a quirks mode.

1 Like
53

I was playing with the Pizza Site today on my machine (local host). I can see where the trouble spot are. My header is a background image that was created with Paint Shop Pro. It has a custom gradient background with some special lighting effects, as well as the Site Name which is part of the image. This will not work, because when it is reduced in size, the text on the right, and the logo, wind up covering over the shop name (AuntieV’s Pizzeria).

Another issue is the menu bar (which I called “Infobar” in my CSS. There are just a whole bunch of issues that aren’t going to be easily resolved.

I tried changing the width to “max-width” and adding the class “w3-content” to those divisions. Big mess results! I don’t know if this can be converted easily and still maintain the original design for desktop and larger devices. (tablets).

54

I said that I was dabbling with your home page a bit. The results are less than I had hoped for, but nontheless… As long as you can keep a sense of humor (and perspective) this is what I have done.

I spent most of the time on the vertical menu and never accomplished anything that I liked. This version hides the menu offscreen at narrow widths. There is a line in a media query that is commented out that restores the menu when uncommented. However, that rule should be applied with JS when the “Menu” item in the information bar is clicked, not with the media query. It is there for reference because I do not write JS.

The header gradually narrows until the graphics and text overlay one another. It’s quite good for most of the travel, though.

The address wraps in the middle rather than a word at a time.

I did not try to scale the information bar. It overflows the right edge of this dabble. I think I set it up as a table with the items as cells… just experimenting.

The building scaled down to fit the page. The text in the top right quadrant scales with the image then, when approaching too small to read, it drops below the building.

I added a faint line between the days in the footer.

The times and AM/PM designations in the footer stay together and do not wrap separately. I chose to use &nbsp; to do that.

That’s about it. Mostly about “looks” and possibilities. While experimenting, my code should be questioned and not assumed to be “good”. It’s just a dabble, after all.

If you know how to download from Dropbox, the files and images are here in one folder. After downloading them into one folder on your PC, just click the home page in the folder.

Cheers

EDIT: One more small change that you might find interesting. Zoom the font size only larger while watching the text in the header. Notice that the date stays put and does not intrude on the page below.

Also, the shadow images are gone… replaced with a box-shadow and a gradient.

55

<off topic>

Thanks, Stephen. I have never heard the <!DOCTYPE html> described this way. I’m having a bit of a problem picturing how it works. Maybe next week or month it will seem like “old hat”, but right now it’s a handfull to grasp. Paradigm shift, and all that. Thanks for your patience.

Any recommended reading about the tag?

56

Off-Topic

I don’t call it a “tag” proper, but a “declaration”

If you’ve never looked at a DTD (Document Type Definition) it can be a bit overwhelming until you get used to it, but they’re very informative.

* an example of a DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

AFAIK HTML5 has no DTD

1 Like
57

I downloaded and checked the “auntievspizzeria1.htm” source and noticed a missing html in the <!doctype>

1 Like
58

Great. A doctype typo. How timely.

I’ll replace that file right now.

Thanks, John

EDIT: done.

1 Like
59

I played with the header a bit more. Added another file to the dropbox named “header,responsive.html”. The home page and this file were written independently. The code is not interchangable. Again, it’s just a behavioral demo that can probably be written better. Food for thought, so to speak.

60

This is what I’m used to seeing, which is why I was asking about it.