Hi Everyone,

I wanted to see if I could get some constructive feedback on my organization's website - specifically with the responsive design. We use a content management system, so the amount that I am able edit myself is rather limited - most "backend" things require me to go back to the company that originally built the site (I can just edit the content).

It seems to me that some of the responsiveness is not working the way it was intended - for example, when I look at the site on my iPhone or iPad (or even when I just scale down the window), it seems like the images don't scale as they should. In some cases content is completely cut off depending on the screen size.

But I'm not experienced enough with responsive design to know if this is a problem with the site's coding, or if it is a function of the type or size of images I'm using.

Basically, I'm just looking for concrete facts that I can compile and send back to the CMS company to hopefully be fixed. I obviously want the site to look as good as it can both on desktop and on mobile/tablet.

My organization's site is: David Posnack JCC - David Posnack JCC

Thanks in advance for any information you can provide!

Hi David, I did a google search of the name you provided for the site. I opened the Jewish center site that was the result of the search. I looked at the home pg. It appeared to be completely responsive. I then shrunk the pg down and looked for the menu and opened it on small screen to look at its function. There were some bunching up and overwriting and rendering problems on that break point on the menu. Judging from this I would imagine that there are similar problems throughout the site. I would recommend that you go over it completely and document all of the problems with it and submit that list of items to the web maintenance person to be straightened out.

I just realized that the link didn't work in my original post. The link to the site is: http://www.dpjcc.org/

Thank you for the quick response, GregB! Do you think the images work properly? Or do they look like they get cut-off at certain sizes?

The site responds fine on my Android phone, portrait and landscape. I didn't check every page, but on the 'Adults" page, the three photos under the large banner photo don't resize. Notice in the code they have specific sizes:
Remove the height/width or replace it with – width: 100%; height: auto; so the images can resize. Do the same for other images with specific sizes.

On the menu you might change the green box on "Giving". On the phone drop-down, it crowds into the link above it, also it gives the impression that since it's highlighted, that's what page I'm on. A bit confusing. A separate button at the top of each page might be better.

One pet peeve – please indicate when something is a PDF that will automatically download. Not everyone wants to risk a PDF download, or add the file weight to their storage.

So on the adult page (http://www.dpjcc.org/adults/adults/), I have them now at-size. The first 3 are not in a table, but have 2 spaces between each. The second 3 are in a table, but without the spaces between. (see attached photo)

They scale down in the table, but stay aligned with each other. They stay at the same size when they're not in the table, but for some reason the 3rd picture doesn't align.

I've had situations where, when images are in a table, the table ends up going off the page when scaled down - even though the pictures are at-size (such as: http://www.dpjcc.org/cultural-arts/cultural-arts/). But at the same time, how would I make the 3 pictures align properly?

Which way is the proper/recommended way to do this?

Tables aren't automatically responsive, so that's why they would get cut off.
You could use the display: table property rather than an actual table or even better – use Flexbox.

Or, instead of putting images/logos in a <p> or a table, which might be inheriting properties you don't want, create a <div> to hold the images.
Try it with display: inline-block and text-align: justify to space them evenly. Switch to 100% width and centered for phone screens (use margin: auto for left/right and add a bit of padding to keep them off the edge of the screen.

I would contact the site provider and dump all this on them, since we're not familiar with their CMS (and it uses tables for no good reason ).