თქვენი ვებსაიტის შექმნისას მნიშვნელოვანია დარწმუნდეთ, რომ ის მშვენივრად გამოიყურება ნებისმიერ მოწყობილობაზე, ეკრანის ზომისა და ფორმის მიუხედავად. საპასუხო ვებგვერდები შექმნილია ისე, რომ კარგად გამოიყურებოდეს ყველა სახის თანამედროვე მოწყობილობაზე, როგორიცაა კომპიუტერები, ტელეფონები, ტაბლეტები, ტელევიზორები, ტარებადი მოწყობილობები და მანქანის ეკრანებიც კი. იმისათვის, რომ ვებგვერდი იყოს პასუხისმგებელი, თქვენ უნდა შეცვალოთ თქვენი CSS და HTML კოდი, რათა ავტომატურად შეცვალოთ მისი ელემენტები კონკრეტული პირობებიდან გამომდინარე. ეს wikiHow გასწავლით თუ როგორ უნდა დაგეგმოთ და განახორციელოთ ძირითადი საპასუხო ვებ დიზაინი.
ნაბიჯები
3 მეთოდი 1: დაგეგმვის საპასუხო დიზაინი
ნაბიჯი 1. გაარკვიეთ როგორ იყენებს თქვენი აუდიტორია თქვენს ვებსაიტს
ამ დღეებში, ადამიანების უმეტესობა ინტერნეტში ათვალიერებს ამას მობილური ტელეფონებიდან და ტაბლეტებიდან. იმისათვის, რომ საიტი იყოს საპასუხო, თქვენ უნდა დარწმუნდეთ, რომ ის სწორად არის ნაჩვენები, არ აქვს მნიშვნელობა სად არის მისი ნახვა. თუ დრო და ფული არის არსებითი, ყურადღება გაამახვილეთ იმ მოწყობილობების ტიპებზე, რომლებიც ყველაზე პოპულარულია თქვენს მომხმარებლებში (თუ ეს ინფორმაცია ხელმისაწვდომია) და როგორ იყენებენ ისინი თქვენს საიტს. თქვენი ანალიტიკური პროგრამული უზრუნველყოფის ან კვლევის სხვა ფორმის გამოყენებით, გაარკვიეთ:
- რა სახის მოწყობილობებს იყენებენ ისინი ყველაზე ხშირად ვებგვერდის სანახავად, განსაკუთრებული ყურადღება ექცევა მობილური ტელეფონის/ტაბლეტის/კომპიუტერის ბრენდებს და ეკრანის/რეზოლუციის ზომებს.
- რომელი ბრაუზერებია ყველაზე პოპულარული თქვენს მომხმარებლებს შორის. რაც შეეხება გლობალურ სტატისტიკას, Google Chrome არის მსოფლიოში ყველაზე პოპულარული ბრაუზერი, მაგრამ Safari მეორე ადგილზეა.
- როგორ იყენებენ თქვენი ვიზიტორები თქვენს ვებსაიტს, მაგალითად, რამდენ დროს ხარჯავენ მის ნახვაზე, სად ათვალიერებენ მას და რომელი შინაარსია ყველაზე პოპულარული. ეს დაგეხმარებათ განსაზღვროთ რომელი ტიპის შინაარსია მნიშვნელოვანი და რომელი გამოტოვებული.
ნაბიჯი 2. შეიმუშავეთ სხვადასხვა განლაგება სხვადასხვა მოწყობილობებისთვის
თქვენ შეგიძლიათ გამოიყენოთ CSS და JavaScript კომბინაცია მომხმარებლის მოწყობილობის, აგრეთვე მისი შესაძლებლობების გამოსაძიებლად (მხარს უჭერს თუ არა Java, Flash და ა.შ.) და შესაბამისად აჩვენეთ თქვენი საიტის კონკრეტული ვერსია. CSS მედია მოთხოვნები განსაკუთრებით სასარგებლოა მოწყობილობის ზომის/გარჩევადობის დასადგენად.
ნაბიჯი 3. გაითვალისწინეთ სხვადასხვა სახის ურთიერთქმედება
თქვენი ვიზიტორი შეიძლება დაუკავშირდეს თქვენს ვებგვერდს თაგვის, კლავიატურის, სენსორული ეკრანის ან თუნდაც ეკრანის წამკითხველი მხედველობის დარღვევის მქონე ადამიანებისთვის. ამის გათვალისწინებით, თქვენი ვებ – გვერდი უნდა პასუხობდეს მაუსის დაწკაპუნებებს, კლავიატურის ღილაკებს (Tab, Enter, Return და ა.შ.) და ეკრანის თითის შეხებას.
Hover-over ეფექტები არ მუშაობს არაფერზე, თაგვის გარდა. ამ ეფექტების გამოყენების ნაცვლად, თქვენ შეგიძლიათ გამოიყენოთ სტუმარი, დააწკაპუნოს ღილაკზე ან ხატზე, რათა აჩვენოს ის, რაც ადრე იყო ნაჩვენები მაუსის გადასაადგილებლად
ნაბიჯი 4. განიხილეთ შინაარსის მართვის სისტემის (CMS) გამოყენება
თქვენი საიტის დიზაინის რეაგირების უზრუნველყოფის მარტივი გზაა გამოიყენოთ CMS წინასწარ შემუშავებული საპასუხო თემა. CMS– ის მსგავსად Joomla, Drupal ან Wordpress საშუალებას გაძლევთ დარწმუნდეთ, რომ თქვენი ვებ გვერდი მშვენივრად გამოიყურება ყველა მოწყობილობაზე, საპასუხო ელემენტების კოდის გარეშე. შეამოწმეთ თქვენი ვებ ჰოსტინგის პროვაიდერი, რომ ნახოთ რომელი CMS ინსტრუმენტებია ხელმისაწვდომი თქვენს სერვისთან ერთად.
ნაბიჯი 5. გამოიყენეთ ონლაინ ინსტრუმენტები თქვენი ვებსაიტის შესამოწმებლად
ახლა, როდესაც საპასუხო ვებ დიზაინმა პოპულარობა მოიპოვა, არსებობს უამრავი უფასო ინსტრუმენტი, რომლის საშუალებითაც შეგიძლიათ შეამოწმოთ თქვენი ვებ - გვერდი. თუ თქვენ უკვე გაქვთ კოდირებული თქვენი ვებ გვერდი, გამოიყენეთ ეს ინსტრუმენტები იმის შესამოწმებლად, თუ როგორ გამოიყურება იგი სხვადასხვა პირობებში, ასე რომ თქვენ იცით სად გჭირდებათ რეაგირების გასაუმჯობესებლად:
- მობილურით მეგობრული ტესტი Google- ის მიერ: გეცოდინებათ, მუშაობს თუ არა თქვენი საიტი ისევე კარგად მობილურ მოწყობილობებზე, როგორც კომპიუტერის ეკრანებზე.
- resizeMyBrowser: გაძლევთ საშუალებას ნახოთ თქვენი საიტი სხვადასხვა რეზოლუციებში.
- Responsiator: აჩვენებს თქვენს საიტს სხვადასხვა მოწყობილობის ეკრანზე სხვადასხვა განლაგებით (გვერდულად ან მარჯვნივ-ზემოთ).
3 მეთოდი 2: გვერდის განლაგება საპასუხოდ
ნაბიჯი 1. განვიხილოთ უფასო საპასუხო სტილის ჩარჩო
ჩარჩო არის HTML, CSS და/ან JavaScript წინასწარ დაწერილი ნაკრები, რომელიც შეგიძლიათ გამოიყენოთ როგორც ჩონჩხი თქვენი საიტისთვის. ჩარჩოები ყველა შემოწმებულია და ოპტიმიზირებულია ყველა ბრაუზერთან მუშაობისთვის, ასე რომ თქვენ მხოლოდ უნდა შეიყვანოთ თქვენი შინაარსი, დაამატოთ თქვენი მედია და ფერის პარამეტრები და გამოაქვეყნოთ თქვენი საიტი. ზოგიერთი პოპულარული ჩარჩოა:
- Bootstrap
- ჩონჩხი
- ფონდი
ნაბიჯი 2. დააყენეთ ხედი მეტა ტეგით
თუ თქვენ არ იყენებთ ჩარჩოს, გსურთ დაიწყოთ საპასუხო ვებგვერდის კოდირების ყველაზე მნიშვნელოვანი ასპექტით: Viewport. ხედი არის ვებგვერდის ის ნაწილი, რომელიც ჩანს მომხმარებლისთვის. გასაღები იმისთვის, რომ თქვენი საიტი სწორად გამოჩნდეს ეკრანის ზომის მიუხედავად არის META ტეგში ხედვის პორტის ზომის გაფართოება. ამისათვის შეიყვანეთ ეს ტეგი თითოეული გვერდის თავში, საიტზე:
ნაბიჯი 3. მიუთითეთ ტექსტის ზომა ხედის ხედთან მიმართებაში
მას შემდეგ, რაც თქვენი ხედის ფანჯარა დაყენდება, თქვენს გვერდზე ტექსტი მასშტაბდება ეკრანის შესატყვისად. თუმცა, შრიფტები შეიძლება იყოს ძალიან დიდი ან ძალიან მცირე ზომის, თუ მათი ზომები არ არის მითითებული ხედის პორტთან მიმართებაში. ამის გაკეთება შეგიძლიათ შრიფტის ზომის განსაზღვრით, როგორც ხედვის ხაზის კონკრეტული პროცენტი vw ერთეულით. ეს მაგალითი ეუბნება H1 სათაურებს, რომ აჩვენონ ხედის სიგანის 10%, მიუხედავად მისი ზომისა:
ვიკი როგორ
ნაბიჯი 4. გამოიყენეთ მედია შეკითხვები ეკრანის სხვადასხვა ზომის სხვადასხვა სტილის საჩვენებლად
მედია მოთხოვნები საშუალებას გაძლევთ აირჩიოთ თუ არა ჩვენება CSS გარკვეული ელემენტები ეკრანის ზომიდან გამომდინარე. თქვენ შეგიძლიათ მიუთითოთ თქვენი მედია მოთხოვნის სპეციფიკა CSS ფაილში. ამ მაგალითში, სხეულის ფონის ფერი გახდება წითელი, თუ მომხმარებლის ეკრანის ზომა 480 პიქსელი ან უფრო დიდია:
ვიკი როგორ
@მედიის ეკრანი და (min-width: 480px) {body {background-color: aqua; }}
მეთოდი 3 -დან 3: სურათების საპასუხოდ შექმნა
ნაბიჯი 1. გამოიყენეთ CSS სიგანის თვისება სურათების გასადიდებლად
იმის ნაცვლად, რომ გამოსახულების სიგანე განსაზღვროს პიქსელების რაოდენობა (მაგალითად, 500 პიქსელი), გამოიყენეთ პროცენტი (მაგალითად, 100%) ისე, რომ სურათი შეხედოს მშობლის სიგანეს და შესაბამისად შეცვალოს. სურათის სიგანის 100% -ზე დაყენება აიძულებს სურათს გააფართოვოს მაღლა და ქვევით, რაც დამოკიდებულია მაყურებლის ეკრანის ზომაზე. ამის გაკეთება ხაზზე:
ნაბიჯი 2. გამოიყენეთ მაქსიმალური სიგანის თვისება, რათა შეზღუდოთ სურათის რეალური ზომის გაფართოება
თუ თქვენ იყენებთ სიგანის თვისებას წინა საფეხურზე სურათის 100% –მდე გასადიდებლად, გამოსახულება გაიზრდება ან შემცირდება და მოთავსდება მისი კონტეინერის 100% –ზე, მიუხედავად ზომისა. ეს ნიშნავს, რომ თუ გამოსახულება უფრო პატარა მხარეზეა, ის უფრო მასშტაბური გახდება ვიდრე მისი თავდაპირველი ზომა და უფრო დაბალი ხარისხის იერი. ამის თავიდან ასაცილებლად, გამოიყენეთ მაქსიმალური სიგანე, რომ გამოსახულების მაქსიმალური სკალირების ზომა 100% -ზე დააყენოთ (მისი რეალური ზომა). Აი როგორ:
ნაბიჯი 3. გამოიყენეთ HTML სურათის ელემენტი სხვადასხვა ეკრანის სხვადასხვა ზომის გამოსახულების გამოსახატავად
თუ გსურთ შექმნათ მორგებული ზომის სურათები სხვადასხვა ზომის ეკრანებზე გამოსაჩენად, შეგიძლიათ მიუთითოთ რომელი ფოტოები გამოჩნდეს თქვენს HTML კოდში. შექმენით სხვადასხვა ზომის სურათები და შემდეგ გამოიყენეთ ეს კოდი, როგორც მაგალითი იმის დასადგენად, თუ რომელი სურათი გამოიყენოთ 600px და 1500px სიგანის ეკრანებზე:
