[Tenderfoot]

Hello people of the HTML forum.

I've never been much good with HTML/CSS and have just recently decided to try to learn it a little bit better. I've been making a website layout and somehow I'm never satisfied with my navigation bar. I also use box-shadow for a couple of elements which I'm given to understand aren't supported in a few versions of certain browsers, which brings me to my question:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout? And if so, could anyone point me to a decent guide for doing so? Including making buttons/a navbar. I'm hoping that this will do two things at once: 1) Get ma a decent looking navigation bar. 2) Make my website compatible with more browsers.

[Dormilich]

Tenderfoot, on 26 October 2012 - 11:52 AM, said:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout?

IMHO, no. this requires a) pixel perfection, b) speedy internet connection* (lots of images). and it can have problems in scaling.

besides that, does it matter if certain browsers do not have a drop shadow? how many of those browsers are actually used to visit your site? the keywords here are progressive enhancement and unobtrusive design.



* - note, the provider (i.e. you) pays for increased data traffic

This post has been edited by Dormilich: 26 October 2012 - 02:58 AM
Reason for edit:: I detest automatic emoticons

[Tenderfoot]

Dormilich, on 26 October 2012 - 02:57 AM, said:

Tenderfoot, on 26 October 2012 - 11:52 AM, said:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout?

IMHO, no. this requires a) pixel perfection, speedy internet connection* (lots of images). and it can have problems in scaling.

Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

Dormilich, on 26 October 2012 - 02:57 AM, said:

besides that, does it matter if certain browsers do not have a drop shadow? how many of those browsers are actually used to visit your site? the keywords here are progressive enhancement and unobtrusive design.

Ehh, no, I suppose not. I was thinking there might be several other features that I'd need to fix. But you're right though. I'm assuming that IE6 and IE7 don't support it, and according to some study I read, that's about 9% of the Internet. But the shadow is not absolutely essential, you're right.

Dormilich, on 26 October 2012 - 02:57 AM, said:

* - note, the provider (i.e. you) pays for increased data traffic

Very good point.

[Dormilich]

Tenderfoot, on 26 October 2012 - 12:04 PM, said:

Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

not necessarily. CSS now as a lot of possibilities to generate curves and gradients. only if you need an image pattern, a graphic is a must. often you only need partial images (something < 1 KB).

though I’m not a professional there.

[Darky88]

Only IE doesn't support Drop Shadow?
Drop Shadow is a concept in CSS3!!!

[Dormilich]

Darky88, on 29 October 2012 - 03:10 PM, said:

Only IE doesn't support Drop Shadow?

no.

Darky88, on 29 October 2012 - 03:10 PM, said:

Drop Shadow is a concept in CSS3!!!

that’s a very true statement.

[Darky88]

Dormilich, on 29 October 2012 - 06:55 PM, said:

Darky88, on 29 October 2012 - 03:10 PM, said:

Only IE doesn't support Drop Shadow?

no.

Darky88, on 29 October 2012 - 03:10 PM, said:

Drop Shadow is a concept in CSS3!!!

that’s a very true statement.

I used IE, Firefox, Chrome and Opera in Windows and only IE does not support.

[Dormilich]

IE 8 is certainly too old for CSS3.

[AnalyticLunatic]

Most modern browsers besides IE support CSS3. The only version of IE having any CSS3 support at all is IE 9. This is in part due to CSS3 not yet being standardized. CSS3 is currently still in a developmental stage with some features being added and others looking to be removed, testing is not set to begin until AT LEAST 2014, hoping for a standardization by 2016.

This is not to say do not develop using CSS3 or any words of the sort. Just be sure to keep in mind, if (and as is usually the case) most of your clients or potential visitors are going to be IE users, there is a good chance your site will appear different/strange/horrible to them.

By all means, play with CSS3 and develop with it should it suit your needs, but keep IE in mind, and do some specific styling to keep IE browsers from completely destroying the appearance of your site.

[e_i_pi]

Dormilich, on 26 October 2012 - 08:10 PM, said:

Tenderfoot, on 26 October 2012 - 12:04 PM, said:

Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

not necessarily. CSS now as a lot of possibilities to generate curves and gradients. only if you need an image pattern, a graphic is a must. often you only need partial images (something < 1 KB).

though I’m not a professional there.

In modern browsers (and I'll include IE8+ in this list) the only css3 gradient/curve/shadow issue that I'm positive of is that IE8+ doesn't support curved corners and gradient backgrounds at the same time. I believe there may also be an issue with gradients in Opera, BUT, I've only noticed that on my website, so it's probably that I haven't declared the CSS properly.