Skip to content

Leave a Legacy:  Publish a Website

Survivors of Injustice Transcend Grief

COOKIE NOTICE

Tuum Est has 3 cookies: all relate to the universal, broad statistics program called Google Analytics. Our Cookie Policy Page has details plus an illustrated Cookie Audit. Cookie Policy x

The Tuum Est site will interest readers who in their own lives are aware of a grievous injustice, or who have experienced one themselves. The emails I receive illustrate that the more deeply one has been injured, the more one has to say. For such readers, I suggest the following course of action: Consider building a website of your own.

Computer Knowledge

To advance your computer skills, go to the Library in your town or city and ask for a schedule of internet classes which are free to the public. Attend and learn.

Web Design Template

You need a template package – a set of webpages which are styled, but are blank of content as yet. The minimum requirement is two templates: one to display your Home Page and portal pages; the other to display in-depth articles. You can purchase a ready-made template package, but these tend to be expensive, and may not have all the features you want in a single design. Be aware: these designs are purchased often, and are seen often on the internet.

Instead of marching to the same drummer, Tuum Est opted for original flair. If you, too, have an affinity for coding, you can custom-design your own templates.

  • Custom-Code a Template
  • Start with the reliable tutorials at W3Schools, an organization that upholds web coding standards. They teach HTML-5 and CSS-3. As well, be adventurous and learn a smattering of JavaScript.
  • When you are ready for in-depth study, look up specific HTML and CSS topics on tutorial sites such as W3C, the Mozilla Developer Network, and SitePoint. For thorough CSS answers, go to CSS Tricks. Find inspiration at CodePen.
  • Master server-side includes. Certain elements are common to each page such as the Masthead and Footer. Store these discrete code segments in a separate folder, then embed pointers to them on each webpage. You can write updates once at the source; the changes automatically appear on each webpage.
  • If you have original video or audio, you can embed this multi-media content on a webpage to provide a more sophisticated user experience.
  • To debug typos or coding errors, use the W3C Validation Suite often.

Administrative Webpages

Essential administrative pages include About this Website, Contact Us, and FAQ. You should prepare a Privacy Policy even if you collect no more visitor data than the email addresses of your correspondents.

No matter where you reside in the world, you likely want your site read by the people of Europe, which means that your Privacy Policy must comply with two relatively new directives:

  • The EU Privacy Directive, informally called the Cookie Law, requires that you tell visitors up-front whether you work with any app (such as Google Analytics) that employs tracking cookies. On each of your webpages, you should include a small but visible Cookie Notice which links to your full Cookie Policy page.
  • The GDPR Regulation, or General Data Privacy Regulation, sets out your duties for the collection and storage of personal data acquired through your website (such as email addresses or credit-card details). It also sets out the rights of customers who provide data to you (such as the right of correction).

As your site begins to grow, you will need another type of administrative page called a Sitemap. A Sitemap is a carefully structured list of all your page URLs. You need two versions:

HTML Site Map
(sitemap.html)
Read by public visitors / Serves up alternate navigation for visitors who lack specific keywords for a standard search.
XML Sitemap
(sitemap.xml)
Read by search engines / Web protocol developed to help search bots find, crawl, and index new content on the web.

Content and Usability

When writing content, pay attention to usability. Visitors expect to find a well-organized page with good grammar and proper punctuation; legible fonts; workable links; clear navigation; and restraint with animation. Most web surfers are goal-driven, and seek a main article relevant to the title or snippet they clicked which led them to your page. Most sites accomplish these basics. If a reader encounters a baffling or hard-to-use site, they hit the Back button within seconds.

Fonts and Typography

Injustice triggers a grief reaction with traditional stages, including justifiable anger. An indignant person, aiming for emphasis, sometimes writes text in ALL CAPITALS. Avoid this, for these good reasons: The etiquette of the net has developed such that capitalized text is perceived as shouting. It goes beyond courtesy; it affects credibility. When the emotion lobe of the brain (the amygdala) gains mastery, it suppresses the cerebral cortex, and reasoning ability takes a backseat. Readers instinctively know this, even without the medical explanation. Also consider the mechanics of a typeface: An all-capital block of text is hard to read because the normal shape of words is lost. We rely on stems of characters going above and below the line (such as t and p) to assist rapid character recognition; such ascenders and descenders exist only in lower-case text. Save full capitals for titles or other special effects.

What can you do to emphasize text? Options: brighten the text color or background color; tile a parchment image or other texture across the background; enlarge the font size or choose an ornamental font; use bold or italics (or both); indent or outdent the passage; or give the text a sense of dynamics by rotating it. As skills develop, experiment with creative typography and three-dimensional transforms.

Color Palette

Computers offer millions of colors – but each device displays them differently! A pure blue on one screen looks more saturated, and distinctly purplish, on another device. Pixel color depends on characteristics such as phosphor chromaticity, gamma, and white point of the monitor. As much variance exists within brands, as between brands. Future screens may reach uniformity. Until then, your task is to select colors so they all change tone in the same direction when viewed on different monitors.

Begin your education with tutorials on color theory and the psychology of color. If you want a complex palette from the color wheel – using complementary, triadic, or analogous colors – then try out the elegant Paletton. Other online tools which make your job easier are Color Hexa and the W3Schools Color Mixer. Alternately, if you want a monochrome palette, which looks polished if you do it right, then follow the steps below:

  • Monochrome Palette that Changes Tone in the Same Direction
    When Viewed on Different Monitors
  • First select a base color which you write in RGB mode as rgb(n1,n2,n3).
  • Find lighter colors for backgrounds: Create an HTML test-page and fill a box with your base color, using the CSS property color: rgba(n1,n2,n3,opacity).
  • Valid opacity values run from 1 (opaque) to 0 (transparent). To make the box semi-transparent, set the opacity somewhere between 1 and 0.
  • Now you have a box with a semi-transparent version of your base color. Layer it over three other boxes (these are opaque) filled with white, pale gray, and dark gray. Experiment: Adjust the opacity of your base color, and the lightness or darkness of the grays, until you produce neutral tones you like.
  • Want more vigor in your neutrals? In your computer Colors Tool, display your neutral in RGB mode, then change to HSB mode. While you keep the Hue on its exact degree setting, adjust the Saturation and Brightness by a few points.
  • Measure results with a digital color meter. Record them in a Color Glossary. Apply the neutrals to areas such as table headers, sidebars, or pull quotes. These tones harmonize with your theme better than pure gray.
  • For a strong accent, used sparingly, choose the color complementary to your base color (it will be directly opposite on the Color Wheel).

Links: Design Considerations

Originally, links were always underlined and blue in color. But as people grew familiar with links, a more flexible standard evolved. Today, the underline is optional. If you do underline, note the line will overlap and obscure the descenders of lower-case letters (g, j, p, q, and y). There are ways to prevent this (see our code samples). If you forgo the underline, then all links on a page should have a uniform color that differs from, and is brighter than, the text color. Aim to make links conspicuous. Don't underline anything that is not a link.

Social Media Icons

If you add social icons to your pages, select a very few to avoid overwhelming readers. Social networks, by their nature, collect troves of personal data. Take a position on security and fix your boundary. You are not obliged to upload a facial photo (even on Google+) but if you do, this heat-map study explains how to compose a web photo to influence where visitors look.

If you eschew social media you won't lose much: Genuine efforts get diluted by staged agendas. Advertisers flourish apace in the realm of Tweets and Facebook likes. On topics of community interest, astroturfers disgorge waves of fake posts to mimic grassroots support. Even the U.S. Military uses Persona Management to create the illusion of consensus on controversial topics.

Responsive Design

A responsive website is one which is readable and usable on every screen size ranging from the Apple iWatch (1.5 diagonal inches), to the smartphone (5 inches), the average tablet (10 inches), the laptop (15 inches), the desktop monitor (24 inches), and finally the widescreen (43 inches) built with a shallow curve so viewers can take in the entire display.

Definitions: A pure mobile site is optimized for small screens (up to tablet size). A desktop site is optimized for large screens (laptops, desktop monitors, and widescreens). A responsive site is a hybrid: it should work across the full array of screen sizes – which introduces compromises.

Mobile devices excel at displaying photos, with details sharp and colors glorious, because even the tiniest gadget boasts a modern high-resolution screen. But the mobile platform has little room for text content. If a mobile device displays a large block of text at readable size, visitors have to scroll horizontally as well as vertically – which is beyond their comfort zone.

The unspoken constraint: Most mobile sites curtail text. Tuum Est holds the opinion that this can potentially dumb-down the internet. What, then, are your options?

  • Desktop Site, Mobile Site, Responsive Site, or eBook?
  • Are you a photographer? Is text subordinate on your pages? If so, then by all means build a pure mobile site or a hybrid responsive site. Learn the design fundamentals at Create a Multi-Device Site. Test your responsive webpages with the Google Mobile-Friendly Test and Bing Mobile Friendliness Test Tool.
  • Is your dream a scholarly site? Do you combine in-depth articles with complex images (high-resolution photos, detailed charts, graphs, and tables)? If so, then build a desktop site. You also want to reach the growing mobile audience, but how? Tiny screens don't display intricate pages well. Take a scientific table: responsive design can bring a single column to the forefront, but visitors could never view the full table at readable size. An alternative: Publish your article, or series of articles, as an EPUB or MOBI eBook.

Take Your Webpages Live

When you are ready to display your site, if funds are limited, try a publishing vehicle such as Blogger or Google Cloud Platform. Both are free, requiring only a Google Gmail account. The pros and cons: Because these platforms share the enormous bandwidth of Google, they are impervious to DDoS attacks. On the other hand, features are limited, making site management onerous; for example, neither platform recognizes server-side includes.

Alternately, you could sign a contract with a paid Web Host. Corporate giants (news media and national retailers) purchase the right to a dedicated (stand-alone) server at a cost up to $300 per month. In contrast, small websites purchase space on a shared server at a cost ranging from $4 to $10 per month. Be aware in advance: Most dedicated servers have firewalls strong enough to withstand a DDOS attack; but shared servers decidedly do not.

Search Engine Optimization

To raise your search ranking, follow best practice guidelines for Search Engine Optimization (SEO). The web has no shortage of devotees who offer expert advice on this topic. Stay in the white hat realm and guard the good reputation of your site.

TRANSCEND GRIEF

For survivors of injustice:  Reach down inside yourself until you figure out and can articulate what happened, why it happened, and why it is wrong. As you write about your experience, that knot of grief gradually begins to dissolve. You are part of humanity's timeline. What happened to you has happened to others, yet your story and your insights are worth preserving because your individual circumstances are unique. Writing will tax your strength, but as well it is catharsis. And if your web content is well-organized, fully authenticated, and crystal clear – then you will have a forum for Justice.

Georgena S. Sil
Saskatoon, Canada
Physicist & Technical Writer
Alumnus: University of British Columbia
TuumEstContact@protonmail.com

Copyright © 2008-2018 Georgena Sil. All Rights Reserved.