Blog

Vi har her på bloggen haft et stort fokus på ”responsive” design, nem opsætning og det visuelle i de designs, som vi lancerede for snart et år siden. I dette blogindlæg vil jeg gerne invitere brugere af SmartWeb og samarbejdspartnere med til et kig i ”maskinrummet”. SmartWebs nye frontend er nemlig langt mere end responsive designs. Med lanceringen kunne vi opfylde mere end 200 optimeringsønsker fra vores kunder og samarbejdspartnere.

Fleksibilitet

Siden SmartWeb blev født, har vi rykket standarderne for design og udviklingsmuligheder via systemet. Med den nye frontend har vi flyttet grænsen længere end nogensinde før – og på mange områder længere end andre standard systemer. Det gør, at man som kunde eller udvikler sjældent møder begrænsninger i forhold til design og udvikling af webshoppens frontend.

Rent teknisk kan systemet opdeles i følgende områder:
 

• Design lag: de nye designs, som er responsive. Men det er kun toppen af kransekagen.
• Template lag: dykker man et lag længere ned, er SmartWeb udvidet med et komplet template lag for hele frontend’en. Det er her, du som udvikler har mulighed for at ændre i design og funktioner på din webshop. Systemet er bygget på en template motor kaldet Smarty, som indeholder en lang række smarte funktioner. Det unikke for SmartWebs templates er adgangen til Controllers og Collections, som giver mulighed for at hente data når og hvor, man ønsker det. Eksempelvis er det nemt at hente de 3 nyeste produkter ud på en blog. SmartWebs templates er delt via Bitbucket.
• System lag: dette lag er Smartwebs arbejdsrum – vi kalder det for SmartWeb kernen. Det er omkring 30 % af den kode, som frontend’en indeholder. Også den del er udskiftet med helt nye komponenter. I motorrummet holder SmartWeb styr på momssatser, valuta, sprog, logins mv.

Søgeoptimering

SmartWeb er med den nye frontend blevet endnu mere søgevenlig. Det er primært sket gennem en god HTML struktur i ovenstående template lag, hvor koden er opbygget efter de nyeste kode-standarder og uden at danne dublicate content, jf. Google’s retningslinjer. Derudover er koden i høj grad markeret op med Microdata (rich snippets), som er en struktureret måde at fortælle Google om, hvor den kan læse data, f.eks. en produkttitel eller beskrivelse. Sidst men ikke mindst; ”Speed is King” – læs mere nedenfor.

Hastighed

Hastighed er vigtig, både i forhold til de kunder som besøger webshoppen, men ikke mindst i forhold til søgemaskiner som Google. Den nye frontend er optimeret på en lang række parametre. Disse kan opdeles i frontend-optimeringer og backend-optimeringer (server-side). Nogle af de vigtigste optimeringer er:

Frontend:

• Minimering og samling af statiske ressourcer (Rooty demo loader 39 ressourcer).
• Automatisk billede-komprimering gennem ”progressive” billedfremstilling.
• Statiske ressourcer loades gennem optimerede cookie- og sessionsfri domæner.
• Asynkron load af produktlister med AngularJS (AJAX).

Backend:

• Optimering af server-load, så minimum af data hentes for hvert load.
• Caching teknologi på serverne, bl.a. til produktlisterne.
• Interne server optimeringer, web og databaseserver opsætning.

Ny teknologi

Vi er vilde med ny teknologi hos SmartWeb, og holder løbende øje med tendenser i branchen. Men samtidig tager vi kun ny teknologi ind, hvis det rent faktisk giver mening for vores kunder. Den nye frontend indeholder en lang række nye teknologier – som de vigtigste kan nævnes:
 

• TorqueUI: vi ønskede at lave et mere simpelt og shop orienteret UI framework end f.eks. Twitter Bootstrap. Resultatet blev TorqueUI - www.torqueui.com. Det er udviklet OpenSource og kan benyttes uden for SmartWeb platformen. Frameworket sikrer, at frontend’en er responsive og uniform.
• AngularJS: et Javascript framework fra Google, som vi har valgt at benytte i vores produktlister. AngularJS giver en lang række fordele rent teknisk, i forhold til UI og asynkron load. Vi har allerede lanceret en større opdatering til produktlisterne og AngularJS – mere om den opdatering i et nyt blog-indlæg.
• SASS og Compass: vi bruger disse frameworks til at bygge og kompilere CSS. Med disse teknologier bliver færre filer loadet, samtidig med at størrelsen på filen minimeres.

Fremtiden

Med den nye frontend er en gammel benzinmotor nu udskiftet med en moderne ”Tesla elmotor”. Uden at afsløre for meget har vi lige nu fokus på:
 

• Nye designs: vi ønsker flere designs i SmartWeb med tekniske funktioner og indstillingsmuligheder.
• UI optimeringer: mindre ting, der sikrer, at de handlende får en god oplevelse på webshoppen.
• Hastighed: fordi det aldrig kan blive hurtigt nok...

Relaterede indlæg:
Læs om de nye designs 
Læs om fordelene ved responsive web design 
Læs om vigtigheden af et mobilvenligt design 
Læs historien om udviklingen af SmartWebs responsive designs