[WIP] new website design #266
Reference in New Issue
Block a user
No description provided.
Delete Branch "newsite"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Update the structure and format of the template pages and CSS files to implement the new website design as discussed in the following issues:
Currently using the CSS flexbox model for the layout to facilitate a responsive design along with our refreshed look.
@rho_n Could Tags be included under the Project heading?
@archer72 I have been thinking about where the Tags link should go. I can see value in having it there. From the design docs, I get the impression the idea is to keep that menu very minimal. I was also thinking it could go in the Project "swim lane" next to the About button. Opinions @ken_fallon?
Some changes that I would like to suggest.
Remove the menu list at the top " Site Map - skip to main content" and "Home Upload Download About". They are replaced by items in the swim lane.
Change the Welcome text to
"Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a
welcoming community that offers positive feedback and encourages respectful debate.".
Change "Podcast" to "The Podcast"
Change "Project" to "The Project"
Add a Icon to the "Project" Swim lane called "Search" with logo similar to https://svgsilh.com/svg/189254-00bcd4.svg
In the section "Latest Shows" please add a sub item of the summary, to visually match the "Latest Comments" section.
The grey background makes the site look a little sad. Can the background of the top banner slowly fade to white.
We need to have a happier colour scheme.
The icons are MASSIVE when viewed View > Page Style > No style.
In elinks there is a [IMG] link and then the text (eg record) next to it is also a link.
Change your config so your own HOSTNAME/alias is used in the "This page was generated by The HPR Robot at Fri, 01 Aug 2025 00:03:50 +0000"
I have to say that I don't like having a qrcode on the page at all. It completely is taking over the site (in mobile mode) and is taking away from the HPR splash icon. It makes sense to have a qrcode logo on a presentation to get people to your site, but people are already here.
In the screenshot above the HPR is also redundant if we have Hacker Public Radio - so that should also go.
The splash logo is getting hidden by this design and perhaps we should just use the regular HPR logo.
There is also no reason for the menu "Home - upload - download - about" in the top section as it's repeated.
14:36
We have precious little space to get our message across in either the desktop or mobile versions so we need to be more punchy.
I don't think the card system works well on the https://hpr.horning.us/syndication.html page.
The priority/frequency of subscription is top down in the original
Where as in the card version the eye goes to the right most area of the page (why adverts in the right side of a magazine cost more than the left) and they hit the subscribe to the entire archive !!
The cards for the episodes https://hpr.horning.us/eps/index.html also feels cluttered and should be listed top down without having side by side.
The https://hpr.horning.us/correspondents/index.html page could do well with the cards as it's more democratic having it flow on the page. That should have the host profile listed as well.
Good points and I agree with your assessment. I have started making changes in my local repository. Will push up for review soon.
My initial interpretation of the swim lanes was that they would only appear on the main landing page, and that has been the reason for my hesitation in removing the top menu. I felt we needed some kind of basic navigation for pages other than the landing page. Is that correct, or should the swim lanes be included on every page as the are the equivalent of our menu system on the current site?
For accessibility issues I will keep the skip to main content link, but will hide it using CSS. It will be visible when viewed without CSS, but feel that is an acceptable trade off.
Yes keep that, and your approach is good.
Yes it should only be on the landing page. Then perhaps on all other pages there should be only the option to get back to the main page ?
I was thinking of making the main "HPR" in the header a link back to the main page to solve that issue. Clicking on the main logo is fairly standard practice for getting to the landing page
Yes sounds good.
@archer72 and @ken_fallon I was thinking about the tags page. I think the search page and tags page to be combined under either the existing search page, or under a "find" page. If we go with a find page, I would use the magnifying glass icon in the swim lane and change the text from "search" to "find". Thoughts?
Good idea.
Should the first swim-lane button on the second row on the front page on the newsite branch say 'Host' or 'Hosts'?
Good catch. I agree, think it should be 'Hosts'
023c041706to454d548ce7The blue big HPR and the orange of the splash logo seem a bit disjointed to me - not sure what to suggest though. As this is not better
Can we have a clear breadcrumb return path for each page. So the page title "h1" has a link returning to home.
The entire site should just be one level deep, and the same can apply to the hub pages.
Doesn't have to be this but something that spells out how to get back. Clicking on the HPR logo is a bit unintuitive.
Can we have the welcome text more prominent please. Getting rid of the welcome h1 heading and just leaving the text.
Can the call for shows also be more prominent but in a different way. A bit like the 'cards' you use elsewhere.
View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.