Coding A Web Design: Best Practices and Tips

The duty, responsibility and beauty of a good designer is to create original design in photoshop without worrying about how it will be coded. Basically in design world, there are two school of thoughts. One says that a designer plays the most important role in website success so she/he should be completely concentrated on design because you need to reach the point of design works of universal genius like Leonardo da Vinci. Others say that web designers should know not only the color theory or graphic techniques but also PSD slicing, HTML coding, content writing, SEO, and marketing. It is ‘Jack of all trades and master of All(too)’. Only then designers will create something really effective in the present-day Internet. To be effective in your process, designers should be flexible enough.

Not thinking about the development usability or functionality is a great way for a designer to not feel limited in the design process. When it comes to coding part, designers can either slice away the designs themselves or they can turn to some PSD to HTML service providers for the same. As a benefit to outsourcing, experienced coders can create an identical coded version to your PSD design, while maintaining loading speed and usability.

If you are running short of money that you can outsource, then for that we have mentioned some of the useful and handy points which would help the designers learn simple XHTML/CSS conversion effectively for a quick-loading website that is accurate to the original PSD.

Effective Slicing


So many versions come with in-built slicing tools. Like Photoshop and Fireworks versions come with in-built coding tools that facilitates designers to code a website in HTML. Whereas, the advanced versions of the same can even produce table-based markup. But ofcourse, there are some nice technicalities which are not understood by the coding software. And for that you require manual. Coding. But still the above mentioned slicing tools help a lot in website development. Now the question arises, how these tools can be used to produce coding efficiently. You may refer to the post ‘Slice and Dice That PSD‘. It goes over the basic thought processes, as well as the technical how-to, for slicing a web design the modern and correct way — while using the traditional slice tool. You will get to know the important points in slicing: what images to slice, how to optimize those images for the balance of quality and speed, and what elements of your PSD should be plain XHTML and CSS.

Writing CSS


If you find yourself creating too many custom classes, or complicated tactics otherwise, to achieve one effect, think of an alternative way to do it more efficiently. Writing an efficient CSS generally comes with experience. The more you write, more you will discover new techniques of writing it in a better way. We want to share the beginner’s guides to Writing CSS— Woork’s article on “Top-Down approach to simplify your CSS code” and “Top 10 Tips for Writing Better CSS”. These articles share the tips on the balance of using CSS to create the basic wireframe and specific styling, how to reuse preset HTML elements effectively, and when it is appropriate to create your own classes or ID’s.

Due Attention to CSS and Markup order


If you are placing the blockquote style before the paragraph style and structural elements before the content elements, never expect your stylesheet to load quicker. It loads in the order in which the elements are presented in it.

For example, if in a stylesheet, all of the content, images, and text styling were first defined, these elements would load before any backgrounds, structural elements, or design imagery were loaded. It will give an impression as if website is taking time to load than if we would have seen the background and structure first. If you have placed structure and main imagery first, then the visitors would have something to focus on while the content part is taking time to load.

Understanding Semantic XHTML coding


It is the way of performing the conversion of PSD to XHTML so that the code used is descriptive and representative of the information it incorporates and hence becomes more meaningful to search engine bots. Standardized markup tags define the content on a page better than generic elements like <div> or <span> tags.

For instance, you want to create page header, then instead of using

<div id=”page-title”>SEO & the Importance of Semantic Markup</div>

You may use:

<h1>SEO & the Importance of Semantic Markup</h1>

Some Coding Guidelines are as below:

  1. For subheadings on the page, you should be using <h2> <h3> <h4> <h5> <h6> header tags, in order of descending importance.
  2. Instead of just listing items with a <br> tag in between them, use the more appropriate <ul> (Unordered List) or <ol> (Ordered List) tag with <li> elements for each item.
  3. For bold or emphasized text, use <strong> or <em>, instead of the less descriptive <b> and <i> tags.
  4. Paragraphs should always be wrapped in <p> tags.

Doing this, will definitely help in search engine optimization.

Get Rid of Code Bloating


It occurs when the amount of coding exceeds the amount of text on a page. It will create obstacles in the path of search engine spiders to crawl the content of the page and determine its relevancy of the page if there’s excessive code in the way. It also increases the website loading time which can prove very harmful because loading time of the website is the one of the important parameter for the search engines to rank a website.

Use of Scripting Languages


Basically there are two types of scripting languages: First is client-side— where the scripting language runs on the user’s browser like Javascript, library and so on. Since it does not have to run all the way to the server to do its processing so it is faster. Other is server-side—the scripting language runs on the server. It has to be used in small dozes and it is slower too. You must know when to use either of these. Make use of server side scripting to retain the website necessities. For instance, if you have a contact form, though it is light and does not require any kind of database, but it has to be enabled with server side scripting because then, any visitor would be able to read that even if its Javascript is disabled. There should be balance of both the scripts. Know when, and why, to use each.

Validating the Code


After the coding is done, you must validate your code. The benefits of validating the code are: it makes the website cross browser compatible, facilitates fast loading, the validating tool checks for errors, if any and also it allows to explore new techniques for handling CSS code and markup.

There are number of ways to code a web design efficiently in order to produce a user-friendly and fast loading website. The above mentioned tips will definitely go long way to help you the coding part. Many of us might know XHTML and CSS, but it is an entirely different skill to learn how to code a website design effectively. Just as you produce beautiful PSDs, it is very important to learn to code beautifully as well.

Related Resources:

15 HTML Best Practices That Developers Should Know

Tips to Convert PSD Designs into HTML Email Templates/Newsletters

1 thought on “Coding A Web Design: Best Practices and Tips”

  1. Wow! In the end I got a blog from where I be capable
    of truly take helpful information concerning my study
    and knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *