Layout issue pixels vs % and css

HTML & CSS
1

Hi,
I have been having an issue with my wordpress theme and have been talking with those who designed it to sort out an issue with sidebars and removing them from blog posts. Stemming from that, I have several questions. My blog is a photography blog and I want my blog posts to occupy the full width of the screen so that the photos look more impressive to the viewer regardless of screen resolution.

The questions I have are as follows:

  1. I’d prefer to use a % to specify the width of the posts, but the issue is that in most posts I have a small image or two with some text wrapping around it in the paragraphs. Is there any way to avoid this rendering incorrectly on monitors of different resolutions?
  2. If I was to specify a width in pixels, what would be a good width to use so as to accomodate the majority of people?

Many thanks for the help

2

What is “incorrectly”? Would you prefer the text not to wrap? If so, you can set the image to display: block or width: 100%.

If I was to specify a width in pixels, what would be a good width to use so as to accomodate the majority of people?

You can set a % width on images, so no need to go the pixel route if you don’t want to.

3

Thanks a lot for getting back to me. By “incorrectly” I meant that as I had the width of the image specified in pixels (300 typically) and the blog post as a whole in %. This meant that the text would change alngment based on the resolution of the viewers monitor.
I wanted to find a way to avoid this change in the rendering depending on the monitor used.

Perhaps mixing % and px values is not the way to go? I wasnt aaware of that. Is it generally recomendable to stick with all px or all % in order to avoid changes in the rendering?

I wasn’t aware that you could set image width to % also. Very useful for thumbnaail imaages which I have. I just tried it. One question though, do I need to upload higher rsolution images given that their pixel width can vary based on the monitor used while viewing. Won’t this slow down load times and is there anything I can do to get around this?

Finally when trying out your tip in wordpress for setting the image width and height as a %, I noticed that if I say set it to 20% by 20%, then in the viewer, the image appear must taller and distorted, as the proportions of the writing area and different. Is there a way to overcome this so as they render as they would when published and viewed on a monitor?

Thanks again.

4

If you set the width of the image in percent then just set the height to auto and that will maintain the correct aspect ratio of the image.


.imgname{width:100%;height:auto;}

One question though, do I need to upload higher resolution images given that their pixel width can vary based on the monitor used while viewing.

If you want the image to look good at large sizes then you have no option but to load the better quality image. It all depends on how big you want the image to be. It would look silly on my 27" imac if I maximised the whole browser and your image filled my whole screen. You would be better of making the page have a max-width instead to avoid this issue. Maybe around 1200px wide maximum.


.page{
max-width:1200px;
min-width:320px;
margin:auto;
}

It would still be wise to keep the image files as small as possible so try and find a happy medium. Make sure you optimise the image well in your paint package or use one of the free tools around the web that will compress the image. As a ‘general’ rule if a large image is over 200k then its too big for the web, however if the purpose of the site is to show photography images at good quality then your visitors will have to expect to wait.

5

Thank a lot for the reply Paul.
I tried the auto height and it worked well. Thanks for the tip.

You recommend fixing the mas width to 1200px. But should I be expressing the image dimensions as a percentage in case someone is browsing in a larger or smaller resolution monitor? That way I would maintain the same rendering regardless of resolution.

Where in wordpress do I specify the max width? Is there somewhere I can enter it in as a numeric value value, rather than insert te code you provided?

If you had time, I’d really like you’d take a look at my site and give me any recommendations that you may have on how I should proceed. Only if you have the time of course…

Thaanks again for the help.

6

You still express the image as percentage but you limit the page width and the image becomes a percentage of your page width. That means you can keep the image size within a respectable range as the page gets no bigger than the nax-width you have set for the page wrapper. On my imac the full width would be about 2600px which is much too big for an image size.:slight_smile:

Where in wordpress do I specify the max width? Is there somewhere I can enter it in as a numeric value value, rather than insert te code you provided?

I’m afraid I don’t use wordpress but I doubt there’s an option to change the width as that would be a css issue as usual. @ralph_m knows a little about wordpress and may be able to advise.

7

I tried to look at your page but it was taking so long to load that I gave up. :slight_smile:

I could see from the net panel in Firebug that you were loading images of 1.8mbyte and you had loads and loads of them! 1.8 mbyte is more than the whole resources I would use for a whole page. You need to reduce those image file sizes by about 10 times otherwise no one will wait to see them.

8

I also have almost no experience with WP. I occasionally help with people’s sites, and have found that the best place to put custom styles like that is in the custom.css file. It’s usually located amidst the files for the theme itself, and as far as I know, it can’t be accessed via the admin panel. So you’d need to dig into your website files to add code to the custom.css file.

9

Yeah, they do seem quite big now that you say it. But they are in a photo slideshow, so I understood that as soon as the first one loads, it appears and the slideshow continues to download in the background. But, yes I should reduce the image size.

It seems my theme can only go to a width of 940px. Do you consider this a big narrow for photography? I have emailed them to see if there is a way to broaden it, but still witing to here back. On your high res monitor, I imagine that an image or blog post at 940px would look quite small, no?

I also have almost no experience with WP. I occasionally help with people’s sites, and have found that the best place to put custom styles like that is in the custom.css file. It’s usually located amidst the files for the theme itself, and as far as I know, it can’t be accessed via the admin panel. So you’d need to dig into your website files to add code to the custom.css file.

Thanks Ralph, I’ll have a look for it and see if I can modify it

Thank aagain for the help!

10

I still don’t understand what you mean.

Anyhow, it’s a shame the theme is using tables for layout. That’s badly out of date, so the coders need to update their skills a bit.

Your layout still has a sidebar. What are you planning to do with the site at this stage?

11

Hi Ralph,
What I meant was that I normally put a small thumbnail image on the top left hand corner of each post and wrap the text around that. I was specifying the image dimensions in pixel rather than %, so what happened was that the text would be rendered differently depending on the resolution, as more or less words would appear on each line, while the image would still occupy the same amount of pixels.

Yes, I still have a sidebar on the home page, which I want to leave intact. I wanted to remove it from the blog posts, which I have done (after 22 emails to photocrati! They have a bug in their code I’m sure but wont admit it. They gave me a lump of css to stick in to remove the sidebar and widen the page.)

So right now they have all pages specified to occupy 100% of the screen, while the blog posts with no sidebar occupy 940 px. I wanted to have it so that the blog posts with the photos would occupy 100% of the screen, but it now seems that their theme only can widen up to 940 px.
Does it make sense to you that things are this way?

Does the site look ok to you?

I am considering changing theme so as I can showcase the image a bit better. It will probably be a lot of work though

Thanks for your responses

12

The site looks OK to me, but it has some JS on it that prevents looking under the hood properly. I don’t buy the notion that you can’t change the styles any way you like. You always can, of course, if you have access to the CSS, which you do.

13

Thanks for getting back to me. Those who wrote the theme got back to me. They say the max width of the theme is 960px, so I have to optimize for that width. As I know the width is in px, I can also set the image sizes in px, thus ensuring that the render won’t change dramatically.

I need to go back through some of the posts and reduce the image size, now that I know that the the max width is 960px. One question reagrding that, what would be a recommended image size at 960 px for fast download? Should I just try and export the smallest image size from photohop that looks to have sifficient quality?

Also I heard that google penalizes websites that have slow load times. Is this really true? and if so, what do they do in the case of a photography site where mant higher res images must be downloaded?

EDIT:
I use fancy box for the images,which opens the photos up in a new window. So if for example someone is viewing the site of a 2600 px monitor, I could have a 2000 px image also upoaded which would load once the user clicks on the image? thus having the advntage of showing the image of at high res. Is my thinking right on this? there should be no problem?

Thanks again for the help

14

These days, the situation is moe complicated. On the one hand, you have tiny mobile screens for which a large download is pointless and chews up precious bandwidth. And then you have “retina” screens, which are much more sharp and make your average image look blurry.

There’s a lot of debate and experimentation over how to deal with this. My current favorite approach is discussed here: http://blog.netvlies.nl/design-interactie/retina-revolution/ Basically, you size the image to twice the size it’s likely to be displayed and then reduce the quality significantly in Photoshop. When the image is resized in the browser, it looks good—both at normal resolution and on retina screens. And you also get a relatively small file download.

Also I heard that google penalizes websites that have slow load times. Is this really true?

Apparently, yes, though I doubt it’s a huge factor. If your initial page load just contains thumbnails I doubt it’s an issue.

if for example someone is viewing the site of a 2600 px monitor, I could have a 2000 px image also upoaded which would load once the user clicks on the image?

I’m not sure if fancy box allows for varied images sizes. Normally, the image just opens at its natural size, or at a fixed size you’ve set for it, but I’m not sure about that. I guess you could try setting a % width. Not familiar with fancybox.

15

Thanks Ralph for the reply.
The link you provided is interested reading. I’ll study it in more depth when I get a bit more time tomorrow.

Thanks again for all your help.