საიტის განვითარების ტექნოლოგია ძალიან მრავალმხრივი პროცესია. მაგრამ მაინც, მისი ყველა ეტაპი შეიძლება დაიყოს ორ მთავარ კომპონენტად - ფუნქციურ და გარე გარსად. ან, როგორც ჩვეულებრივია ვებმასტერებს შორის, შესაბამისად, back-end და front-end. ადამიანები, რომლებიც ვებ დეველოპერების სტუდიებს უკვეთენ თავიანთ ვებსაიტებს, ხშირად გულუბრყვილოდ თვლიან, რომ ღირს მხოლოდ ფუნქციონირებაზე ფოკუსირება და ეს იქნება სწორი გადაწყვეტილება. მაგრამ ეს ასეა ძალიან, ძალიან იშვიათ შემთხვევებში, ჩვეულებრივ ბეტა ტესტირების ეტაპზე სტარტაპ პროექტებისთვის. წინააღმდეგ შემთხვევაში, გრაფიკული დიზაინი და მომხმარებლის ინტერფეისი უბრალოდ უნდა შეესაბამებოდეს ვებ განვითარების სტანდარტებს და იყოს მოსახერხებელი.
პირველი ქვაკუთხედი, რომელსაც ინტერფეისის დიზაინერი ან დიზაინერი აწყდება, არის საიტის განლაგების სიგანე. ყოველივე ამის შემდეგ, ამისათვის აუცილებელია ინტერფეისების დახატვა. წმინდა ინტუიციურად, წარმოიქმნება ორი მიდგომა - ან შექმენით ცალკე განლაგება ეკრანის თითოეული პოპულარული გარჩევადობისთვის, ან შექმენით საიტის ერთი ვერსია ყველა ეკრანისთვის. და ორივე ვარიანტი არასწორი იქნება, მაგრამ პირველ რიგში.
ვებსაიტის სტანდარტული სიგანე პიქსელებშირუნეტისთვის
ადაპტაციური განლაგების შემუშავებამდე, საიტის შექმნა ათასი პიქსელის სიგანით იყო მასობრივი ფენომენი. ეს ფიგურა შეირჩა ერთი მარტივი მიზეზის გამო - ისე, რომ საიტი ჯდება ნებისმიერ ეკრანზე. და ამას თავისი ლოგიკა აქვს, მაგრამ დავუშვათ, რომ ადამიანს მაინც აქვს HD მონიტორი დესკტოპზე. ამ შემთხვევაში, თქვენი განლაგება მოგეჩვენებათ, როგორც პაწაწინა ზოლი ეკრანის შუაში, სადაც ყველაფერი ერთ გროვაშია მიბმული, ხოლო გვერდებზე არის უზარმაზარი გამოუყენებელი სივრცე. ახლა დავუშვათ, რომ ადამიანი წვდება თქვენს ვებსაიტს 800 პიქსელის ფართო ეკრანის მქონე პლანშეტზე და პარამეტრებში მონიშნულია „სრული ვებსაიტის ჩვენება“. ამ შემთხვევაში, თქვენი საიტიც არასწორად გამოჩნდება, რადგან ის უბრალოდ არ ჯდება ეკრანზე.
ამ მოსაზრებებიდან შეგვიძლია დავასკვნათ, რომ განლაგებისთვის ფიქსირებული სიგანე ჩვენთვის ნამდვილად არ არის შესაფერისი და სხვა გზა უნდა ვეძებოთ. მოდით გავაანალიზოთ თითოეული ეკრანის სიგანისთვის ცალკე განლაგების იდეა.
განლაგება ყველა შემთხვევისთვის
თუ თქვენ აირჩიეთ სტრატეგია ბაზარზე ყველა ზომის ეკრანის განლაგების შესაქმნელად, მაშინ თქვენი საიტი იქნება ყველაზე უნიკალური მთელ ინტერნეტში. ყოველივე ამის შემდეგ, დღეს უბრალოდ შეუძლებელია მოწყობილობების მთელი დიაპაზონის დაფარვა, თითოეული ვარიანტის დაზუსტების მცდელობა. მაგრამ თუ ყურადღებას გაამახვილებთ მონიტორების და მოწყობილობის ეკრანების ყველაზე პოპულარულ რეზოლუციებზე, მაშინ იდეა არ არის ცუდი. მისი ერთადერთი მინუსი არის ფინანსური ხარჯები. ბოლოს და ბოლოს, როდესაც ინტერფეისის დიზაინერი, დიზაინერი და კოდირებელი იძულებულნი არიან გააკეთონ ერთი და იგივე სამუშაო 5 ან 6 ჯერ, პროექტი დაჯდებაარაპროპორციულად აღემატება თავდაპირველად ბიუჯეტის ფასს.
აქედან გამომდინარე, მხოლოდ ერთგვერდიან საიტებს შეუძლიათ დაიკვეხნონ სხვადასხვა ეკრანის ვერსიების სიმრავლით, რომელთა დანიშნულებაა ერთი პროდუქტის გაყიდვა და აუცილებლად კარგად გაკეთება. კარგად, თუ თქვენ გაქვთ არა ერთი ასეთი სადესანტო, არამედ მრავალგვერდიანი საიტი, მაშინ უნდა იფიქროთ.
საიტის ყველაზე პოპულარული ზომები
კომპრომისი ორ უკიდურესობას შორის არის განლაგება ეკრანის სამი ან ოთხი ზომისთვის. მათ შორის, ერთი უნდა იყოს მობილური მოწყობილობების განლაგება. დანარჩენი უნდა იყოს ადაპტირებული მცირე, საშუალო და დიდი დესკტოპის ეკრანებისთვის. როგორ ავირჩიოთ საიტის სიგანე? ქვემოთ წარმოგიდგენთ HotLog სერვისის სტატისტიკას 2017 წლის მაისისთვის, რომელიც გვიჩვენებს მოწყობილობის ეკრანის სხვადასხვა გარჩევადობის პოპულარობის განაწილებას, ასევე ამ ინდიკატორის დინამიკას.
ცხრილიდან შეგიძლიათ გაიგოთ, თუ როგორ უნდა განსაზღვროთ საიტის ზომა, რომლის გამოყენებაც გსურთ. გარდა ამისა, შეგვიძლია დავასკვნათ, რომ დღეს ყველაზე გავრცელებული ფორმატი არის 1366 768 პიქსელიანი ეკრანი. ასეთი ეკრანები დამონტაჟებულია ბიუჯეტურ ლეპტოპებში, ამიტომ მათი პოპულარობა ბუნებრივია. შემდეგი ყველაზე პოპულარული არის Full HD მონიტორი, რომელიც არის ოქროს სტანდარტი ვიდეოებისთვის, თამაშებისთვის და, შესაბამისად, ვებსაიტების განლაგების შესაქმნელად. შემდეგ ცხრილში ჩვენ ვხედავთ მობილური მოწყობილობების გარჩევადობას 360 x 640 პიქსელზე, ასევე სხვადასხვა ვარიანტებს დესკტოპის და მობილური ეკრანებისთვის მის შემდეგ.
განლაგების დიზაინი
ასე რომსტატისტიკის გაანალიზების შემდეგ შეგვიძლია დავასკვნათ, რომ საიტის ოპტიმალურ სიგანეს აქვს 4 ვარიაცია:
- ლეპტოპის ვერსია 1366px სიგანით.
- სრული HD ვერსია.
- 800px ფართო განლაგება დესკტოპის პატარა მონიტორებზე გამოსატანად.
- საიტის მობილური ვერსია - 360 პიქსელი სიგანე.
ვთქვათ, ჩვენ გადავწყვიტეთ რა ზომა გამოვიყენოთ საიტისთვის გენერირებული წყაროსთვის. მაგრამ ასეთი პროექტი მაინც ძვირი დაჯდება. მოდით გადავხედოთ სხვა ვარიანტებს, ამჯერად ფიქსირებული სიგანის გამოყენების გარეშე.
განლაგება მოქნილი
არსებობს ალტერნატიული მიდგომა, როდესაც ღირს მხოლოდ ეკრანის მინიმალურ ზომაზე ადაპტაცია და თავად საიტის ზომები დადგინდება პროცენტებით. ამავდროულად, ისეთი ინტერფეისის ელემენტები, როგორიცაა მენიუები, ღილაკები და ლოგო, შეიძლება დაყენდეს აბსოლუტურ მნიშვნელობებში, ფოკუსირებული ეკრანის სიგანის მინიმალურ ზომაზე პიქსელებში. პირიქით, შინაარსის მქონე ბლოკები დაიჭიმება ეკრანის სიგანის განსაზღვრული პროცენტის მიხედვით. ეს მიდგომა საშუალებას გაძლევთ შეწყვიტოთ საიტების ზომის შეზღუდვა დიზაინერისთვის და ოსტატურად დაამარცხოთ ეს ნიუანსი.
რა არის ოქროს თანაფარდობა და როგორ შეიძლება მისი გამოყენება ვებ გვერდის განლაგებაზე?
რენესანსის ეპოქაშიც კი, ბევრი არქიტექტორი და მხატვარი ცდილობდა თავიანთ შემოქმედებას სრულყოფილი ფორმა და პროპორცია მიეცა. ასეთი პროპორციის მნიშვნელობების შესახებ კითხვებზე პასუხებისთვის, ისინი მიმართეს ყველა მეცნიერების დედოფალს - მათემატიკას.
უძველესი დროიდან გამოიგონეს პროპორცია, რომელსაც ჩვენი თვალი ყველაზე ბუნებრივად და ელეგანტურად აღიქვამს,რადგან ის ბუნებით ყველგანაა. ასეთი თანაფარდობის ფორმულის აღმომჩენი იყო ნიჭიერი ძველი ბერძენი არქიტექტორი, სახელად ფიდიასი. მან გამოთვალა, რომ თუ პროპორციის დიდი ნაწილი დაკავშირებულია უფრო მცირესთან, როგორც მთლიანი დაკავშირებულია უფრო დიდთან, მაშინ ასეთი პროპორცია საუკეთესოდ გამოიყურება. მაგრამ ეს ის შემთხვევაა, თუ გსურთ ობიექტის ასიმეტრიულად გაყოფა. ამ პროპორციას მოგვიანებით ეწოდა ოქროს მონაკვეთი, რომელიც დღემდე არ აფასებს მის მნიშვნელობას მსოფლიო კულტურის ისტორიისთვის.
უბრუნდა ვებ დიზაინს
ეს ძალიან მარტივია - ოქროს თანაფარდობის გამოყენებით შეგიძლიათ შექმნათ გვერდები, რომლებიც მაქსიმალურად სასიამოვნო იქნება ადამიანის თვალისთვის. ოქროს თანაფარდობის ფორმულის განმარტების მიხედვით გამოთვლა, მივიღებთ ირაციონალურ რიცხვს 1, 6180339887 …, მაგრამ მოხერხებულობისთვის, შეგვიძლია გამოვიყენოთ დამრგვალებული მნიშვნელობა 1, 62. ეს ნიშნავს, რომ ჩვენი გვერდის ბლოკები უნდა იყოს 62. % და მთლიანის 38%, არ აქვს მნიშვნელობა რა ზომის გენერირებულ წყაროს იყენებთ საიტისთვის. მაგალითის ნახვა შეგიძლიათ ამ დიაგრამაში:
გამოიყენეთ ახალი ტექნოლოგიები
საიტების განლაგების თანამედროვე ტექნოლოგიები შესაძლებელს ხდის დამგეგმავის და დიზაინერის იდეის ზუსტად გადმოცემას, ასე რომ, ახლა თქვენ გაქვთ საშუალება განახორციელოთ უფრო გაბედული იდეები, ვიდრე ინტერნეტ ტექნოლოგიების გარიჟრაჟზე. თქვენ აღარ გჭირდებათ ფიქრი იმაზე, თუ რა ზომის უნდა იყოს საიტი. ისეთი საკითხების მოსვლასთან ერთად, როგორიცაა ბლოკის ადაპტაციური განლაგება, შინაარსისა და შრიფტების დინამიური დატვირთვა, ვებსაიტის განვითარება ბევრად უფრო სასიამოვნო გახდა. ყოველივე ამის შემდეგ, ეს ტექნოლოგიები არისნაკლები შეზღუდვები, თუმცა ისინი ჯერ კიდევ არსებობს. მაგრამ, როგორც მოგეხსენებათ, საზღვრების გარეშე ხელოვნება არ იქნებოდა. ჩვენ გირჩევთ გამოიყენოთ ერთი ნამდვილად კრეატიული დიზაინის მიდგომა - ოქროს თანაფარდობა. მისი საშუალებით თქვენ შეგიძლიათ ეფექტურად და ლამაზად შეავსოთ სამუშაო სივრცე, მიუხედავად იმისა, თუ რომელი საიტის ზომა დააყენეთ თქვენს შაბლონებში.
როგორ გავზარდოთ საიტის სამუშაო სივრცე
არის კარგი შანსი, რომ არ გექნებათ საკმარისი ადგილი, რომ მოათავსოთ ინტერფეისის ყველა ელემენტი მცირე განლაგებაში. ამ შემთხვევაში, თქვენ მოგიწევთ დაიწყოთ კრეატიულად ან უფრო შემოქმედებითად ფიქრი, ვიდრე აქამდე აკეთებდით.
საიტზე სივრცის მაქსიმალური გათავისუფლება ამომხტარ მენიუში ნავიგაციის დამალვით. ლოგიკურია ამ მიდგომის გამოყენება არა მხოლოდ მობილურ მოწყობილობებზე, არამედ დესკტოპზეც. ბოლოს და ბოლოს, მომხმარებელს არ სჭირდება მუდმივად ეძებოს რა სათაურებია თქვენს საიტზე - ის მოვიდა შინაარსისთვის. და მომხმარებლის სურვილები უნდა იყოს დაცული.
მენიუს დამალვის კარგი ხერხის მაგალითია შემდეგი განლაგება (ფოტო ქვემოთ).
წითელი ზონის ზედა კუთხეში შეგიძლიათ იხილოთ ჯვარი, რომელზეც დაწკაპუნებით მენიუ დაიმალება პატარა ხატულაზე, რაც მომხმარებელს მარტო დატოვებს ვებსაიტის შინაარსთან.
თუმცა, ეს არჩევითია, შეგიძლიათ დატოვოთ ნავიგაცია, რომელიც ყოველთვის იქნება თვალსაჩინო. მაგრამ თქვენ შეგიძლიათ გახადოთ ის ლამაზი დიზაინის ელემენტად და არა მხოლოდ საიტის პოპულარული ბმულების სიაში. გამოიყენეთ ინტუიციური ხატები ტექსტური ბმულების გარდა ან მათ ნაცვლად. იგივეასაშუალებას მისცემს თქვენს საიტს უფრო ეფექტურად გამოიყენოს ეკრანის სივრცე მომხმარებლის მოწყობილობაზე.
საუკეთესო ვებსაიტი საპასუხოა
თუ არ იცით რომელი განლაგება აირჩიოთ საიტისთვის, მაშინ ყველაფერი მარტივია თქვენთვის. იმისათვის, რომ დაზოგოთ განვითარების ხარჯები და ამავდროულად არ დაკარგოთ თქვენი აუდიტორია ზოგიერთი მოწყობილობის ცუდი განლაგების გამო, გამოიყენეთ საპასუხო დიზაინი.
საპასუხო დიზაინი არის დიზაინი, რომელიც ერთნაირად კარგად გამოიყურება სხვადასხვა მოწყობილობებზე. ეს მიდგომა საშუალებას მისცემს თქვენს საიტს იყოს გასაგები და მოსახერხებელი თუნდაც ლეპტოპზე, თუნდაც პლანშეტზე, თუნდაც სმარტფონზე. ეს ეფექტი მიიღწევა ეკრანის სამუშაო ფართობის სიგანის ავტომატურად შეცვლით. თქვენი საიტისთვის საპასუხო სტილის ფურცლების გამოყენებით, თქვენ იღებთ საუკეთესო გადაწყვეტილებას.
რა განსხვავებაა საპასუხო დიზაინსა და ვებსაიტის ვერსიებს შორის
საპასუხო დიზაინი განსხვავდება საიტის მობილური ვერსიისგან იმით, რომ ამ უკანასკნელ შემთხვევაში მომხმარებელი იღებს html კოდს, რომელიც განსხვავდება დესკტოპისგან. ეს არის მინუსი სერვერის მუშაობის ოპტიმიზაციის, ასევე საძიებო სისტემის ოპტიმიზაციის თვალსაზრისით. გარდა ამისა, უფრო რთული ხდება სტატისტიკის გამოთვლა საიტის სხვადასხვა ვერსიისთვის. ადაპტირებულ მიდგომას არ აქვს ეს ნაკლოვანებები.
პასუხისმგებლობა სხვადასხვა მოწყობილობებისთვის მიიღწევა განლაგების მეშვეობით მითითებული სიგანის პროცენტით ან ბლოკების ხელმისაწვდომ სივრცეში გადატანით (სმარტფონის ვერტიკალურ სიბრტყეში ნაცვლადჰორიზონტალურად დესკტოპზე), ან ინდივიდუალური განლაგების შექმნა სხვადასხვა ეკრანისთვის.
შეიტყვეთ მეტი საპასუხო დიზაინისა და განვითარების შესახებ ჩვენს გაკვეთილებში.
