An eBook on Website Design and Development Tips

TIPS
WEB DESIGNIDEA WIREFRAME
++
WEBDESIGN
1

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

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
It’s okay if you can’t 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.
3

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 page
automatically.
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 registrar’s 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

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

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

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

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

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 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.
Learn where others are lacking and see where the vacuum is in ideas and implementa-
tion. You wouldn’t 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

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, we’re 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

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 people’s 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

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 in
which 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 project’s 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 Market
New Technologies like CMS
Innovative Neat/Clean Design
Collection of Audience’s Views
12

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 client’s 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

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
website’s 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 prepare
a user friendly design first and then feeding appropriate content in it.
44
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.
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 site’s overall impression on
viewer’s 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, project’s 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 don’t want to go for any of these, one option is always
there – pencil and paper.
45
46
47
48
49
15

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.
Don’t 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 user’s mind with some new fea-
tures.
Be innovative, but don’t 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

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 don’t 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. 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.
57
58
59
60
61
17

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

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; it’s everything that you provide to the viewer on your site.
TEXTUAL
DATA + + + +
{
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 User’s 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

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

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 client’s project. If you are working on self initiated project, make sure you take
good care of things needed in copyright. The scenario with the client’s 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 client’s 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 vari-
ous states have different legal clauses.
73
74
75
21

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.
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. 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 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.
Never forget to close tags. If the tag doesn’t 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

Also always use alt and title attribute for images so if the image doesn’t get displayed
on the client’s 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 shouldn’t 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 <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.
87
88
89
90
91
92
93
94
95
96
97
98
24

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

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 doesn’t 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

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

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

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.
Don’t 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

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

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

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

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 it’s 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. This
saves 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

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

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

TIPS FOR PHP
Do not open and close many <? php … ?> 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
<?PHP
?>
36

TIPS FOR .NET
You should avoid using Ajax because of the following reasons:
- The coding and debugging complexity gets increased.
- Many web browsers don’t 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

TIPS FOR .NET
TIPS
Data 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 Google’s 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 rather
than 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 <script> 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

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 today’s 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 that’s 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

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:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
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

Always use the cache control header. There are two aspects to this rule:
- 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 Implemen-
tation and that’s the quality assurance / software testing.
153222
Generally many people who design a website for themselves do not perform software
testing. But they don’t know that if the software testing is not done and in case the user
isn’t 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 to
them.
154223
41
TIPS FORTESTING

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

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 FORTESTING

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 FORTESTING

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

Use of Selenium is advisable to test the web applications. It’s 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 isn’t 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 wasn’t 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
46
TIPS FORTESTING

An eBook on Website Design and Development Tips

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (6)

Dernier

Dernier (20)

An eBook on Website Design and Development Tips