Mozilla’s Light-Weight Web Design Tools

Categories Articles

Without any doubt, during the past five years, Google Chrome has emerged as the dominant force in the browser war for desktop users and (obviously) mobile users alike.  Developers, on the other hand, being more tech-savvy and security-conscious than the average user, have a tendency to prefer Firefox.  Indeed all security-focused distros feature Firefox as the browser of choice rather than Chromium, even though the latter is also open source and free in every sense of the word.

Fortunately the adherence to web standards means that the browser most developers are using is mostly compatible with the browser most ordinary users are using.  This is important because it means something developed in Firefox is 99% of the time going to work flawlessly in Chrome.  Internet Explorer is no longer a priority for most developers because it’s seen as a fringe browser only used to download other browsers for installation.  Nobody at present seems to be taking Edge very seriously either.

Security and privacy are not the only reasons to like Firefox, however.  Firefox has always been mostly a community-driven project (though, just like Wikipedia, the “community” has been becoming increasingly snooty and self-righteous),  and improving the user experience is at the heart of the community development model.  To put it another way, community-based projects can be expected to put the needs of users first.  Corporate projects can be expected to put the needs of corporations first.  What it means for you as a developer is that there is an abundance of free tools at your disposal to help make your job easier, and in general those tools are easier to use than most non-free alternatives.

1. Thimble

Thimble is primarily meant to be a tool for learning HTML, but because it is a full-featured HTML and CSS editor, it’s actually quite handy for bashing out a quick solution and then copying the resulting HTML to a file for uploading to your server.  It works a lot better than CPanel’s code editor, because it doesn’t do any annoying ghosting and doesn’t treat every apostrophe in your text copy as a string delimeter.

The interface is divided into two panes, as you’d expect, with the code pane on the left and the preview pane on the right.  There are three preview modes available:

  • Desktop
  • Mobile
  • Full Screen

In the third preview mode, the code pane is temporarily hidden until you return to the default view, which is as simple as clicking a button.  Automatic preview is on by default, which shows the results of your work as you type, but if you find that too distracting, you can turn it off.  It will even show the results of your CSS styling in real-time.  So if you create a content-filled element block first and then go back and add CSS style instructions, you can experiment with different looks very simply.

Unlike many other online editors, it is easy to include external files, and you can even create entire trees of folders to store them.  This makes Thimble my favorite go-to solution for knocking out a quick page or site update, especially when I’m traveling.

The downsides are obviously that it’s an online tool, meaning you’ll need to have an active Internet connection to run it (unless you’ve managed to successfully clone the Thimble platform to a locally hosted server), and secondly that you shouldn’t publish your commercial projects on their platform, because it’s not meant to be a hosting solution for professionals.

Instead, you’ll copy your HTML code and paste it into CPanel code editor or a text file, and save the result to your own server.  Of course, you’ll have your file tree already in place.

As with many Mozilla projects, Thimble documentation isn’t detailed enough, especially in the context of what you can and can’t do with it.  Their assumption is that you’ll read the Terms of Use, which is not really a reasonable assumption, even though every web manager who uses any online development solutions should always do so.

The important section of the Terms of Use is the part where it tells you that you grant Mozilla a royalty-free license to anything you publish on their platform and that you consent to other people re-using and modifying anything you publish.  Obviously, therefore, you really wouldn’t want to publish your professional projects there.

Because it’s an open source project, there’s nothing to stop you creating your own clone of it from the source code and using it on your own server for your own projects.

2. X-Ray Goggles

Kids have always been intrigued by the idea of X-Ray Goggles, but alas such technology (at least the kind that actually works as expected) is well beyond the reach of the average kid’s budget.  Mozilla’s X-Ray Goggles won’t let you see what the school nurse is concealing under her uniform, or what the Scottish groundskeeper has on under his kilt, but it will let you see how a web page works, and then edit the underlying code to make it work differently.  That has to be more exciting than simple voyeurism, right?

The primary use for this, from a professional point of view, is sandbox modeling to test alterations to existing designs without needing to make any permanent change.  It’s nice and simple, and installation is simply a matter of dragging the X-Ray Goggles button onto your bookmarks toolbar.  Click the button to activate it, and press ESC to turn it off again.

3. Webmaker

This isn’t quite so useful to most developers, since it is designed to be Android-only, and it’s not offering much that you couldn’t find in a social media platform.  In order to provide it, Mozilla ditched their actually quite useful online video editing tool (Popcorn), and replaced it with this.  Webmaker is good for beginners, because it enforces a mobile-first approach to design, which is essential to modern websites.  Experts, however, will feel frustrated by the limitations that come with developing in a mobile only environment, and it is fairly obvious this tool is mostly aimed at attracting teenagers to the Mozilla brand, and helping teachers to feel like they’re cool and hip because they can speak the lingo of mobile web development.

Another issue that will cause frustration for some is that it’s yet another app competing for space and resources on their device.  Android has a habit of filling up too quickly and most users don’t shut down their apps when they’re done with them because Google didn’t make it easy or intuitive to close anything.  Consequently, most Android phones are a mess after just a few months and people end up either replacing them or just being really upset that their phone is constantly reporting that it’s low on space.

