Novice web designer needs help

[runcat]

Client gave me a pdf that they want made into a simple website. I'm a print designer, so trying to use InDesign, as that's what I'm most comfortable with. The web site is 9 pages that need to scroll vertically (basically one TALL page, that users will scroll down), but the header at top (logo/contact) needs to remain stationery. I've followed instructions on blogs, but with no success. When I create a TALL doc and preview it, it fits to the vertical space on screen, which means it's super tiny/narrow. If I keep each page as a separate page, and try to adjust transitions to go "down" ... it STILL scrolls left to right. And this doesn't even touch the "top banner needs to stay stationery" dilemma. Ugh.

I know this is web design 101, and I'm being lame. I dabbled in coding in the '90s, then let it go and stayed with print. Obviously regretting it now. Please help!

[BobLevine · Accepted solution]

Either find a web designer to subcontract this out to or turn down the job.

While products such as in5 can turn InDesign into an HTML authoring tool, I don't recommend it for that. The right tool for the right job should always be rule one and InDesign is not the right tool for designing a website.

Even for a simple one page site something like Squarespace would be a far better choice.

[jbfaulconer]

Adobe needs a WYSIWYG web site designer.  What happened to Muse and I remember the first several iterations of Dreamweaver youu were able to build website without any html experience.  Come on why not buy squarespace? Its not like you don't have the money.

[James Gifford—NitroPress]

WYSI web tools have come and gone and, without exception, been miserable failures when taken outside very narrow areas of strength. It seems as if mapping a visual view to relatively simple code structure would be a snap, and would have been within early generations of HTML... but nope. It's eluded some of the best in the game, starting with Adobe and each of the several tools they acquired.

(I've tried each as it came along to glowing praise, starting with, I think, HoTMetaL. All have fallen into the "absolutely amazingly amazing!" mold... as long as you stay within the narrow lanes of what the Dev and Marketing teams polished to perfection.)

The counter argument is that you don't need a 100% WYSI tool if you get a decent structural view as you work — and DreamWeaver gets pretty close. (Think of it this way: 3D modeling is nice stuff, but we still work from blueprints to actually get mechanical engineering and fabrication done.) Working with parallel code and rendering windows is the only way to get past Web Koding 101.

But over twenty years in, there's still a need to know code and HTML structure and CSS to get to any desired visual end in a browser. And that's after the great cleanup of HTML5, CSS3, the various CSS meta-languages and other things that sorted out the horrid mess of "every browser for itself!"

[Christopher3440329747o5]

So why have the option in InDesign if it doesnt work?

[James Gifford—NitroPress]

Export to HTML? It works extremely well, especially if you understand how to create and assign CSS code to the export.

It does not, however, automatically export a fully functional standalone web page. It exports a web document.

And just in reference to my above comment: I don't know of anyone, Adobe or other, who has a truly high-functioning WYSI web creator. The biggest players in the game (including Adobe) have swung at this goal repeatedly for almost thirty years and not one of the solutions has been much worth using. The best is still Dreamweaver, which is more of a 'programming workbench' than anything like a WYSIWYG web designer.

It baffles me why this problem remains so difficult to solve. But InDesign is not even an attempt at being such a solution.

[Derek Cross]

It won't fit all your customer's requirements, such as vertical scrolling, but a simple InDesign Publish Online document might suit them if your customer is on a tight budget. I would be easy to mock a quick sample up for demo purposes.