I hate drop shadows

Content
1

Hey everyone,

Does anyone else have the need to go ‘Over the top’ when using effects such as Drop Shadows?

Our designer has started creating layouts that have stupidly over the top drop shadows, and it’s very hard to explain the effects it’s having on not only me, as I have to slice and code them, but the site, due to the size of the images created.

Half the problem seems to be, he loves layering things over the top of each other. As a result, I end up having to export them as 32bit PNG’s, which end up taking about 4 days to download.

Then they have the cheek to complain that it takes a while to load.

Rant over lol

2

lol rant away Gavin! I blame Apple myself ducks and runs!

3

I dunno, it might just be my unartistic eye, but I look at some of the sites our designer has designed, and whilst they almost wet them selves in excitement, I just remain unenthusiastic about the design.

I’m not sure Apple is to blame mate, as apple keep it VERY minimal.

I just feel that if I were to put any of the sites on my portfolio, ones that I have created the css, js, html etc for. People are going to look at the designs and think I designed them too.

At what point do you tell a well accomplished, and sometimes he does produce amazing work, that sometimes, I’m not digging his work lol

What makes things so much harder, is he makes a point of telling me how good my work is every day.

4

OOh just to throw another one in there, Modal dialogs… boooo hiss!

5

the reason I say Apple is not necessarily their website styles but the OS X Window styles.
Huge all round shadows to a width of approx 60px on every window by default, looks cool at first…

6

Have him review the the site useit.com. When he cries about how ugly yet informative it is, tell him you’ll meet him half way if he scales back the drop shadows…

7

If he’s using the default Drop shadow settings in PS then I understand your concerns! Drop shadow can be nice and useful from time to time but it needs to be set right!
Using separate layers for shadows with blurry (gaussian) shapes would be better sometimes too.
You can ask him to submit one of his works in the reviews section here too.

8

Yeah I’ve run across that problem with drop shadows, too. There are a couple graphic designers here where I work (they’re not web designers, though) and sometimes they overdo the shadows.

Not to say that you can’t use them, just that most designers don’t use them properly and the result is a site that looks like it’s from the early 2000’s. Ugh. On the bright side when used properly they do add a nice touch- but you have to know what you’re doing. There’s a fair number of “web designers” that don’t, and they become corrupted by drop shadow hell.

I ran across this blog a while ago, there’s a short post on how to use drop shadows properly and without going bat-poop crazy with that fugly default photoshop drop shadow. The OP may wanna direct those designers to it, it might help quell the madness.

9

Luckily CSS3 supports shadows :wink:

10

Drop shadows are normally used to create visual depth or distance between objects. I agree that they’re one of the most abused effects around.

What irks me even more, however, is the extreme use of text-shadow these days. It’s so heavily used on some sites - often making text unreadable - that I’m almost tempted to use Internet Explorer. :wink:

11

I woulndt really blame the designers. Clients ask for that look. Before I really got into web design, back wen tables were used for layouts but CSS was starting to take off, many clients actually chose not to use codes who preference to use CSS, citing that they design would be “All boxy”. Anyway, if you are a designer and begin talking to a client by saying " Yeah shadows and overlapping images make for high visual impact, but they are difficult for coders on the web" you probably are a designer who just lost a client. Clients HATE hearing: “that’s going to be difficult”

Normally when I have to deal with overlapping imagery I use AP and slices anyway…

12

I loathe text shadowing!! Especially when the shadow are very dark! :sick: I’ve seen sites with long shadowed paragraphs!! And that really difficult and tiring to read!
CSS3 increasing support can make this worse!! :confused:

13

Personally I implement drop shadows with CSS these days and don’t use images. IE users can suffer a lesser experience for using a lesser browser. You don’t expect 2010 graphics out of your Playstation 2? Don’t expect 2010 effects out of your 2002 browser either.

Drop shadows though are supposed to be a bonus. Any design where they are necessary to distinguish layers and areas is a poor one in my opinion. And overusing them is worse than not using them at all.

14

My $.02USD:

Drop shadows, like unusual fonts and other special effects, shouldn’t be noticeable by someone who isn’t looking for them. If a casual observer looks at your layout and says “Hey, cool shadows, dude” the designer probably needs to back them off a bit.

15

When it comes to what many “designers” (aka artists who know nothing of actually building a website) vomit up and call a template (which I prefer to call a goofy picture that has nothing to do with a practical website or a REAL template) you really do tend to hit up against the “is this REALLY neccessary or even a good idea” question a lot.

It’s why so many fancy looking websites are ultimately useless to the end user. Single page hitting over a megabyte in size just to deliver 5k of plaintext is increasingly common as the ‘artists’ take over the industry with their “draw a goofy picture first” mentality.

A bitter pill for them to swallow is the simple fact people visit websites for the content, NOT the graphics you hang around it. It’s why in building a website IMHO the LAST person in the process should be the artist – NOT the first. This draw a pretty picture, slice it up in fireworks and let Adobe vomit up code approach that has taken over design firms is a hefty part of what’s WRONG with todays Internet.

My advice, kick the designer square in the nuts, code the CONTENT semantically, bend it to your will creating the best accessible layout in CSS, THEN hand it off to them and say “make PRACTICAL graphics that can be dynamically tiled WITHOUT resorting to alpha transparency we can hang on this website”.

Any other approach is back-assward; pretty much putting the cart before the horse.

16

Oh, and if the links in your signature are typical of what you are forced into working on then you truly have my sympathy and pity… since I can smell “accessibility, what’s that? Large fonts? 120dpi? Never heard of it. Color contrasts? What does that mean? You mean we have to make the page not suck bandwidth like a two dollar whore in Vegas?” a mile away.

As evidenced by the broken layouts, minute long pageloads thanks to megabyte PLUS page sizes, “gee ain’t it neat” scripting for nothing, and total lack of graceful degradation.

Probably a healthy contributor to why on that TML communications site the “accessibility” page is still under contstruction :smiley:

17

I disagree. Design is a a significant part of user experience. Design doesn’t just encompass graphics but more importantly the organization, placement, visual hierarchy and brand consistency. For that reason It is on the first things that should be done. Perhaps in an ideal world the visual aspect can be completely separated from the functional inner working, but not in the practical one. Having a clear understanding of the intended front-end user experience always makes my job more efficient, cutting out guess work and assumptions when making programmatic, functional decisions.

If your having trouble with a few simple drop shadow images, its probably time to upgrade some hardware. I’ve never worked with a designer whom I’ve had to tell a certain deign couldn’t be achieved because the images couldn’t be optimized. That’s just lame imo. Placement of elements is one things, doing things that are not achievable by CSS, in any “good” way. However, images… give me a break. Its time to upgrade some hardware if that’s an issue. Perhaps move them all to a single sprite, something. Then again, perhaps the design is really just horrible, in that case – find a new designer! Its hard to say one way or another without actually seeing the design though.

18

… and fat bloated train wreck design can tank even the most basic of sites in terms of user experience – which is what the majority of “designers” seem to do. Sometimes you have to have the authority to tell the designer “NO!”.

A good example of someplace someone should have been told NO is on Sitepoint’s products page – fixed height background images, dynamic fonts over fixed height elements, no planning for what happens when it word wraps – take a look at it on a LF/120 dpi machine to see how badly it falls apart.

Much less the artsy fartsy layout elements and “gee aint it neat!” bloated scripting that result in wasting 526k total on delivering 5k of plaintext and ten content images.

In other words layout (CSS’ job) and things that should be dictated by the CONTENT… Too many websites it’s painfully obvious the content is shoe-horned into some pretty picture an artist drew making the site painfully slow to load, painfully bad to navigate, painfully broken from an accessibility standpoint, etc, etc…

Though you are quite correct in pointing out there’s more to design than the graphics; there’s usability, accessibility, and total bandwidth consumption which generally is when you have to start telling the PSD jockey “OH <snip /> NO!” and shine up the point of your boot using their rectum.

I find ‘wireframes’ and ‘mockups’ (and that’s what these alleged templates really are, mockups) invariable cause MORE headaches for me since they often do NOT work how I would make logic flow decisions in outputting my content… But then I don’t think just ONE appearance when coding a site; I code for screen, screen with images disabled, handheld, CSS not present, print – they all get different appearances crafted for the best user experience of each – a single crappy mockup for 96 dpi often gets in the way of doing that.

What the devil does the hardware have to do with it?!? Unless you’re talking bandwidth related hardware, in which case you’re going to tell the user what they can and cannot connect with? Tell that to the guy in Coose County NH where 28.8 is a good day.

I have, but I generally refuse to code support for alpha .png, DEMAND that all elements be able to be dynamically resized making elements like this one for example:

Be a “Try again Charlie”. Completely non-viable non-deployable element to have text atop as SitePoint does on their products page.

That however I do wholeheartedly agree with – I based a lot of what I said just looking up the ‘clients’ off the sites in OP’s signature… where 500k of javascript for nothing and megabyte plus site sizes appear to be the norm, even on the simplest of pages where there’s less than 1k of content… basically sites I would NEVER allow a client to deploy on hosting costs and likely bounce-rate ALONE.

ALL of them having broken layouts here too.

Without seeing the layout in question we are all just making wild guesses – I assumed since he was taking issue with it that it’s your typical “guy who knows nothing but photoshop” drawing goofy pictures that are completely impractical trash so far as web design is concerned – that MAY have been a overreaction; it’s just the reaction I get every time I deal with the PSD first crowd.

19

I love box-shadow and text-shadow.

I understand these can be abused but the OP is talking about photoshop comps, not css3.

oddz, I agree with your design-first approach. At least with paper and pencil so that deathshadow’s most important CONTENT is prominent in the design.

gRoberts, maybe you don’t need to be cutting up the photoshop comp and can start using css3 properties to make your job easier and more fun.

Then again, if you’re unhappy with all of the designs you are asked to code consider moving.

20

Drop shadows are flavor-of-the-month, just like rounded-corners where last year. They will be played out, meaning everyone will use them, until something “cool” comes along and takes it’s place.