An eBook on Web Designing and Development Tips

8/22/2019 An eBook on Web Designing and Development Tips

1/46

WEB DESIGNIDEA WIREFRAME

1
http://www.truevisiontech.com/https://plus.google.com/113695934211553001675/postshttps://twitter.com/tvtllchttps://www.facebook.com/TrueVisionTech


2/46

INTRODUCTION

2

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 DesigningDealing 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

3

4

5

7

10

12

14

15

17

19

21

23

26

31

36

37

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Page No.Title

4118 Tips For Testing
http://www.truevisiontech.com/https://plus.google.com/113695934211553001675/postshttps://twitter.com/tvtllchttps://www.facebook.com/TrueVisionTech


3/46

DESIGN TIPS

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

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 innova-tive 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.

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 domainselection.

3
https://plus.google.com/113695934211553001675/postshttps://twitter.com/tvtllchttps://www.facebook.com/TrueVisionTechhttp://www.truevisiontech.com/


4/46

DOMAIN NAME TIPS

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

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 pageautomatically.

1

2

3

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.

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.

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.

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.

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.

4

5

6

7

8

4
http://www.truevisiontech.com/https://www.facebook.com/TrueVisionTechhttps://twitter.com/tvtllchttps://plus.google.com/113695934211553001675/posts


5/46

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 band-

widths. 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 dedicatedhosting 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 com-

mercial 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 get-

ting good returns.

9

10

WEB HOSTING & DEVELOPMENT PLATFORM TIPS

5


6/46

In case you already have a host, you can check its performance by certain tools avail-

able 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.

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 neces-

sary to have testing environment that will run PHP and MySQL on local PC. One of the

solutions may be to install XAMPP.

11

12

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. How-

ever, 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

WEB HOSTING & DEVELOPMENT PLATFORM TIPS

6


7/46

DESIGNING TOOLS TIPS

Decided about the Development Part, what comes next?

You need to get a bunch of tools for DesigningMost of the beginners think that having Adobe and Microsoft products is necessary to pro-

duce 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.

You can use tools for Source Code Editing and WYSIWYG modifications such as Note-

pad ++, jEdit, BlueGriffon, SeaMonkey, Amaya, CSSED, Quanta Plus, NiceEdit, OPEN

BAXI HTML Builder, KompoZer, Adobe Dreamweaver etc.

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 pro-

jects. 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.

16

17

18

DESIGN

TIPS

7


8/46


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.

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 cer-

tain operation which you would not have thought of in first place.

19

20

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

8


9/46

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. Sub-

scribe to reputed journals and buy some magazines. Study design blogs on a regular

basis. And bookmark the information you find necessary.

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.

Make a practice of verifying what you 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 cer-

tainly can design a site which is distinctive in nature.

All you have to do is to keep your mind and heart open. A great idea of the website mayspark 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.

Learn where others are lacking and see where the vacuum is in ideas and implementa-

tion. You wouldnt have to face much competition and you can rule the market by pro-

viding services which are different from others.

21

22

23

24

25

26

27

T


9


10/46

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 Re-

search

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.

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 any-

thing he wants. This is exactly why Research on Target Audience is very important for

every project you get.

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 con-

tent changes accordingly.

See what age group and professionals are targeted by the client. Learn everyday rou-

tines, hobbies and regular activities of that group and link it with your ideas. General-

ized sites have different ideas in root while specific sites have different ones.

28

29

30

10


11/46

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.

With all this, you also have to take care that you are not drawing too much into repeti-tion. 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 tem-

porary 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.

31

32

33

34

COMPETITOR ANALYSIS & TARGET AUDIENCE RESEARCH

11


12/46

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.

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 inwhich you can deliver optimum work? Define a particular environment of work or a suit-

able 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.

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 qual-

ity 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.

35

36

37

38

39

Competitors Websites

Clients Requirements

Concerntrate on Subject

New Trend in MarketNew Technologies like CMS

Innovative Neat/Clean Design

Collection of Audiences Views

12


13/46

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 con-

nectivity.

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.

Security applies more to back end database handling. Make sure it is encrypted. Stor-

ing a password in a plain text can be a threat to your precious customers.

40

41

42

43

SIT & PLAN FOR HOW EXECUTE THE THINGS

13


14/46

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.

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 web-sites 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.

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 preparea user friendly design first and then feeding appropriate content in it.

44

14


15/46

CONCEPT BUILDING

What comes after Planning? How to begin Implementation?

It starts with Concept BuildingA 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.

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 sub-categories in each of these. You have to look into your brain for the better and state-of-

the-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 onviewers 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 hasan 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.

45

46

47

48

49

15


16/46

After you are done with the brainstorming process, you would have come to a conclu-

sion 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 fea-

tures.

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. Fol-

lowing 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.

50

51

52

53

54

55

CONCEPT BUILDING

concept

building

16


17/46

Store your ideas. Most people do the mistake of throwing away the rough sheets con-

sidering 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.

56

INFORMATION ARCHITECHTURE & SITE MAP

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 infor-

mation 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.

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 Navi-

gation is one of the most important things to consider for an ecommerce website. Forinformation 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.

57

58

59

60

61

17


18/46

INFORMATION ARCHITECHTURE & SITE MAP

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 Navi-

gation 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.

62

63

64

65

66

18


19/46

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 mem-

bers, 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 develop-

ment.

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.

TEXTUALDATA + + + +

{ACTUAL DESIGNING INCLUDES ABOVE SEGMENTS

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 knowl-

edge 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.

67

68

69

19


20/46

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.

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.

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.

70

71

72

ASPECT OF ACTUAL DESIGNING

20


21/46

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.

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 copyrightobtaining.

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 vari-

ous states have different legal clauses.

73

74

75

21


22/46

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.

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 fea-

tures. Using licensed products illegally may invite trouble. The best option is Open

Source Technologies are available. They can keep you safe from future troubles.

76

77

78

After the planning and gathering every important information

and decision lets start with the Implementation.

Dealing With Copyrights & Legal Content Issues

22


23/46

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. Imple-

mentation 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:

Always use DOCTYPE at the beginning of each and every HTML or (X)HTML pagesas 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.

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 diffi-

cult for the client to understand the source of the images. Always create a separate

folder for the images.

79

80

81

82

83

84

85

86

23


24/46

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 vis-

ited. So always make the links color change after visited.

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.

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

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.

87

88

89

90

91

92

93

94

95

96

97

98


24


25/46


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.

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.

Avoid using images as links. Always use text to display a link.

99

100

101

25


26/46

IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT

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 func-

tions and CSS.

Also always use a link tag to link the pages with the current page to use the CSS and

Javascript.

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.

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.

Also the CSS properties common to a specific tag or a group of tags whenever used

can be written on a tag based CSS.

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, multi-

media text or input tag.

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; }

102

103

104

105

106

107

108

26


27/46

Never use 0px while writing the pixel size. Always write 0.

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;}

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;}

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.

109

110

111

112


27


28/46

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

as link styles.

Validating your HTML and CSS files will help in reducing errors and figuring out where

a problem might be coming from.

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 writingthe 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 mis-

take 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.

113

114

115


28


29/46

COMMON TIPS

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

make use of session.

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

Dont put bad comments or excessive comments like

####################################... or /////////////////////////////////...

Set a password for the database for the security purposes.

Also always encrypt the passwords and then store them in the database. And during

access decrypt them and then use them.After the installation/configuration software, delete setup/installation files & folder.

Use comments as they are the friends of the developers. They make it easier for the

developer to understand the code.

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.

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.

116

117

118

119

120

121

122

123

124

29


30/46

COMMON TIPS

Always initialize the variables to a sensible value when declared.

If you are using a Boolean variable always initialize it to false.

Never use +1 and -1 to increment or decrement the value of a variable in a loop.

Always use the ++ or sign.

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

sion of a variable with its own value. Example

In place of writing i = i+1;

you should always write i+=1;

Always use as much less sql queries as possible.

125

126

127

128

129

30


31/46

TIPS FOR JAVA

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)

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.

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.

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 read-

able, less error prone and also improves the maintainability of the code.

130

131

132

133

134

31


32/46

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.

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.

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 program-

mer but will also reduce addition new bugs in your code due to your code. Also using

a standard library makes code readable and maintainable.

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.

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 = 0; )to reduce the number of accesses to the limit variable.

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.

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

a specific package.

135

136

137

138

139

140

141

TIPS FOR JAVA

32


33/46

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.

Imported classes should always be listed explicitly.import java.util.List; // NOT: import java.util.*;import java.util.ArrayList;import java.util.HashSet;

Variables must never have dual meaning.

Whenever possible declare methods as final as they are better handled by the JVM

which increases the performance.

Always comment before declaring a variable / method (except main) or a class.

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 begin-

ning and never be used its a total waste of memory.

The incompleteness of split lines must be made obvious. For example:SetText ("Long line split" + "into two parts.");

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.

Complex conditional expressions must be avoided. Introduce temporary boolean vari-

ables instead

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. Thissaves a lot of memory. In Java this mechanism can be achieved by declaring the vari-

able private and its corresponding getter method public.

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 rec-

ommended to use primitive data types rather than using a wrapper class.

142

143

144

145

146

147

148

149

150

151

152

TIPS FOR JAVA

33


34/46

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

execution.

Never use GOTO statement.

Every time when you use a binary operator leave a space before and after it.

Opening and closing braces must line up, either horizontally or vertically.

Generic variables should have the same name as their type.

Variables with a large scope should have long names, variables with a small scope can

have short names

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

weight components whereas APPLET contains heavy weight components.

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

constants.

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.

Strings should be used with high care as they can affect the performance of the pro-

gram.

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.

To increase the performance of the system always appropriate classes must be used.

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.

In comparison to vectors, arrays are very fast.

Static variables or methods must always be referred through the class name and never

through an instance variable.

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

TIPS FOR JAVA

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

execution.

Never use GOTO statement.

Every time when you use a binary operator leave a space before and after it.

Opening and closing braces must line up, either horizontally or vertically.

Generic variables should have the same name as their type.

Variables with a large scope should have long names, variables with a small scope can

have short names

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

weight components whereas APPLET contains heavy weight components.

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

constants.

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.

Strings should be used with high care as they can affect the performance of the pro-

gram.

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.

To increase the performance of the system always appropriate classes must be used.

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.

In comparison to vectors, arrays are very fast.

Static variables or methods must always be referred through the class name and never

through an instance variable.

153

154

155

156

157

158

159

34


35/46

TIPS FOR JAVA

Always generate JAVA BEANS automatically from the XSL files in J2EE applications.

Never use deprecated classes/methods.

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.

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).

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.

168

169

170

171

172

35


36/46

TIPS FOR PHP

Do not open and close many Tags as it reduces the speed of execution.

Always use $_REQUEST in place of $_POST or $_GET.

Use PHP standard functions in place PCRE functions like use str_replace () function in

place of preg_replace function () as it increases the speed and optimizes the code.

For security purpose always set the access permissions of the files to read only.

Always use echo in place of the print function.

Use require & require_once instead of them include & include_once.

Put your short PHP codes into an html file. Not PHP file.

Use session_unset and session_destroy after usage of session(Not just

session_destroy!).

Always write your configuration settings in different files and then include them at the

beginning before starting the script.

Always use quotes while accessing the array keys.

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

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

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

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

153

154

155

156

157

158

159

180

181

182

183

184

173

174

175

176

177

178

179

36


37/46

TIPS FOR .NET

You should avoid using Ajax because of the following reasons:

- 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

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

should only contain visual elements like HTML/XHTML.

Directives must be declared only at the starting of the Asp.Net Web Form page.

Master pages should be used to create a consistent layout of the website.

Also if there is something common in some pages of the website already having a

master page, you can create nested master pages

Commonly used page elements should be placed in separate controls to avoid dupli-

cation of code, facilitate code/component reuse, improve maintainability, and caching

effectiveness.

Server side validation should be performed on each user input.

When the complete page cannot be cached, use fragment caching.

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.

Data that is frequently used but changes infrequently is cached using ASP.NET Cach-

ing

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 ena-

bled only for individual controls wherever required and not for the whole website.

View state should not be enabled for data bound controls.

153

154

155

156

157

158

159

192

193

194

195

196

185

186

187

188

189

190

191

37


38/46

TIPS FOR .NET

TIPSData Grid is deprecated so should not be used.

Objects should not be stored in session state.

There should be error reporting pages to display http error codes.

The database connection string should always be in encrypted form for the security

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:

Compress the images. We can use Googles Page Speed plugin to compress the

images and then save the compressed images and then re-load the compressed

image in place of the current image.

After compressing the image scale them to proper pixel size as specified in the web-

site.

You should use the browser caching as it stores the static content which speeds up the

speed of the website.

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 ratherthan loading many images separately.

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 tag. If defer attribute

is set to value defer, it loads the javascript at the end of loading the HTML page.

153

154

155

156

157

158

159

204

205

197

198

199

200

201

202

203

38


39/46

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

resources available on the internet to minify the JS, CSS and HTML.

One more alternative to decrease the load time is to combine the JS and CSS pages

as it takes much time to load them separately.

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

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.

Content delivery networks or, CDNs are vast networks of servers that are housed

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.

Packing components into a multipart document is like an email with attachments, it

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).

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user

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.

HTTP cookies are used for a variety of reasons such as authentication and personali-

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.

153

154

155

156

206

207

208

209

156210

156211

156212

TIPS FOR .NET

39


40/46

TIPS FOR .NET

Accessing DOM elements with JavaScript is slow so in order to have a more respon-

sive page, you should:

- Cache references to accessed elements

- Update nodes "offline" and then add them to the tree

- Avoid fixing layout with JavaScript

Avoid unnecessary white spaces. Also avoid things that are not required.

Avoid nesting tables. In nesting tables the browser has to first read the whole HTML

and then he can design the Layout.

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

stand the code and prepare the design accordingly.

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

files.

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

can become cacheable and can decrease the load time.

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

by adding a simple piece of code into your header:

DNS lookups take a meaningful amount of time to look up the IP address for a host-

name. The browser cannot do anything until the lookup is complete. Reducing the

number of unique hostnames may increase response times.

Inline images use the data: URL scheme to embed the image data in the actual page.

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.

153

154

155

156

213

214

215

216

156217

156218

156219

156220

156221

40


41/46

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

-

For static components: implement "Never expire" policy by setting far future Expiresheader

- 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 Implemen-

tation and thats the quality assurance / software testing.

153222

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 web-

site.

The tips you should keep in mind while testing a website are:

To test a software the Software Testing Life Cycle should be followed. It includes:

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 tothem.

154223

41

TIPS FOR TESTING


42/46

Test Case Development:


- Create test case, automation scripts etc.

- Review the test case and test scripts

- Create test data

Test Environment Setup:


- Understand the requirement of the system, Environment setup for test andprepare 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:


- 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:


- 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


43/46

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.

153224 The basic things to be planned while developing the Test Plan are:

=> 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

After creating the plan comes test case development. Test cases depends on the sce-

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.

After developing the test plan and test case, the design of the website should be

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.After checking the design, the actual testing starts i.e. the testing of the modules and

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

Testing.

154225

154226

154227

43

TIPS FOR TESTING


44/46

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 bytests 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


45/46

=> 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 thesoftware for external use.

Non Functional Testing:

=> Non-functional testing of Software involves testing the Software from therequirements 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


46/46

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

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

Use of Firebug is helpful in case of checking where and how the code is being applied.

While doing the testing of the code if some code isnt working, for a time being

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.

Also always select the exit criteria i.e. in which case will you stop your testing. There

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.

154228

154229

154230

154231

TIPS FOR TESTING

An eBook on Web Designing and Development Tips

Documents

Transcript of An eBook on Web Designing and Development Tips