ადაპტური ვებსაიტის დიზაინი არის მოსახერხებელი სისტემა ერთი და იგივე ვებსაიტის სხვადასხვა ტიპის მოწყობილობებზე ონლაინ საჩვენებლად. მარტივი სიტყვებით, ეს არის ლეპტოპზე, სმარტფონზე და სხვა გაჯეტებზე ერთი ვებ გვერდის ნახვის შესაძლებლობა.
ვებ რეაგირება აუცილებლობად იქცა მას შემდეგ, რაც ადამიანებმა მიიღეს სხვადასხვა ფორმატის გაჯეტები ინტერნეტით. კომპანიები, ონლაინ მაღაზიები და თუნდაც მხოლოდ ინფორმაციული საიტები ცდილობენ მოიწონონ თავიანთი აუდიტორია, ყოველმხრივ მოერგებიან მას. საპასუხო დიზაინი წყვეტს მოხერხებულობის პრობლემას, ამიტომ ის შეუცვლელი სამუშაო ნივთია.
საპასუხო ვებ დიზაინის მახასიათებლები
დიზაინის მოხერხებულობა ხასიათდება რამდენიმე ძირითადი კრიტერიუმით.
- ზომა. საპასუხო ვებსაიტის დიზაინს უნდა ჰქონდეს მცირე განსხვავებები გვერდის სხვადასხვა მოწყობილობებზე ჩვენებისას, ამიტომ სურათების, ტექსტის და სხვა ელემენტების ზომა უნდა შეესაბამებოდეს თავად მოწყობილობების ზომებს. ამისათვის, ვებ დეველოპერები ადაპტირებენ დიზაინს ისე, რომ მას ჰქონდეს მრავალი ნახვის ვერსია.
- შინაარსის ადაპტაცია. მასალა, რომელიც ავსებს საიტს (სურათები, ვიდეოებიდა სხვა მულტიმედიური ელემენტები) ასევე უნდა ემთხვეოდეს ეკრანის საჭირო გარჩევადობას დისპლეის ხარისხის დაკარგვის გარეშე.
- დიზაინის მოქნილობა. ელემენტების შემუშავებაში ჩართვა, რომლებიც საშუალებას გაძლევთ სწრაფად დაარეგულიროთ საიტის დიზაინი, როდესაც შეცვლით ვებ გვერდს, რომელსაც უყურებთ. მაგალითად, მომხმარებელი ახვევს გვერდს ზევით და ქვევით, ნავიგაციას უწევს სხვადასხვა განყოფილებებს ან ცვლის ეკრანის პოზიციას ვერტიკალურიდან ჰორიზონტალურზე და პირიქით.
- გაამარტივეთ ელემენტები მოწყობილობის მიხედვით უკეთესი გამოყენებისთვის.
- დამალეთ უმნიშვნელო ბლოკები პატარა ეკრანებზე.
საფუძვლები
საიტის შექმნა ნამდვილად დაკავშირებულია პროგრამირების ენებთან, რადგან მათ გარეშე უბრალოდ არ შეგიძლიათ. HTML და CSS-ის გამოყენებით ბრაუზერი ამოიცნობს ობიექტების (ტექსტები, ილუსტრაციები, ვიდეო) შემადგენლობას და თანმიმდევრობას - ასე იქმნება საიტი.
CSS პასუხისმგებელია ფერზე, სტილზე, ზომებზე, შრიფტებზე, გასწორებებზე, ბალიშებზე, ფონის ელემენტებზე, ფორმებზე და ა.შ. HTML პასუხისმგებელია საიტის მთლიან შინაარსზე და სტრუქტურაზე. ამრიგად, ვებ რესურსი აგებულია აღწერის ორი ყველაზე მნიშვნელოვანი მეთოდის ერთობლიობაში.
CSS, მეორე მხრივ, შეუცვლელი დიზაინის ინსტრუმენტია. აქვს ფუნქციების დიდი ნაკრები, რომლებიც აღემატება HTML-ს:
- უზრუნველყოფს დიზაინის თანმიმდევრულობას მრავალ გვერდზე, საიტის იერსახეს და აკონტროლებს HTML დოკუმენტების ჩვენებას.
- გაძლევთ შესაძლებლობას გააკეთოთ დიზაინი და შინაარსი ერთდროულად.
- გამოიყენებს მრავალ სტილს და უნარსყურება სხვადასხვა მოწყობილობებზე.
- იღებს კომპლექსურ გადაწყვეტილებებს დიზაინის შესახებ.
- ხასიათდება მაღალი სიჩქარით.
საიტის შესაქმნელად, თქვენ უნდა იცოდეთ რამდენიმე ძირითადი კონცეფცია.
CSS სელექტორი აღინიშნება სტილის სახელით, რომელიც განსაზღვრავს თვისებებს და ფორმატირების ვარიანტებს. ის ეუბნება ბრაუზერს, რომელ კონკრეტულ ელემენტზე ვრცელდება თვისებები.
საკუთრება არის სტრუქტურული ერთეული. ის განსაზღვრავს გარე პარამეტრებს (ზომა, მდებარეობა, ფერი, ფორმა და ა.შ.) და გამოიხატება კონკრეტულ კოდში.
არსებობს განსაზღვრული CSS თვისებების ნაკრები, რომელიც აღწერს ერთ ობიექტს გარეგნულად და მდებარეობით.
ერთად ეს ელემენტები ქმნიან შემდეგ სქემას:
Selector { თვისება1: მნიშვნელობა; ქონება2; მნიშვნელობა }.
განლაგების ზომები და გარჩევადობა
დიზაინის განვითარება იწყება Photoshop-ში ან სხვა გრაფიკულ პროგრამებში განლაგების მომზადებით. მოხერხებულობისთვის, მოდულური ბადის სპეციალური მარკირება შეტანილია ტილოში, შეინიშნება სპეციალური ჩაღრმავები. ამრიგად, ვებ დიზაინერი უჩვენებს განლაგების დიზაინერს მომავალი საიტის სტრუქტურირების პრინციპებს და ვებ ელემენტების სწორად მოწყობას.
საპასუხო ვებ დიზაინის რეზოლუციები და ზომები ძირითადი მოწყობილობების ტიპებისთვის:
- ეს დიზაინი იცავს მობილურის ნებართვით მუშაობის დაწყების პრინციპს. სმარტფონის განლაგება შექმნილია ზომით 460 × 960 პიქსელი.
- ტაბლეტის განლაგების ზომაა 768 × 1024.
- ნოუთბუქის ზომაა 1280 × 802.
- კომპიუტერის ზომა არის 1600 × 992.
საიტის მობილურ ვერსიაშირაც შეიძლება გამარტივებული უნდა იყოს ყველა ძირითადი ფუნქციის შენარჩუნებით. თუ განლაგება მზადდება ონლაინ მაღაზიისთვის, გამოყენების ყველა გამარტივებით, მას უნდა ჰქონდეს ძირითადი აღწერა, პროდუქტის კატალოგი, შეკვეთის ვარიანტი, საყიდლების კალათა და ა.შ. - ყველა საჭირო ელემენტი სრულფასოვანი ფუნქციონირებისთვის, როგორც კომპიუტერზე სრული ფორმატის ნახვისას. მობილური ვერსიის მოხერხებულობა იმაში მდგომარეობს, რომ აქ შეგიძლიათ თავიდან აიცილოთ ზედმეტი გვერდები, რათა დაზოგოთ დრო დატვირთვისას.
ადაპტირებულ კონტენტში, html კოდის გამოყენებით, შეგიძლიათ დამალოთ რამდენიმე ელემენტი, რომელიც ნამდვილად არ არის საჭირო. მაგალითად, მაღალი გარჩევადობით, საიტზე ნაჩვენებია პროდუქტის ბარათი მისი აღწერით, ფასით, მიწოდების ინფორმაციით და "კალათაში" დამატების შესაძლებლობით. მობილური გარჩევადობით, პროცესი გამარტივებულია ფოტოზე, ფასზე და ყიდვის ღილაკზე.
საშუალო და მინიმალური რეზოლუციები საპასუხო დიზაინისთვის უნდა ითვალისწინებდეს მომხმარებლის მიერ კითხვისა და ნახვის სიმარტივეს.
განლაგება
ადაპტირებადი დიზაინის განლაგების მიზანია შექმნას მოქნილი განლაგება, ან როგორც ასევე ჩვეულებრივ ამბობენ: "რეზინის შაბლონი". ბოლო ხაზი არ არის ერთნიშნა გვერდის ზომები, არამედ შაბლონის პროპორციული შეკუმშვა ყველა მოწყობილობაზე მარტივი ნახვისთვის.
ის აგებულია ძირითადად CSS-ზე. განვითარების დროს განისაზღვრება ეკრანის ზომების საკონტროლო წერტილები. ამრიგად, განისაზღვრება დარჩენილი ობიექტების სიგანე. ამისათვის გვერდის სიგანე დგინდება css max-width თვისებით, ამ კრიტერიუმებიდან გამომდინარე, პროცენტულად ირჩევა სხვა ელემენტების ზომა. მაგალითად, ბლოკის ზომა მთავარზეგვერდი არის 600 პიქსელი, ხოლო გვერდითი ზოლის ბლოკის სიგანე (საიტის გვერდითი ზოლი) არის 400 პიქსელი, შესაბამისად, შინაარსის სიგანე იქნება 60%, ხოლო გვერდითი ზოლის სიგანე 40%.
არსებობს რამდენიმე ტიპის საპასუხო განლაგება. თითოეული შეირჩევა ინდივიდუალურად, მახასიათებლებისა და კონსტრუქციის მიხედვით.
ნახვები:
- განლაგების ტიპი, რომელიც საშუალებას აძლევს ბლოკებს შეფუთოს ეკრანის გარჩევადობის შემცირებისას. მრავალსვეტიან საიტებზე დამატებითი ბლოკები გადატანილია ეკრანის ბოლოში.
- როდესაც მუშავდება ცალკე ნიმუში თითოეული ნებართვისთვის. ამ ტიპის საპასუხო დიზაინს უფრო მეტი დრო სჭირდება, მაგრამ ყველაზე იკითხება.
- დიზაინის მარტივი ტიპი, რომელიც მიზნად ისახავს ყველა ელემენტის მასშტაბირებას. ეს არ არის მოქნილი.
- პანელის ტიპი მოსახერხებელია მობილურ აპლიკაციებში გამოსაყენებლად, როდესაც ჩნდება დამატებითი ფუნქციები თავად ეკრანის პოზიციის შეცვლისას.
საპასუხო ფენების შექმნა სამუშაოს მხოლოდ ერთი ნაწილია. ადაპტაციური სურათები ცალკე შემთხვევაა, რომელსაც აქვს საკუთარი პრობლემები და მათი გადაჭრის მეთოდები.
ერთი სურათი ნათლად უნდა იყოს ნაჩვენები ეკრანის სხვადასხვა გარჩევადობით. აქ არის პრობლემა - როგორ დავრწმუნდეთ, რომ სურათი ყოველთვის იგივე რჩება, მიუხედავად გარჩევადობის ცვლილებისა. მარტივი CSS კოდის შეყვანა ამ შემთხვევაში არ იქნება საკმარისი.
მაგალითი: img {max-width: 250px;} - აქ თქვენ უნდა გამოიყენოთ მეთოდი, რომლის დროსაც გამოსახულების შემცველი კონტეინერის ზომა შეზღუდულია და არა თავად სურათი. ეს ასე გამოიყურება: div img {max-width: 250px;}. ეს მეთოდი პრობლემას აგვარებსმცირე სურათების განლაგება, მაგრამ არ არის შესაფერისი დიდი ილუსტრაციებისთვის.
ამიტომ, ბევრ დეველოპერს ურჩევნია გამოიყენოს Javascript ენები, რომლებიც საშუალებას გაძლევთ მოარგოთ ნებისმიერი სურათი სერვერის გადატვირთვის გარეშე. Javascript გთავაზობთ ალტერნატიული სკრიპტების დიდ რაოდენობას.
საპასუხო განლაგების დადებითი და უარყოფითი მხარეები
დადებითი:
- შეინახეთ ყველა ელემენტის მდებარეობა. ეს მოსახერხებელია, როდესაც მომხმარებელი შეჩვეულია საიტის სრულ ვერსიას.
- დომენების და მისამართების შენახვა.
- სრული პერსონალიზაცია სხვა ნებართვების ფორმატებისთვის.
უარყოფითი:
- ფუნქციური მოქნილობა დაკარგულია
- ნებისმიერი ინფორმაციული გადატვირთვა სავსეა ვებ რესურსის ხანგრძლივი გაშვებით, რაც აიძულებს ბევრ მომხმარებელს გადაერთოს უფრო სწრაფ ვარიანტებზე.
საიტის შექმნა
საიტის სტრუქტურა დაყოფილია რამდენიმე განყოფილებად და ბლოკად. ტრადიციულად, განლაგება შედგება საიტის ზედა ნაწილისგან (სათაური), ლოგო, მენიუ, შინაარსის ბლოკი და საიტის ბოლო ნაწილი (მაგალითად, დეტალური საკონტაქტო ინფორმაცია). ვნახოთ, როგორ შევქმნათ საპასუხო ვებსაიტის დიზაინი მარტივი შაბლონიდან.
დამხმარე ტეგები დასაწერად:
- wrapper - ტეგი, რომელიც აერთიანებს შაბლონის ყველა ელემენტს;
- header h1 - ლოგო;
- header - მენიუს და სხვა მნიშვნელოვანი ელემენტების სათაური;
- კონტენტი - დაბლოკვა;
- colLeft - შინაარსის ზომა;
- colRight - გვერდითი ზოლი (გვერდითი სვეტი);
- ფუტერი - საიტის ბოლო ნაწილი;
- მედია ეკრანი - კომპლექტისასურველი გარჩევადობა.
საიტის დაწერისას, საჭიროებიდან გამომდინარე, ეს ელემენტები შეიძლება მოძრაობდეს სხვა თანმიმდევრობით. მაგალითად, მაღალი გარჩევადობის დროს, მენიუ შეიძლება გამოჩნდეს ვერტიკალურად. მობილურ ვერსიაში განლაგება შეიძლება ისე იყოს აგებული, რომ მენიუ ჰორიზონტალურ მდგომარეობაში გამოვა.
- viewport - ტეგი, რომელიც საშუალებას გაძლევთ შეინახოთ ტექსტის ზომა დიზაინის უფრო მცირე ვერსიაში. ის მდებარეობს ტეგებს შორის.
- მაქს-სიგანე - საიტის ოპტიმიზაცია, რათა თავიდან იქნას აცილებული 1000 პიქსელზე მეტი გარჩევადობა.
განლაგების დანერგვისას, jQuery ბიბლიოთეკა ძალიან გეხმარებათ, როცა გჭირდებათ ბლოკების სტილისა და სტრუქტურის შეცვლა.
რა განსხვავებაა საპასუხო და მობილურ დიზაინს შორის
სრული გაგებისთვის, განიხილეთ რამდენიმე საილუსტრაციო მაგალითი, რადგან ამ ორ ცნებას შორის აღრევა იშვიათი არ არის.
თქვენ უნდა გესმოდეთ, რომ მობილური ვერსია არის პირველადი საიტის ანალოგი ქვედომენით. საიტის გარე პრეზენტაცია სრულად იმეორებს სტილს და ფუნქციონირებას, ხოლო მისი სტრუქტურა და შინაარსი შეიძლება განსხვავდებოდეს ძირითადი ვერსიისგან, რადგან ვერსია დაყოფილია საჭირო ელემენტებზე.
საპასუხო დიზაინი ოპტიმალურია ყველა მოწყობილობის რეზოლუციისთვის. ის მასშტაბირებადია და სწორად ასახავს ნახვის პირობების მიუხედავად.
ეს არის საიტის ორი განსხვავებული პრეზენტაცია, რომლის გარშემოც დაუღალავად მძვინვარებს კამათი, რომელი ჯობია. აღსანიშნავია, რომ კონკრეტული გადაწყვეტილება ჯერ მიღებული არ არის. ვიღაც აფასებს ამ დიზაინს, მიუთითებს მოდის ტენდენციაზე და უამრავ უპირატესობაზე.მობილურ ვერსიას ასევე აქვს რამდენიმე უპირატესობა, რაც საპასუხო დიზაინს არ გააჩნია. ამიტომ, დასაწყისისთვის, თქვენ უნდა გესმოდეთ ძირითადი საჭიროებები.
სარგებელი
როგორ არის საპასუხო დიზაინი მობილურზე უკეთესი?
მრავალფეროვნება. ჩვენს დროში, ბაზრის ასეთი გაურკვეველი ზრდის პირობებში, უბრალოდ საჭიროა ინფორმაციის სხვაგვარად წარდგენა, მომხმარებელთა სურვილების დაკმაყოფილებით. საპასუხო დიზაინი წყვეტს ამ პრობლემას.
ეფექტური ხელშეწყობა საძიებო სისტემებში. რა არ შეიძლება მივაწეროთ ადაპტური მოწყობილობის მთავარ უპირატესობებს. საძიებო სისტემებს ურჩევნიათ მომხმარებლებს შესთავაზონ საპასუხო ვებსაიტები.
გამოყენება. საპასუხო დიზაინი, როგორც წესი, შექმნილია საუკეთესო დიზაინის გადაწყვეტილებებში, რაც კარგი საჩუქარია მომხმარებლების ვიზუალური აღქმისთვის.
სიმარტივე და სიმარტივე როგორც პროექტის განხორციელებაში, ასევე მის გამოყენებაში.
კარგი კონვერტაციის მაჩვენებლები. იმის გამო, რომ ადაპტირებულ დიზაინთან ერთად ჩვენების მეტი შესაძლებლობაა, თავად კონვერტაცია იზრდება.
ეკონომიკა. ეს შედარებით იაფია, ვიდრე ცალკე მობილური ვერსიის შექმნა და პოპულარიზაცია.
მობილური ვერსიის დადებითი და უარყოფითი მხარეები
მობილური საპასუხო დიზაინის შექმნა მოითხოვს მრავალფეროვნებას და თანმიმდევრულობას. უპირველეს ყოვლისა, რეკომენდებულია დეტალურად დაწეროთ მითითების პირობები, რაც, რა თქმა უნდა, დაგეხმარებათ თავიდან აიცილოთ ზედმეტი სამუშაო და დაზოგოთ დრო, ასევე გაითვალისწინოთ სერვერის მახასიათებლები, რომელზედაც განთავსდება საიტი..
მობილურ საპასუხო დიზაინს აქვს გარკვეული დადებითი და უარყოფითი მხარეები.
დადებითი:
- თუ თქვენ გაქვთ მზა საიტი, არ არის საჭირო დიზაინის შემუშავება მობილური ვერსიისთვის ნულიდან. მხოლოდ რამდენიმე ცვლილების შეტანაა შესაძლებელი, რაც ამ განლაგებას ათავისუფლებს არასაჭირო ფუნქციონალებისგან.
- ყველა სახის გამარტივების გამო, მობილური ვერსია ჩამოტვირთვისას უფრო სწრაფად ითვლება.
- მომხმარებელი ხედავს ინფორმაციის ყველაზე მნიშვნელოვან ნაწილს მთელ კონტენტში.
- სწრაფი განხორციელება. არსებობს დანამატები, რომლებითაც შეგიძლიათ განახორციელოთ მობილური ადაპტაცია, მაშინაც კი, თუ არ იცით ტეგები და კოდები.
- საძიებო სისტემების არჩევანი უპირატესობას ანიჭებს ადაპტირებულ ვერსიებს, რადგან მათ ანალიზს ნაკლები დრო სჭირდება.
მინუსები:
- ყველა მობილური ვერსია შეიძლება არ ემთხვეოდეს მობილური მოწყობილობის გარჩევადობას. საიტი, რა თქმა უნდა, გაიხსნება, მაგრამ ეკრანის გარჩევადობა ყოველთვის არ ემთხვევა განლაგებას. ზოგჯერ კარგად შემუშავებული სმარტფონის დიზაინი შეიძლება განსხვავებულად გამოიყურებოდეს ტაბლეტის სახით გახსნისას.
- მობილურ ვერსიებს სჭირდება ცალკე ფასიანი დომენები.
- კონტენტის გამოქვეყნებისას მცირე პრობლემებია. თუ ერთდროულად რამდენიმე ვერსიაა, კონტენტი ერთდროულად უნდა მორგებული იყოს ყველა ფორმატისთვის. მთავარ საიტზე ახალი მასალის გაგზავნა და მობილური ვერსიაზე გადაწერა შეიძლება ჩაითვალოს ქურდობად. ამ პრობლემის თავიდან ასაცილებლად, შეიძლება დაგჭირდეთ რესურსების კავშირის დამტკიცება.
განხორციელების მეთოდები
მთავარი განხორციელების მეთოდები:
- განლაგებისა და განლაგების დიზაინის შექმნის შემდეგ, იგი იტვირთება საჭირო ზომებზე გამოყენებითოპერატორის საიტი და მთავარი კოდი. ეს არის კლასიკური მეთოდი, რომელიც გამოიყენება საშუალო და მცირე ვერსიების (ტაბლეტები, სმარტფონები და ა.შ.) შექმნისას.
- BootStrap არის ადაპტაციის ხელსაწყოების მარტივი და მკაფიო ნაკრები. ვარგისია Landing Page და სხვა არც თუ ისე რთული ვებ პროექტებისთვის ვერსიების შესაქმნელად. ეს იძლევა კარგ შესაძლებლობას გამოიყენოს მრავალი განსხვავებული სტილი ინტერფეისის ფუნქციებში.
- საპასუხო ბადის სისტემა არის მრავალმხრივი ხელსაწყოების პოპულარული ნაკრები. მარტივი გამოსაყენებელია და არ საჭიროებს ღრმა ცოდნას. შეიცავს ინფოგრაფიკის მრავალფეროვნებას.
- GUMBY - CSS ჩარჩო, რომელიც გამოირჩევა მოქნილი რეაგირებით და შესანიშნავი ინსტრუმენტებით.
- ქუქები - საშუალებას გაძლევთ განახორციელოთ საპასუხო სურათები. ავტომატურად ახლავს ბრაუზერის მიერ მოთხოვნილი ფაილები.
- ExpressionEngine არის კიდევ ერთი გზა საპასუხო სურათების შესაქმნელად. ადგენს, არის თუ არა მოწყობილობა მობილური, რომელსაც შეუძლია სურათების შეცვლა საჭირო გარჩევადობამდე.
- ProtoFluid - უზრუნველყოფს სწრაფ პროტოტიპირებას. ვარგისია ყველა სახის მოწყობილობისთვის.
