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

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

სავსებით მისაღები საპასუხო დიზაინი, მაგრამ მობილური ხედის სტანდარტული ზომებით (320 x 480 პიქსელი), რასაც ნამდვილად ხედავთ არის ნავიგაციის მენიუ. რა თქმა უნდა, მხოლოდ გახსნა მთავარი გვერდი, მე მინდა ვნახო რამე განსხვავებული. London & Partners არ არიან ერთადერთი, ვისაც ეს პრობლემა აქვს, ეს პრაქტიკა ჩანს ბევრ საპასუხო დიზაინში მთელ ინტერნეტში.

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

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

ალტერნატიულად, შეგიძლიათ დამალოთ თქვენი ნავიგაცია, მაგრამ გადადით ხედვის რეჟიმში, როდესაც დააჭირეთ ღილაკს "მენიუ". თქვენ შეგიძლიათ ნახოთ ეს ეფექტი მოქმედებაში Twitter-ის უახლეს Bootstrap-ში.

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

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

ეს ნიშნავს, რომ დიზაინის მობილურ მოწყობილობაზე ნახვისას ჩაიტვირთება CSS და აქტივების მხოლოდ მინიმალური მინიმალური რაოდენობა. ეს ასევე ნიშნავს, რომ IE-ს ძველი ვერსიები (რომლებიც არ ცნობენ მედია მოთხოვნებს) წარმოდგენილი იქნება საიტის მობილურ ვერსიაზე. იხილეთ Leaving Old Internet Explorer Behind by Joni Korpi დამატებითი ინფორმაციისთვის ამის შესახებ.

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

მობილური პირველი საპასუხო ნავიგაცია

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

ნავი ლურჯი. არა, კი...

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

ნახე, ჩემო ტყუილი! გაჩუმდი! მაგრამ შენ ერთნაირად ხარ ჩაცმული...

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

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

ჩვენ შევქმენით ძირითადი html გვერდი, ასე რომ, ახლა მთავარი მოზიდვის დროა; ჩვენი მთავარი ნავიგაცია..

• პორტფოლიო
• ჩემს შესახებ
• სისულელე
• სერვისები
• კონტაქტი
• ზედა

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

ნავი მენიუ

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

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 შენიშვნა: მუშაობა მიმდინარეობს სიფრთხილით და ტესტირება ABANDON-ით */ html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი , dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ფიგურა, ფიგურა, ქვედა კოლონტიტული , სათაური, hgroup, მენიუ, ნავი, სექცია, რეზიუმე, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; padding: 0; საზღვარი: 0; მონახაზი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური- გასწორება: საბაზისო ) /* HTML5 ეკრანის როლის გადატვირთვა ძველი ბრაუზერებისთვის */ სტატია, გვერდი, დეტალები, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, სექცია ( ჩვენება: ბლოკი; ) ტექსტი (ხაზის სიმაღლე: 1; ) ol, ul (სიის სტილი: არცერთი; ) ბლოკციტატი, q (ბრჭყალები: არ არის; ) ბლოკციტატა: ადრე, დაბლოკვის ციტატა: შემდეგ, q: ადრე, q: შემდეგ (შინაარსი: ""; შინაარსი: არცერთი; ) / * დაიმახსოვრე ჩანართების მონიშვნა როგორმე! */ ins (ტექსტის დეკორაცია: არცერთი; ) del (ტექსტის დეკორაცია: ხაზის გასწვრივ; ) ცხრილი (საზღვრის დაკეცვა: კოლაფსი; საზღვრების დაშორება: 0; )

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

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

