Embed Size (px)
Citation preview
1
April 14, 2023
Case Outokumpu.com
Responsiivisen verkkopalvelun suunnittelu ja toteutus SharePoint 2013
2
Outokumpu
Outokumpu is the leader in advanced materials with the strongest technical expertise and widest range of products across all our customer segments.
33
April 14, 2023
Alkutilanne sivuston uudistukselle
Etukäteen päätetty:• Haluttiin jakaa maailmanlaajuisesti uusi
brändi, kokemus sekä visio ja missio
• Tehdä enenmmän liiketoimintaan keskittynyt verkkosivusto
• Julkaistaan toukokuun lopussa (aikaa 4kk)
Analytiikasta:• Mobiilipäätelaitteiden käyttö kasvanut ja
edelleen kasvussa
• Käyttäjäkokemuksen kehittäminen ja tehokkaammat sivustot
Alusta:• Joko Sharepoint 2010 tai 2013
44
April 14, 2023
Suunnittelu ja kehitys agiilisti
• Intensiiviset konseptointi- sekä kehityssprintit
• Suunnittelusprinttien aikana priorisoitiin 200 erilaista tarvetta eri näkökulmista (User story).
• 400 teknistä User Storya toteutettiin itse sivustolle
• Käyttäjänäkökulma tuotiin analytiikan sekä aiempien tutkimusten avulla.
5
Responsiivisen sivun sisältö
April 14, 2023
5
6
04/14/2023
Jokaisella sivulla on oma rooli, tyyli ja tavoiteEngagers Routers Informers Convincers
Front pageSection page
Section pageSearch pagesVideo pagesDownload pagesMap pages
Article pagesBasic info pagesNews pages
Prod pagesService pagesReference pagesContact page
Make the first impression count.
Show them the way.
Be unique. Because you can.
Open the door. Close the deal.
7
Responsiivisen sivun alkuvalmistelu
April 14, 2023
7
8
April 14, 2023
8
Ensin griditMain content area Side bar
1
4
3
2
1
4
2
3
5
5
9
Desktop:
Min-width 960px. Fixed grid, 960px wide. Margins
and highlight boxes are fixed width.
Tablet:
Min-width: 768px AND max-width: 959px. Fluid grid,
width 95%, margins and highlight boxes scale
proportionally.
Mobile:
Max-width: 767px. One column grid, width 87,5%.
Highlight boxes are scaled to the width of the grid.
Section start page, desktop Section start page, tablet Section start page, mobile
Min-width 960pxMin-width: 768px
AND max-width:
959px
Max-
width:
767px
Sitten breakpointit
10
Responsiivisen sivun suunnittelu
April 14, 2023
10
11
April 14, 2023
11
Kerättiin User storyt
BusinessAs a Prospective Employee I want to to find contacts to HR so that for information in regards to job search applications
TechnicalAs a user I want to see highlighted content at hero area at top of page linked to separate content page to learn more about highlighted subject
1212
April 14, 2023
Luotiin runko yhteisissä sketsaus-sessiossa
1313
April 14, 2023
...tehtiin klikattava prototyyppi ja visuaalinen suunnittelu puuttuvien komponenttien osalta
14
Responsiivisen sivun toteutus
April 14, 2023
14
15
Tuloksena monikäyttöiset komponentit
Highlight Box
Highlight Box with an image
Highlight Box inside content area, 1-column version
Highlight Box inside content area, 2-column version
16
… joita voidaan käyttää eri paikoissa
17
Lopputulos
April 14, 2023
17
18
Miten agiili responsiivinen toteutus meni?
• Mobile firstiä pyrittiin pitämään mahdollisimman paljon mukana.
• Tärkeää, että tekijät olivat mahdollisimman paljon paikan päällä
• Klikkailtava prototyyppi auttoi huomattavasti kommunikoinnissa ja sitouttamisessa.
• Visual guideline rakentui projektin aikana sitä mukaan kuin tarpeet saatiin organisaatiosta.
• Useita muutoksia ja tarpeita pysytyttiin ottamaan mukaan sekä huomioon projektin edetessä.
19
SharePoint ja responsiivisuus
• Toimittajan tärkeä tietää responsiivisten web partien rajoitukset ja mahdollisuudet
• Kuvien käsittely oli erittäin positiivinen yllätys
• Sivupohjat kannattaa suunnitella mahdollisimman yksinkertaisiksi ja modulaarisiksi (Drag & drop)
• Metatietopohjainen rakenne parempi vaihtoehto kun luodaan responsiiviset sivut
20
04/14/2023
"I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed."
- Michael Jordan
