მობილურთან შესაბამისობის პრობლემები და გადაწყვეტები
ვებტრაფიკის დიდი უმრავლესობა მობილური მოწყობილობებიდან მოდის; ამის მიუხედავად, ბევრი საიტი ისევ ჯერ დესკტოპზე ფიქრით იქმნება. შედეგია მობილურზე წაუკითხავი ტექსტები, თითით ვერდაჭერადი ღილაკები და ნელა გახსნადი გვერდები.
რატომ ჩანს ჩემი საიტი მობილურზე ცუდად?
სამი ყველაზე ხშირი მიზეზი: გვერდი ფიქსირებული პიქსელური სიგანითაა შექმნილი და ეკრანს არ ერგება, viewport ტეგი აკლია, ან დესკტოპისთვის მომზადებული დიდი გამოსახულებები მობილურ კავშირზე ნელა იტვირთება. ტექსტის ზომის 16 პიქსელზე ქვემოთ არდაწევა და დაწკაპუნებადი ზონების მინიმუმ 44×44 პიქსელი საჩივრების უმეტესობას თავისთავად აგვარებს.
რას ნიშნავს „მობილურთან შესაბამისი“ და რას არა
არა: საიტის ტელეფონზე გახსნას. ყველა საიტი იხსნება ტელეფონზე; საკითხი ის არის, როგორ იხსნება.
დიახ: კონტენტის მასშტაბირებისა და გვერდზე გადაწევის გარეშე წაკითხვას, ღილაკების თითით კომფორტულად დაჭერას, ფორმების შევსებას და გვერდის გონივრულ დროში ჩატვირთვას.
Google საიტს მობილური ვერსიის მიხედვით აფასებს. ანუ საიტი, რომელიც დესკტოპზე შესანიშნავად ჩანს, მაგრამ მობილურზე პრობლემურია, საძიებო შედეგებში მობილური მდგომარეობის მიხედვით ფასდება.
როგორ შეამოწმოთ თავად
ძვირი ინსტრუმენტები საჭირო არ არის. თანმიმდევრულად ეს გააკეთეთ:
1. საკუთარი ტელეფონიდან დაათვალიერეთ. მთავარი გვერდი, ერთი სერვისის გვერდი, საკონტაქტო ფორმა. რეალური მომხმარებელივით მოიქეცით: ფორმა შეავსეთ, ტელეფონის ნომერზე დააჭირეთ, მენიუ გახსენით.
2. შეამოწმეთ, არის თუ არა ჰორიზონტალური გადახვევა. გვერდი მარჯვნივ-მარცხნივ გაწიეთ. თუ იწევს, რომელიღაც ელემენტი ეკრანიდან გადადის — ყველაზე ხშირი მიზეზი ფართო ცხრილი, გრძელი ბმულის ტექსტი ან ფიქსირებული სიგანის გამოსახულებაა.
3. დააკვირდით ხტუნვას. გვერდის ჩატვირთვისას კონტენტი ადგილიდან იძვრის? როგორც წესი, გამოსახულებებისთვის ზომის მიუთითებლობით არის გამოწვეული და მომხმარებელი არასწორ ადგილას აჭერს.
4. სიჩქარე გაზომეთ. საიტის სიჩქარის ტესტის ინსტრუმენტით მობილური წარმადობა ნახეთ. დესკტოპის შედეგი კარგიც რომ იყოს, მობილური შეიძლება სერიოზულად დაბალი იყოს.
5. სხვადასხვა ეკრანზე გამოსცადეთ. ბრაუზერის დეველოპერულ ინსტრუმენტებში მოწყობილობის ხედი გახსენით და პატარა (360px), საშუალო (768px) და დიდ ეკრანებზე შეამოწმეთ.
ყველაზე ხშირად შემხვედრი პრობლემები
ნელი ჩატვირთვა
მობილურზე მთავარი სხვაობა აქ ჩნდება. მიზეზები თანმიმდევრობით:
არაოპტიმიზებული გამოსახულებები. ყველაზე დიდი წილია. კამერიდან გამოსული, ისე ატვირთული 4 MB-იანი ფოტო მობილურ კავშირზე გვერდს მარტო ბლოკავს. გამოსახულებების გამოსაყენებელ ზომამდე შემცირება და WebP-ში გადაყვანა საიტების უმეტესობაში გვერდის წონას ნახევარზე მეტით ამცირებს — გამოსახულების კონვერტერით მასობრივად შეგიძლიათ.
ზედმეტი დანამატები. ყოველი დანამატი საკუთარ CSS და JavaScript ფაილს ტვირთავს. გამოუყენებლების წაშლა პირდაპირ სიჩქარეს მატებს.
ძალიან ბევრი გარე სერვისი. ლაივ-ჩატი, რუკა, სოციალური ქსელების ჩაშენებული კონტენტი, ანალიტიკის ინსტრუმენტები... თითოეული ცალკე კავშირსა და დამატებით ტვირთს ნიშნავს. მართლა საჭიროები შეინარჩუნეთ.
შრიფტები. ხუთი სხვადასხვა შრიფტის წონის ჩატვირთვა ზედმეტია; ორი წონა დიზაინების უმეტესობისთვის საკმარისია.
შეხების სამიზნეები
ბმული, რომელიც დესკტოპზე კურსორით კომფორტულად იწკაპუნება, თითით დასაჭერად ძალიან პატარა შეიძლება იყოს. პრაქტიკული წესი: შეხებადი ელემენტები მინიმუმ 44×44 პიქსელი უნდა იყოს და მათ შორის სივრცე უნდა იყოს.
ყველაზე პრობლემური ადგილები: ქვედა მენიუს პატარა ბმულები, სოციალური ქსელების ხატულები, ცხრილის შიგნით ბმულები და გვერდიგვერდ დალაგებული პატარა ღილაკები.
წაუკითხავი ტექსტი
მობილურზე ძირითადი ტექსტი 16 პიქსელს ქვემოთ არ უნდა ჩამოვიდეს. უფრო პატარა ტექსტი მომხმარებელს მასშტაბირებას აიძულებს. ასევე, სტრიქონის სიგრძე ძალიან ფართო არ უნდა იყოს და სტრიქონებს შორის მანძილი თავისუფალი უნდა იყოს.
ფორმები
მობილურზე ფორმის შევსება ისედაც შრომატევადია; გაამარტივეთ:
- ველების რაოდენობა მინიმუმამდე დაიყვანეთ. ყოველი დამატებითი ველი დასრულების მაჩვენებელს ამცირებს.
- სწორი კლავიატურის ტიპი განსაზღვრეთ: ტელეფონის ველში რიცხვითი კლავიატურა, ელფოსტის ველში ელფოსტის კლავიატურა გაიხსნას.
- ავტომატური შევსება მხარი დაუჭირეთ.
- შეცდომის შეტყობინებები ველის გვერდითვე აჩვენეთ.
- გაგზავნის ღილაკი ეკრანზე არ იკარგებოდეს.
ფიქსირებული ელემენტები
ეკრანის ზემოთ ან ქვემოთ ფიქსირებული მენიუ, ქუქიების შეტყობინება და ჩატის ბუშტი ერთად პატარა ეკრანზე წასაკითხ ადგილს თითქმის არ ტოვებს. მობილურზე ეს ელემენტები გაამარტივეთ.
ამომხტარი ფანჯრები
გვერდზე შესვლისთანავე გამოსული სრულეკრანიანი ფანჯრები მობილურზე შემაწუხებელიცაა და დახურვის ღილაკიც ხშირად ეკრანს გარეთ რჩება. მომხმარებელი გვერდს ტოვებს.
პრიორიტეტების რიგი
თუ დრო შეზღუდული გაქვთ, ამ თანმიმდევრობით იმოძრავეთ:
| რიგი | საქმე | რატომ ჯერ |
|---|---|---|
| 1 | გამოსახულებები დააოპტიმიზეთ | ყველაზე დიდი სიჩქარის მოგება, ყველაზე ნაკლები შრომა |
| 2 | ჰორიზონტალური გადმოსვლა გაასწორეთ | გამოყენებას პირდაპირ აფუჭებს |
| 3 | შეხების სამიზნეები გაზარდეთ | კონვერსიაზე პირდაპირ მოქმედებს |
| 4 | ზედმეტი დანამატები/სერვისები წაშალეთ | მდგრადი სიჩქარის მოგება |
| 5 | ფორმები გაამარტივეთ | მოთხოვნების რაოდენობას ზრდის |
| 6 | ფიქსირებული ელემენტები შეამცირეთ | წაკითხვადობა |
განსხვავება მობილურთან შესაბამისობასა და „ცალკე მობილურ საიტს“ შორის
ადრე m.tqvenifirma.com-ის მსგავსი ცალკე მობილური საიტები კეთდებოდა. ეს მიდგომა აღარ არის რეკომენდებული: ორი ცალკე საიტი მოვლას აორმაგებს, კონტენტი განსხვავდება და საძიებო სისტემისთვის აღრევას ქმნის.
დღევანდელი სწორი მეთოდია ადაპტიური დიზაინი: ერთი საიტი, რომელიც ეკრანის ზომის მიხედვით თავად ეწყობა. იგივე მისამართი, იგივე კონტენტი, იგივე მართვა.
ხშირად დასმული კითხვები
ჩემი საიტი მობილურზე მუშაობს, მაინც უნდა განვაახლო? თუ მუშაობს და სწრაფია — არა. პრობლემა „მუშაობს“-სა და „გამოსადეგია“-ს შორის სხვაობაშია. საკუთარი ტელეფონიდან შეთავაზების ფორმის შევსება სცადეთ; პასუხს იქ მიიღებთ.
მობილურთან შესაბამისობა დამატებით ფასიანია? არ უნდა იყოს. ადაპტიური დიზაინი უკვე სტანდარტული მოთხოვნაა, არა დამატებითი სერვისი.
აპლიკაცია რომ გავაკეთებინო, უკეთესი იქნება? სხვადასხვა საქმეა. აპლიკაცია მაშინ არის აზრიანი, თუ რეგულარულად გამოსაყენებელ სერვისს სთავაზობთ. წარდგენისა და შეთავაზებების შეგროვების მიზნით კარგი მობილური საიტი საკმარისია და ბევრად ეკონომიური.
AMP უნდა გამოვიყენო? აღარ არის საჭირო. საიტის პირდაპირ დაჩქარება უფრო მდგრადი გადაწყვეტაა.
გაზომვის ყველაზე სწრაფი გზა ასეთია: ტელეფონი ამოიღეთ და საკუთარ საიტზე შეთავაზების ფორმის შევსება სცადეთ. ყოველი წერტილი, სადაც გაგიჭირდათ, ის წერტილია, სადაც თქვენი კლიენტი თავს ანებებს.
ოთხი განყოფილება, რომელიც მობილურზე ყველაზე ხშირად ფუჭდება
- ცხრილები. დესკტოპზე წესიერად მდგომი ფართო ცხრილი ტელეფონზე ან გადადის, ან წაუკითხავად პატარავდება. გადაწყვეტაა ცხრილის თავის შიგნით ჰორიზონტალურად გადახვევადად გაკეთება; მთელი გვერდის გვერდზე გადაწევა არასდროს უნდა იყოს დაშვებული.
- ფორმები. ველების სივიწროვე და კლავიატურის გახსნისას გაგზავნის ღილაკის ეკრანს გარეთ დარჩენა ფორმის მიტოვების ყველაზე გავრცელებული მიზეზია.
- მენიუ. ჩამოსაშლელი მენიუს მთელი ეკრანის დაფარვა პრობლემა არ არის; პრობლემაა დახურვის ღილაკის ცერით მიუწვდომელ ადგილას ყოფნა.
- ფიქსირებული ზედა ზოლები. თუ ზემოთ განცხადებაა, ქვემოთ ქუქიების შეტყობინება და კიდევ ჩატის ბუშტი, ტელეფონზე კონტენტისთვის დარჩენილი ადგილი ნახევრდება.
პრაქტიკული გზა ტესტირებისთვის
ემულატორი სასარგებლოა, მაგრამ რეალურ მოწყობილობას ვერ ჩაანაცვლებს. ყველაზე სწრაფი რეალური ტესტი ასეთია: საკუთარი ტელეფონი აიღეთ, მობილური ინტერნეტი ჩართეთ (არა wifi), საიტზე შედით და შეთავაზების ფორმა შეავსეთ და გააგზავნეთ.
ეს ერთი ცდა სიჩქარეს, წაკითხვადობას, შეხების ზონებსა და ფორმის ნაკადს ერთდროულად ამოწმებს. ყოველი ნაბიჯი, სადაც გაგიჭირდათ, ის ნაბიჯია, სადაც თქვენი კლიენტი თავს ანებებს.
მობილურზე ჩატვირთვის დრო საიტის სიჩქარის ტესტით გაზომეთ.