I want to start getting my website hammered out, and I realize that I'm not exactly sure how to balance an attractive design with basic readability.

I generally don't like templates and programs, preferring to work things out from the bottom up as much as possible. I've got some basic HTML "programming" under my belt, but everything I learned was 5+ years ago, and before CSS.

If possible, I'd like to design something with a "frame" effect over the top of the page and on the left all the way down with a background for menus and buttons, with the background fading into solid color for the main "text" portion.

Based on my experience, I'd probably be using Tables for this effect, unless actual Frames (without scroll bars) wouldn't be too distracting/cheesy.

Specific questions I have right now:

- How can I achieve this effect, allowing for multiple screen resolutions/window sizes?
- What colors/fonts do you suggest for the text area to maximize readablity?
- Is there a way to allow readers to customize the text area for their own preferences?
- Does this basic design make sense to you? Should I forgot the "frame" effect and just have solid "text" pages?

 

 

 

Reply

Taking your questions in order:

The best way to accomodate various sizes of screen is to use DIVs and some CSS hacks and tricks. It doesn't make for very pretty code but the site will work, and until all the browsers agree on how to interpret the standards its the only method we have. You would need to make IE use certain parts of the CSS, and other browsers use other bits, and it can all become a bit complicated. You can also set a minimum width so the layout does not get destroyed on smaller screens, but forces the browser to scroll.

Fonts should be sans-serif as they are easier to read on screen. Verdana is the "classic" font to use. It was designed for the web, has good letter spacing and punch width, and still has very clear letter shapes. Trebuchet MS is also a good choice, slightly different but still very clear and easy on the eye. Helvetica and Arial are usually the next choices for font, for similar reasons. Text colour is usually easier as dark on light, rather than light on dark. Take the main colour scheme for your site, choose the darkest colour you use and make it as dark as possible so it is still distinguishable as a colour. If you want, go all the way to black for extreme clarity, but it can be a little bland.

You can write a few CSS sheets and let users switch between them with JavaScript or PHP. Quite a few sites now offer block colour choices, such as a blue, green, orange, yellow, or greyscale stylesheet to choose from.

The design makes sense to me and is entirely possible using only CSS if you want. Presumably by the frame effect, you mean the title block or heading would remain static? Using DIVs you can push the text down by the height of the title block and when a user scrolls, the text will slide under the title, as long as you make the title DIV stay static. It is used quite well on many sites, but if you do use that effect, try not to make the title area too high, or it can look very weird and out of proportion.

One final comment: don't use tables for the layout. Tables were designed for data and can seriously go wrong between browsers. DIVs are a much better choice and, using CSS, are easier to change, and far more customisable, than tables are.

 

 

 

Reply

Let the first Idea thats comes to mind is a tree navigation

http://www.destroydrop.com/javascripts/tree/

with this you can set up your books to open up at each chapter. Or set up your nav like this to do the same thing. But you have to do two things to achieve this one your nav and rest of your website will need to be coded to expand to the width of the nav menu so not to appear broken.


or you could do something like this (click on the examples)
http://solardreamstudios.com/learn/css/cssmenus.

But either way you look at it if you go with a frame design expect scroll bars. So not to break the fram demensions once the text goes outside the size of the frame.

But I think what your asking as well with the frame effect can be done by div's as well but they would have to be in absolute position and so you will lose the liquid layout.

what i suggest is look at these two sites especially this one

http://www.oswd.org/ this will give you an idea what your site might look like that is coded to standards.

also look at this site on how to incorporate all css into your site as well.

http://www.alvit.de/handbook/

I found this designs closly to what your asking

http://intensivstation.ch/files/templates/2/template-2.html

http://rinoa.nu/rinoa/

hopefully this gives a general idea what you want to do.

Reply

You know, I was planning to do something like that for my novel-in-progess this week. I can't wait until columns get integrated into CSS; then you can do two columns with adjustable height, width, margins, and padding. I'm honestly drooling. Until then, try two divs right next to each other. Keep the font at around 12px - 14px, but you might want to use percentages (~85% is 12, because I think browser default is 16px). Make use of padding! For creative navigation, you might want to make little arrows where the page numbers go, to make it feel like actually reading a book. Keep graphics to a minimum because people want to read the book, not admire your graphical capabilities; however, you might want to invest a leeetle bit of time into a papery background to improve the atmosphere.

Best of luck! I need to start on that project soon before I forget.

Reply