Why is Dreamweaver's design view so messed up?

Report · Feb 23, 2012

Hi

I am sure this has been asked and answered loads of times but here goes again.

Dreamweaver gets a lot of bad press because of it's design view but why does Dreamweavers Design view render web pages so badly? Even pages that validate and are well structured often render very poorly. Why is this?

It's not as if DW doesn't have a decent rendering engine built in - live view works perfectly well. And Contribute seems to be able to present an editable page rendered correctly.

The design view obviously has some sort of rendering engine to do it's job but is it a bespoke, poorly written one that it's not up to the job? Why keep it if doesn't work? Is there just no will to fix it?

Report · Feb 23, 2012

The only way to respond to this question meaningfully is by way of example.

What specifically renders poorly for you? Which version of DW?

Point us to a webpage which is messed up for you in Design View and allow others to replicate it.

Report · Feb 23, 2012

Come on John if you've been using DW for any time you surely must know what I am referring to.

But to satisfy your curiosity, please test with the followng temaplte http://tinyurl.com/7fkvfkg

I use CS4 but design vierw has been rubbish in all DW version.

Report · Feb 23, 2012

bikeman01 wrote:
Come on John if you've been using DW for any time you surely must know what I am referring to.
But to satisfy your curiosity, please test with the followng temaplte http://tinyurl.com/7fkvfkg
I use CS4 but design vierw has been rubbish in all DW version.

Gee! Is that a template design or did you come up with that html and css. No wonder Dreamweaaver can't interpret it.

My guess is its a template design and whoever came up with it wasn't thinking of Dreamweaver compatibility at the time.

Dreamweaver is pretty good at showing the design in Design View as it would be when shown in the browser BUT there are a million and one ways to write html and css and it can't handle this stuff...frankly nor could I.

Report · Feb 23, 2012

I agree with Bikeman that design view doesn't always render well for me, even for pages that are well built and that are only HTML, but it doesn't bother me. Sometimes design view is useful for locating a tag or some content in a complex page. Design view shows you the various blocks of Div containers and tables on the page, so it isn't intended to be a browser.

Obviously you can keep a browser window open and refresh it as needed, so why does it even matter how design view renders?

Report · Feb 23, 2012

Rob Hecker2 wrote:
I agree with Bikeman that design view doesn't always render well for me, even for pages that are well built and that are only HTML, but it doesn't bother me. Sometimes design view is useful for locating a tag or some content in a complex page. Design view shows you the various blocks of Div containers and tables on the page, so it isn't intended to be a browser.
Obviously you can keep a browser window open and refresh it as needed, so why does it even matter how design view renders?

I've never had that much trouble with Dreamweaver rendering html/css going back quite a few versions BUT I know quite a few people post about having trouble. Dreamweaver just doesnt manage ALL variations of css. And quite frankly some of the css I've seen, although perfectly valid, is overkill and I guess that's where Dreamweaver fails or is it the other way around.......I dunno.

A lot of pros only use notepad or some other software which doesn't visually render anything. I guess thats where the convoluted css evolves from because they don't require a visual editor prefering to use the browser, which probably isnt a bad idea because so many who use DW never check anything until its too late.

Guess you got to work out which is the best workflow for yourself.

I could certainly make the OPs design work in Dreamweaver with about an 8th of the css.

Report · Feb 24, 2012

I would have replied sooner but for some reason I log in but cant post or reply to discussions. Anyone else have this problem?

Anyway, no the template I referred to is not my work and yes it is a somewhat convoluted but coding is not an exact science and there's nothing actually wrong with the coding here, it validates and displays perfectly in all browsers.

And that's the point of my question, how can valid html/css pages which render in all browsers get so messed up by Dreamweaver. It's a simple conclusion that DWs design view is not up to the job of rendering complex pages. But if all the browsers can render these pages why cant Dreamweaver?

Report · Feb 24, 2012

bikeman01 wrote:
Anyway, no the template I referred to is not my work and yes it is a somewhat convoluted but coding is not an exact science and there's nothing actually wrong with the coding here, it validates and displays perfectly in all browsers.

Sure it does bikeman. I don't have an issue with any invalid code or the design itself, its nice. What displays in the browser is the most important aspect and as you say it displays....job done. All I was saying was the css code was obviously not written with Dreamweaver in mind and why should it be. Personally I think a lot of the css used or how its written is a bit overkill, but thats just me.

bikeman01 wrote:
And that's the point of my question, how can valid html/css pages which render in all browsers get so messed up by Dreamweaver. It's a simple conclusion that DWs design view is not up to the job of rendering complex pages. But if all the browsers can render these pages why cant Dreamweaver?

Well Dreamweaver is not a browser as browsers arent html software so maybe there is technical difficulties in combining the two. Unless Adobe come out and say which I doubt they will, never have been that helpful towards their client, it will remain a mystery.

