Newbie Question - Web Design Graphics

M

messa21

New Member
Hi...I am kind of new to the world of web design right now. I was wondering if someone could help answer a quick question. It may sound really simple and newbish.

In creating a web page, how much of the web page should be made utilizing a graphics editor like photoshop instead of utilzing css/html code. For example, is it better to use HTML/CSS code to create a colored background for a web page or is okay to use graphics editor to create the background.

I guess after the background is created it would then be uploaded as an image then applied via html/css. I hear people saying that they create most of their impages/graphics on editors thus the need to upload and apply the image but is there a threshold where the page starts loading slow and gets bogged down.

Thanks everyone!
 
notarypublic

notarypublic

New Member
CSS and HTML are always preferable. Here are a few reasons why:

Pages load faster:
Any image must be first downloaded by the computer the visitor is using. This takes time, and uses bandwidth - the more bandwidth a webpage uses to load, the more likely a visitor will move on to a different website.

CSS is easier to change:
This is probably the biggest reason I switched to using CSS instead of images. If you decide to change any of the colors on your webpage, at all, you will have to manually edit the colors on every single image. After the 3rd round of doing this for a rollover navigation bar, I decided there has to be a better way :)

CSS breaks gracefully:
If the image doesn't load for some reason, you're caught with your pants down - suddenly the user sees nothing but a white blank background page. At the very least, if you're using a textured background, set a background color behind it as a back-up plan.

Bragging rights:
Nothing feels more impressive than designing a slick website using clever CSS, minimal images, and good design technique. Think to do more with less - a minimalist design almost always looks more professional than one loaded with graphics.

Best of luck,
 
ronaldroe

ronaldroe

Super Moderator
Staff member
I totally agree with notary. Every design I do, I make a game of it to see how few images I can use. This helps a bit, since I'm much better at coding than I am making graphics.

In the end, it's entirely up to you how many images you use vs CSS. One thing to make absolutely sure of is that the images you DO use are web optimized. Knowing the differences and applications of the various image formats is essential.

Best of luck!
 
R

rickidoo

New Member
Messa,

If your website background is a flat color, which means it is one color only, then you can add this to your site via css for the body tag, using background-color.

If you, however, need to have some kind of a gradient background, or a picture background, the only way I know how to robustly add it is with a graphic which is then tied into the body tag as well.

The trick with backgrounds is choosing them wisely and sizing them ideally. For example, if you add one that starts darker at the top then moves to a light color, then all you need is a graphic a few pixels wide and as long as you need it. Save it as a gif if you can get away with it (255 colors or less) or a png.

If, on the other hand, you want a much more extensive background image, you must strike a balance between file size and desired effect.

Think creatively. For example, I am building a website now where the client insisted we would have a certain rather detailed picture in the background, surrounding the main body of the page. (So if the browser is widened, more and more of the picture is seen.

Since a large part of the background image would always be behind the main part of the website, I literally cut a square in the picture and flat filled it. I saved it as a jpg (since it was millions of colors). I was able to lose about 33% of its file weight that way.

How much is too much file weight to add for a background picture? Page download speed is driven by alot of things. If you have a pretty lightweight webpage (not a lot of graphics in it), you can get away with a bigger background image. Many big websites today weigh in at 1MB in size! That's bloated in my opinion. The "ideal" size of a page is open for discussion. But today, if you can aim at 150K or less, you are doing good.
 
Last edited:
Phreaddee

Phreaddee

Super Moderator
Staff member
flat colour background should always be css
css3 introduces a lot of new styling which can make even more imagework redundant (such as rounded corners, box shadows, gradients etc) although they are not fully supported across all browsers.
I never use gifs, never. PNGs all the way baby...
jpgs for images like photos etc...

you should always strive to use as little imagery on your site as possible, and use css whenever possible, any other way of doing it is simply lazy...

back when I started working with websites, the average user had 16colours/640x480 resolution, and it has changed a lot since then, I remember when Super VGA monitors became all the rage, and not long after that almost everyone loaded their websites(sorry tables!*shudder*) up with images everywhere...Those were dark horrible days, and we should never return there again!!!
 
ddt

ddt

New Member
Broad question but here are some tips I hope help.
-Use as much coding as possible. CSS has many attributes to design a lot of the color and layout you will need. Graphics are a major bandwidth hog but they are necessary. Try to find a perfect balance.
-If using photoshop, always save for web devices
-Fireworks has export wizzard or batch process. JPEG 80% works well for photos, and PNG 8 or 24 for others. Gif is pretty much dead, especially if there is a lot of detail in the graphic.

If you need help on a specific question feel free to message me. I am glad to help as much as possible cause I was helped in my coming up and like to re pay the assistance.
 
S

staciejortega

New Member
Advantages of CSS

* CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
* Pages load faster
Less code means faster download times.
* Easy maintenance
To change the style of an element, you only have to make an edit in one place.
* Superior styles to HTML
CSS has a much wider array of attributes than HTML.
 
M

messa21

New Member
Thank you everyone!!! I am just starting out here and as you can imagine have lots of questions. Thanks for your help on this one. Really appreciate it!!

Thanks DDT...I will definitley keep you in mind if I have any questions...Thanks again to all..
 
J

jumpingspider

New Member
notarypublic said:
CSS and HTML are always preferable. Here are a few reasons why:

Pages load faster:
Any image must be first downloaded by the computer the visitor is using. This takes time, and uses bandwidth - the more bandwidth a webpage uses to load, the more likely a visitor will move on to a different website.

CSS is easier to change:
This is probably the biggest reason I switched to using CSS instead of images. If you decide to change any of the colors on your webpage, at all, you will have to manually edit the colors on every single image. After the 3rd round of doing this for a rollover navigation bar, I decided there has to be a better way :)

CSS breaks gracefully:
If the image doesn't load for some reason, you're caught with your pants down - suddenly the user sees nothing but a white blank background page. At the very least, if you're using a textured background, set a background color behind it as a back-up plan.

Bragging rights:
Nothing feels more impressive than designing a slick website using clever CSS, minimal images, and good design technique. Think to do more with less - a minimalist design almost always looks more professional than one loaded with graphics.

Best of luck,
Click to expand...


Well said! It's really big thing to learn about this. I believe they are the basic matters and mostly encountered in web design!
 
ronaldroe

ronaldroe

Super Moderator
Staff member
notarypublic said:
Just out of curiosity since we're on the topic, how many of you use sprite sheets for site images?
Click to expand...

I never did until recently, but i only use them when I'm doing a hover effect You wouldn't think in the days of broadband it would make that big of a difference, but it does.
 
You must log in or register to reply here.
Top