ელექტრონული გაჯეტების მიერ მოხმარებული ინტერნეტ ტრაფიკი ფაქტიურად ყოველდღე იზრდება. თანამედროვე მომხმარებლებს სჭირდებათ რესურსები მათთვის ყველაზე მოსახერხებელი ინტერფეისით. ზუსტად იგივე, ადაპტირებული განლაგება შესაძლებელს ხდის ამ მოთხოვნილების დაკმაყოფილებას, რადგან ის საშუალებას გაძლევთ ავტომატურად შეცვალოთ ვებ გვერდები მობილური მოწყობილობების მახასიათებლებზე.
რა არის ეს
საპასუხო განლაგება, რომელიც ასევე ცნობილია როგორც მობილურისთვის მოსახერხებელი, მოიცავს გარკვეული მოქმედებების შესრულებას, რომლებიც მიმართულია ვებ გვერდების შემუშავებაზე, რომლებსაც შეუძლიათ მოერგოს ეკრანის სხვადასხვა გარჩევადობას.
რამდენიმე წლის წინ, ამ სფეროში მცხოვრებ ადამიანებს უწევდათ ვებ გვერდების მრავალი ვერსიის შექმნა, რათა რესურსი სწორად ეჩვენებინა 'ktrnhjyys[' გაჯეტებზე სხვადასხვა ფანჯრის მახასიათებლებით. ასე მუშაობდნენ განლაგების დიზაინერები 2010 წლამდე. შემდეგ მკვეთრად შეიცვალა იდეა იმის შესახებ, თუ როგორ გავხადოთ საიტი ადაპტირებული. შემდეგ ამ ფუნქციის შესასრულებლად გამოიყენეს სპეციალური პროგრამირების ენა - JavaScript.
როგორ გავხადოთ ვებსაიტი საპასუხო ყველა ეკრანზემობილური მოწყობილობები დღეს? ახლა განლაგება ხორციელდება CCS3 ცხრილების, ასევე სპეციალური HTML5 ენის გამოყენებით.
რატომ გჭირდებათ საპასუხო ვებსაიტი
- შეგიძლიათ ინტერნეტში წვდომა სხვადასხვა ეკრანის გარჩევადობის გაჯეტების გამოყენებით. დღეს ადამიანები იყენებენ მრავალ განსხვავებულ მოწყობილობას როგორც საყოფაცხოვრებო საჭიროებისთვის, ასევე ინტერნეტის გამოყენებისთვის. რა თქმა უნდა, ერთი და იგივე საიტი უნდა იყოს ნაჩვენები მაღალი ხარისხით და კარგად გამოიყურებოდეს სხვადასხვა განზომილების და ეკრანის გარჩევადობის მოწყობილობებზე. მომხმარებლებმა არ უნდა იგრძნონ დისკომფორტი კონკრეტულ გაჯეტთან მუშაობისას.
- ინტერნეტ ტრაფიკის, მობილური აპლიკაციებისა და მოწყობილობების პოპულარობის ზრდა. ამჟამინდელი მოთხოვნა ელექტრონულ გაჯეტებზე, რომლებითაც შეგიძლიათ ქსელში შესვლა, საკმაოდ გონივრულია და ძნელად თუ არსებობს ვინმე, ვინც ამ ფაქტს ეკამათება. ასეთი პოპულარობის უგულებელყოფა უბრალოდ შეუძლებელია, რადგან ეს მომხმარებლები, ალბათ, თქვენი მთელი აუდიტორიის ლომის წილს წარმოადგენენ. ასე რომ, თუ გსურთ თქვენი რესურსის ვიზიტორთა რაოდენობა იგივე შეინარჩუნოთ ან გაზარდოთ, მაშინ დიდი ყურადღება უნდა მიაქციოთ მათ საჭიროებებსა და ინტერესებს. სხვა სიტყვებით რომ ვთქვათ, თქვენ ნამდვილად გჭირდებათ ყველაფერი გააკეთოთ იმისათვის, რომ თქვენი საიტის გამოცდილება მაქსიმალურად მოსახერხებელი იყოს, წინააღმდეგ შემთხვევაში თქვენი მომხმარებლები შეიძლება უბრალოდ წავიდნენ თქვენს კონკურენტებთან.
გადაუდებელი ინფორმაცია. თუ თქვენი სპეციალობა არის ახალი ამბების და სხვა უახლესი ინფორმაციის მიწოდება, მაშინ, რა თქმა უნდა, მომხმარებელს შეიძლება ეს სასწრაფოდ დასჭირდეს დამას ამ მომენტში შეიძლება ტელეფონის გარდა არაფერი ჰქონდეს ხელთ. ასე რომ, თქვენი ამოცანაა უზრუნველყოთ, რომ მას შეუძლია მიიღოს საჭირო ინფორმაცია რაც შეიძლება სწრაფად
საპასუხო განლაგებისა და მობილური აპლიკაციის შედარება
ყველა სახის პროგრამა და საიტი, რომელიც იყენებს მობილურ ვერსიებს მათი შესაბამისი გაჯეტებისთვის, ასევე კარგი ნაბიჯია, მაგრამ მათ აქვთ მთელი რიგი უარყოფითი მხარეები.
- მობილური აპლიკაცია აუცილებლად უნდა შეესაბამებოდეს ოპერაციული სისტემის ტიპს. ამისთვის კი არა მხოლოდ დრო, არამედ ფულიც უნდა დახარჯო.
- საჭიროა პროგრამის ჩამოტვირთვა. აპლიკაციის გამოსაყენებლად, რა თქმა უნდა, ის უნდა იყოს დაინსტალირებული. რა თქმა უნდა, მომხმარებელს შეუძლია ამის გაკეთება, მაგრამ მხოლოდ იმ პირობით, რომ მას ხშირად სჭირდება. თუ მას არ აქვს ასეთი საჭიროება, მაშინ, სავარაუდოდ, ის უარს იტყვის ამ ვალდებულებაზე. შედეგად, თქვენ დაკარგავთ თქვენი აუდიტორიის მნიშვნელოვან ნაწილს.
რატომ უნდა დატოვოთ აპები
- ტრაფიკის განაწილება. აპლიკაციის გამოყენება არ აჩვენებს რესურსზე დასწრების დონეს. სხვა სიტყვებით რომ ვთქვათ, პროგრამისა და საიტის ტრაფიკი არ არის შეჯამებული, რაც იწვევს თქვენთვის საინტერესო ინდიკატორის შემცირებას.
- რესურსული მასალების ინტეგრაცია. თუ თქვენ შეიძინეთ აპლიკაცია, მაშინ მოგიწევთ დამატებითი თანხის დახარჯვა ყველა მასალის სინქრონიზაციისთვის, ან, საიტის შევსებით, ასევე გადაიტანოთ შინაარსი პროგრამაში. შედეგად, თქვენ კვლავ კარგავთ ფულს და დროს.
როგორ გავხდეთ ადაპტურივებსაიტის დიზაინი
პირველი ნაბიჯი არის ყველა სამუშაოს დიზაინი. ამ პროცესში დიზაინერმა უნდა ოსტატურად გადმოსცეს არსი და ძირითადი იდეები შედარებით მცირე ეკრანის და მენიუს მხოლოდ ერთი სვეტის გამოყენებით.
საჭიროების შემთხვევაში, საინფორმაციო ბლოკები მცირდება, რჩება მხოლოდ ყველაზე მნიშვნელოვანი ელემენტები. დამწყებთათვის სახელმძღვანელო ჩვეულებრივ მოიცავს:
- მობილური პირველი - დიზაინი ელექტრონული გაჯეტებისთვის;
- მოქნილი სურათები - გამოიყენეთ მოქნილი სურათები;
- ბადეზე დაფუძნებული განლაგება - გამოიყენეთ მოქნილი ბადეზე დაფუძნებული განლაგება;
- მედია მოთხოვნები - მედია მოთხოვნების დამუშავება.
როგორ გავხადოთ ვებსაიტი საპასუხო? ამისათვის შეგიძლიათ გამოიყენოთ რამდენიმე ტიპის განლაგება.
- რეზინი. ამ ტიპის განხორციელება მარტივია, დამწყებთათვისაც კი იშვიათად იწვევს სირთულეებს. რესურსის ძირითადი ბლოკები შეკუმშულია მანამ, სანამ არ შეესაბამება მობილური ეკრანის ზომას. თუ შეკუმშვა შეუძლებელია, მაშინ ისინი თავსდება ფირის სახით.
- ბლოკების გადატანა. ეს ტექნიკა იდეალურად მუშაობს მრავალი სვეტის მქონე რესურსებისთვის. დამატებითი ბლოკების განლაგება იცვლება ეკრანის ზომების მიხედვით. თუ ეკრანი იკუმშება, გვერდითი ზოლები გადავა ბოლოში.
- განლაგების გადართვა. ეს საკმაოდ შრომატევადი ტექნიკაა, რომელიც გულისხმობს სპეციალურად შექმნილი განლაგების გამოყენებას თითოეული ეკრანის გარჩევადობისთვის. ეს მეთოდი მნიშვნელოვნად უწყობს ხელს საიტის შესწავლას, მაგრამ სამუშაოს სირთულე მას გამოუცხადებელს ხდის.
- ელემენტარული განლაგება. მეთოდოლოგია, უნაკლოშესაფერისი მარტივი რესურსებისთვის. დიზაინერი უბრალოდ ზომავს სურათებს და ტიპოგრაფიას. მიუხედავად იმისა, რომ ეს მეთოდი არ შეიძლება იყოს მოთხოვნადი მოქნილობის ნაკლებობის გამო.
- პანელები. ეს ტექნიკა მომდინარეობს მობილური აპლიკაციებიდან, რომლებშიც დამხმარე მენიუ შეიძლება გამოჩნდეს ეკრანის ნებისმიერ პოზიციაზე. ახლა ეს მეთოდი ასევე არ არის ძალიან პოპულარული, რადგან საიტზე მობილური ნავიგაცია ყოველთვის არ არის გასაგები მომხმარებლებისთვის.
არც ერთ აღწერილ განლაგებას არ შეიძლება ეწოდოს უნივერსალური. როგორ გავხადოთ ვებსაიტი საპასუხო? უპირველეს ყოვლისა, თქვენ უნდა აირჩიოთ შესაფერისი განლაგება, პროექტის მიხედვით. ის სრულად უნდა შეესაბამებოდეს რესურსის შესაძლებლობებს და დააკმაყოფილოს ყველა საჭიროება.
როგორ შევქმნათ ვებსაიტის საპასუხო განლაგება
დღეს ამისათვის გამოიყენება CSS3 და HTML5. პირველი ტექნოლოგია არის კასკადური მაგიდების მოწინავე თაობა. მისი დახმარებით მუშავდება წესები, რომლის მიხედვითაც საიტის დეტალები გამოჩნდება მომხმარებლის ეკრანზე.
CSS3-ის დახმარებით შეგიძლიათ დააყენოთ რამდენიმე პარამეტრი: დაკავებული სივრცის პროცენტი და ელემენტის ზომები გარკვეული გარჩევადობით. ამ ტექნოლოგიით, დიზაინერებს შეუძლიათ შექმნან სხვადასხვა კლასები, რომლებიც შეესაბამება გარკვეულ მახასიათებლებს.
HTML5 გამოიყენება გარკვეული დეტალების მდებარეობის აღსანიშნავად, სხვა სიტყვებით რომ ვთქვათ, გვერდის აღსანიშნავად. გენერირებული CSS3 კლასები მითითებულია HTML ტეგებში ისე, რომ გამოყენებული ობიექტები შეიძლება შეიცვალოს გარჩევადობის მიხედვით.
მაშ, როგორ შევქმნათ საპასუხო ვებსაიტის დიზაინი html-ით? თქვენ უნდა დაიწყოთ მარტივი სურათის შემუშავებითშემდეგ გაჭიმეთ.
ეს ქმნის სურათის დამუშავების გარსს.
როგორ გავხადოთ ვებსაიტი საპასუხო CSS-ით? დააყენეთ შემდეგი პარამეტრები:
div {
სიგანე: 100%;
}
div img {
სიგანე: 100%;
სიმაღლე: ავტო;
}
შემდეგ, div-ის სიგანეზე დააყენეთ სურათის სიგანე img.
ასე რომ თქვენ მიიღებთ სურათს, რომელიც დაიკავებს ეკრანის მთელ ადგილს ნებისმიერი გარჩევადობით.
ინდივიდუალური ელემენტების მორგება
საიტის სათაური. მოათავსეთ რამდენიმე ელემენტი სათაურში:
ლოგო -
მენიუს დამალვის ღილაკი -
მთავარი მენიუ -
საიტის ძებნა -
- დაბლოკვა ტექსტური შინაარსით. გამოიყენეთ ელემენტი სტატიის შესაფუთად.
- გვერდითი სვეტი. გამოიყენეთ კატეგორიების სიის მოსაძებნად, დააწკაპუნეთ საფოსტო სიაზე და უახლეს პოსტებზე.
- როგორ შევქმნათ ადაპტირებული მენიუ ვებსაიტისთვის? დაამატეთ ელემენტი მარკირებაში. ეს კოდი ცვლის მენიუს სიმაღლეს, აწყობს კონტენტს საჭირო ზომებზე.
მინი-გალერეის შექმნა
იცოდით როგორ შექმნათ საპასუხო html და css ვებსაიტი, შეგიძლიათ შეავსოთ თქვენი რესურსი სასარგებლო და საინტერესო შინაარსით, რომელიც შესაფერისია ნებისმიერი გაჯეტისთვის, მაგალითად, მინი გალერეისთვის.
HTML-ში რამდენიმე სურათის დასამატებლად გამოიყენეთ შემდეგი ელემენტები:
და იმისათვის, რომ თითოეულმა სურათმა ურთიერთქმედება სხვადასხვა რეზოლუციასთან და შეცვალოს მისი ზომა, გამოიყენეთ CSS3:
div.image_gallery {
ზღვარი: 0 ავტო;
სიგანე: 1000px;
წთ-სიგანე: 500px;
}
img {
მაქს-სიგანე: 48%;
შეფუთვა: 1%; / სურათების მცირე ჩასმა /
}
ესე იგი, თქვენი მინი გალერეა მზადაა. ახლა თქვენ იცით, როგორ გახადოთ თქვენი ვებსაიტი საპასუხო სხვადასხვა მოწყობილობებისთვის.
როგორ შევამოწმოთ მუშაობის ხარისხი
- Google Chrome. ბრაუზერში შესვლის შემდეგ დააჭირეთ F12. ამის შემდეგ, პანელი გაიხსნება - დააწკაპუნეთ თქვენთვის საინტერესო გაჯეტის ხატულაზე, მაგალითად, ტაბლეტზე ან სმარტფონზე. და შემდეგი მენიუდან აირჩიეთ საჭირო გარჩევადობა.
- მოწყობილობაზე პასუხისმგებელი. პროგრამა, რომლითაც შეგიძლიათ შეამოწმოთ ადაპტური განლაგება საიტის ჩატვირთვით IFrame-ის საშუალებით. იქ ნახავთ მოწყობილობების სიას სხვადასხვა გარჩევადობით.
- Aresponsivedesign.is. ეს არის გასართობი რესურსი. ჯერ საიტი იტვირთება IFrame ფანჯრებში და შემდეგ გადადის Apple-ის ეკრანებზე. ეს ძალიან კომფორტულს ხდის ეკრანის ანაბეჭდების გადაღებას.
