New Website design Notes

Notes 2020-07-09

On 08/07/2020 22:31, Bob Bending (editor TCJ) wrote:

 

1. Although having the login prominent is good in some ways it really takes up a lot of space, especially on a mobile. I think that having a menu item (either main menu bar or icons above) to access this would be better. Perhaps titled Login or Account. The current site was moving to this with the "Home" menu item having all of the user account stuff and was the default on mobiles.

We could ditch the ‘Forum’ icon and have an account/login icon in place of it. The Forum is represented on the page anyway and it’s a menu item.

Its tricky, the forum is becoming quite active and adds content that will increase the sites attractiveness to newcomers especially via search engines. We could ditch the help and make that a login/account information icon that brings up either the login screen or the user preferences screen. On this login screen/menu there could be a help button and search bar. Consider it as a user login/information page access. Most websites have this in some shape or form.

 

2. I think we want all of the possible site access menu's in the top menu bar somehow. It is all well and good having a separate area with icons for some menu's but this makes it really difficult for blind and low sight users. The current system has all of the menu's in one place and "render" to screen reading software quite well. We could do this by just adding an Extra main main item named something like "More" that has all of these extra ones below it.

The menu replicates what is currently on the site.  There’s a finite number of items that can go into one menu… look at the narrower page visual and it’s pretty tight. Events and Whats On could fall under one menu item. For Sale is a board, but is also a Menu item, so that could be cut to make space for another item in the menu bar.

Yes, but if we replicate the mobile menu with the right hand sub menu icon, that sub menu can have all of the other system menus in it (This could be multiple menus deep if need be). When seen on a blind screen reader there would be one set of items to choose from then matching the existing site. The Admin menu item is only shown when someone with admin privillages logs in, perhaps this could be "Sub menu" and the first item in that submenu would be "Admin" if the person is an admin user ?

 

 

3. I think we will need a menu item like the "3 bars" to bring up the left hand side menu's when needed for admin. The front page needs admin as well like editing etc. This would introduce a thin column on the left hand side with the admin control functions. Normal users would not see or use it. Or something else needs to handle this.

I don’t understand why the front page needs an admin strip at all – there’s an ‘admin’ in the menu, which would presumably take one to a page for admin.  The front page is essentially a welcome page. We don’t want to clutter it with content that doesn’t need to be there and compromise the look.

The left hand menu is integral to admin functions. The Admin menu item just selects an area of administration management. The left hand menu provides context specific functions/tools for the editing and manipulation of data like you would have with any content editing program. Only people administrating the system would see these menus. For example when editing a page you might see (The additional left hand column items wouldn't be there on the newer layout):

 

4. I think on a mobile the whole page will need to scroll. There just is not enough space to have all the title at the top all of the time. There would be to little content on the page.

 

I increased the depth of the mobile visuals to imply they were scrolling and it says in the text next to them they scroll.

Ok, I thought you suggested to scroll the area under the top banner/menu rather than the whole page. I think that was a previous idea or I got that wrong.

 

 

5. The group news could be below the TC news with both of these only having 3 entries each they could be in the same block. When you click on these it would take you to the news system pages like at: https://tandem-club.org.uk/news. On a mobile this looks like a Facebook/Twitter app and allows members to add items as well as admin people.

There’s a Groups item in the menu, with group news falling under it. I would suggest this is enough. The tandem club news is global, effecting all member, so can be justified to appear on the front page. Not so the groups. I would resist adding more content to the front page.

Yes, reducing the content is needed. However, it ideally needs changing, relevant and interesting content. The TC news items are static for months, sometimes years. The regional groups news is added by the regions and members and so we have a large army of people who can add content. When they see their content on the front page it also encourages them to add more content. What I am suggesting it that there wouldn't be any additional blocks or content, but the "Tandem Club News" section would have, say, two items of news from the TC and then 3 random recent items from the group news (This is already random on the current front page).

 

6. I wonder if we want a top icon for the regional groups ? One of the main aspects about the TC is going out on rides with regional groups ?

Five icons should be the limit. On the narrower layout, there’s no more room – unless we replace the For Sale icon with a groups icon. For Sale is represented on the front page, so it’s still visible and accessible.

But not on the mobile version. Its tricky what to put and not put. Not sure which one should be more prominent.

 

 

7. The front pages content is different between the desktop and mobile (not just the style and block positioning) so it would not be possible to do this using the normal WEB CSS style sheets. These style the same content in different ways only. We can however achieve this by rendering a completely different front page for mobiles from the server. So this is possible, but it would then mean the web site editor would have to edit two separate front pages.

The current site is not ‘mobile compliant’. From a design view, the mobile page should not try to replicate the desktop page as the format is portrait versus landscape and the area is much smaller. I would recommend at least separate front pages even if the ‘innards’ are not mobile friendly.

Well, it is mobile compliant, but could be better :) If you set your mobile to give the desktop site you get the left hand column, differnent sized text and differences on various of the sites pages especially the news page. But it is always a question of how far to go. We don't have an army of volunteers managing the site so we have to keep it relatively simple. We can make an exception of the front page but the other pages will have to be the same for mobile and desktop as to content (The top logs/menu would be the only thing different).

 

 

