Skiss över en startsida för en församling eller ett pastorat

Efter förra posten med skisser har många varit nyfikna på hur en startsida kommer att se ut. Nu är jag – efter många om och men och en helt oförutsedd sjukfrånvaro – glad att kunna visa upp en skiss på det! Och inte bara det. Du får även klämma och känna på en prototyp, alltså en faktisk webbsida som du kan öppna i din webbläsare. Den är helt responsiv, så förminska gärna ditt webbläsarfönster så får du se hur sidan beter sig. Så här kan en startsida för en församling eller ett pastorat komma att se ut efter lanseringen 25 april 2016.

Kort om puffarna i skissen

I skisserna finns det ett antal puffar. Som redaktör har du full kontroll både över hur många puffar du vill använda och vad de ska visa. Eller du kanske inte vill ha några puffar alls? Det går självklart också bra. I skissen visas en variant med en stor puff överst, två mindre under den och tre små längst ner. Det finns ett antal olika andra varianter, t ex med nio små puffar i ett rutmönster om tre gånger tre. Eller så kan du använda bara stora puffar som kommer i en följd. Som redaktör ska du ha full kontroll över vad du väljer att visa på din webbplats förstasida.

Fyra versioner av samma skiss

Den här gången finns skissen alltså i fyra versioner: en okommenterad bild över desktopversionen, en bild över desktopversionen med redaktionella kommentarer, en bild över mobilversionen och en prototyp. Jag själv är alldeles exalterad över hur spännande det här ser ut och jag hoppas att skisserna och prototypen kan förmedla lite av den känslan till dig som läser.

Viktigt att veta – det här är skisser

Brasklapp: som vanligt så är det här skisser och alltså inte huggna i sten. De visar på ett tänkt utseende. Färger, storlekar på typsnitt och sånt kan komma att ändras. Annat också, faktiskt.

Eftersom prototypen är en mer ”levande” skiss än de statiska bilderna så kan den förstnämnda skilja sig något åt i utseendet mot bilderna. Hittar du något i den ena som inte finns i den andra så är det alltså helt normalt.

Med det sagt: varsågod!

Skisser och prototypen

Hjälp med flytten till webben för framtiden

Kontakta gärna ditt stift för att få reda på vad de erbjuder i form av stöd, webbverkstäder och tips inför och under flytten! Mycket bra material finns också här på bloggen och på intranätet under Webbhjälp.

En försmak av webben för framtiden

Äntligen kommer de första offentliga skisserna på hur svenskakyrkan.se kommer att se ut! Vi i projektet vill visa de här skisserna dels för att vi vet att det finns en stor nyfikenhet på hur det  kommer att se ut, men också för att vi är så stolta över hur det artar sig.

Bilderna som vi presenterar här är så nära verkligheten vi kan komma idag. Det betyder att de visar en riktning, en tanke och ett koncept. Det betyder inte att det du ser är hugget i sten – webben är ju som vi vet en hyfsat dynamisk och föränderlig miljö. Fler skisser kommer och förhoppningsvis kan vi visa en startsida och flera andra funktioner (t ex puffar) redan i nästa omgång.

Med det sagt: nu kör vi!

Olika skisser för olika sammanhang

Skisserna är indelade i tre kategorier:

  1. Frontend där användarna/besökarna upplever svenskakyrkan.se
  2. Backend (administrationen) där webbredaktörerna skapar sidorna som publiceras
  3. Flyttverktyget som kommer att användas under flytten från det gamla till det nya

Skisserna över frontend finns i två versioner: en med och en utan redaktionella kommentarer. Dessa kommentarer förklarar varje del av sidan ur webbredaktörens perspektiv. Skissen över administrationen är kommenterad för att visa på vad som är vad bland kontrollerna. Flyttverktygets skiss innehåller några förklarande kommentarer.

Skissernas innehåll och hur vi tänkt

Frontend

