Preview for all

Posted by HTML-Kit Support September 7, 2011

When I say "preview for all" I don't mean it as in people, although everyone is more than welcome to preview through HTML-Kit! I mean, preview in all PC/Mac browsers and other devices including smart phones and tablets.

If you want to skip reading the rest, scroll to the bottom for a demo video and a summary. If you're running HTML-Kit Tools 20110909+, you can try it for yourself by clicking the preview icon on the main menu bar.

Early days

Back in the early days of HTML-Kit, most everyone used Internet Explorer to browse the web. Mozilla was a close second. However, it wasn't until Firefox, a version of Mozilla, that IE had a strong challenger for its market share. Then came Chrome by Google and rapidly took the third place, closing in on Firefox. All these browsers were mainly running on PCs and Macs.

Enter mobile browsing

Browsing the web through mobile phones provided a limited, if not a painful, experience. That's until the introduction of the iPhone. iPhone, iPod and iPad made it much easier to browse the full web, and collectively iOS Safari became the number one browser on the mobile side. Android-based devices, BlackBerry, Windows Phone, WebOS and other mobile platforms are also competing in this space to provide better web browsing on the go.

What does this have to do with HTML-Kit?

That's a long way of saying that the websites you create today will be viewed in many different browsers and on a wide variety of devices to come. Even though the major browsers are more standards-compliant than ever, it's still important to test websites in multiple browsers to make sure that your visitors see the sites as you intended. Depending on your audience, it's also important to test in different form factors as well.

Editing in HTML-Kit and testing in multiple browsers

HTML-Kit already gives you many options for previewing pages. Most likely though, the internal preview tab (F12 key) is what's used most or at least what's used first. This works well in majority of cases. However, if you need to preview in more than one browser, the currently available options are not as convenient as pressing F12. And, there's a technical and practical limit as to how many different browser modes the preview tab could possibly support.

A brand new option for previewing in, well, all

To solve the not-so-unique problem of easily previewing in multiple browsers, and increasingly more and more devices, HTML-Kit Tools is introducing a brand new preview option. First, here's a quick demo:


The video, which was created during an eureka moment, focuses in on the cool effect of multiple devices updating with the press of a key (can you guess what operating systems and devices are shown?). Of course, you don't have to borrow as many devices as I did to make this video to actually make use of this feature. It simply gives you a new option for preview what you're editing in HTML-Kit Tools through almost any browser or device. By the way, if you're new to HTML-Kit and wondering why F12 is mentioned all over the place in this video, it's because F12 is the shortcut key for previewing inside HTML-Kit.

In short:

  • To get started, click the preview icon on the main menu bar at the top (in HTML-Kit Tools 20110909+).
  • You can preview in any external browser that's installed on your system, as easily as pressing F12 while editing pages.
  • One or more browsers assigned to HTML-Kit Tools will automatically refresh to show the latest changes you've made. You don't have to manually reload the page in each browser or open/close browser tabs.
  • On multi-monitor setups, you can edit on the primary monitor and use secondary monitor(s) for previewing through browsers of your choice.
  • In addition to previewing in browsers on your system, you can configure it to preview from Mac OS X, Linux or any operating system running on other computers.
  • Testing your pages on smart phones and tablets works just as conveniently -- pressing F12 in HTML-Kit refreshes browsers on other devices as well.
  • This feature is optional, even with all the goodness it brings. You can continue to use F12 the way you have, and turn on this feature if and when you want. It's also quite easy to toggle it off.
comments powered by Disqus