Web Development Question

hoarder

Hi all

I am looking to validate a claim that was made to me this morning, which I appreciate is a little vague, but nevertheless I would appreciate any help.

A design was done by a graphic designer for a site, and the programmer has said that "it is always difficult to match the code to the design 100%". Specifically, this refers to the fonts used, the exact spacing between sections on the site and the exact matching of designs containing words

I am a little surprised, but not being a "techy" I really don't have the facts to challenge them. Basically we have a beautiful, clear, functional design, which will apparently be impossible to replicate on the live site, and will only be used as a guide, rendering it useless

Thanks

Kenny Logins

The problem is a browser can over-ride your font settings, and display something different, and you need to allow for this.

professore

The designer is correct. It's not just fonts - is even the case that the same colours will look different on different computers. Also it might look lovely on your widescreen laptop and terrible on an older PC. And don't get me started on when you open a site that looks great in Firefox and terrible on Internet Explorer and crashes Google Chrome. Fair play to him/her for pointing this out to you at the start.

hoarder

If only it was at the start of the project I was told, it was on the day the site was to go live!

Thanks for the replies.

TheWaterboy

I would have to disagree...

If the CSS and styles are done correctly then there shouldn't be any great difference between the mock up pages and the actual dynamic website regardless of the browser type. Granted screen resolution can affect scrolling etc.

Saying that I don't know if the graphic designer just gave you PSD images and expects your programmer to cut them up into CSS and XHtml

stevenmu

TheWaterboy wrote: »

Saying that I don't know if the graphic designer just gave you PSD images and expects your programmer to cut them up into CSS and XHtml

+1, sometimes a designer will just provide PSD images, or worse just flat images (jpg, gif etc). This can be very hard to duplicate exactly.

There are other things that can be hard to duplicate too. Some designers will use fonts that simply won't work in a browser. They may also only allow for static content, they may have sized boxes and areas to suit a particular amount of text, but in the live site there may be more or less text, different sized images etc. And a number of other reasons.

Ideally a designer should provide an HTML/CSS template with relevant image files, then the developer just has to integrate it with the content management engine.

hoarder

Saying that I don't know if the graphic designer just gave you PSD images and expects your programmer to cut them up into CSS and XHtml

Yes, he just sent PSD images

I must say it is really frustrating, someone like me cannot be expected to know the ins and outs, and a designer should be flagging if something will look dramatically different on a live site. I would never have ran with the way it looks now, and I am left wondering if maybe it is too much effort to get it right and they are hoping I will sign it off the way it is! Somehow I just dont believe a simple, clean design cannot be translated to look 99% the same on the site

hoarder

Is there anything i can get the designer to do to make progress do you think?

seamus

Is it the designer or the developer that you're dealing with now?

As others have said, it's hard to match up the design mock-up with the live site exactly, unless you go with flash (bleuch).

However, they shouldn't be a million miles away from eachother in reality. If the developer can't get them within 99% of eachother, then he may not have enough experience to do so. It takes more work, naturally, to get it to look similar and sometimes it's painstaking tweaking with CSS to move it 3 pixels to the left in one browser and have it stay put in another.

Spacing shouldn't be an issue. You can get it to within 99% of what's in the design. Images/designs containing words shouldn't be a problem unless you want to be able to change those words.

You have to remember that the end-user won't have seen the original design, so isn't aware that the content is 5 pixels lower in the site than it was in the design, and it won't make a difference to them. Font problems are common and as pointed out above, some designers have a tendency to use non-standard fonts for sample content, which simply can't be reasonably reproduced in the live site.

stevenmu

Without seeing exactly what's wrong it's hard to say for sure if it's the design that's bad or the developer is either just being lazy or isn't good enough to implement.

But with that said, if you can get the designer to provide a HTML/CSS template that would help the developer a lot.

hoarder

This has all been really helpful, thanks guys. The designer is not a HTML / CSS designer and the nub of the problem is that we have programmer cutting PSD designs, which are not exactly to scale as best he can to match. I have since had a discussion on the areas of difference and there is an understanding of my issue with the difference in the "look and feel" and I am told that the issues can be ironed out, fingers crossed!

