Visar alla blogginlägg med kategorin: Design

Koncept för stockholm.se #1 – Kontraster

Postad av: Johannes Söderlund,

En del i vårt arbete med att ta fram guidelines för e-tjänster och byggandet responsiva stockholm.se var att definiera konceptet för stockholm.se på ett samlat och tydligare sätt. Detta för att förbättra kännedomen (för beställare och konsulter) om vad som fungerar från tidigare erfarenheter och kunskap, men också för att säkra användbarheten i utvecklingen framöver för oss själva.

Under våren har också stockholm.se granskats tillsammans med FunkaNu för att säkra tillgänglighetsaspekterna och då också de konceptuella delarna.

Nedan beskrivs konceptet med fokus på kontrasthantering i gränssnittet.

Hantering av kontraster i stadens webblösningar:

Det finns tre parametrar vi mäter kontraster på, skillnad i färg, skillnad i ljusstyrka, skillnad i ljusintensitet.

Riktlinjerna nedan är tolkade som just riktlinjer och inte som regler.

Skillnad i färg

  • Vi strävar alltid mot ett gränsvärde på 500 eftersom det är W3C riktlinjer.
  • Vi tillåter aldrig kontrastvärden under 400.
  • På viktiga textytor som huvudmenyer, startsida och brödtexter gäller riktlinjen 500 eller i närheten av 500.
  • Ett värde under 450 fungerar inte för sådana texter.
  • För andra texter, t.ex. kontraster på en hovereffekt eller mycket stora texter i en kampanjyta (där innehållet också kan nås på andra sätt t.ex. genom navigation eller sök) kan i undantagsfall lägre kontraster accepteras, t.ex. 420.
Den färgpalett som tagits fram har säkrats utifrån detta:
1. Blå 2. Ljusblå Färgkoder för 1. Blå och 2. Ljusblå 1. RGB	0/110/191 2. RGB	214/237/252 1. HEX	#006ebf 2. HEX	#d6edfc 1. Lila 2. Ljuslila Färgkoder för 1. Lila och 2. Ljuslila 1. RGB	93/35/125 2. RGB	241/230/252 1. HEX	#5d237d 2. HEX	#f1e6fc 1. Rosa 2. Ljusrosa Färgkoder för 1. Rosa och 2. Ljusrosa 1. RGB	196/0/100 2. RGB	254/222/237 1. HEX	#c40064 2. HEX	#fedeed 1. Grön 2. Ljusgrön Färgkoder för 1. Grön och 2. Ljusgrön 1. RGB	0/134/127 2. RGB	213/247/244 1. HEX	#00867f 2. HEX	#d5f7f4 1. Orange 2. Ljusorange Färgkoder för 1. Orange och 2. Ljusorange 1. RGB	221/74/44 2. RGB	255/215/210 1. HEX	#dd4a2c 2. HEX	#ffd7d2

Skillnad i ljusintensitet

  • Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter under 18 punkter (1:4.5)
  • Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter över 18 punkter och några steg uppåt i textstorlek (1:3)
  • Vi kan i undantagsfall frångå W3Cs riktlinjer om skillnad i ljusintensitet för riktigt stora texter t.ex. 72 punkter. Eftersom storleken påverkar läsbarheten också och det inte finns någon riktlinjer från W3C för riktigt stora textstorlekar.

Det verktyg som använts för att mäta skillnad i ljusintensitet (kontraster) finns på: http://www.paciellogroup.com/resources/contrastAnalyser, samt skillnad i färg: http://snook.ca/technical/colour_contrast/colour.html

Exempel på fonthantering:

 

Kategori: Design


Stockholm.se blir mobilanpassad

Postad av: Johannes Söderlund,

Trenden med mobilt surfande ökar generellt och så även på stockholm.se. Sedan 2010 då vi knappt hade några besökare från mobila enheter (surfplattor och telefoner) har det ökat först försiktigt (8 % 2011), sedan kraftigt (25 % 2012) för att under 2013 landa på ca 33 % av totalt antal besök.

Mobila besök på stockholm.se

En del av stockholm.se har varit responsiv länge. Stockholm växer på bygg.stockholm.se utvecklades uppåt (storleksmässigt) från en mobilversion 2011 till en desktopwebb under 2012. Senast fick den även en ökad totalbredd under året som gått för större skärmar.

En annan del är Stadsmuseet på stadsmuseet.stockholm.se som utvecklats under året och som lanserades nu under hösten. Utifrån erfarenheterna, principerna och tekniken så kommer nu det mobila tänket att implementeras även på den ordinarie webbplatsen, stockholm.se.

Så här ser det ut just nu i utvecklingsmiljön. Allt är inte färdigt och en del kommer att ändras, men det ger en bild av hur det kan komma att se ut i början av nästa år.

 

Startsida
Helskärm, Platta, Telefon

Startsidan - helskärm          

Navigationssida
Helskärm, Platta, Telefon

          

Ämnessida
Helskärm, Platta, Telefon

          

Menyhantering
I den mobila menyn går undernivåerna att expandera genom +

Kategorier: Design, Mobilt, Okategoriserad


Stadsmuseet lanserar ny webb!