Materialet till den första frontendskissen är hämtat från en församlingswebbplats. Stort tack till Helga Trefaldighets församling för att vi får låna er dopsida! Syftet är att visa på hur det kan se ut när en text är hämtad rakt av från en befintlig webbplats genom klassiskt klippa-klistra.

Den andra frontendskissen är en konfirmationssida för en påhittad församling. Här har vi kunnat visa på lite fler möjligheter med till exempel bilder och olika textformat.

Administrationen

Webbplatsen genomgår stora förändringar men det är framför allt frontend som förändras. Det mesta i administrationen kommer att se bekant ut för dig som arbetat i verktyget förut.

Den förändring som kommer att märkas mest är att dra-och-släpp kommer att ge plats för en variant som är bättre anpassad för läsplattor och smarta telefoner. Det kommer att finnas ett plustecken i webbitorn, och genom att klicka på det väljer du vilken funktion du vill använda. Genom att göra på det här sättet försvinner också problemet med att text och funktioner ”hoppar runt”, som många redaktörer uttryckt problem med.

Flyttverktyget

För att du också ska få en uppfattning om hur webbmaterialet ska flyttas från nuvarande svenskakyrkan.se till det nya finns här skisser på flyttverktyget. De bilderna är inte något att skriva ut och hänga på väggen, men de passar för att visa hur det är tänkt att fungera.

I inlägget Flyttlasset går mot webben för framtiden kan du läsa mer om flytten.

Skisserna följer den grafiska profilen

Parallellt med webben för framtiden-projektet pågår en revision av Svenska kyrkans grafiska profil för tryck. Den kompletteras nu med en profil för digitala kanaler. Hela den reviderade grafiska profilen (för både tryck och digitala kanaler) är planerad för leverans i januari 2016. Skisserna som vi presenterar i den här bloggposten följer profilen för digitala kanaler.

Redaktionella riktlinjer för dig som arbetar med webben

Våra webbplatser ska vara välkomnande för alla som använder dem. Till användare räknas också sökmotorer (som t ex Google och Bing) och personer som har en annan funktionsuppsättning och använder hjälpmedel för att ta sig fram på internet. De riktlinjer som vi nämner här är bara några av många sätt att underlätta för våra användare att hitta rätt hos oss – och de är precis lika användbara idag som efter 1 januari 2016!

Mobile first – mobilanpassning och responsivitet

I korthet: vi ska skriva texter som svarar på användarens tänkbara frågor, varken mer eller mindre.

Lite längre: Responsivitet är ett krångligt ord, men det beskriver något som är ganska enkelt. Det är att en webbplats ska se bra ut i princip oavsett hur stor skärm den visas på. Oavsett om svenskakyrkan.se visas på en dator, telefon eller läsplatta kommer webbplatsen att vara välkomnande och hanterbar.

Detta innebär exempelvis att rubriker och texter i möjligaste mån bör anpassas till den mobila livsstilen. Användaren är kanske mindre benägen att läsa sig igenom en lång text för att hitta det hen söker efter. Genom att ta bort irrelevant material blir den viktiga kärnan tydligare och en generell finslipning av innehållet är bra att göra.

Mobilanpassningen innebär också att det som vi idag känner som högerspalten försvinner, till förmån för ett tydligare upplägg i en enda spalt. Det som är viktigt kommer högt upp och det som är mindre viktigt kommer längre ner på sidan.

Bilder och bildhantering

I korthet: vi ska skriva alt-texter på bilder – så att den som inte ser bilden vet vad som visas, och så att Googles sökfunktion gillar oss.

Lite längre: En bild säger mer än tusen ord – men bara för den som kan se bilden! Vi måste bli bättre på att visa bilderna också för den som har en annan funktionsuppsättning. Ett bra sätt är att skriva en så kallad alt-text. Det gör du i bildverktyget och innebär att du skriver ner det bilden föreställer. Ett tips är att skriva samma sak i bildens titel, så det blir enklare att söka efter den direkt i bildverktyget i administrationen.

