Skip to content

Verkstadsmagasinet: redaktionell designpilot och kompakt mobilfooter - #60

Draft
lizell wants to merge 2 commits into
mainfrom
design/verkstadsmagasinet
Draft

lizell wants to merge 2 commits into
mainfrom
design/verkstadsmagasinet

Conversation

@lizell

@lizell lizell commented Oct 12, 2026

Copy link
Copy Markdown
Member

Förslag

Startsidan och systemutvecklingssidan får en sammanhängande redaktionell form enligt koncept 3, ”Verkstadsmagasinet”: serifrubriker, avgränsade panoramabilder, återkommande illustrationsutsnitt och Athega-orange som accent. På mobilen blir tjänsterna en lista med mindre bilder. Bloggen på startsidan får samma raka bildramar och rubrikstil.

Detta är en draft för designgranskning, byggd direkt från main (403914d), som ett fristående alternativ till #59. Fyra illustrationer återanvänds från #59; den PR:ns övriga ändringar ingår inte. Andra sidfamiljer behåller sin nuvarande form, med undantag för den gemensamma mobilfootern som också komprimeras.

Startsidan lyfter den befintliga ingressen ”Nyfikna på att utforska nytt, med erfarenhet av vad som håller” till huvudrubrik och använder tidigare huvudrubrik som ingress. Systemutvecklingssidans text och alla befintliga adresser behålls.

Mobilfootern minskar från 775 till 457 px vid 390 px bredd genom mindre mellanrum, Besök/Kontakt i två kolumner och sociala länkar på en rad. Länkarna har minst 44 px höga tryckytor; desktopfootern är oförändrad.

Att bedöma

  • Fungerar kombinationen av serifrubriker, nostalgiska bilder och orange detaljer för Athega?
  • Är panoramabilderna lagom stora, särskilt före tjänsterna på mobil?
  • Fungerar samma formspråk på både startsidan och en tjänstesida?
  • Tjänstebilderna är utsnitt ur befintliga illustrationer. AI för industri återanvänder tills vidare huvudbilden; motiv och beskärningar kan förfinas.

Implementation

Återanvänder Eleventy, befintliga komponenter och Markdown-sektioner. Stilarna avgränsas med magazine-page; sektionssidor väljer formen med presentation: magazine. En ensam bild i hero-sektionens Markdown blir dekorativ panoramabild före sammanfattningen och kontaktlänkarna. Två parsertester kontrollerar bildhanteringen, inklusive bevarade länkar och bilder inne i löptext.

Georgia används som lokal systemfont. Inga nya beroenden, externa fontanrop eller klientskript. Bildrörelse vid hovring respekterar minskad rörelse.

Verifiering

  • npm run build
  • npm test – 54 tester passerar.
  • npm run check – 255 sidor, inga problem.
  • npm run check:urls – jämförelse mot main.
  • Chrome: startsidan och systemutvecklingssidan vid 1440, 1024, 768, 390 och 320 px; inga horisontella överflöden, bilder laddar, meny och navigation fungerar, inga JavaScript-fel. Minskad rörelse kontrollerad.
  • Mobilfooter på startsida, systemutveckling, Om oss och blogg vid 320–1440 px: inga överflöden och minst 44 px höga länkar på mobil.
  • Genererad HTML jämförd mot main: endast / och /systemutveckling/ ändras. Inga tidigare HTML-adresser försvinner.

Safari och Firefox är inte provade. Förslaget är avsiktligt begränsat till två sidor inför beslut om fortsatt utrullning.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant