CSS elements have made a huge difference in web designing. They offer more options to designers and greater flexibility. A few tips that can help you build an effective CSS layout are mentioned below.
1. Do your Planning. Start the old fashioned way, work out your project on paper plotting out all the screens and elements for each screen. If you do happen to come across a problem, that too can be solved on paper first. With all the planning complete only the implementation is left for you to do. Another option could be using Adobe Edge Reflow, for creating a site prototype and then extract the CSS for use in your layout.
2. Think from the user end. There are different websites catering to needs of different people, kids, youngsters, professionals and people who just browse for fun. They could be using different devices, like mobile, tablets or laptops. When designing consider all these factors what devices will be used? Who will use your website considerably more? Do you need animation and designs to highlight your contents? Does your site serve the purpose it was made for? Keeping these questions in mind determine whether you will start with a mobile first design and then scale up or build a responsive design for all platform.
3. Reduce your work load. Use templates, scripts and software programs to reduce your workload. You might need to use different software to create each section but a right combination and correct usage will give you the effects you are looking for. Third party tools could be used to fill in the gaps.
4. Organize the site into easy navigation when laying out the site. Add comments that are easy to read and understand especially if the template is for someone else. This will make things easier for end user.
5. Make wise use of all the effects CSS3 has to offer, box shadow, gradients and text shadows etc. you will need to add relevant vendor-prefixed properties to make sure it works well with various browsers.
6. If and when using images be careful. Images will remain clear when reduced in size but when enlarged up to more than 20% percent will begin to get pixilated. It is best to use different images for desktop, tablets and mobiles, and also set the height and width of images to auto.
7. All fonts do not appear same on all devices. When choosing fonts to work with, let your browser do the job, otherwise it could cause a problem to read the text. If font size needs a change, make sure to use it too instead of an absolute size like PX or small.
8. It is important to allow all the elements to breathe rather than create a clutter. It may tempt you to keep adding little things here and there but it is very important to leave out some white space. With too much on the same page it causes a distraction from the main content and takes away the pleasure the viewer expects. Avoid colored text on black backgrounds instead it’s safest to stick with a white background.
9. Test all aspects of your code, one after another. Firebug for Firefox is a good way of testing. It allows for non-destructive editing so you can test different aspects of your code, turn off elements, change settings or more.
10. Number of software programs such as Dreamweaver CS6 and Topstyle5 has validations options in their software. Validate your HTML and CSS.