Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 1]

Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 1]

Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 1]
СОДЕРЖАНИЕ
02 июня 2020

В основата си създаването на WordPress тема е доста проста задача. WordPress предлага наистина приятелска среда и дава яснота кои PHP функции да се използват с каква цел по пътя.


Въпреки това. Въпреки че е просто, далеч не е лесно, и особено ако искате темата ви да бъде оптимизирана за мобилни устройства.

Има редица уникални проблеми, които трябва да преодолеете, ако искате да завършите с качествен продукт, който се зарежда бързо, работи по предвидим начин и (което е най-важното) е удобен за потребителя и достъпен за хората, използващи различни устройства и размери на екрана.

Това ръководство от две части ще ви преведе през процеса в 10 стъпки, като изброява най-важните неща, за които трябва да се обърнете внимание, когато изграждате първо мобилна, ориентирана към производителността тема на WordPress.

За част 2 вижте тук: Как да съберем мобилна първа, ориентирана към производителността тема на WordPress [част 2]

1. Съдържанието е на първо място

Наистина няма много място за мобилни устройства, за да се покажат много дизайнерски детайли или да се използват приятно изглеждащи елементи само заради него.

Въпреки че съвременните устройства могат да показват графика до 1136 × 640 пиксела (iPhone 5s), нека не забравяме, че екранът все още е само четири инча. Това не е много недвижими имоти за работа.

Неща, които си струва да направите:

  • отървете се от всички допълнителни дизайнерски елементи, които не са от съществено значение за представянето на съдържанието,
  • уверете се, че основният блок съдържание е възможно най-висок върху дизайнерското платно (поради различни размери на екрана на мобилни устройства, не можем да предвидим къде "гънка" ще дойде точно),
  • се съсредоточете върху типографията и направете съдържанието четено (увеличете размера на шрифта, но внимавайте да не направите един ред текст твърде кратък и по този начин нечетлив),
  • въведете добър контраст – текст спрямо фона (това е от решаващо значение за мобилните устройства, особено ако някой се опита да прочете страницата, докато стои на слънчева зона).

2. Оптимизирайте изображенията

Оптимизацията на изображения е дори по-важна за мобилните, отколкото за всеки друг сценарий. Работата е там, че когато някой се опита да влезе в сайт чрез мобилен телефон, вероятно е на бавна 3G връзка. Затова трябва да сте сигурни, че темата дава възможност изображенията да се зареждат сравнително бързо, независимо от този факт.

Конкретни неща, които можете да направите:

  • Помислете за интегриране на функцията за мързелив товар. Само по себе си мързеливото зареждане е голямо (зареждането на изображения само когато посетителят превърта към тях). Проблемът е обаче, че крайните потребители могат сами да инсталират някои мързеливи приставки на крайния сайт. Това може да попречи на всичко, което вече сте интегрирали в темата. Ако искате да поемете риска, обаче, най-добре ще бъде да направите функционалността възможна чрез решение като jQuery и неговите Мразено зареждане на приставката. WordPress плъгините са склонни да използват и тази библиотека, така че намалявате до минимум вероятността нещата да се объркат, когато има два различни скрипта, и двамата се опитват да постигнат един и същ резултат. Също така направете възможно деактивирането на мързеливо натоварване в настройките на вашата тема.
  • Оптимизирайте изображенията за размер и качество. Изображенията обикновено представляват по-голямата част от консумацията на честотна лента за средния сайт, така че като създател на теми, трябва да се уверите, че вашите изображения са възможно най-оптимизирани. Можете да направите две неща, за да направите това: (1) уверете се, че изображенията не са с по-големи размери, отколкото трябва да бъдат (вижте # 3) – допълнителен пиксел тук и там може да се добави доста бързо, (2) оптимизиране всички изображения чрез инструмент като Optimole или TinyPNG преди да пусне темата пред обществеността.
  • Използвайте шрифтове за икони, когато е възможно. Старата школа за включване на икони във всеки дизайн беше просто да ги изгради във Photoshop, да конвертира всичко в PNG или GIF и да го разгърне. В днешно време обаче не е най-оптимизираният от решенията. С инструменти като Шрифт страхотно, можем да обогатим дизайните си със стотици красиво проектирани шрифтове, като в същото време поддържаме производителността много прилична.

3. Направете дизайн Retina готов (оптимизиран за екрани с висока DPI)

Почти всички нови устройства се предлагат с високо-DPI дисплеи в наши дни. Тези екрани правят всичко да изглежда много остро, но само ако въпросното нещо е оптимизирано за гледане с висока DPI. В противен случай потребителят ще види много пикселация и това ще направи изживяването като цяло непривлекателно.

Има две основни команди за бърз достъп до оптимизация с висока DPI:

  • Използвайте шрифтове за изображения – споменати по-горе; шрифтовете на изображението се мащабират автоматично и изглеждат страхотно на всяко устройство.
  • Създайте алтернативни версии на всички останали изображения – с два пъти по-голям размер – и ги заменете с CSS винаги, когато се използва високо-DPI устройство за преглед на съдържанието. Ето ръководство за това как можете да направите това.

И накрая, вие също трябва да се погрижите за фаворитите във вашата тема (и вероятно да позволите на потребителя също да ги промени, но това е друго нещо).

Обратно през деня ви трябваше само един PNG изображение с размери 16 × 16, което след това ще преобразувате в ICO и сте готови. В момента е много по-сложно. Например новите устройства на Apple ще се опитат да търсят по-големи икони и след това ще се опитат да ги използват като отметки.

Някои от размерите на фавикон, които iOS очаква да открият, са: 76 × 76, 120 × 120, 152 × 152. Ето а пълен списък в Apple.com.

Можете или да създадете тези икони на ръка или да използвате инструмент като Истински генератор на Favicon. Просто се нуждае от едно начално изображение, което ще се използва като основа за генериране на всички останали версии. На всичкото отгоре получавате и правилния HTML код за вграждане на иконите в темата.

4. Оптимизирайте за подслушване

Трябва да помним, че повечето мобилни устройства там поддържат сензорни интерфейси или са изцяло базирани на сензорен екран. Това означава, че трябва да направим всеки елемент с възможност за докосване достатъчно голям, за да може потребителят да има достъп до него с лекота.

Например текстовите връзки не са много оптимизирани за докосване, тъй като изискват много концентрация от страна на потребителя, за да ги натиснете точно. По-добър избор за дизайн е да използвате бутони за интерфейса на темата. Бутони, които сами по себе си са сравнително големи и също имат голяма допирна зона.

Друго нещо, което трябва да имате предвид е, че потребителите правят по-голямата част от потупването си с палци, така че е добра идея да поставите основната "призив за действие" бутоните на леснодостъпните зони за палец. Например, ето как се разиграва на iPhone.

5. Направата на темата за отзивчиво не е всичко, което има значение

Нека завършим първата част на това ръководство с най-често срещаната грешка, която хората правят при проектирането на теми за мобилни устройства. Грешката е третирането на отзивчивите дизайни като най-добрата крайна игра.

Разрешено е да направите темата си отзивчива е огромно предимство, особено що се отнася до работа с нестандартни устройства и размери на екрана, но това е далеч от решение за магически куршуми. Само защото дизайнът е отзивчив, не означава, че той ще се представи добре на мобилни устройства. Например, няма да реши проблеми с оптимизацията на изображението или факта, че бутоните трудно могат да бъдат натиснати точно и т.н..

Така че да, направете всичко възможно, за да направите темата си отзивчива, но в същото време се грижете за другите елементи, които преживяваме в това ръководство за максимално удобен за мобилен дизайн дизайн.

Приканвам ви да настроите втората част, за да получите останалата част от списъка (ще влезем в неща като UX дизайн, навигация, използвайки JS за оптимизиране на времето за зареждане, възползвайки се от някои от по-малко известните функции на WordPress, и още). А междувременно, кое е най-голямото ви предизвикателство при проектирането за мобилни устройства?

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