websites

Misc

Guide Lines

Design Guide -websites dot html
Compress pics w/ webP
Keep Init Page under 14Kb's
Use native fonts
Inline Critical CSS.
No need for preload img/tags

Of note:

No Webpack bloat
Auto-Prefixes
Lazy imports router.js
Router dispatches trigger event for templates to hook into for animations
Gpu Accelerated CSS Transitions
PWA-SW Support
Build Optimizations/ Analytics
Compresses Template
React-Snap Pre-rendering // mobile first approach w=480,h=850
Strips out some scripts after Pre-rendering
templateRefreshed event

Templates Contains:

Parallax background
Keyframes animate linear gradient background
Keyframes animate background of randomly generated cubes.
Optionally - a table of contents is shown before the article or at the side.
Scrollpos animate an cube tumbling down the divider line with a clip path
Scrollpos cube flows along the side of a clip path
Animate text shadow on hover
Glowing BG for Active-Page Link. Glowing Underline for TOC Anchor Link
CSS Keyframe names used: gradient-scroll, gradient, glow, collapse, expand, reveal, dismiss, shake, spin-header, wiggle, page_transition, clip-path-polygon, cube-animation
Each H2 should be a summary for a details pane.

Article Components

triple ellipses comments popup
view counter
social icons
https://textfac.es/
https://graphemica.com/%E2%98%B0
https://css-tricks.com/full-width-containers-limited-width-parents/
scrollsnaps on img
https://www.pexels.com/
https://undraw.co/illustrations
https://unicodearrows.com/
https://www.toptal.com/designers/htmlarrows/arrows/
footnotes
Default to using webP when available w/ png fallback.

Design Rules

Follow these General Summarized Rules:

General -> Put simple on complex or complex on simple
Layout -> Make outer padding the same or more than inner padding
Layout -> no hard divides unless it's an img divider
Buttons -> Make horizontal padding twice the vertical padding in buttons
Elements -> should go in order of visual weight (dark to light, fx to none, etc)
Element -> use multiples of '8'
Border -> Container borders should contrast with both the container and the background
Border -> For nested divs w rounded corners: interiorItemsRoundedBorder = xteriorspx - paddingpx
Border -> Make drop shadow blur values double their distance values. 4px on y = 8px blur
Border -> - closer z-index to camera = more light diffusion/ lower shadow opacity
Colors -> If you saturate your neutrals you should use warm or cool colours, not both
Colors -> Colours in a palette should have distinct brightness values, not just in hue
Colors -> bg should get lighter as the z-index increases
Colors -> The HSB brightness difference between background and container should be within 12%/7% for dark/light interface.

In general...

Avoid Complexity: Sitemap links to nav pages which link to subject-related articles.
Jazz up section divides by by slapping atop a transform rotated div

Reactive Explorative Interactive

instead of interactive steppers, tabs, fixies, sliders, use scroll and multiples
if you make the reader click or do anything other than scroll, something spectacular has to happen
if you make a tooltip or rollover assume no one will ever see it.
fewer small graphics embedded in articles and more stand-alone visual stories
most visuals are static as a result
if animation or motion is needed. trigger it on scroll

more space between contrasts. more or same vertical padding than horizontal. Give each color a distinct brightness value. use near-white or black (f2f2f2 or 222 if you aren't saturating)

f2f2f2 is just 95% brightness
222222 is just 13% brightness Saturate neutrals colors at least 5%. Layers get brighter.
+12% more for dark interfaces,
+7% for light interfaces.

--canvas: hsl(0, 10%, 90%); --background: hsl(0, 80%, 90%); --foreground: rgb(255, 240, 240);

Page SEO:

Titles
- Up to 50-60 characters to avoid SERP truncating.
- Frontload Keywords naturally and always include brandname
- Match Title and H1 closely
Descriptions
- SERP descriptions truncate at 150-160 characters
- long-tail keywords like [contemporary art-deco sideboards] help
- - Keywords show in bold. Tell the reader what they want to hear.
- people typically visit for 4 types of content: Transactional Commercial Navigational Informational
Don't Forget Img Alt Text!
Links
- Add only a "noindex" wont show on search wheras - "nofollow" wont associate links to page or scan em
- /

Robots. txt disallow for whole sections, meta tag for single pages

Notes

python packaging uses dist and webpack does not.
WebP offers 25-35% better compression.
gpu acceleration is a thing
accelerating the cubes improved FPS by 2x to run 60fps w/ more load on the each paint
chrome dev tools -> rendering
enable paint flashing to view non-hardware accelerated content).
wont work on (clip-text, svg path transformations, sitemap/h1 borders)