ვერსია 3.0: გადააზრება, თუ როგორ უნდა მუშაობდეს გვერდის ამგები

ავტორი:

–

,

version-3-0-rethinking-how-a-page-builder-should-work10 თვე გავიდა მას შემდეგ, რაც Page Builder Sandwich ფართო საზოგადოებას წარვუდგინეთ. ახლა ჩვენ დაახლოებით 6 000 აქტიური ინსტალაცია გვაქვს და ეს ჩვენთვის საკმაოდ დიდი მიღწევაა. ამის გამო უამრავი გამოხმაურებაც მივიღეთ, როგორც კარგი, ისე ცუდი. თუმცა საერთო აზრი ისეთია, რომ ხალხს მოსწონს, რამდენად მარტივია განლაგებების აწყობა და საკუთარი კონტენტის შექმნა სხვა არსებულ გვერდის შემქმნელებთან შედარებით.

მიღებული გამოხმაურებების დიდი ნაწილი ახალი ფუნქციების მოთხოვნები იყო და ბოლო რამდენიმე თვის განმავლობაში ჩვენ ბევრი მათგანი დავამატეთ. თუმცა, ამის პარალელურად, პროცესში მომხმარებლის ინტერფეისის ნელ-ნელა შეცვლაც დავიწყეთ. და, შედეგად, ჩვენ მომხმარებლის გამოცდილებასაც ვცვლიდით… უარესობისკენ. საქმე იქამდე მივიდა, რომ ინტერფეისის გადააზრება დაგვჭირდა, რადგან ის უბრალოდ აღარ მუშაობდა გამართულად და სხვადასხვა ფუნქციებიც ერთმანეთს ვეღარ ეხამებოდა.

მოძველებული ინტერფეისი

PBS-ის წინა ვერსიებში ჩვენ გვინდოდა, ყველაფერი ღილაკების სახით ყოფილიყო. რატომ? იმიტომ, რომ ღილაკების გამოყენება მარტივია. თქვენ უბრალოდ… აჭერთ მათ. ინსპექტორის ძველ ვერსიებში (გვერდითი პანელი ზემოთ მოცემულ სურათზე), ღილაკზე დაწკაპუნება ზრდიდა მნიშვნელობას, ხოლო Shift+დაწკაპუნება — ამცირებდა მას. ეს საკმაოდ მარტივად ჟღერს. მაგრამ კარუსელების, ჩანართების, რუკების და სხვა ახალი ელემენტებისა თუ ფუნქციების დამატებასთან ერთად, ყველა ეს ღილაკი სხვადასხვა დიზაინის მქონე განსხვავებული ხატულების ნაზავად იქცა და უფრო იეროგლიფებს დაემსგავსა, ვიდრე დახვეწილ ინტერფეისს. გამოცდილი მომხმარებლებისთვის ეს პრობლემას არ წარმოადგენდა, მაგრამ საკმაოდ დამაბნეველი და შემაშინებელია შესახედად მათთვის, ვინც PBS-ში ახალბედაა.

გარდა ამისა, ინსპექტორში რამდენიმე პრობლემამ იჩინა თავი. თავდაპირველი იდეა იყო, ყველაფერი ყოფილიყო მარტივი და ხელმისაწვდომი უშუალოდ ინსპექტორში. და ყველაფერში ვგულისხმობდი ყველაფერს – ტექსტის სათაურად გადაქცევიდან დაწყებული, ფონის ფერების, შრიფტის ფერების შეცვლით დამთავრებული, მოკლედ, ნებისმიერ რამეს. თუმცა მის ამჟამინდელ მდგომარეობაში ინსპექტორი ახლა შეიცავს უამრავ პარამეტრს, რაც გაიძულებთ მუდმივად გამოიყენოთ მაუსის ბორბალი ზემოთ და ქვემოთ ასასვლელად. ეს საკმაოდ განსხვავდება იმ ინსპექტორისგან, რომლის შექმნაც მომხმარებლებისთვის თავიდან მქონდა ჩაფიქრებული.

და ბოლოს, ცოტა ხნის წინ ჩვენ წარმოვადგინეთ მოკლე კოდების (shortcode) ასახვა თქვენი საყვარელი მოდულებისთვის. ამ ფუნქციამ მოითხოვა ტექსტური ველების, რიცხვითი სლაიდერების, მოსანიშნი ველების და დამატებითი ახალი ტიპის პარამეტრების შექმნა, რათა მოკლე კოდების რედაქტირების გამოცდილება უფრო სასიამოვნო ყოფილიყო. თავდაპირველად ეს კარგი იდეა იყო და დიახ, მან გაგიმარტივათ shortcode-ებთან მუშაობა. მაგრამ ამ ფუნქციამ კვლავ გადაუხვია ჩვენს „მხოლოდ ღილაკების“ ინტერფეისს. წარსულის გათვალისწინებით, shortcode-ების ატრიბუტების შესაცვლელად მხოლოდ ღილაკების გამოყენება მართლაც შეუძლებელი იყო. ახლა, უახლეს ვერსიაში, ჩვენ მივიღეთ 2 ტიპის სამართავი ელემენტი: ღილაკები და shortcode-ების ველები.

