More Questions (sorry) - Post ID 249977

User 120663 Photo


Registered User
60 posts

As most of you know I am trying to put together a web site sample for a club that I belong to and have run into a few things that I am not understanding.

I will not at this time make the menu responsive as there could be several changes after it is presented to the board and members which is why I am labeling this as a concept.

Part of the problem is that for the menu there will be 14 buttons of which only 3 will have submenus ranging from 1 to 4 subs.
The width that I have to work with is 870px.
Questions:

1. I am having a hard time wrapping my head around the Breakpoint Management & Width Indicator shown in chapter 4 of the Quick Start Guide on page 2.
Is this for the responsive design or for the menu design as I do not see anything happening when I click on the +/- buttons?

2. This could be critical as I only have 870px and 14 buttons to work with so my question is this:
I have noted that Menu Builder does not change the width of the buttons in relationship to the number of letters in the buttons. In other words the width of the button 'Home' does not need to be as wide as the button for 'Officers & Directors'. I believe that this can be changed in the properties area but I read that once I do this if I want to make a change in the menu that it will not work on the buttons that I individually changed.

3. If I need to do 2 menus, say for example 7 above and 7 right below those how much of a problem will that be?

Steven
User 187934 Photo


Senior Advisor
18,744 posts

I think you should rethink the number of main menu buttons. That's a lot for your max width and as you stated you will have text limitations. If you want that many buttons set a break point at the spot where the text flows out and increase the buttons width so they stack and make two rows of seven.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 120663 Photo


Registered User
60 posts

I do not think I can eliminate some as I am sure it is what they will want/need.
I can combine a couple of them by adding sub menus but first I want to give the break point suggestion a try first and see how it will look.
I need to get back into chapter 7 of the guide to try to understand though. If I am struggling too much I may be able to get them down to 8 buttons which I believe will work.
Steven
User 271657 Photo


Administrator
3,816 posts

Why do you only have a width of 870px? Aren't you making a responsive site?
I think you should rethink the number of main menu buttons.
Have to agree with Eric on this.
You might need to get firm with the clients. Explain that websites are very different these days, they need to display well on many different devices and you need some leeway to be able to pull this off in a logical, easy to use design.
You might have a look at some other club/association sites to see how they handle navigation and layout:
https://www.google.com/search?q=website … +templates

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 120663 Photo


Registered User
60 posts

Paintbrush wrote:
You might need to get firm with the clients.


These are not clients but members and board members of an amateur radio club my wife and I belong to.

You might have a look at some other club/association sites to see how they handle navigation and layout:


I have. for example:
http://www.w3uu.org/
http://www.ragchew.org/
http://www.qsl.net/w2cra/
http://www.qsl.net/arllc/
http://www.k2td-bcrc.org/

This is just a sample of the thousands of amateur radio sites across the country.
While there are many buttons I am trying to make a site that is cleaner without having to scroll through too many lines.

Why do you only have a width of 870px? Aren't you making a responsive site?

Please see the 2nd paragraph in my opening statement. I did not feel confident enough to attempt it besides.
If I am doing something wrong in using 870px please let me know. I am open to correction and am not a master coder like many of you folks.

Steven
User 271657 Photo


Administrator
3,816 posts

:o OMG – those sites look like they haven't been touched since the dawn of the internet! :lol:
(except for the WordPress/Harrisburg site) Here's one that's easier on the eyes: http://www.bloomingtonradio.org/
Less clutter makes it easier to read. There are 16 links within the main top nav, yet everything on offer is easy to find within a compact area. Much nicer than those sites with so many buttons/links on display they crowd out the content.

Even if you're building a fixed-width site, 870px is kind of an odd width to settle on. Why so narrow if it's built for laptop/desktop screens? (Also, you wouldn't need a responsive menu – the break points would be useless.)
What are you building this in? CC Editor or something else?

...but members and board members...

I feel for you – design by committee is usually a lesson in frustration. :mad:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 120663 Photo


Registered User
60 posts

OMG – those sites look like they haven't been touched since the dawn of the internet!


I agree and further the Bloomburg site you gave is even cluttered. There is so much information on that first page that it is almost overwhelming. Should a new person visit I can picture their eyes crossing and then leaving.

I mentioned before that this is a labor of love and am trying to give them a concept of something that is clean, easy on the eyes and a reason for some who wants to stay and learn more about them. Most folks do not realize the critical roll that ham radio provides in an emergency. Both local hospitals have a room set up just for communications emergencies. There is also a close network with the Red Cross. Most of the events that take place is for fun but also gives us training for emergencies.

What I am trying to do is give a certain professionalism to the site as well.
I am not out to hurt anyone's feelings and their existing site looks halfway decent but they went the other way and in order to get the information they used micro text (for want of a better word) with most members complaining about the text size.

By the way. The original site was done in 2008! Time for a change.

Coding is done by my wife in CC editor v15 and I do the menus and fill in the text for each page. I try to help but neither one of us are professional at it so its always to the books when we run into trouble.

Peggy will answer you last comment on the width of the site. We are open to any suggestions you or anyone else has.

When I did our last website I was trying to learn how to do a 3 column layout. The author suggested a website of no more than 900px wide and it worked. At that time we were doing more with images on the site and I did not want the different browsers to mess things up so I stayed with a fixed width layout. I am about to take a course on responsive web design so I know I still have a lot to learn. Do you think a liquid layout would be better and more up to date?

Steven & Peggy
User 271657 Photo


Administrator
3,816 posts

Take note of the main menu, though. The drop-downs are a good way to keep a lot of links organized.

Since you're familiar with the Editor, you could start with one of it's templates. Have a look at: Themes > 3 column fluid. (This would also be easy to redo as a responsive layout.) See the differences between fluid, responsive, etc. layouts here: http://blog.teamtreehouse.com/which-page-layout

You could also give Responsive Layout Maker a try. It has some templates so you can get going with a responsive layout pretty quick. You can see how your design works at different breakpoints just like in Menu Builder. You don't have to worry about the perfect pixel-width, just add breakpoints as needed so your layout looks good on any device. When you have your layout completed, you export to the Editor and add your finishing touches (photos, videos, sliders, other scripts, etc.).
http://www.coffeecup.com/help/articles/ … ple-steps/

Hi Peggy :)
If you already have a good grasp of HTML/CSS, the responsive course should have you up and running in no time. I would say skip the fluid layout and get going on a responsive site. Added bonus – if a club member wants something "unreasonable", you can just say sorry – that doesn't work in a responsive layout. :lol:

Have fun with your course – and don't forget there's always someone around here who can help you.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.