4. Editor

This is the grand-daddy of Mozilla’s web development tools, and was originally called Composer.  Presumably the change of name is to differentiate it from KompoZer, which is actually a descendant of Composer.  The immediate predecessor of KompoZer was Nvu, and you wouldn’t want to use either of these because they’re not able to support HTML 5.  You might consider KompoZer’s half-brother, BlueGriffon, because that does support HTML 5, but with that you only get a CSS editor if you pay for a plug-in.  You can still get all of these tools except maybe Nvu.  Editor/Composer is still included in the Mozilla SeaMonkey browser.

5. Scratchpad

This is a device for writing and testing chunks of JavaScript.  Where the console only allows you to execute one line of script at a time, and is therefore very limited, the scratchpad lets you enter as many lines of code as you want.  Activate it in any Firefox tab by pressing Shift and F4 together.

After the window opens, you’ll see a simple text editor interface.  You can open existing scripts, edit them, and save your work.  You can also create new scripts.  The editor includes auto-complete for commands you enter, and inline documentation to help you with the syntax of your commands.  You can run the entire script or you can run just part of it by selecting that part before you click Run.

6. Responsive Design Mode

This is a feature built right into the Firefox browser (though to be fair, the feature also exists in Chromium and Google Chrome too).   It allows you to test your page layouts at different resolutions from a single desktop screen.  It isn’t perfect (in any browser), but it’s close enough for most practical scenarios to allow you to check the consistency of your site.  To activate responsive mode in Firefox, simply press Ctrl + Shift + M, and repeat this combination to return to normal browsing.

Control is provided from a row of buttons that appear above the layout you’re testing.  The first button on the left looks like a “close window” button and simply another way to jump out of Responsive Mode.  Next you’ll encounter a drop-down combo that lets you select from the different preset resolutions, define a new one, or (not recommended) remove an existing preset resolution from the list.  To the right of the combo is a button for re-orienting from landscape to portait and back.  Then there’s a button that lets you simulate touch events.  The final button is used to take a screenshot.

Some versions of Firefox also let you specify a device pixel ratio, but how well that works may depend on the pixel ratio of your own device.  There are other ways, besides the built in method, to view responsive layouts, which we’ll look at in a moment.

7. Web Developer Tools Extension

This doesn’t come directly from Mozilla, but it’s a Firefox extension created by Chris Pederick.  Within it is packed a huge assortment of tools to meet a range of needs.  You can use it to:

  • toggle things on and off
  • control cookies
  • mess with the CSS of a page
  • tamper with form fields in a page
  • unmask password fields
  • retrieve in-depth information about images
  • explore every DOM element in a page in minute detail
  • outline elements
  • resize the display
  • view responsive layouts in a better way than the built-in method
  • and lots of other things.

The easiest way to describe this extension is as a sort of “Swiss Army Knife” of development tools.  It’s got most of what you need, but the tools remain discretely tucked away until you need them.  You can access them via a right-click context menu, or there’s also a tool bar, which is probably the best way.

8. Firefox Developer Tools

Much of the functionality that was contained in Firebug is now available directly through this built-in feature, which also incorporates the web console.  It looks and works similarly to the one in Chromium and Google Chrome.  The interface is not intuitive, and unless you make a lot of mistakes, it could take years before you master and comprehend every feature of it.

One feature inexperienced users are likely to miss noticing is the JavaScript CLI at the bottom of the console, because it’s not marked in any way.  It works better than the Chromium/Chrome version, but their implementation, which adds a blinking cursor directly into the console, is more obvious about its purpose.

9. MeasureIt Extension

While it’s simpler to just install Ian McIntosh’s excellent Screen Ruler, the MeasureIt extension developed by Kevin Freitas has the advantage of being able to measure both height and width simultaneously and more accurately than Screen Ruler can.  It’s always a useful item to have available for measuring anything in a browser window.  It’s been reported not to work in some versions of Firefox, but this may be due to conflicts with other extensions.  Try disabling your other extensions before uninstalling it.

10. ColorZilla Extension and Eyedroper

Either or both of these are a must-have for designers because they makes short work of finding the color of any pixel in the browser.  You can also use GColor, which is a Gnome tool that does essentially the same thing, but with the advantage of being able to sample a color from any window, not just the browser.  The advantage ColorZilla and Eyedropper offer over GColor is that they show a zoomed in view of the pixel you’re fetching the color from.

Activate by clicking the eyedropper icon and the mouse cursor will change to a cross-hair pattern (ColorZilla) or a big magnifying circle (Eyedropper).  Hover around the window until you find the pixel that you want to retrieve the color value of.  Then left click to set the color in the clipboard (as a hex value), and the extension will automatically close itself.

These are shortcuts, they won’t do all the work for you

You are still the developer, and you still need to do your job.  What these tools do is make the task easier, if you use them correctly.  They help you in different ways, and some are actually no help at all for most people, despite Mozilla’s best intentions.  When there’s a better tool for the same purpose it’s usually better to use that one, but sometimes it’s good to know there’s a free Mozilla tool you can resort to when you need it.

Inspired Mag Team
We always try to come up with high quality and well-researched content in order to inform and inspire the creative web community.