Stupid question....

Krey20

Senior Member
I realise by asking this I'm going to get judged pretty quickly as a complete web design novice... oh well!

In another thread I've been discussing the best way to re-develop my web site. I've decided to take a different approach than I usually do by doing the layout in photoshop (or illustrator because I love it) then passing it along to someone else to do the coding.

What are the main problems I need to be considering within my design so I don't p*** off the developer later.

My first question is size, in my other sites I've had to play down to the lowest common denominator and make the overall screen size quite small, this means that it displays smaller on modern screens.

Any tips would be helpful, and if you feel like sharing your initial processes then great, if not no worries!

Thanks for any insights you can give me, and I apologise for being a dense newbie!:D
 
If you need a code-r then i can help :)


Personally when it comes to screen real estate, aim for 950px - 960px wide as this is the common de-facto standard from my experience.
 
I think he's more after the advice side of things at the moment Geoff, ie the best way to setup the design files, best pixel size (width) to work to, and any other considerations you web dev guys like designers to think of at an early stage...

I have a few things I was going to mention, but would be interested to hear from the web developers first, as I might have been making assumptions! :)
 
hey there Krey20,

The good news is that you have asked the question.

In my experiance (im a coder/developer) it can be about comprimise.

What i mean is: its not always possible, no matter how good you are at coding, to get a design exact when it comes to building the site. especially if the goal is accesibility and seo. this doesnt mean the design has to be basic at all.

Working with the same few designers over and over we have a relationship where they give me a design and i tell the straight up what I think may cause issues (again im not saying they are impossible, possibly out of budget) and they are adapted to fit.

We tend to work for 1024x768 screen resolutions as it gives a nicer site, and i think accounts for the majority of users these days. We occasionally use 800 x600 if we feel its more appropriate.

Other than that I dont think there is much to bear in mind really. If you have a good coder they will be honest and tell you what needs changing.

I hope this helps and isnt just me rambling on...

mike
 
I'm curious to see what other developers/designers have to say as well. I'm recently begun researching that area myself and am honestly clueless in many of its aspects.
 
I'm a design and would say that I am spending more and more time overlapping the designer/developer boundaries... Generally I tend to design everything in photoshop as this makes things much easier when you go to chop/slice images up before building the html/css. The advantages of using photoshop is that you can design to scale (pixels) and obviously with everything being in layers (and I presume most developers have photoshop) layers can be turned on and off for slicing, particuarily handy for rollover effects etc.

I tend to try and design without thinking too hard initially how I will make it work as I find that way it ends up more visually appealing and means I challenge myself on the html/css side rather than doing things I know I can achieve already. Obviously the more you design then build for web the more natural the whole thing becomes anyway.

One good thing to bear in mind is your use of fonts. The bulk of the text needs to be in web safe fonts, arial, times, trebuchet ms, geneva, impact both for the benefit of search engines and accessability. Titles and fancy bits can use either images (using the alt field to describe the txt) or something like sifr (flash image replacement).

As Mike says the compromise is really down to how much you want to spend, most things can be done but its a matter of time.

Oh and one other thing that can be a particular arse is transparencies in png files which you might use say a logo with a transparent bg over a gradient, they tend to show up with grey boxes in ie 6 (which unfortunately a lot of large firms still use), again there are solutions for this but it's a pain.

You can use transparencies in your divs (blocks of background) however using css so like a white box at 50% opacity over a gradient or image.

Things are changing all the time like the support of new browsers to reference a font off your web server which would mean there's no longer a need to stick to "web safe fonts" but with most of these things we're stuck until the world upgrades.

After all that blurb the best advice really is not to focus on limitations and just get a good developer that will advise honestly on the best practice whilst you design
 
Hay I agree I don't think any less of you, you asked a question, not shot some one. :)

To me I pretty much always use Verdana as the main font, bring on the abuse from the typography posy.

I then set the body tag to text-align:center to align the design in IE, and then give the body a 80% font size so as to display the content at 80% of the browsers default setting.

I then give the body a line-height: of 1.5 em so as to increase the space in-between the lines.That way the font can be increased relative, for example ~
h1{2em}

Would technically be the same as writing font-size:160%; if that makes sense.

But it is relative to each browser, so IMO makes the text look correct in each browser, rather than setting it to px.

It also allows the user to increase the font in their browser due to bad eye sight, helps with accessibility.

I then create a div and give it a id of wrap.
That then gets a margin rule of margin:0 auto;width:1000px; to align it to the centre of the browser.

i then give it a text-align:left rule to over ride the rule on the body but also to align it in IE.

then I create the design in the wrap div.

File wise I split up my logic, Keep all my JS files in a script directory, all my CSS files in a style directory, all my img files in a img directory, all product images in a productimage directory.

Then any includes I use go in a inc directory and I comment in PHP at the top of every file in that directory, OK I should do, lol, what the script does for future reference.

I then create a page directory and in their place my footer include, header include and nav, if applicable include and then I'm set to start.

That's how I do it, all nice and separated and you know where everything is if I need to find a file I wrote 6 months ago.

I think my main site is up to around 400 files and I can find everything pretty quickly, so.

I also make sure I give all files a really clear name, to make it easy to find and know what it does with out opening.

But that's how I do it, in my control freak personality. lol.Jaz
 
Thanks for all of the replies, it's all really interesting to me, and it's helping me plan (in my head) how I will tackle web design from a different approach.
Designing anything using a new process is always exciting, and I've always found that it a new approach brings about new results. The results might not be better, but it's worth the time and learning curve to produce something new.
 
Back
Top