As I say I've never had much rendering trouble in Design View and could certainly get that website to display in DW using different ccs techniques so maybe thats what they think you should do.

Report · Feb 24, 2012

I have to agree with the original poster. Dreamweaver's Design View is getting to be an issue for me.

I have started using CSS3 and HTML5 a lot and Dreamweaver is not correctly showing me navigation, backgrounds, shadows fonts and floats correctly. Live View does correctly render the website and I cannot say that I know how it is that some of the correct rendering from Live View is not integrated into Design View.

I also am having a problem with the way Adobe related the properties of CSS styles in the Properties workspace. For gradients, there is a icon which says nothing at all whatsoever about what colors you are working with and no color pick help. Adobe could improve that considerably, even though HTML5 is not yet a standard.

Report · Feb 24, 2012

mhollis55 wrote:
I have to agree with the original poster. Dreamweaver's Design View is getting to be an issue for me.
I have started using CSS3 and HTML5 a lot and Dreamweaver is not correctly showing me navigation, backgrounds, shadows fonts and floats correctly. Live View does correctly render the website and I cannot say that I know how it is that some of the correct rendering from Live View is not integrated into Design View.
I also am having a problem with the way Adobe related the properties of CSS styles in the Properties workspace. For gradients, there is a icon which says nothing at all whatsoever about what colors you are working with and no color pick help. Adobe could improve that considerably, even though HTML5 is not yet a standard.

Well I guess they will improve the rendering of html5 and CSS3 in the next version. Its always been lagging behind simply bacause the web moves so fast.

Design View rendering has vastly improved since css has become mainstream. Personally I just don't use any html tags or css that are not yet mainsteam 'standard'.

Gotta hold back a bit until the time is right. I know people like to use css that is not supported in older browsers but my view is the deisgn has to look the same in ALL browsers capable of supporting 'current' css. I'll use other tried and tested techniques if its not possible to achieve this in x-browser purely using css.

Report · Mar 15, 2012

Design view likes to pick and choose how it renders markup and styles. Applying the following style to an anchor, for example, will result in Design saying "no, I don't think so:"

a {

display:inline-block;

padding:40px 80px 40px 0;

background:transparent url('http://www.nia.biz/images/home_icon.png') center right no-repeat;}

This isn't an issue of conforming to web standards or having semantic markup. Remember, markup can validate and not be semantic or conform to standards (or both).

Interestingly enough, if you enable Live Code, the above style is rendered properly, and it continues to render properly even after disabling Live Code... until after you restart the application. That, folks, is called a bug.

I use Dreamweaver at the office because (a) it's what our office uses and (b) I appreciate some of its code-completion features and how it loads all linked dependencies. I rarely use an IDE's design view in place of an actual browser. Despite this, some people use design view for whatever reasons, and so it should work properly. Further, if it's a feature of a public release, it should work properly.

And not to go completely off topic, but the whole "deisgn has to look the same in ALL browsers" mindset is what holds progress back. Sites can look the best in a modern browser, but elegantly degrade in older browsers and still accomplish the same ends. Also, vendor prefixes are your friends.

Report · Mar 15, 2012

I don't like vendor prefexes. Perhaps I'm old-fashioned, but I like less code.

An example:

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

color: #000000;

background-color: #fff;

margin: 0;

padding: 0;

background: #402a67; /* Old browsers */

background: -moz-linear-gradient(top, #402a67 0%, #ffffff 70%) fixed no-repeat; /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#402a67), color-stop(70%,#ffffff)) fixed; /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Opera11.10+ */

background: -ms-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#402a67', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* W3C */

}

Now, if everyone would agree on a standard, the graduated background would be described thusly:

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

color: #000000;

background-color: #fff;

margin: 0;

padding: 0;

background: #402a67; /* Old browsers if needed at all */

background: linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* W3C */

}

That's 8 lines of code instead of 13.

One might ask how much longer it takes a browser to load that much extra code that is specific to other browsers and not the one one is actually using.

Dreamweaver does display the background correctly here, but only in Live View. And, with some of the colors, I find it nearly impossible to see some of the type.

Report · Mar 15, 2012

I'm astounded that regular posters on this forum either do not

understand the limitations in Dreamweaver Design View or, worse, do not

have a good understanding of CSS.

Deign View, by the way, has absolutely nothing to do with Live View.

Design View was programmed by Macromedia engineers who did an admirable

job last century. But it has not been significantly upgraded in 10

years. If I had to compare Design View to a browser, it comes between

IE6 and IE7.

Back when I was a Dreamweaver adviser, I used to ask them annually to

support display: inline-block. I have not been an adviser in over 3

years and they still don't support that property

We have even resorted, in recent products, to generating Design Time

