HTML Editor Research

So when I decided to make this website from scratch I had to search for HTML editors that I could use to create and amend my website.

The process would be once that website is done, I’d then upload it through a File Transfer Protocol Client (FTP) to my web host (server) which would then show the live changes once I’d upload the files I’d changed.

Now for the past 5 years I’ve been editing websites on the WordPress Content Management System (CMS) almost exclusively. So my grasp of the HTML Editor landscape has waned.

Originally I used to use the following:

Microsoft Front Page

office11_17[1]

This was my first HTML Editor I purchased and used. I must have been 12-13 when I first started creating websites on here. Funnily now they don’t call these HTML editors anymore they are now dubbed WYSIWYG editor (What You See Is What You Get). The meaning behind that is simply you get to preview your website in the HTML editor.

It at the time was the premier program to be using with a webhost and FTP setup. Even to this day FTP clients and Web host control panels have options for ease of use with MS Front Page so that you can directly save from the program onto the server without even having to use a separate FTP client program (such as FileZilla/CuteFTP).

Aside from that feature one of the other great features was that it could actually preview the website AS you were building it! Which made it far quicker to be working on as you did not have to upload the same file again and again to preview your incremental changes. You simply clicked save!

However accomplished web designers used to look down upon the use of Front-page due to the unnecessary code that it used to add. It would always tags and lines of code every time you edited it despite your best efforts to remove the code each time showing that it was made in Front-page. It had other unnecessary meta tags that slowed the website down. Though that could be countered simply removing it once you’re finally done developing the website and it was simple to find the code.

Lastly. One of the greatest features of this program was its ease of use! It’s interface was very similar to any other Microsoft program and it’s features were very similar so for myself as a 12-13 year old in 2000-2001 I loved the intuitive nature of the interface design. I still to this day have a soft spot for this program. Unfortunately it is no longer supported and as you can imagine after years of being left in the dark it just could not keep up with some of the major changes that have come through the web in the past few years. Either from W3C standardisation or the introduction of HTML5. All of this gave way to Microsoft’s new baby, Microsoft Expression Web.

 

Microsoft Expression Web

Microsoft-Expression-Web-Designer_2[1]

Very similar to MS Front Page only that it had a slightly less intuitive interface though was more up to date with the current web development landscape.

It however failed to capture the following of it’s predecessor and is now no longer being supported by Microsoft either.

 

Adobe Dreamweaver

Dreamweaver[1]

For the longest time in the gap between having no solid HTML editor I could trust I turned to using the standard Microsoft Notepad and Adobe Dreamweaver.

It’s benefits are there it has a library of jquery components and elements. At the time I remember being awestruck by it’s inbuilt hover over features which made an image change to another by simply hovering over it. Which over a decade ago to young teenager was quite impressive.

Though it had other complex jquery components in it’s library I struggled t find a version that got the best work out me. Why you might ask? The interface was awful. It was the least intuitive HTML editor interface that I could and most times I found myself battling with it to get what I wanted.

In the end I slowly moved away from it and stuck to using the tried and tested Notepad.

 

Notepad++

notepad++-screenshot[1]

This HTML editor was a revelation and should be a standard tool in EVERY web designers toolkit. It just gives you so much more insight into your websites code and arranges it beautifully for you. My only gripe is that it doesn’t have a preview feature and just has a fantastic code editor.

For this project it does not meet the requirements. I need to have something that can preview the work I’m doing for quicker editing. A WYSIWYG Editor.

 

CoffeeCup

editor-features-new-library[1]

After some quick searching it was apparent that this WYSIWYG editor was the king of the hill. The top dog. The main honcho. The Scareface of HTML code editing. ….welll maybe not the last one but this program has some fantastic features!

Like front-page it has a standard HTML editing features mixed with Dreamweavers JQuery library of components.

Though what sets it apart is now just it’s preview system but the fact that it re-creates a live environment so that you can ACTUALLY preview the website like it was live. The other HTML Editors did not do that and it means that I can see exactly how it will look on my laptop and I’ll only really need to upload it once to the live test servers.

Conclusion

Coffeecup is the WYSIWYG HTML Editor I’ll be using to create and edit this website. It will also be where I test the development in it’s in-built live environment. The other programs are out dated and are not fit for modern web design use. I’m sure Dreamweaver still get’s supported but I’ve never liked the interface and I don’t feel it can compete with Coffeecup. Especially since it has a one time low fee of $69.

Not to mention having tested it out, it has a beautiful interface. As a budding User Interface (UI) designer I can’t say enough positives about it! Very clean, intuitive and thoughtful for what a web designer would need in a HTML Editor.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s