/*დაიწყეთ ჩვენი სტილი*/ ტექსტი ( შრიფტი: 16px/1.4em "PT Sans", sans-serif;; ფერი: #1c1c1c; ) p, ul ( ზღვარი: 0 0 1.5em; ) ul ( სიის სტილი: დისკი padding: 0 0 0 20px ) a ( ფერი: #1D745A; ) h1 ( ) h2 ( font-family: "PT Serif", serif; შრიფტის ზომა: 32px; ხაზის სიმაღლე: 0 0 .4em; font-weight: bold; ფონი: #1c1c1c padding: 15px 20px) /*მოკლე clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:fore, header:after ( content:""; display:table; ) header; :after ( clear:both; ) /* IE 6/7-ისთვის (ტრიგერი აქვსLayout) */ header ( zoom:1; ) h1.logo a ( ფერი: #d8d8d8; ტექსტის დეკორაცია: არცერთი; შრიფტის წონა: თამამი; text-transform: font-size: 20px: მარცხნივ;

შრიფტის ზომა: 12px;

შრიფტის წონა: თამამი; ხაზის სიმაღლე: 22 px;სიმაღლე: 22px; ტექსტის ტრანსფორმაცია: დიდი;ასოების ინტერვალი: 0.1em; -webkit-border-radius: 2px;-moz-საზღვარი-რადიუსი: 2px; საზღვარი-რადიუსი: 2px; ) a.to_nav:hover, a.to_nav:focus (ფერი: #1c1c1c; ფონი: #ccc; )ეს ყველაფერი საფუძვლებია (შრიფტები, ხაზის სიმაღლეები, ფერები და ა.შ.), მაგრამ რაც ნამდვილად მნიშვნელოვანია არის ის, რომ მე დავხატე "მენიუ" ღილაკი მარჯვნივ, შიგნით, ზუსტად იქ, სადაც თქვენ ელოდებით მის ნახვას. თუ მასზე გადახვალთ, დაინახავთ გაყინულ მდგომარეობას - რა თქმა უნდა, ეს არ არის აუცილებელი მოწყობილობებისთვისსენსორული ეკრანი

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

Internet Explorer

განსაზღვრული

/*navigation*/ #primary_nav ul ( list-style: none; background: #1c1c1c; padding: 5px 0; ) #primary_nav li a ( ჩვენება: ბლოკი; padding: 0 20px; ფერი: #fff; ტექსტის დეკორაცია: არცერთი font-weight: bold; #primary_nav li a:focus ( ფერი: #1c1c1c; ფონი: #ccc; ) /*footer*/ ქვედა კოლონტიტული ( font-family: "PT Serif", serif; font-style: italic; text-align: center; font- ზომა: 14px;

ბევრად უკეთესი. ჩვენ მენიუს ბმულები ლამაზი და დიდი გავხადეთ (წაიკითხეთ ლუკ ვრობლევსკის Touch Target Sizes ბლოგი დამატებითი დეტალებისთვის) და კიდევ ერთხელ განვსაზღვრეთ მდგომარეობა: ფოკუსი მომხმარებლის გამოხმაურებისთვის.

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

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

თუმცა, შემდეგი ნაბიჯი ალბათ ტაბლეტია. iPad-ს აქვს გარჩევადობა 980px x 768px, ასე რომ, ჩვენ შეგვიძლია უსაფრთხოდ ვივარაუდოთ, რომ 768px-ზე ნაკლები ყველაფერი შესაფერისია ჩვენი მობილური განლაგებისთვის. ნებისმიერს, რომელიც აღემატება 768 პიქსელს, შეუძლია იმუშაოს დესკტოპის ნავიგაციის განლაგებით, "Desktop" ვერსია.

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

/*მედია მოთხოვნები*/ @media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) ( )

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

დავიწყოთ ჩვენი მუშაობა „მენიუ“ ღილაკის გაქრობით:

@media მხოლოდ ეკრანი და (წთ. სიგანე: 768 პიქსელი) (a.to_nav (ჩვენება: არცერთი; ) )

როდესაც ბრაუზერი ოდნავ ფართოა, მენიუს ღილაკი აღარ გამოჩნდება.

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

