Testing hyperlocal website layout #12
Labels
No Label
4opens
bug
Discussion
duplicate
enhancement
geekproblem
help wanted
invalid
question
wontfix
No Milestone
No Assignees
4 Participants
hamishcampbell
humann
adinfinitum
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: indymedia/indymedia-reboot#12
Loading…
Reference in New Issue
There is no content yet.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?
Hyperlocal Indymedia UX
This thread is for feedback on the UX for the Epicyon-based hyperlocal indymedia codebase.
classic - https://indymediadev.openworlds.info
modern - https://indymedia.openworlds.info
Description
Currently experimenting with CSS for the layout of the hyperlocal indymedia site.
It's an instance of Epicyon - that the author is extending in order to work for IMC's.
The design mockup is here.
Layout Experimentation/ Development
Please also explore the very basic test site. It's all hard-coded, and purely for developing a clean approach to the CSS.
The test can be found here.
Typography
We're currently also trying to decide on fonts, etc.
Other
[need to process our chat transcript to transfer key detail here]
Starting to look pretty good, haven't forgotten the banners.
http://hamishcampbell.com/index.php/2020/10/22/draft-of-indymedia-reboot-ux/
Of course, once the experiment looks good and functions well, then comes the challenge of integrating it into epicyon codebase with as little disruption as possible...
Guys, here are some comments below.
Mainly we should give a bit more space between things (the spaces indicated as "DIM A" would look maybe good if all the same). Main text justified, date font smaller than main text, icons aligned with the text box above, Change "Front Page" to "Home" so that the top buttons always show in 1 single line (currently on my phone if in portrait mode the wording "Front Page" doesn't work.
Oh one more thing that I forgot to add on my comments, give a bit more space as well between the main text box and the bottom "tags" and "icons"
Take a look and let me know if anything isn't clear.
Thank you, Ana
@Captain_Noodles
Thanks. Think I've managed most of that.
Will check in with you tomorrow.
Interestingly you get serif font by default with Apple by the looks of things.
Whereas I get sans-serif.
I have set a sans-serif font family for now, until we settle on fonts; so hopefully what we all see will be a bit more similar.
The date font is actually set to be 10% smaller than normal text - see if it looks right now that it's sans-serif.
If not, I will have to look deeper.
Let me know if I've missed anything, or for any further changes.
@mj-Saunders see attached the 3 banners requested. Mobile, tablet and desktop
@mj-saunders
Attached are the revised banner sizes. Do let me know if they look ok on your side.
Ana
on the devtest server https://indymediadev.openworlds.info/test-css/ all the links go to the old test server not to the new CSS am send people there to look and comment so this is a issue :)
@hamishcampbell should be fixed.
sorry about that
@hamishcampbell @Captain_Noodles
Did a very quick visualisation of what I think @bashrc was referring to a few days back - about the nav tabs not overlaying the banner.
Let me know your thoughts.
@mj-saunders looking at the visualisation above of what I'm goint to call the "classic template", I think we could look at the option of fading the top banner from top down. The black bar doesn't work very well as its introducing another break to the page that is actually not needed. I would leave the rest as it is.
@bashrc looking at the "modern template", I have a few comments (attached):
This way we have the clear option of 2 templates for users to give feedback.
Happy to clarify if needed :)
Thanks!
Ana
@Captain_Noodles
before getting back to this; quick question.
Turns out that doing a border/outline like you have drawn in the above example (and I believe partly touched on with the original mockup) is not totally straightforward.
Would be easier if we could not do the outline but maybe have the page be a lighter or darker shade than the background.
If that makes sense.
I can try to show this with the https://indymediadev.openworlds.info/test-css/ experiment if you like... but just now realising I might be blurring the line between "classic" and "modern" templates ??
@Captain_Noodles another quick mockup of non-outline tab approach.
Then I will soon get back to trying to get a functioning template for the roll-out
@mj-saunders looks good. So this would be for the "modern template" that bashrc has been developing right? And we leave the "classic template" that you have been developing as was on your previous message, just with the fade on the banner?
We do want to have the 2 clear different templates to roll-out.
Shall we do a video catchup tomorrow afternoon with everyone? Hamish will arrange a time, as I'm quite busy in the morning.
Thank you
Ana
@Captain_Noodles
I will leave it to @bashrc for now. If he wants I can share an example of the css for this; but it would need to be adapted anyway to the existing approach in epicyon.
For now, I will continue on the "classic" template as you suggest.
Catch up would be good.
@bashrc I've added a few more comments to the "modern" template, below.
It has mostly to do with alignments and spacings.
One question: the indymedia logos on the central feature column, are they image placeholders?
Thanks so much
Ana
Yes, the indymedia logos on news posts can be replaced with anything you prefer.
Again, please let me know if it works now
Ana
@bashrc, @mj-saunders we are looking at both templates on our mobiles. I am using Chrome and Hamish is using Firefox, and it's interesting to notice they look slightly different.
See below the screenshots for both.
These are looking great!
Some notes below:
The font of the general text on the "modern" template is too big on both web-browsers.
The font on the tabs is too small.
We get a different banner.
The banner is maybe a bit too narrow.
The fonts are looking good on the "classic" template
The banner is slightly different as well on the word #indymediaback
Quite excited to see the two templates next to each other. Looking super nice
Thanks
Ana
Phones tested on
Huawei P20 pro with chrome
Samsung Galaxy S7 with firefox
Thanks @Captain_Noodles and @OMN.
The differences are interesting.
I shall test some alternatives for the #IndymediaBack text.
The text is just text, with a "stroke" applied using CSS - and diff browsers have some various ways of displaying this. This is quite a drastic difference though :)
It is a good example of why web-coding is annoying - browser compatibility :D
Everyone wants to define their own "standards"...
You likely also noticed that only the 'features' page for indymediadev is working more-or-less as expected.
@Captain_Noodles
Think I've managed to sort the corrections from this image.
I will be trying to fix the CSS for the other pages next.
@bashrc, @mj-saunders
We've did a very quick mock-up for the boxes on each of the subpages. The font could be the same that you use on the page
I've added as well the Home Page.
You'll notice we have now 4 tabs on every subpage: Home, Features, Newswire, Links, and looks a bit more like the initial specs http://hamishcampbell.com/index.php/2020/10/22/draft-of-indymedia-reboot-ux/
Thanks
Ana