I don't have a catch-all container for the current landing page HTML, but there is a content-wrapper with an i.d., #lpcontent. I guess that will need to be added in, but I do not know what its styles should be.

The first step here, in my mind, is to figure out how to slim/scale the graphics when the viewport width is less than 960px. I'm not aware of a CSS property that scales graphics, although in the tutorial I linked, the author performs scaling with images.

Hopefully this thread can help designers with another example of responsive design.

Thanks, SitePointers! -Tyler

ronpat
—
2013-06-15T01:02:24Z —
#2

It won't be as easy as plugging in a media query or two. The "look" of your pages is designed around images and containers with fixed dimensions (widths in particular). You will need to come up with a different strategy/layout. This amounts to [almost] "starting all over". When designing for small devices, one generally dispenses with images and things that do not convey the most important content, and progressively adds them for larger viewports where there is room for stuff with eye appeal.

Let me suggest that you read the following post by @Paul_O_B and especially read the articles about fluid design for which he has provided links. The references are quite excellent as they talk about more than just code.

YIKES! :eek: This is not what I wanted to hear, but it's the truth.I'm better at CSS than I was before, so beginning again shouldn't be terrible. Hopefully it won't take 3 weeks to a month to get a new design finished.

Paul links to quite a bit of tutorials. I'll be studying them quite a bit.

I'm thinking the layout will need to be like this (just a hypothesis/educated guess):

Nine sectors that form a square with the current graphics broken into smaller, more segmented files.

As you will see, there is no mid-left nor mid-right sections appearing. The positioning- well, I'm not really sure what to do there. Maybe the left and right pieces need to be absolutely positioned; whereas, the middle pieces will be relatively positioned. This is what needs to happen first before tackling the media queries.

This design will have to be for more capable devices with larger screen resolutions. I'm going to need to come up with something else for mobile devices.

ronpat
—
2013-06-16T01:30:58Z —
#6

You've been busy! Unless you want to soften the blue lines, they tend to make the text more difficult to read. I would like to try some things with your original design, if you don't mind. Don't know if anything will work out, but I'd like to give it a go.

etidd
—
2013-06-16T02:01:54Z —
#7

Well, of course I don't mind, but do you need me to do the same thing with the original design by breaking things down into smaller segments and getting rid of that ornamental gold bar thing?

I'm all about readability so I may just scrap the blue line thing. I'll see what happens when I lower the opacity of those lines.

ronpat
—
2013-06-16T03:58:22Z —
#8

Nothing for you to do. I'll do the graphics since I don't really know if this will pan out or not. An experiment!

etidd
—
2013-06-16T22:18:36Z —
#9

Okay, we will talk after Father's Day or sometime soon. Let me know if there is anything I can do to help expedite the experiment.

ronpat
—
2013-06-16T22:26:24Z —
#10

etidd,

The attached screen shots demonstrate a fluid page. For convenience, I used an older, simpler page, but the structure should be almost plug-n-play replaceable in your other pages. The layout uses a CSS display:table arrangement to manage the images and a normal div container for all content.

The first image shows a {max-width:960px} page that exactly matches your working page.

The second image shows how the same page looks in a narrower window.

The third image shows how the page looks in a very narrow window with the yellow poles removed. Removing the yellow poles is done by changing one value in css (the width of the edge containers). Doing this gives you an additional 80px of screen real estate for valuable content. That "responsive" action would be done with a media query for devices with narrower viewports. Notice that some of the existing items "break" at narrow widths, such as the "call to action" button. They will have to be redesigned to adjust in a fluid environment.

Let me know if this appeals to you.

ronpat
—
2013-06-16T23:39:03Z —
#11

Just noticed... I finally took a closer look at your test code and noticed that some of the content is outside of #lpcontent. Some is in #topcenter and some is in #botcenter. That will not work. ALL content MUST be within #lpcontent. No exceptions.

etidd
—
2013-06-17T00:28:45Z —
#12

Well, the attachments are pending approval, so I won't be able to see them yet. I have seen those take at least a day or two to be approved. It's kind of funny that a mentor (Sitepoint employee?) has to go through the approval process for attachments.

I guess all the content (including the submission form?) must fall inside #midcenter. #midcenter will also contain #lpcontent and everything inside the page as it did in the former markup, or maybe #lpcontent needs to go in first before everything, right after the <body> tag. Never mind #container, I guess. Who knows? I can't view the attachments.

etidd
—
2013-06-17T01:01:41Z —
#13

I use Photobucket to link to images to avoid the approval process.

ronpat
—
2013-06-17T02:27:55Z —
#14

etidd said:

Well, the attachments are pending approval, so I won't be able to see them yet. I have seen those take at least a day or two to be approved. It's kind of funny that a mentor (Sitepoint employee?) has to go through the approval process for attachments.

