საიტის რეაგირება არის საიტის სწორი ჩვენების შესაძლებლობა სხვადასხვა მოწყობილობებისხვადასხვა მახასიათებლებით.
მეტი ვიდეო ჩვენს არხზე - ისწავლეთ ინტერნეტ მარკეტინგი SEMANTICA-სთან ერთად
დღეს საიტების ნახვა ხდება პერსონალურ კომპიუტერებზე, პლანშეტებზე, სმარტფონებზე. თითოეულ მოწყობილობას აქვს საკუთარი მახასიათებლები - მუშაობის სიჩქარე, ეკრანის გარჩევადობა.
თუ საიტი არ არის საპასუხო, მაშინ ის სწორად გამოჩნდება კომპიუტერზე. ტელეფონში კი მას შეუძლია "წასვლა" - ბლოკები ერთმანეთს გადაფარავს, შრიფტი შეიძლება წაუკითხავი გახდეს.
თავად ტერმინი პასუხისმგებლობა ფართოდ გამოიყენება მას შემდეგ, რაც გამოვიდა ეთან მარკოტის წიგნი Responsive Web Design - Responsive Web Design. საიტებს, რომლებსაც შეუძლიათ დინამიურად მორგება სანახავი მოწყობილობების მოცემულ მახასიათებლებზე, ეწოდა ადაპტირებულს.
საპასუხო განლაგების მაგალითი
ჩვენება კომპიუტერზე:
თეფშზე:
სმარტფონზე:
რატომ გჭირდებათ საპასუხო ვებსაიტი
ტექნოლოგიები სწრაფი ტემპით ვითარდება და აღჭურვილობის მწარმოებლები აგრძელებენ მათ. სმარტფონები, პლანშეტები, ტელევიზორები და ინტერნეტთან დაკავშირებული სხვა ელექტრონული მოწყობილობები ხელმისაწვდომია ყველა გემოვნებისა და ბიუჯეტისთვის, არსებობს ეკრანის ზომის მრავალი ვარიანტი.
ამავდროულად, კონტენტის მოხმარება ექსპონენტურად იზრდება. კლიენტისთვის ბრძოლაში საიტის მფლობელები იყენებენ ყველა საშუალებას და მეთოდს. კერძოდ, განვითარების ეტაპზე გათვალისწინებულია თქვენი ვებ რესურსის სწორი ჩვენების შესაძლებლობა სხვადასხვა მოწყობილობებზე.
ყოველწლიურად იზრდება მოწყობილობების პროცენტი, რომლებიც საშუალებას გაძლევთ ნახოთ ინტერნეტში ინფორმაცია. ფორმატებისა და რეზოლუციების მრავალფეროვნება ართულებს განვითარების პროცესს მთლიანობაში, დამატებითი მოთხოვნები უნდა იქნას გათვალისწინებული ყველა ეტაპზე: დიზაინერები, განლაგების დიზაინერები და პროგრამისტები.
საპასუხო დიზაინის კონცეფცია საშუალებას გაძლევთ გაამარტივოთ პროცესი, რადგან არ გჭირდებათ საიტის მრავალი ვარიაციის შექმნა, როგორც ეს ადრე იყო, მაგალითად, მობილური ვერსიებით. ამ შემთხვევაში ფუნქციების ცალკე ნაკრები შეიქმნა ცალკეულ ქვედომენზე.
ძველი საიტები უნდა გაუმჯობესდეს და ადაპტირებასთან დაკავშირებული მიდგომები შესაძლებელს ხდის ამის განხორციელებას. მთავარია, თავიდანვე სწორად შეაფასოთ მასშტაბი, ზოგიერთ შემთხვევაში უფრო ადვილი, სწრაფი და იაფია ახალი დიზაინის განლაგებისა და შაბლონების გამოყენება. თუ თქვენი კორპორატიული იდენტობა არ არის ცნობადი ბრენდი, ხშირად ის ფაქტი, რომ ის მორალურად მოძველებულია, ასევე გიბიძგებთ გადამუშავებისკენ. და არავინ გააუქმა რებრენდინგი, როგორც ახალ დონეზე გადასვლის ეტაპი. საპასუხო ვებსაიტი არის ძლიერი ინსტრუმენტი თქვენი ბიზნესისთვის.
არსებობს სერვისები, რათა შეამოწმოთ რამდენად რეაგირებს საიტი.
უფრო მეტიც, დღეს უმსხვილესი საძიებო სისტემები Google და Yandex ამ პარამეტრს ითვალისწინებენ საიტების რეიტინგისას. გამოყენებადობის გამო, ნავიგაცია ერთ-ერთი შეუცვლელი ფაქტორია საიტის ხარისხის შესაფასებლად. ინფორმაციის ჩატვირთვის სიჩქარე და ოპტიმიზებული სურათების შემთხვევაში ის იკლებს, წაუკითხავი ტექსტი და დამახინჯებული ელემენტები, რომლებიც ძალიან მცირეა ან არ ჯდება ეკრანზე, ართულებს ინფორმაციის მოძიებას და უბრალოდ იწვევს უარის მატებას - მომხმარებელი ხურავს გვერდს. ეს არის ქცევითი ფაქტორები, რომლებიც ასევე გავლენას ახდენენ პოზიციაზე ძიების შედეგებში.
საიტის მფლობელებისთვის ტექნიკური ტერმინოლოგია და რეიტინგის პარამეტრები არ არის სრულიად ნათელი და ხელშესახები კრიტერიუმები. მაგრამ მათთვის საკმარისია იმის გაგება, თუ როგორ აისახება ეს დასწრების დინამიკაზე. ბევრ სფეროში, მობილური მოწყობილობებიდან ტრაფიკის წილი შედარებულია და აღემატება დესკტოპის ტრაფიკს. ეს უნდა გავითვალისწინოთ. სულ უფრო და უფრო ნაკლებად შესაძლებელია შეხვდეთ დეველოპერებს, რომლებიც არ გვთავაზობენ ვებსაიტის ადაპტირებას, მაგრამ პროცესის გასაკონტროლებლად ამ საკითხის ნავიგაცია არ დააზარალებს.
ადაპტაციის პრინციპები
ძაფები
ვთქვათ, თქვენ შეიმუშავეთ დიზაინი დესკტოპის ბრაუზერებისთვის. ყველაფერი გასაოცარია. ამ საიტის მობილური მოწყობილობიდან ნახვისას, ბლოკები იცვლებიან და გადადიან ერთმანეთის ქვეშ.
ამას დინება ჰქვია. ახლა კი ეს არის ერთ-ერთი მთავარი პრინციპი, რომელიც გამოიყენება საპასუხო დიზაინში. განიხილეთ ეს.
ერთეული ფარდობითობა
სკოლის ფიზიკის გაკვეთილებიდან ცნობილია, რომ სიჩქარე შეიძლება იყოს აბსოლუტური, როდესაც არ აქვს მნიშვნელობა, საიდანაც არ უნდა დააკვირდე მოძრაობას, სიჩქარე იგივე იქნება. და შედარებითი - როდესაც, საცნობარო წერტილიდან გამომდინარე, სიჩქარე შეიძლება შეიცვალოს.
ერთეულები იგივეა. სხვადასხვა მოწყობილობას აქვს სხვადასხვა პიქსელის სიმკვრივე. და ზომა, მაგალითად, 320 px განსხვავებულად გამოიყურება კომპიუტერისა და სმარტფონის ეკრანზე.
გამოსავალი არის ფარდობითი ერთეულების გამოყენება. როდესაც დააყენებთ ბლოკის ყველა ზომას, მასშტაბს და კოორდინატს იმ ელემენტთან მიმართებაში, რომელიც არის კომპიუტერის ეკრანზე და სმარტფონის ეკრანზე. მაგალითად, ზედა საზღვარი.
საგუშაგოების გამოყენება
ეს არის ელემენტები, რომელთა განლაგება იცვლება მხოლოდ იმ შემთხვევაში, თუ სანახავად გამოიყენება გარკვეული მოწყობილობა მოცემული პარამეტრებიეკრანი.
მაგალითად, თუ გვერდის შინაარსი „იძვრება“, აზრი აქვს ასეთი პუნქტის დამატება და შინაარსის დაფიქსირება.
მინიმალური და მაქსიმალური მნიშვნელობები
მობილურ ტელეფონზე სტატიის ჩვენება შესაძლებელია ისე, როგორც უნდა. მაგრამ ახლა თქვენ ხსნით იმავე გვერდს ფართოეკრანიან მონიტორზე და არ ხართ კმაყოფილი სურათით. ყველაფერი გადაჭიმულია, კითხვადობა გამორიცხულია.
მაგალითად, შეგიძლიათ მიუთითოთ თვისებები. თუ ეკრანის სიგანე 1000 პიქსელზე ნაკლებია, მაშინ შინაარსი უნდა იყოს ნაჩვენები სრულ ეკრანზე. წინააღმდეგ შემთხვევაში, მაქსიმალური სიგანე იქნება 1000 პიქსელი.
ობიექტის ბუდე
ეს ისე ხდება, რომ თქვენ უნდა გამოიყენოთ მრავალი ელემენტი, რომლებიც დამოკიდებულია სხვა ბლოკების პოზიციაზე. ძნელია კონტროლი. ასეთი ობიექტების ბუდე შეგიძლიათ ერთ კონტეინერში. ეს შესაფერისია იმ ბლოკებისთვის, რომლებსაც არ გსურთ ეკრანის პარამეტრებთან ადაპტირება - ღილაკები, ლოგოები და ა.შ.
სწორი შრიფტები
ვებ შრიფტები ლამაზად გამოიყურება. მაგრამ არ დაგავიწყდეთ, რომ ისინი ყველა დატვირთულია. ეს გავლენას ახდენს მომხმარებლისთვის გვერდების ჩატვირთვის სიჩქარეზე.
რასტრული და ვექტორული გრაფიკის სწორი გამოყენება
თუ სურათს აქვს ბევრი პატარა დეტალი, გამოიყენეთ რასტრული ფორმატი. წინააღმდეგ შემთხვევაში - ვექტორი.
მაგრამ არც ერთი სურათი არ უნდა იქნას გამოყენებული ოპტიმიზაციის - შეკუმშვის გარეშე. ვექტორული სურათები ჩვეულებრივ უკვე შეკუმშულია. მაგრამ ყველა ძველი ბრაუზერი არ უჭერს მხარს მათ.
განლაგების პატივისცემა
არსებობს ზოგადი სტანდარტები იმის შესახებ, თუ რა ძირითადი ზომები მიიღება ჩვეულებრივ განლაგების შემუშავებისას.
საპასუხო დიზაინში არის ისეთი რამ, როგორიცაა breakpoints. ეს არის პარამეტრები, რომლებიც გადადის მედიის ფუნქციებში. მიუთითეთ რა რეზოლუციებში ხდება დიზაინის ცვლილება.
- მობილურისთვის 320 პიქსელი, 480 პიქსელი.
- ტაბლეტებისთვის 768 პიქსელი.
- ნეტბუქებისთვის და ზოგიერთი ტაბლეტისთვის 1024 პიქსელი.
- პერსონალური კომპიუტერებისთვის 1280px და მეტი.
კონკრეტული რეზოლუციისთვის სავალდებულო არ არის ხისტი. დამოკიდებულია მოწყობილობების პარამეტრებზე და პარამეტრებზე.
ზოგჯერ არ არის საჭირო შუალედური რეზოლუციებისთვის განლაგების შექმნა, მაგალითად, 480 პიქსელი, თუ განლაგება სწორად არის ნაჩვენები 768 - 320 პიქსელის დიაპაზონში.
თუ განლაგება "ირღვევა" კონკრეტულ გაჯეტზე, არასწორად არის ნაჩვენები სხვა გარჩევადობით, ამ ეკრანის რეალური მნიშვნელობები მიიღება წყვეტის წერტილებად.
მედიის შეკითხვები
საპასუხო საიტების შემუშავება ეფუძნება მედიის მოთხოვნების გამოყენებით სტილის პარამეტრების განსაზღვრის პრინციპს.
მოთხოვნები განსაზღვრავს:
- მოწყობილობის ტიპი: პროექტორები, სმარტფონები, მონიტორები, ტელევიზორები და ა.შ.
- პირობები.
შესაბამისი მოთხოვნა და პასუხი გამოიყენებს ეკრანის შესაბამის პარამეტრებს css stylesheet ფაილიდან.
საიტის შემოწმება რეაგირებისთვის
თქვენ შეგიძლიათ შეამოწმოთ როგორ არის ნაჩვენები თქვენი საიტი მობილურ მოწყობილობებზე სხვადასხვა სერვისებისა და ხელსაწყოების გამოყენებით.
ბრაუზერის გამოყენებით
მაგალითად, Google Chrome-ს აქვს ჩაშენებული ხელსაწყოების ნაკრები საიტის დიზაინის სისწორის შესამოწმებლად მობილურ მოწყობილობებზე ჩვენებისთვის. თქვენ უნდა დააჭიროთ F12 ღილაკს ან Ctrl + Shift + I, ან მენიუში აირჩიეთ "დამატებითი ხელსაწყოები" - "დეველოპერი ინსტრუმენტები".
ვ Mozilla Firefoxეს შეიძლება გაკეთდეს ამ გზით "მენიუ" - "განვითარება" - "საპასუხო დიზაინი", ან Ctrl + Shift + M.
Google Mobile Friendly (Google Search Console)
ჩვენ უბრალოდ ჩაწერეთ სრული URL სტრიქონში და ვიღებთ შედეგებს. გადამოწმებას ჩვეულებრივ წუთზე ნაკლებ დრო სჭირდება.
საპასუხო საიტი არის ვებ განვითარების სტანდარტი, ინტერნეტ რესურსის ხარისხის ერთ-ერთი მაჩვენებელი და მომხმარებელთა საჭიროებებისადმი ყურადღებიანი დამოკიდებულება.
ადაპტური განლაგებასაიტი საშუალებას აძლევს ვებგვერდებს ავტომატურად მოერგოს პლანშეტებისა და სმარტფონების ეკრანებს. მობილური ინტერნეტ ტრაფიკი ყოველწლიურად იზრდება და ამ ტრაფიკის ეფექტურად დასამუშავებლად, თქვენ უნდა შესთავაზოთ მომხმარებლებს საპასუხო საიტები მომხმარებლისთვის მოსახერხებელი ინტერფეისით.
საძიებო სისტემები იყენებენ უამრავ კრიტერიუმს, რათა შეაფასონ ვებსაიტის რეაგირება მობილურ მოწყობილობებზე ნახვისას. Google ცდილობს გაამარტივოს ინტერნეტის გამოყენება სმარტფონებისა და პლანშეტების მფლობელებისთვის, მონიშნოს მობილურის შედეგები ადაპტირებული მობილური მოწყობილობებისაიტები სპეციალური ნიშნით მობილური მეგობრული... Yandex-ს ასევე აქვს ალგორითმი, რომელიც უპირატესობას ანიჭებს საიტებს მობილური / საპასუხო ვერსიით, მობილური ძიების მომხმარებლებისთვის.
შეგიძლიათ შეამოწმოთ გვერდის ჩვენება მობილურ მოწყობილობებზე სერვისებზე და.
ბრინჯი. 1. Yandex-ისა და Google-ის მობილური ძიების შედეგები შენიშვნით საიტის მობილური მოწყობილობებისადმი კეთილგანწყობის შესახებ რა არის საპასუხო განლაგება
საპასუხო განლაგება გულისხმობს არარსებობას ჰორიზონტალური ზოლებიგადახვევა და მასშტაბირებადი არეები ნებისმიერ მოწყობილობაზე ნახვისას, წაკითხვადი ტექსტი და დიდი არეები დაწკაპუნებადი ელემენტებისთვის. მედია მოთხოვნით, შეგიძლიათ აკონტროლოთ ბლოკების განლაგება და პოზიცია გვერდზე, აღადგინოთ შაბლონი, რათა მოერგოს მოწყობილობის ეკრანის სხვადასხვა ზომას.
საპასუხო ვებსაიტის შექმნის ძირითადი ტექნიკა მოცემულია სტატიაში. ამისთვის საპასუხო დიზაინისაიტის ძირითადი კონტეინერის სიგანე მითითებულია პროცენტებში, მაშინ როცა ის შეიძლება იყოს ბრაუზერის ფანჯრის სიგანის 100%-ის ან ნაკლები. ბადის სვეტების სიგანე ასევე მითითებულია პროცენტებში. ვ საპასუხო დიზაინიძირითადი კონტეინერისა და ბადის სვეტების სიგანე ფიქსირდება px-ში მნიშვნელობების გამოყენებით.
ამ გაკვეთილზე განხილული საპასუხო სითხის განლაგების ტექნიკა მშვენივრად მუშაობს ორსვეტიან განლაგებაზე, რაც საიტს საპასუხო და ადვილად ნახულს ხდის მობილურ მოწყობილობებზე. შაბლონი ითვალისწინებს გვერდების ძირითადი შინაარსის განსხვავებულ განლაგებას, ამ გაკვეთილზე გაანალიზდება მთავარი გვერდის განლაგება.
მთავარი გვერდის განლაგება
გვერდი შედგება სამი ძირითადი ბლოკისგან: სათაური (სათაური), შესაფუთი კონტეინერი ძირითადი შინაარსისა და გვერდითი ზოლისთვის და ქვედა კოლონტიტული (ძირი). ჩვენ მივიღებთ 768 პიქსელსა და 480 პიქსს, როგორც ჩვენი დიზაინის მიმავალ წერტილებს.
პირველ ეტაპზე ჩვენ დავმალავთ ზედა მენიუს და გადავიტანთ გვერდითა ზოლს კონტეინერის ქვეშ პოსტებით. მეორე პუნქტში ჩვენ შევცვლით სათაურის ელემენტების პოზიციას, გავაუქმებთ პოსტებში სოციალური მედიის ღილაკების განლაგებას და ვაუქმებთ ქვედა კოლონტიტულის სვეტების შემოხვევას.
ბრინჯი. 2. საპასუხო განლაგების მაგალითი 1. მეტატეგები და სექცია
1) განყოფილებაში დამატება
საჭირო ფაილები - ბმული გამოყენებული შრიფტების, jQuery ბიბლიოთეკისა და პრეფიქსის გარეშე დანამატის (ისე, რომ არ დაიწეროს ბრაუზერის პრეფიქსები თვისებებისთვის):
2. გვერდის სათაური
გვერდის სათაურში
ლოგო ;
ღილაკი მთავარი მენიუს საჩვენებლად/დამალვისთვის
