ადაპტირებული და საპასუხო ვებ დიზაინი

ავტორისგან: საპასუხო ვებსაიტის დიზაინი არის დიზაინის სრულიად ახალი მიდგომა, რომელიც სულ უფრო მეტ ყურადღებას იპყრობს, მაგრამ იმის გათვალისწინებით, თუ რამდენად განსხვავდება იგი განვითარების ტრადიციული მეთოდებისგან, თავიდან შეიძლება აკრძალულად ჩანდეს ახალი ვებ დიზაინერებისა და დეველოპერებისთვის. ამ სტატიაში მე ვაპირებ რამდენიმე ყველაზე მნიშვნელოვან პუნქტს, რომელიც დაკავშირებულია საპასუხო ვებ დიზაინის შემუშავებასთან და დანერგვასთან და ცოტათი გაგიადვილებთ ცხოვრებას, მეგობრებო.

ვებსაიტის შექმნის კლასიკური მიდგომა ასე გამოიყურება: განვითარების ბლოკი, ვებ დიზაინის ბლოკი, განლაგების ბლოკი და ა.შ. თუმცა, ბოლო რამდენიმე წლის განმავლობაში, ყველაფერი მკვეთრად შეიცვალა: ტერმინი „ვებ დიზაინი“ თანდათანობით ხდება. ქრებოდა, ხოლო „ადაპტური დიზაინი“ მზაკვრულად აძლიერებს თავის პოზიციას, თანდათან ცვლის სპეციალისტების ცნობიერებაში.

ზოგადად, ვებ დიზაინი ასე ცალსახად არ უნდა იყოს აღქმული და ადაპტური დიზაინის სწრაფმა განვითარებამ, რომელიც თითქმის ინდუსტრიულ სტანდარტად ითვლება, მოჰყვა სხვადასხვა ხელსაწყოებისა და პლატფორმების მთელ კარუსელს.

ადაპტაციის კონცეფცია

"რა არის საპასუხო დიზაინი და რას ერგება იგი?" – შეიძლება იკითხოს უცოდინარი. მე გიპასუხებთ: გამოყენებული მოწყობილობის ტიპზე. საპასუხო დიზაინი უზრუნველყოფს ვებ გვერდების კარგ ყურებას ინტერნეტთან დაკავშირებულ სხვადასხვა გაჯეტებზე.

იგივე ვებგვერდი შესანიშნავად უნდა გამოიყურებოდეს ლეპტოპებზე, სმარტფონებზე, პლანშეტებზე და ა.შ., მიუხედავად გამოყენებული ეკრანის ფორმატისა და გარჩევადობისა. ამავდროულად, მომხმარებლებისთვის თანაბრად მოსახერხებელი უნდა იყოს ვებ გვერდების ნახვა ყველა ფორმატისთვის, მაგალითად, ცალკეული ბლოკების გაფართოების საჭიროების გარეშე, რათა არ გამოტოვოთ სასურველი ღილაკი.

გამომდინარე იქიდან, რომ თითოეული ადაპტური პროექტი ინდივიდუალური და განმეორებითია, საკმაოდ რთულია მისი ყველა პროცესის ანალიზი, რათა უზრუნველყოს გადაწყვეტილებები ყველა სიტუაციისთვის და გააუმჯობესოს მუშაობის ეფექტურობა. თუმცა, არსებობს ზოგადი წარმატებული სტრატეგიები და ტექნიკა საპასუხო ვებსაიტის დიზაინის განხორციელების, გაუმჯობესებისა და შესაქმნელად, რომელიც შეიძლება გამოყენებულ იქნას თითქმის ნებისმიერ სიტუაციაში.

მობილური პირველი სტრატეგია

განვითარების ეს სტრატეგია ჯერ კიდევ 2009 წელს შემოგვთავაზა ლუკ ვრობლევსკიმ, წიგნებისა და სტატიების ავტორმა ვებ დიზაინის შესახებ, სოციალური ქსელის Bagcheck-ის ხელმძღვანელმა, რომელიც Twitter Inc.-მა შეიძინა მისი შექმნიდან სულ რაღაც 9 თვის შემდეგ.

ლუკ ვრობლევსკის მიდგომას განვითარებისადმი ეწოდება "მობილური პირველი" სამი მიზეზის გამო:

მობილური გარემო საშუალებას გაძლევთ ფოკუსირება მოახდინოთ და თავი დააღწიოთ არეულობას, რომელიც წარმოიქმნება ეკრანზე დიდი სივრცის „გაჭედვის“ გამო;

მობილურის ბაზარი განვითარდება მკვეთრი ტემპით;

მობილური გარემო ასოცირდება მრავალ შესაძლებლობასთან (კამერა, მრავალ შეხების ჟესტები, GPS, აქსელერომეტრი, გეოლოკაცია).

მას შემდეგ ვებ დიზაინი სტაბილურად გადადის ამ მიდგომისკენ. ბევრი ვებ დიზაინერი და ვებ დეველოპერი ჯერ ფიქრობს იმაზე, თუ როგორ უნდა გააკეთოს საპასუხო დიზაინი საიტის მობილური ვერსიისთვის, შემდეგ კი ისინი ერთვებიან დესკტოპის განვითარებაში.

„მობილური პირველი“ სტრატეგია იწყება მობილური ვერსიის სტრუქტურისა და შინაარსის შექმნით, რომელიც მუშაობს დაბალი სიჩქარით ინტერნეტის გარემოში და მოძრაობს უფრო დიდი წყვეტებისკენ უფრო სწრაფი კავშირებით, ხოლო Lite ვერსიების გაუმჯობესება და ოპტიმიზაცია.

ვებ განვითარების თანამედროვე ტენდენციები და მიდგომები

ისწავლეთ სწრაფი ზრდის ალგორითმი ნულიდან ვებსაიტის მშენებლობაში

ეს უზრუნველყოფს ყველა ტიპის მოწყობილობის ინოვაციურ და ეფექტურ მუშაობას. ვებსაიტების შემქმნელები ყურადღებას ამახვილებენ მომხმარებლების საჭიროებებზე, ქმნიან ოპტიმიზებულ და მაღალსიჩქარიან გვერდებს და ყურადღებას აქცევენ მნიშვნელოვან შინაარსს. სხვათა შორის, Google-იც კი იყენებს „მობილური პირველი“ მიდგომას.

კონტენტის სტრატეგია „შინაარსის გატანა“

საპასუხო დიზაინის შექმნის მიზანია უზრუნველყოს საუკეთესო გამოყენებადობა ნებისმიერ კონტექსტში. ეს არის შესანიშნავი შესაძლებლობა შინაარსის გასაანალიზებლად და ადვილად მისაწვდომი და წასაკითხი გახადოთ ყველა ტიპის მოწყობილობაზე.

ბევრი, ვინც არ იყენებს მობილური პირველი სტრატეგიას, უპირატესობას ანიჭებს Content First სტრატეგიას. ეს, რა თქმა უნდა, სწორია, თუმცა, არ უნდა მიიღოთ ეს მოწოდება სიტყვასიტყვით და იფიქროთ, რომ არ უნდა დაიწყოთ დიზაინის შემუშავება, სანამ მთელი შინაარსი არ იქნება მზად.

