Having a good collection of really useful resources is one of the characteristics that differentiate professional web designers from the rest.
First of all, it is essential to install several extensions related to web design in the Firefox browser. All of these extensions make it easy to work, help you quickly discover the cause of design errors, and generally improve designer productivity.
In addition, it is always necessary to have several page galleries as a source of inspiration and collections of links to good resources related to web design. Lastly, it is also necessary to keep abreast of the latest techniques and novelties through websites and blogs dedicated exclusively to web design.
If you dedicate yourself professionally to the design of pages and web applications, surely your preferred browser to work is Firefox. If you do not know it, you can download Firefox for free from its official website: http://www.mozilla.com/firefox
The main advantages of Firefox from the point of view of the designer and creator of web pages is that it respects W3C standards much more than browsers in the Internet Explorer family. In addition, it allows to install small additions, called extensions, that add functionality to the browser.
An extension can be considered as a small program that is installed inside the browser and that adds some interesting feature that the browser does not incorporate as standard. The best thing about Firefox extensions is that there are hundreds of extensions, practically all are free and almost all are really useful.
The Firefox website includes a special section called “Add-ons” in which you can find the complete list of extensions available for Firefox. Below is a small selection of some of the most interesting extensions for web designers.
As Firebug has so many options, it would take a whole book to explain its possibilities. Therefore, it is best that you install the extension and try it on your web projects.
Probably, after several months of using Firebug, you will continue to discover new and useful options and you will continue to thank its creator for the hours of work that have saved you.
14.1.2. Web Developer
Before Firebug existed, the Web Developer extension was the most useful for web designers. It is a bar that is installed along with other browser tools and can basically be used to get information about the page:
In addition to providing information, the Web Developer extension includes utilities that Firebug does not yet incorporate, such as resizing the browser window to the most used dimensions, recuadrar all elements of a certain type (table cells, divs, etc.) Display a magnifying glass, a resizable ruler, display type elements
hidden, show the path of each image, etc.
14.1.3. HTML Validator
A good practice, and a requirement imposed by many clients, is for the XHTML pages created to be valid and therefore pass the HTML and CSS validator available in the W3C. To facilitate the validation of the pages, the HTML Validator extension always indicates errors and recommendations on the HTML code of the page that the browser displays.
14.1.4. Other extensions
- ColorZilla : it allows to obtain the color of any element of the page by means of a tool similar to the one of the graphic design programs.
- MeasureIt : allows you to measure the height and width of any page element.
- Screengrab : Allows you to save an entire page as an image. Thescreenshots ( “screenshots” ) can also be made from a specific part of the page or the visible content in the browser window.
- IE Tab : allows to display with Internet Explorer any page loaded in Firefox. The integration with Internet Explorer is total, since it does not even need to open that browser.
Here are some web applications that may be useful for the CSS designer:
- Clean CSS : optimizes, sorts, cleans, corrects and reduces the size of style sheets.
- Typetester : allows you to easily compare different fonts and properties related to typography and text.
- Browsershots : shows how the same web page is viewed in different browsers of different operating systems (55 browsers in total). The use of the application is free and you can view and / or download the images that show the appearance of the page in each browser.
- Stripe Generator : allows you to easily generate ready-made images to be repeated in all directions correctly and therefore, so that they can be used as background images.
It is often useful to have good examples of pages designed entirely with CSS to take as reference and possible inspiration from the designs themselves:
- Web Creme : includes daily several examples of the best pages designed with CSS and allows to search from the color used in the page.
- CSS Remix : displays hundreds of pages designed exclusively with CSS and with the possibility of punctuating its design.
- CSS Zen Garden : is a gallery different from the traditional, but has become a reference in terms of complex designs made using CSS.
- Open Source Web Design : website that offers hundreds of free templates with possibility to use them freely in personal and commercial applications.
References and resource collections
- Official CSS 2.1 specification : that includes all current browsers.
- Official specification of CSS 3 : the version that is replacing the previous one in all modern browsers.