Sådan sættes en mobil først sammen, præstationsorienteret WordPress-tema [Del 1]

Sådan sættes en mobil først sammen, præstationsorienteret WordPress-tema [Del 1]

Sådan sættes en mobil først sammen, præstationsorienteret WordPress-tema [Del 1]
СОДЕРЖАНИЕ
02 июня 2020

I sin kerne er det at sammensætte et WordPress-tema en temmelig enkel opgave. WordPress leverer et rigtig venligt miljø og gør det klart, hvilke PHP-funktioner der skal bruges til hvilket formål undervejs.


Imidlertid. Selvom det er enkelt, det er langt fra let, og især hvis du ønsker, at dit tema skal være mobiloptimeret.

Der er en række unikke problemer, som du burde overvinde, hvis du vil ende med et kvalitetsprodukt, der indlæses hurtigt, fungerer på en forudsigelig måde, og (hvad er det vigtigste) er brugervenligt og tilgængeligt for folk, der bruger forskellige enheder og skærmstørrelser.

Denne to-delede guide leder dig gennem processen i 10 trin, hvor du viser de vigtigste ting, du skal tage sig af, når du bygger en mobil første, præstationsorienteret WordPress-tema.

For del 2, se her: Sådan sammensættes en mobil første, præstationsorienteret WordPress-tema [Del 2]

1. Indholdet kommer først

Der er virkelig ikke meget plads på mobilen til at fremvise meget designdetaljer eller til at bruge dejlige flotte elementer bare for det.

Selvom moderne enheder er i stand til at vise grafik op til 1136 × 640 pixel (iPhone 5s), skal vi ikke glemme, at skærmen stadig kun er fire centimeter på tværs. Dette er ikke meget fast ejendom at arbejde med.

Ting værd at gøre:

  • slippe af med alle ekstra designelementer, der ikke er vigtige for præsentation af indhold,
  • Sørg for, at hovedindholdsblokken er så høj på designduken som muligt (på grund af forskellige skærmstørrelser på mobile enheder, kan vi ikke forudsige, hvor "folde" vil komme nøjagtigt),
  • fokus på typografi og gøre indholdet læsbart (øg skriftstørrelsen, men vær forsigtig med ikke at gøre en enkelt tekstlinie for kort og dermed uleselig),
  • introducer god kontrast – tekst vs. baggrund (dette er afgørende for mobile enheder, især hvis nogen forsøger at læse siden, mens han står i et solrigt område).

2. Optimer billederne

Billedoptimering er endnu vigtigere for mobilenheder end for noget andet scenarie. Sagen er, at når nogen forsøger at få adgang til et websted via mobil, er de sandsynligvis på en langsom 3G-forbindelse. Derfor skal du sørge for, at temaet gør det muligt for billederne at indlæse relativt hurtigt uanset denne kendsgerning.

Specifikke ting, du kan gøre:

  • Overvej at integrere doven belastningsfunktionalitet. I sig selv er doven indlæsning stor (indlæsning af billeder kun når besøgende ruller til dem). Men problemet er, at slutbrugerne muligvis ender med at installere nogle dovne load-plugins på det endelige websted. Dette kan forstyrre det, du allerede har integreret i temaet. Hvis du ønsker at tage risikoen, er det dog bedst at gøre funktionaliteten mulig gennem en løsning som jQuery og dens Lazy Load Plugin. WordPress-plugins bruger også dette bibliotek, så du minimerer sandsynligheden for, at ting går galt, når der er to forskellige scripts, der begge prøver at opnå det samme resultat. Gør det også muligt at deaktivere doven belastning i dit temas indstillinger.
  • Optimer billederne for størrelse og kvalitet. Billeder udgør normalt størstedelen af ​​båndbreddeforbruget for det gennemsnitlige websted, så som temaskaber skal du sørge for, at dine billeder er så optimerede som muligt. Du kan gøre to ting for at få dette til at ske: (1) Sørg for, at billederne ikke er større i dimension, end de skal være (se nr. 3) – en ekstra pixel her og der kan tilføjes temmelig hurtigt, (2) optimere alle billeder via et værktøj som Optimole eller TinyPNG inden du frigiver temaet for offentligheden.
  • Brug ikonskrifter, når det er muligt. Den gamle skole med inkludering af ikoner i ethvert design var bare at opbygge dem i Photoshop, konvertere alt til PNG eller GIF og rulle det ud. Men i dag er det ikke den mest optimerede løsning. Med værktøjer som Font Awesome, vi kan berige vores designs med hundreder af smukt designede skrifttyper, mens vi samtidig holder ydelsen meget anstændig.

