Īsumā.
Šīs raksts ir par mājaslapas izstrādi uz WordPress platformas ar individuāli izstrādāto dizainu. Mūsu pasūtītāji ir mārketinga, reklāmas, dizaina un SEO aģentūras, kuras piedāvā saviem klientiem mārketinga pakalpojumus, reklāmas pakalpojumus un SEO optimizāciju. To speciālisti izveido individuālo tīmekļa vietnes dizainu, savukārt mēs atbildam par tās programmēsanas daļu.
Tīmekļa vietņu izveidē ir svarīgi ievērot precīzu atbilstību dizainera maketam. Šai nolūkā mēs pielietojam Pixel Perfect pieeju.
Klienta stāsts.
Aģentūras, kuras piedāvā pakalpojumu kompleksu kompānijas virzīšanai Internetā, nereti ar tīmekļa vietnes izveides uzdevumu vēršas pie trešajiem izstrādātājiem. Savu klientu vajadzībām tās rada dizaina maketus, kuriem turpmāk būs nepieciešams izstrādāt programmēšanas daļu izvietošanai WordPress platformā.
Mums darbam iesniedz attēlu datnes, sagatavotās programmās Figma / Photoshop / Adobe Illustrator / Adobe XD un citās. Rezultātā mēs izveidojam šablonu pēc WordPress standartiem (WordPress coding standards), kā arī gatavo WordPress tīmekļa vietni ar šo šablonu. Minētais šablons ir tīmekļa vietnes “demoversija”, demonstrācijas nolūkos tiek uzlikts uz WordPress un ir pieejams gala lietošanai.
Mūsu risinājums.
Platformai WordPress ir pieejami vairākie maksas un bezmaksas šabloni, bet pārsvarā tie nav piemērojami, kad ir nepieciešams radīt oriģinālo un personalizēto tīmekļa vietni ar individuālo dizainu.
Svarīgu lomu šeit spēlē Pixel Perfect koncepcija. Saskaņā ar minēto pieeju visiem elementiem gatavajā tīmekļa vietnē, ieskaitot atkāpes, šriftu, ir jāatbilst maketam ar precizitāti līdz pat dažiem pikseļiem.
Tādējādi, mēs piedāvājam pasūtītājiem:
- Salikt tīmekļa vietnes vizuālo daļu, pielietojot Pixel Perfect pieeju
- Izstrādāt programmēšanas daļu atbilstoši WordPress standartiem (WordPress coding standards) un šādā veidā iegūt instalējamo šablonu, kas ir saderīgs ar WordPress
Atzīmēsim, ka izveidot tīmekļa vietni ar precīzu pikselis pikselī sakritību nav iespējams tehniski, jo pat šrifti un attālumi starp teksta rindām dažādos pārlūkos var atspoguļoties atšķirīgi. Mēdz būt, kā arī dizaineris var kļūdīties atkāpju pielietošanā vai izlīdzināšanā. Tādēļ mēs vienmēr cenšamies saglabāt balansu starp salikuma aplaušanas precizitāti un koda apjomu.
Rezultāts.
Minēsim dažus piemērus, kā tika veidots tīmekļa vietnes izstrāde un tika pārbaudīta html-šablona un maketa atbilstība un sakritība.
Vispirms esam izstrādājuši lappušu pamata struktūru. Pārdomājām un izveidojam galveno lappusi, tīmekļa vietnes lappuses (Pages), publikācijas (Posts). Tad esam uzstādījuši nepieciešamos šriftus, attēlus, sagatavojuši visus tekstus un izveidojam salikumu.
Un atbilstoši Pixel Perfect pieejai mēs rīkojamies pēc šāda principa:
- Oriģinālā maketa daļa tiek saglabāta .png formātā
- Izveidotā tīmekļa vietne tika atvērta pārlūkā
- Ar speciālā spraudņa palīdzību maketa kopija tika uzlikta uz lappuses
- Elementu izvietojums tika koriģēts precīzai sakritībai
Virsrakstu un atkāpju pārbaude:
Teksta lappušu pārbaude:
Ievades lauku pārbaude:
Svarīgi! Elementu, bloku, šriftu un atkāpju sakritība tiek pārbaudīta attiecībā pret tiem izmēriem, kuros dizaineris ir radījis maketu. Ja tā platums ir 1920 pikseļi, ekrāns tiek iestatīts uz tādu pašu izmēru.
Bieži vien dizaineri nodrošina mums maketu, kas ir piemērots PK monitoriem (ap 1280 pikseļiem) un mobilajai versijai. Mums darbam ar to pilnībā pietiek, un versijas, kas ir piemērotas ekrāniem ar citu izšķiršanas spēju, mēs adaptējam jau izstrādes laikā.
Tīmekļa vietnes izveides uz WordPress bāzes bieži arī iekļauj papildu funkcionāla izveidi: tiešsaistes kalkulatori, speciālās animācijas, papildu lauku komplekti formai utt. Šo visu mēs izveidojam lietošanas gatavībā.
Esam sagatavojuši šāda funkcionāla variantus uz divu tīmekļa vietņu piemēra, kas tika izveidotas pēc individuālā dizaina.
Somijas mājaslapa
Galvenā lappuse
Darba gaitā pasūtītāja dizaineris veica izmaiņas maketā, tādēļ gatavais rezultāts atšķiras no prototipa.
Prototips:
Rezultāts:
Projekti
Šajā un citās sadaļās mēs esam ievērojuši Pixel Perfect koncepciju un precīzi atkārtojuši dizaina maketus.
Prototips:
Rezultāts:
Kontakti
Prototips:
Rezultāts:
Tehnoloģijas
Šajā lappusē visi bloki, šrifti un atkāpes atbilst dizainera izveidotajam prototipam, atšķiras tikai aizpildījums – attēli un teksts.
Prototips:
Rezultāts:
Risinājumi un platforma
Prototips:
Rezultāts:
Bankas tīmekļa vietne
Galvenā lappuse
Prototips:
Rezultāts:
Kalkulators
Prototips:
Rezultāts:
Blogs (saraksts)
Prototips:
Rezultāts:
Bloga raksta lappuse
Prototips:
Rezultāts:
Kopsavilkums.
Minētajos projektos bija svarīga pilnīga atbilstība maketam realizētajās tīmekļa vietnēs. Tas ļāva ne tikai sasniegt sagaidāmo rezultātu, bet arī vienkāršot sadarbību dizainera un izstrādātāju starpā.
Pixel Perfect pieeja tiek pielietota, lai izstrādātais risinājums pilnībā atbilstu dizainera radītājiem maketiem.
Līdztekus tika realizēta programmēšanas daļa, pielāgotā tam funkcionālam, kuru pieprasīja pasūtītāji. Tīmekļa vietnes korekti darbojas WordPress platformā un var tikt modificētas nepieciešamības gadījumā.
Katrs no projektiem prasīja ap 2 nedēļām laika, abus pieņēma gan dizaineri, gan galvenie pasūtītāji.
