What are the pros and cons of using a WYSIWYG editor for web page development vs hand coding?
With the exception of just not knowing how to create something by hand coding is there any reasons to use WYSIWYG?
I handcode, but I prefer to work with a wysiwyg editor in tow, and for that reason I'm still using Dreamweaver as an editor. What I'm doing 95% of the time is handcoding inside the Source editor and viewing the results in the preview. Occasionally I'll drop into the wysiwyg editor to move blocks around directly though and when I do I find it invaluable. I never use any of Dreamweavers wizards or generated code and I clean up the html manually too.
I see nothing wrong with this approach, it strikes me as the HTML design equivalent of an IDE prompting to complete functions etc. (intellisense or whatever your IDE may call it)
I also always use a templating system of one form or another so my scripting code is totally separate from html.
The combination with Dreamweaver of the occasional wysiwyg edit (invaluable I find when laying things out or making 'macro' layout changes) and the one click preview has kept me with it despite looking at better tools - Aptana, NetBeans etc. Indeed I would dearly like to move to another system - see this question - preferably something that runs on Ubuntu and strips out the crud in Dreamweaver leaving just the wysiwyg features and possibly an intelligent Javascript editor, but I'm yet to find anything. KompoZer is starting to look promising though.
There are a variety of reasons to use a WYSIWYG editor when creating HTML.
Allows for quick prototyping
Allows designer-y people to be actively involved in front end development
Some WYSIWYG tools will set you up with a clean base to be modified (Dreamweaver's CSS layouts are actually pretty good)
I think the important thing to remember is that after you get it into approximate shape, you should dig into the code and make sure there's nothing weird going on. Nested spans, odd absolute positioning, and (lord almighty) table based layouts count as weird things. Even if you use a WYSIWYG to start with, you should always check that the code is valid and looks the way you would expect it to.
WYSIWYG can be handy if you don't know HTML or just want to whip something together extremely fast. You're not going to get clean code, though. Most WSYIWIG editors still throw out a bunch of unneeded dirty HTML instead of clean solid markup.
Anyone familiar with HTML can usually whip up something just as fast by hand in an HTML editor. And it will be clean, xhtml compliant semantic markup instead of thrown together templates with extraneous crud.
If you set up the template and css properly, you can probably be faster with hand coding than a WSYIWYG editor, as those work against you when you're trying to create properly abstracted css with degradable semantic markup.
If the design isn't terribly important and you're just throwing a website together there's nothing wrong with using a WYSIWYG. Or if you're trying to create a marginally functional mock up for a client it's a good way to get something built quickly.
I develop in ASP.net most of the time, so I'm in VS2008 most of the time; however whenever possible (which is most of the time) I still-hand code....but I do it in VS2008's source mode. When working with ASP.net, theres always somewhat bloated code which you just sort of have to accept (to a point).
However, in my free time, I also do php development, and like hell will I ever not hand-code with php. Plus, its not like VS with the drag and drop stuff.
If you want to be really good at what you do, as in Guru like good, drop the WYSIWYG stuff and start hand coding. The learning curve is steeper, but it makes you better at what you do in a meaningful way.
It comes down to maintainability and changeability. It is usually much easier to change a GUI layout in a GUI editor than by hand.
"Oh you want to move that JTable from this position to this other completely unrelated position". If you have handcoded it, it basically turns out to be a programming job (which for non-trivial layouts might actually be HARD), but if it is in a good GUI editor, it is probably just a matter of point-click-move-release.
People who handcode probably never have had to do that kind of changes :)
The advantages of using a WYSIWYG editor for web development are pretty obvious. Development is much simpler and faster even if you know how to code web since web development requires to know many different languages and can get messy when trying to get them to work together as planned. Real WYSIWYG designers should be able to solve those complexities by allowing you to visually develop on one form in one layer.
The disadvantages of this kind of development paradigms can be that it sometimes limits you, meaning that you are usually constrained within a predefined framework.
Therefore it is important to find a framework that on top of its WYSIWYG development experience is open to extension and customization. Take a look at http://www.visualwebgui.com/.
This is the same type of thing as Glade versus hand coding your Gtk code. I think that you add a level of obfuscation and things that might break when you hand edit your code. However, as Spencer said, if you need to do it and it needs to work; usualy WYSI wil work pretty well and reliably. If you're doing something that you're going to be keeping up to date and be managing for years to come; you should know every piece of code that is in that application/web page.
Really it comes down to your job function. If you're primarily a designer, WYSIWYG editors can be very handy for creating mock-ups for clients, or prototypes that can be handed to developers to code against.
If you're a developer, you'll probably prefer to hand-code.
Most WYSIWYG editors offer a code view and design view which enables you to switch back and forth pretty easily.
My suggestion is to try and learn how to hand-code your site. After years of web development, I find that hand-coding is faster for me than attempting to use a designer. Moreover, as you gain a better understanding of how HTML and CSS work together you'll find that there's very little that can't be done gracefully.
It can be frustrating to learn, but you'll find that you're better for it in the long run.
Related
Context: Ok so I am building a website for a friend. Hes a designer with a high need to daily include his projects (images and text).
Problem:
Ok so I know pretty much how to code in html/css/javascript a front end responsive website, that is the easy part for me, the hard one is the content page. I've never done it so I don't know the best way.
A page that he goes daily put a new project, new images, formatted text (A like a blog). But since he doesn't know anything about coding and front end, it has to be simple enough for him to understand.
Resources: I made several searches and found some websites that allow custom templates with content, one of them standing is wordPress (haven't used it for years). I am currently abusing tumblr for that matter, but their support is quite bad. Should I use one, should I buy a host like bluehost and create my self one, what you guys recommend? I tried google it but perhaps I am not doing it the right way since I am not finding any answer to my problem.
Look, you've come to a programming website, so the most common suggestion you'll get here, and the option I myself recommend is:
MAKE IT YOURSELF!
It really is a fun and very educational experience.
There are many, many ways to do this. In general you'll want to have a front end that communicates with a back end API.
For the front end, there are a lot of options. From templating engines like Jekyll, to MVC frameworks like Laravel, to full fledged high level abstractions like Angular and React, which are admitedly harder to learn but so, so robust, and useful once you've figured them out.
The selection of tools you can use to make the API that supports the website is just as rich. There is ASP.NET for C# (which some people use for the front end as well but I wouldn't), there is Node.JS for JavaScript, with a myriad of libraries and packages to get you started. Flask is a popular option for Python. The list goes on and on.
Oh and dont forget about Ruby on Rails.
As for the interface which your friend will use to add their work, turning all that complicated back end into a simple, easy to use interface is a fundamental part of UX design and, IMHO, quite satisfying once you get it right. Make it sleek and, most of all, intuitive. One shouldn't have to be taught how to use it. It should be apparent from the first time they open the page. You should always ask for their feedback as you are developing it. Some even opt to create mock ups of the interface, in order to get feedback on both its aesthetics and its intuitiveness before a single line of code has been written.
Now, regarding how you'll actually do it, the answer really depends on the tools you opt to use. In general, you'll want to read up on things like the MVC pattern, or React's component architecture. The former is something you'll come across on a wide variety of platforms. The latter is mostly React specific, but in my opinion, understanding how to properly build a website using component architecture means you're in the right mindset, something that will help you no matter how you choose to build it.
All that being said...
Web development is complicated. Creating dynamic websites is a much larger undertaking that designing a static page, or even making an SPA. Though I do wholeheartedly recommend you do it at some point, starting with your friend's website might not be the best idea. Or, you may simply not have the time to sift through all your options, figure out which is best for you, begin the learning process etc.
In that case, there are plenty of publishing frameworks and tool sets to choose from. Wordpress has become very popular in the recent years, and templates and plugins for it are abundant. Alternatives like Medium and Ghost have also gained some traction.
There are plenty of commercial CMS type frameworks. One I have heard good things about is ExpressionEngine. However, I cannot speak for it with certainty.
If you are looking for a website builder, there are also plenty of options out there such as Weebly, Wix, as well as Squarespace. Google sites is a relative newcomer in that department, but seems promising.
So, in summary,
I wholeheartedly recommend building it from scratch. There are many, many languages, frameworks, and tools out there you can choose from, each with its own patterns, best practices and idiosyncrasies. If you lack the time, or simply don't feel like going through that process of building a dynamic website from scratch, you can use one of many tools available. However, that wouldn't be nearly as much fun, and would likely produce an inferior result.
I work with my professor to implement web-based decision support tools. I am a seasoned programmer, and am at ease with the various web technologies we use. However, my professor isn't, and he usually has to rely upon me to do even the most basic tasks like adding publications and presentations to an existing list. However, he now wants to be able to do these basic tasks by himself since we both feel it will be more efficient that way, and to leave the hard-core tool implementation for me.
He suggested that we purchase Dreamweaver to achieve this. However, I do not have much experience with Dreamweaver since I prefer to work with bare HTML, CSS etc., and Emacs and Eclipse have filled these needs very well for me.
What do you think we should do? Do you think Dreamweaver will be a good tool for this? If not, is there something else we should look at? How far will he be able to get along without knowing much HTML? Do you think I should give him a crash course in HTML? Feel free to opine!
NOTE: The website is not based on any CMS; it is completely bred in-house. We use HTML, CSS, PHP, and JavaScript. However, my professor will most likely dealing only with HTML (no CSS etc.)
For these types, I often (while cringing) reach for WordPress.
If your customers can make a Facebook post, they can edit content in WordPress. Just stay on top of the updates for it, as exploits for WordPress are found with very high frequency. Even with this maintenance, it will still be easier than doing updates for them.
It shouldn't be too hard to convert your site over to a template that you can use within WordPress. If you can't, you can easily embed content from WordPress into your site via feeds, but there is a performance penalty for this.
If you build the site with Dreamweaver, Adobe Contribute is a good option that is pretty much WYSIWYG (what you see is what you get), and it is designed to work with Dreamweaver templates.
Basically, it helps prevent novices from screwing up the site too badly by locking users out of template areas (the areas that are supposed to stay the same from page to page, such as navigation).
Well, I know a little HTML, and I'm just interested in playing around with it. I was wondering, though, do people usually write websites from scratch, or do they use templates, or do they use WYSIWYG editors?
To me, it seems like writing from scratch is unnecessary, nowadays, with the editors and templates we have, but maybe I'd be better off to try write something from scratch from learning purposes?
So, if I want to learn HTML better than I do, what is the best way to go about it (I have access to a free server) and how do professional website creators do it? Maybe this is an obvious answer but I'm quite new to it. Thanks!
If from scratch means hand-writing the markup, yes, that's the correct way to do it.
WYSIWYG, fully-bloated editors, are not good alternatives if you are serious about writing a web-site -- as most drag-and-drop-and-run systems out there. They might serve their purposes, but they are not general professional solution.
Hand-written markup (HTML, XHTML) and CSS will always provide better cross-browser compatibility, will be much more optimized and easier to maintain.
I really like Aptana Studio. It is an IDE that enables you to easily write the markup (HTML, XHTML), the formatting (CSS), the client-side code (ie, animations, etc, through JavaScript, and it is really well integrated with common JavaScript frameworks) as well as server-side code in a very professional way (PHP, Ruby, and many others). Oh, and it's free.
Aptana is better than, say, Notepad clones, because it is adapted to Web Development: all the time you have context menus popping up containing hints about compatibility, it displays errors on the markup, etc. It understands your code better than most notepad clones do.
I definitely recommend writing from scratch when you are learning. Using a wysiwyg editor can create a lot of extra code that you have no idea how to deal with when something strange happens and you have to edit the HTML itself. Using something like Notepad++ that supports code highlighting can help a lot.
the secret of html is: not writing it. means: keep it as tiny and semantically as possible and thats where all WYSIWYG editors fail. they let you create 403 nested dom elements whit 2 mouseclicks and if you are a beginner you don't even realize how wrong that is.
I agree with others that learning HTML makes sense. But at the same time, you can use WYSIWYG as a learning tool if necessary. I know that when I first started creating websites, margins and padding always seemed hard to properly format (due in part to inconsistencies across various browsers), and using a visual editor did help me figure out how changing certain values affected the view.
My favorite WYSIWYG editor is probably Nvu just because it is free and less bloated than software like Frontpage. But as others have noted, just practice with HTML. Check out w3schools for a nice intro and reference pieces.
Depends on the budget and software adquisition posibilities (yes, the budget).
Assuming you are talking about research, design, development, scripts, flash and everything you need the best option is Adobe Creative Suite for Web Designers.
There´s no powerfull editor in the world than Dreamweaver and that´s a fact.
You should use Notepad, Notepad++, jEdit and whatever you want but if you want to be productive a serious IDE is the best choice and Adobe win by far.
My opinion!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
For design websites is it better to do it your self by learning HTML/CSS or using web design programs? and why?
I've bounced back and forth between hand coding and Dreamweaver in my history as a web developer.
I originally started out hand coding HTML. This was back in the day when table layout was king, and editing nested tables became a real headache. Couple this with a lack of good tools for visualizing hidden elements and this quickly became a nightmare.
I started using Dreamweaver primarily to speed up my table design workflow. Soon, however, Dreamweaver's templating system became a godsent when I started producing static websites that had no server backend. Being able to update one template and have it propagate across the entire static site cut down my cross-page inconsistencies to nearly zero.
More recently, the whole web 2.0 push has got me, and almost everyone else, back into the hand coding game. I found Dreamweaver wasn't really suitable for the compliant designs, since it was heavily table-centric. I find that most of the HTML I write these days is so straightforward and simple there's little need for an editor. Additionally, all my development is now dynamic once again, so there's no need for a static html generating template system anymore.
Learn for yourself so you can figure out how to do things exactly how you want them to be done, and not have to rely on some sort of program to figure it out for you.
Like anything else in technology, learn the core concepts first, and then use a tool to automate the things you have mastered. By doing so, you will gain a better understanding of how everything works together, and you be able to easily tell when something goes wrong. In this way you will not be bound to any one design tool, and can use whatever works best because you understand the core concepts.
In the words of Richard Feynman,
"That which I cannot create, I do not
understand."
They really serve two purposes, and either one is "better" for it's purpose.
If you learn to do it by hand, you will:
Have more control over exactly what is happening
Have less extraneous code
Be able to maintain your code more easily
If you use a program, you will:
Be able to design visually
Possibly be able to design more quickly
Not have to learn to write CSS by hand
It really depends on what your goal is.
I prefer HTML/CSS by hand because you have the most control over the code. Most design programs will add additional markup that is not required. Even simple WYSIWYG JavaScript editors add extra markup. Although, not a huge difference in file size, the additional markup will add up over time. I would also argue that its easier to maintain code when you know what went into its creation.
Additionally, you'll learn a lot more by taking the time to do it by hand.
Personally, I always edit my HTML/CSS by hand using editors with auto-completion if I can, because that always makes life easier. You should definitely always learn a language as much as you can before you start relying on any program to generate code for you, because most of the time you end up fixing what they gave you.
I tend to do it all by hand.
Doesn't matter what IDE or
server-side language I'm using.
Mark up is markup. Being able to do
it rapidly by hand is valuable.
More often then not, you'll have to
edit some markup manually. By
writing it from scratch, you're
already very familiar with the structure of the markup.
You don't have to spend any time
orienting yourself to the
designer-generated markup.
Although not necessarily a rule,
those who live in the designer I've
found to be less sharp in their
markup and code craftsmanship.
I prefer the by hand approach. That way you know exactly what you're getting. Plus I haven't found an editor that produces HTML/CSS that doesn't need some tweaking especially if you are targeting multiple browsers.
Doing it by hand. Using design programs tends to insert a lot of extra markup you don't really need, which will just complicate your ability to learn.
If you do it by hand you at least know what was inserted where, and why. Plus there are a lot of good websites out there that can walk you through the basics.
IMO you will still learn using web design programs like Dreamweaver, since you have to look at the source and make it fit your exact desires,and its quicker. But doing it by hand will give you the more you write the more you learn type of thing that I agree with 100%
This is a bit vague.
I think that "better" (qualitatively) depends greatly on (1) the competency of the designer, and (2) the sophistication of the application.
Regarding "better" (as in "advisable"): using an application can be a crutch that may fail to save you in all cases. Knowing how to "raw code" html and css is valuable in understanding the limitations of the application and working around those limitations. For that reason alone I suggest knowing how to do it by hand and then keep a sharp eye on the output generated by the application, should you choose to use one.
The absolute best is when you understand what you are doing - you can only do this by coding by hand.
If you don't know HTML or CSS and you use a WYSIWYG editor then how can you be sure everything is right? You can't!
If you have a good understanding of HTML and CSS why would you use a WYSIWYG editor? They make things harder because you can't see the code and extra tags and rules get inserted without you knowing.
Coding by hand is always the best.
Why should you know about xhtml/css ?
Here is some reasons:
Respect semantics meaning
DOM compliant (you know the javascript mess)
Easier to maintain
Search Engine Optimization
You still think it takes a longer time to design/integrate a website ?
Think of use vi, eclipse, quanta, and probably some others...
By hand is the obvious answer, because your website/application will be, well, better. (And also because, if you use JavaScript, it's good to traverse through the DOM of a document you've written yourself, versus a generated one that you have to examine beforehand.) But that's mostly only because the visual tools that exist today really suck (I'm thinking of Dreamweaver). It's definitely possible to create a good visual editing (WYSIWYG) program that actually generates good HTML/CSS/JavaScript, but nothing even close has come up yet, so right now hand-coding is much, much better.
I'm not going to read the responses, so its quite possible someone has already said this, but oh well.
First and foremost, you should always write out your HTML / CSS by hand. The reason for this is that no matter how advanced an HTML editor is, it will never be as good as it could / should be. For "good" html / css, you will actually end up writing your page in a different order than what you see.
For example, a page that is displayed like:
________________
|logo |
|----menu------|
|..............|
|...content....|
|..............|
|....footer....|
----------------
"should" actually flow as follows:
<h1>title of site</h1>
<div id="content">.....</div>
<ul id="menu">....</ul>
<div id="footer">...</div>
which an HTML editor would simply throw a hissy fit if you did it through the nice pretty gui. What may be advantageous is to use Web Expression 2 or Visual Studio for its intellisense. It may help speed up (or maybe slow down) your learning curb.
I really recommend Transcending CSS Design if you are already familiar with HTML / CSS. Otherwise grab a CSS book first even over an HTML book. Styling through CSS will teach you proper semantic HTML (or should,anyway).
I like to code by hand because i can keep my code clean and tidy that way. HTML is not very hard anyway.
If you decide to code by hand you will need an editor that supports syntax highlight, and you will need to validate your code as often as possible to avoid errors (this is good practice anyway). This extension for Firefox will ease your work a lot: users.skynet.be/mgueury/mozilla/
Although I've done programming, I'm not a programmer. I've recently agreed to coordinate getting a Website up for a club. The resources are--me, who has done Web content maintenance (putting content into HTML and ColdFusion templates via a gatekeeper to the site itself; doing simple HTML and XML coding); a serious Web developer who does database programming, ColdFusion, etc., and talks way over the heads of the rest of us; two designers who use Dreamweaver; the guy who created the original (and now badly broken) site in Front Page and wants to use Expression Web; and assorted other club members who are even less technically inclined.
What we need up first is some text and graphics (a gorgeous design has been created in Dreamweaver), some links (including to existing PDF newsletters for download), and maybe hooking up an existing Blogspot blog. Later (or earlier if it's not hard), we may add mouseover menus to the links, a gallery, a calendar, a few Mapquest hotlinks, and so on.
My question--First, is there any real problem with sticking with HTML and jpegs for the initial site? Second, for the "later" part of the site development, what's the simplest we can go with? Third, are there costs in doing this the simple way that will make us regret it down the road? Also, is there a good site/resource where I can learn more about this from a newbie perspective?
If you don't require any dynamic content, heck, if you don't plan on editing the content more than once a week, I'd say stick to basic HTML.
Later, you'd probably want a basic, no-fuss and easily installable CMS. The brand really depends on the platform (most likely PHP/Rails/ASP), but most of them can be found by typing " CMS" into Google. Try prefixing it with "free" or "open source" if you want.
I'm pretty sure you can do all this for absolutely free. Most PHP and Ruby CMS's are free and web hosting is free/extremely cheap if you're not demanding.
And last/best tip: Find someone who has done this before, preferably more than once. He'll probably set you up so you never have to look at anything more complicated than a WYSIWYG editor.
Plain old HTML is fine, just as long as you don't use tags like blink and marquee.
I personally love tools like CityDesk.
And I'm not just plugging Joel. (There are others out there in this class I'm sure.) The point is they make making a static website very easy:
The structure is just a filesystem structure
pages have templates to consolidate formatting
all resources are contained in one file
easy and fast Preview and Publish functions
For a dynamic collaborative site, I would just install one of many open source CMSs available on shared hosting sites.
If you're familiar with html/javascript basics I'd look into a CMS - wordpress, drupal, joomla, nuke, etc. All of these are free. Very often your web hosting company will install one of these by default which takes all of the hard part out of your hands. Next is just learning to customize the system and there's tons of docs out there for any of those systems.
All that being said there is noting wrong with good old fashioned html.
In addition to some of the great content management systems already mentioned, consider cms made simple.
It makes it very easy to turn a static site into a content managed site (which sounds like exactly what you might need to do in the future), and the admin area is very easy to use. Our clients have found it much simpler to use than the likes of Joomla.
It's also free and open source.
Good luck!
There's no reason to not go with plain old HTML and JPGs if you don't know any server side scripting languages. Also, once you want to get more advanced, most cheap hosting services have tools that can be installed with one click, and provide things like blogs, photo galleries, bulletin boards (PHPBB), and even content management tools like Joomla.
I had the same problem myself, I was just looking for something really easy to smash together a website quickly. First I went with just plain old HTML, but then I realised a simple CMS would be better.
I went for Wordpress. Wordpress is mostly known as a blogging platform, but in my opinion it is really great as a deadly simple CMS as well.
why not simply use Google pages?
Here is an example of a website I did, takes about 2 hours, easy to maintain (not that I do (-: ) and FREE.
I think that suggesting you mess with HTML for what you need is crazy!
Plain HTML is great, gives you the most control. If you want to make updating a bit easier though, you could use SSI. Most servers have this enabled. It basically let's you attach one file to many pages.
For example, you could have your menu in navigation.html and every page would include this file. That way you wouldn't have to update this one file on every page each time you need to update.
<!--#include virtual="navigation.html" -->
I agree with the other commenters that a CMS might be useful to you, however as I see it, probably a solution like Webby might do it for you. It generates plain HTML pages based on Templates. Think about it as a "webpage preprocessor" which outputs plain HTML files. It has most of the advantages of using a server-based CMS, but without a lot of load on the server, and making it easy for you to change stuff on any of the templates you might use.
It's fine
Rails (or purchase / use a CMS)
Not unless you start becoming crazy-popular
It really depends on what you go with for 2. Rails has a plethora of tutorials on the net and any product you go with will have its own community etc.
To be perfectly honest though, if the dynamic part is someone elses blog and you move the gallery out into flikr you may find that you can actually live with large parts of it being static HTML for a very long time.
If a to Implement a website With User Profiles/Logins, Extensions, Gallery's etc s a Newbi then a CMS like Joomla, Etc are good , but Else if you presently have only Static Content then Its good to go with Good Old HTML, About JPEG , I though Presently Its better to use PNG or GIF as its Less Bulky.
Also About you Query About Shifting to Server Scripts , When you have Database Driven Material or When you have Other Things that Require Advanced Prog Languages , Just use PHP Scripts inside PHP , and Rename teh File as a PHP, Thats IT, No Loss to you HTML Data.....
Do Go Ahead and Launch you Site ......
Dude, you're talking about HTML, obviously you'll be styling your content with CSS. Wait till you run into IE issues and god forbid your client wants ie6 compatibility.
Go with the HTML for now, I'm sure you guys will hack it through. Our prayers are with you.
Personally, I'd never use JPEG images on a website, mainly because of three reasons:
JPEGs often contains artifacts.
Quality is often proportional
with filesize.
Does not support
alpha transparency.
That said, I'd recommend you to use PNGs for images since it's lossless and a 24-bit palette (meaning full colors + alpha transparency). The only quirk is that IE6 and below does not support native alpha for PNGs, however this could be resolved by running a javascript which would fix this issue.
As for designing a website, there's both pros and cons for this. I suggest you read through:
37 Signal's Why We Skip Photoshop
Jeff Croft's Why We Don't Skip Photoshop
As for newbie resources, I'd recommend you flip through the pages at W3 Schools.