10 things to remember before you start to code your web template

Make 100% sure that your client is happy with the design

Being a web designer, I’ve done a lot of mind boggling mistakes in my career. Somehow, I’ve managed to figure out some of those common mistakes committed by web designers and developers. We all learn through each other’s experiences, both good and bad. Here I’m sharing some of mine. Hope it will help you manage your workflow in a better way than before and save your valuable time.

1. If you are going to use Bootstrap in your project, make sure that your template fits perfectly with 12 grids system

If you are going to use Bootstrap in your project, make sure that your template fits perfectly with 12 grids system

Image Source: getbootstrap.com

Approximately more than 60% of web users use their cell phones and tablets to browse internet. Therefore, making your website mobile friendly should be in high priority. And to do so, I think Bootstrap is the easiest and the most trustable technique to turn a website mobile friendly.

Most probably you know that the Bootstrap developers developed the framework on 12 grids system and if you want to make your website Bootstrap friendly, than you must have follow the 12 grids system while you will be making the prototype of your website. It will make sure that your design fits with the 12 grids system of Bootstrap perfectly.

2. Always preview the JPEG version of your template in browser

Always preview the JPEG version of your template in browser

Usually I design web templates in Photoshop and trust me it looks good, very good in Photoshop while I’m designing it. But the thing is, when I do all the pre-coding processes and start to code it and even finish the coding sometime, I realize that it doesn’t look as good as it did in Photoshop. And the headache begins! I again have to go back to Photoshop and have to make the necessary corrections, which may consume a lot of time. Therefore, what I do is, I always save a JPEG version of the template and open it in my browser and view it in 100% size. It gives me an estimate of how the template will look on the browser after coding it. I think every web designer should do this before proceeding further.

3. If you are using GoogleFonts, than copy the URLs of the fonts and paste them within a text file

If you are using GoogleFonts, than copy the URLs of the fonts and paste them within a text file

The GoogleFonts most probably the biggest collection of free web fonts by Google to embed in to your website without spending a penny. And if you are using GoogleFonts in your template than make sure that you’ve copied all the fonts’ URLs or bookmarked them in your browser. Usually what happens is, we use 2-3 and sometime even more GoogleFonts in our project and when we start to code our template, we again have to visit the GoogleFonts website, than search the fonts’ name and have to copy the URL into our CSS (or however you use it). It will cost nothing but will eat up some of your valuable time from the project duration. So the better way is to copy the fonts’ URLs and save it in a text file for using it in your coding process.

4. If you are using FontAwesome in your project, than copy the icon’s class names and save it in a text file

If you are using FontAwesome in your project, than copy the icon’s class names and save it in a text file

FontAwesome is an awesome icon CSS framework for your web project. It includes almost any kind of icons from any category. This is an open source project and highly appreciated by the web designers and developers around the globe.

If you are using FontAwesome framework in your project than you must be aware that it is not possible to remember all the fonts’ class names at a time. So what you have to do is make a list of icons that are going to be used in your project and copy the class names of the icons in a text file. It will definitely save your time in coding process because you won’t have to struggle around the whole page of icons to find the proper icon used in your project.

5. Copy all the color hex codes of your theme colors in to a text file

Copy all the color hex codes of your theme colors in to a text file

Usually what we do after slicing the template is that we directly go to code the template. But then we get stuck with the color codes. I know that a designer has to remember lots of things other than color codes so why don’t we copy all the hex codes and save them into a text file with the respective name for each division, for each heading or for each link it will be used for.

6. Check twice if all the graphics are sliced properly and nothing is missing from the list

Check twice if all the graphics are sliced properly and nothing is missing from the list

I think this is a very common mistake done by every web designer. Not really a mistake, but they just forget about it. Often a web designer has to work on various projects at the same time, has lots of pressure or it simply just skips the mind during slicing process. So what happens next is that when you will search that particular graphic slice and could not find it in your images folder, you will feel like pulling your hairs apart because you will have to go back to Photoshop to slice the graphic again. So always double check if all the necessary graphic slices are sliced properly and nothing is missing from the list.

7. Rename the graphic slices as much as possible so that it will be recognizable by its name

Rename the graphic slices as much as possible so that it will be recognizable by its name

After completing the slicing process and other pre-code processes, when you sit on the table with a cup of tea or coffee to code the template, suddenly you might find that something is missing from the image folder or you are just lost within the small piece of background texture slices. Sometimes it is unrecognizable even when you preview it in thumbnail view because of its small resolution. So always rename your slices with a proper recognizable name to find it instantly during the coding process.

Let’s say, you’ve got three background textures for navigation bar, H1tag and sidebar; you can rename them as nav-bg.jpg, h1-bg.jpg, sidebar-bg.jpg rather than bg1.jpg, bg2.jpg and bg3.jpg. It is highly recognizable and you will never get lost within these small size slices.

8. Make a wireframe of your template of all possible module positions if you are developing and designing a CMS based website

Make a wireframe of your template of all possible module positions if you are developing and designing a CMS based website

Image Source: gavick.com

When I first started to working with CMF such as Joomla! or WordPress, I often faced a common problem. I always got confused among those divisions and paragraphs. Because for those 100 paragraphs of Lorem Ipsum and few other demo texts in the template, you just need one line – your module position. So I will always suggest you to create a wireframe of all possible module positions as per your template.

9. Always test the usability of your template

Always test the usability of your template

Image Source: usereffect.com

Usability is something what we call as viewing the template from the user’s view point. As a web designer or developer, we all know what a magnifying glass means or what an icon of globe means. But a web user may not be aware of that. So it should be the first priority for a web designer to make sure that the website is appropriate and understandable for all ages and genders. Every item, every content, a web designer places in a web template should be meaning full rather than just filling up the gaps.

10. Make 100% sure that your client is happy with the design

Make 100% sure that your client is happy with the design

Image Source: topcash4tnhomes.com

Sometimes, after making hundreds of corrections in the template as per the client’s demands and thinking that the template is ready to code, what happens next turns out to be quiet tragic. After completing most of the coding part of the template, when the client asks for the project report; suddenly he/she notices that there is something which he/she doesn’t like or is not as per his/her demand and asks you to make the correction. In few cases, the corrections are minor, but in others, it can be really tough work. You might have to go back again in Photoshop to make the necessary corrections. So always keep in mind the final layout that you are going to code, double check and verify it with your client and make sure that he/she is 99.99% satisfied with the template.

Conclusion

The 10 points which I’ve mentioned above are really very common mistakes done by web designers and developers. Though there may be more points to discuss, if you pay heed to the points mentioned above, I’m sure it will help you to manage your upcoming projects better.

Let me know if you have any questions in mind. And do share with me if you find any more points worth mentioning, that you’ve faced in your own career.

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...