A Few Novice HTML/CSS Questions

[nomis66]

Apologies if these questions are a bit basic, but so is my ability.

1. When using images (as opposed to pure html) for elements like banners, headings, buttons etc, it there a way to make screen readers and search engines recognise them?
2. Can a graphic (image) somehow be designated as an html heading (h1, h2 etc)?
3. When inserting a background image is there any need to specify its dimensions?
4. Is there a maximun (practical) total size (KB or MB) for a webpage, and how would I calculate it?
5. When laying out a standard column-type page, is there any advantage to using Absolute Positioned Divs for the side columns, over using negative margins? What do most people do?

Thank you in advance for your help,
simon

[sdt76]

HI nomis66

When using images (as opposed to pure html) for elements like banners, headings, buttons etc, it there a way to make screen readers and search engines recognize them? The best thing to do is place an alt tag in your image for accessibility

Can a graphic (image) somehow be designated as an html heading (h1, h2 etc)? Yes, but I would avoid that since they create a mess for maintenance. Try having to updated your headers in Photoshop, or create new ones, or simply type the header in HTML? Which one sounds easier and faster? Even buttons should be as CSS and imageless as possible.

When inserting a background image is there any need to specify its dimensions? Nope

Is there a maximun (practical) total size (KB or MB) for a webpage, and how would I calculate it? There is no maximum by law, and the needs of the project and the size of the raw content itself have alot to do with determining the file size, but for practicality try to get it as low as you can (ie no images for headers etc). I think Jason has a formula on the amount of HTML and CSS for actual content, but nothing is a completely strict rule.


When laying out a standard column-type page, is there any advantage to using Absolute Positioned Divs for the side columns, over using negative margins? What do most people do? I don't know, I would just use floats myself.

[Stevie D]

When using images (as opposed to pure html) for elements like banners, headings, buttons etc, it there a way to make screen readers and search engines recognise them?

If you use the <img> tag (rather than using CSS background-image) then set appropriate alt text (ie, if the image is a graphic saying "Products" then you want <img src="products.png" alt="Products">) – anyone who can't see the image for whatever reason (eg screen readers and search engines) will see/hear the alt text instead.

Can a graphic (image) somehow be designated as an html heading (h1, h2 etc)?

Yes. Just put it in the code as you would anywhere else, eg <h1><img src="products.png" alt="Products"></h1>

There are alternative ways of doing that, using CSS background-images. While they're slightly more sophisticated and can be a bit more effective and user-friendly, they're also more complicated from your point of view. If you want to keep it simple, this way is perfectly OK. If you want to go for gold, have a look at CSS image replacement.

When inserting a background image is there any need to specify its dimensions?

Not only is there no need, it isn't possible.

Any image that you're putting in the HTML (ie, with an <img> tag) should have its height and width specified so that the browser can get on with the job of laying out the page without having to wait for the image to finish loading. But any image that you're putting in the CSS (ie, as a background-image) is not going to affect the page layout, so it doesn't matter. All you need to do is to decide whether you want it to repeat in one or both directions, and to include that in the CSS.

Is there a maximun (practical) total size (KB or MB) for a webpage, and how would I calculate it?

As small as possible! No, there's no absolute maximum, and it really depends what you've got on the page. I would try to keep it under 200KB for the total download if you can, but for some sites that just isn't practical. To calculate the total size, just add up the size of the file itself plus each individual image, script and stylesheet that it uses. (For repeat visitors, or visitors hitting on several pages on your site, they should only have to download the full whack once, and the scripts and styles etc will be cached on subsequent visits).

Alternatively, you can check it on a site like this one: www.websiteoptimization.com/services/analyze/

When laying out a standard column-type page, is there any advantage to using Absolute Positioned Divs for the side columns, over using negative margins? What do most people do?

Absolute positioning can be very powerful, but can also cause a lot of problems. I would generally try to avoid using it unless there's no other way to achieve what you want. The dangers of absolute positioning are that it's all too easy to create rules that go totally pear-shaped on a different setup, eg with a different window size or text size, whereas relative positioning and margins can accommodate varying size and length of content much more reliably.

(Given the number of really badly written websites out there, the answer to the second question won't necessarily be helpful!)

[oddz]

When inserting a background image is there any need to specify its dimensions?

Not only is there no need, it isn't possible.

Actually, background-size can be used to do just that, which is pretty powerful for browsers that support it. Works really well for say product photos which have differing dimensions and orientations yet should fit in a designated area. Also, applying images that way makes it very easy to center them horizontally but above all else vertically within an allocated area. Lately any mobile sites I've worked on that is the technique I use for handling user supplied images, after throwing them through tinySrc (Sencha io).

[sdt76]

I have issues trusting a browser to size images. I'd rather size in PhotoShop. For differing image sizes, why not use overflow cropping?

[oddz]

Many of the images that I work with come from third party providers yet have different sizing requirements. It would be impractical to store duplicates at all the different sizes we need and considering it changes frequently (that is another topic). Above all else using JavaScript to re-size images would be impractical, especially with mobile devices (big push toward contemporary mobile devices… again another topic). I have found background-size: contain to be a savior, haven't had any problem with it nor had anyone complain. Beats JavaScript considering storing images in different sizes is not an option.

[sdt76]

Yeah I guess if in a situation like that where you need a fall back it makes sense. But if you are sizing images down, it means they are having to load bigger images in the first place right? The ideal would be to be able to size them down in the first place a and save the user's processesor from having to do it. If you're not in a place of being forced to do it, I would use an image editor. It's always good to have a fallback though.

[oddz]

Yeah I guess if in a situation like that where you need a fall back it makes sense. But if you are sizing images down, it means they are having to load bigger images in the first place right?

Not exactly, considering all images go through Sencha io (formally known as tinySrc). Using back-ground size contain merely guarantees the images fit within the allocated space for the image horizontally and vertically centered. Though you would correct if the images where not being passed through Sencha io first, but they are for the exact reason you outlined.

[nomis66]

Thanks everyone for you time and responses.

@Stevie

Can I just clarify a couple of points please:

1. Regarding question one, If I understand you correctly this mean that it wouldn't be possible to apply alt text to a #banner div which had the banner as a background image, but I could apply it to an image (or text) contained within that div.

If the main banner headline is graphic text or a logo, would this be an argument for removing it from the #banner div background image and and floating it above the bg image using an absolute positioned div?

I'm guessing in that situation the #banner div would be set to position: absolute (but with no actual coordinates)?

2. Regarding question five: The reason I ask this is because everything I have been learning about CSS refers to using background-color, tiles, and tiny slithers of repeating image in order to keep webpage backgrounds to a minimum size.

However, recently I been noticing a few "commercial" sites that use huge non-repeated images to fill the entire page background. What's the story….?

Thanks again to everyone,
simon

[sdt76]

Not exactly, considering all images go through Sencha io (formally known as tinySrc). Using back-ground size contain merely guarantees the images fit within the allocated space for the image horizontally and vertically centered. Though you would correct if the images where not being passed through Sencha io first, but they are for the exact reason you outlined.

Cool, I'll have to check that out. I've used Kraken io before, but never seemed to do much better than Photoshop. BTW, if you are using background size to adjust the horizontal and vertical, don't you run into distortion if you only adjust, say, the vertical and not the horizontal or vice versa?

[oddz]

background-size: contain maintains the aspect ratio regardless of orientation so it is a none issue.