Introduction

wepik AI generated cyberpunk lawyer based on the text prompt: Beauty wearing a judge hat, upscaled Jan 2024

Lawtrust.eu is a rewrite of lawlt.eu, a law firm website.

My work solves the following problems:

• Uses HTTPS instead of HTTP.

• Removes the need for a paid hosting (dropping a CMS).

• Arguably better typography, mobile UX, i18n.

Tech/Setup

1. Install node via nvm or volta.

2. Install Tailwind CSS.

3. Install Tailwind CSS Typography plugin.

4. Run

   cd gocode
   go build
   cd ..
   ./gocode/md2html
   npx tailwindcss -i index-in.css -o index.css --watch
   cp ./lang/en/index.html . && gedit index.html
   

The English language file is chosen as the main one, edit index.css, simonas.ico, and aealogo.jpg paths in the copied top level index.html. Inject/copy-paste the content of radio_toplevel.txt below <!-- Language radio --> inside index.html.

SEO

"Fair search" in practice:

• http://www.lawlt.eu/ - Built around 2012, the HTTP, data inside the PHP CMS called "CMS Made Simple". Google was paid to advertise it on search.

• https://lawtrust.eu/ - Built in 2024, the HTTPS, data directly inside the HTML hosted on github.com. Github is owned by Microsoft. Google was never paid to advertise it.

The search for "lawyer vilnius" (January 13th, 2025):

• Google: lawlt.eu - Page 3, lawtrust.eu - Page 13.

• Bing: lawlt.eu - no results in the first 20 pages, lawtrust.eu - Page 1!

• DuckDuckGo: lawlt.eu - no results in the first 20 pages, lawtrust.eu - Page 1!

Take Away Messages

• A small non-marketed web site is almost invisible on the search. SEO is rain water. You are visible as long as you pay.

• A page on Instagram/Telegram will definitely be easier to create, read, update, delete.

• i18n is a maintenance burden. 18 sections times 9 languages is tedious. Batch processing with DeepL is very limited. ChatGPT?!

• Modern web pages are full of nonsense: Carousels with videos, "Contact Us" cards, chat assistants, progressive loading, horizontal scrolling, modal windows... As if any of this improves search.

• List is all you need. Find out how to make them a bit more fancy, that is it. Still need to be careful with a background image as it may add a white blink on the first paint while the page loads.

• Styling is hard as we do not have a fixed screen size and the same DPI. Redmi 12C (Android 14) has a browser viewport of only 360x698 pixels, size 6.7". Landscape vs Portrait...

• Relying on Chrome, F12, and window resizings may not be enough. I had an overlapping text which could only be simulated by changing the desktop resolution to 1280x720 and hitting F11. Resizing browser window after F12 would not reveal it.

• I would recommend mostly single-column layouts. Do not use h-screen at all, do not fit stuff into a desktop screen as they are all totally different. Use very few font sizes, do not add any hero cards, toasts, hamburger buttons, do not maximize the screen space usage. Do not focus on the looks, the CSS will be a micromanagement nightmare.

Credits

Thanks to Samuel Dawson for his minimal typewriter effect in vanilla Js. One must wrap the text div inside another div of a fixed height to avoid the side effect of the outer container resizing.

I have applied two icons from Heroicons. It is very nice to copy/paste svgs directly, too bad they have only a few icons. I am not sure icons are needed. Canon vs. Sony so to speak.

DeepL is incredible, but some checking and cleaning is generally needed, which can be annoying. Still, a decent translation. I think human translators will soon be needed only for high quality texts or special languages and dialects, e.g. Latin, Esperanto, Samogitian...