-1

I'm designing a website, and it's probably going to have some long walls of text because it'll be an info site. I have two design ideas that would make it easier to read, but I can't decide.

Both designs involve columns, about as wide as a phone screen or a little narrower, designed to have 15 words or so per line. My first design idea is to place the navigation and search on a narrow bar at the top, wall of text in the middle, and any illustrations between paragraphs. Then at the bottom there will be a thing about the author, publication date, copyright stuff, similar articles, and just below that is a square of ad space as wide as the column, followed by a list of forum-style comments. Or another plan would put in a square ad panel next to a small comments panel, below everything. The sides will either be just a pattern background for a phone size screen, or if it's wide enough for some padding, I'd put in a 50 pixel stripe and a panel for more article tags and ads The main disadvantage is a lot of scrolling.

The second idea is to do something similar, but use a lot of columns that end at the bottom of the page. The next column is to the right by 25 pixels, and the author and ads are at the far right in their own columns. There will be a navigation bar that follows the user's scrolling at the top, and a similar bar of more article links at the bottom. I may put in a divider line between the columns. Comments will be beneath the ad space on the far right. The main issue would be the unusual layout, but then again it's uniqueness is kinda cool.

I don't know which design to use, so what would you use? It's for a college final, so I don't have a client to ask. It has to be readable on a phone, a tablet, and a PC, and both templates seem to work well.

enter image description here enter image description here

closed as primarily opinion-based by ChrisF, msp, Charles Wesley, Joshua Barron, user34398 Dec 22 '14 at 4:03

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Would you be able to provide some wireframes to illustrate this in a better way? – 80gm2 Dec 13 '14 at 0:09
  • I'll add some soon... Computer issues, can't upload from my laptop. I'll do something though. Hang tight – Vector Lightning Dec 13 '14 at 0:12
  • There is a feature on the question section that allows you to create wireframes. – 80gm2 Dec 13 '14 at 0:16
  • Oh really? I'll have to check it out sometime, but too late now that I got pictures uploaded – Vector Lightning Dec 13 '14 at 2:32
  • Both. It is more work but let the user set the number of columns and text size. – paparazzo Dec 13 '14 at 13:30
0

I have tried using columns for a long texts when page was viewed on a wide monitor (over 1000px). It looked good but there were problems when columns were longer than the height of the monitor.

Reader have to scroll to read one column to the end and then scroll back up to start reading the next column. This isn't a problem in printed media because the whole page is in full view all the time.

I'd recommend using one column for the text and use columns to show content of footer and such when page is viewed on larger monitors.

But if you can reliably control the length of the columns on different sized screens then use multiple columns for text, in every other scenario use just one.

0

As you move into multiple media (web to phone) creating transportable content is more and more important. Content management can mean a lot but one is creating content that you can publish to many formats. HTML, CHM, PDF, HTML5, XPS ......

In the Microsoft WPF desktop world there is a format FlowDocument that is a pain to create but presents nicely and user can even set columns, font size, and search. A real weakness is lack of a table of contents.

Not the answer you're looking for? Browse other questions tagged or ask your own question.