არსებობს კიდევ რამდენიმე მიზეზი, რამაც მიგვაღებინა გადაწყვეტილება, რომ ჩვენი ინტერფეისი აღარ იყო ეფექტური (ან ჩვენს საჭიროებებს აღარ ერგებოდა), მაგრამ ზემოაღნიშნული პუნქტები მთავარია. თუმცა ერთი რამ ყოველთვის ცხადი იყო: ვიცოდით, რომ ინტერფეისი უნდა განგვეახლებინა.

განვსაზღვროთ, თუ როგორ უნდა მუშაობდეს იდეალურ შემთხვევაში გვერდის შემქმნელი

ნაცვლად იმისა, რომ პირდაპირ საქმეს შევდგომოდით და რაღაცები მაშინვე შეგვეცვალა, ასი ნაბიჯით უკან დავიხიეთ, რათა გვერდის შემქმნელის მთლიანი გამოცდილებისთვის გადაგვეხედა. გვინდოდა, ახალი სიცოცხლე ჩაგვებერა ინტერფეისისთვის. სიმართლე რომ ვთქვათ, არ გვინდოდა მისი ხელახლა გადაკეთება წლიდან წლამდე. ეს დამღლელია და WordPress-ის საზოგადოებას ნამდვილად არ მოუტანს არსებით სარგებელს. ამჯერად გადავწყვიტეთ, საქმე ნელა და ფრთხილად გაგვეკეთებინა. შევისწავლეთ Page Builder Sandwich-ის თითოეული დეტალი და ის, თუ რა ხდის მას კარგ გვერდის შემქმნელად, და საბოლოოდ რედაქტირების მთელი გამოცდილება რამდენიმე ძირითად კონცეფციამდე დავიყვანეთ.

ძირითადი კონცეფცია #1: ტექსტის პირდაპირ კონტენტში აკრეფა რედაქტირებისთვის

გვერდის შემქმნელის დაყენების ერთ-ერთი მთავარი მიზეზი WordPress-ის backend ტექსტური რედაქტორის შეზღუდვებისგან თავის დაღწევაა. საქმე ის არაა, რომ backend რედაქტორი ცუდია, მაგრამ თქვენი ვებგვერდების შექმნისას ის მაშინვე არ გაჩვენებთ, როგორ გამოჩნდება თქვენი ვებგვერდი საიტის ვიზიტორებისთვის, და არც იმის საშუალებას გაძლევთ, რომ კონტენტი ერთსვეტიანი განლაგების მიღმა განათავსოთ. იქ მხოლოდ თქვენი ტექსტისა და ზოგიერთი სურათის ნახვა შეგიძლიათ, მაგრამ ვერაფერს ნახავთ უფრო რთული ელემენტებიდან (მაგ. საკონტაქტო ფორმები). შეგიძლიათ დაამატოთ shortcode-ები, დიახ, მაგრამ ისინი არ გამოჩნდება თავისი დასრულებული ვიზუალური სახით*.

* სხვების მიერ შექმნილია მოდულები ამის მოსაგვარებლად, როგორიცაა Shortcake UI, მაგრამ ეს სხვა საკითხია.

სწორედ აქ ერთვება frontend გვერდის შემქმნელები. მათ რედაქტირების გამოცდილება backend-იდან frontend-ზე გადააქვთ, სადაც თქვენ არედაქტირებთ თქვენს საიტს ზუსტად ისე, როგორც ამას თქვენი ვიზიტორები რეალურად დაინახავენ. როგორც პიპინი იტყოდა: რასაც ხედავთ, იმას იღებთ (WYSIWYG).

frontend რედაქტორის კიდევ ერთი კარგი თვისება ის არის, რომ ის გაძლევთ ტექსტის პირდაპირ რედაქტირების საშუალებას. სათაურებისა და აბზაცების პირდაპირ აკრეფა ვებსაიტის შექმნისას ჩვეულებრივი ტექსტური რედაქტორის გამოყენების სიმარტივეს განიჭებთ. ღილაკებისა და ჩანართების წარწერების შეცვლაც შესაძლებელი უნდა იყოს მათზე უბრალო დაწკაპუნებითა და ტექსტის აკრეფით.

