Mobil-Først Design i Drupal: Din Komplette Guide

I de seneste år har landskabet for webdesign gennemgået en revolutionerende forandring. Tidligere startede hjemmesidedesign typisk med fokus på en mellemstor skærmstørrelse på en stationær computer, måske en opløsning på 1024x768 pixels. Men med den eksplosive udbredelse af mobile enheder, der er i stand til at vise hjemmesider med stor nøjagtighed, er variationen i skærmstørrelser blevet enorm. Dette betyder, at vores strategi for webdesign har måttet udvikle sig fra at fokusere på stationære skærme med tilfældige 'fikser' for at få siderne til at fungere på mobil, til at begynde med en mobil-først strategi. Denne guide vil udforske mobil-først strategien og dens implementering inden for Drupal CMS.

Hvad Er Mobil-Først Design?

Mobil-først design handler om at iterere et design med udgangspunkt i den mindste målskærmstørrelse. Når displayet for den mindste skærmstørrelse er udarbejdet, går man videre til den næste store målskærmstørrelse og justerer displayet efter behov, så det passer til den nye størrelse. Forestil dig, at din mindste skærmstørrelse er en smartphone (selvom det snart kan være et smartur). Mest sandsynligt vil dit design på en smal smartphone ikke indeholde indhold i kolonner. I stedet vil information, der normalt ville befinde sig i en sidebar, blive vist før eller efter dit primære indhold.

Når man bevæger sig op til den næste målskærmstørrelse, måske en tablet, kan man have plads nok til at inkludere en ekstra kolonne. Denne lagdeling kan fortsætte, efterhånden som der gives mere skærmplads, og dit design ændres for at passe. Princippet er at bygge opad fra det mest begrænsede rum, hvilket sikrer, at kernen i indholdet altid er tilgængelig og læsbar, uanset enhed. Dette sikrer også en bedre ydeevne, da man ikke 'gemmer' elementer, men snarere 'tilføjer' dem, når pladsen tillader det.

Mobil-Først Design Forklaret Enkelt

Er du forvirret over mobil-først strategien? Lad mig give en forklaring, der måske er lettere at fordøje.

Den bedste visuelle beskrivelse, jeg har hørt om dette, er at tænke på de forskellige niveauer som farvet glas. Det nederste lag af farvet glas ville repræsentere mobil designet. Derfra kan du tilføje et tablet-baseret design – dette andet niveau af farvet glas kunne have et lidt anderledes design end det nederste lag. Disse designændringer ville naturligvis dække det nederste lag, da de forskellige farver og former inden for det farvede glas ville blokere lyset fra at ramme det nederste lag på samme måde, hvilket producerer et andet resultat. Nogle af lyset ville naturligvis trænge igennem til det nederste lag, hvilket betyder, at lagene af farvet glas ville se forskellige ud alene, men også når de stables.

Denne stakningsproces ville fortsætte på hvert nyt lag, vise forskellige designs igennem og alle baseret på hinanden. Det handler om at definere de mest essentielle elementer først for den mindste skærm og derefter gradvist tilføje mere komplekse layouts og indhold, efterhånden som skærmstørrelsen øges.

Responsivt Design i Drupal

En central del af en mobil-først strategi, fra et teknisk synspunkt, er brugen af responsivt hjemmesidedesign. Dette er den proces, hvor kode, der læses af browseren, registrerer skærmstørrelser og justerer layouts, så de matcher en bestemt skærmstørrelse. I tekniske termer gøres dette gennem konceptet medieforespørgsler (media queries).

Medieforespørgsler er Cascading Style Sheet (CSS)-kode, der er i stand til at detektere en forudindstillet skærmbredde og derefter anvende indkapslet kode, der kun kører ved den bestemte størrelse eller større (eller mindre). Dette giver udviklere mulighed for at definere forskellige stilregler for forskellige breakpoints, såsom 480px for smartphones, 768px for tablets og 1024px for desktops. Drupal-temaer udnytter i høj grad medieforespørgsler til at levere en problemfri oplevelse på tværs af et væld af enheder. Når en bruger tilgår din Drupal-side, tjekker browseren enhedens skærmstørrelse og orientering og anvender derefter de relevante CSS-regler defineret i temaet, hvilket sikrer, at indholdet præsenteres optimalt.

Adaptivt Design vs. Responsivt Design

Mens responsivt design sigter mod konstant at tilpasse sig forskellige skærmstørrelser, findes der også adaptivt design. Det er vigtigt at forstå forskellen:

Responsive designprincipper dikterer, at designet konstant skal reagere på varierende skærmstørrelser. Det betyder, at dit 'tablet'-måldesign skal fungere med en række skærmstørrelser tæt på en enkelt målstørrelse. Dette skyldes, at der er variation i skærmstørrelser inden for enhedskategorier; ikke alle tablets har den samme skærmstørrelse. Designkode, der dikterer statiske layouts baseret på enkelte skærmstørrelses-breakpoints, er kendt som adaptivt design og er mindre fleksibelt (dog mindre komplekst) end responsivt design.

For Drupal-udvikling er responsivt design den foretrukne tilgang, da det giver den bedste brugeroplevelse og er mest fremtidssikret.

Historien om Mobile Hjemmesider

Før responsive (og adaptive) designkoncepter blev bredt accepteret, var der systemer på plads til at detektere bogstavelige mobile enheder (i modsætning til skærmstørrelser) og justere design baseret på, hvilken enhed der tilgik hjemmesiden. Som du måske kan forestille dig, var dette ikke en skalerbar tilgang, da flere og flere mobile produkter kom til. Det var urimeligt konstant at opdatere metoder til detektering af mobile enheder, hver gang en ny enhed blev populær. En tilgang med at justere design baseret på skærmstørrelser var langt mere praktisk.

Før der var enhedsdetektering tilgængelig som en mobil webdesignstrategi, var separate mobile hjemmesider den primære metode til at håndtere mobile brugere. Du husker måske at have set omdirigeringer til mobile underdomæner (f.eks. http://m.domæne.com). Denne metode anvendte en næsten helt separat hjemmeside, der blev vist til mobile brugere. Et separat tema eller en skabelon skulle vedligeholdes, og undertiden endda separate (eller duplikerede) kopier af indhold. Dette var en ressourcekrævende og ineffektiv måde at drive en moderne hjemmeside på, og derfor er mobil-først og responsivt design blevet standarden.

Mobil-Først Designstrategi for Drupal Hjemmesider

Som udvikler er jeg en stor fan af HTML5 Boilerplate, et generisk frontend web-framework. Det er et fantastisk værktøj til at starte nye webprojekter. Efterhånden som vi er blevet mere involveret i Drupal, har jeg sat mig for at finde et solidt tema, der ville understøtte mange af de samme principper og fungere godt med Drupal. Vores primære Drupal-projekter er alle i version 7, så vi har begrænset vores temaanmeldelse og procesudvikling til Drupal 7.

At vælge det rigtige Drupal-tema er afgørende for en succesfuld implementering af mobil-først. Et godt tema skal ikke kun være visuelt tiltalende, men også teknisk robust og bygget med responsive principper for øje. Det handler om at lægge et solidt fundament, der kan skalere og tilpasses fremtidige enheder og skærmstørrelser.

Faldgruber ved Drupal Mobiltemaer

En primær bekymring, vi har ved brug af Drupal 7-temaer, er at følge en mobil-først design tilgang. Dette betyder, at vi ønsker basistemaer, der følger et princip om at tilføje større 'lag' af skærmstørrelser med passende designjusteringer oven på det oprindelige mindste skærmstørrelsesmål. Hvad vi ikke ønsker, er det modsatte: temaer, der fokuserer på at fjerne elementer fra desktop-designs og tilsidesætte desktop-designs for at passe til små skærme.

Denne omvendte tilgang, ofte kaldet 'desktop-først med mobile fixes', fører ofte til unødvendig oppustet kode, langsommere indlæsningstider på mobile enheder og en suboptimal brugeroplevelse. Elementer, der er skjult på mobil, indlæses stadig og forbruger ressourcer, hvilket er spild. Mobil-først sikrer, at kun det nødvendige indlæses for den mindste skærm, og yderligere elementer tilføjes kun, når pladsen tillader det.

Anbefalede Drupal 7 Mobiltemaer og Skabeloner

Vi har brugt flere forskellige Drupal 7-temaer her hos Daymuse. Hver giver varierende grader af mobil support. Disse omfatter:

• Adaptive Theme: Kendt for sin fleksibilitet og et stærkt grid-system, der understøtter responsivt design.
• Aurora: Et moderne og letvægts tema, der lægger vægt på performance og mobile-først principper.
• Bootstrap: Baseret på det populære Bootstrap framework, hvilket giver en hurtig udviklingsproces og et stort udvalg af komponenter. Det er dog mere 'samling af stykker' end et åbent landskab, hvilket kan begrænse unik variation.
• Foundation: Ligesom Bootstrap er dette et framework-baseret tema, der tilbyder et robust grid og mange indbyggede komponenter for responsivt design.
• Omega: Et kraftfuldt og fleksibelt basistema, der er bygget fra bunden med mobil-først og responsivt design i tankerne.
• Radix: Et moderne, startertema, der udnytter SASS og Compass for en mere avanceret front-end udviklingsproces.
• Zen: Et af de ældste og mest respekterede startertemaer for Drupal, der giver et solidt fundament for at bygge et tilpasset, responsivt design.

Hvert af disse temaer har deres fordele og ulemper. Jeg anbefaler at bruge dette som et udgangspunkt for at undersøge yderligere brugsscenarier for hvert tema. For eksempel er Bootstrap et fantastisk tema (baseret på et fantastisk framework) til hurtigt at opbygge et rigt design, men har noget begrænset variation; det er mere samling af stykker end et åbent landskab, hvis man ønsker et helt unikt udtryk.

Vores Foretrukne Mobil-Først Understøttende Drupal Tema

Vi har en tendens til at bygge klientsider, der starter fra en bogstavelig blank side, og til det foretrækker vi i høj grad Omega temaet som grundlag for vores projekter. Det ligner i naturen HTML5 Boilerplate frontend framework, jeg nævnte tidligere. Når du først installerer Omega, vil du blive mødt af et fuldstændigt nulstillet design: hvid baggrund, standardtekst. De styling-nulstillinger, der leveres af Omega, betyder, at du arbejder fra den samme blanke skifer på tværs af alle browsere; der bør ikke være variation i elementstilarter. Derudover er CSS'en opsat til at følge mobil-først designprincipper: byg det lille skærmdesign først, tilføj yderligere lag af designændringer for hvert ekstra breakpoint. Omega inkorporerer responsivt design som en del af dets kerneformål, hvilket gør det til et ideelt valg for komplekse og skræddersyede Drupal-projekter.

Mobil Design i Drupal Administration

Generelt, når vi diskuterer mobil-først designstrategi for Drupal, refererer vi til, hvad slutbrugeren ser. Drupal-sider anvender faktisk to separate temaer: et slutbrugertema, som anonyme hjemmesidebesøgende ser gennem Drupal's Content Delivery Application-del, og et administrationstema, som loggede brugere typisk ser med Drupal's Content Management Application-side.

Selvom vores primære fokus er på slutbrugeroplevelsen, er der også bekymring for administrationssiden og mobil-først design. Ligesom slutbrugertemaet er Drupals administrationstemaer fuldt tilpasselige og kan bygges fra bunden ved hjælp af mobil-først designprincipper. Typisk anvender vi færdige Drupal-administrationstemaer, da vores kunder finder administrationsgrænsefladen sekundær. Vi elsker at bruge Ember mobilvenlige administrationstema med Drupal 7. Ember fungerer perfekt sammen med Mobile Navbar menu-modulet. Ember & Navbar mobilmenu er nogle af vores foretrukne mobilværktøjer til Drupal. Disse to Drupal-moduler skaber et perfekt udgangspunkt for mobilvenlig Drupal 7-administration. Endnu bedre, de følger retningen for Drupal 8 – hvilket gør det lettere for dine brugere at migrere til Drupal 8 i fremtiden.

Drupal Mobilvenlige Testværktøjer

Siden april 2015 har Google lagt endnu større vægt på hjemmesiders mobilvenlighed. Hvis dine brugere er på en mobil enhed og søger på Google, er de mere tilbøjelige til at finde resultater, som Google anser for at være 'mobilvenlige'. Der er flere kriterier for at bestå denne test, men følg bedste praksis som beskrevet ovenfor med din Drupal-side og baser den på et anbefalet Drupal-mobiltema, så bør din side bestå testen.

Google tilbyder et gratis værktøj kaldet Mobile-Friendly Test. Før du lancerer din side, skal du sørge for, at den opfylder kravene til at være mobilvenlig. At have en mobilvenlig Drupal-side er en af de nemmeste måder at overgå dine konkurrenter, der ikke har sider, der opfylder Googles mobilvenlige krav i søgeresultaterne. Regelmæssig test og optimering er nøglen til at opretholde en høj placering i søgeresultaterne og sikre en fremragende brugeroplevelse på tværs af alle enheder.

Ofte Stillede Spørgsmål om Mobil-Først Design og Drupal

Hvorfor er mobil-først design så vigtigt for min Drupal-hjemmeside?

Mobil-først design er afgørende, fordi en stor og voksende del af internettrafikken kommer fra mobile enheder. Google prioriterer mobilvenlige hjemmesider i sine søgeresultater, hvilket betyder, at en mobil-først tilgang kan forbedre din SEO og din synlighed markant. Derudover sikrer det en optimal brugeroplevelse for alle besøgende, uanset hvilken enhed de bruger, hvilket fører til højere engagement og lavere afvisningsprocenter.

Hvad er forskellen på et Drupal-tema og et modul?

Et Drupal-tema (eller 'template') styrer udseendet og layoutet af din hjemmeside. Det definerer farver, skrifttyper, placering af indhold og den overordnede visuelle præsentation. Et modul, derimod, tilføjer funktionalitet til din Drupal-side, såsom kontaktformularer, e-handelsfunktioner, avancerede søgemuligheder eller integration med tredjepartstjenester. Temaer er til 'hvordan det ser ud', mens moduler er til 'hvad det gør'.

Skal jeg bruge et specifikt tema for at implementere mobil-først i Drupal?

Mens alle moderne Drupal-temaer har en vis grad af responsivitet, er det stærkt anbefalet at vælge et tema, der er bygget specifikt med mobil-først principper i tankerne. Temaer som Omega, Radix eller Zen er fremragende 'starter-temaer', der giver et robust fundament for at bygge et skræddersyet, mobil-først design. De undgår de faldgruber, der er forbundet med at forsøge at tilpasse et desktop-fokuseret design til mobile enheder.

Hvordan tester jeg min Drupal-hjemmesides mobilvenlighed?

Den nemmeste og mest pålidelige måde er at bruge Googles gratis Mobile-Friendly Test værktøj. Du indtaster blot din hjemmesides URL, og Google analyserer den og giver dig en rapport om dens mobilvenlighed. Derudover kan du teste manuelt ved at åbne din hjemmeside på forskellige mobile enheder og i forskellige browsere for at sikre, at layoutet er korrekt og brugervenligt.

Hvilken Drupal-version er bedst til mobil-først design?

Mens Drupal 7 har god understøttelse af mobil-først design med de nævnte temaer, er Drupal 8 og især Drupal 9 og 10 bygget med mobil-først og responsivitet som kerneprincipper. De nyere versioner af Drupal tilbyder forbedret ydeevne, bedre out-of-the-box responsivitet og mere moderne front-end udviklingsværktøjer, hvilket gør dem til det ideelle valg for nye projekter med et stærkt fokus på mobil-først.

Hvis du vil læse andre artikler, der ligner Mobil-Først Design i Drupal: Din Komplette Guide, kan du besøge kategorien Teknologi.