Web Design for Dummy Extensions

Designing a web page used to be a simple matter of learning a few bits of HTML markup code, some color codes and pasting it all together. There wasn’t any need for “Web Design for Dummy” articles – it really was that simple. In the ten years since I got started in web design, there have been enormous changes, and while you can still get by with learning a few bits of HTML and some color codes, there’s so much more out there. You can add animations, create scrolling banners, use Flash to make your site interactive, combine your static pages with multiple databases and PHP or ASP to create dynamic pages on the fly – oops, did I just lose you?

The fact is that if you didn’t understand half of what I just said, you’re NOT a dummy. There’s so much to creating web pages and web sites these days that you could spend your entire life doing nothing but learning about the latest software and tools to make your web sites dynamic, exciting, interactive and useful. When it comes to web design, everyone is a dummy in some area, but there are some great Web Design for Dummy tools that can help you do your job without spending months learning each new trick. The Firefox browser offers some add-ons and extensions that no web designer should be without.

Web Design for Dummy Designers Tools
Colorzilla (https://addons.mozilla.org/firefox/271/) is my hands-down favorite. With a click, you can get the color code for any area on the page you’re viewing. The color-picker lets you find complementary colors, the measurement tool lets you check exactly how many pixels wide that box needs to be, and the DOM inspector shows you the structure of the web page that you’re viewing. It packs a ton of useful tools into a tiny little add-on for Mozilla Firefox.

Web Design for Dummy Developers Tool
One of the coolest tools in the web design for dummy toolbox is another Firefox extension – the Web Developer Add-on (https://addons.mozilla.org/firefox/60/). Web Developer lets you tweak pages in your browser without having to FTP and reload every time you make a tiny change. It adds a toolbar to your browser window so that you can easily check and change your CSS, forms and HTML without leaving the page.

The Ultimate Web Design for Dummy Validation Tool
Validation and web standards compliance deserves its own full Web Design for Dummy article, but here’s the in-a-nutshell explanation:

Not all web browsers display your pages in the same way. You can make sure that the page you put up will be seen the way that you designed it by making sure that you’re following the standards for web design set up by the WC3. “Validating” a page means checking it to see that all of your code is written right and that all of your links work. You can hop around to a dozen different places on the net that will validate your pages – or you can use this incredibly nifty web design for dummy validation tool: The Total Validator (http://www.totalvalidator.com/tool/extension.html) lets you check the validation of your pages for accessibility, html, broken links, spelling – even see what your page will look like in different browsers.

Web Design for Dummy Entrepreneurs
Make it easy to check your Google page rank, backlinks, keyword density, indexed pages in three different search engines – in short, just about everything you need to know to figure out just how well your pages are doing in the search engines. The SEOpen Firefox extension (http://seopen.com/firefox-extension/index.php) is one of the most comprehensive SEO tools I’ve seen anywhere. Install it, use it, love it.

These are the standouts in the Web Design for Dummy builders toolbox. You’ll find lots more Firefox extensions that offer flexibility, ease of use and nifty shortcuts to things that designers do every day – the easy way.