როგორ გავხადოთ ვებსაიტი მობილურისთვის ადაპტირებული

ვებსაიტის მობილურისთვის ადაპტირებისთვის დაამატეთ viewport meta თეგი, ააგეთ განლაგება მობილურზე ორიენტირებულად მოქნილი სიგანეებით და გამოიყენეთ CSS ბრეიკპოინტები, რომ უფრო დიდ ეკრანებზე გადააწყოთ — სვეტები ერთმანეთის ქვემოთ დააწყოთ, მენიუ აკეცოთ და სურათები ჩაეტიოს. შემდეგ შეამოწმეთ ყოველი გვერდი ტელეფონის სიგანეზე: გვერდით გადაადგილება, პატარა ტექსტი და ძალიან მცირე ღილაკები. AI-ით აშენებულ საიტზე ერთი მკაფიო მოთხოვნა და გადამოწმება ტელეფონის ზომის გადახედვაში ხშირად ყველაფერს ასწორებს.

რა არის ადაპტური დიზაინი სინამდვილეში

ადაპტური საიტი იყენებს გვერდების და URL-ების ერთ ნაკრებს, რომლებიც ეკრანს არგებენ. „m.“ საიტის ნაცვლად, CSS ცვლის განლაგებას გარკვეულ სიგანეებზე, რომლებსაც ბრეიკპოინტები ჰქვია. საფუძვლები:

• viewport meta თეგი ეუბნება მობილურ ბრაუზერებს, გამოიყენონ მოწყობილობის ნამდვილი სიგანე.
• მოქნილი განლაგებები იყენებს პროცენტებს, flexbox-ს და grid-ს და არა ფიქსირებულ პიქსელურ სიგანეებს.
• Media queries (ან ფრეიმვორკის კლასები, როგორიცაა Tailwind-ის md:) ცვლის განლაგებას გარკვეულ სიგანეზე მეტის შემთხვევაში.
• მოქნილი მედია — სურათები და ვიდეო, რომლებიც თავის კონტეინერში ეტევა.

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

ვარიანტები და კომპრომისები

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

ნაწილები, რომლებიც ჩვეულებრივ იშლება

viewport თეგი

თუ გვერდი ტელეფონზე პატარა დესკტოპის საიტს ჰგავს, viewport თეგი აკლია:

<meta name="viewport" content="width=device-width, initial-scale=1">

ნუ დაამატებთ maximum-scale=1-ს ან user-scalable=no-ს. ორივე კრძალავს ორი თითით გადიდებას, რაც ძნელს ხდის საიტს დაბალი მხედველობის მქონე ადამიანებისთვის.

ფიქსირებული სიგანეები და ჰორიზონტალური გადაადგილება

ყველაზე გავრცელებული ადაპტურობის შეცდომაა ეკრანზე ფართო რამ: ფიქსირებული width: 1200px კონტეინერი, ფართო ცხრილი, გრძელი URL ან კოდის ბლოკი, სურათი max-width: 100%-ის გარეშე. მაშინ მთელი გვერდი ჰორიზონტალურად გადაადგილდება. გამოიყენეთ max-width width-ის ნაცვლად, დაუშვით ტექსტის გადატანა და ფართო ელემენტებს მისცეთ საკუთარი გადაადგილების არე.

ნავიგაცია

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

ტექსტი და შეხების ზონები

• ტელეფონზე ტექსტის მინიმუმად გონივრულია დაახლოებით 16 px. პატარა ტექსტის შეყვანის ველები iPhone-ზე შეხებისას ამცირებს და ზუმს იწვევს.
• გაუადვილეთ ღილაკებისა და ბმულების შეხება. WCAG 2.2 AA მინიმუმად 24 × 24 CSS პიქსელს (ან საკმარის დაშორებას) ადგენს; დაახლოებით 44 პიქსელი უფრო კომფორტულია ცერა თითისთვის.
• დატოვეთ სივრცე მიმდებარე ბმულებს შორის, რომ ადამიანებმა არასწორ ბმულზე არ დააჭირონ.

ცხრილები და მონაცემები

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

სურათები და მედია

გამოიყენეთ max-width: 100% და height: auto, პატარა ეკრანებზე მოამზადეთ პატარა ფაილები srcset-ით და დააყენეთ სიგანე და სიმაღლე, რომ განლაგება არ ახტეს. ჩაშენებულ ვიდეოებსა და რუკებს სჭირდება ადაპტური ჩამრგვალებელი, რომ შეინარჩუნონ პროპორცია. პატარა სურათები გვერდს აჩქარებს — იხილეთ როგორ გავხადოთ თქვენი ვებსაიტი უფრო სწრაფი.

ფორმები

ლეიბლები დააწყვეთ ველებზე მაღლა, ველები გახადეთ მთელი სიგანის და გამოიყენეთ სწორი შეყვანის ტიპები (type="email", type="tel", inputmode="numeric"), რომ ტელეფონმა შესაბამისი კლავიატურა აჩვენოს. გაგზავნის ღილაკი დადეთ იქ, სადაც ცერა თითი მიაღწევს, და იყოს ხილვადი კლავიატურის გახსნისას.

მხოლოდ ჰოვერით მოქმედებები

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

მოთხოვნები, რომლებიც მუშაობს

ახალი ააშენეთ, თავიდანვე თქვით:

