GrafiskProduktions-forståelseProduktLandingpage til Perspectives

KundePresidents Institute

IntroduktionGrafisk Produktionsforståelse omhandler design og udvikling af en landingpage til Pespectives events. Siden skal fungere som en one-page informationsside med mulighed for at købe adgang til eventet.

Portfolio | Frederik Nygaard

OpstartsmødeMøde med stakeholders. Ønske om funktionalitet og ikke design.

Wireframing / UXUdvikling af Wireframing med tanke på UX i samarbejde med en behavorial expert. Arbejder efter AIDA.

DesignEfter udvikling af wireframes, udvikles design af siden. Designet vendes med stakeholders og eventuelle rettel-ser fortages.

Undersøgelse af teknisk målgruppeBrugere af de eksisterende sider undersøges med hen-blik på understøttelse.

Oprettelse af opgaverOpgaver defineres som userstories hvis muligt.

OpgavestyringOpgaver styres vha. Scrum metoden og foregår i 14 dages sprint.

KodestyringKoden styres i Bitbucket og branches efter de specifikke opgaver.

Individer og samarbejde frem for processer og værktøjerVelfungerende software frem for omfattende dokumentationSamarbejde med kunden frem for kontraktforhandlingHåndtering af forandringer frem for fastholdelse af en plan

1

2

3

4

5

6

7

Grafisk Produktionsforståelse | Side 1 ud af 3Portfolio | Frederik Nygaard

BilledeoptimeringBilleder produceres i sRGB og komprimeres med tinyJPG

Billedebeskæring/formindskningVed hjælp af serveren og css, hentes der et billede i korrekt størrelse og evt. retina venligt.

CSS compilingVed hjælp af NodeJS og Gulp behandles SCSS til CSS og bliver både Polyfilled og Compressed. Derudover genereres sourcemap til debugging

SCSS CSS3 Prefixes/Polyfills

.block__element--modifier

CompressingSourcemapping

Javascript compilingVed hjælp af NodeJS og Webpack bliver Javascripten (ES6) samme med Typescript og Knockout pakket med alle moduler og laves til ældre javascript. Derudover bli-ver det uglify'ed og compress og et sourcemap generes til debugging.

SitecoreSitecore bruges som CMS system og her oprettes Vie-ws, renderings og templates, for nemmere at oprette og redigere fremtidige events.

CachingFor at sikre at brugeren har den seneste version, tilføjes et unikt ID for tvinge browseren til genloade css eller javascript.

ES6/ES2015 KnockoutJS Sourcemapping Packing Javascript (ES5) Uglify CompressTypescript

8

9

10

11

12

13

Grafisk Produktionsforståelse | Side 2 ud af 3

-45%

Portfolio | Frederik Nygaard

SEODen klassiske SEO liste gennemgåes (tags, descripti-ons, alt, semantik m.m). Der holdes øje med udvikling og forbedres løbende.

Rich SnippetsVha. Schema.org markeres koden til Google for at blive registreret som et Rich Snippet Event.

MonitoreringDer monitores både server, javascript eller .Net excepti-ons samt Google Analytics i tilfælde at ændret trafik.

MVPMost viable produkt (Release 1) præsenteres for sta-keholders. Evt. nye ønsker eller rettelse medtages til Release 2.

TestSiden testes og gerne i flere forskellige devices

Kompatibilitet Under testen sørges det for at siden har den ønskede understøttelse på devices, browsers og resolutions. Evt. specifikke browser/device løsninger laves

14

15

16

17

18

19

Grafisk Produktionsforståelse | Side 3 ud af 3Portfolio | Frederik Nygaard