MyBB Community Forums

Hi,
Please, help answer any or all of these questions:

A google search for "Modern Web Design Tutorials" is dominated by .PSD layouts.
Doesn't CSS/xHTML with *very few images* load much faster? (duh, of coarse it does)

1) A "sliced .PSD" layout is obviously a huge image file cut up into pieces / The resulting file sizes are still huge, even though they are sliced / ~Half the world (or more) still uses 56k/v90 modems /

• So, "modern .psd" style sites generally take ~45 seconds, or more, to load over a dial-up connection?
  

Q #1) The line above in bold is correct, right? (How could such huge graphics files *not* take ~45 seconds over-dial up?)


##
2) I'm trying to learn to make decent looking layouts using only CSS/xHTML, gradients, small images, etc. Anyone have a link to a favorite tutorial or two?


$$$
3) How do you design CSS (not sliced .PSD) to be "clean and professional", instead of "too simple and amature?"*
(*Yes, I know about CSS Zen Garden, and am probably heading there right now, any other advice, please?)


####
4) Is there a solution for rounded corned div's which works in IE8 without using images?

Thank you very much for help.

The only way to achieve rounded corners in IE is to use images. Webkit isnt supported in IE8. IE9 is suppose to have it but Microsoft will probably fail again.

(2009-12-15, 12:36 AM)Lyndon Wrote: [ -> ]Webkit isnt supported in IE8.

You mean CSS3 WebKit is a rendering engine.

How is Ie6 modern?

A google search for "modern web design tutorials" gave me this as the first result:

http://www.webdesignfromscratch.com/web-...-guide.php

The very first point mentioned is "Simplicity". PSD is not always the answer.

PS: That actually looks like a great guide. I think I'm going to read through it :p

(2009-12-15, 01:09 AM)Zash Wrote: [ -> ]A google search for "modern web design tutorials" gave me this as the first result:

http://www.webdesignfromscratch.com/web-...-guide.php....

I saw it, those same results are still dominated by...
40+ Greatest Web Interface Design Photoshop Tutorials, Part I ...

Create a Clean Modern Website Design in Photoshop

27 Best Photoshop Web Layout Design Tutorials to Design Decent Web ...

#
Thanks for reminding me about the first one

(2009-12-15, 12:36 AM)Lyndon Wrote: [ -> ]The only way to achieve rounded corners in IE is to use images. Webkit isnt supported in IE8. IE9 is suppose to have it but Microsoft will probably fail again.

5 minutes ago, I would have agreed with you, but...

• I just found a "little-known secret" has been updated for IE8
  

All you need is one little file called border-radius.htc:

   1. .curved {
   2. -moz-border-radius:10px;
   3. -webkit-border-radius:10px;
   4. behavior:url(border-radius.htc);
   5. }

The HTML:

<div class="curved">Curvd div</div>

Source:
Read more: http://www.htmlremix.com/css/curved-corn...z0ZiNycZyy

One file get it here or at the source:
[attachment=16547]

FYI: This method looks great in all browsers except Chrome.
Chrome ({border-radius:10px}) hasn't been fixed yet, but grey on white still looks real good, IMO.

I'm so happy, since this did work in IE7 (maybe even IE6, but who cares), and now it works for IE8, yeah!!!

This sample shot is taken from IE8, and the round corners use no images.

Holy! Is that for real :O (the IE thing) Pretty cool trick, I'm gonna try it, but probably using a conditional comment on the markup to add the behavior to .rounded.

@Original Topic: A PSD doens't always mean huge images and slow page loads. And slice everything in a billion images is one of the worsts things you can do. 3) When designing with CSS only, you have to come up with a comfortable and simple layout, and be very picky about colors. Usually leaving enough of white space is good in this case.

Also, when use lots of images use optimized CSS sprites (saves a LOT of http queries, especially useful if you have a large image-based template).

Oh yeah, sprites! I forgot to mention them. They are VERY helpful in your page load

You know a lot of what you see in a PSD can be made into CSS? And a lot of the images are sliced and then repeated.