ააშენე მობილურზე ორიენტირებულად. ერთი სვეტი ტელეფონებზე, ორი სვეტი ტაბლეტის სიგანიდან, სრული განლაგება დესკტოპზე. ჰორიზონტალური გადაადგილება არ უნდა იყოს 320 px სიგანეზე, ძირითადი ტექსტი მინიმუმ 16 px, შეხების ზონები მინიმუმ 44 px, პატარა ეკრანებზე მენიუს ღილაკი და ცხრილები, რომლებიც ტელეფონზე ბარათებად იქცევა.

არსებული გვერდისთვის აღწერეთ, რასაც ხედავთ:

ტელეფონზე /pricing გვერდი ჰორიზონტალურად გადაადგილდება და სამი გეგმის ბარათი ერთმანეთის გვერდით არის დაჭყლეტილი. 768 px-ზე ქვემოთ დააწყვე ბარათები ვერტიკალურად, შედარების ცხრილი გახადე ჰორიზონტალურად გადაადგილებადი საკუთარ კონტეინერში პირველი სვეტის დამაგრებით, და დესკტოპის განლაგება უცვლელი დატოვე.

შეამოწმე ყოველი გვერდი 375 px სიგანეზე. ჩამოწერე ყველაფერი, რაც გადის გარეთ, ეფარება ერთმანეთს, 16 px-ზე პატარა ტექსტია, 44 px-ზე პატარა შეხების ზონაა, ან მხოლოდ ჰოვერით მუშაობს, შემდეგ გაასწორე თითოეული.

ნაბიჯ-ნაბიჯ

1. გადაამოწმეთ viewport თეგი გვერდის თავში.
2. შეამოწმეთ 320–375 px სიგანეზე ბრაუზერის მოწყობილობის რეჟიმში ან ტელეფონის ზომის გადახედვაში. გადაახვიეთ ყოველი გვერდი ზევიდან ქვემოთ.
3. ჯერ გაასწორეთ ჰორიზონტალური გადაადგილება. იპოვეთ ზედმეტად ფართო ელემენტი; სხვა ყველაფრის შეფასება ვერ მოხერხდება, სანამ ის არ გაქრება.
4. მოაგვარეთ ნავიგაცია: მენიუს ღილაკი, მთავარი მოქმედებები ხილვადი.
5. შეამოწმეთ ტექსტი, შეხების ზონები და ფორმები თითოეულ ძირითად პროცესში — რეგისტრაცია, ძიება, გადახდა, კონტაქტი.
6. დაამუშავეთ ცხრილები და მედია: ბარათები ან გადაადგილების კონტეინერები, ადაპტური სურათები და ჩანართები.
7. შეამოწმეთ შუალედური ზომები. ნელა გადაათრიეთ სიგანე ტელეფონიდან დესკტოპამდე; განლაგება ხშირად ტაბლეტის სიგანესთან ახლოს იშლება.
8. გამოსცადეთ ნამდვილ ტელეფონზე. ემულატორები ვერ ხედავს ისეთ რამეებს, როგორიცაა ეკრანის კლავიატურა, რომელიც ღილაკს ფარავს, შუბლის ამონაკვეთები და საიტის სისწრაფე მობილური ინტერნეტით.

გავრცელებული შეცდომები

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

მობილურის ჩამონათვალი

• viewport meta თეგი არსებობს; მასშტაბირება არ არის გამორთული
• ჰორიზონტალური გადაადგილება არ არის 320 px-ზე არცერთ გვერდზე
• ძირითადი ტექსტი დაახლოებით 16 px; შეყვანის ველები არ იწვევს ზუმს
• შეხების ზონები კომფორტულად დიდი და დაშორებულია
• მენიუ მუშაობს ტელეფონზე და კლავიატურით
• ცხრილები კითხვადია ტელეფონზე (ბარათები, ნაკლები სვეტი ან გადაადგილების კონტეინერი)
• სურათები და ჩაშენებული ელემენტები მასშტაბირდება; მოწოდებულია სწორი ზომის ფაილები
• ფორმები იყენებს სწორ შეყვანის ტიპებს; გაგზავნის ღილაკი მისაწვდომია
• არაფერი მნიშვნელოვანი არ არის დამოკიდებული ჰოვერზე
• გამოცდილია მინიმუმ ერთ ნამდვილ ტელეფონზე

ადაპტური განლაგება ასევე ხელმისაწვდომობის ნაწილია: WCAG მოითხოვს, რომ შინაარსი მუშაობდეს 320 px სიგანეზე და 200%-იან მასშტაბზე. თუ აპს აშენებთ, რომელსაც ადამიანები ყოველდღე ტელეფონზე გამოიყენებენ, როგორ ავაშენოთ მობილურისთვის მოსახერხებელი ვებაპლიკაცია უფრო შორს მიდის, მათ შორის დასაყენებელ PWA-ებზე.

ადაპტური დიზაინი Mythex-ზე

Mythex აშენებს ადაპტურ ვებაპლიკაციებს, ხოლო Pro-ზე მათი Android და iPhone აპებად შეფუთვაც შეიძლება. სამუშაო სივრცეში დააწკაპუნეთ ტელეფონის ხატულაზე გადახედვის ზემოთ (Switch to Mobile), რომ ნახოთ აპი ტელეფონის ზომის ჩარჩოში, და გადაათრიეთ ჩარჩოს კიდე სხვა სიგანეების საცდელად (Preview and Code). დოკუმენტაციას აქვს მოკლე საწყისი მოთხოვნა პატარა ეკრანის განლაგების გასასწორებლად — მობილურისთვის ადაპტური მოთხოვნები. შეამოწმეთ ნამდვილ ტელეფონზეც: გახსენით გამოქვეყნებული URL, ან გააზიარეთ გადახედვის ბმული და გახსენით თქვენს ტელეფონზე.

კითხვები