@media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) ( a.to_nav ( ჩვენება: არცერთი; ) .wrapper ( პოზიცია: ფარდობითი; სიგანე: 768 პიქსელი; ზღვარი: ავტომატური; ) #primary_nav (პოზიცია: აბსოლუტური; ზედა: 5px; მარჯვნივ : 10px ფონი: არცერთი : 2px;

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

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

თუ ყურადღებას აქცევთ, შეამჩნევთ, რომ ნავიგაციაში ჯერ კიდევ გვაქვს "უკან ზევით" ბმული - ახლა ეს არ გვჭირდება, არა?

ჩვენ შეგვიძლია მისი ამოღება რამდენიმე გზით, მაგრამ იმის გასაგებად, თუ რა ხდება, მოდით, ჯერ დავამატოთ კლასი სიის ელემენტს:

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

#primary_nav li.top (ჩვენება: არცერთი; )

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

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

• ლუკ ვრობლევსკის
• კრის კოიერის

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

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

• რა არის Mobile First და მისი უპირატესობები
• მიდგომის განხორციელება
• შედეგების სტატისტიკა

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

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

საძიებო გიგანტმა Google-მა ცოტა ხნის წინ დაწერა ამ მიდგომის მნიშვნელობის შესახებ:

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

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

მონაცემების დეტალური სია გვერდზე:

წარმოვიდგინოთ, რომ ამ სიიდან მთავარია მთავარი სურათი, მწარმოებლის სახელი, მოდელები, აღჭურვილობა, ფასი, მახასიათებლებისა და აღჭურვილობის ჩამონათვალი.

მობილურის პირველი გვერდი. კომპანიის სახელი კომპანიის აღწერა 2015 წლის Nissan Versa Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
• Excepteur sint occaecat cupidatat non proident, გვხვდება culpa qui officia deserunt mollit anim id est laborum.
• მოდელი: Versa Note

• ძრავი: 1.6ლ 4-ცილინდრიანი DOHC 16V
• საწვავი: ბენზინი
• სტანდარტული
• დამუხრუჭების დახმარება
• ორმაგი წინა გვერდითი დარტყმის აირბალიშები
• უკანა ფანჯრის გამაფხვიერებელი
• სამგზავრო კარის ურნა
• მძღოლის კარის ურნა
• ოკუპანტის სენსორული აირბაგი
• წევის კონტროლი
• CD პლეერი
• სამგზავრო კომპიუტერი
• ელექტრონული სტაბილურობის კონტროლი
• წინა საწინააღმდეგო ზოლი
• ელექტრო საჭე
• უკანა ფანჯრის გამწმენდი

• ოვერჰედის აირბაგი
• კონტაქტი
• ABS მუხრუჭები

შექმნილია Company.com-ის მიერ

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

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

ახლა ჩვენ უნდა დავამატოთ დარჩენილი მონაცემები ისე, რომ მომხმარებელმა იცოდეს ამის შესახებ და მოითხოვოს მონაცემები.
აქ ჩვენ ვიყენებთ Data Events დამხმარეებს, რომლებიც გვეხმარებიან ინფორმაციის მოპოვებაში მოთხოვნის შემთხვევაში. ბმულზე დაწკაპუნებისას Ajax-ის მოთხოვნა გაიგზავნება href ატრიბუტში მითითებულ მისამართზე. მოთხოვნის შედეგი ჩაიწერება data-load-target ატრიბუტში მითითებულ ელემენტზე. მნიშვნელოვანი წერტილი არის ის, რომ მონაცემთა დატვირთვის ეკრანის ატრიბუტი მიუთითებს ეკრანის რა მნიშვნელობებზე ავტომატურად იტვირთება ესკიზები. ეკრანის ზომები აღებულია Twitter Bootstrap CSS ჩარჩოდან. ხოლო data-load-module ატრიბუტში მივუთითებთ რეგისტრირებული მოდულის იდენტიფიკატორს, რომელიც დაკავშირებული იქნება ajax მოთხოვნის შედეგის ჩასმის შემდეგ.

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

Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; ფუნქცია setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) ფუნქცია initializeSlickJs() ($(_module. find(".vehicle_images_thumbs-list")).slick(( უსასრულო: true, slidesToShow: 5, slidesToScroll: 1 )) ) ფუნქცია handleMainImage() ($(_module.scope).on("click", ".vehicle_images_thumbs- ელემენტი img", changePreview); ) ფუნქცია changePreview() ( var index = this.src.match(/thumb(\d+)/); _mainImage.src = "images/preview" + index + ".jpg"; ) ეს .scopeSelector = ".vehicle_images" this.init = function() (setMainImage(); initializeSlickJs(); handleMainImage();
კლასის ინიციალიზაციის დროს ჩვენ ვაწარმოებთ slick-carousel-ს, რათა შევქმნათ ჩვენი ესკიზების კარუსელი და დავაყენოთ დამმუშავებელი მათი სანახავად.

Moff.amd.register(( id: "vehicle-gallery", დამოკიდებულია: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), ფაილი: (js: ["js/vehicle-gallery.js"] ), afterInclude: function() (Moff. module.initClass("VehicleGallery");
ჩვენს მაგალითში, ჩვენ დავაზუსტეთ jQuery და მისი slick-carousel plugin, რომელიც ქმნის კარუსელს ესკიზებიდან, როგორც დამოკიდებულებები. დამოკიდებულებები იტვირთება სინქრონულად, თქვენ მიერ მითითებული თანმიმდევრობით. დამოკიდებულების შემდეგ, მანქანა-gallery.js მოდულის კლასი იტვირთება. შემდეგი, მოდულის ფაილის და მისი დამოკიდებულებების ჩატვირთვის შემდეგ, ჩვენ მოდულის ინიციალიზაციას ვაკეთებთ afterInclude მოვლენის გამოყენებით.

ქვედა დიაგრამა გვიჩვენებს, რომ არაოპტიმიზებული გვერდი 73%-ით მძიმეა, ვიდრე მობილური პირველი გვერდი. ამ გზით ჩვენ შეგვიძლია დავზოგოთ 186,94 კბაიტი, რომელიც შეიძლება მომხმარებელს არ დასჭირდეს თქვენი გვერდის ნახვისას.

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

გამოქვეყნების თარიღი: 2013-03-29

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

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

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

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

2. მხარს უჭერს ეკრანის ბევრ ზომას და არა მხოლოდ ძალიან დიდ მონიტორებს დესკტოპ კომპიუტერებიდა პატარა პორტატული მოწყობილობები.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

გამოსახულება, საკმაოდ დიდი, განზრახული იყო გამხდარიყო დიზაინის ნაწილი მხოლოდ დიდ ეკრანებზე (660 px-დან და უფრო დიდი). იმის გამო, რომ ჩვენი CSS იწყება მობილური დიზაინით, ეს დიდი გრაფიკა არასოდეს იგზავნება მცირე ეკრანის მოწყობილობებზე, რადგან მედია მოთხოვნა, რომელიც იტვირთება ამ სურათზე, მხოლოდ დიდი ეკრანებით არის გამოწვეული. მედია მოთხოვნა, რომელიც ეხება ფონს html ელემენტი, ასე გამოიყურება:

@media მხოლოდ ეკრანი და (წთ. სიგანე: 660 პიქსელი) ( html (ფონი: url(/images/bg-watercolor.jpg) არ განმეორდეს ფიქსირებული ცენტრი ზედა; ) )

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

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

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

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

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

ჩვენი ვებსაიტის ერთ-ერთი სფერო, სადაც აშკარად გაიზარდა მედია მოთხოვნები, არის ნავიგაცია.

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

1. მთავარი ნავიგაცია;

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

3. ქვედა ნავიგაცია;

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

ვინაიდან ჩვენი CSS პირველ რიგში მობილურია, ერთ-ერთი პირველი პრობლემა იყო ნავიგაციის დაყენება მცირე ეკრანის განლაგებისთვის. ეს ნიშნავს ყველა ნავიგაციის განყოფილების ჩვენების გამორთვას მთავარი ნავიგაციის გარდა.

#helpNav, .subNav, ქვედა ნავიგაცია (ჩვენება: არცერთი;)

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

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

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

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

აქ არის CSS ჩვენი მეორადი ნავიგაციისთვის:

#helpNav ( ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; ზედა: 1px; მარჯვნივ: 0px; სიგანე: 100%; ტექსტის გასწორება: მარჯვნივ; ) #helpNav ul ( padding-left: 10px; ) #helpNav li ( ჩვენება: inline; padding-right: 6px; background-color: #2f6a98. :hover (ფონის ფერი: #f66606; )

და ქვეგვერდის ნავიგაციის არეები:

SubNav ( ჩვენება: ბლოკი; სიგანე: 25%; float: მარცხნივ; ) .subNav h4 ( padding-bottom: 8px ) .subNav ul (list-style: დისკი; ფერი: #c65204; padding: 0 0 20px 20px; ). subNav li ( padding-bottom: 14px; ) .subNav a (ფერი: #186483; შრიფტის ზომა: 21px; font-family: "RokkittRegular", Times, "Times New Roman", სერია; ხაზის სიმაღლე: 1; )

საბოლოოდ, ქვედა კოლონტიტული ნავიგაცია:

ქვედა კოლონტიტული (ჩვენება: ბლოკი; ზღვარი ზედა: 40 პიქსელი; ) ქვედა კოლონტიტული nav ul ( სიის სტილი: არცერთი; ) ქვედა კოლონტიტული nav li ( padding-ქვემო: 24px; სიგანე: 19%; padding: 0 5% 20px 0; float: მარცხენა;

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

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

ჩვენი მთავარი ნავიგაცია წარმოდგენილია ფართო ეკრანებზე ჰორიზონტალური მწკრივის სახით განლაგების ზედა ნაწილში. მცირე ეკრანებზე, ძირითადი ნავიგაციის სტრუქტურა იცვლება ისე, რომ თითოეული გვერდის ზედა ნაწილში არის დიდი მენიუს ღილაკი, რომელიც აკავშირებს ნავიგაციას გვერდის ბოლოში. ამის მისაღწევად, ჩვენ დავამატეთ ბმული ID menuLink-ით და კლასი oftabButtonr სათაურში, რაც თითქმის მარკირების დასაწყისია. შემდეგ ჩვენ მოვათავსეთ განყოფილება ID mainNav-ით მარკირების ბოლოს. ამ განყოფილების შიგნით არის ჩვენი მთავარი ნავიგაცია, რომელიც არის უბრალოდ შეუკვეთავი სია რამდენიმე სხვა დაუგეგმავი სიით ქვეგვერდის განყოფილების მენიუში შიგნით. ჩვენ ასევე გვაქვს წამყვანი ID toTop-ით, რომელიც მოქმედებს როგორც ბმული გვერდის ზედა ნაწილში.

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

#menuLink a ( float: მარჯვნივ; ზღვარი: -56px 8px 0 0; ) .tabButton a (ფერი: #FFF; font-family: "RokkittRegular", Times, "Times New Roman", სერია; შრიფტის ზომა: 20px; background-color: #45829b padding: 10px 12px: .tabButton a:hover;

ჩვენი მთავარი ნავიგაციის მენიუ დაყენებულია მცირე ეკრანზე:

#mainNav ( margin-top: 30px; სიგანე: 100%; ) #mainNav #toTop a (float: მარჯვნივ; margin: 0 8px 0 0; font-size: 20px; ) #mainNav nav (padding-top: 80px;) #mainNav ul ( list-style: none; ) #mainNav li (ფონი: #45829b; საზღვრის ქვედა: 1px მყარი #abc7d2; padding: 4px 10px 4px 15px; ) #mainNav li:hover ( background-color: #f6 ) #mainNav a ( შრიფტის ზომა: 24 პიქსელი; ფერი: #FFF; შრიფტი-ოჯახი: "RokkittRegular", Times, "Times New Roman", სერია; )

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

CompanyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #contactTab ul, .servicesPage #servicesTab ul ( ჩვენება: დაბლოკვა; )

რაც უფრო დიდი ეკრანის განლაგება შემოდის - ისევ 660 პიქსელი და მეტი მედია მოთხოვნებით - ჩვენ მკვეთრად ვცვლით მთავარი ნავიგაციის განლაგებას. პირველ რიგში, ჩვენ გამორთეთ menuLink და toTop ღილაკების ჩვენება, რადგან ისინი აღარ არის საჭირო:

#menuLink a, #toTop a (ჩვენება: არცერთი;)

#mainNav (პოზიცია: აბსოლუტური; ზედა: 92 პიქსელი; ზღვარი: 18 პიქსელი 2% 0 2%; სიგანე: 96%; ტექსტის გასწორება: ცენტრში; ) #mainNav ნავი ( padding: 5px 0; სასაზღვრო ზედა: 1px მყარი #bacfd7; საზღვარი-ქვედა: 1px მყარი #bacfd7 ) #mainNav li (ფონი: არცერთი; ეკრანი: ჩასმული; საზღვრები-ქვედა: 0; საზღვარი-მარჯვნივ: 1px მყარი #bebebe; padding: 0 6px 0 8px; ზღვარი: 4px 0; ) #mainNav a (შრიფტის ზომა: 16px; ფერი: #45829b; ) #mainNav a:hover (ფერი: #f66606; )

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

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

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

ადაპტაციური მიდგომის ერთ-ერთი ყველაზე დიდი დაბრკოლება არის ის, რომ თქვენ არ შეგიძლიათ მიუთითოთ სხვადასხვა მარკირება ან განსხვავებული წყარო კოდი. სხვადასხვა მოწყობილობები. ეს არის დაბრკოლება, რომლის გადალახვაც გვინდოდა ჩვენი CMS-ის დახმარებით. ექსპერიმენტებისა და კვლევისას წავაწყდით სტატიას სახელწოდებით Going Truly Adaptive With ExpressionEngine. ამ სტატიაში დეტალური მეთოდოლოგიის გამოყენებით, ჩვენ შევძელით მოწყობილობის გამოვლენის სკრიპტის გამოყენება მობილურ ან დესკტოპ სისტემაზე ცვლადის დასაყენებლად. ამის შემდეგ ჩვენ შევძელით ჩატვირთოთ მარკირება ჩვენს საიტზე იმის მიხედვით, თუ რომელი ცვლადი შეგვხვდა.

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

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

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

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

img src = "(ტიზერი-სურათი)" alt = "(სათაური)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

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

იგივე მიდგომა გამოიყენება მთავარი გვერდის სექციებზე „ახალი ამბები“ და „ბლოგი“, სადაც მოცემულია სამი მოკლე ტიზერი, თუ სრული ცვლადი შეგხვდებათ და მხოლოდ ერთი, თუ მობილური. სინტაქსი ასე გამოიყურება:( exp : channel : entries channel = "news" (თუ გლობალური: site_version == "სრული" ) limit = "3" ( / if ) ( if global : site_version == "mobile" ) limit = "1" (/თუ))

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

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

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

მობილური-პირველი მიდგომის და ჩვენი CMS-ის გამოყენებით, ჩვენ შეგვიძლია მივაწოდოთ ჩვენი მთავარი გვერდიდესკტოპის მომხმარებლებისთვის 738.3 KB და მნიშვნელოვნად ამცირებს მას მხოლოდ 174.4 KB-მდე მობილური მომხმარებლებისთვის.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) განყოფილებაში დამატება საჭირო ფაილები— გამოყენებული შრიფტების ბმული, jQuery ბიბლიოთეკა, ასევე prefixfree მოდული (ისე, რომ არ დაიწეროს ბრაუზერის პრეფიქსები თვისებებისთვის):

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

ჩვენ განვათავსებთ კონტეინერის შემდეგ ელემენტებს გვერდის სათაურში:
ლოგო ;
ღილაკი ძირითადი მენიუს საჩვენებლად/დამალვისთვის;
მთავარი მენიუ

;
საიტის საძიებო ფორმა.

L O G O

• ბლოგი
• პორტფოლიო
• ავტორის შესახებ
3. დაბლოკვა სტატიის შეჯამებით

სტატიების ანონსს შევახვევთ ელემენტით:

დიზაინიგაზაფხული

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

განაგრძეთ კითხვა ...
4. გვერდითი ზოლი

გვერდით სვეტში დავამატებთ კატეგორიების ჩამონათვალს, ბოლო პოსტებს და საინფორმაციო გამოწერის ფორმას:

კატეგორიები

• დიზაინი (2)
• განლაგება (5)
• ვიდეო (1)
უახლესი პოსტები
• ზაფხული
• შემოდგომა
გამოიწერეთ ბიულეტენი
5. ქვედა კოლონტიტული

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

ჩემი ბლოგი © 2016 დაწერე წერილი$(".nav-toggle").on("დაწკაპუნება", ფუნქცია())($("#menu").toggleClass("აქტიური"); ));

6. ზოგადი CSS სტილები

ზოგადი სტილები, ბრაუზერის სტილების გადატვირთვა ნაგულისხმევად:

*; list-style: none; ეკრანი"; შრიფტის წონა: ნორმალური; ასოების დაშორება: 1 პიქსელი; ) ტექსტი ( შრიფტი-ოჯახი: "Open Sans", arial, sans-serif; შრიფტის ზომა: 14 პიქსელი; ხაზის სიმაღლე: 1; ფერი: #373737; ფონი: #f7f7f7 ) /* დაამატეთ ნაკადის გასუფთავება ყველა კონტეინერისთვის, რომლებსაც აქვთ ჩასმული ელემენტები */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after; ( შინაარსი: ""; ჩვენება: ცხრილი; ნათელი: ორივე; ) /* სტილის კლასი, რომელიც აკონტროლებს ბადის კონტეინერის სიგანეს */ .კონტეინერი ( ზღვარი: 0 ავტო; სიგანე: 100%; მაქსიმალური სიგანე: 960 პიქსელი; ბალიშები: 0 15 პიქსელი ;

7. სათაურისა და მისი შინაარსის სათაურის სტილები ( სიგანე: 100%; ფონი: თეთრი; ყუთი-ჩრდილი: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; margin-bottom: 30px; პოზიცია: ნათესავი; საზღვარი -რადიუსი: 5px 0;text-align: 2px 1px rgba(0,0,0,.4); .logo span:nth-child( even) ( ფონი: #F8B763; ) /* მენიუ */ #menu ( float: მარჯვნივ; ) #menu li ( ჩვენება: inline-block; margin-right: 30px; ) #menu a ( ფერი: #111; ტექსტის ტრანსფორმაცია: დიდი; ასოების დაშორება: 1 პიქსელი; შრიფტის წონა: 600; ეკრანი: ბლოკი; ხაზის სიმაღლე: 40 პიქსელი; ) #menu a:hover ( ფერი: #EF5A42; ) #menu li :last-child ( margin-right: 0;) /* საძიებო ფორმა */ #searchform ( float: მარჯვნივ; margin-left: 46px; ჩვენება: inline-block; პოზიცია: შედარებითი; ) #searchform შეყვანა ( სიგანე: 170px; float: მარცხნივ: none-left: 10px; სიმაღლე: 40px; გადინება: დამალული; მონახაზი: არცერთი; ფერი: #9E9C9C; შრიფტის სტილი: დახრილი; ) #searchform ღილაკი (ფონი: გამჭვირვალე; სიმაღლე: 40 პიქსელი; საზღვარი: არცერთი; პოზიცია: აბსოლუტური; მარჯვნივ: 10 პიქსელი; ფერი: #EF5A42; კურსორი: მაჩვენებელი; შრიფტის ზომა: 18 პიქსელი; ) #searchform შეყვანა: ფოკუსირება ( მონახაზი: 2 პიქსელი მყარი #EBEBE3 ) /* მენიუს გადართვის ღილაკი, რომელიც გამოჩნდება 768 პიქსელის სიგანეზე */ .nav-toggle ( ჩვენება: არცერთი; პოზიცია: ნათესავი; ათწილადი: მარჯვნივ; სიგანე: 40 პიქსელი; სიმაღლე: 40 პიქსელი; მარცხნივ: 20 პიქსელი; ფონი: #EF5A42; , .nav-toggle span:after ( content: ""; პოზიცია: აბსოლუტური; ჩვენება: დაბლოკვა; მარცხნივ: 0; სიგანე: 100%; სიმაღლე: 2px; ფონი: თეთრი; ) .nav-toggle span: ადრე ( ზევით: -10px; : 123px; სიგანე: 64%; float: მარცხენა; ) /* ბლოკი სტატიისთვის */ .post ( margin-bottom: 35px; ) .post-content p ( line-height: 1.5; padding-bottom: 1em; ) .post-image ( margin-bottom: 30px; ) კატეგორია ( margin-bottom: 15px;) .კატეგორია a (ფერი: #F8B763; text-transform: uppercase; ) .post-title (margin-bottom: 12px; font-size: 26px;) /* ბლოკი " გაგრძელება"ღილაკის წაკითხვის" და სოციალური ქსელის ღილაკები */ .post-footer ( საზღვრის ზედა: 1px მყარი #EBEBE3; საზღვრის ქვედა: 1px მყარი #EBEBE3; პოზიცია: შედარებითი; margin-top: 15px; ) .more-link ( პოზიცია: ნათესავი ბლოკი: 0 22 პიქსელი; 1მ; თეთრი სივრცე: nowrap; ) .more-link:after ( content: ""; ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; სიგანე: 0; სიმაღლე: 0; ზედა: 0; მარჯვნივ: 0; კონტური: მყარი გამჭვირვალე; საზღვრის სიგანე: 22px 18px; საზღვარი -მარცხენა ფერი: #3C3D41 ტრანსფორმაცია: translateX(100%) .post-social (პოზიცია: აბსოლუტური; მარცხნივ: ავტო; ზედა: 50%; მარჯვნივ: 0; ტექსტის გასწორება: მარჯვნივ; ტრანსფორმაცია: translateY(- 50; padding: 0 font-size: .post-social a (display: inline-block; margin-left: 8px; ფერი: #F8B763; width: 25px; line-height: 23px; ტექსტის გასწორება: კონტურის რადიუსი: 50%; 3px 1px rgba(0,0,0,.05) .widget-სათაური (შრიფტის ზომა: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid #F8B763; box -shadow: 3px 3px 0 0 #F8B763 ) .widget-category-list li ( border-bottom: 1px solid #EBEBE3; padding: 10px 0; ფერი: #c6c6c6; შრიფტის სტილი: დახრილი; ) .widget-category-list li:last-child ( border-bottom: none; ) .widget-category-list li a (ფერი: #626262; margin-right: 6px; შრიფტის სტილი: ნორმალური; ) .ვიჯეტი- category-list li a:fore ( შინაარსი: "\f105"; ჩვენება: inline-block; font-family: "FontAwesome"; ზღვარი მარჯვნივ: 10px; ფერი: #c6c6c6; ) .widget-posts-list li ( საზღვარი -top: 1px მყარი #EBEBE3 padding: 15px 0) .widget-posts-list li:nth-child(1) ( border-top: none; ) .post-image-small ( width: 30%; მარცხნივ-მარჯვნივ: 15 პიქსელი; 100% float: font-style: 0 0 10px ღილაკი ( padding: 0 15px; ფონი: გამჭვირვალე; სიმაღლე: 40px; საზღვარი: არცერთი; პოზიცია: 0; ფერი: #EF5A42; : შრიფტის ზომა: 18px ) #subscribe შეყვანა: ფოკუსირება + ღილაკი (ფონი: #EF5A42; ფერი: თეთრი; ) 10. ქვედა სტილები

ჩვენ ვყოფთ საიტის ქვედა კოლონტიტულის სამ თანაბარ სვეტად:

ქვედა კოლონტიტული ( padding: 30px 0; ფონი: #3C3D41; ფერი: თეთრი; ) .footer-col ( სიგანე: 33.3333333333%; float: მარცხენა; ) .footer-col a (ფერი: თეთრი; ) .footer-col:last- ბავშვი ( ტექსტის გასწორება: მარჯვნივ; ) .social-bar-wrap ( text-align: ცენტრში; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. მედია მოთხოვნები @media (მაქს-სიგანე: 768 პიქსელი) ( /* აჩვენე ღილაკი ზედა ნავიგაციის გადასართავად */ .nav-toggle ( ჩვენება: დაბლოკვა; ) სათაური ( padding: 10px 0; ) /* ზედა მენიუს დამალვა , გააუქმეთ შეფუთვა, განათავსეთ იგი, გადაიტანეთ საიტის სათაურის სიმაღლეზე */ #მენიუ ( max-height: 0; ფონი: თეთრი; float: არცერთი; პოზიცია: აბსოლუტური; overflow: დამალული; ზედა: 63px; მარჯვნივ: 0 მარცხნივ: 0 ბალიშები: 0 z-index: 3 ) /* გააკეთეთ სიის ელემენტების ბლოკი */ #menu li ( ჩვენება: ბლოკი; საზღვარი-ქვემოთ: 1px მყარი # EBEBE3: 0 ) /* გააუქმეთ მარცხენა და მარჯვენა სვეტები, დააყენეთ მათი სიგანე 100% */ .posts-list, განზე (სიგანე: 100%; : არცერთი; : არცერთი; ) /* მოათავსეთ საძიებო ფორმა მარცხნივ */ #searchform ( float: left; margin-left: 0; ) /* ამოიღეთ ზედა და ქვედა საზღვრები და გაასწორეთ ღილაკი ცენტრში */ .post-footer ( border- ზედა: არცერთი; ბოლოში: არცერთი; : 20 პიქსელი ) .ვიჯეტი - პოსტ-სათაური ( შრიფტის ზომა: 1.2 ემ. -align: center; ) სკრიპტი მობილური მენიუსთვის.

პასუხისმგებელია ღილაკზე დაწკაპუნებისას ზედა მენიუს ჩვენება/დამალვაზე (მენიუს სიმაღლე გადართულია - ნულიდან მისი შინაარსის ტოლი) jQuery კოდი, რომელიც ადრე დავამატეთ გვერდის მარკირებას დახურვის ტეგამდე:

$(".nav-toggle").on("დაწკაპუნება", ფუნქცია())($("#menu").toggleClass("აქტიური"); ));