Web Design Tips and Tricks

What You See Isnt Always What You Get

What You See Isn't Always What You Get.

When you use a visual HTML editor like FrontPage or Dreamweaver, they tell you that WYSIWYG: what you see is what you get. This means that, in theory, what you see while you're editing the page should look just like what you get when you're done. While word processors have pretty much got the concept working now when it comes to printing (it didn't used to be as reliable), there are still problems when it comes to HTML editors and web browsers – of course, if you've spent more than five minutes using visual HTML editors, then you'll know that.

The Advantages of WYSIWYG.

WYSIWYG is quite uncontroversial at this point – its advantages are clear, in that it lets you make your page look exactly the way you want it to while you're writing it, with no surprises. In the early days, it was sometimes referred to as being like a kind of 'interactive print preview'. Professional typesetters were at first opposed to its use in publishing, but it's easy and quick enough that it has come to dominate. The alternative now, though, is to go back to the days of layout commands, which isn't something most users want to do.

On the web, WYSIWY it can be far more problematic, because what comes out of the other end of the program isn't a static, printed page – it's computer code, HTML, that has to be interpreted by a web browser before it becomes anything viewable.

Not Even All Browsers are the Same.

The first problem with what you see in an editor being what you get in a browser is that all the different browsers available don't always make the same page look the same way. How are HTML editors supposed to account for bugs in Internet Explorer? They can't, really.

Each piece of HTML editing software is forced to either write its own HTML rendering engine (the engine that decides how the code is translated to a visible page), or use one from an existing program. Recently, for example, Dreamweaver moved over to Opera's engine, which means that it shows pages the way Opera does. FrontPage has always been closest to Internet Explorer. Because Mozilla is open source, there are a lot of HTML editors based on its engine, the most usable of which is Nvu.

That doesn't exactly help, though, when it comes to things looking the same in every browser – if you use Dreamweaver, for example, what you see will be what you get in Opera, but not necessarily in Internet Explorer. This is a problem that can be partially solved by testing everything in every browser, but doing that doesn't let you see what your page is going to look like as you're going along.

Maybe What You See Shouldn't Be What You Get.

While users demand WYSIWYG software, it's somewhat misguided when it comes to the web, for the simple reason that it expects everyone to be using your site the same way, and designs towards that expected use. In reality, the web was designed to be a document format that was interpreted by the program receiving it, meaning that if a browser wants to leave out all the graphics, or ignore all your tables, then it's perfectly justified in doing so. This is especially significant when it comes to mobile browsers – they simply don't have large enough screens to display normal designs, and it's silly to force them to try.

Realising this is one of the most important differences between being a good designer and being a bad one. Bad designers will be constantly nudging at their designs, doing everything they can think of to get them to look exactly the way they intended in every browser possible, even if it doubles the size and complexity of the code. A good designer will write good code that displays in all browsers, but doesn't necessarily have to be pixel-perfect.

 

 Article index
 
5-Simple-Steps-to-Accepting-Payments
5-Steps-to-Understanding-HTML
10-Easy-Ways-to-Promote-Your-Website
5-Ways-to-Avoid-the-1998-Look
6-Reasons-Why-You-Need-a-Website
7-Ways-to-Make-Your-Web-Forms-Better
Ads-Under-the-Radar-Linking-to-Affiliates
AJAX-Should-You-Believe-the-Hype
All-About-Design-Principles-and-Elements
An-Introduction-to-Paint-Shop-Pro
An-Issue-of-Width-the-Resolution-Problem
A-Question-of-Scroll-Bars
Avoiding-the-Nuts-and-Bolts-Content-Management-Software
Beware-the-Stock-Photographer-Picking-Your-Pictures.
Building-a-Budget-Website
Building-Online-Communities
Clean-Page-Structure-Headings-and-Lists
ColdFusion-Quicker-Scripting-at-a-Price
Column-Designs-with-CSS
Content-is-King
CSS-and-the-End-of-Tables
Cut-to-the-Chase-How-to-Make-Your-Website-Load-Faster
Designing-for-Sales
Designing-for-Search-Engines
Dont-Be-Scared-Its-Only-Code-HTML-for-Beginners
Dreamweaver-The-Professional-Touch
Encryption-and-Security-with-SSL
Finding-a-Good-HTML-Editor
Focus-on-the-User-Task-Oriented-Websites
Fonts-are-More-Important-Than-You-Think
Free-Graphics-Alternatives
FrontPage-Easy-Pages
Hints-All-the-Way
Hiring-Professionals-5-Things-to-Look-For
How-Databases-Work
How-the-Web-Works
How-to-Get-Your-Website-Talked-About-on-Blogs
How-to-Install-and-Configure-a-Forum
How-to-Make-Visitors-Add-You-to-Their-Favorites
How-to-Run-Ads-Without-Driving-Visitors-Crazy
How-to-Set-Up-Your-Hosting-in-5-Minutes-Flat
IIS-and-ASP-Microsofts-Server
Image-Formats-GIF-JPEG-PNG-and-More
Its-a-World-Wide-Web-Going-International
JSP-Java-on-Your-Server
LAMP-The-Most-Popular-Server-System-Ever
Making-Friends-and-Influencing-People-the-Importance-of-Links
Making-Searches-Simple
Offering-Free-Downloads-on-Your-Website
Opening-a-Web-Shop-with-E-Commerce-Software
Perl-Cryptic-Power
Photoshop-a-Graphic-Designers-Dream
PHP-Easy-Dynamic-Websites
Picking-a-Colour-Scheme
Printing-and-Sending-the-Two-Things-Users-Want-to-Do
Putting-Multimedia-to-Good-Use
Python-and-Ruby-the-Newer-Alternatives
Registering-a-Domain-Name
Registering-Your-Users-by-Stealth
RSS-Really-Simple-Syndication
Setting-Up-a-Mailing-List
Setting-up-a-Test-Server-on-Your-Own-Computer
Some-Places-to-Go-For-More-Information
Taking-HTML-Further
Taking-HTML-Further-with-Javascript
Taking-Your-Website-Mobile
Text-Ads-Unobtrusive-Advertising
The-5-Principles-of-Effective-Navigation
The-Art-of-the-Logo
The-Basics-of-Web-Forms
The-Basics-of-Web-Servers
The-Case-Against-Flash
The-Confusing-World-of-Web-Hosting-Making-Your-Decision
The-Evils-of-PDFs
The-Importance-of-Validation
The-Many-Flavours-of-HTML
Theres-More-than-One-Web-Browser
The-Smaller-the-Better-Avoiding-Graphical-Overload
The-Top-10-Biggest-Web-Design-Mistakes
The-Web-Designers-Toolbox
The-Web-is-Not-Paper
Time-for-User-Testing
Titles-and-Headlines-Its-Not-a-Newspaper
Tracking-Your-Visitors
Understanding-Web-Jargon
Uploading-Your-Website-with-FTP
Using-Flash-Sensibly
Using-Quizzes-and-Games-to-Get-Traffic
VBScript-Javascript-Made-Easy
Websites-and-Weblogs-Whats-the-Difference
What-Do-You-Want-Your-Website-to-Do
What-You-See-Isnt-Always-What-You-Get
Which-Database-is-Right-for-You
Why-Doing-It-Yourself-is-Best
Why-Java-Will-Drive-Your-Visitors-Away
Why-Word-is-Bad-for-the-Web
Why-You-Should-Put-Your-Content-in-a-Weblog-Format
Why-You-Should-Stick-to-Design-Conventions
Working-With-Templates
Writing-for-the-Web
Site Map