1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Do's and Don'ts for Effective Web Design

Discussion in 'HTML & Website Design' started by Lurker28, Apr 6, 2008.

Thread Status:
Not open for further replies.
  1. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #41
    Nice. I like that one a lot.

    Here's an example of knowing some potential problems (if this one were to ever get coded). See the semi-transparent black boxes behind the text and images? There are different ways to do it, each with issues.

    You can have actual divs there with an opacity set to something like 0.8 or 0.9 -- older browsers don't understand opacity so then you're hacking for old Mozilla or old KHTML (old Konqueror and Safaris) if you have those customers. Of course, our special friend IE requires either a shorthand or long version of their proprietary filter. Sigh.

    Or, you can use semi-transparent PNGs. First, though, they're huge. Second, IE6 doesn't accept alpha transparency and needs a Javascript crutch. Ouch.

    Or, you can use semi-transparent PNGs for the normal browsers, and feed IE6 a "fake" transparency-- using a gif with pixel-size checkerboard black and transparent, which looks different but from a distance can have a similar effect.

    These are things your designer has to deal with, for just one element on the page.

    Doesn't mean it's not doable or anything, but I say again it can only help you in designing if you have an idea of coding.

    Again, nice design. I'd hit it.
     
    Stomme poes, Apr 10, 2008 IP
  2. Lurker28

    Lurker28 Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #42
    Yea that was something we discussed before I put the pen to the paper. I talked to my developer and I told him my idea for a mock; "recording studio" design. I went though a sketch with him, showing him the overall box placement as well as some "special" attention areas including the transparency boxes.

    We came the conclusion that our market audience for this website would be young, up and coming bands. According to our google analytics program that is running on another website geared towards a very similar audience, we can deducted roughly the same audience should "theoretically" be lead to this site. With the correct advertising company to hit that demographic there should be very little issues, however if their were issues because of compatibility with older browsers we thinking of just an "if/then" code. It would be rendering those boxes as solid black w/o transparencies only for selected browsers.

    Again, this is all made up, but we try to tackle ever "mock" like it was a client of our own. If we finish a client early, we usually get a few days off before starting our next client and in that time we hypothesis about future projects.
     
    Lurker28, Apr 10, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #43
    Most of the issues Stomme Poes put forth I would be entirely happy with letting 'gracefully degrade' in older browsers to solid backgrounds. 'Modern' browsers look a little better, good enough - so long as all the elements are usable, and layout in the same spots appearance degredation on things like backgrounds is acceptable - for the very reasons you listed like target audience. The key is to make sure the page WORKS and is still attractive for all users, even if older browsers don't get identical appearance.

    My concern for that layout is... well... what I consider the obvious fist in the face flaw. There's one big problem staring us right in the face: That absurly oversized monster background that is going to be 250k or MORE - FOR A BACKGROUND IMAGE. Especially since it can't be tiled and appears to be a gradient in both dimensions. That right there makes the design a total /FAIL/ before even one line of code is written. If your developer isn't telling you that, and doesn't change that, you need a better developer. As a designer, you need to be aware of things like that and plan accordingly - you didn't.

    Stylistically, the header text running into that text bar looks like a rendering error, as does the placement of the menu items (ESPECIALLY 'studio' sticking off the side like that) - I saw a site like that I'd be e-mailing them to say their layout is broken.
     
    deathshadow, Apr 10, 2008 IP
  4. deshoda

    deshoda Active Member

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #44
    Never let music autoplay. Thats plain annoying. Imagine at work and it pops up.
     
    deshoda, Apr 10, 2008 IP
  5. Lurker28

    Lurker28 Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #45
    The background is going to be tiled. It is a 200x300 (11K) and you should get a better optimizer if you are telling me the entire 1000x1000 jpg image is going to be 250K for a simple background tile....try 70K(still not usable). We are going to use an over image like this movable light source in order to create the effect of an off the page light source. There are many ways to solve this issue, but again it was a design that will never see the light of day, it was purely use as a tool as well as some good old fun. I can not stand all the cookie cutter website I have made in the past (hundreds of them over the last four years, over half simple grid designs and a few simple liquid sites), trying to break out of the box and find new was to taking the age of issues are one of my teams goals. I know about limitations in development, but that does mean we can not try to find ways around them. Oh by the way, that surf website is sitting at 125K after all the scripts have been loaded...if I can shave off another 20-30K I will be happy.

    This comment has nothing to do with technicality of the site, it is opinion at best. You tell me it would be viewed as a rendering error yet my finding say differently. Users find it more as a website experience not as some technical glitch. Typography and placement of objects does have its scientific/research backing, however dropping down the studio below the "vision" is only aesthetic preference, not a design flaw.

    By no means would I have that video auto play, I hate sound in general on websites. It is far too over the top and most visitors will not enjoy their experience. Many of my desigsn maybe out of the ordinary, however background music should be left to people with myspace pages.
     

    Attached Files:

    Lurker28, Apr 10, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #46
    Nice artifacts (painful on a well adjusted CRT - I can see the progressive block edges) - what is that for compression, 20%? 30%? GREAT... Thankfully it's mottled enough a texture you can get away with it for the piss poor LCD's that commonplace today. Tell me, how are you planning to handle browser windows taller than 1k px? Just have the image chop off, or make the light source bigger?

    That link to the 'movable light source' seems to link to nothing of the sort, though if you are holding up a 640k website that uses 3 stylesheets, 3 documents, 34 images and an unbelievable 9 scripts (which accounts for a FIFTH of the filesizes), with multiple H1's, nonsensical heading tag use, pointless classes inside perfectly good wrappers, and that doesn't degrade images off as a shining example - /FAIL/ hard.

    Gotta love 30k of markup, 15k of CSS and 112k of javascript for 3.5k of content.
     
    deathshadow, Apr 10, 2008 IP
  7. Lurker28

    Lurker28 Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #47
    LoL, ironically it seems as if the owner has change the .png of the header lamp. It used to have a light source on it that you were able to around around. It was just a simple gradient transparency on the lamp.png. Now it still has a transparency, but no gradient...interesting, indeed. You are not the only one that uses a "well adjusted CRT" monitor. Sadly, I am going to be migrating to a dual monitor format soon (a little behind the times, but it was really annoying me when I had to constantly juggle from Maya 8 to CS3 on the same screen). My wife has the LCDs, I will be following suite once I find something that matches the perfect black levels and refresh rate of my monitor.....I am going to be waiting awhile, I may have to compromise.

    I do not know why you are dissecting the source code, when I did not really care about all the images, wrappers, mootool plugins, overuse of Sifr, etc. he/she used. It means very little to me. 80% of the internet has poorly written code, incorrect tag use, and bloated sites. I do not look to them for coding inspiration I can assure you of that.
     
    Lurker28, Apr 10, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #48
    The "visions" menu didn't look like a bad render to me, because it looked intentionally funky. So long as it can grow with text enlargement (and since they're all up against that photo in the middle I'd say that's no problem), it's good. I was wondering how the background was going to get done-- that was the biggest problem with Surf, and what I thought of was fixed-width site, centered, with just side-strips on some container and black on the body... the rest of it looked pretty doable except the limitations of image replacement for the surfboard menu.

    I can appreciate funky designed sites, because it's true most of the web is boxes (and badly built underneath, no excuse for that) and it's nice to see things really look free. I've had an idea for the kids-site I have to make (who knows when that'll get done) for a while where there's fixed background AND foreground (or floated foreground likely) with a bottom scrollbar moving a "middle" section (site would be built sideways instead of top-to-bottom-- I've seen designs which do this and they're not easy to scale!) but it'll take lots of thinking and lots of images and lots of CSS-fu. Which I don't quite have yet, but I'll get there.
    The nice thing about something like a kids' site, or a band site, or a fashion site, is that the rules are more relaxed. Yes, you still need to account for monitors and bad eyes and accessibility, but not as much as your audience isn't as broad. You can have stuff hanging around and use more Flash and Javascript.
     
    Stomme poes, Apr 10, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #49
    Why sadly? I've been running multiple displays... since Targa made a board for windows 3.1 that did it with a pair of 8514 monitors.... No, actually I did it before even that, running a CGA and a hercules in the same machine. I can't get 'real work' done without a second display anymore. (I'm next to useless when I'm on my laptop)

    Quite a while. LCD's blow when it comes to black-level, though at least the contrast ratios between what they have the gall to call black and full on white is getting better. The ones that use LED's for backlight instead of Cold Cathodes REALLY make a difference too with the lighting being more even.

    I'm of the opinion if you don't complain about that 80%, it will never change. For me it's hard to shrug my shoulders and walk away from piss poor coding habits and practices.

    Especially when I visit a site and just because I'm maxing out my connection limit (but not even touching my bandwidth) with a torrent the page takes over 2 minutes to download JUST because it's so many separate files.
     
    deathshadow, Apr 11, 2008 IP
Thread Status:
Not open for further replies.