კონტენტი მუდმივად უნდა იქმნება და განიხილება როგორც საპასუხო ვებსაიტის დიზაინის შექმნის ეტაპზე, ასევე მისი დასრულების შემდეგ! როგორც ცნობილმა დიზაინერმა სენიდ ბოულსმა თქვა, "დიზაინი და შინაარსი უნდა იყოს ხელიხელჩაკიდებული". ისინი ერთმანეთს უნდა ავსებდნენ.

„პირველ რიგში კონტენტის სტრუქტურა“ სტრატეგია სრულიად განსხვავებული საკითხია. უპირველეს ყოვლისა, მკაფიოდ უნდა გესმოდეთ საიტის მისია, რისი თქმას ცდილობს იგი მსოფლიოს. და მხოლოდ ამის შემდეგ ყურადღებით გაითვალისწინეთ მისი შინაარსის სტრუქტურა, შექმნის მეთოდები, ტიპები და თითოეული ელემენტის მიზანი, მაშინ როდესაც მომხმარებელი უნდა იყოს წინა პლანზე.

თქვენ უნდა გქონდეთ შემუშავებული სტრატეგია, რომელიც უზრუნველყოფს, რომ თითოეულ მომხმარებელს მიაწოდოთ საჭირო შინაარსი თქვენს რესურსზე მოგზაურობის ყველა ეტაპზე. საიტის სტრუქტურა უნდა ეფუძნებოდეს თქვენი სამიზნე აუდიტორიის ქცევისა და საჭიროებების კვლევას.

თუ თქვენ კარგად ააწყობთ თქვენს შინაარსს ვებსაიტის განვითარების საწყის ეტაპზე, შეგიძლიათ მარტივად გადაიტანოთ იგი სხვა პლატფორმებზე და მოწყობილობებზე მომავალში. რა თქმა უნდა, არ იქნება ზიანი, რომ გქონდეთ საპასუხო დიზაინის მაგალითი, როგორც მითითება თქვენი მითითებისთვის.

დაუთმეთ დრო ესკიზს და პროტოტიპს

იმის გადაწყვეტა, თუ რა რეზოლუციებზე უნდა გააკეთოთ საპასუხო დიზაინი, უნდა დაიწყოს ორგანიზებული განლაგების შექმნით - ესკიზები, რომელიც მომავალში მასშტაბირება ადვილი იქნება.

მოწყობილობების მრავალფეროვნება მათი შესაძლებლობებით, გარჩევადობითა და ეკრანის ზომებით ნიშნავს განლაგების დიდ რაოდენობას. ესკიზის შექმნა საფუძველს ჩაუყრის პროექტის მომავალ პროტოტიპს. მისი დახმარებით თქვენ შეგიძლიათ წარმოადგინოთ სხვადასხვა იდეები განხილვისთვის, გააკეთოთ უხეში ესკიზები, რომლებიც საფუძვლად დაედება საიტის ჩარჩოს.

მას შემდეგ რაც ესკიზი მზად იქნება, შეგიძლიათ გადახვიდეთ საიტის სამუშაო ვერსიის ან HTML შაბლონის შექმნაზე. ამ პროცესს ეწოდება პროტოტიპირება და ის მოიცავს მინიმალურ ვიზუალურ დიზაინს ურთიერთქმედებისა და ფუნქციონირების გასაუმჯობესებლად.

ეს სტრატეგია დაგეხმარებათ გადახედოთ თქვენს მთელ მიდგომას საპასუხო დიზაინის შესაქმნელად. „მობილური საიტების“ და „ვებ საიტების“ შემუშავების ნაცვლად, თქვენ ახლა ყურადღებას გაამახვილებთ მოქნილი სისტემების განვითარებაზე წესების ნაკრებით, რომლებიც განსაზღვრავს კონტენტის მიწოდებასა და მიწოდებას კონტექსტის მიხედვით.

ვიმედოვნებ, რომ ეს სტატია სასარგებლო იყო როგორც გამოცდილი, ასევე დამწყები ვებ დიზაინერებისთვის.

და ბოლოს, ტრადიციული გამყოფი სიტყვები: გახადეთ საიტი სასარგებლო, მოსახერხებელი და ნაცნობი, განურჩევლად მოწყობილობისა, რომელზედაც მას ნახულობენ. კიდევ შევხვდებით, მეგობრებო!

P.S.: უკვე გამოიწერეთ ჩვენი ბლოგის განახლებები?

ვებ განვითარების თანამედროვე ტენდენციები და მიდგომები

ისწავლეთ სწრაფი ზრდის ალგორითმი ნულიდან ვებსაიტის მშენებლობაში

ადაპტური განლაგება ცვლის გვერდის დიზაინს მომხმარებლის ქცევის, პლატფორმის, ეკრანის ზომისა და მოწყობილობის ორიენტაციის მიხედვით და თანამედროვე ვებ განვითარების განუყოფელი ნაწილია. ეს საშუალებას გაძლევთ მნიშვნელოვნად დაზოგოთ და არ დაგჭირდეთ ახალი დიზაინის დახატვა თითოეული რეზოლუციისთვის, მაგრამ შეცვალოთ ცალკეული ელემენტების ზომა და ადგილმდებარეობა.

ეს სტატია განიხილავს საიტის ძირითად ელემენტებს და მათ ადაპტირებას.

ეკრანის გარჩევადობის რეგულირება

პრინციპში, შეგიძლიათ მოწყობილობები დაყოთ სხვადასხვა კატეგორიად და დააპროექტოთ თითოეული მათგანი ცალ-ცალკე, მაგრამ ამას ძალიან დიდი დრო დასჭირდება და ვინ იცის, რა სტანდარტები იქნება ხუთ წელიწადში? უფრო მეტიც, სტატისტიკის მიხედვით, ჩვენ გვაქვს სხვადასხვა რეზოლუციების მთელი რიგი:

აშკარა ხდება, რომ ჩვენ ვერ გავაგრძელებთ დიზაინის თითოეულ მოწყობილობას ცალკე. მაგრამ რა უნდა გააკეთოს მაშინ?

ნაწილობრივი გადაწყვეტა: გახადეთ ყველაფერი მოქნილი

რა თქმა უნდა, ეს არ არის სრულყოფილი მეთოდი, მაგრამ ის აღმოფხვრის პრობლემებს.

ეთან მარკოტმა შექმნა მარტივი შაბლონი, რომელიც აჩვენებს საპასუხო განლაგების გამოყენებას:

ერთი შეხედვით შეიძლება ჩანდეს, რომ ყველაფერი მარტივია, მაგრამ ეს ასე არ არის. შეხედეთ ლოგოს:

თუ მთლიან სურათს შეამცირებთ, წარწერები გაუგებარი გახდება. ამიტომ, ლოგოს შესანახად, სურათი იყოფა ორ ნაწილად: პირველი ნაწილი (ილუსტრაცია) გამოიყენება ფონად, მეორე (ლოგო) ზომას პროპორციულად იცვლის.

h1 ელემენტი შეიცავს სურათს, როგორც ფონი, ხოლო სურათი გასწორებულია კონტეინერის ფონზე (სათაური).

მოქნილი სურათები

სურათებთან მუშაობა ერთ-ერთი ყველაზე მნიშვნელოვანი პრობლემაა საპასუხო დიზაინთან მუშაობისას. სურათების ზომის შეცვლის მრავალი გზა არსებობს და მათი უმეტესობის განხორციელება საკმაოდ მარტივია. ერთი გამოსავალი არის CSS-ში მაქსიმალური სიგანის გამოყენება:

