Ä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:
- Frontend där användarna/besökarna upplever svenskakyrkan.se
- Backend (administrationen) där webbredaktörerna skapar sidorna som publiceras
- 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.
- Standardsida om dop (okommenterad, JPEG, 428 kB)
- Standardsida om dop (med redaktionella kommentarer, JPEG, 739 kB)
- Standardsida om konfirmation (okommenterad, JPEG, 584 kB)
- Standardsida om konfirmation (med redaktionella kommentarer, JPEG, 943 kB)
- Administrationsgränssnittet (med kommentarer, PDF, 169 kB)
- Flyttverktyget (PDF, 2,94 MB)
Ö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.
Lämna ett svar