I guess all the content (including the submission form?) must fall inside #midcenter. #midcenter will also contain #lpcontent and everything inside the page as it did in the former markup, or maybe #lpcontent needs to go in first before everything, right after the <body> tag. Never mind #container, I guess. Who knows? I can't view the attachments.

Please re-read my #11. I said that ALL content must reside within #lpcontent ONLY, NOT #midcenter. That's an important distinction! NO content should be placed within #topcenter or #botcenter at any level either. That, too, is important! Remember that the negative margins applied to #lpcontent are specifically intended to cover those areas. That's necessary to preserve the height of the top and bottom row of images in a fluid environment.

In summary, the only place you should add content is inside #lpcontent, which resides inside #midcenter.

etidd
—
2013-06-17T05:11:12Z —
#15

Ah, it's hard for me to put it all together sometimes. Shoot.

Well, all the content is now inside #lpcontent, which is inside of #midcenter. The negative margins kicked into effect, branching the div out to its full 960px. It's validated as well. It should be as you have instructed now.

Now, the wait continues on the approval process for your attached images. Is there someone I can PM to push this along? I am surprised mentors have to wait this out. Regular and new members are much more probable to upload attachments with objectionable content.

Edit: I still need to remove the blue lines from the design. I'll get to that tomorrow. I'll modify the old design and segment it up into smaller bits as well to split test in marketing campaigns and see which is more effective.

ronpat
—
2013-06-17T06:27:48Z —
#16

Just looked at your revised test page. Looks good. I'll set it up with the fluid version of your older images and we'll see how it looks. Will get back with you when done.

Cheers!

etidd
—
2013-06-17T13:20:57Z —
#17

Well, they are approved now. That didn't take so long. That fluid design is definitely acceptable. The only thing I see is that the #bottomlink will need to be changed to something else when the page gets down to so thin. In that third image, it says "Get Health". That won't do. I should be able to figure that out, but as I've said before, make me learn it. I'm going to be spending some time dissecting the theory behind this new fluid design.

ronpat
—
2013-06-18T11:14:47Z —
#18

This is a basic design for an image based fluid/responsive page (IE8+):

Well, this is certainly along the lines of what I need to get done. New location of page is here in its rightful spot

Everything down from #bottomlink (changed the i.d. from #getquotes because the h2 link won't always be linked to websites for insurance quotes) needs a few customizations. So far, I removed the h2 link's background image when the viewport is less than 600px wide and changed the hover color of the link.

These are my objectives with the content on the bottom of the page. Let me know which ones are reasonable as some of these may not be practical.

h2 link:-make the words wrap into a new line if the content extends beyond the width of the container (#lpcontent). I attempted to do this by adjusting the height to auto. You'll notice that once the viewport shrinks, the words disappear.-make its background images go away when #lpcontent closes in on the h2 element. The h2 element will vary in width on different pages (in this case, it reads, "Get Life Insurance Quotes", and on another page it will say, "Get Guitar Lessons" or something else that differs in width.). I'm not sure what media query I need to do this, but I think it will need to be targeted in percentages.

#emailbox and the h3 navigation links-make the e-mail submission box position directly on top of the h3 links when the viewport width is 600px or less.

remove the background image for #emailbox when the viewport is less than 400px or so (simple- I can do this one on my own).

h3 links (these get pretty messy and ugly-looking as the width shrinks)-ensure that the links don't wrap and stay on their own line example: Back to the Home Page-->-make the font-size adjust fluidly as the viewport shrinks and grows (you'll notice my novice attempt at this above)

In the first posts on this thread, you linked a post by Paul. I've been learning some interesting things on responsive design, but none I have read so far really touch on what I want to achieve in the above objectives. I'll keep studying them and hopefully I'll find a good one that gets into issues like such. :teach:

-Tyler

ronpat
—
2013-06-20T23:37:08Z —
#20

The <h2> link needs an bit of an overhaul. The text is disappearing at narrow widths because of #bottomlink {overflow:hidden;}.Delete overflow:hidden and you will see that the text is wrapping, but it is not pushing the container below it down. That's the result of your original design. The 3 containers at the bottom of the page need an overhaul.

I will tinker with the <h2> layout as time permits. A redesign would be very easy if you would forego the sawtooth edges If anything works out, I'll let you know, of course.

I don't think that you necessarily need to remove the background-image for #emailbox, but I haven't looked closely, yet.

The <h3> links need to be in their own container.

Yes, {font-size:auto} is invalid. Nice try, though. If you want to change the font-sizes, you will need to use media queries.

Some random thoughts...I would like to suggest that you discontinue using styles such as {max-width:100%} and {height:auto} unless they are appropriate. Where needed, max-width:100% can be useful. It can also cause problems if used inappropriately. Most of the time, it is simply unnecessary. Apply styles for a known, valid reason. New responsive/fluid web designers seem to think that {width:100%} should be included almost everywhere, and that's just not true. Block objects have a width of 100% by default .Use the SitePoint CSS Reference to learn about properties and their [valid ] values. It's an excellent resource! Highly recommended!