I want to create a modern looking and functional website based on a 2 column layout with header/footer. The rightmost column will contain an accordion for navigation while the other will have all the contents (something like this basic layout) Hopefully using Ajax to dynamically reload the contents of each page without reloading the navigation accordion, menu etc.
I feel it’s important that the site looks good and works well for everybody, regardless of browser, screen resolution, platform, graphics/javascript off or on etc.
So the question is which solution should I go for? fluid, fixed, elastic etc? There’s also something called grids which I don’t quite understand but I believe solves the cross-platform issues.
I know basic HTML and a little CSS, but am by no means an expert and hope for lots of copy/paste solutions with tweaking and editing for my taste and use.
I feel it’s important that the site looks good and works well for everybody, regardless of browser, screen resolution, platform, graphics/javascript off or on etc.
That’s a noble aim, and is to be commended. So the first thing to do it forget about accordion menus. They are, for the most part, inaccessible junk—meant to impress, but sure instead to frustrate and confuse many users.
So the question is which solution should I go for? fluid, fixed, elastic etc?
Fluid or elastic are better, as they are more in keeping with the nature of the web—which is a flexible and changeable medium.
There’s also something called grids which …
… which is best avoided! … Others will disagree, but with anything like this—where a framework has been set up for you—the learning curve can be steeper, and the code a whole lot messier, than just building a layout from scratch, tailored to the exact needs of the site.
What do you suggest I start out with?
Learn how CSS works by getting a good book, so that you don’t have to depend on crummy CSS frameworks and grids etc.
So the first thing to do it forget about accordion menus.
I agree completely with Ralph on this point. What you need is a simple, intuitive navigation system that your visitors can use without having to think about. Accordions - and other fancy devices - merely show how clever the designer is.
As for fluid vs fixed, you won’t get a consensus on this. There are valid arguments on both sides.
Personaly, I favour fixed. I fact, I usually go for a similar layout to the template in your example. I can’t really give you any convincing reasons for this. But whenever I’ve used a fixed layout, I’m always reasonably happy with the result. On the couple of times I used a fluid layout, I found myself wishing I hand’t.
Thanks to both of you for your comments
I see what you’re both saying about ditching accordions, but I really like the appearance as well as finding them practical and space saving.
Actually I’ve spent considerable time on an accordion which, after a lot of tweaking, now looks like this. However, it doesn’t do nested items, so I’m giving that one up although I want to keep the same appearance.
In addition to navigating the site I have a large FAQ page (lots of text/image content) where I want to use another accordion for dividing tings up into sections. It seems the best solution when there’s lots of contents on one page. Perhaps I could I even use Ajax to dynamically load the contents of each accordion section instead of the whole page at once (saves the visitor waiting).
I found a Mootools “slide effect” accordion which allows you to expand each section without closing the other ones as well as buttons for expanding/collapsing all. I tried to turn off Javascript in my browser and fortunately it worked as I hoped by expanding all sections. So apart from visitors not having Javascript enabled, are there other potential problems it could cause? Would I have to rely on a different type of navigation for mobile users?
For navigation of the whole site I found a nested Mootools accordion which seems suitable for the job. That one also got fully expanded with javascript disabled. It looks very ugly in the demo, but I’m sure I can make it look similar to my first accordion with a little tweaking. So please tell me accordions aren’t that bad, when they don’t hinder visitors from navigating, even with Javascript turned off
I’m still confused about where to start as there are so many 2 column options to choose from. I actually even found some online “layout generators” which look very tempting, but I want to make sure they’ll be compatible with all major browsers/platforms as I don’t want to start all over again if they don’t. I’m trying to understand how a website can be made to work with both computers and mobile devices. From what I’ve picked up so far a certain device (say an iPad) outputs information from its browser header about it being an iPad, and because of that it can pick a certain CSS style sheet, right?
I’m a novice when it comes to CSS, and if I’m not completely mistaken the whole idea (apart from “styling” a page’s/site’s appearance) is to split the page into separate square/rectangular “sections”? If I’m right about this, is adapting a site to an iPad for instance all about choosing which “rectangle” section to include and exclude in that particular CSS style sheet? So I could for example exclude a huge image (defined in CSS as a “rectangle”) while it’s included in the regular (Mac/PC) CSS stylesheet?
Check out this link for the FAQ accordion-style page. I think it’s what you want.
Please don’t go with a layout generator. It makes it hard to modify and to change.
It’s true that you can define certain stylesheets for certain environments. I’ll explain more of how to do that later. Many sites do this. If you view the style sheet on a mobile platform (like Android or iOS), you can see certain sites differently than if you viewed it from your desktop. This is the same for laptops as well. This improves readability and comprehension. For instance, you wouldn’t want to display a 2000 x 2000 picture to an iPhone (or to anyone, for that matter - terrible web practice).
Look at this article for how to input what you want.
I’ll attempt to explain what CSS is right now:
There are thought to be many layers to a web page. There is the content/structural layer, which is the pure HTML, there is the visual/appearance layer, there is the…well, you can get into that later if you want. What this means is that HTML lays out what you want, whereas the CSS makes it appear like you want. That may be as simple as displaying certain ‘rectangles’, but that’s not all that it can do.
Sorry, I meant “boxes” of course
It’s been a few years since I first tried to get the hang of CSS and am in need of refreshing my knowledge. I fully understand the (awesome!) idea of how CSS can be used to style HTML tags. I also started to understand “the box model”, but I never quite got the hang of how these different boxes were used in combination to map out a complete web page.
Can this basic layout be used for a variety of devices using a variety of CSS stylesheets? From what I’ve read so far it seems that “grid” type sites are the way to go, but as ralph.m pointed out they’re best avoided -the idea seems very complicated. I found a demo of a semi-liquid/centered layout which looks very different when the browser window is made smaller, but I don’t understand how it’s done and if it’s something I can use. What do you advise I go for if I want to make the site work in a similar way?
Finally, the BBC site accordion looks great! Ilike the single “expand all/collapse all” button and the fact that it disappears while fully expanding with Javascript disabled. However, the Mootools slide effect accordion is a little fancier although the single “expand/collapse all” button of the BBC accordion would be nice to have. Perhaps it can be modified.
Any idea which accordion is used on the BBC site? I found the HTML source very complex to figure out.
I realize I’m switching between a lot of ideas here, but it probably just means I’m trying to think creatively in order to find a solution
Here are some more thoughts which I hope someone will comment on, mainly concerning the navigation methods, usability and functionality when designing for multiple platforms, with or without Javascript enabled.
Accordions for navigation:
Ralph.m: as much as I hate to admit it, I think you’re right about accordion menus, for the most part…
I want my new site to have some “wow factor”, but in the end designing a website should be more about keeping it simple, functional and deliver the contents in the best possible way.
However, the Mootools Slide-effect accordion is another story as it has practial use for the FAQ page(s) in addition to looking cool, so I’ve got both covered
3-section FAQ page:
Without the ability to sub-section navigation to the FAQ (an accordion would allow for that), and feeling that 3 site-navigation tabs would make it look complicated and messy I’m thinking that a single FAQ page would be neater and tidier (just a single “FAQ” navigation button).
Once on that FAQ page the user will be presented with a horizontal row of 3 tabs, such as seen here (scroll down the page).
Will the above ideas work well, or are there better solutions I should look into?
And will those navigation solutions adapt well for mobile viewing devices as well?