Img (მაქს-სიგანე: 100%;)

გამოსახულების მაქსიმალური სიგანე არის ეკრანის ან ბრაუზერის ფანჯრის სიგანის 100%, ამიტომ რაც უფრო მცირეა სიგანე, მით უფრო მცირეა გამოსახულება. გაითვალისწინეთ, რომ IE-ში მაქსიმალური სიგანე არ არის მხარდაჭერილი, ამიტომ გამოიყენეთ სიგანე: 100%.

წარმოდგენილი მეთოდი კარგი ვარიანტია ადაპტაციური სურათების შესაქმნელად, მაგრამ მხოლოდ ზომის შეცვლით, სურათის წონას იგივე დავტოვებთ, რაც გაზრდის მობილურ მოწყობილობებზე ჩატვირთვის დროს.

სხვა გზა: საპასუხო სურათები

Filament Group-ის მიერ დანერგილი ტექნიკა, არა მხოლოდ ცვლის სურათების ზომას, არამედ შეკუმშავს სურათების გარჩევადობას მცირე ეკრანებზე, რათა დააჩქაროს დატვირთვა.

ეს ტექნიკა მოითხოვს რამდენიმე ფაილს, რომელიც ხელმისაწვდომია Github-ზე. ჯერ ვიღებთ JavaScript ფაილს ( rwd-images.js), ფაილი .htaccessდა rwd.gif(სურათის ფაილი). შემდეგ ჩვენ ვიყენებთ HTML-ს დიდი და პატარა რეზოლუციების დასაკავშირებლად: ჯერ პატარა სურათს პრეფიქსით .რ(იმისათვის, რომ აჩვენოთ, რომ სურათი უნდა იყოს რეაგირებადი), შემდეგ დააკავშირეთ დიდი სურათი data-fullsrc-ის გამოყენებით:

ნებისმიერი ეკრანისთვის, რომელიც აღემატება 480 პიქსელს, ჩაიტვირთება უფრო მაღალი გარჩევადობის სურათი ( largeRes.jpg) და პატარა ეკრანებზე ჩაიტვირთება ( smallRes.jpg).

iPhone-სა და iPod Touch-ს აქვს ფუნქცია: დიდი ეკრანებისთვის შექმნილი დიზაინი უბრალოდ იკუმშება დაბალი გარჩევადობის ბრაუზერში გადახვევის ან დამატებითი მობილური განლაგების გარეშე. თუმცა, სურათები და ტექსტი არ იქნება ხილული:

ამ პრობლემის გადასაჭრელად გამოიყენეთ მეტა ტეგი:

თუ საწყისი მასშტაბი უდრის ერთს, გამოსახულების სიგანე ხდება ეკრანის სიგანის ტოლი.

გვერდის განლაგების კონფიგურირებადი სტრუქტურა

გვერდის ზომის მნიშვნელოვანი ცვლილებებისთვის, შეიძლება დაგჭირდეთ ელემენტების საერთო განლაგების შეცვლა. ეს შეიძლება მოხერხებულად გაკეთდეს ცალკე სტილის ფაილის მეშვეობით ან, უფრო ეფექტურად, CSS მედია მოთხოვნის საშუალებით. არანაირი პრობლემა არ უნდა იყოს, რადგან სტილის უმეტესობა იგივე დარჩება და მხოლოდ რამდენიმე შეიცვლება.

მაგალითად, თქვენ გაქვთ ძირითადი სტილის ფაილი, რომელიც განსაზღვრავს #wrapper , #content , #sidebar , #nav ფერებთან, ფონთან და შრიფტებთან ერთად. თუ თქვენი სამაგისტრო სტილები თქვენს განლაგებას ძალიან ვიწრო, მოკლე, განიერი ან მაღალი გახდის, შეგიძლიათ ამის იდენტიფიცირება და ახალი სტილის ჩართვა.

style.css (მთავარი):

/* ძირითადი სტილები, რომლებიც მემკვიდრეობით გადაეცემა ბავშვის სტილის ფურცელს */ html,body(ფონი... შრიფტი... ფერი... ) h1,h2,h3() p, blockquote, pre, კოდი, ol, ul () /* სტრუქტურული ელემენტები */ #wrapper( სიგანე: 80%; ზღვარი: 0 ავტო; ფონი: #fff; padding: 20px; ) #content( სიგანე: 54%; float: მარცხენა; ზღვარი-მარჯვნივ: 3%; ) # sidebar-left( სიგანე: 20%; float: მარცხნივ; ზღვარი-მარჯვნივ: 3%; ) #sidebar-right ( სიგანე: 20%; float: მარცხნივ; )

mobile.css (ბავშვი):

#wrapper( სიგანე: 90%; ) #content( სიგანე: 100%; ) #sidebar-left( სიგანე: 100%; ნათელი: ორივე; /* დამატებითი სტილები ახალი დიზაინისთვის */ სასაზღვრო ზედა ნაწილი: 1px მყარი #cccc margin-top: 20px) #sidebar-right( width: 100%; clear: ორივე; /* დამატებითი სტილი ჩვენი ახალი განლაგებისთვის */ border-top: 1px მყარი #ccc; )

ფართო ეკრანზე, მარცხენა და მარჯვენა გვერდითი ზოლები კარგად ერგება გვერდზე. უფრო ვიწრო ეკრანებზე, ეს ბლოკები განლაგებულია ერთმანეთის ქვემოთ უფრო მეტი მოხერხებულობისთვის.

CSS3 მედია მოთხოვნები

მოდით შევხედოთ, თუ როგორ შეგიძლიათ გამოიყენოთ CSS3 მედია მოთხოვნები საპასუხო დიზაინის შესაქმნელად. min-width განსაზღვრავს ბრაუზერის ფანჯრის ან ეკრანის მინიმალურ სიგანეს, რომელზეც გამოყენებული იქნება გარკვეული სტილი. თუ რომელიმე მნიშვნელობა არის მინ-სიგანის ქვემოთ, სტილები იგნორირებული იქნება. max-width აკეთებს საპირისპიროს.

@media ეკრანი და (წთ. სიგანე: 600 პიქსელი) ( .hereIsMyClass ( სიგანე: 30%; float: მარჯვნივ; ) )

მედია მოთხოვნა იმუშავებს მხოლოდ მაშინ, როდესაც მინ-სიგანე მეტია ან ტოლია 600 პიქსელზე.

@media ეკრანი და (მაქს. სიგანე: 600 პიქსელი) ( .aClassforSmallScreens (გასუფთავება: ორივე; შრიფტის ზომა: 1.3em; ) )

ამ შემთხვევაში კლასი ( კლასიპატარა ეკრანებისთვის) იმუშავებს, როდესაც ეკრანის სიგანე ნაკლებია ან ტოლია 600 პიქსელზე.

მიუხედავად იმისა, რომ მინ-სიგანე და მაქსიმალური სიგანე შეიძლება გავრცელდეს როგორც ეკრანის სიგანეზე, ასევე ბრაუზერის ფანჯრის სიგანეზე, ჩვენ შეიძლება დაგჭირდეთ მხოლოდ მოწყობილობის სიგანეზე მუშაობა. მაგალითად, პატარა ფანჯარაში გახსნილი ბრაუზერების იგნორირება. ამისათვის შეგიძლიათ გამოიყენოთ min-device-width და max-device-width:

