Frontend Udvikling
Design-in-browser, HTML/CSS, Frameworks, jQ Plugins samt optimering
Design-in-browser
Vi har anvendt design-in-browser under udviklingen af vores redesign. Dette har gjort at vi har haft mulighed for at teste løsningen in-real-time undervejs samt ændre i designet, og se effekten online med det samme.
HTML/CSS
Der blev taget udgangspunkt i de eksisterende wireframes og sitemap under udviklingen af prototypen til websitet.
Responsivt webdesign
Vi har udviklet en prototype som fungerer på alle platforme, desktop, tablet og mobil. Til dette har vi anvendt media queries i forhold til tekst, billeder og layout.
Dry development
Dry står for "Don't repeat yourself". Vi har anvendt denne form for udvikling, for ikke at gentage den samme kode flere gange. Elementer som forekommer på flere HTML-filer, som vores header og footer er derfor lavet om til PHP-filer og derefter indsat i filerne med 'include'.
Framework
Til vores udvikling af vores webdesign har vi anvendt Bootstrap 4.
Bootstrap er det mest populære framework i verden til udvikling af responsive websites med HTML, CSS og JavaScript.
Med gridsystemet Bootstrap bliver websitet inddelt i rækker og kolonner, hvor hver kolonne er inddelt i 12. De 12 kolonner kan splittes op efter eget ønske og man kan derved designe sit eget layout til forskellige platforme.
Bootstrap 4 er downloadet fra: Get Bootstrap
jQ Plugins
Mix it up + Multifilter
Til vores filtrering og sortering af artmoney har vi anvendt plugin'et MixItUp og MixItUp Multifilter udviklet af KunkaLabs.
Når der sorteres skal der tilføjes classen "mix" på alle elementer der skal sorteres og vi har derefter lavet knapper til de forskellige sorteringskriterier.
For at få filtreringen til at virke, skal der sættes tags (classes) på alle elementer. Filtreringsknapperne er blevet tilføjet toggle-filtre fra WordPress backend.
Sortering og filtreringen bliver aktiveret via JavaScript.
Scroll Reveal
Vi har anvendt Scroll Reveal til vores artmoney og artist sider. Scroll Reveal gør at elementerne bliver animeret frem, når de kommer ind i skærmen.
Scroll Reveal fungerer med JavaScript og bruger animationerne duration og delay.
Optimering
Vi har komprimeret vores billeder til en lavere opløsning for at få en hurtigere loading-tid på vores website. For at optimere vores SEO har vi anvendt meta-tags og beskrivelser for at blive fundet i søgemaskiner.
