• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

be able to design the layout exactly as drawn on a paper

Dear web developers

I am new to design the web pages. I had liked a lot doing HTML and CSS however I have struggled to be able to vie w on the internet explorer my web pages exactly how I intended them to be shown on the 1024/768 blank paper.

After vigorous search, I found that many developers use 960 grid system to develop their web pages.

Could I request your valuable advice on the following matter please

What is the best approach to design a web page so one could get exact replication of a layout drawn with pen on a paper?

Is there a free version of html editor which could be used to achieve above? I used Microsoft studio for web and Microsoft expression web and did not have a pleasent experience due to the very reason that I cant rely on 'Design' view of these tools to design my layout. The Design view always is not similar to view in internet explorer!!! This consequently leads to more development time. As for every line of CSS property, I have to view it in internet explorer.

Your comments and advice will be worthwhile and save me lots of hours which unfortunately I haven't been given for this project
Many thanks :)


Active Member
Hi there.

As you mention, the 960 grid system has been a good starting point over the years. It's not a bit out of date, as developing website has to take into account all sorts of devices (desktop, tablet, mobile just to name a few). Therefore I'd recommend something like Foundation by Zurb. Ultimately all these things require coding knowledge to implement though, so I'm not sure if you're quite ready for that? Hard to tell without knowing you, but if you're new to web design/development then there's a lot to learn.

As I say above, designing for websites has changed a lot recently so trying to replicate a simple pen and paper drawing isn't the way to go anymore, you need to think about how it looks on many devices.

In terms of HTML editors, there's lots out there, I personally use Netbeans. Your issue of having to switch and view in Internet Explorer is just the way it is as far as I understand, you build your site in the code and then check back with the different browsers you're targeting (IE, Firefox, Chrome, Safari etc.). I wouldn't recommend any product that previews your website, as you want to know exactly how it will look for your users, not roughly whether it's in the right direction.

Ultimately if you're new to web design/development there's no short fix, I'd look at finding someone who knows what they're doing or considerably extend your deadlines so you can learn what you need to, but still then with this being your first experience it's likely the output won't be what you'd hope.

Hope that helps.

Sean Lee-Amies

I would have to second Foundation, I've been using it since v4 and it really does make everything so much easier to do - and it's mobile first which is great. With all things that come pre-built, there are always going to be certain limitations - you can't just do 'anything' but it would be barely more difficult than getting some crazy design to work entirely from scratch. It has a ton of functionality that you can make use of, and their grid system is so easy to work with.

Fred has largely covered this and there's not much more I can add, but I agree that your best bet would be to find someone who can give you a bit of support - if you're just starting out it can be the difference between giving up or succeeding. Determination and patience are going to be your best friends :)