style sheets to work around at least some of the more egregious

shortcomings of Design View rendering.

--

Al Sparber - PVII

http://www.projectseven.com

The Finest Dreamweaver Menus | Galleries | Widgets

Since 1998

Report · Mar 15, 2012

We have even resorted, in recent products, to generating Design Time
style sheets to work around at least some of the more egregious
shortcomings of Design View rendering.

I agree. Design View has to be one of the weakest features in DW.

I'm working on a project right now that has an APDiv overlay on top of a PHP rotating banner. I've been beating my head against the wall for a week trying to make the layout editable in Design View. It just can't be done. Normally I turn off CSS rendering and work with the un-styled HTML page. But this project is for a client who likes to work in Design View only. I finally resorted to Design Time style sheets which work great. Only now I have to teach the client how to use them. More work...

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

http://twitter.com/altweb

http://alt-web.blogspot.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 15, 2012

Al, I don't think that it even approaches IE7. I have produced websites that IE7 will render that are, essentially, illegible in Design View.

Look, I'm not looking for a "Live View," just an analogue for something fairly generic. I'm also not looking for a drag-and-drop editor. I suppose what I'm looking for is a workflow that will give me a general idea of what I'm doing with the code. It doesn't need to run all of the Javascript, it just needs to show something approaching layout.