8. As this newer page format actually matches the existing pages more closely in terms of the content in the News and forum blocks etc, this would be more trivial to implement. The current websites blocks are formatted using the style engine, so we just need to update those styles.

That’s good

 

9. One thing we lose is the old "gold" line style from earlier Tandem Club logos. I have no problem with that, but just a mention.

Yes, I know. I am not keen on the gold on the website.  I don’t mind it on the cycling tops.

 

Is it ok for me to forward this around the other TC internetgroup/webgroup people for comments/ideas ?

Yes, that’s fine by me Terry.  Don’t forget these are just visuals, showing how I think it should look, from a design perspective. Whether something is in the left column or right, above or below something else is not that important at this stage. What we want to do is ensure the site looks good, is more ‘airy’ compared to the current site and is easy to use.

If you circulate it, are you (or someone) going to compile any feedback or comments so I don’t receive conflicting requests/suggestions?  I have to start prep for the next magazine soon, so it may take a back seat during that time.

I don't have the time to do this. I have to run a business and I am already spending too much time on the TC website already. I think that before going further we need someone who will edit and manage the content on the website, Facebook, Twitter etc from a TC members point of view. This, ideally a committee person, could handle compiling the feedback/suggestions and make all of the textual and graphics changes to the website as well as getting the pictures and other media content etc.

 

Notes 2020-07-08

1. Although having the login prominent is good in some ways it really takes up a lot of space, especially on a mobile. I think that having a menu item (either main menu bar or icons above) to access this would be better. Perhaps titled Login or Account. The current site was moving to this with the "Home" menu item having all of the user account stuff and was the default on mobiles.

We could ditch the ‘Forum’ icon and have an account/login icon in place of it. The Forum is represented on the page anyway and it’s a menu item.

 

2. I think we want all of the possible site access menu's in the top menu bar somehow. It is all well and good having a separate area with icons for some menu's but this makes it really difficult for blind and low sight users. The current system has all of the menu's in one place and "render" to screen reading software quite well. We could do this by just adding an Extra main main item named something like "More" that has all of these extra ones below it.

The menu replicates what is currently on the site.  There’s a finite number of items that can go into one menu… look at the narrower page visual and it’s pretty tight. Events and Whats On could fall under one menu item. For Sale is a board, but is also a Menu item, so that could be cut to make space for another item in the menu bar.

 

3. I think we will need a menu item like the "3 bars" to bring up the left hand side menu's when needed for admin. The front page needs admin as well like editing etc. This would introduce a thin column on the left hand side with the admin control functions. Normal users would not see or use it. Or something else needs to handle this.

I don’t understand why the front page needs an admin strip at all – there’s an ‘admin’ in the menu, which would presumably take one to a page for admin.  The front page is essentially a welcome page. We don’t want to clutter it with content that doesn’t need to be there and compromise the look.

 

4. I think on a mobile the whole page will need to scroll. There just is not enough space to have all the title at the top all of the time. There would be to little content on the page.

 

I increased the depth of the mobile visuals to imply they were scrolling and it says in the text next to them they scroll.

 

