Datakonsumtionen av mobiltrafik ökade med 74% år 2015, med över en miljard enheter sålda under samma period, och trenden förändras fortfarande. Det ensamma borde vara tillräckligt för att lyfta fram vikten av att optimera din design för mobil trafik.

några WordPress-teman är bättre optimerade för att hantera lägre upplösningar, men det betyder inte absolut kompatibilitet som du kan lita på helt. Faktum är att det finns ett antal korrigeringar att implementera som gör att du kan optimera din webbplats bättre för mobila enheter.

I den här handledningen utforskar vi olika tips som är specifika för mobila enheter, bildoptimering, layoutdesign och mer.

Tips 1: Lägg till iOS-ikoner och stänkskärmar

ios-icons-startbild

Trots de många framstegen som gjorts av Android kvarstår iOS-enheter mycket populärt och dra nytta av stödet från en aktiv grupp utvecklare. Poängen är att många av dina besökare sannolikt kommer att äga en Apple-enhet, och om de antagligen vill njuta av din webbplats ännu mer genom att spara din ikon på deras startskärm.

För att förbereda dig för denna eventualitet kommer vi att visa dig hur du kan lägga till iOS-ikoner från Wordpress blogg.

Först måste du hitta filen header.php för ditt tema (eller barnetema), eftersom vi måste lägga till en liten kod i taggen .

Här är koden du behöver lägga till:

 

Som du kan se nämner koden specifika ikoner för iPhones, iPads och Retina-enheter, som alla måste föregås av rel-attributet med värdet "call-touch-icon".

Medan du håller på med det kan du också designa en helt ny iOS-skärm för din webbplats med följande kod:


Notera: Stänkskärmen är den som visas när du startar en applikation. Det är som laddningsskärmen för en applikation.

Tips 2: Använd flera bildstorlekar i kombination med "mediefrågor"

multipla bildstorlekar-media-frågor

Du är naturligtvis redan bekant med begreppet " media-frågor". Tänk på de specifika designreglerna som ingår i din CSS när ett specifikt scenario uppstår. I fallet med mobil design är dessa scenarier olika upplösningar, enhetsorienteringar och webbläsardimensioner. Problemet med " media-frågor Är det idag, många designers och utvecklare bygger webbplatser med en sekundär mobil strategi, men det motsatta borde vara.

Denna sekundära mobila strategi kan upptäckas i media-frågor När du ser måtten på populära enheter (dvs. 320px, 480px, 768px) som riktlinjer. Även om detta i teorin kan verka som ett bra tillvägagångssätt, eftersom man för att vara effektiv kan man inte göra anspråk på att använda dimensionerna på alla enheter som varierar så ofta som de skapas.

Så nästa gång du arbetar med en design, gör mobilkompatibilitet till en prioritet:

  • designa din "Frågor" så arbeta med små resolutioner.
  • Undvik att använda pixlar för att deklarera dina brytpunkter. Försök istället att arbeta med "Ems" och procentsatser så ofta som möjligt så att dina mönster kan justeras för zoom.
  • Kom ihåg att betala din " media-frågor ”Så att de anpassar sig till Retina-enheter (minsta upplösning: 192dpi).

Tips # 3: Optimera dina bilder

optimera-your-image

Även om du har en fantastisk och lyhörd design kan potentiella besökare glida bort om de inser att din webbplats tar lång tid att ladda, och bilder spelar en stor roll i denna aspekt. Användare vill se vackra bilder, som dock laddas mycket snabbt, därav behovet av att optimera dina bilder.

Även om det kan verka som ett ramverk finns det många verktyg som kan hjälpa dig att uppnå dessa resultat. Högst upp på listan har vi EWWW Image Optimizer et WP Smush , som en gång installerats, kommer automatiskt att använda kvalitetsförlustfria komprimeringstekniker för varje bild som laddas upp till din WordPress-webbplats och din WordPress-webbplats kan till och med gå igenom ditt mediebibliotek för att optimera bilderna som laddats upp tidigare.

Om du föredrar att inte lägga till ytterligare ett plugin till din webbplats finns det alltid fristående verktyg som t.ex. TinyJPG et TinyPNG, som i huvudsak gör samma jobb som EWWW Image Optimizer genom att selektivt minska antalet färger i dina bilder, samt strippa på meta (ta bort onödiga data). Detta översätts till en betydligt mindre filstorlek med många nästan oupptäckbara förändringar, vilket är en perfekt kompromiss.

Tips # 4: Tänk på att använda SVG

animerade-svg-logo-med-css-thumbnail

Scalable Vector Graphics (SVG) är ett smidigt verktyg som du bör tänka på. Trots vad namnet skulle innebära använder de någon form av XML-markeringsspråk istället för ett bildformat, och de är särskilt användbara för enkel grafik som logotyper, ikoner, infografik och andra applikationer.

« Varför SVG så användbart?”Du kan med rimlighet undra. Till att börja med är de expanderbara vilket innebär att du inte behöver oroa dig för att anpassa dig till olika fönster. Utöver det kan de också enkelt animeras med CSS.

Du bör känna till verktyg som Adobe Illustrator, Inkscape och Sketch, som inkluderar stöd för detta format, så prova dem!

5 Tips: välja bra typsnitt

pick-rätt-att göra

Mobildesign handlar inte bara om bilder. Att välja vilka teckensnitt som ska användas kan ha så mycket (om inte mer) inverkan på dina mönster som grafik gör, eftersom de flesta webbplatser använder text som sin primära metod för att förmedla information.

Ur designers perspektiv betyder detta att välja rätt teckensnitt, vilket innebär:

  • Använd inte teckensnitt som är för tunna eller komplicerade. Ditt teckensnitt ska vara lätt synligt på mobila enheter om du inte vill att användare ska justera zoomningen för att läsa dig bättre.
  • Undvik teckensnitt med för lite utrymme mellan bokstäver för bättre läsbarhet.
  • Om du använder media-query För din text, använd ems för storlekar istället för pixlar.
  • Överväg att använda sans serif-teckensnitt, eftersom de tenderar att passa bättre vid de flesta upplösningar.

Tips 6: Behandla text som en del av användargränssnittet

text-delen-interface

Eftersom vi använder typografi bör du veta att teckensnittet inte är det enda du bör tänka på, och det handlar inte ens om läsbarhet. Eftersom vi kommer att arbeta med ett stort antal fönster vill du att din design ska betrakta text som en integrerad del av användarupplevelsen för att maximera läsbarheten, detta betyder:

  • Användningen av " media-frågor "För att upprätthålla en hanterbar gräns för tecken per rad (kom ihåg att använda ems istället för pixlar!). Det allmänt accepterade beloppet ställs in någonstans mellan 45-75 tecken.
  • Kom ihåg att använda vw, vh och vhmin (dessa är alla relaterade till visningsprocenten) CSS3-värden för att hålla teckenstorleken i förhållande till tittarens storlek eller på specifika fönster.

Sammanfattning

Vi har sett genom hela den här artikeln att mobiltrafiken blir mindre och mindre försumbar, vilket borde vara en prioritet för varje utvecklare inom webbdesign. Så du har några tips som du kan tillämpa på din blogg för att komma in på din nuvarande webbplats « mobil-vänliga".