TIPS

+
IDEA WIREFRAME

WEBDESIGN
+
WEB DESIGN

INTRODUCTION
Title
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Page No.
3 4 5 7 10 12 14 15 17 19 21 23 26 31 36 37 41

Design Tips Domain Name Tips Web Hosting & Development Platform Tips Designing Tool Tips Competitor Analysis & Target Audience Research Sit & Plan For How Execute The Things Approach With Design Part Concept Building Information Architecture & Site Map Aspect Of Actual Designing Dealing With Copyrights & Legal Content Issues Important Tips While Using HTML Important Tips While Using CSS & Javascript Common Tips Tips For JAVA Tips For PHP Tips For .Net Tips For Testing

DESIGN TIPS
Time has gone when websites were designed simply to show the text and to accompany the development features. Design is as important as anything else in web development now, sometimes even more. However, most of the designers are not using their innovative minds and are following ongoing patterns to save time and energy. Many do not follow the trend but miss-out anything which worsens the project. Do we stand for a while and think what we do regularly? Any website, before the project starts, gets its shape in mind of designers. Here we try to re-present the whole website design guidelines in the form of tips. You may or may not know them. You may or may not agree with some of them. But they are worth a shot for a reading. Read them, think about them and bookmark or keep them for a reference if you like it.

How do we begin if we are working on a website design project?

We pick a domain name or we accept the one which is available Its okay if you cant have the domain of your choice. But you still have to take care in accepting from available domains. Following things are necessary to be seen for domain selection.

DOMAIN NAME TIPS

1 Have domain same as your firm name or title of the website. This helps the user in remembering it. If your brand name is not decided, make sure that the brand name you choose is available on top level domains (TLD) like .com, .net and .org 2 3 Avoid generic names, like if you are selling xyz powder, powder.com is less preferable. xyzpowder.com will be easy to remember Hyphens are matters of discussion and are quite debatable whether to use or not. Some experts say it is good for search engine to analyze key-words and some say it increases complexities for users. We say, avoid them. If users find your domain easy, they are anyway going to land on your page and search engines will rank your page automatically. 4 Make sure your website functions both with and without sub-domain www. Most people do not type it. Also, prefer sub-domains for mobile sites like me. xyz than going to xyz.mobi. It saves a lot of cost. 5 You have to decide at the beginning whether you want to go to a blog or not. Having a blog for a site continually updates people and spread the brand of your site. In addition, you have to decide at the beginning of the project whether you want to go for sub domain pattern for blog like blog.xyz.com or for sub folder pattern, like xvy.com/blog. 6 You can go for Domain Hacks like do.ma.in (for domains) if it is not available in top level domains like .com. It may not look simpler but provides a better alternative than long and not suitable in TLDs. 7 It is beneficial to go for country code top-level domains (ccTLDs) if you are targeting a local audience. For example, co.uk may serve your purpose better for the market in UK. However, make sure you reside at the place for which you have registered for cvcTLD otherwise it is a case of violation of the registrars agreement. 8 When it becomes necessary to get a particular domain, you can go to online auctions to get domain of your choice. However, this may cost you a little more than other domains, but it may bring you some customers which drive to your site with ease of domain name.

WEB HOSTING & DEVELOPMENT PLATFORM TIPS

Once done with the domain name, what comes next? Decisions related to Web Hosting and Development Platform
But what to plan and how to plan remain debatable questions. Next few steps are for developing people. To decide web hosting, development platform, required tools, etc. comes next. These decisions are of immense importance and get reflected in your design. But most of the development platform can construct web pages with complexities of any level.

Check for the packages of disk space, bandwidth, CPU usage and other features that the website hosting agency offers you and choose the most suitable one for your requirement. Do not indulge yourself into the offerings of unlimited resources or bandwidths. You later on may fall in contractual fine prints and acceptable use policies. You have to balance between being too liberal and too choosy. Do not go for dedicated hosting or VPS, as it may cost you more at the time when you do not know how many customers are visiting. On the other hand, going for free hosting is not good for commercial use as it is not secure and creates a wrong impression. What to do then? You can go for shared or grid hosting in the beginning and may expand once you start getting good returns.

10

WEB HOSTING & DEVELOPMENT PLATFORM TIPS

11

In case you already have a host, you can check its performance by certain tools available in the market. Also, do not ever plan to host your own website (in-house hosting) unless you know what you are doing and you have finance to answer wear and tear of such infrastructure.

12

As far as the Development Platform is concerned, most people go for open source technologies and Content Management Systems (CMS). For core part, you can choose from various established platforms like PHP or dot NET. However, it is necessary to have testing environment that will run PHP and MySQL on local PC. One of the solutions may be to install XAMPP. Choice of Development Platform depends upon what type of website you are building, whether it is ecommerce or it is service portal or anything else customized in more detail. In addition to above mentioned factors, you have to be precise about which social sharing site you will work genuinely later on. This helps in building a website that makes social sharing smoother and responsive. While it looks easy and fast, use of tools like WYSIWYG (What You See Is What You Get) may lead to production of less reliable codes. We rather advice to go for classic text editors and knowledge if coding basics in development than using short cuts. However, using those tools may fulfill your requirement when you have to complete the task and do not need extra-neat codes. What is suggested here in development part may not be the full information you need but we have tried to make you aware of some loopholes in trendier options. You may not agree with some of these and may not go for any of the options, but it is still good to know.

13

14

15

DESIGNING TOOLS TIPS

Decided about the Development Part, what comes next? You need to get a bunch of tools for Designing
Most of the beginners think that having Adobe and Microsoft products is necessary to produce stunning designs and no other tool may provide a sufficient level of sophistication. Well, this is not true from where we see it. It needs powerful imagination, the use of basic logics and knowledge of grammar of software operations. We present here some tools which are extraordinary alternatives for Website Designers. You can also read it in our separate post for detailed observation.

DESIGN

TIPS

16

You can use tools for Source Code Editing and WYSIWYG modifications such as Notepad ++, jEdit, BlueGriffon, SeaMonkey, Amaya, CSSED, Quanta Plus, NiceEdit, OPEN BAXI HTML Builder, KompoZer, Adobe Dreamweaver etc.

17

Some tools for Graphical Enhancement and Editing are Open Office Draw, Skencil, Karbon 14, Kivio, Inkskape, Dia, mtPaint, GIMP, Krita and a lot more. Some utility tools are also necessary to be handy for quick completion of lengthy projects. This saves a lot of time and adds perfection to the tasks. Open Source Utilities like FileZilla, Xournal, Greenshot, CamStudio, ZScreen, Cyberduck, Firebug, Font Forge, etc. can make your task easier like never before.

18

DESIGNING TOOLS TIPS

19

Other than presented above, a lot more tools and techniques are available which you can use to enhance your overall designing experience. You can check out our separate posts for source code editing as well as graphical editing to choose what suits your work.

20

Other than having some apps like above mentioned ones, you also need to keep some cheat sheets and checklists to add perfection and speed to your work. These cheat sheets are available for most of the renowned software packages like Adobe CS. It makes your operation on certain tools easy and also suggest you suitable tools for certain operation which you would not have thought of in first place.

My System is loaded with Tools, what do I do next?

Learn and Get Inspired This part can give your project a new height. This phase is about doing the whole thing in mind before you actually do it. Most of the designers miss out this part and directly begin working upon the project which is extremely harmful. With various ready-made CMS and templates, website design is losing the sense of creativity for about 8 projects out of 10. This is because we do not care much about doing some strong research on the matter.

WORDPRESS
CMS

JOOMLA MAGENTO

DESIGNING TOOLS TIPS

21

Learn the trends. Technology changes day by day and you cannot afford being old. Web site trends are becoming more and more flexible and fashioning every day. Subscribe to reputed journals and buy some magazines. Study design blogs on a regular basis. And bookmark the information you find necessary.

22

Make yourself skilled with latest tools and techniques. If necessary, learn a new web language to prepare yourself with upcoming challenges of design fields and client requirements.

23

Make a practice of verifying what you T have learnt. Do not trust a single source as it can have outdated information which is not worth having in this era of lightning fast growth. Do not half read anything as well as do not only read. Learn things completely. Read full and test it by yourself to make it assured. Everyone wants their site to be attractive and unique. But not all the companies can provide this. However, if you have that learning and thinking approach in mind, you certainly can design a site which is distinctive in nature.

24

25

26

All you have to do is to keep your mind and heart open. A great idea of the website may spark in your mind from watching television or by viewing a variety of websites online according to the type of website you are creating like ecommerce, general information website etc.

27

Learn where others are lacking and see where the vacuum is in ideas and implementation. You wouldnt have to face much competition and you can rule the market by providing services which are different from others.

COMPETITOR ANALYSIS & TARGET AUDIENCE RESEARCH

We got enough Idea about what and how of website designing, should I start working on the plan now?

No, were missing one important thing Competitor Analysis and Target Audience Research Learning new things is one thing and defining and designing output that exactly matches the client requirement with an approaching desired group of users is a different thing. However, it is not tough or impossible to do this. All you have to do is to spare some time and observe what others are doing and what users are responding to.
28

If you are making a website, you may not get works which are restricted to one place and type of people. The client can be from anywhere in the world and can demand anything he wants. This is exactly why Research on Target Audience is very important for every project you get.

29

Define the locality and spread of target viewers of your client. Language, nature, requirements, etc. changes place by place. You have to identify whether website is made for US or UK of Asia or the whole world. The design, service inclusion and content changes accordingly. See what age group and professionals are targeted by the client. Learn everyday routines, hobbies and regular activities of that group and link it with your ideas. Generalized sites have different ideas in root while specific sites have different ones.

30

10

COMPETITOR ANALYSIS & TARGET AUDIENCE RESEARCH

31

In addition to target audience, you also have to focus upon the subject or field for which you are designing sites. This is most important while you are working upon a blog with rapid informational updates. It is not good to make a website on construction business if you know nothing about it. So, know and make is the best policy. When you are analyzing competitors, do not simply analyze those which are related to your desired subject. Go on with a free attitude, look what people have done for their requirement and relate the works with yours. This will not only give you an idea about competitors, but will also fill you with new ideas about your project.

32

33

With all this, you also have to take care that you are not drawing too much into repetition. Try to be inventive and innovative. Do not hesitate in trying something new. It may take a little more time for people to adjust to that, but you can set a whole new trend with it is also a possibility. One innovative idea would be to ask people. Before you go live, you can design a temporary feedback form or questionnaire which collects peoples views on the matter. It is better to take that into account than guessing what they would like.

34

11

SIT & PLAN FOR HOW EXECUTE THE THINGS

Now, how do we move further? We sit and plan on how we will execute the whole thing
This part looks classical. We have to plan. But do we plan correctly? Many times we miss out points which we later on come across. This makes us do the whole thing again, or some part of it. It has a direct impact on the quality of results and project time span. New Trend in Market New Technologies like CMS Innovative Neat/Clean Design

Competitors Websites Clients Requirements

Concerntrate on Subject

Collection of Audiences Views

35

Most people make the mistake of working on a budget first. This is not the right way unless you have to. The first thing would be - ask yourself, what will be the situation in which you can deliver optimum work? Define a particular environment of work or a suitable workplace. Think of what you will need. Sum up all what it takes to deliver the best work. It may be a cup of coffee on a regular basis for a high - end system which frees your capacity. List them all.

36

37

Define the time frame for which you will work on a daily basis and accordingly estimate the overall time requirement of the project Remember, an idea is necessary and it is not manageable. Make sure you consider your time requirement liberally so that you get enough time for idea creation. Make sure your planning is realistic and you do not have to damage the projects quality in order to complete it in time. Having some project managements software for such work of tracking time may help you from losing sight from the bigger picture.

38

39

12

SIT & PLAN FOR HOW EXECUTE THE THINGS

40

Do not see only administrative and managerial part. Plan it technically. Think what and how of designing individual parts like home page, UX, UI, front end development, etc. Also if your website is of dynamic type which has all pages dynamic. Please do select which server-side programming language you want to use to support database connectivity.

41

42

Providing security to the clients website is of immense importance. Especially to the website which incorporate financial transactions and important passwords in them. Going for an SSL certificate is the right option for such security.

43

Security applies more to back end database handling. Make sure it is encrypted. Storing a password in a plain text can be a threat to your precious customers.

13

APPROACH WITH DESIGN PART

How to approach the Design part? How to Begin? We either use some pre-defined template or we adopt any other websites concept. Think further!
This part looks classical. We have to plan. But do we plan correctly? Many times we miss out points which we later on come across. This makes us do the whole thing again, or some part of it. It has a direct impact on the quality of results and project time span.
44

There are two methods of answering website designing project. One is you take the information first and then design the website which fits it. Another method is to prepare a user friendly design first and then feeding appropriate content in it.

In both the ways, the priorities are set as per type of project and targeted audience. For websites which are more operative like ecommerce, design is important while for websites which are informative like an encyclopedia, content is important. However, priorities for both of them may be different, but it does not mean than importance of either design or content is less. Both are equally important.

14

CONCEPT BUILDING
What comes after Planning? How to begin Implementation? It starts with Concept Building
A strong viewership depends upon uniqueness and convincing capacity of the concept. It is the base of the entire construction of brand establishment. Design Concept of the site defines the entire line of action for further action that follows. However, following a wrong method for concept creation sometimes sink the whole ship of project.
45

The concept begins always with Brainstorming. Define exactly what you are designing for. It can be a portfolio website, service website, and ecommerce and lot different subcategories in each of these. You have to look into your brain for the better and state-ofthe-art idea about the subject. You also have to take inputs from other people. Open your eyes and brains. Some catchy concept may be in front of you but you may not see it. Do not try to be precise at this stage. Think of themes at this moment. The exact design can wait. You just have to think about whether you want it bright or dark, decent or sporty, traditional or modern, etc. In short, this is about the sites overall impression on viewers mind. In doing this, what can help you most is Wire Framing. It is easy and helps a lot in shaping the blur idea of mind into excellent design. Placing of objects, images, buttons and content are results of ongoing design trends, projects requirement and innovation of your brain. Make sure you are not preparing a design. You are creating a User Interface which has an operational perspective which is a key part. Designing an easy to understand and smooth to operate Graphical User Interface (GUI) should be your primary goal. You can use wire framing tools for making your task easy. Tools such as Pencil Project, Gliffy, JustProto, Mockingbird, Lumzy, Denim, etc. are low cost yet effective options while you can also go for Microsoft and Adobe products like Visio, Photoshop, In Design, etc. However, if you dont want to go for any of these, one option is always there pencil and paper.

46

47

48

49

15

CONCEPT BUILDING
concept building

50

After you are done with the brainstorming process, you would have come to a conclusion of about one or two design themes. Discuss them with your client. If it is your own website, think harder and put all the options on various tests and opinions. Make sure your entire design is filled with objects and material which are easy to scan, read and grasp. Use innovative techniques to represent lengthy paragraphs which people usually avoid to read unless it is an encyclopedia or factual information based website. Dont be too simple. Try something new. Apply your mind in a design which hits exactly at a desired group of people and get it registered in the users mind with some new features. Be innovative, but dont be illogical. There has to be some firm concept behind your design. There are people who in order bring uniqueness in design, make it worse. Following some traditional norms is not a bad idea. There is a reason why people choose it. Plan about which Social Media you are going to use for future use. Having a theme which suits the particular social media is also an important factor. Conceptual doodling and shaping the ideas with sketches will boost up your thinking capacity. It can create some mind blowing ideas sometimes.

51

52

53

54

55

16

INFORMATION ARCHITECHTURE & SITE MAP

56

Store your ideas. Most people do the mistake of throwing away the rough sheets considering them of no use. It is possible that a better and effective idea can come to your mind when you look at that previous work by chance.

Why dont we feel complete after having Design Concept? What do we do next? We prepare the Information Architecture and Site Map
In either of the case from design to content or from content to design you must assure about the presentation of individual page content and visual flow of the whole set of information to the viewer. For this, you have to think about the site mapping and architecture of the information you are providing on the website. This part is more classical but still uses novelty of thoughts as far as presentation is concerned.
57

Prepare Informational Architecture. What information your site wants to convey and how it should convey in the best possible manner. Make sure you have end user and viewer in mind, because they are those for whom you are making this website and you want more and more people to visit it. Categorize the information in small but easily searchable segments. Do not subdivide at micro level so that the viewer gets confused. Also, do not categorize in big segments so that the viewer gets the wrong impression about your classification. Work hard on the sitemap. Prioritize page sequence as per the categories. Site Navigation is one of the most important things to consider for an ecommerce website. For information and portfolio websites as well, the site map and navigation plan matters a lot. While thinking of the information architecture and site mapping, try to fill the gaps which users are facing at this moment. Answering that would help your website a lot of response.