5. The group news could be below the TC news with both of these only having 3 entries each they could be in the same block. When you click on these it would take you to the news system pages like at: https://tandem-club.org.uk/news. On a mobile this looks like a Facebook/Twitter app and allows members to add items as well as admin people.

There’s a Groups item in the menu, with group news falling under it. I would suggest this is enough. The tandem club news is global, effecting all member, so can be justified to appear on the front page. Not so the groups. I would resist adding more content to the front page.

 

6. I wonder if we want a top icon for the regional groups ? One of the main aspects about the TC is going out on rides with regional groups ?

Five icons should be the limit. On the narrower layout, there’s no more room – unless we replace the For Sale icon with a groups icon. For Sale is represented on the front page, so it’s still visible and accessible.

 

7. The front pages content is different between the desktop and mobile (not just the style and block positioning) so it would not be possible to do this using the normal WEB CSS style sheets. These style the same content in different ways only. We can however achieve this by rendering a completely different front page for mobiles from the server. So this is possible, but it would then mean the web site editor would have to edit two separate front pages.

The current site is not ‘mobile compliant’. From a design view, the mobile page should not try to replicate the desktop page as the format is portrait versus landscape and the area is much smaller. I would recommend at least separate front pages even if the ‘innards’ are not mobile friendly.

 

8. As this newer page format actually matches the existing pages more closely in terms of the content in the News and forum blocks etc, this would be more trivial to implement. The current websites blocks are formatted using the style engine, so we just need to update those styles.

That’s good

 

9. One thing we lose is the old "gold" line style from earlier Tandem Club logos. I have no problem with that, but just a mention.

Yes, I know. I am not keen on the gold on the website.  I don’t mind it on the cycling tops.

 

Is it ok for me to forward this around the other TC internetgroup/webgroup people for comments/ideas ?

Yes, that’s fine by me Terry.  Don’t forget these are just visuals, showing how I think it should look, from a design perspective. Whether something is in the left column or right, above or below something else is not that important at this stage. What we want to do is ensure the site looks good, is more ‘airy’ compared to the current site and is easy to use.

If you circulate it, are you (or someone) going to compile any feedback or comments so I don’t receive conflicting requests/suggestions?  I have to start prep for the next magazine soon, so it may take a back seat during that time.

 

Terry

 

Notes 2020-07-05

Hi Terry,
I can create graphics/icon to whatever spec/format, as I did for the visuals – they are vector, so can be scaled to different sizes before saving to web format.

  1. Obviously front page space is at a premium, but do we want to have the major advertisers there on the front page of the mobile version ? I'm not sure how much these advertisers pay to the club (or even it they are still paying !).
    We could include footer adverts, like many apps have. We can either as the advertisers to supply to a given pixel size or I can create from whatever is available on their websites.
  2. I think it would be best to do away with the top large pictures on sub pages to save space and increase useful content.
    Agree, the pictures are for the front page primarily. It may be we can use the same device for some of the article pages you mention.
  3. The news ideally should contain regional groups news and some forum news as these are things that are normally changing, interesting to users and search engines. The TC news is normally quite static. We need to try and get the members to contribute content as that makes the site more dynamic and pulls members in as well as making it much easier as more people are adding content.
    We could include some articles from the magazine – for the benefit of non-members in that area, to entice them to join.
  4. It might be worth, if possible, to put one random picture from the members uploaded pictures somewhere there as currently done. A lot of people comment on these when they see the website saying I remember that, where was that etc. But space is at a premium on the front page.
    Would it be possible to make it one of the images in the banner?  Although I looked through some of the photos, and some are that good.  I think we should be a little selective about how we portray the club on the front page. All images would be available in the gallery pages.
  5. The admin pages (membership etc) will need to be quite different due to their operation. We would probably have to keep the left hand menu pane for example.
    Changing the layout to suit the admin pages is not a problem as they are more function based, as long as the elements in the menu pane utilise the same styling as the rest of the site.
  6. The news page (like a Facebook/twitter app) would have its own simpler style as it does now but have a graphical feeling to match the rest of the website.
    There seem to be two news sources: The Club News as it is on the front page, and Regional Groups/Member’s News (second item under the [Info] sub menu.