I would love to see a color picker that works with gradients. I would love to see structure actually appear with the flow of the divs on the page (and I'm not even looking for accurate AP div placement). There are dozens of other enhancements that could be put into the application to make things easier to check without the need to do "live view" and browser check. constant browser checking slows down the workflow.

Now, I have not been using Dreamweaver since it's inception. I have used MX, 8, 9 (CS3) and CS5.5. I, like you, am pretty shocked that the Design View engine has not been updated in the slightest since MX.

And for the stuff you're doing, your workflow must certainly be a lot slower than it needs to be.

Report · Mar 18, 2012

ufff finnaly.... it took me so much time to create an account to post this... anyway...

I use dreamweaver just for intellisense (autocomplete) feature, for the design view I use Firebug extension under Firefox, you can adjust and play with CSS style and HTML, and see your page and DIVs moving in real time!, it's really a powerful tool and there are many extensions for it, the nice thing is that there is a version for all major browsers- IE, Safari,Chrome (I prefer Firefox bcz it's opensource and it's not biased like other browsers, does not advertise for any company(Microsoft,Apple,Google) )

ps:while changing a css style with Firebug, use up and down arrow keys to increase and decrease or change diferent values and see the page updating in real time, and guess what it is open source

conclusion :

Dreamweaver is good for general structure---->Firebug for details (use both, I also use alot Notepad++)

Let me know what you think

-------

http://www.freecomputerrepairing.com

Report · Mar 18, 2012

Yes, simple items sometimes display badly (was trying to make an example but was not able to get it to not work ).

Luckily, it's a simple matter to test online. It seems a pretty easy thing to incorporate Firefox into the Design View, however. That seems like a great partnership. Or go with Opera and fund that corporation.

Report · Apr 03, 2012

My attempt to answer the discussion question:

No one has the answer, except for the people that created it. (Sorry, thats all I got. The rest of this post will be me explaining my frustration with design view.)

My ideas on this topic:

I have been thinking about this topic for a couple years now. My conclusion is that the problem has to do with my (and your) expectations. My hopes for design view were high (too high) when I first started using it. I had expectations on the level of a kid on Christmas morning. But, when I started trying to design in design view, I felt as crushed as the same kid finding out on Christmas morning that Santa doesn't exist, because daddy ran off with a hooker and mommy was to drunk to remember to buy Christmas presents.

The design view, upon first glance, seemed, to me, to be a visual html layout editor. I didn’t know that much about html or css or any code and I was hoping that design view would allow me to create web pages without having to obtain an in depth knowledge of these things. Unfortunately, that is not true. The only positive thing I can say about design view is that it forced me to learn more about html and css so that I do not have to rely on it.

Since I have learned more about HTML and CSS I have been using dreamweaver as a notepad because I like some of the code editor features. I still get pissed off though every time I look down at the design view and see that my content all messed up. I do like that they have a live view option available now.

My plea to Adobe is that they fix the design view so it displays like a browser.

To sum it all up:

I think design view was poorly designed and is simply not good at performing the task that I expect of it, much like my father that ran off with a hooker and my alcoholic mother.

Report · Apr 03, 2012

Erik, I'm sorry your life turned out so badly.

(Oh, this wasn't autobiographical?!)

I fully understand where you are coming from. One expects Dreamweaver to show something akin to "reality™" I'm using both CS3 and CS5.5 and the latter does offer "live view" that does offer the Browser peek. Live view will run JavaScript and generally act normal, though one cannot click on a link and have it activate. So it does serve for what you are looking for, but you cannot place a curser in a spot then add a photo or insert a div from that view.

Frankly, I'd like to see something that is, actually, editable and is a little more sophisticated. I am not expecting it to run JavaScript and I am not expecting links to be live. And, perhaps, that is because I am used to the way Dreamweaver has always worked.

I still check everything in a browser (actually several browsers).

Report · Apr 14, 2012

mhollis55 wrote:
I fully understand where you are coming from. One expects Dreamweaver to show something akin to "reality™" I'm using both CS3 and CS5.5 and the latter does offer "live view" that does offer the Browser peek. Live view will run JavaScript and generally act normal, though one cannot click on a link and have it activate.

Actually Dreamweaver's Live View does in fact allow you to click on links and move throughout a site or even external sites. You just have to hold down Command (Control on a PC) while clicking. Alternatively you can turn on "Follow Links" and the very next link you click will happen without having to turn on Cmd/Ctrl. Or turn on "Follow Links Continuously" and the behavior remains on until you turn it off. The reason it is not on by default is so that you can just click on a link and have it select that particular link element to style it rather than taking you to another page.

In Live View, you can even enter information into forms and submit them. That's because Live View is actually a real browser using the Webkit rendering engine. That also means it renders pretty much exactly as other Webkit browsers like Safari or Chrome. In fact, you can actually just browse the web in Dreamweaver's Live View if you want. Search at google, login to websites, shop at amazon, etc.

Right now, Design View best works as an HTML content creation and editing tool rather than a layout tool. I mostly use it for directly inserting, writing, and editing content like Heading text, paragraph text, and sometimes images. Almost everything else should be coded in Code/Split View. But Design View also works well for selecting objects you want to edit in code.

Report · Apr 14, 2012

Hmm, didn't know that.

I do wish Adobe would have used something other than Webkit for Live View—in fact, I'd love to see an Internet Exploder engine on the Mac version, so that I don't have to run an emulator. But I do understand that Webkit is Open Source, so it is completely logical to see Adobe use it.

I alwo wish Adobe would come up with a means of depiction of a color ramp when used in CSS3 other than the method they're using now. It would be really cool to use the color picker with it and change the start color using a method other than hex code.

But then again, I'd love for the W3C to get beyond a proposal for their CSS3 standard and HTML5. Adobe could push here, but I do see what Microsoft's "pushing" did for Internet Exploiter: Made it incompatible with everything else.

Report · Apr 14, 2012

But then again, I'd love for the W3C to get beyond a proposal for their CSS3 standard and HTML5. Adobe could push here, but I do see what Microsoft's "pushing" did for Internet Exploiter: Made it incompatible with everything else.

Internet Explorer 9 is a fine browser. It is lacking support for a relatively small amount of CSS3 properties. IE 10, soon to be released, fills in the gaps. I'm not a Microsoft evangelist, but in our capacity as writers of advanced script animations, IE9 is far superior to any other Windows browser in terms of being able to render smooth animations. Not unexpected, the 2 best browsers in terms of smoothness, are Safari (Mac version) and IE9, which of course is only available for Windows. Apple and Microsoft know their operating systems better than anyone else, and it shows.

Report · Apr 04, 2012

Back when I started using Dreamweaver (version 2.0 for the Mac), I relied on Design View because at that point in ancient history we (and by "we" I mean all computer users of either OS platform) had been brainwashed into an WYSIWYG mindset. Dreamweaver is NOT (and in my experience never has been) a WYSIWYG software program.

Once I figured out how unreliable Design View is, I started working 97%-99% in Code View only and checking the page in each of the browsers installed on my working computer. I will sometimes use Split View to quickly check out a change, or Design View to help me parse how DIVs are (or aren't) playing well together. And I think I've switched to Live View maybe three times since it became available.

Code View + real-world browser works best for me. That's my habit, and I'm sticking to it. Until some muckamuck does something that forces me, kicking and screaming, into the 22nd Century.

Chris

Report · Apr 14, 2012

Sorry, I fail to see what all the fuss is about.

I normally do not use design view except if I want to find a particular piece of code. Nor do I use live view except to see what happens to third party plugins that dynamically change or add class attributes. the latter enables me to change relevant properties to suit.

Never will I use design view or live view for the design of my project.

I have a second monitor that shows 3 browsers, namely IE9 (in which I can test IE7&8), FF and Safari. When I want to test my design, I go to these browsers. After all, that is the end goal, to make sure that the user gets the correct experience.

Gramps

Wappler, the only real Dreamweaver alternative.

Report · Apr 15, 2012

Well the point of Live View and Design View is to be able to see your changes without having to refresh a browser. Even if you have the browsers on a second monitor, the workflow is still slower and you still work more "detached" than if you used the built in Webkit Browser Live View integrated into the development environment.