Postad av: Johannes Söderlund,

Som ett tillskott i stockholm.se lanserar Stadsmuseet sin nya webbplats idag. Målet är att göra det tydligare för alla stockholmare vad Stadsmuseet erbjuder i form av utställningar, vandringar och fakta om Stockholm. Webbplatsen bygger på EPi-server 7 och är responsiv.

 

Desktop vy:

 

Responsiv vy:

 

Kategori: Design



Nya webbplatser för Stockholms stads skolor

Postad av: Johannes Söderlund,

Nyligen lanserades en webbplattform för Stockholms stads grundskolor. Syftet är att göra det enklare för föräldrar, elever och skola att kommunicera. Plattformen bygger på Drupal medan övriga webbplatser använder EPi-server.

Under året kommer även webbplatser för stadens gymnasieskolor.

 

Här är ett urval av skolornas webbplatser:

Kvarnbackaskolan:
www.kvarnbackaskolan.stockholm.se

Lugnets skola:
www.lugnetsskola.stockholm.se

Sjöängsskolan:
www.sjoangsskolan.stockholm.se

Sjöstadsskolan:
www.sjostadsskolan.stockholm.se

Skarpnäcks skola:
www.skarpnacksskola.stockholm.se

Sturebyskolan:
www.sturebyskolan.stockholm.se

Kategorier: Design, Funktioner



Bästa kommunwebb!

Postad av: Johannes Söderlund,

Diplom på topp100Internetworld har för tredje gången utsett stockholm.se till Sveriges bästa kommunwebb!

Så här lyder motiveringen:

”Med sin satsning på öppna data och api-portalen Open Stockholm samt flera nya tjänster som tillsammans fokuserar på invånarnas behov är Stockholm.se Sveriges bästa kommunsajt. Under året har befintliga och nya e-tjänster utvecklats. Samtidigt har design och användbarhet förbättrats på i princip hela sajten. Kommunen har även bidragit med koden från sitt jämförelseverktyg när Karlstad kommun ville skapa ett liknande koncept. Stockholm.se är i framkant på riktigt.”

Det tycker vi är jätteroligt! Allt som har hänt tidigare under året och vad som kommer framöver kan du hitta här på bloggen.

Kategorier: Design, E-tjänster, eGovernment


Stockholm växer

Postad av: Redaktör StockholmsNytt,

Stockholm.se/vaxer

Nu finns en betaversion av webbplatsen Stockholm växer. Stockholm växer är en del av stadens webbplats stockholm.se och förklarar planerna för hur Stockholm ska växa hållbart både nu och framöver. Inom en tio-årsperiod kommer Stockholm att vara en stad med en miljon invånare.

Att Stockholm växer snabbt märks i stadens verksamheter och ute i stadsmiljön. För att du som stockholmare eller blivande stockholmare ska kunna få en överblick över allt det vi gör för att underlätta din vardag har vi samlat allt på en webbplats. Projekt som pågår och är planerade finns utpekade på en karta så att du enkelt kan hitta det projekt du är intresserad av. Vi vill också förenkla möjligheterna att påverka via samråd genom att göra det lätt att hitta information och vart synpunkterna ska skickas.

Webbplatsen Stockholm växer släpps som en beta-version så att du som är besökare har möjlighet att tycka till om webblösningen. En beta-version innebär att webbplatsen inte är färdigbyggd. Det innebär också att vissa saker kanske inte fungerar som de ska ännu. Tyck gärna till på utvecklingsbloggen eller skicka e-post till betawebb@stockholm.se

Följ Stockholm växer på Twitter @stockholmvaxer
Till webbplatsen www.stockholm.se/vaxer

Frågor och svar om Stockholm växer

Kategorier: Design, Struktur och text, Teknik, Tyck till!


Snyggare och enklare stockholm.se för företagare

Postad av: Redaktör StockholmsNytt,

För företagare i Stockholms stad

Igår fräschade vi upp stockholm.se/foretag

Bland annat har vi fått till:

  • Större bildspel på startsidan med möjlighet att lägga in länkar
  • Fler nyheter på startsidan
  • Enklare att hitta e-tjänster för företagare
  • Navigeringen har flyttat till höger
  • Ny sidfot med länkar så det blir enklare att hitta funktioner och kontaktuppgifter vart man än navigerat.
  • Luftigare layout vilket gör det enklare att navigera för den som surfar med smartphone eller surfplatta.
  • Enhetligare utseende

www.stockholm.se/foretag

Kolla gärna och höra av mer med idéer eller frågor!

Kategorier: Design, Funktioner


Koncept för e-tjänster 2.0

Postad av: Johannes Söderlund,

Här kan ni se exempel på det nya utseende som har tagits fram för att göra stadens e-tjänster tydligare och mer lättanvända.

Bilderna nedan är exempel på hur en ansökningstjänst och en bokningstjänst kan utformas.

Längst ned finns kommentarer till de olika elementen som ingår i exemplen.

Ansökningstjänst för förskola.

 

Bokningstjänst för simhallar.

 

 

 

Detaljer kring olika formelement och funktioner.

Kategorier: Design, E-tjänster