UX/UI Designer and Front End Developer
Mozilla Firefox is becoming more & more popular among web-developers now-a-days because of it’s huge collection of add-ons. These add-ons, if used in appropriate manner can help a web-developer in making certain things easier. Some add-ons are just inevitable for a web-developer. Error checking, optimizing the page, validation, etc are certain processes which are necessary to be done and are painful & time consuming. So I am discussing 15 most important add-ons which I recommend all web-developers should install along with their Mozilla Firefox web browser.
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
The Web Developer extension adds various web developer tools to the browser in the form of toolbar. Each menu item in toolbar consists of relevant options helpful for web-developers like analyzing, validating and optimizing web-pages, etc. The great thing about this plugin is that it’s on a few different browsers, so if you switch between them you will be able to use the same plugin on all.
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon. It gives option to choose the algorithm to be followed while validating the html. The algorithm may be HTML Tidy, SGML Parser or Serial Algorithm. HTML Tidy is an algorithm designed for checking the HTML, XHTML Syntax. SGML Parser Algorithm is based on DTD. Serial Algorithm executes first SGML Parser & then if no error, HTML Tidy. Both have their own advantages and disadvantages. The algorithm is choosed on the basis of requirements of the developer.
Whenever there is an error in a webpage, it is shown on the bottom right of the screen as:
When we double click the error the Mozilla page opens showing the errors & warnings along with the line number, column number, etc.
Error rectification is done.
It is displayed in this manner.
FireShot captures webpage screenshots entirely. It captures entirely, edits and saves the webpages.
This add-on draws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
When we click on the icon, it displays the information regarding color in this format. Also saves the value in clipboard for future reference.
These are various options available in ColorZilla.
ColorZilla works as Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
With ColorZilla one can get a color reading from any point in the browser, quickly adjust this color and paste it into another program. One can Zoom the page he/she is viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients.
FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!
With this tool we can easily see how a web page displayed in IE with just one click and then switch back to Firefox. When we right click on a webpage, “View Page in IE Tab” option comes which when clicked the page opens in IE.
YSlow analyzes web pages and suggests ways to improve their performance based on Yahoo!’s rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. It completes FireBug functionality to make Firefox an unbeatable web development tool.
This add-on allows us to customize the way a web page displays or behaves, by using small bits of JavaScript.
This add-on help developers, researchers and designers to find out what technologies web pages are using which may help them to decide what technologies to they have to implement.
This add-on draws a grid on top of a website which is useful for checking designs that are supposed to follow a grid-based layout.
Right click anywhere on a website, and go to GridFox > Toggle Grid.
In the bottom right, we see some buttons to help create, edit and save a grid. We also see some arrows which let us browse any existing grids for the site we’re looking at.
GridFox
Here we can set the options as per our requirement.
GridFox
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.
Select a particular element and right click the mouse. Select Font Finder > Analyze Selection or other option desired and outpt will be displayed.
Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager with crash recovery that can save and restore combination of opened tabs and windows.
The Browser Window Resizer is useful for testing a webpage in different screen sizes. It accurately resizes the browser so that we can see how a web page looks in different standard resolution sizes like 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.
This add-on resizes the browser to various standard resolution sizes.
Designing is one of the most important thing to consider in a website. Rich look and feel of a website attracts more and more visitors. Login forms play a very crucial role in a website. The more interactive, understandable and better looking a login form is, the more a visitor is interested in engaging with it. There are a few common elements in it, username/email and password fields, forgot password link, sign up link and a login button. Innumerable websites these days provide registration and login systems that allows the user to further navigate website securely. If you are looking to create your own login system, creating a clean, easy and elegant login form has become a must to stay caught up with the latest trends of web design.
So today I have compiled a list of Login Pages for your inspiration…TAKE A LOOK!!
Nowadays internet has become such a vital part of our life that from waking up in the morning until sleeping at night we are connected to the whole world through it either on our personal computer, mobile or I-pad etc. Viewing from the perspective of branding and enhancing our business through internet via a website is the need of the era. Popularity in a certain field socially is counted a lot.
Even a child today asks any enquirer to refer internet. If a child finds any person asking about some product, or some service provided by a certain enterprise or organization, he/she without a second thought asks the person to google it. Whats this?? Today internet has flourshed so much that every information someone wants is there on internet. So internet is a very good medium to enhance our business with the changes going on these days in our society.
To make full utilization of internet for enhancing our business, certain points are required to be kept in mind always. Because an idea gives us profit only when it Is used in a positive manner and with perfect planning about all the things.
A website is mirror to any business. Every aspect of a particular business should be represented in such a manner that the first glance of your website may tempt the user of your website to navigate it properly. It should be designed and developed keeping in mind each and every small thing related to our business so that the user in very friendly manner gets the appropriate information & is not misguided in any way. Through this only we can develop trust which is the key ingredient to develop long term relationship with them. Customers nowadays are in very hurry. They just want instant results these days. Delay of even 2-3 seconds can cause loss of a customer. So keeping in mind their requirements & needs and serving accordingly is very essential.
So I am here in this article trying to incorporate summary of several points which should be kept in mind before taking the decision to give our business shape via a website.
1) Determine the prime purpose of your website:
According to the type of business the type of website varies. In case of a firm trying to sell its products we have to make an e-commerce website which includes all the products available in that firm along with the prices, shopping cart is included and payment gateway is also required to be integrated. Web portals or blogs can be made.
2) Requirements:
A website is integration of designing , developing, database programming, flash & javascript programming, marketing of website, SEO integration at one place. So to build a good website specialized personnels are required. In web market nowadays many tools are available using which we can ourself make our website after knowing some basics like wordpress but to develop a well established website one requires to hire some professionals and it incurs money to the business. But if our business is successful online, it’s an asset.Nowadays outsourcing is done. So we should decide properly whether we have to do our work on our own or to outsource it.
3) Keen analysis of business and division into logical sections:
In case of small scale business a website of 5-6 pages can work well but in case of large scale and big business organizations in which various departments are there, proper division should be mirrored in the website too. So for that proper functioning of a particular business should be analyzed properly and web pages should be decided according to that only. The process of doing business should be identified properly.
4) Building an appropriate navigation system:
A proper distribution of all the pages and links to those pages (navigation system) should be made so that it’s easy for users to access what they want on your website. Home page should be designed in such a way that links for every page in our website should be from home page only. It should not look so messy that it is difficult to understand for the user where to click and how to reach a particular page. The top menu, left menu, right menu, bottom menu should be well maintained. Search box should be there.
5) Innovative designing:
Rich look and feel to a website is very necessary to entice our users. The placement of each and every pixel at the required place is very important. New innovative designing idea, Use of proper color combination, Pixel perfect website,
Typography, etc. are to be kept in mind.
Website should be easily reponding. It should consist of optimized images & other content so that it may not take much time to open particular pages due to which user gets irritated. It should be fast & must give quick responses to the users.
6) Search engine friendly website:
SEO work starts at the designing level only. Well skilled web designers nowadays design SEO friendly website keeping in mind all the tips & tricks to make the website easily searchable. Proper tags, metatags, headlines are used. Flash & javascript programming is used less. Frames should not be used. Such things should be kept in mind and well skilled professionals should be hired for this work.
7) Content writing:
The content is very important for a website promotion. Good content attracts users quickly and it is important to develop trust in the users. Content makes a website search engine friendly too if it consist of keywords properly. All the copyright rules should be kept in mind. The content should not be copied from somewhere. It should not include defamation about any one or any organization. Copyright & trademark concerns should be kept in mind to avoid any legal ambiguities in future regarding domain name, pictures and content of a website.
8) Interactive and user understandable communication
Proper communication with the users of the website is very necessary for making our business successful. In case of queries from the user, proper response should be there. Enquiry forms should be made in interactive and understandable manner. Contact Us should include proper address of the firm, contact number & e-mail address so that proper communication can be made. Nowadays Instant Chat System, Instant Messaging System, Forums are maintained to let the user know true & proper information.
9) Development of the website:
Here design functions & operations are described in detail. Screen layouts, business rules, process diagrams and other documentation are described & the output describes the new system as a collection of modules or subsystems.
Design elements describe the desired software features in detail, and generally include functional hierarchy diagrams, screen layout diagrams, tables of business rules, business process diagrams, pseudocode, and a complete entity-relationship diagram with a full data dictionary. These design elements are intended to describe the software in sufficient detail that skilled programmers may develop the software with minimal additional input design.
10) Testing of the website:
Before publishing our work, we need to do the testing. We should get our website tested by a layman who has basic knowledge of computer and internet, observe him while navigating our website carefully so that we may know where he is finding difficulty. We should note all the points. Unit, system and user acceptance testings are often performed. After testing we should immediately go for the changes required in our website.
11) Maintenance of the website:
Modifications done in website after implementing the idea to correct faults, improve performance and other attributes is very important aspect.
From time to time we should upgrade the technology used in our website to pace up with the current scenario in IT industry. The content and products should be updated frequently so that users of website get proper information regarding what we deliver.
I have tried to cover all the points one should keep in mind while making a website for their business. Will try to cover these points in details in forthcoming articles. Hope these points may bring success to your business for a long term.