ეს არის სფერო, სადაც სხვა გვერდის შემქმნელების უმეტესობა სათანადო შედეგს ვერ აჩვენებს. მათი უმეტესობა გაიძულებთ, ყველაფრის დასარედაქტირებლად ტექსტურ ველში აკრიფოთ ტექსტი. ვიმეორებთ, ნამდვილ frontend გვერდის შემქმნელებში ეს ასე არ უნდა ხდებოდეს. ტექსტის პირდაპირ აკრეფა და რედაქტირება Page Builder Sandwich-ის ძლიერი მხარე იყო ჯერ კიდევ მე-2 ვერსიიდან, და ჩვენ დავრწმუნდით, რომ ეს შენარჩუნებულია მე-3 ვერსიაშიც.

ძირითადი კონცეფცია #2: მაუსის გამოყენება სწრაფი კორექტირებისთვის

მაუსი ძლიერი იარაღია, რომელსაც გვერდის შემქმნელებში ხშირად ყურადღებას არ აქცევენ. ხშირ შემთხვევაში, გვერდის შემქმნელები მას იყენებენ იმისთვის, რომ მომხმარებლებმა ელემენტები გადაათრიონ და სხვადასხვა ადგილას ჩააგდონ, ან დააწკაპუნონ ღილაკებსა თუ შეყვანის ველებზე. მართალია, ეს კარგია, მაგრამ გვერდის აგების კუთხით მაუსით გაცილებით მეტის გაკეთება შეგიძლიათ.

უპირველეს ყოვლისა, გვერდის რედაქტირებისას მაუსის ინსტრუმენტად გამოყენება შესანიშნავ ვიზუალურ უკუკავშირს იძლევა, განსაკუთრებით ისეთი ვიზუალური თვისებების რეგულირებისას, როგორიცაა გარე ველები, შიდა დაშორებები და ზომები. ახლა თქვენი ელემენტების მორგება ბუნებრივ პროცესად იქცევა.

PBS-ის მე-3 ვერსიაში თქვენ შეძლებთ მრავალი რამის რეგულირებას მაუსის საშუალებით. შეგიძლიათ დაარეგულიროთ გარე ველები/დაშორებები ცალკეულ ელემენტებს შორის, შიდა დაშორებები თქვენს სვეტებში, ასევე სურათების, ხატულების და რუკების ზომები. ჩვენ ასევე ჩავანაცვლეთ რიცხვითი მნიშვნელობების შესაცვლელი ღილაკები სლაიდერებით.

ძირითადი კონცეფცია #3: ტექსტის სტილიზაცია მარტივი უნდა იყოს

მონიტორს ერთი ნაბიჯით თუ მოშორდებით, შეამჩნევთ, რომ რასაც თქვენს ვებგვერდებზე ამატებთ, უმეტესად ტექსტური შინაარსია. დიახ, ჩვენ გვაქვს სურათები და ხატულებიც მათ გასაფორმებლად – და ბოლო დროს ჩვენს საიტებზე უფრო დიდი ზომის სურათების დამატებას ვამჯობინებთ. თუმცა მნიშვნელოვანი კონტენტის უდიდესი ნაწილი მთლიანად ტექსტია: სათაურები, მარკირებული სიები, აბზაცები, ციტატები და ა.შ. ამასთან ერთად მნიშვნელოვანია ისიც, თუ როგორ ვაფორმებთ ჩვენს ტექსტს დიზაინის შესაბამისად. ჩვენ ვუცვლით მათ ზომებსა და ფერებს, ან ვხდით მათ გამუქებულს ან დახრილს. ეს კეთდება იმისთვის, რომ ჩვენი კონტენტი უფრო იკითხვადი, რელევანტური და მიმზიდველი იყოს ჩვენი მკითხველისთვის.

რადგან ტექსტის სტილს ხშირად ვცვლით, ღილაკები, რომლებიც სტილის შეცვლის საშუალებას გვაძლევს, ძალიან ადვილად ხელმისაწვდომი უნდა იყოს. ისინი არ უნდა იყოს დამალული ამომხტარ ფანჯარაში, რომელიც ჯერ უნდა გახსნათ. გვერდის შემქმნელების უმეტესობა ამ სენით იტანჯება. იმისთვის, რომ მათ მომხმარებლის ინტერფეისს ეწოდოს „გადაუტვირთავი“, ყველაზე ხშირად გამოყენებული პარამეტრებიც კი თვალთახედვიდან დაფარულია.