Giblet

It's true, having a highly dynamic, content managed website can be tricky to maintain while still following the designs, but as luck has it, it's trivial in most cases to describe where in the design concessions have to be made. If your programmer is saying "This isn't possible", he should be able to answer why.

In my experience, you can get a > 95% cross browser implementation of almost anything without using hacks or horrible CSS design decisions, as long as the guy doing the programming is up to snuff. The designer can sometimes make decisions that don't work in a dynamic context, but the programmer should easily be able to explain why.

EIREHotspur

hoarder wrote: »

This has all been really helpful, thanks guys. The designer is not a HTML / CSS designer and the nub of the problem is that we have programmer cutting PSD designs, which are not exactly to scale as best he can to match. I have since had a discussion on the areas of difference and there is an understanding of my issue with the difference in the "look and feel" and I am told that the issues can be ironed out, fingers crossed!

I repeat this many times regarding web design but I will repeat it here again.

Too many Developers/Designers are stuck in the 1990s web design era.
If the website isn't built with a view to CSS then I think thats a major flaw in design.

tricky D

This page http://www.hfccwebclub.com/webtips/webtips1-15-08.php has a bit on the nature of web design and dev. The Venn diagram has the space in the middle where the product is made with both skillsets feeding into that area. Each role needs to appreciate and compensate for the nuances involved and avoid working in isolation. Failure to factor the interactions leads to substandard product. Classic example might be a designer striving for pixel perfection (a common hangover from print design) resulting in the design breaking when a field like a document name is too long, making a newline break the pixel perfect layout. The old style webmaster could manage matters like these, but they (we) seem to be thin on the ground these days.

I would also argue for a third circle in that Venn diagram involving internet marketing to make it even more complicated. Bricks and mortar equivalent might be: engineer, architect and shop display specialist.

study68

completely agree with the comments. designer will need to send all details to developer.. complete layered PSD file along with fonts, dimensions of the layout, what ever needed for that perticular layout etc.. It is always possible that the PSD is done in different size /resolution and live website is required in different size (i mean width and hight of each object etc). If its problem with the font, then font can be installed.. but as stevenmu pointed out "Without seeing exactly what's wrong it's hard to say for sure if it's the design that's bad or the developer is either just being lazy or isn't good enough to implement'

hoarder

This has been an excellent education, thanks guys. The site is in a semi live state for testing at the moment, but I wont post the link as obviously I dont want to "out" the people working on it. I am also striving to maintain relations until the work is complete, I can ill afford a disagreement or distraction at this late stage, especially as the overrun is currently at eight weeks

conor.hogan.2

Sorry op, but this is a walking talking ad for paying for the right people to do a job right the first time. Now obviously you didn't know they were bad, im just saying.

fasty

Without seeing the work compared to the graphic designer's mockups, there's no way you can say that.

There's a disconnect between the OP's expectations and the reality of web development that should have been managed better for sure, but that's all we know from this thread.

Liam Byrne

Did you choose a designer who was good at creating designs that transfer well to screen, and works OK without being far too heavy/slow with lots of images ?

Did they know that the fonts available for a website are limited ?

Did the designer make the horrible assumption that the site would be done in Flash, thereby killing your SEO and updateability, but keeping their "design" scaleable and looking "cool" even though that is a completely counter-intuitive topsy-turvy approach ?

Did they know that box sizes, etc, need to be fluid to accommodate dynamic content ?

Did they allow for different screen sizes and what the site should look like on different screens ?

How much of the design process involved you or the designer saying "put a box this size here", not realising what content should go into that box ?

Basically, I've seen designs from both designers and college students that would be great as a print brochure but clearly indicate that the designer has no knowledge or experience in designing a proper website.

Lesson learned, and I guess the above is no help now, but the developer is telling you the truth......it's just a pity for your sake that the above weren't flagged sooner.