58

59

60

61

17

INFORMATION ARCHITECHTURE & SITE MAP

62

Prepare Informational Architecture. What information your site wants to convey and how it should convey in the best possible manner. Make sure you have end user and viewer in mind, because they are those for whom you are making this website and you want more and more people to visit it. Categorize the information in small but easily searchable segments. Do not subdivide at micro level so that the viewer gets confused. Also, do not categorize in big segments so that the viewer gets the wrong impression about your classification. Work hard on the sitemap. Prioritize page sequence as per the categories. Site Navigation is one of the most important things to consider for an ecommerce website. For information and portfolio websites as well, the site map and navigation plan matters a lot. While thinking of the information architecture and site mapping, try to fill the gaps which users are facing at this moment. Answering that would help your website a lot of response.

63

64

65

66

18

ASPECT OF ACTUAL DESIGNING

A lot of Thinking and Conceptualizing is done, what follows? We start to work one by one on each aspect of actually designing.
This work depends upon the team strength and skills. For a team involving more members, parallel working may be done. For individuals working on a single project, you have to define the exact method and sequence which you will follow in designing and development.

TEXTUAL DATA

{
ACTUAL DESIGNING INCLUDES ABOVE SEGMENTS
The first thing to start creating is to define what content you need. We begin with some general tips related to content. Remember, when we are saying content, it is not only the written content; its everything that you provide to the viewer on your site.
67

No design is appreciated if it is served with poor content. The dish which looks and smells delicious must taste delicious too. So, make sure you select the richest content that suits the theme as well as the type of the site and arrange it in a smoother manner. Do not put any boundaries unless necessary. Your content has just one rule: the one which makes users comfortable surfing your site and provides them as much knowledge as possible. Wear Users hat while applying this thing. If you feel good with the content as a user, then it is good to go with. Arrange the content segments in such a way that it drives a user through the site unlike the typical case when user drives it.

68

69

19

ASPECT OF ACTUAL DESIGNING

70

Be honest when you serve content. Merely keeping the viewer engaged is not the right way to do this task, which most designers often do. Focusing upon the aim that every viewer should have a quality time when he is on your site is correct path.

71

However, thinking in everything is possible mode sometimes makes your project unrealistic. People come across limitations while working on websites. In such cases, make sure you do not compromise the theme and design concept in any page.

72

Typical content segments which you will come across will be Textual data, Multimedia like Audio, Videos, Pictures and Info-graphics, Banners, Buttons and everything that is included in User Interface.

20

Dealing With Copyrights & Legal Content Issues

What do we often come across while dealing with copyrights of content and other legal issues? We either have to pay for it or we have to think of a mediocre way
There are two possibilities: either you are working on your own project or you are working with the clients project. If you are working on self initiated project, make sure you take good care of things needed in copyright. The scenario with the clients project may be different.

In addition to that, you come across the copyright and legalities in two ways: for the things you are using in your work and your work itself. That means others copyright which you have to obtain and claiming copyright in your own work.
73

When working on a clients project, make sure your client is on the same grounds as far as copyright obtaining and procedural requirements are concerned. Also, make sure you have all those things in a contractual agreement for the good of yourself. If necessary, pre-evaluate all the requirement and budget you may need in copyright obtaining. Knowing works best here. Know about copyrights and legalities in one shot, either by books and online or from some other expert who can simplify complex rules for you. Be assured about local rules too. Following some basic standards is one thing. Another thing is to focus upon what region you are associated with. Various countries and various states have different legal clauses.

74

75

21

Dealing With Copyrights & Legal Content Issues

76

Things which may cause trouble with legalities at later stages should be chosen and used carefully. Hence, take extra care while using the Image, Link, Text, Quote, Symbol, etc. These things may unknowingly cause trouble for you.

77

Unlike using above mentioned things, you should also maintain a safe distance from libeling and image editing someone or something in order to be safe. Not only design, you should also take care for the development and marketing features. Using licensed products illegally may invite trouble. The best option is Open Source Technologies are available. They can keep you safe from future troubles.

78

After the planning and gathering every important information and decision lets start with the Implementation.

22

IMPORTANT TIPS WHILE USING HTML

Now after thinking of everything like what your content will be, what your sitemap will be, which platforms are you going to use etc. the next step that comes is the most important part and which totally test your preparation for the website that is implemented. Implementation includes design and coding. The best pattern to be followed in Designing is: First design the Basic HTML followed by implementing CSS and then lastly go for JAVASCRIPT. Now Some tips you can remember while using HTML are:
79

Always use DOCTYPE at the beginning of each and every HTML or (X)HTML pages as you won't believe many browser specific problems occur due to avoidance of the DOCTYPE. A good website always puts into practice by making sure HTML coding is compliant to recognize HTML standards such as W3C standard, thus making the code clean and accessible. Never use table tag in case of creating a layout. Table tag is used to create static pages and when use have to change the layout it becomes very difficult. Use of diva tag enhances the dynamicity of the layout and during redesign it becomes very easy to adjust the divisions.

80

81

82 83 84 85

Never forget to close tags. If the tag doesnt have a close tag, always put a / before >. Use only H tags for Headings. Do not use any tags like span, div or p tag Always take care of the nesting of tags. Anchor text is most in the case of links. Also relevant anchor text makes it very easier for the user to navigate through the websites. Never use relative paths in case of source attributes of the images. As it becomes difficult for the client to understand the source of the images. Always create a separate folder for the images.

86

23

IMPORTANT TIPS WHILE USING HTML

87

Also always use alt and title attribute for images so if the image doesnt get displayed on the clients browser, This tag can help him understand what kind of image it is. The links that are offered by the user earlier should be of different color than the one that are not visited. So that the user can easily understand that the link is already visited. So always make the links color change after visited.

88

89

Normal text should never be underlined or colored because it always distracts the users' mind from other important and relevant text. Always include functional links in the footer. Avoid Horizontal Bars. Horizontal Bars are very uncomfortable to use. Also horizontal bars leave a very bad impression about the designing of the website. The content of the website should always fit the standard screen size i.e. 1024 x 768 pixels. Vertical Pages are tolerable but they shouldnt be so long that the user gets bored in scrolling down. And if the user wants to go back to the start of the content then to he will definitely get irritated. So always after certain topic gets over a back to top link makes it very easier for the user to go back to the top of the page.

90 91

92

93

Iframe should always be avoided in web design as some search engines cannot scroll the frames. Left menus should be avoided. If unavoidable, some attractive keywords should be written above them. Also code protection is not possible if the HTML is not used with iframe tag as we have to place the whole HTML code on the web. Never use the buttons at the end of form tag. Always use <input type=Submit> because in some cases it stops working so. Always use the name attribute in each and every input tag to identify the field uniquely. Also the name attribute should have the same name as the label. Also label tag should be used to label a text field or text area.

94

95

96

97

98

24

IMPORTANT TIPS WHILE USING HTML

99

Never use tags like marquee and blink as they can spoil the design of the page. In case of slideshows jquery Is the best option.

100 Every page should contain an eye-catching title as well as a description which in detail

explains the content of the page. But the description should not be more than 20 words.
101 Avoid using images as links. Always use text to display a link.

25

IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT

102 First and foremost tip is never used inline or inpage CSS or Javascript. Always use

external CSS or Javascript so that it doesnt remain tough for you to search the functions and CSS.
103 Also always use a link tag to link the pages with the current page to use the CSS and

Javascript.
104 Use of names for classes and id in case of CSS and functions in Javascript should

define their use so that it becomes easy to understand and search them. Use the names according to the coding standards.
105 For a group of div tags having some property common create a whole new class and

apply the css in that. This will reduce redundancy in the code. Example for the content area of the page create a content class in css and apply that class to the div tag for the respective content area. Now the actual use is that the almost whole text of the content will have the same size and font then you can apply it in that css class.
106 Also the CSS properties common to a specific tag or a group of tags whenever used

can be written on a tag based CSS.

107 The variables of the javascipt should have the same names as the name given in the

name attribute of html to understand which variable corresponds to which text, multimedia text or input tag.
108 Always use shorthands in case of CSS like instead of using the property of margin with

different attributes like #id {

margin top: 50px; margin left: 0px; margin right: 0px; margin bottom: 50px;

You can directly write #id { margin: 50px 0px; }

26

IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT

109 Never use 0px while writing the pixel size. Always write 0. 110 Never use while the name of the color defining the color. Always use the hexadecimal.

Example #id { }

color: red;

Should not be used. You should always write #id { }

color: #FF0000;

111 Never define redundant properties. For example defining two CSS ids with same css

properties and values you can define them by separating the id names by ,. Example: #id1 { color: #FF0000; } #id2 { color: #FF0000; } Instead defining redundant properties you can use #id1, #id2 { Color: #FF0000; }
112 Always organize your code in a proper manner and add comments where ever needed

because if someone else views your code, It is very difficult to understand and search for things in large files.

27

IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT

113 Many things should be styled globally like paragraph and heading styles for text as well

as link styles.
114 Validating your HTML and CSS files will help in reducing errors and figuring out where

a problem might be coming from.

115 In case of Flash, This are the things you should keep in mind.

- Do not include an entire site on one page. - Do not use flash as the navigation. - Do not include important content in flash. After Designing the next part in the implementation is Coding. Coding means writing the code which will be executed by using a UI element and will execute a task. There are many languages present for coding. Some of the very popular languages are PHP, JAVA, JSP, ASP.NET, C#.NET etc. There are many things that you need to keep in mind while coding because one mistake can pay you a lot. So here are some tips you should keep in mind in case of coding. We will define design tips for each and every language separately as each language has some different specifications.

28

COMMON TIPS
116 Never Store passwords in cookies as they can be changed by the hacker. Always

make use of session.

117 Create/Change your database tables in UTF-8 charset. 118 Dont

put

bad

comments

or

excessive

comments

like

####################################... or /////////////////////////////////...
119 Set a password for the database for the security purposes. 120 Also always encrypt the passwords and then store them in the database. And during

access decrypt them and then use them.

121 After the installation/configuration software, delete setup/installation files & folder. 122 Use comments as they are the friends of the developers. They make it easier for the

developer to understand the code.

123 Always use indentation and spaces to write the code in a proper layout. That makes

the code readable and understandable. For example: Class A { Public static void main (String[] a) { System.out.println(Hello); } } This looks ugly. Best way to represent : Class A { Public static void main(String[] a) { System.out.println(Hello); } } Example is of JAVA but this is applicable to each and every language.
124 Always give your functions, variables and classes a meaningful name and that also of

a type that tells us about the functionality and the task of the function.

29

COMMON TIPS

125 Always initialize the variables to a sensible value when declared. 126 If you are using a Boolean variable always initialize it to false. 127 Never use +1 and -1 to increment or decrement the value of a variable in a loop.

Always use the ++ or sign.

128 Always use assignment operators in case of addition / subtraction / multiplication / divi-

sion of a variable with its own value. Example In place of writing you should always write i = i+1; i+=1;

129 Always use as much less sql queries as possible.

30

TIPS FOR JAVA

130

First and the most important tip is the filename of the java program and the class name should be same. In every class, first list all public features, then all private features. List features in the following order: instance methods static functions data fields static final constants static variables (see below)

131

132

The following rules specify when to use upper- and lowercase letters in identifier names. - All variable and function names and all data fields of classes are in lowercase For example, the first player. - All constants are in upper case. For example, CLOCK_RADIUS. - All class names start with uppercase and are followed by lowercase letters. For example, Bank Teller.

133

Object creation in Java is one of the most expensive operation in terms of memory utilization and performance impact. It is thus advisable to create or initialize an object only when it is required in the code.

134

Local variables are great. But sometimes we may insert some bugs due to copy paste of old code. Minimizing the scope of a local variable makes code more readable, less error prone and also improves the maintainability of the code.

31

TIPS FOR JAVA

135 A switch is not a replacement to it.. Else condition. The switch is used to check the

cases for a particular condition. Switches are not that inherently bad but if.. Else.. Are easier to understand and code.
136 Generally in JAVA, the garbage collection is done automatically when the system gets

low. But in practical garbage collection adds load to the system and makes it work more slower. So in that case we should avoid garbage so that there is no need only of running garbage collection. To avoid garbage collection, in basic take care of three things like Reuse the existing objects, Avoid creating unnecessary objects and create object pools.
137 It is very advisable to use an existing standard library which is already tested,

debugged and used by others. This will not only improve the efficiency of the programmer but will also reduce addition new bugs in your code due to your code. Also using a standard library makes code readable and maintainable.
138 In Java the performance of the application is also affected by the types of the variables

used and the way they are being accessed. Some variables can be accessed directly while some have an indirect access. So this affects the amount of memory, the time required in the memory management and the performance of the system indirectly.
139 The way the loops are written also affects the time to execute the system. The more no

of iterations the more amount of time is required to execute the loop. for (int j = 0; ++ j <= count; ) can be improved by 25 percent (5 percent with a JIT compiler) by rewriting it as: for (int j = count; -- j >= 0; ) to reduce the number of accesses to the limit variable.
140 When a variable has to be initialized inside an iterative loop never use for loop. Always

use do.. While loop as it will be executed at least once.

141 The package statement must be the first statement of the file. All files should belong to

a specific package.

32

TIPS FOR JAVA

142 Always the package statement should be followed by import statements. And for each

and every package or class to be imported different import statement must be written.
143 Imported classes should always be listed explicitly.

import java.util.List; // NOT: import java.util.*; import java.util.ArrayList; import java.util.HashSet;

144 Variables must never have dual meaning. 145 Whenever possible declare methods as final as they are better handled by the JVM

which increases the performance.

146 Always comment before declaring a variable / method (except main) or a class. 147 Always declare and define the variables whenever required. Never declare them

before use as many times it happens that they are declared and defined in the beginning and never be used its a total waste of memory.
148 The incompleteness of split lines must be made obvious. For example:

SetText ("Long line split" + "into two parts.");

149 Instead of writing the JDBC code on each and every place required, create one class

and create an object of the class wherever that code is required. This decreases the LOC.
150 Complex conditional expressions must be avoided. Introduce temporary boolean vari-

ables instead
151 Lazy evaluation is very useful and reliable as it never initializes the data until it is used

somewhere. So if that data is not used in the whole program it is not created. This saves a lot of memory. In Java this mechanism can be achieved by declaring the variable private and its corresponding getter method public.
152 Primitive data types are easier to use and bug free in comparison to Wrapper Classes.

Also Wrapper Class is very slow as they are classes and takes time to load. So it is recommended to use primitive data types rather than using a wrapper class.

33

TIPS FOR JAVA

153 Always create different methods for each functionality. That will reduce the time of

execution.
154 Never use GOTO statement. 155 Every time when you use a binary operator leave a space before and after it. 156 Opening and closing braces must line up, either horizontally or vertically. 157 Generic variables should have the same name as their type. 158 Variables with a large scope should have long names, variables with a small scope can

have short names

159 Use SWING rather than using APPLET. This is because the SWING contains light-

weight components whereas APPLET contains heavy weight components.

160 Abbreviations should be avoided in case of names of functions, variables, classes and

constants.
161 The class hierarchy should be as low as possible. Because if the class hierarchy is in

depth then it takes time to load all the classes/packages in the hierarchy.
162 Strings should be used with high care as they can affect the performance of the pro-

gram.
163 Whenever your method is returning a collection element or an array, always make sure

you return empty array/collection and not null. This will save a lot of if else testing for null elements.
164 To increase the performance of the system always appropriate classes must be used. 165 Finally block should never have the code that can throw an exception. As the finally

block is always executed if it throws an exception, it can lead to a runtime error and the program will not run.
166 In comparison to vectors, arrays are very fast. 167 Static variables or methods must always be referred through the class name and never

through an instance variable.

34

TIPS FOR JAVA

168 Always generate JAVA BEANS automatically from the XSL files in J2EE applications. 169 Never use deprecated classes/methods. 170 Never use Java. Lang. Exception class. It removes the meaning of checked excep-

tions. Also it won't convey a proper message to understand the error to the user.
171 Avoid parsing JAVABEAN into an XML manually. You can use the BeanXMLMapping

component to convert the JAVABEAN into XML. And this component can be developed using the XML parsers, DOM APIs and JAVABEAN introspection(the ability to ask which properties and events it supports).
172 Always use a getXXXX method in case of RESULTSET same as the data type of the

data in the database table. If the field is set to end use getInt () method to get the value of that field.

35

TIPS FOR PHP

<?PHP ?>
153 Do not open and close many <? php ?> Tags as it reduces the speed of execution. 173 154 Always use $_REQUEST in place of $_POST or $_GET. 174 155 Use PHP standard functions in place PCRE functions like use str_replace () function in 175

place of preg_replace function () as it increases the speed and optimizes the code.
156 For security purpose always set the access permissions of the files to read only. 176 157 Always use echo in place of the print function. 177 158 Use require & require_once instead of them include & include_once. 178 159 Put your short PHP codes into an html file. Not PHP file. 179 180 Use

session_unset

and

session_destroy

after

usage

of

session(Not

just

session_destroy!).
181 Always write your configuration settings in different files and then include them at the

beginning before starting the script.

182 Always use quotes while accessing the array keys.

Example: $sName = $aNames['marc'];

183 To print different strings together always use a comma to separate them.

Example: echo $name, lives in , $city, in $state;

184 If you are comparing the value of a Boolean variable always use === operator.

36

TIPS FOR .NET

153 You should avoid using Ajax because of the following reasons: 185

The coding and debugging complexity gets increased. Many web browsers dont support AJAX. Harder to have pages indexed by the Search engines Introduces difficulties with Web Analytics solutions as user actions are harder to track

154 ASPX and ACSX should not contain a single line of inline server side scripting. It 186

should only contain visual elements like HTML/XHTML.

155 Directives must be declared only at the starting of the Asp.Net Web Form page. 187 156 Master pages should be used to create a consistent layout of the website. 188 157 Also if there is something common in some pages of the website already having a 189

master page, you can create nested master pages

158 Commonly used page elements should be placed in separate controls to avoid dupli190

cation of code, facilitate code/component reuse, improve maintainability, and caching effectiveness.
159 Server side validation should be performed on each user input. 191 192 When the complete page cannot be cached, use fragment caching. 193 If the input validation fails and the page is reported back to the user, the values of the

fields other than the one that failed should retain as it is. It should not be that the user has to again fill the whole form.
194 Data that is frequently used but changes infrequently is cached using ASP.NET Cach-

ing
195 Session state should not be enabled for the whole web application but you can enable

it for individual pages wherever required. And in case of View state, it should be enabled only for individual controls wherever required and not for the whole website.
196 View state should not be enabled for data bound controls.

37

TIPS FOR .NET

TIPS
153 Data Grid is deprecated so should not be used. 197 154 Objects should not be stored in session state. 198 155 There should be error reporting pages to display http error codes. 199 156 The database connection string should always be in encrypted form for the security 200

purpose. After the coding is done you should understand the performance of the site i.e. the speed of the website. To achieve a good speed, you should optimize your website. The formatting tips to increase the speed of your website are:
157 Compress the images. We can use Googles Page Speed plugin to compress the 201

images and then save the compressed images and then re-load the compressed image in place of the current image.
158 After compressing the image scale them to proper pixel size as specified in the web202

site.
159 You should use the browser caching as it stores the static content which speeds up the 203

speed of the website.

204 Also in place of loading each image separately you can use CSS sprites i.e. it is a large

image comprising of many small images. So browser has to load only one image rather than loading many images separately.
205 Also if the javascript is loaded at the beginning of the document it takes tremendous

time to load the page. So it is better to load the javascript at the end of loading the HTML page. This can be done using defer attribute of the <script> tag. If defer attribute is set to value defer, it loads the javascript at the end of loading the HTML page.

38

TIPS FOR .NET

153 You can magnify the JS, HTML and CSS decrease the loading time. There are many 206

resources available on the internet to minify the JS, CSS and HTML.
154 One more alternative to decrease the load time is to combine the JS and CSS pages 207

as it takes much time to load them separately.

155 In todays world there are many tempting plugins available on the internet for free. So 208

webmasters always try to use them anyhow but they forget that each plugin has its own resources so if you use the plugins, the browser has to load the resources also for that plugin which also increases the load time.
156 Content delivery networks or, CDNs are vast networks of servers that are housed 209

around the world. When you store website content like images using these services, rather than storing them locally on your hosting account, you enable the CDN to serve up your information from the server thats closest to your web site visitor. The result? Faster load times that will make your customers and the search engines happy. To use CDN you can use the services offered by MaxCDN and AMAZON.
210 Packing components into a multipart document is like an email with attachments, it 156

helps you fetch several components with one HTTP request (remember: HTTP requests are expensive). When you use this technique, first check if the user agent supports it (iPhone does not).
211 One of the cited benefits of Ajax is that it provides instantaneous feedback to the user 156

because it requests information asynchronously from the backend web server. But if they are not cacheable it takes more time to load the page. So make the Ajax part cacheable.
212 HTTP cookies are used for a variety of reasons such as authentication and personali156

zation. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

39

TIPS FOR .NET

153 Accessing DOM elements with JavaScript is slow so in order to have a more respon213

sive page, you should: - Cache references to accessed elements - Update nodes "offline" and then add them to the tree - Avoid fixing layout with JavaScript
154 Avoid unnecessary white spaces. Also avoid things that are not required. 214 155 Avoid nesting tables. In nesting tables the browser has to first read the whole HTML 215

and then he can design the Layout.

156 Always write your code in a very clean manner. It helps the browser to easily under216

stand the code and prepare the design accordingly.

217 Also setup GZIP compression on your web server. GZIP reduces the size of the named 156

files.
218 You can never cache the urls with query strings. So avoid using such urls so that they 156

can become cacheable and can decrease the load time.

219 Specify a character set in HTTP headers to speed up browser rendering. This is done 156

by adding a simple piece of code into your header: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
220 DNS lookups take a meaningful amount of time to look up the IP address for a host156

name. The browser cannot do anything until the lookup is complete. Reducing the number of unique hostnames may increase response times.
221 Inline images use the data: URL scheme to embed the image data in the actual page. 156

This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

40

TIPS FOR TESTING

222 Always use the cache control header. There are two aspects to this rule: 153

- For static components: implement "Never expire" policy by setting far future Expires header - For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests Now comes the step before the last step which is as important as an Implementation and thats the quality assurance / software testing. Generally many people who design a website for themselves do not perform software testing. But they dont know that if the software testing is not done and in case the user isnt able to perform any task properly will leave a very bad impression of the website. Also many times its that the view and the design of the website changes as the browser is changed. So software testing is equally important as developing the website. The tips you should keep in mind while testing a website are:
223 To test a software the Software Testing Life Cycle should be followed. It includes: 154

Requirement Analysis: => Activities Performed during this phase: - Identifies types of tests to be performed. - Gather details about testing priority and focus. - Identify test environment details where testing supposed to be performed. Test Planning: => Activities performed during this phase: - Preparation of test plan for various types of testing require to test the system - Preparation of testing tools useful during testing of the proposed system. - Effort required during testing the system - They will decide about resources and determining the responsibility given to them.

41

TIPS FOR TESTING

Test Case Development: => Activities performed during this phase: - Create test case, automation scripts etc. - Review the test case and test scripts - Create test data Test Environment Setup: => Activities performed during this phase: - Understand the requirement of the system, Environment setup for test and prepare a list for hardware and software requirement list for the test environment. - Setup test environment and test data. - Perform a smoke test on build. - They will decide about training if it requires for resources. Test Execution: => Activities performed during this phase: - Execute Test cases - Document test result and log defects failed cases - Map defects for test cases to RTM - Retest fixed defects - Track the defect to closure Test Cycle Closure: => Activities performed during this phase: - Evaluate testing cycle completion based on time, cost, software critical busi ness objective and Quality. - Prepared test matrix. - Prepared document for learning out of the projects. - Test result analysis to find out the defect distribution by type.

42

TIPS FOR TESTING

First and Foremost when the project arises to the QA team, The QA team develops the test plan and the Test cases according to which the testing will be done.
224 The basic things to be planned while developing the Test Plan are: 153

=> Scope of the Test => Test Strategy => Environment Requirement => Test Schedule => Control Procedure => Functions to be tested => Resources and responsibility => Deliverables => Suspension/Exit Criteria => Resumption criteria => Dependencies => Risks => Tools => Documentation
225 After creating the plan comes test case development. Test cases depends on the sce154

nario. And the basic format for a test case are: Test case ID , Unit to Test , Test Data , Expected Result , Actual Result , Pass / Fail and Comments.
226 After developing the test plan and test case, the design of the website should be 154

checked and it should not change in case of any browser. For that open the website in each and every browser to check the view of the website. Many tools are available to cross check the browser support like BrowserShots, IETester etc.
227 After checking the design, the actual testing starts i.e. the testing of the modules and 154

functionalities. The main levels of testing are: Non Functional testing and Functional Testing.

43

TIPS FOR TESTING

Functional Testing: => This is a type of black box testing that is based on the specifications of the software that is to be tested. => While undergoing functional testing 5 steps should be followed: o The determination of the functionality that the intended application is meant to perform. o The creation of test data based on the specifications of the application. o The output based on the test data and the specifications of the application. o The writing of Test Scenarios and the execution of test cases. o The comparison of actual and expected results based on the executed test cases. => Functional Testing includes following methods: o Unit Testing: This type of testing is performed by the developers before the setup is handed over to the testing team to formally execute the test cases. o Integration Testing: The testing of combined parts of an application to determine if they function correctly together is Integration testing. => Bottom Up Integration: This testing begins with unit testing, followed by tests of progressively higher-level combinations of units called modules or builds. => Top Down Integration: This testing, the highest-level modules are tested first and progressively lower-level modules are tested after that. o System Testing: This is the next level in the testing and tests the system as a whole. Once all the components are integrated, the application as a whole is tested rigorously to see that it meets Quality Standards. o Regression Testing: To verify that a fixed bug hasn't resulted in another functional ity or business rule violation is Regression testing. o Acceptance Testing: This is the most important type of testing performed by the QA team to check whether the system meets the requirements and specifications of the client or not.

44

TIPS FOR TESTING

=> Alpha Testing: Alpha testing is done by both the client and the QA team. It is a combination of unit testing, Integration testing and System Testing. => Beta Testing: This is final testing phase where company release the software for external use. Non Functional Testing: => Non-functional testing of Software involves testing the Software from the requirements which are non functional in nature related but important a well such as performance, security, user interface etc. => Non Functional Testing includes: => Performance Testing: It is generally done to check whether ther is any bottleneck or to check the performance of the system. => Load Testing: It is used to check the time taken by the website to load in any situation. => Stress Testing: It is used to check whether the system works properly or not in any abnormal situation. => Usability Testing: It is a black box technique and is used to identify any error(s) and improvements in the Software by observing the users through their usage and operation. => Security Testing: Security testing involves the testing of the Software in order to identify any flaws aid gaps from security and vulnerability point of view. => Portability Testing: Portability testing includes the testing of the Soft ware with intend that it should be re-useable and can be moved from another Soft ware as well.

45

TIPS FOR TESTING

228 Use of Selenium is advisable to test the web applications. Its a freeware software. Also 154

many companies prefer using Licensed Software i.e. QTP.

229 Use of Firebug is helpful in case of checking where and how the code is being applied. 154 230 While doing the testing of the code if some code isnt working, for a time being 154

removed it and then try to test the website. After that also if it doesn't work check the coding of the whole. And if it works check the coding on the part that wasnt working.
231 Also always select the exit criteria i.e. in which case will you stop your testing. There 154

are two criteria: one that the client gives the time limit and the other one is when the tester thinks that the system is totally bug free.

46