ამ პრობლემის მოსაგვარებლად, ჩვენ გადავხედეთ ყველაზე ხშირად გამოყენებულ ტექსტურ რედაქტორებს. შევამჩნიეთ, რომ მათ ჩვეულებრივ აქვთ ეკრანის ზედა ნაწილში განთავსებული ღილაკებით სავსე მწკრივი ტექსტის დასაფორმატებლად, და იგივე განლაგება გადმოვიტანეთ მე-3 ვერსიაში. ახლა ტექსტის სტილიზაციის ყველა ღილაკის მწკრივი მუდმივად ხელმისაწვდომია თქვენი ეკრანის ზედა ნაწილში. ეს სტილის შეცვლას მართლაც სწრაფს ხდის და ტექსტის რედაქტირებისას სრულიად ბუნებრივ ჩვევად აქცევს.

ძირითადი კონცეფცია #4: სტილის გაფართოებული პარამეტრები უნდა იყოს მოქნილი და ამავდროულად ადვილად გასაგები

გვერდის შემქმნელის მთავარი არსი ის არის, რომ მან ხალხს განსაცვიფრებელი დიზაინის მარტივად შექმნის შესაძლებლობა უნდა მისცეს. ეს ნიშნავს, რომ ჩვენ უნდა შევთავაზოთ უამრავი განსხვავებული პარამეტრი და ოფცია რთული ათვისების პროცესის გარეშე. გარე ველების, შიდა დაშორებების დარეგულირება და ტექსტის სტილიზაცია შესანიშნავია, მაგრამ მხოლოდ ეს საკმარისი არ არის. საქმის ბოლომდე მისაყვანად დაგჭირდებათ გაცილებით რთული პარამეტრები, როგორიცაა ფონის სურათები, პატერნები, ჩარჩოები, ფიქსირებული ფონი და სხვა. ყველა ამ განსხვავებული პარამეტრის ერთად თავმოყრა შეიძლება ცოტა დამთრგუნველი ყოფილიყო, ამიტომ ზოგიერთი მათგანი გავამარტივეთ და კატეგორიებად დავაჯგუფეთ, რათა მე-3 ვერსიაში ყველაფერი უფრო მოსახერხებელი ყოფილიყო.

ძირითადი კონცეფცია #5: მოკლე კოდების (Shortcode) მხარდაჭერა

დაბოლოს, არ დაგვავიწყდეს, რომ ჩვენი გვერდის შემქმნელი WordPress-ის ბაზაზეა აგებული. ჩვენ სრულად უნდა გამოვიყენოთ ეს პლატფორმა და მისი შესაძლებლობები და არ უნდა შევზღუდოთ ან გადავუხვიოთ მათ. ერთი უდიდესი ფუნქცია, რომელსაც WordPress გვთავაზობს, არის მოკლე კოდები (shortcodes). ეს არ ნიშნავს იმას, რომ მთელი კონტენტი shortcode-ებისგან უნდა შედგებოდეს – ეს არეულობას გამოიწვევდა – არამედ ჩვენ უბრალოდ თავსებადი უნდა ვიყოთ მათთან. უამრავი მოდული და თემა იყენებს shortcode-ებს და დიდი დანაკარგი იქნებოდა, ისინი სრულად რომ უგულებელგვეყო. სინამდვილეში, მოკლე კოდები მომხმარებლებს მაქსიმალურ მოქნილობას ანიჭებს გვერდების შექმნისას.

რამდენიმე კვირის წინ ჩვენ წარვადგინეთ მოკლე კოდების ასახვის სისტემა და ამის წყალობით ასობით მოდულიდან ასობით shortcode ავსახეთ. პრიორიტეტი მივანიჭეთ WordPress-ის მოდულების კატალოგში ყველაზე პოპულარულ მოდულებს, ასე რომ, დიდი ალბათობით მათ საკუთარ საიტებზეც შეხვდებით. ეს ფუნქცია კიდევ უფრო გაძლიერდა მე-3 ვერსიაში და ჩვენ გავაგრძელებთ მის გაუმჯობესებას სამომავლოდაც.

დასკვნა

ჩვენ ავიღეთ ყველა ზემოაღნიშნული არსებითი მახასიათებელი და გავაერთიანეთ Page Builder Sandwich-ის მე-3 ვერსიაში. ეს არის საუკეთესო გვერდის შემქმნელი, რაც კი ოდესმე შეგვიქმნია WordPress-ისთვის. ის უფრო ინტუიციური და ბუნებრივია გამოსაყენებლად, მუშაობს უფრო სწრაფად, უფრო მარტივია გამოსაყენებლად და უფრო მოსახერხებელია, ვიდრე ოდესმე.

თუ გაქვთ რაიმე მოსაზრება გვერდის შემქმნელის აუცილებელი ფუნქციების შესახებ, გაგვიზიარეთ ქვემოთ კომენტარებში.