3. Lav design Retina-klar (optimeret til skærme med høj DPI)

Næsten alle nye enheder leveres med høj-DPI-skærme i disse dage. Disse skærme får alt til at se meget skarpt ud, men kun hvis den pågældende ting er optimeret til høj-DPI-visning. Ellers vil brugeren se en masse pixelering, og dette vil gøre oplevelsen generelt uattraktiv.

Der er to hovedgenveje, du kan tage til høj-DPI-optimering:

  • Brug billedfonte – nævnt ovenfor; billedskrifter skaleres automatisk og ser godt ud på alle enheder.
  • Opret alternative versioner af alle de andre billeder – i to gange størrelsen – og skift dem med CSS, når der bruges en høj-DPI-enhed til at se indholdet. Her er en guide hvordan du kan gøre dette.

Endelig skal du også passe på favoritterne i dit tema (og sandsynligvis give brugeren mulighed for at ændre dem også, men det er en anden ting).

Tilbage i dagen havde du kun brug for et 16 × 16 PNG-billede, som du så ville konvertere til ICO, og du var klar. Lige nu er det meget mere kompliceret. For eksempel vil de nye Apple-enheder prøve at søge efter større ikoner og derefter forsøge at bruge dem som bogmærker.

Nogle af favoritstørrelserne, som iOS forventer at finde, er: 76 × 76, 120 × 120, 152 × 152. Her er en komplet liste på Apple.com.

Du kan enten oprette disse ikoner for hånd eller bruge et værktøj som Ægte Favicon Generator. Det behøver bare et startbillede, der bruges som base til at generere alle de andre versioner. Oven på dette får du også den rigtige HTML-kode til indlejring af ikoner i temaet.

4. Optimer til at tappe

Vi må huske, at de fleste af de mobile enheder derude understøtter berøringsgrænseflader eller er berøringsskærmbaseret helt. Hvad det betyder er, at vi er nødt til at gøre ethvert element, der kan tappes, stort nok, så brugeren nemt kan få adgang til det.

For eksempel er tekstlink ikke særlig touch-optimeret, fordi de kræver en masse koncentration fra brugerens side for at trykke nøjagtigt på dem. Det er et bedre designvalg at gå med knapper til temaets interface. Knapper, der selv er relativt store, og som også har et stort berøringsområde.

En anden ting at huske er, at brugere gør det meste af at tappe med tommelfingre, så det er en god ide at placere det vigtigste "opfordring til handling" knapper på de let tilgængelige tommelfingerzoner. F.eks. Her hvordan det spiller ud på iPhone.

5. At gøre temaet lydhørt er ikke alt, hvad der betyder noget

Lad os afslutte den første del af denne guide med den mest almindelige fejl, folk begår, når de designer temaer til mobil. Fejlen er at behandle lydhør design som det ultimative slutspil.

Indrømmet, at gøre dit tema lydhørt er en enorm fordel, især når det drejer sig om at håndtere ikke-standardiserede enheder og skærmstørrelser, men det er langt fra en magisk kugleløsning. Bare fordi et design er lydhørt, betyder det ikke, at det vil fungere godt på mobilen. F.eks. Løser det ikke problemer med billedoptimering, eller det faktum, at knapper er vanskelige at tappe nøjagtigt osv.

Så ja, gør hvad du kan for at gøre dit tema lydhør, men sørg samtidig for de andre elementer, vi gennemgår i denne vejledning for maksimalt mobilvenligt design.

Jeg inviterer dig til at indstille til den anden del for at få resten af ​​listen (vi kommer til at komme ind på ting som UX-design, navigation, bruge JS til at optimere belastningstider og drage fordel af nogle af de mindre kendte WordPress-funktioner, og mere). Og i mellemtiden, hvad er din største udfordring, når du designer til mobil?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector