An eBook on Website Design and Development Tips
Upcoming SlideShare
Loading in...5

An eBook on Website Design and Development Tips



A handy guide with 250 most useful and creative tips for effective web designing and web development..

A handy guide with 250 most useful and creative tips for effective web designing and web development..



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    An eBook on Website Design and Development Tips An eBook on Website Design and Development Tips Document Transcript

    • 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, is less preferable. 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 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 or for sub folder pattern, like You can go for Domain Hacks like (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, 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
    • DESIGNING TOOLS TIPS 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 DESIGNING TOOLS TIPS 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
    • 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 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. Dealing With Copyrights & Legal Content Issues 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 IMPORTANT TIPS WHILE USING HTML 24
    • IMPORTANT TIPS WHILE USING HTML 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 IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT 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 IMPORTANT TIPS WHILE USING CSS & JAVASCRIPT 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: => Activities performed during this phase: - Create test case, automation scripts etc. - Review the test case and test scripts - Create test data Test Environment Setup: => Activities performed during this phase: - Understand the requirement of the system, Environment setup for test and prepare a list for hardware and software requirement list for the test environment. - Setup test environment and test data. - Perform a smoke test on build. - They will decide about training if it requires for resources. Test Execution: => Activities performed during this phase: - Execute Test cases - Document test result and log defects failed cases - Map defects for test cases to RTM - Retest fixed defects - Track the defect to closure Test Cycle Closure: => Activities performed during this phase: - Evaluate testing cycle completion based on time, cost, software critical busi ness objective and Quality. - Prepared test matrix. - Prepared document for learning out of the projects. - Test result analysis to find out the defect distribution by type. 42 TIPS 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