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
notepad++ is free and sublime is not, but very well recommended and not too expensive.
but neither are wysiwyg.
I think getting what you want depends on how comfortable you are w/css & html. & how complicated your page is. How much such work you have done before.
Also you may want to think ahead is this page a template for all the others? how many pages? would you use a cms instead? like wp or drupal?
There are probably a good list of questions you can ask yourself to make you work easier.
A website should not be only made for one screen size unless it’s some sort of intranet site where all the resolutions will never change. Make your website a fluid or elastic width so that it will s tretch and shrink over different resolutions and font sizes. You will find it will be impossible to get everything pixel perfect on every browser, across every resolution, and across every font size. There are just too many variables to cover. You will get it extremely close but not pixel perfect across every varaible :). I would advise against any WYSIWYG editors as a beginner - most beginners who come across here who use it rely too heavily on their design view (aka Dreamweaver has this) and they design for that. Design view is not sometthing to code for. It’s based off a really old browser.
I’d personally recommend Notepad++. I’ve used it in the past and if I could ever get over my Notepad addiction, I’d move onto Notepad++ - I’ve used itin the past and it has good features.
The first (and last) thing you should understand is that the web is not a piece of paper. It has no width and no height; nor edges nor top or bottom. You have no control over the device the viewer may be looking at your design with and you have little control over the size of the text or the size of the layout that they may see. Once you understand that then the rest is easy
A paper design (PSD) should really only be a “hint” of what your vision should look like on the web and the skill comes in making sure that the design you choose reaches as many people as possible in the best way that it can. This means that the design needs to be a “living thing” that can adapt to all the devices around and if need be change its shape and content to match the best fit for the device in hand.
So you should steer away from fixed width and fixed height ideals and set yourself free. Build in fluidity into your pages so that they can adapt to the different widths that abound on all devices. Gone are the days where you could cater for 800px and 1024px and say that’s it.
Responsive (and responsible) web design (RWD) is the order of the day and there are many articles that explain and show how t go about it. It is not something you can learn in 2 minutes but it is something that you need to learn.
This consequently leads to more development time. As for every line of CSS property, I have to view it in internet explorer.
Only Internet Explorer?
When developing I load the site into at least 3 browsers to start with (Firefox, Chrome, IE ) and then check the design in each every few lines of code. It’s just a simple matter of clicking refresh in each and it immediately highlights any browser difference. At regular intervals I will also test on other browsers and indeed small devices. The web designers lot these days is a busy one and you can’t rely on one device to know how your page will look in others. With experience you generally know what works and what doesn’t but without going through the process of checking you will never find out.
… save me lots of hours which unfortunately I haven’t been given for this project
That’s a shame as you can’t really condense all the knowledge you need to complete this task in a couple of hours (not at least if you want to do it properly). You will probably end up chasing your tail and not getting very far. There has to be a learning process somewhere along the line and there is a lot to take in at first.
However, it does all depend on the scope of the project and if this is just a site for an intranet on one browser then you can cut corners but if this is a site for all to see then it should be a site for all to see:).
If you need help with ideas on how to implement your drawing on the web then we’d need to see the drawing first and then could point out techniques to use and pitfalls to avoid.
Well I am quite surprized with all your answers. I used to think that web development is easy peasy lemon squeezy and in this modern age you will have free tools which you could use to simply place the forms in desired positions and use % rather than pixel and it will all be hunky dory tickdy boo!!
But hearing what you all said it appears it is a real hard work. To test all the code in different devices and then browsers etc. I have as a matter of fact achieved what I wanted to achieve using % for width and height and used a 12 column grid css file and properties such as position, left, top, right and using again % rather than pixels to place the forms where I wanted on the screen. I attach here the sample for your reference.
It would be much appreciated if you could comment how far I am from designing a professional looking web page. As you advised, I used it as template and used Microsoft Expression Web 4 to create 400 pages using this template.
you may have to use notepad++ and paste the code in notepad++ to see it clearly.
Thanks everybody, many thanks for your feedback
I may be a difficult pill to swallow, and there is no nice way for me to say this, but you are about as far away as you could get from designing a professional looking web page. I mean that in the nicest possible way as we have all been where you are now and made the very same mistakes. Indeed its making these mistakes that leads us to build better sites eventually.
I won’t go into too much detail at this stage but the first thing you should know is that sites are not designed by absolutely placing everything on the screen. Absolute positioning is used in small doses but not for structural layout because it has no flow (for example you can’t have a footer under an absolute layout unless you us a ‘magic number’ which means that the layout can never change and dare a user resize the page the whole thing breaks).
Here is one of your magic numbers.
.footer {
position:absolute;
[B]top:143%;[/B]
}
and another:
<body class="logo" style="[B]height:1000%"[/B] >
and another:
.image {
border:4px solid black;
[B] margin:32%[/B] auto 0 auto
}
These are all ‘magic numbers’ you have used so that elements avoid other elements based on the elements apparent size.
You have placed your image at margin-top:32% which will be 32% of the width of the element as margin is always based on the width of the containing block and not the height. That means your image will rise upwards across your content as the page shortens.
Suffice to say in a well designed page you would have virtually none of that positioning and one element would logically follow the next without the need for specific positioning. Yes, for some odd horizontal elements you may use absolute positioning but only when the element that contains them controls the flow of the document. In most case horizontal alignment is achieved with floats, inline-block or display:table-cell.
There would be very little positioning involved and one element would follow the next logically and seamlessly. Add more content or take content away and the layout still works without changing the positioning.
The main thing to remember is to control the flow of the document so that content flows down the page as required. Don’t put little islands of content absolutely placed into position all over the page as that is fragile and unmaintainable in the real world unless the site is very basic and has little content.
Hope that gives you a few pointers in the right direction.
Hi Paul
Many thanks for your valuable feedback. I took your comments on board, removed all absolute positioning and redesigned so the elements
flow naturally from one to another. And then I finally applied some properties to position and adjust font size etc. I attach a complete directory with all images and a webpage called sample.html.
Please scrutinize and provide your feedback. Please comment if this solution adequately meets fundamental html/css design requirement and is acceptable.
Tables should only be used for tabular data so avoid using them where the data is not tabular or appropriate. For example your menu should be a list structure.
.menu {
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.menu li {
display:inline-block;
vertical-align:middle;
}
.menu li a {
display:block;
border:3px solid #fff;
}
.menu a:hover {
border:3px solid blue;
}
I( assume there is a reason that you are using images for that menu instead of normal browser text? If not use real text and style it the same as your image)
Be careful with your hover styles as you do not want to cause a document reflow when you hover something as that is annoying and enough to give someone an epileptic fit with the constant jiggling around. If you want to add a border on hover then first add a border to the element in the background colour so that it doesn’t show and then on hover just change its colour. This will give a smooth hover effect without disrupting the rest of the page.
Also be careful with global styles as it is unlikely that you want all your anchors to have a 3px border on hover. Be more specific. It should also be noted that anchors are inline elements and adding borders to inline elements is not a good idea as it just causes overlaps.
At the moment you have a fixed width page (980px approx) so you may need to think about RWD (responsive web design). However that’s a whole new approach and probably a step too far at the moment
Your page is a great improvement on your last version and is heading in the right direction now. Just be careful with the finer details and if you do want your page to adapt to smaller devices then you will need to do a little more research on RWD (there are many articles around).
That’s a huge image, and the repeat means that the logo itself starts to appear again at wider screen widths. (My monitor is only 1240px wide; on a larger monitor, more will be visible.) The same issue would occur vertically on a lengthy page.
Use an image just for the logo; there’s no need to include the white page background in the image. You should also rename the image, without using spaces, as spaces in filenames can sometimes cause problems. So change it to Muller-Ooze-Logo2.jpg, for example.
Hi Paul
Many thanks again for your feedback. I corrected the code as per your advice. I styled the menu buttons but by mistake to be honest. It works but I could not get my head around why I had to add too much padding and then styling buttons, buttons a and button a:hover to make it work!!!
I have also downloaded reset.css and added in the zipped directory. This and 960_12.css controls flow in my web page. As the css file is based on pixels, I changed the padding and margins all to pixels. To be honest for the current architecture and resolution, Its not looking bad to me but please let me know if further bodges are necessary.
I have now run out of development time and for what I want to do for the next 9 months, I may just carry on following the practices I learnt hear on the forums. Hopefully over time, I will get confidence to move off 960 grid and start using Responsive Web Design.
Hi
Thanks for your advice
I corrected the background image as per your advice. I do however have to repeat it vertically so used only repeat in y direction.
