Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Textpattern's face to the public
I’ve developed the design prototype further so it now includes all the parts.
Don’t use a small browser window! (the vertical text formatting is unresolved). Update: neither is dark mode!
- banner
- nav
- hero
- features
- faq
- showcase
- current
- (video)
- ads
- footer
Design & Content
The hero animation is incomplete; I want Act 3 (Weave Pole Training) to be more sinuous; I’m hoping that scaling the dots up a bit when in front of a letter form will do the trick. Acts 4 and 5 still to come… The animation still restarts if you scroll; I’ll look into this at the same time.
The thorniest design issue is the size of the vertical text; I want each phrase to be the same font size and stretch from top-to-bottom of its panel, whatever its height. Maybe some css min/max height and clamp functions will do the trick, but I can always use js as a fallback :(
The faq section needs more content. Suggestions welcome (Bloke has some good ones). Of course the length of this section (and whether all points are toggled open or not) plays a huge bearing on the size of the vertical text. To be solved later when the parameters are clearer.
I’m using a random ‘ken-burns’ animation of TXP-UI on each open faq. The styling isn’t right yet (too prissy, too small), but is very flexible in what we feed it. There are all kinds of opportunities to show the UI and pimp Donald Swain et al – with the right phrases embedded in the screenshots we have another medium to promote with.
Apologies for my websites dominating the showcase section (I had the screen-captures readily available). These would be randomised upon each visit to the homepage, sourced from (hopefully) a large pool of listings. Content requirements for each listing is deliberately limited to make contributing one’s site as simple as possible.
I shifted the website.informer.com panel into the ads section, and removed the Featured at label. I hope this doesn’t jeopardise any deal with the advertiser…
Missing is a video / slideshow of the interface as discussed earlier in the thread. As it will be an endeavour to create, I want to first see how far I can get with the faq approach. A video could appear as another full-width block near the bottom to act as a terminating block near the end of the page.
Scroll/event-driven animations
I’m not convinced yet by the ‘click somewhere’ effect; it at the very least needs to appear black when against the yellow background, and use a random animation each time. Ideally I’d like it follow on from the hero animation, interacting with and around the element you clicked on.
Alternatively a better approach (suggested by Julian) would be to use gsap’s scroll-driven animations to drive groups of dots within each section… I’m still prevaricating as to what these animations might be, so I’m leaving this to a later stage when the broad page layout is nailed down. The current faq and the scroll-driven animations together may make the page too busy visually…
As I write this I realise that current (blog & forum) is superfluous; ‘Reasons to use Textpattern’ is a better replacement, and takes some of the load from features and faq. A better order would then be:
4. features
5. reasons
6. showcase
7. faq
8. (video)
Development
While using a separate css file for the homepage is possible, it won’t offer many gains as the new css needs to draw on many of the current sass modules for the site (settings, general styling etc.). The banner, nav, footer and base button styling need to be uniform across the site.
The design prototype currently draws on 2 css files:
- main.css (with modifications for banner, nav, footer)
- h25.css (homepage-only css, currently a mix of custom code and selected modules from all-grid, sorely needs refactoring :)
On the content side, features, faq and showcase will be sourced via a clutch of articles. I need a copy of the current database to figure out how this might be achieved, and to take the design prototype to a full-fledged code suite that developers can comment on.
Last edited by giz (Yesterday 00:28:44)
Offline
Re: Textpattern's face to the public
Contrast ratio is low in the yellow div, but also in the vertical text in the grey div:(
Also, I’m not sure about the “Twenty one years…” phrase as it’ll be outdated in 3 months, unless you have a php which will be updating “current year-2004”.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Textpattern's face to the public
Amazing, and many nice ideas. But I find it less usable than the current site atm.
- The large hero part become too imposant on the 10th visit, when one is mainly looking for faq and news. I can agree with ‘current (blog & forum) is superfluous’ (it looks like you have already removed it).
- Too much scripting, contradicting our ‘lightweight and fast’ claim. Might more features be delegated to css?
- JS disabled, the showcase part degrades poorly.
But it certainly has a ‘disruptive’ potential. Txp5, maybe?
Offline
#64 Yesterday 09:10:52
- Algaris
- Member
- From: England
- Registered: 2006-01-27
- Posts: 581
Re: Textpattern's face to the public
Keep up the good work, Giz! Here’s my feedback.
The bright yellow with grey and white text is hard to read, and it hurts my eyes when I try. 😥
The bouncing balls are cool, but they get quite distracting after the first one. Also, when you scroll, the animation gets jerky and keeps restarting.
The grey background with white and off-white text works well and is easy to read.
I just noticed the dots when you click in the divs with the grey text background. That’s a fun little Easter egg.
I like your scrolling showcase at the bottom of the page, and the fact that you can click/tap and drag the thumbnails is great.
Offline
Re: Textpattern's face to the public
Umm… as mentioned in my post, ‘Dark Mode’ isn’t supported yet.
The comments assume the design and coding is ‘ready-to-go’; the opposite is true. It’ll remain rough-and-ready until the design is formalised. Then I’ll be ripping everything up and doing it again from scratch.
etc wrote #340595:
Too much scripting, contradicting our ‘lightweight and fast’ claim. Might more features be delegated to css?
‘lightweight and fast’ pertains to the CMS, but I agree; all sites should have these qualities. It is a public-facing homepage with expectations, and you can only go so far with css.
Even in its current experimental state with a full suite of javascript libraries, I’m not doing too badly on javascript sizes. 156kB (minimised current homepage) vs. the prototype 218kB1 (still to be minimised).
These non-blocking resources have little bearing on time-to-paint, and file sizes will pale into insignificance compared to any videos we include on the page.
1 The ‘ken-burns’ animation is the main culprit, but I plan to drop this in favour of video snippets.
Offline