@media ეკრანი და (მოწყობილობის მაქსიმალური სიგანე: 480 პიქსელი) ( .classForiPhoneDisplay ( შრიფტის ზომა: 1.2 ემ. : 2px მყარი #ccc ) )

განსაკუთრებით iPad-ისთვის, მედია შეკითხვებს აქვს საკუთრება ორიენტაცია, რომლის მნიშვნელობებიც შეიძლება იყოს პეიზაჟი(ჰორიზონტალური), ან პორტრეტი(ვერტიკალური):

@media ეკრანი და (ორიენტაცია: ლანდშაფტი) ( .iPadLandscape ( სიგანე: 30%; float: მარჯვნივ; ) ) @media ეკრანი და (ორიენტაცია: პორტრეტი) ( .iPadPortrait (გასუფთავებული: ორივე; ) )

თქვენ ასევე შეგიძლიათ დააკავშიროთ მედია მოთხოვნის მნიშვნელობები:

@media ეკრანი და (მინ. სიგანე: 800 პიქსელი) და (მაქს. სიგანე: 1200 პიქსელი) ( .classForaMediumScreen (ფონი: #cc0000; სიგანე: 30%; float: მარჯვნივ; ) )

ეს კოდი იმუშავებს მხოლოდ 800-დან 1200 პიქსელის სიგანის ეკრანებზე ან ბრაუზერის ფანჯრებზე.

თქვენ შეგიძლიათ ჩატვირთოთ კონკრეტული ფურცელი სტილებით სხვადასხვა მედია მოთხოვნის მნიშვნელობებისთვის, როგორიცაა:

JavaScript

თუ თქვენი ბრაუზერი არ უჭერს მხარს CSS3 მედია მოთხოვნებს, მაშინ სტილის შეცვლა შეიძლება გაკეთდეს jQuery-ის გამოყენებით:

$(დოკუმენტი).ready(function())($(window).bind("ზომის შეცვლა", resizeWindow); ფუნქცია resizeWindow(e)( var newWindowWidth = $(window).width(); // თუ სიგანე არის 600 px-ზე ნაკლები, მობილური სტილის ცხრილი გამოიყენება, თუ (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // თუ სიგანე 600 პიქსელზე მეტია, დესკტოპის სტილის ცხრილი გამოიყენება $("ბმული").attr((href: "style.css")); ) ) ));

არჩევითი შინაარსის ჩვენება

ელემენტების შეკუმშვისა და გადაკეთების შესაძლებლობა მცირე ეკრანებზე მორგებისთვის დიდია. მაგრამ ეს არ არის საუკეთესო ვარიანტი. მობილურ მოწყობილობებს, როგორც წესი, აქვთ ცვლილებების უფრო ფართო ნაკრები: გამარტივებული ნავიგაცია, უფრო ფოკუსირებული კონტენტი, სიები ან რიგები სვეტების ნაცვლად.

აქ არის ჩვენი მარკირება:

მარცხენა გვერდითი ზოლის კონტენტი | მარჯვენა გვერდითი ზოლის შინაარსი

მთავარი კონტენტი მარცხენა გვერდითი ზოლი მარჯვენა გვერდითი პანელი

style.css (მთავარი):

#content( სიგანე: 54%; float: მარცხნივ; margin-მარჯვნივ: 3%; ) #sidebar-left( სიგანე: 20%; float: მარცხენა; margin-right: 3%; ) #sidebar-right( სიგანე: 20 % float: მარცხნივ) .sidebar-nav(display: none;)

mobile.css (გამარტივებული):

#content( სიგანე: 100%; ) #sidebar-left( ჩვენება: არცერთი; ) #sidebar-right( ჩვენება: არცერთი; ) .sidebar-nav( ჩვენება: inline; )

თუ ეკრანის ზომა შემცირებულია, შეგიძლიათ, მაგალითად, გამოიყენოთ სკრიპტი ან სტილის ალტერნატიული ფაილი, რათა გაზარდოთ თეთრი სივრცე ან შეცვალოთ ნავიგაცია მეტი მოხერხებულობისთვის. ამრიგად, ელემენტების დამალვისა და ჩვენების, სურათების ზომის შეცვლის, ელემენტების და მრავალი სხვა შესაძლებლობის მქონე, შეგიძლიათ დიზაინის ადაპტირება ნებისმიერ მოწყობილობასა და ეკრანზე.

მივესალმოთ, შემთხვევით სტუმრებს და ბლოგის საიტის რეგულარულ მკითხველებს!

ამ საიტის არსებობის მანძილზე რამდენჯერმე შევცვალე შაბლონი და შევქმენი კიდეც ნულიდან.
ახალი შაბლონის არჩევისას ერთ-ერთი მთავარი ამოცანაა საიტის ადაპტირებული განლაგება ეკრანის ყველა რეზოლუციისთვის.

სტატიის მოკლე მონახაზი:

წინა სტატიაში მე უკვე დავწერე იმის შესახებ, თუ რატომ არის საჭირო. მაგრამ როგორ მივაღწიოთ ამ ადაპტირებას?

ამის გაკეთების სხვადასხვა გზა არსებობს. ზოგი იყენებს ჯავასკრიპტს, ზოგი სხვას. მაგრამ მე მჯერა, რომ ყველაზე მარტივი და სწორი გზა არის პასუხისმგებელი CSS-ის გამოყენებით.

როგორ შევქმნათ ვებსაიტის საპასუხო განლაგება

ჯერ ერთი,თუ გადაწყვეტთ შექმნათ საპასუხო ვებსაიტის დიზაინი, ჩადეთ შემდეგი კოდი ტეგებს შორის:

რა სულელი ვიყავი, რომ ეს მაშინვე არ გავაკეთე, როცა ვებსაიტის ადაპტირებადი განლაგების შექმნას ვცდილობდი!!!
მობილური ბრაუზერების პრობლემა არის მათი ვებგვერდის განლაგების მასშტაბირება, თუნდაც ადაპტირებადი.

წარმოიდგინეთ, მე ვხატავ დიზაინს, შემდეგ ვწერ ყველა საჭირო სტილს და მოთხოვნას, ვამოწმებ საიტის ადაპტირებას სხვადასხვა რეზოლუციებზე. როგორც ჩანს, ყველაფერი კარგადაა! მაგრამ როცა ჩემს ბლოგს ვხსნი ჩემს სმარტფონზე, ვხედავ, რომ საიტი უბრალოდ შემცირდა. ის არ მოერგებოდა მობილურ მოწყობილობას, მაგრამ უბრალოდ შეამცირა შრიფტის ზომა, სურათები და ა.შ.

როგორ ასე? დავიწყე ყველა სტილის ორმაგი შემოწმება, რათა გამეგო, სწორად დავწერე თუ არა კლასები და საბოლოოდ მივედი იქამდე, რომ შევამოწმე ბრაუზერის ფანჯრის სიგანე px-ში Javascript-ის გამოყენებით. შოკში ვიყავი. ლეპტოპზე შემოწმებისას მივიღე შედეგი 1024 პიქსელი და დაახლოებით იგივე შედეგი მივიღე სმარტფონზე საიტის გახსნისას!

მაგრამ ეს არ შეიძლება იყოს!

გამოდის, რომ თუ არ დაწერთ კოდს, რომელიც ზემოთ აღვნიშნე, მობილური ბრაუზერი ვერ ხვდება, რომ საიტი ადაპტირებადია და უბრალოდ ცდილობს საიტის გვერდის შემცირებას ისე, რომ მოთავსდეს მობილური ტელეფონის პატარა ეკრანზე.

ჩემი სისულელის და არაკომპეტენტურობის გამო ბევრი დრო დავკარგე. მაგრამ ახლა სამუდამოდ მახსოვს))).

ადაპტური განლაგება CSS მედია მოთხოვნები

იმისათვის, რომ ის საპასუხო იყოს CSS-ის გამოყენებით, თქვენ უნდა გამოიყენოთ მედია მოთხოვნები.

როგორ არის ეს? დიახ, ძალიან მარტივი. CSS ფაილში თქვენ უნდა დაწეროთ მოთხოვნები, როგორიცაა:

@media ეკრანი და (მინ-სიგანე: 1440 პიქსელი) და (მაქს. სიგანე: 1599 პიქსელი)( )

ეს კოდი ნიშნავს, რომ „( )“-ს შორის ჩასმული სტილები იმუშავებს ეკრანებისთვის, რომელთა სიგანე მინიმალურია 1440 პიქსელი და მაქსიმუმ 1599 პიქსელი.

ანუ საიტის ელემენტების ის სტილები, რომლებიც უნდა იყოს ადაპტირებული ეკრანის გარჩევადობიდან გამომდინარე, ცალკე უნდა დაიწეროს თითოეული შესაძლო ეკრანის სიგანეზე.

ეკრანის ყველაზე მნიშვნელოვანი გარჩევადობა ადაპტური განლაგებისთვის

• 320 px - მობილური მოწყობილობები (პორტრეტის ორიენტაცია);
• 480 px - მობილური მოწყობილობები (ლანდშაფტის ორიენტაცია);
• 600 px - პატარა ტაბლეტები;
• 768 px - ტაბლეტები (პორტრეტის ორიენტაცია);
• 1024 px - ტაბლეტები (ლანდშაფტის ორიენტაცია)/Netbooks;
• 1280 px და მეტი - PC.

სწორედ ამ რეზოლუციებზე უნდა გაამახვილოთ ყურადღება და განსაკუთრებული ყურადღება მიაქციოთ ადაპტური განლაგების შექმნისას. ეს არის ეკრანის გარჩევადობის ყველაზე გავრცელებული ტიპები.

bootstrap საპასუხო დიზაინი

ძალიან მოსახერხებელია bootstrap-ის გამოყენება ადაპტური განლაგების შესაქმნელად. მოხერხებულობა ის არის, რომ ყველა სტილი ბლოკების, ღილაკების, ცხრილების და ა.შ. უკვე რეგისტრირებულია bootstpap-ში. თქვენ უბრალოდ უნდა გაარკვიოთ, რომელი კლასი რომელ ელემენტს მივანიჭოთ.

დასაწყებად, ჩამოტვირთეთ bootstrap-ის უახლესი ვერსია და დააკავშირეთ იგი თქვენს საიტზე. გთხოვთ გაითვალისწინოთ, რომ სტილებისა და სკრიპტების WordPress-თან დაკავშირებას თავისი მახასიათებლები აქვს.

Bootstrap-ის განლაგება განსხვავებულია იმით, რომ ბლოკის ან ეკრანის სიგანე დაყოფილია 12 თანაბარ ნაწილად. და ბლოკისთვის გარკვეული კლასის მინიჭებით, შეგიძლიათ დააყენოთ ბლოკის სიგანე ნაწილების საჭირო რაოდენობის ტოლი.

მაგალითად, ეს დიზაინი საშუალებას მოგცემთ გამოყოთ ერთი ფართო ბლოკი შინაარსისთვის 8 ნაწილის სიგანით და ერთი ვიწრო ბლოკი გვერდითი ზოლისთვის 4 ნაწილის სიგანით:

ბლოკების სიგანე ავტომატურად გამოითვლება ეკრანის სიგანის მიხედვით. მობილურ მოწყობილობაზე დათვალიერებისას ეს ბლოკები ერთმანეთის ქვეშ გადაინაცვლებს.

თქვენ ასევე შეგიძლიათ დაარეგულიროთ ბლოკის მანძილი კიდიდან, ისევ, ნაწილების საჭირო რაოდენობამდე. მაგალითად, ეს დიზაინი:

შეიქმნება ბლოკი 10 ნაწილის სიგანით ეკრანის 1 ნაწილის მარცხენა შეწევით.

თუ დააკვირდებით, ჩატვირთვისას მუშაობა ძალიან აჩქარებს მუშაობას. უფრო მეტიც, ეს სტილები ნამდვილად მუშაობს სწორად და საიტზე არაფერი იქნება მრუდი.

სამომავლოდ ვგეგმავ რამდენიმე გაკვეთილის გამოქვეყნებას bootsrap-თან მუშაობის შესახებ. ამიტომ, გირჩევთ, არ გამოტოვოთ ეს მომენტი.

ვებსაიტის ადაპტაციის შემოწმება

მაგრამ ჩნდება კითხვა: როგორ შევამოწმოთ ვებსაიტის ადაპტირება? ახლა თქვენ დაწერეთ მედია მოთხოვნები CSS-ში, დააკავშირეთ bootstrap და გამოიყენეთ საჭირო კლასები. როგორ შეგიძლიათ შეამოწმოთ, რომ საიტი სწორად ადაპტირდება ეკრანის ყველა რეზოლუციით?

ძალიან ზუსტი და რაც მთავარია უფასო სერვისი, რომელიც იმსახურებს პატივისცემას და მადლიერებას ვებმასტერებისა და განლაგების დიზაინერებისგან, რომლებიც ამუშავებენ ვებსაიტების ადაპტირებულ განლაგებას.

აბა, როგორ მოგწონთ სტატია? ყველაფერი გასაგებია? თუ არა, დაწერეთ კომენტარებში, ჩვენ ერთად გავარკვევთ.

დიახ, საპასუხო ვებსაიტის დიზაინის შესაქმნელად, თქვენ უნდა იმუშაოთ. მაგრამ ეს ძალისხმევა დაჯილდოვდება საძიებო სისტემების და რაც მთავარია, თქვენი საიტის ვიზიტორების მხრიდან თქვენი საიტის მიმართ ხელსაყრელი დამოკიდებულებით.

თანამედროვე ვებსაიტის ადაპტაციური დიზაინი მისი ხარისხის ერთ-ერთი მთავარი მაჩვენებელია.

საიდუმლო არ არის, რომ ინტერნეტში წვდომისთვის მობილური მოწყობილობების გამოყენების წილი მუდმივად იზრდება. ეს ტენდენცია დამახასიათებელია როგორც მთელი ინტერნეტისთვის, ასევე Runet-ისთვის.

და თუ არ გვინდა დავკარგოთ ჩვენი ვიზიტორები, მკითხველი და პოტენციური მყიდველები, მაშინ უნდა დავრწმუნდეთ, რომ თქვენი საიტი სწორად და წაკითხულად არის ნაჩვენები მობილურ მოწყობილობებზე, ტაბლეტებიდან სმარტფონებამდე.

გარდა ამისა, საძიებო სისტემები უფრო ხელსაყრელად აფასებენ მობილური მოწყობილობებისთვის ადაპტირებული საიტებს. ეს განსაკუთრებით ეხება Google-ის PS-ს, რომელიც პირდაპირ აწესებს ასეთ მოთხოვნებს საიტებზე.

რა არის საპასუხო ვებსაიტის დიზაინი

ადაპტაციური დიზაინის მნიშვნელობა არის შესაძლებლობა კომფორტულად ნახოთ და წაიკითხოთ საიტზე განთავსებული მასალები სხვადასხვა მოწყობილობებზე.

ნახვის მოხერხებულობის შეფასების ძირითადი კრიტერიუმებია:

სანახავი ტერიტორია.

შინაარსის სიგანე.

შრიფტების, სურათების, ვიდეო ფანჯრების ზომა.

აქტიური ელემენტები.

სხვა სიტყვებით რომ ვთქვათ, ტექსტი უნდა იყოს წაკითხვადი, სურათები და ვიდეო უნდა იყოს ნათლად ხილული, მენიუს ელემენტები და ბმულები უნდა იყოს ხილული, ხელმისაწვდომი და გასაგები.

როგორ გახადოთ თქვენი ვებსაიტი საპასუხო

არსებობს რამდენიმე გზა იმის უზრუნველსაყოფად, რომ თქვენი საიტი პასუხობს ეკრანის სხვადასხვა გარჩევადობის მოწყობილობებზე ყურებას. მთავარია:

• ადაპტირებული ვებსაიტის შაბლონი.
• საიტის მობილური ვერსია.
• სპეციალური აპლიკაციის დაყენება მომხმარებლის მოწყობილობაზე.

გამოცდილება გვიჩვენებს, რომ ყველაზე ოპტიმალური გამოსავალი არის ადაპტური შაბლონის შექმნა. დანარჩენი ორი მეთოდი ასევე წყვეტს ამ პრობლემას, მაგრამ შესამჩნევად ჩამორჩება პირველ მეთოდს.

საიტის მობილური ვერსიის გამოყენებისას დახარჯული შრომის, ფულისა და დროის რაოდენობა შედარებულია ადაპტაციური შაბლონის შექმნასა და დასრულებასთან.

მაგრამ ოპერაციის დროს ემატება მოქმედებები საიტის მობილური ვერსიის შესაბამისობის შესანარჩუნებლად და ინფორმაციის მთავარ საიტთან სინქრონიზაციისთვის. ხოლო SEO-ს პოპულარიზაციას ემატება დამატებითი კითხვები დუბლიკატებით და ა.შ.

მობილური ვერსიის უპირატესობა ის არის, რომ ყველა არასაჭირო ელემენტი, ეფექტი, რეკლამა, გამოწერა და ა.შ. საიტი არა მხოლოდ სწორად გამოჩნდება მობილურ მოწყობილობებზე, არამედ ჩაიტვირთება რაც შეიძლება სწრაფად. ეს არის მისი მთავარი უპირატესობა.
ასეთი ვერსიები ხელმისაწვდომია დიდი პორტალებისთვის, სოციალური ქსელებისთვის, მსხვილი კორპორატიული საიტებისთვის...

აპლიკაციის მობილურ მოწყობილობებზე დაყენება თქვენზე საერთოდ არ არის დამოკიდებული. პირველ რიგში, ის არ შეიძლება განთავსდეს ყველა მოწყობილობაზე. მეორეც, ეს მოითხოვს დამატებით ცოდნას და მოქმედებას და ყველა მომხმარებელი არ ეთანხმება დამატებით სირთულეს.

ასეთ აპლიკაციებს, როგორც წესი, აყენებენ მომხმარებლები, რომლებიც ენდობიან ავტორს და მისგან ახალ სასარგებლო ინფორმაციას ელიან. ეს გარკვეულწილად წააგავს ელ.ფოსტის გამოწერას.

შეჯამებისთვის, ჩვენ ვასკვნით: თქვენი ვებსაიტის საპასუხო დიზაინის შექმნა იქნება ყველაზე მომგებიანი გადაწყვეტა მცირე ან საშუალო ზომის ვებსაიტისთვის.

ვებსაიტის ადაპტირებული განლაგება

ადაპტური დიზაინის შესაქმნელად, თქვენ მოგიწევთ მიმართოთ ადაპტური განლაგების ტექნოლოგიას. მისი არსი შემდეგია:
გააკეთეთ შაბლონი "რეზინისფერი"

ანუ მკაცრად ნუ დაიცავთ გვერდის სიგანეს, არამედ გამოიყენეთ შედარებითი ერთეულები. ანუ, გახადეთ თქვენი შაბლონი პროპორციულად შეკუმშვადი, ანუ „რეზინი“.

ამისათვის გვერდის სიგანე დგინდება css max-width თვისებით, ნაცვლად width და ამ მნიშვნელობის მიმართ სხვა ელემენტების სიგანე არჩეულია პროცენტულად (%).

განსაზღვრეთ ეკრანის სიგანე "საკონტროლო წერტილები"

ეკრანის სიგანის საკონტროლო წერტილების (CP) განსაზღვრა აუცილებელია შემდგომი მოქმედებების დაგეგმვისთვის.

მაგალითად.
ეკრანის მაქსიმალური სიგანე 1000 პიქსელია. ტაბლეტის ეკრანის სიგანე 800 პიქსელია, სმარტფონი 420 პიქსელია.

ეს საკონტროლო წერტილები (CP) შეიძლება იყოს განსხვავებული სხვადასხვა ტიპის საიტებისთვის. ზოგჯერ ერთიც საკმარისია, მაგალითად 600 პიქსელი და უფრო მცირე გარჩევადობით ნახვის ხარისხი უზრუნველყოფილია შაბლონის „რეზინის“ გამო.

ეკრანის განლაგების დაგეგმვა თითოეული CT სკანირებისთვის

ამ საკონტროლო წერტილების მიხედვით მოაწყეთ ცალკეული ბლოკების მდებარეობა საიტზე ისე, რომ ისინი სწორად აისახოს მობილურ მოწყობილობებზე.

ამისათვის, ზოგიერთი ბლოკი, მაგალითად, გვერდითი ზოლი, უნდა განთავსდეს ძირითადი შინაარსის ბლოკის ქვემოთ, ხოლო მეორადი ბლოკები, როგორიცაა რეკლამა, სლაიდერები, ეკრანმზოგი შეიძლება მთლიანად მიტოვებული იყოს.

თქვენ შეგიძლიათ მიიღოთ უფრო დეტალური ინფორმაცია მსგავსი პრობლემების გადაჭრის შესახებ WebFormMySelf გუნდისგან საპასუხო დიზაინის უფასო კურსის გავლით.

მედიის შეკითხვები

საკონტროლო წერტილების დასაყენებლად, თქვენ უნდა გამოიყენოთ მედია მოთხოვნები. ეს დირექტივები არის CSS3 სტანდარტები, რომლებიც აკონტროლებენ საიტის გვერდის კონტენტის ჩვენებას ეკრანის სხვადასხვა რეზოლუციისთვის.
ეს დირექტივა ასე გამოიყურება:

@media მხოლოდ ეკრანი და (მაქს-სიგანე:520 პიქსელი) ( .art-Header-jpeg( სიმაღლე: 80%; ჩვენება: არცერთი; ) .art-Logo( პოზიცია: დაფიქსირებულია; ზედა: 10px; ) .art-Logo-text ( ჩვენება: არცერთი; ) ........... css ოპერატორები ..... ) საპასუხო WordPress ბლოგის შაბლონი

არსებობს რამდენიმე გზა, რომლითაც შეგიძლიათ შექმნათ საპასუხო შაბლონი თქვენი WordPress ბლოგისთვის.

დააინსტალირეთ შესაბამისი დანამატი.

შეიძინეთ მზა ადაპტაციური შაბლონი.

თავად მოარგეთ არსებული შაბლონი ან შეუკვეთეთ სერვისი სპეციალისტისგან.

მე გადავწყვიტე, რომ დროზე გამეგრძელებინა, მეც დავიწყე ჩემი ბლოგის ადაპტაციის მომზადება. ინტერნეტში ბევრი დეტალური ინფორმაციაა WP-სთვის თემის ადაპტაციის დანამატების შესახებ. გავეცანი პოპულარული დანამატების მუშაობას და მოთხოვნებს და გადავწყვიტე, რომ მათი გამოყენება არ იქნებოდა ყველაზე ოპტიმალური გადაწყვეტა ჩემი ბლოგისთვის.

ინტერნეტში თანამედროვე ადაპტაციური შაბლონის ყიდვა ასევე საკმაოდ მარტივია, თუ მხოლოდ ფული გქონდეთ. მაგრამ თქვენ უნდა მოგწონდეთ თავად შაბლონი და დააკმაყოფილოთ ყველა თქვენი სურვილი.

მოკლედ, მესამე ვარიანტზე დავდექი და გადავწყვიტე ჩემი შაბლონის მორგება თავად.

საპასუხო შაბლონი WordPress-ისთვის

მობილურ მოწყობილობებზე დიზაინის ადაპტაციის პრინციპებს რომ გავეცანი, ხალისიანად შევუდექი საქმეს, მაგრამ ვიგრძენი, რომ ჩემი ცოდნა html, css, php არ იყო საკმარისი.

მე უკვე ვიწყებდი მზა შაბლონის ყიდვისკენ მიდრეკილებას, მაგრამ იმ მომენტში მივიღე ინფორმაცია ორი ანდრეევ ბერნაცკის და კუდლეის კურსის შესახებ "WordPress Master-ის პერსონალური ბლოგიდან პრემიუმ შაბლონამდე". ამ კურსის ერთ-ერთი ბლოკი მოიცავდა გაკვეთილებს მობილური მოწყობილობებისთვის მზა შაბლონის ადაპტაციის შესახებ.

კურსის ფასი შედარებული იყო ახალი თანამედროვე საპასუხო შაბლონის ფასთან. და გადავწყვიტე ეს თანხა დამეხარჯა კურსის შესაძენად და მზა შაბლონის ნაცვლად ცოდნის მიღება. ვფიქრობ. რომ ინვესტიცია იყო სწორი და სრულად გამართლებული.

Google სერვისი ვებსაიტების ჩატვირთვის სიჩქარის შესამოწმებლად მობილური და დესკტოპ მოწყობილობებისთვის - https://developers.google.com/speed/pagespeed/insights/
აქ მოცემულია რეკომენდაციები თქვენი საიტის დატვირთვის დაჩქარების ზომების შესახებ.

მინდოდა მოკლედ აღმეწერა კიდევ რამდენიმე სერვისი. მაგრამ წავაწყდი გონივრულ, დეტალურ სტატიას და გადავწყვიტე არ დამეძალებინა, არამედ მოგცეთ ბმული - http://habrahabr.ru/post/189726/.

თუ მოგეწონათ ეს პუბლიკაცია, გაუზიარეთ ის თქვენს მეგობრებს სოციალურ ქსელებში.
თქვენ შეგიძლიათ დაამატოთ თქვენი კომენტარები სტატიაში.

გამარჯობა ყველას! ახლახან, ჩემი ერთ-ერთი პროექტის სტატისტიკის დათვალიერების შემდეგ, მივხვდი, რომ დრო იყო ვისწავლო როგორ შევქმნა საპასუხო ვებსაიტის დიზაინი, ანუ დიზაინი, რომელიც კარგად გამოიყურება როგორც დესკტოპ კომპიუტერებზე და ლეპტოპებზე, ასევე მობილურ მოწყობილობებზე. შეხედეთ საკუთარ თავს, მინიშნებებს Metrica.

როგორ მოგწონთ ეს სურათი? შესაძლოა, ზოგიერთ თემაში მობილური ტრაფიკის პროცენტი ნაკლები იქნება, ზოგში მეტი, მაგრამ ნებისმიერ შემთხვევაში, თქვენ აღარ შეგიძლიათ უგულებელყოთ ვიზიტორები, რომლებიც სმარტფონიდან ან პლანშეტიდან გკითხულობენ.

იცით, როგორ ხედავენ მობილური მოწყობილობების მომხმარებლები თქვენს საიტს? საბედნიეროდ, არსებობს შესამოწმებლად შესანიშნავი სერვისი - responsinator.com

აქ ყველაფერი წარმოუდგენლად მარტივია - შეიყვანთ საიტის მისამართს და ხედავთ, როგორ გამოიყურება ის მობილურ მოწყობილობებზე. ავიღოთ ბლოგის მაგალითი, რომელსაც ალბათ ყველა იცნობს.

ალექსანდრე ბორისოვს აქვს ლამაზი შაბლონი, მაშინვე აშკარაა, რომ დიზაინსა და განლაგებაში დიდი ფული ჩაიდო. თუმცა, ბლოგის ტელეფონიდან წაკითხვა ძალიან მოუხერხებელია და არ გამიკვირდება, თუ მობილური მოწყობილობების მომხმარებლებში წარუმატებლობის მაჩვენებელი გაცილებით მაღალია, ვიდრე მათ შორის, ვინც საიტზე წვდება კომპიუტერიდან.

რა უნდა გააკეთოს? არსებობს ორი გამოსავალი: დატოვე ყველაფერი ისე, როგორც არის და უყურე, თუ როგორ გვერდს უვლის სხვა პროექტებს შენს საძიებო სისტემის შედეგებში, ან გახადე შენი ვებსაიტის დიზაინი ადაპტირებადი.

რა არის საპასუხო დიზაინი

თავიდან ვერ დავინახე განსხვავება ადაპტირებულ და „თხევად“ განლაგებას შორის, როდესაც ბლოკების ზომა იცვლება ეკრანის სიგანის მიხედვით. თუმცა არის განსხვავება.

საპასუხო დიზაინი არ იჭიმება ან მცირდება სიგანეში, ის ადაპტირდება ეკრანის ზომასთან, ზოგჯერ მთლიანად ცვლის ბლოკების სტილს.

უმარტივესი მაგალითი: შიგთავსის ზონა გადაჭიმულია ეკრანის მთელ სიგანეზე და გვერდითი ზოლი ან გადაადგილებულია ქვევით ან მთლიანად ქრება გვერდიდან. ან მენიუ გადაიქცევა ჩვეულებრივი ჰორიზონტალურიდან ჩამოსაშლელ სიაში.

როგორ გააკეთოთ საპასუხო დიზაინი თქვენი ვებსაიტისთვის

თქვენი ბიუჯეტიდან და CSS/HTML-ის ცოდნის მიხედვით, შეიძლება რამდენიმე ვარიანტი იყოს.

შეუკვეთეთ ადაპტირებადი განლაგება ფრილანსერისგან

ყველაზე სწორი ვარიანტი, ჩემი აზრით, ასევე ყველაზე არაპოპულარულია. რადგან სიამოვნება არ არის იაფი. და მაინც, თუ სახსრები საშუალებას იძლევა, და არ არსებობს სურვილი, გაიგოს განლაგების სირთულეები, უმჯობესია იპოვოთ სტუდია ან ფრილანსერი, რომელიც მოარგებს თქვენს შაბლონს მობილური მოწყობილობებისთვის ან გააკეთებს ახალს. თქვენ უკვე იცით, როგორ შეამოწმოთ მისი მოქმედება სხვადასხვა რეზოლუციის მქონე მოწყობილობებზე - ამაში დაგეხმარებათ responsinator.com.

იპოვნეთ მზა დიზაინი

ბოლო დროს, თითქმის ყველა დიზაინერი ცდილობს თავისი შაბლონების ადაპტირებას მობილური მოწყობილობებისთვის. შეგიძლიათ მოძებნოთ მზა დიზაინი, მაგალითად, აქ:

• www.templatemonster.com არის ფასიანი შაბლონების ერთ-ერთი ყველაზე პოპულარული კოლექცია სხვადასხვა CMS და მხოლოდ HTML საიტებისთვის.
• www.templatemo.com - ბევრი უფასო თანამედროვე დიზაინის ვარიანტი.

ეს ვარიანტი შესაფერისია მათთვის, ვინც არ მისდევს ექსკლუზიურ დიზაინს ან შეუძლია საკუთარი ცვლილებები შეიტანოს კოდში, რათა შაბლონი უნიკალური გახდეს.

გამოიყენეთ ჩარჩოები

ჩარჩო - შეიძლება ითქვას, შაბლონის ჩარჩო, მისი ძირითადი ფაილები და ბლოკების ბადე. დიზაინერებს უყვართ ისინი მარტივად გამოყენებისა და დროის დაზოგვის გამო, რადგან მზა "თევზის" შაბლონი საშუალებას გაძლევთ არ დაკარგოთ დრო რუტინაზე. თუ იცით როგორ იმუშაოთ ჩარჩოებთან, მათი გამოყენება საპასუხო დიზაინის შესაქმნელად შესანიშნავი გამოსავალია.

თქვენ ნახავთ Habré-ზე ადაპტაციური ჩარჩოების უზარმაზარ ჩამონათვალს ყველა გემოვნებისთვის. მაგრამ მათი უმრავლესობა საკმაოდ რთული გამოსაყენებელი და მძიმეა მოცულობით. ამიტომ, მათთვის, ვისაც უყვარს მინიმალიზმი, მე გირჩევთ სხვა მსუბუქი ადაპტური ჩარჩოების ჩამონათვალს Beloweb.ru-დან. ამავდროულად, ყურადღებით დააკვირდით ბლოგს, არსებობს უამრავი სასარგებლო „სიკეთე“ დიზაინერებისა და განლაგების დიზაინერებისთვის.

თავად გააკეთე განლაგება

ეს მეთოდი მათთვისაა, ვინც არ ეძებს მარტივ გზებს და სურს ყველაფერი დამოუკიდებლად გაარკვიოს. არსებითად, იმისათვის, რომ თქვენი შაბლონი საპასუხო იყოს, თქვენ უნდა გამოიყენოთ ორი რამ:

ხედვის პორტის მეტა ტეგი
რომელიც განსაზღვრავს მოწყობილობის ტიპს, საიდანაც ვიზიტორმა შეაღწია საიტზე და ადგენს ეკრანის სწორ სიგანეს. უბრალოდ დააკოპირეთ ეს კოდი თქვენი საიტის თავში.

@მედიის წესი
რომლის წყალობითაც შეგვიძლია ჩავწეროთ სხვადასხვა სტილი ერთი და იგივე ბლოკებისთვის ჩვენს css ფაილში. ეს დაახლოებით ასე გამოიყურება:

#left( სიგანე: 600px; float: მარცხნივ; ზღვარი-მარჯვნივ: 10px; ) #right( სიგანე: 400px; float: მარჯვნივ; ) @media მხოლოდ ეკრანი და (მაქს. სიგანე: 1010px)( #მარცხნივ, #მარჯვნივ( სიგანე : 98% float: არცერთი: 10px;

ამ მაგალითში, #მარცხენა ბლოკი არის 600 პიქსელი სიგანისა და განლაგდება 400 px სიგანის #მარჯვენა ბლოკის მარცხნივ. მაგრამ თუ მონიტორის გარჩევადობა 1010 პიქსელზე ნაკლებია, ჩვენ ორივე ბლოკს ვხსნით შეფუთვას და ვჭიმავთ მათ ეკრანის სიგანის 98%-მდე.

და აი, როგორ უნდა დაწეროთ წესები ეკრანის შემდეგი ზომებისთვის:

• 320 პიქსელი iPhone 3-5-ისთვის ვერტიკალურ მდგომარეობაში
• 480px iPhone 3-4-ისთვის ჰორიზონტალურ მდგომარეობაში
• 568 პიქსელი iPhone 5-ისთვის ჰორიზონტალურად
• 384px სმარტფონისთვის ვერტიკალურ მდგომარეობაში
• 600px სმარტფონისთვის ჰორიზონტალურ მდგომარეობაში
• 768 პიქსელი iPad-ისთვის ჰორიზონტალურად
• 1024 პიქსელი iPad-ისთვის ვერტიკალურ მდგომარეობაში

რეზოლუციების სრული სია შეგიძლიათ იხილოთ responsinator.com-ზე ან Yandex.Metrica-ს ანგარიშში თქვენი საიტისთვის (განყოფილება ტექნოლოგიები/ჩვენების რეზოლუციები). ერთი სიტყვით, მათთვის, ვინც ვებგვერდის განლაგებას იცნობს, ამ საკითხის გაგება არ გაუჭირდება.

იცით, მე იშვიათად ვაძლევ ფასიან კურსებს ბმულებს (რადგან არასდროს გირჩევ ისეთ რამეს, რაც მე თვითონ არასდროს გამომიყენებია), მაგრამ ეს ნამდვილად საუკეთესო სასწავლო მასალაა განლაგების შესახებ, რომელიც ოდესმე მინახავს. მიხაილის წყალობით, ჩემი ბლოგის შაბლონი ახლა არა მხოლოდ ადაპტირებულია ეკრანის სხვადასხვა გარჩევადობაზე, ის უფრო მსუბუქი გახდა, ვიდრე წინა ვერსია და უკეთესია ოპტიმიზირებული საძიებო სისტემებისთვის.

სხვათა შორის, თუ სტატიას მობილურიდან კითხულობთ, დაწერეთ თუ ყველაფერი თავის ადგილზეა, ყველაფერი მოსახერხებელია? დღეისთვის სულ ესაა. თუ თქვენ გაქვთ რაიმე შეკითხვები ან დამატებები, მოგესალმებით, როგორც ყოველთვის, ისინი ღიაა ყველასთვის.