En bra skriven alt-text underlättar också när det gäller sökmotorer eftersom de hjälper till att lyfta relevanta nyckelord.

Länkar

I korthet: vi ska formulera bra länktexter så att användaren förstår var hen hamnar när hen klickar på länken.

Lite längre: En länktext ska tala om var användaren hamnar när hen klickar på länken. Exempel: ”Läs årsredovisningen för 2014″. Om sidan som länken leder till har en tydlig rubrik, kan du ofta använda den som länktext.

  • Skriv det viktigaste ordet först i länken.
  • Om länken leder till något annat än en webbsida, till exempel en pdf-fil, ska det framgå inom parentes i länken. Då vet man att ett nytt program ska öppnas.
  • När länken leder till ett dokument, ska den öppnas i ett nytt fönster.
  • När länken leder till en annan webbplats, ska den öppnas i ett nytt fönster. Det ska också framgå av länktexten till vilken webbplats länken leder.

Rubriker och underrubriker

I korthet: vi ska formatera rubriker som Rubrik, Mellanrubrik 1 och Mellanrubrik 2 – så hjälpmedel läser upp sidan på rätt sätt, Googles sökfunktion gillar oss och det blir lättare att ta till sig materialet på sidan.

Lite längre: Rubrikerna ska sammanfatta vad sidan, nyheten, faktarutan eller textavsnittet handlar om.​

  • ​Låt rubriken innehålla nyckelord ur texten.
  • Skriv de viktigaste orden först i rubriken
  • Använd gärna verb.
  • Lagom längd för en rubrik är fem-tio ord.

Underrubriker (de som kallas för Mellanrubrik 1 och Mellanrubrik 2 i administrationen) gör det enkelt för personer med vissa hjälpmedel att navigera på sidan. Google använder dem också för att avgöra vad sidan handlar om.​ För att inte tala om alla som får lättare att läsa texten!

Bortse från att du kanske tycker att den ena eller andra underrubriken är snyggare, det är viktigare att du använder dem rätt.

Mellanrubrik 1 ska användas ovanför Mellanrubrik 2. Exempel: i den här bloggposten så är texten ”Redaktionella riktlinjer för dig som arbetar med webben” satt till Mellanrubrik 1, medan rubrikerna ”Rubriker” och ”Underrubriker” är satta som Mellanrubrik 2.

Själva skisserna då

Bilderna öppnas i en ny flik i webbläsaren och PDF-filerna i din valda PDF-läsare. Du kan behöva zooma in eller anpassa ditt webbläsarfönster.

Observera att detta är statiska bilder och att de alltså inte är responsiva! Det du ser är hur det kommer att se ut när användaren ser webbplatsen via en dator. Det kommer att se annorlunda ut på en läsplatta eller en telefon.

Övrigt matnyttigt om webben för framtiden

På intranätet samlar vi informationen om projektet. Där hittar du bland annat en uppdaterad tidplan och en omfattande FAQ.

Skisser redesign svenskakyrkan.se

Här är två skisser på nya designen på svenskakyrkan.se. Observera att detta är skisser och att justeringar vad gäller till exempel bildval kommer att ske. Klicka på bilderna för skisser i full storlek i din webbläsare (eventuellt kan du få klicka med förstoringsglaset en gång också).  Först en bild på huvudstartsidan.

sk_externwebb_start1

Åtta huvudingångar för olika grupperingar av ämnen Se här för vad de kommer att heta. Överst en större yta som kan användas till olika budskap i form av bilder och text.

Skiss på församlingssida redesign svenskakyrkan.se

Sen en startsida för en församling. De viktiga nyheterna är; när besökaren är på en församlings sida försvinner den gemensamma menyn, istället en enkel trail med organisatorisk utgångspunkt. Menyn till vänster är församlingens egen och klickar besökaren på ”kontakt” leder det till lokal kontaktinformation. Församlingens egen logotyp uppe till vänster. På sikt församlingens egen bild i toppen (till att börja med får församlingarna välja bland två-tre bilder som stiftet erbjuder).