Podcast: Play in new window | Download
It can be really frustrating if you’re new to the design & development field either as a hobby or as a profession to know where to go for tips or advice in order further your skill set or just stay informed on industry trends. You’re probably already thinking, “You can use Google or some other search engine to find all the information or resources you need”. Well you’re right, but only partly. While Google and the majority of other search engines are great to hunt for information, it can be confusing as to which site offers what you really need or really want to know, especially if you are new to the industry. Odds are that the more experienced designers & developers that are listening already have bookmarks and RSS feeds galore not to mention are usually masters of the internet search, but there are so many excellent resources available we might just mention one or two you might have missed. Some of the resources we will mention are applications and others are websites, but all provide key functionality to improve your work flow and further your design & development skill set.
So without any further a-do, here they are in no particular order:
1. Web Development Toolbar by Chris Pedrick
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
View CSS (Disable or Enable Styles, Add or Edit Styles or View the Style sheet Information)
View Form nformation (Display Details, View Form Information Convert Form Methods & More)
Images (Outline, Show Paths, Broken Images, Dimensions, Alt Attributes & More)
Outline Elements (Frames, Tables, Links, Headings, Block Level Elements, Depreciated Elements, Positioned Elements and Even Custom Elements
Resize the Browser Window (By Standard Sizes, 800×600 or Custom Size)
Tools for Validation.
View Source
And More
Cost: Free
2. Pixie 3.1 from Nattyware
Pixie is a great little utility, fast and tiny it a perfect fit for Webmasters and Designers. Pixie is a color picker that includes a mouse tracker. If you see a color on a website, document, or any other source that you particularly like, run Pixie and simply point to a color and it will tell you the hex, RGB, HTML, CMYK and HSV values of that color. You can then use these values to reproduce the selected color where needed. Once you start using a color picker you won’t know how you ever lived without one.
Cost: Free
3. A List Apart
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. It is a huge resource with contributions by many well known and respected designers, technologists, programmers and more. It is a trusted source for quality commentary and discussion and they encourage contributions of high quality from anyone.
Cost: Free
4. Multiple IE
Ever wanted to test your website in various versions of Internet Explorer? Testing in multiple browsers is an important part of testing when developing websites, testing in multiple platform versions of Internet Explorer on the same machine used to be impossible without over-writing the previous version. Luckily in November 2003, Joe Maddalone overcame this over-writing obstacle by exploiting a known workaround to issues involving DLL called DLL redirection. “Manfred Staudinger perfected the standalone versions by adding IE version numbers to the title bar of the standalone browser window. Moreover, by removing the “IE” key in the registry Internet Explorer defaulted to respecting conditional comments based on the version number pre-built in the program.” Yousif Al Saif of Tredosoft created this handy installer which contains IE3 IE4.01 IE5 IE5.5 and IE6. Give this a try, I don’t think IE 5 should even be dignified with an install, but that would depend on your audience (people still running Windows98 that have never upgraded their IE). I can’t say that this tool works flawlessly but we have not had any issues to date and any problem identified can be sent to the developer who from what I see from their Blog is quite active and helpful in any debugging issues.
Cost: Free
5. Google Toolbar
Besides the option of always having a reliable search engine right in the browser, the toolbar contains a built-in pop-up blocker that works great and many helpful add-ons such as spell check, RSS subscribing with one click, instant Blog posting, using Blogger of course, word translation, Gmail integration, an info button that is useful for backlinks and probably most notable feature is the Google PR feature that is handy when you need to get a general idea of Page Rank for a website. These are only a few of the many features at a glance, while you might only use a few of these on your toolbar, the ones you do use make a difference in your browsing experience and workflow.
Cost: Free
6. Firebug
One of our favorite development and debugging tools that we use on a daily basis is Firebug. 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. I use this constantly and I honestly can’t give it enough praise. You have to give this tool a try if you’re a designer or a developer because it will definitely make your work life run smoother.
Cost: Free
7. Macromedia/Adobe Flashpaer 2
FlashPaper 2 allows anyone to convert printable files into Macromedia Flash documents or PDF files with one click. This is a great tool to create documents quickly and easily for clients or your websites visitors. We covered FlashPaper2 in one of our previous Podcasts if you want to hear more about the great features visit http://enginesofcreation.com/podcast/
FlashPaper2 is a great alternative to PDF, the text is crisp and the user interface is pleasing to the eye, easy to use and load time is a fraction of the time compared to .pdf. Some of the things you can accomplish with FlashPaper2 Instantly generate Flash documents that can be accessed by over half a billion web users, or transform files into secure, compact PDFs for e-mailing, archiving, and printing.
Cost: Free Trial – $79.00
8. Adobe Design Center
Complete with a “Think Tank” to see how today designers engages with technology. There is a focus on broader issues involving the relationships designers have with developing technologies, tools and the impact they have on society. This may sound more academic but is more or less how Adobe wants this to function. By reading through the articles you will get a sense of how designers & creative people are working with technology and design tools to bring attention to social issues, opening more creative avenues for the rest of us, and enhancement of daily life and media experience. As a designer it can be inspiring to think that you have the chance to function on a greater level than just make my website pretty. The Adobe Design Center also has a “Design Box” Section that focuses on motion graphics and tons of tutorials on how to use Adobe products.
Cost: Free
9. Adobe Developer Center
This is a great place to go for information in developing in anything from CSS, Flex, ColdFusion, Flash, XML and More. This side of Adobe is definitely geared to the developer with a focus on code, programming etc. If you are looking for a resource to learn, re-enforce, or build your knowledge there is plenty of information for all skill levels with links galore to articles and tutorials.
Cost: Free
Visit the Adobe Developer Center
10. Lynda.com
Lynda.com is an award-winning provider of educational materials for creative designers, instructors, students, and hobbyists. Lynda.com features an online training library full of training videos with exercise files with a large assortment of topics lead by ell know professionals in their respective fields. Courses are available online or available on CD or by Book. They are constantly adding new titles and do listen to user feedback when considering which topics to expand their training library with. Each “lesson” is very well recorded and broken into short sections usually 2-5 min in length, perfect attention span oriented time limits. Exercise files are available with different subscription levels and include everything you need to re-create the project (excluding software) and useful resource links mentioned in the video.
Cost: Free Trial – $200.00 a Year or $20.00 a Month
11. CSS – The Missing Manual
I really enjoyed this book and I find it to be an excellent CSS reference and recommend it for anyone looking to learn CSS or just up their CSS game in general. The book didn’t read like a manual, which is a good thing because god knows I read enough of those already. The author David McFarland combines realistic and crystal-clear explanations, real-world examples, a dash of humor, and dozens of step-by-step tutorials to show you ways to design sites with CSS that work consistently across browsers.
You’ll learn how to:
- Create HTML that’s simpler, uses less code, is search-engine friendly, and works well with CSS
- Style text by changing fonts, colors, font sizes, and adding borders
- Turn simple HTML links into complex and attractive navigation bars-complete with CSS-only rollover effects that add interactivity to your Web pages
- Style images to create effective photo galleries and special effects like CSS-based drop shadows
- Make HTML forms look great without a lot of messy HTML
- Overcome the most hair-pulling browser bugs so your web pages work consistently from browser to browser
- Create complex layouts using CSS, including multi-column designs that don’t require using old techniques like HTML tables
- Style Web pages for printing
Cost: $34.99
12. W3Schools
At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP. W3Schools is a free site dedicated to the learning of web practices. There are many tutorials offered in a wide array of subject matter related to web design. W3Schools also offers tests to measure your knowledge on a subject which may be followed up with a certificate exam at a low cost. This is a great way to develop a basic learning plan. The certification exam offered must be supervised, but you get to pick who that is, so your best friend is not a good pick, neither is your dog. I would try for an academic sort like a professor of computer science this will help to give your certificate more weight if you intend to use it as a job placement tool. W3Schools is not accredited so any certificate is worth more to you as a personal accomplishment, or to your employer as a measurement tool. W3Schools’ tutorials are recommended at over 100 universities and high schools over the world.
Cost: Free
13. Open Cube Infinite Menu
Sometimes it pays to have an excellent drop menu system that you don’t have to create from scratch for a client, especially if it is fully compliant and browser friendly to boot. Drop menus are notorious for being tricky to implement and buggy, not to mention search engines don’t always crawl them properly, until now. If a drop menu is needed we recommend Infinite Menus by Opencube.com. Infinite Menus is the only Zero JavaScript Pure CSS menu commercially available, our unique visual interface and optional scripted add-ons make site navigation a snap. Dual mode hybrid / pure CSS navigation is light-years ahead of the out-dated DHTML based drop downs still being offered by other software companies.
Here are just a few advantages…
- Naturally Search Engine Friendly without added markup.
- Fully accessible and 508 Compliant.
- Fully functional with or without JavaScript in all CSS2 browsers.
- Main menu functionality in non-CSS2 browsers without JavaScript.
- Zero load time, menu renders and functions immediately.
- Super tiny footprint is high traffic compatible.
Cost: Free Trial, $139.00 – $389.00
14. Istock.com
This massive collection of royalty-free images is an excellent resource for photographs, vector Illustrations, Flash files, and Video clips, it is free to join istockphoto.com, and the benefits of joining include a wonderful light-box feature that allows you to save items in folders to reference later. When working on projects you will find it particularly useful to create a light-box with the client’s name and save images there so that your design team can look at, add or delete items, this can be done from any location within a browser. You can also email you light-box to your clients so that they may view your selections, or create an account with a light-box for them to choose their own images. This can shift the workload over to the client and allow them to be more involved in their own project.
Image prices are reasonable, although there has been a recent change in the pricing format; they are 99% cheaper than rights managed stock photography websites. X-small images start at a dollar and go up to XX-Large for around 15 bucks. Anyone can apply to contribute images to iStock’s collection. You can apply to become a photographer, illustrator, or videographer. Once you are accepted, start uploading files, and earn royalties when your images are downloaded.
If you are a good photographer and want to earn some extra cash this is a great option.
Cost: $1.00 USD & Up
15. jQuery AJAX Library
jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript and we highly recomend it.
Cost: Free
16. Typetester
Typetester is an online application for comparison of fonts. The idea is to make your life as a designer easier when working with or choosing fonts. Typetester plans to update their common fonts as new fonts are bundled into operating systems. Knowing which fonts are system fonts is useful because using non-system fonts in a webpage leaves the font choice and control up to the fonts on the users system or user-style sheet. So although you are in love with Papyrus, your visitor may not have that font installed and may be seeing courier new. Typetester will also allow you to view the fonts you have on your local machine and compare up to three different fonts side by side in 12 different formats such as bold, italic, small caps italic, UPPERCASE, and more. You can adjust the type settings such as color, size, leading, tracking, decoration etc. Believe me this can save you a serious amount of fussing with fonts in your graphics program, especially in Photoshop.
Cost: Free
17. W3C Markup Validation Service
W3C Markup Validation Service is a free service that checks Web documents in formats like HTML and XHTML for conformance to W3C Recommendations and other standards. This is very useful and important to perform during development not just after the project is finished. You may also find it useful when debugging. The service is not perfect and does have some limitations when working with XML. There are always new technologies developing, and this is a lot to keep up with. If you realized the thought, discussion, and bickering that goes on when W3C panels discuss standards you would shake your head. Just read one of their papers on web standards, they are so dry that the paper they are printed on has to be flame retardant. This is not my style of reading, but the W3C has been bringing some conformity to the web, this make a developer’s life easier by creating a common set of rules. All we need now is for the major browsers to listen and play nice as well.
Cost: Free
Visit the W3C Markup Validation Service
18. W3C CSS Validation Service
Just as it is important to validate your XHTML pages it is just as important to validate your CSS. A great free validation service is the W3C CSS Validation Service, which will check your Cascading Style Sheets (CSS) and (X) HTML documents with style sheets. It will even give you a list of warnings so you can address potential issues before they arise. Remember, although validators find errors in your page’s source, they do no ensure that it will appear as you want in various browsers. It merely ensures that your code is without HTML or CSS syntax errors. Ensuring that your code appears correctly in different browsers require cross a lot of browser testing. To ensure that your website appears as you want in various browsers, you should test as you build in multiple browsers.
Cost: Free
Visit the W3C CSS Validation Service
19. ColorSchemer
There are a ton of Color Wheels on the web; Colorschemer does a good job of providing a useful tool that is not complicated or technical for the exploration of color for your projects. The full version is reasonably priced and there is a 15 free trial for you to evaluate. Colorschemer allows you to save selected colors as favorites, has a built in drag and drop tool to simulate a basic web site design, and you can share your color creations with other users by uploading them to the web. There are many features that you may use to your advantage. There is a color blindness simulator, color mixer, switch from color wheel to swatches, ColorSchemer will even give you suggestions for color schemes, and a lot of other bells and whistles put together in a nice user interface familiar to windows users. Have fun, share your colors and hopefully this makes your life a little easier.
Cost: Free Trial – $49.00
20. sIFR
Have you ever wanted to retain your non system composition fonts and avoid making them an image so the browser will render them properly?
Than sIFR is for you! sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS. sIFR is a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. That to me is worth its weight in gold. I have always hated being confined to system fonts or having to create images for headlines, which makes them time consuming to change and hard for search engines to index, not to mention throws semantic layout out the window. sIFR solves all these problems and is quite easy to implement . sIFR or Scalable Inman Flash Replacement allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses sIFR requires JavaScript to be enabled and the Flash plug-in installed in the reading browser. The really cool part is if either condition is not met, the reader’s browser will automatically display traditional CSS based styling – the user won’t know the difference.
That’s the part that makes sIFR a safe alternative to image headers or plane Jane fonts. Does this mean that you should use a font face that no one can read? Absolutely not, although sIFR can do it, you should always ensure that whatever font that you choose is legible and reasonable in its use. You wouldn’t want to use sIFR on a whole page for instance, it wouldn’t be efficient and system fonts are fine for your actual page content anyway.
If you want to add some style to your headers however, it can’t be beat.
Cost: Free
Online Resources
Resources for this entry and information pertaining to each resource was retrieved from the products or authors web site.
