ადაპტური განლაგება: რა არის და როგორ გამოვიყენოთ იგი. ადაპტური ინტერფეისები სასარგებლო სერვისები და ინსტრუმენტები

ამ დროისთვის, 100,000 ყველაზე ხშირად მონახულებული საიტიდან დაახლოებით 11-12% რეაგირებს და ეჭვგარეშეა, რომ ეს რიცხვი გაიზრდება მომდევნო რამდენიმე წლის განმავლობაში.

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

ადაპტური მოდერნიზაცია

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

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

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

უპირატესობები

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

ხარვეზები

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

საპასუხო მობილური ვებსაიტები საპასუხო მობილური ვებსაიტები, ან როგორც მე ვუწოდებ მათ „სპეციფიკური მომავლის თესლი“, არის ცალკე ვებსაიტის შექმნის პრაქტიკა „m.yourdomain.ru“ ფორმატში, საპასუხო დიზაინის ტექნიკის გამოყენებით. საიტები, როგორიცაა BBC, The Guardian და Entertainment Weekly (რომელზეც მე ვმუშაობდი) იყენებენ ამ სტრატეგიას.

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

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

უპირატესობები

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

ხარვეზები

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

საპასუხო დიზაინი მობილური მოწყობილობებისთვის მშობლიურად
ხარვეზები

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

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

ეს არის ბრედ ფროსტის სტატიის სათაურით „საპასუხო სტრატეგია“. თარგმნა UXDepot-მა ავტორის თანხმობით.

PS მთარგმნელებისგან: იმედი მაქვს მოგეწონათ სტატია. მოხარული ვიქნებით, თუ მიუთითებთ თარგმანში შეცდომებზე, რათა დროულად გამოვასწოროთ ისინი. მოგვწერეთ მისამართზე [ელფოსტა დაცულია], გთხოვ :)

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

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

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

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

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

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

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

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

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

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

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( სიგანე: 100%; ნათელი: ორივე; /* დამატებითი სტილი ჩვენი ახალი განლაგებისთვის */ border-top: 1px მყარი #cccc; margin-top: 20px; )

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

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 მყარი #cccc; ))

განსაკუთრებით 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")); ) ) ));

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

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

საბედნიეროდ, CSS გვაძლევს შესაძლებლობას ვაჩვენოთ და დავმალოთ შინაარსი წარმოუდგენელი მარტივად.

ჩვენება: არცერთი;

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

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

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

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

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

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

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

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

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

როგორ იყენებს Yandex თქვენს მონაცემებს და მანქანურ სწავლებას სერვისების პერსონალიზებისთვის -.

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

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

გამოქვეყნდა http://allbest.ru

1. ადაპტური მოდერნიზაცია

2. საპასუხო მობილური საიტები

3. საპასუხო დიზაინი მშობლიურად მობილური მოწყობილობებისთვის

4. ეტაპობრივი სტრატეგია

1. ადაპტური მოდერნიზაცია

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

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

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

უპირატესობები:

· შედარებით სწრაფი. ვინაიდან ის არ საჭიროებს ყველაფრის ნულიდან აღდგენას.

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

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

ხარვეზები:

· მოქმედებს მხოლოდ მცირე ნაწილზე. 10 ლიტრი წყალი სამ ლიტრიან ქილაში. ბევრი შინაარსი

· პროდუქტიულობა.

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

2. საპასუხო მობილური საიტები

საპასუხო მობილური ვებსაიტები არის ცალკე ვებსაიტის შექმნის პრაქტიკა "m.yourdomain.ru" ფორმატში საპასუხო დიზაინის ტექნიკის გამოყენებით.

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

უპირატესობები:

· დაბალი რისკი. მობილური მოწყობილობებიდან ტრაფიკი უმცირესობაა.

· საპასუხო მობილური საიტი შეიძლება იყოს შესანიშნავი სავარჯიშო სწავლისთვის.

· მოიშორეთ არასაჭირო ნივთები. ეს მიდგომა დიდ შესაძლებლობას აძლევს გუნდებს ჰკითხონ საკუთარ თავს „ჩვენ ნამდვილად გვჭირდება ეს“ და ამავე დროს ყურადღება გაამახვილონ შესრულებაზე.

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

ხარვეზები:

· ეს ჯერ კიდევ მობილური საიტია. არის თუ არა ის საპასუხო თუ არა, ეს მიდგომა მაინც ინარჩუნებს მობილური საიტების უამრავ მინუსს: პრობლემები URL-ის გადამისამართებასთან, კონტენტის მენეჯმენტთან, თანმიმდევრულ კონტენტთან, თანმიმდევრულობასთან, SEO ოპტიმიზაციასთან და სხვა.

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

· ვაზზე გახმობის შანსი.

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

3. საპასუხო დიზაინი მშობლიურად მობილური მოწყობილობებისთვის

სმარტფონის ინტერფეისის დიზაინი

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

უპირატესობები:

· დაიწყე ახალი ძალით. მობილური პირველი - ახალი დასაწყისი.

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

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

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

· მომავლის მტკიცებულება დიზაინი.

ხარვეზები:

· დაუთმეთ ბევრი დრო

ცნობიერებაში ცვლა

· ორგანიზაციულად რთული

· უცნობი

4. ეტაპობრივი სტრატეგია

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

უპირატესობები:

· შესამჩნევი

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

· გაშვების უფრო მაღალი შანსები

ხარვეზები:

მთლიანობის ნაკლებობა

ვაზზე გახმობის შესაძლებლობა

გამოქვეყნებულია Allbest.ru-ზე

მსგავსი დოკუმენტები

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

კურსის სამუშაო, დამატებულია 19/03/2012


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

რეზიუმე, დამატებულია 11/10/2011


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

ნაშრომი, დამატებულია 06/02/2016


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

ნაშრომი, დამატებულია 18/04/2012


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

დისერტაცია, დამატებულია 03/11/2010


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

პრეზენტაცია, დამატებულია 05/22/2012


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

ნაშრომი, დამატებულია 11/11/2010


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

კურსის სამუშაო, დამატებულია 01/05/2017


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

ნაშრომი, დამატებულია 04/11/2012


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