Kohët e fundit, teknologjitë dhe pajisje të ndryshme (tableta, telefona inteligjentë, monitorë) po zhvillohen gjithnjë e më shumë me ndihmën e të cilave shikohen faqet e internetit.
Në sferën e së cilës kemi një larmi të madhe rezolucionesh të ndryshme të ekranit, gjë që nga ana tjetër çon në vështirësinë e marrjes së informacionit nga faqet. Në mënyrë që informacioni të lexohet mirë dhe të shikohet me lehtësi në shumicën e pajisjeve, u zhvillua teknologjia e dizajnit adaptiv.
Qëllimi i dizajnit të përgjegjshëm është të zhvillojë një dizajn universal uebsajti që, nga ana tjetër, do të lejonte shikimin dhe ndërveprimin me burimin nga pajisje të ndryshme.
Gjithashtu, kjo teknologji përfshin zhvillimin e një versioni të faqes në internet për të gjitha pajisjet, dhe jo disa.
Dizajn i përgjegjshëm në internet(Eng. Adaptive Web Design) - dizajn i faqes së internetit që siguron shfaqjen e saktë të faqes në pajisje të ndryshme të lidhura me internetin dhe përshtatet në mënyrë dinamike me madhësinë e specifikuar të dritares së shfletuesit.
Parimet themelore të dizajnit të përgjegjshëm:
- Modeli i përgjegjshëm i faqes në internet, aftësia e shabllonit për t'u përshtatur me rezolucione të ndryshme të ekranit të pajisjeve nga një monitor kompjuteri në një smartphone;
- Përshtatja dhe lëvizja e blloqeve të përmbajtjes, aftësia e blloqeve të përmbajtjes, në varësi të rezolucionit të ekranit të pajisjes, për të marrë përmasat e kërkuara, si dhe aftësia për të kaluar në një pozicion tjetër në paraqitje;
- Përshtatja e imazhit, aftësia e imazheve për të ndryshuar madhësinë në varësi të rezolucionit të ekranit ose për të ngarkuar një imazh më të përshtatur me më pak peshë dhe madhësi;
- Përdorimi i një rrjeti fleksibël, ju lejon të ndryshoni shpejt modelin e paraqitjes;
- Fshehja e blloqeve më pak të rëndësishme, disa blloqe mund të fshihen në ekrane të vogla;
- Ridizajnimi i përdorshmërisë së elementeve të navigimit, meqenëse në pajisjet celulare, për shkak të rezolucionit të ulët, elementët e navigimit bëhen më pak të klikueshëm, ato ripunohen, duke i bërë ato të përshtatshme për t'u përdorur;
- Thjeshtimi i një numri elementësh në një faqe interneti, disa elementë janë thjeshtuar për përdorim në pajisjet celulare;
- Përshtatja e përmbajtjes video, duhet të merret parasysh edhe përshtatja e videos;
- Përdorimi i pyetjeve në media(kërkesa mediatike), ju lejon të krijoni një plan urbanistik adaptiv;
- Së pari celulari(së pari celulari), dizajnimi i një dizajni të përgjegjshëm fillon me një plan urbanistik.
Sa i përket pikës së fundit, nëse kjo është e drejtë apo jo është një pyetje e vështirë, të paktën, shumë argumentojnë se është e nevojshme të filloni të zhvilloni paraqitjen nga versioni për pajisjet mobile. Unë marr një pamje paksa të ndryshme, është më e lehtë për mua të zhvilloj një plan urbanistik për rezolucionin maksimal me një rrjet të menduar mirë dhe funksionalitet të plotë, dhe vetëm atëherë ta përshtat atë me rezolucione të tjera.
Madhësi të përgjegjshme të paraqitjes së dizajnit
Disa kohë më parë në 2012, shkrova një artikull të shkurtër se cilat të zgjidhni kur zhvilloni një dizajn - një plan urbanistik fiks të faqes. Ky artikull ka marrë interes të madh në mesin e lexuesve, rezulton se kjo çështje është me interes për shumë stilistë dhe zhvillues fillestarë. Në lidhje me këtë, në këtë artikull vendosa të nënvizoj edhe këtë çështje.
Pra, thjesht nga vizioni im, unë do të them parimin dhe dimensionet për të cilat duhet të zhvillohet faqosja.
Nëse së pari ndiqni parimin e celularit, atëherë do të ketë madhësi të tilla rezolucioni për të cilat duhet të zhvilloni një plan urbanistik 320px / 480px / 768px / 1024px / 1280px ndoshta më shumë varet nga detyra.
Fotografia duket diçka e tillë, por shpesh nën disa rezolucione nuk ka nevojë të krijoni një plan urbanistik, për shembull, nën 480px. nëse faqosja nuk prishet në boshllëk 768 - 320 px.
Sigurisht, ne do të krijojmë një kanavacë në Photoshop, duke marrë parasysh mbushjen, shiritin e lëvizjes dhe gjithçka tjetër, ashtu si një plan urbanistik i rregullt. për lehtësinë e zhvillimit, si dhe dizajn më të shpejtë të paraqitjes. Shumë njerëz përdorin korniza në punën e tyre, dhe për këtë arsye mbështeten në rrjetin e kornizës mbi të cilën po zhvillohen.
Falë kësaj, ne do të jemi në gjendje t'i tregojmë projektuesit të paraqitjes se si do të sillet faqosja në rezolucione dhe pajisje të ndryshme të ekranit. Për shembull, unë skicova një plan urbanistik të vogël, mund ta shihni në ekranin më poshtë. 
Kërkesa mediatike dhe porta e pamjes në dizajn të përgjegjshëm
Etiketa meta e portit të shikimit përdoret për t'i treguar shfletuesit se si të shfaqë dimensionet e faqes dhe ta shkallëzojë atë. Ky meta-etiketë është në faqe. I lejon zhvilluesit të vendosin gjerësinë e ekranit për pajisjet, e cila është e specifikuar në css.
Meta etiketa e portit të shikimit është shkruar kështu:
- gjerësia=gjerësia e pajisjes- do të thotë që gjerësia e faqes së sajtit është caktuar që të përputhet me gjerësinë e ekranit të pajisjes.
- shkalla fillestare=1.0- Ky atribut do t'i tregojë shfletuesit të vendosë hartën e shkallës 1:1 për pikselët, që do të thotë pa shkallëzim.
Majtas pa meta-etiketë, djathtas me meta-etiketën e pamjes.
Gjithashtu, atributet dhe parametrat e tjerë mund të vendosen për etiketën meta.
Pyetjet në media
CSS3 luan një rol të madh në zhvillimin e faqeve të internetit të përgjegjshme. mediapyetje(pyetje mediatike). Kërkesat e medias përfshijnë një lloj media (printera, telefona inteligjentë, ekrane, televizorë, projektorë, etj.) dhe një gjendje që nga ana tjetër mund të jetë e vërtetë ose e rreme (e vërtetë, e rreme). Në varësi të faktit nëse lloji i medias është i saktë dhe nëse kushti plotësohet, do të aplikohen stile të ndryshme css. Nëse është e vërtetë, atëherë do të aplikohen stilet e specifikuara në këtë pyetje mediatike, nëse është false, atëherë do të aplikohen stilet normale css.
Falë kërkesave të tilla, krijohen ekrane të ndryshme faqesh për celularët, tabletët dhe ekranet e monitorit. Mbështetet nga të gjithë shfletuesit modernë.
Është shkruar si më poshtë:
Ekrani @media dhe (gjerësia maksimale: 1000 px) ( .class (vetia: vlera; ) )
- @media– pyetje mediatike;
- ekran– media – lloji (i quajtur edhe lloji i medias);
- gjerësia maksimale: 1000 px- një kusht që duhet të plotësohet (në rastin tonë, stilet do të aplikohen nëse gjerësia e dritares është më e vogël se 1000px gjerësia);
- . klasës– shkruhen përzgjedhësit përkatës (klasat, id) në të cilët vendosen vlera të reja për vetitë.
Në shumicën e rasteve, veçoritë e mëposhtme të medias përdoren për të zhvilluar dizajn të përgjegjshëm.
- gjerësia maksimale: gjerësia- do të thotë që nëse gjerësia e dritares së shfletuesit është më e vogël se gjerësia e specifikuar, atëherë kushti plotësohet dhe aplikohen stilet e duhura (shembull: max-width: 768px, do të thotë se nëse gjerësia e dritares së shfletuesit është më e vogël se 768px , atëherë duhet të përdoren stilet e specifikuara në pyetjen e medias).
- min-gjerësia: gjerësia- do të thotë se nëse gjerësia e dritares së shfletuesit është më e madhe se gjerësia e specifikuar, atëherë kushti plotësohet dhe aplikohen stilet e specifikuara në kërkesë (shembull: min-gjerësia: 480px).
Por mund të përdoren edhe funksione të tjera: ngjyra, gjerësia e pajisjes, rrjeti, lartësia, orientimi: peizazhi, orientimi: portret, rezolucioni dhe të tjera.
Quhen edhe vlerat që përdoren në veçoritë e medias pikat e ndërprerjes(pikat e thyerjes ose pikat e kontrollit). Në këto pika kontrolli, ju e merrni me mend, dizajni i faqes ndryshon.
- 320 px- celular
- 480 px- celular
- 768 px- tableta
- 1024 px- tableta, netbook
- 1280 px dhe më shumë - kompjuterë personalë.
Pikat e ndërprerjes mund të mos jenë të lidhura rreptësisht me disa rezolucione të ekranit, pasi ato mund të krijohen me parametra të tjerë në ato vlera ku faqosja prishet dukshëm, nuk shfaqet si duhet, pushon së shfaquri saktë.
Pyetjet e medias përdorin gjithashtu operatorë logjikë si:
- dhe- logjike DHE, përdoret për të kombinuar disa kushte (shembull: @media print dhe (color) ( ... )).
- jo– logjik NOT, përdoret për të mohuar kushtin (shembull: @media jo të gjitha dhe (ngjyra) (… )).
- vetëm– zbatohet për shfletuesit më të vjetër që nuk mbështesin pyetjet e medias (shembull: ekrani @media vetëm dhe (gjerësia maksimale: 1300 px) (… )).
Pyetjet e medias shkruhen në fund të skedarit të stilit, pas të gjitha stileve kryesore css.
Si të bëni një dizajn të përgjegjshëm të faqes në internet nga një plan urbanistik fiks
Pra, le të themi se keni një temë pune në internet me madhësi fikse që dëshironi të mbani dhe ta bëni atë një plan urbanistik të përgjegjshëm, por nuk dini nga të filloni. Më pas, unë do t'ju tregoj se si mund të bëhet kjo, nëse mund të bëhet fare, dhe çfarë duhet bërë, ku të filloni.
- Para së gjithash, ne bëjmë një kopje rezervë të shabllonit (temës), për çdo rast.
- Tjetra, na duhet një program për redaktimin e css, ai mund të jetë çdo redaktues kodi, për shembull kllapa nga adobe, është falas ose Notepad ++.
- Si dhe shfletuesi google chrome, me inspektorin e tij të kodit (i quajtur me tastin F12).
Më pas, le të fillojmë redaktimin, për lehtësi, mund ta transferoni shabllonin në Denver (server lokal) ose në një nëndomain, cilido që është më i përshtatshëm për ju, në mënyrë që përdoruesit të mos shohin të gjitha modifikimet që do të ndodhin me paraqitjen. Para së gjithash, le të shtojmë etiketën meta të viewport, kam shkruar për të më lart në formën e rekomanduar. 
Më pas, ne duhet të konvertojmë të gjitha njësitë statike të matjes në njësi relative të matjes.
Këto janë px, ju duhet t'i konvertoni ato në%, dhe t'i vendosni fontet në em. Kjo kryesisht ka të bëjë me gjerësinë dhe fontet.
Gjerësia e kontejnerit kryesor të mbështjellësit (max-width: 960px;) lihet e pandryshuar, nëse gjerësia është e shkruar, ndryshojeni atë në max-width. Për pjesën tjetër të kontejnerëve, ne do ta ndryshojmë gjerësinë në raportin %. Ne do të përkthejmë sipas formulës:
madhësia e kontejnerit (px) / madhësia e kontejnerit kryesor (prind) në (px) * 100% = rezultat (%)
Për shembull, një kontejner i trupit statik të faqes është 720 px, madhësia e kontejnerit kryesor (prindi i tij), për shembull, standardi 960 px, atëherë marrim 720/960*100=75% e mëposhtme. 
Kështu, ne do ta transferojmë paraqitjen tonë statike në gome. Më pas, ne do t'i përkthejmë fontet tona, nëse ato janë brenda px në em Për ta bërë këtë, ne përsëri përdorim formulën:
Madhësia e shkronjave (px) / 16 px (madhësia standarde) = madhësia e shkronjave (em)
Për shembull, madhësia e shkronjave është 32 px, pastaj 32/16=2em. 
Pastaj ne do t'i bëjmë imazhet tona adaptive. Për ta bërë këtë, shkruani vetitë dhe vlerat e mëposhtme në css.
Img (gjerësia maksimale: 100%; lartësia: automatike; )
Kjo metodë përshtat mirë imazhet, e vetmja gjë është se nuk zvogëlon peshën e imazheve, që do të thotë se imazhet me peshë të madhe do të ngarkohen në pajisjet mobile. Për të shmangur këtë, është e nevojshme të ngarkoni fotografi të ndryshme në varësi të madhësisë së ekranit.
Pasi të keni bërë të gjitha këto ndryshime, nëse keni bërë gjithçka në mënyrë korrekte, atëherë asgjë nuk duhet të ndryshojë në sit, dhe nëse përpiqeni të zvogëloni dritaren e shfletuesit, dizajni dhe fotografitë duhet të tkurren.
Epo, tani themeli ynë është gati, tani ju duhet të përcaktoni pikat e kontrollit në të cilat do të rindërtohet faqosja, mendoni se si do të sillen blloqet, çfarë do të fshehim dhe t'i shkruani të gjitha në pyetjet e medias. Ne do të përcaktojmë këto pika kthese duke përdorur shfletuesin google chrome.
Hapni paraqitjen tonë në të, shtypni tastin F12 dhe ne do të zvogëlojmë madhësinë e dritares së shfletuesit. Në këndin e sipërm të djathtë, ne do të shkruajmë dimensionet e dritares, ne jemi të interesuar për vlerën e parë, ajo tregon gjerësinë. Është e nevojshme të kompresohet derisa dizajni të mos shfaqet më saktë. Në atë madhësi, kur faqosja nuk duket e saktë, ne do të krijojmë një pikë kontrolli. 
Pasi të kemi përcaktuar pikën e parë të thyerjes, ne do ta shkruajmë atë në skedarin style.css në fund pas të gjitha stileve kryesore. Le të themi se faqosja jonë ka një shirit anësor të majtë dhe një pjesë të përmbajtjes me njoftime, dhe në 910px faqja fillon të shfaqet gabimisht. Në këtë rast, ne do të shkruajmë pyetjen e mëposhtme të medias.
Ekrani @media vetëm dhe (max-width: 910px)( /* ne bëjmë pjesën e përmbajtjes me gjerësi të plotë, anulojmë shtrirjen */ seksionin ( gjerësia: 100%; float: asnjë; ) /* bëjmë gjithashtu shiritin anësor me gjerësi të plotë, anuloni shtrirje*/ mënjanë (gjerësia: 100%; notimi: asnjë; ) )
Nëse këto blloqe kanë ndonjë kufi (diferencë, mbushje), ato ose duhet të vendosen në zero ose të merren parasysh kur shkruani gjerësinë. Për shembull, mbushje: 2% atëherë gjerësia do të shkruhet si më poshtë gjerësia: 96%.
Kështu, ne kemi përshtatur paraqitjen tonë në një rezolucion më të vogël se 910px. Nëse dritarja e shfletuesit është më e vogël se 910 px, atëherë përmbajtja do të bëhet me gjerësi të plotë dhe shiriti anësor do të lëshohet nën pjesën e përmbajtjes dhe do të bëhet gjithashtu gjerësia e plotë.
Me të njëjtin parim, ne krijojmë pjesën tjetër të pikave të ndërprerjes, gjejmë gjerësinë në të cilën prishet faqosja (nuk duket mirë), shkruajmë pyetjen e medias, formojmë stile për të, vendosim gjerësinë e blloqeve, mund të fshihemi blloqe më pak të rëndësishme ( shfaqja: asnjë).
Siç mund ta shihni, në këtë shembull, pikat e ndërprerjes nuk do të lidhen në mënyrë të ngurtë me madhësitë e ekranit, gjë që garanton një shfaqje të mirë të faqes në pajisje të ndryshme, pavarësisht nga rezolucioni i tyre.
Do t'ju duhet të punoni shumë, por rezultati nuk do t'ju mbajë në pritje dhe do të jeni në gjendje të bëni në mënyrë të pavarur një dizajn përshtatës të faqes në internet nga një plan urbanistik fiks.
Epo, kjo është gjithçka që doja të tregoja në këtë artikull, doja të shkruaja pak për dizajnin adaptiv, por doli të ishte mjaft voluminoz, shpresoj që materiali të jetë i dobishëm për ju.
Përshëndetje! Kohët e fundit, duke parë statistikat e një prej projekteve të mia, kuptova se është koha për të mësuar se si të krijojmë një dizajn përshtatës të faqes në internet, domethënë një dizajn që do të duket i mirë si në kompjuterë desktop dhe laptopë, ashtu edhe në pajisje celulare. Hidhini një sy, sugjerime metrike.
Si ju pëlqen kjo foto? Ndoshta, në disa tema, përqindja e trafikut celular do të jetë më e vogël, në të tjera do të jetë më shumë, por në çdo rast, nuk është më e mundur të injoroni vizitorët që ju lexojnë nga një smartphone ose tablet.
A e dini se si përdoruesit e celularëve e shohin faqen tuaj? Për fat të mirë, ekziston një shërbim i shkëlqyer për verifikim - responsinator.com
Këtu gjithçka është jashtëzakonisht e thjeshtë - futni adresën e faqes dhe shihni se si duket në pajisjet celulare. Për shembull, le të shikojmë një blog që ndoshta është i njohur për të gjithë.
Alexander Borisov ka një shabllon të bukur, mund të shihni menjëherë se paratë janë investuar në dizajn dhe paraqitje, dhe jo të vogla. Sidoqoftë, është shumë e papërshtatshme të lexosh blogun në një telefon dhe nuk do të habitesha nëse shkalla e fryrjes midis përdoruesve të pajisjeve celulare është shumë më e lartë se ata që hyjnë në faqe nga një kompjuter.
Çfarë duhet bërë? Ka dy rrugëdalje: lini gjithçka ashtu siç është dhe shikoni sesi projektet e tjera anashkalojnë tuajat në rezultatet e motorit të kërkimit, ose bëni dizajnin e faqes suaj përshtatëse.
Çfarë është dizajni i përgjegjshëm
Në fillim, nuk pashë ndryshimin midis paraqitjes adaptive dhe të lëngshme, kur madhësitë e bllokut ndryshojnë në varësi të gjerësisë së ekranit. Megjithatë, ka një ndryshim.
Dizajni reagues jo vetëm që shtrihet ose tkurret në gjerësi, ai përshtatet me madhësinë e ekranit, ndonjëherë duke ndryshuar plotësisht stilin e blloqeve.
Shembulli më i thjeshtë: zona e përmbajtjes shtrihet në gjerësinë e plotë të ekranit dhe shiriti anësor ose lëviz poshtë ose zhduket fare nga faqja. Ose menyja nga horizontali i zakonshëm kthehet në një listë rënëse.
Si të bëni një dizajn të përgjegjshëm për faqen tuaj të internetit
Në varësi të buxhetit tuaj dhe njohurive të CSS/HTML, mund të ketë disa opsione.
Porosit një plan urbanistik adaptiv nga një profesionist i pavarur
Opsioni më i saktë, për mendimin tim, dhe është gjithashtu më i papëlqyeri. Sepse kënaqësia nuk është e lirë. E megjithatë, nëse fondet lejojnë dhe nuk ka dëshirë për të kuptuar ndërlikimet e paraqitjes, është më mirë të gjeni një studio ose një profesionist i pavarur që do të përshtatë shabllonin tuaj për pajisjet celulare ose do të bëjë një të ri. Dhe ju tashmë e dini se si ta kontrolloni funksionimin e tij në pajisje me rezolucione të ndryshme - responsinator.com do t'ju ndihmojë.
Gjeni një dizajn të përfunduar
Kohët e fundit, pothuajse të gjithë projektuesit po përpiqen t'i përshtatin shabllonet e tyre me pajisjet celulare. Ju mund të kërkoni një dizajn të gatshëm, për shembull, këtu:
- www.templatemonster.com është një nga koleksionet më të njohura të shablloneve me pagesë për uebsajte të ndryshme CMS dhe vetëm HTML.
- www.templatemo.com - Shumë opsione falas të dizajnit modern.
Ky opsion është i përshtatshëm për ata që nuk ndjekin një dizajn ekskluziv ose janë në gjendje të bëjnë ndryshimet e tyre në kod, në mënyrë që ta bëjnë shabllonin unik.
Përdorni korniza
Korniza (korniza) - mund të thuhet, korniza e shabllonit, skedarët e tij kryesorë dhe rrjeti i blloqeve. Dizajnerët i duan ata për komoditetin dhe kursimin e kohës, sepse "peshku" i gatshëm i shabllonit ju lejon të mos humbni kohë në një rutinë. Nëse dini të punoni me korniza, përdorimi i tyre për të krijuar një dizajn të përgjegjshëm është një zgjidhje e shkëlqyer.
Do të gjeni një listë të madhe të kornizave përshtatëse për çdo shije në Habré. Por shumica e tyre janë mjaft të vështira për t'u përdorur dhe të rënda në vëllim. Prandaj, për ata që e duan minimalizmin, unë rekomandoj një listë tjetër të kornizave të lehta të përgjegjshme nga Beloweb.ru. Në të njëjtën kohë, hidhni një vështrim më të afërt në blog, ka shumë "ëmbëlsirë" të dobishme për stilistët dhe stilistët.
Bëni paraqitjen tuaj
Kjo metodë është për ata që nuk kërkojnë mënyra të thjeshta dhe duan ta kuptojnë vetë. Në thelb, për ta bërë shabllonin tuaj të përgjegjshëm, duhet të përdorni dy gjëra:
meta etiketa e portit të pamjes
E cila përcakton llojin e pajisjes nga e cila vizitori ka hyrë në faqe dhe vendos gjerësinë e saktë të ekranit. Thjesht kopjoni këtë kod në kokën e faqes tuaj.
Rregulli @media
Falë të cilit ne mund të shkruajmë stile të ndryshme për të njëjtat blloqe në skedarin tonë css. Duket diçka si kjo:
#left( gjerësia: 600px; noton: majtas; margjina-djathtas: 10px; ) #djathtas( gjerësia: 400px; noton: djathtas; ) vetëm ekran @media dhe (gjerësia maksimale: 1010px)( #majtas, #djathtas( gjerësia : 98%; lundrues: asnjë; diferencë: 10 px automatike; ) )
Në këtë shembull, blloku #majtasështë 600 px i gjerë dhe do të pozicionohet në të majtë të bllokut #e drejte 400 piksele e gjere. Por nëse rezolucioni i monitorit është më pak se 1010 pikselë, ne i mbështjellim të dy blloqet dhe i shtrijmë në 98% të gjerësisë së ekranit.
Dhe kështu duhet të shkruani rregullat për madhësitë e mëposhtme të ekranit:
- 320 pikselë për iPhone 3-5 drejt
- 480px për iPhone 3-4 në pozicionin peizazh
- 568 px për iPhone 5 në pozicionin peizazh
- 384 px për smartphone në pozicion vertikal
- 600px për smartphone në pozicion horizontal
- 768 px për iPad në pozicionin peizazh
- 1024 px për iPad në këmbë
Lista e plotë e lejeve mund të gjendet në responsinator.com ose në raportin Yandex.Metrica për faqen tuaj (seksioni Teknologjitë/Rezolucionet e ekranit). Me një fjalë, për ata që janë të njohur me paraqitjen e faqeve, nuk do të jetë e vështirë të kuptojnë këtë çështje.
E dini, unë rrallë jap lidhje me kurse me pagesë (sepse nuk rekomandoj kurrë diçka që nuk e kam përdorur kurrë vetë), por ky është me të vërtetë materiali më i mirë trajnimi për paraqitjen që kam parë ndonjëherë. Falë Mikhail-it, modeli im i blogut tani jo vetëm që është përshtatur me rezolucione të ndryshme të ekranit, por është bërë më i lehtë se versioni i mëparshëm dhe është optimizuar më mirë për motorët e kërkimit.
Nga rruga, nëse po lexoni një artikull nga një telefon celular, shkruani, a është gjithçka në vend, a është gjithçka e përshtatshme? Dhe kjo është e gjitha për sot. Nëse keni ndonjë pyetje ose shtesë - mirëpresim në komente, si zakonisht ato janë të hapura për të gjithë.
Prania e dizajnit adaptiv është një domosdoshmëri - jeta e ka vërtetuar me grabujën e saj, asnjë Joomla Mobile nuk jep një efekt të tillë si përshtatja e drejtpërdrejtë e faqes. Sot do t'ju tregoj se si të bëni dizajn të përgjegjshëm duke redaktuar stilet CSS me kokën dhe gishtat. Nuk do të funksionojë të vendosësh gjithçka në raftet, pasi çdo shabllon ka nuanca, por unë do të jap një shtysë për të filluar përshtatjen.
Përshtatja e desktopit
Për të filluar, ne po përshtatemi me desktopin. Kjo është faza bazë, nga ku fillojnë vallet me dajre. Shumë njerëz gabimisht e perceptojnë botën, duke menduar se nuk kanë probleme për të shfaqur faqen në kompjuterë të zakonshëm, pasi dikush e ka krijuar shabllonin dhe duket saktësisht në rezolucion normal. Në rezolucionin e monitorit tuaj po, por në një ekran më të madh, si dukeni me absolute dhe piksele në një ekran 1920x1080? Qëllimi i përshtatjes së dizajnit është shfaqja normale e faqes në pajisjet celulare dhe mungesa e bllokimeve në ekrane të mëdha.
Cfare po bejme? Gjëja kryesore është të përktheni të gjitha vlerat e mëdha në css të shabllonit nga pikselët (px) në përqindje (%). Këtu ka disa rregulla:
- - Ndryshoni px në % vetëm për vlera të mëdha, nuk keni nevojë të ndryshoni 5 px në 1% (për shembull),
- - Kryeni të gjithë punën përmes Firebug, më pas transferoni vlerat në reale.
Pak për një kuptim të përgjithshëm. Ju keni një sajt ku gjerësia e faqes është 1000 px, ai ka tre blloqe - një qendror 800 px dhe dy shirita faqesh nga 100 px secili. Kjo do të thotë që pas zëvendësimit me përqindje, madhësia e faqes do të jetë 100%, kontejneri qendror do të jetë 80% dhe blloqet anësore do të jenë 10% secili. E keqe, por e kuptueshme. Tani pak më shumë specifika.
Përpara përshtatjes (e ruajta skedarin e vjetër CSS për histori), kontejneri kryesor u shkrua në stile të tilla:
#container(margjina: 0 automatike; gjerësia: 1100 px; ...
Pas përshtatjes u bë kështu:
#container(margin: 0 automatik; gjerësia: 77%; tejmbushja: e fshehur !e rëndësishme; ...
Menuja kryesore ndryshoi nga:
top-menu>ul>li ul(gjerësia:155px; ...
Top-menu>ul>li ul(gjerësia:90%; ...
Dhe kompensimi i bllokut të përmbajtjes zbatohet me:
#përmbajtje (margjina: 0 220 px; ...
#përmbajtje (diferencë: 0 20% ...
Kushtojini vëmendje kodit:
vërshoj: i fshehur !i rëndësishëm;
Ne heqim lëvizjen horizontale me të, kjo është e dobishme për përshtatjen e celularit, ndonjëherë ka kuptim të tregohet vetëm ndalimi i lëvizjes horizontale me:
vërshimi-x: i fshehur !i rëndësishëm;
Kryeni të gjithë punën përmes Firebug ose Google Inspector, kontrolloni me sytë tuaj - faqja duhet të duket e njëjtë pas konvertimit të px në %. Nuk keni nevojë të kompresoni ende ekranin, ne nuk kemi arritur ende përshtatjen e celularit, ndërkohë që kemi bërë punën bazë për ekranet e mëdhenj.
CSS për pajisjet mobile
Baza u krijua, nga rruga, kjo është faza më e vështirë, tani duhet të sigurohemi që faqja të shfaqet saktë në të gjitha pajisjet celulare. Ka pak manipulime të mëparshme, pasi nuk do të funksionojë të kompresoni gjithçka në përqindje nën një ekran të vogël. Pajtohem, është e pamundur të shihet në një telefon inteligjent me një rezolucion prej 320 px në gjerësi një shirit faqeje prej 10%.
Do të na duhet të përdorim ekranin @media dhe i cili do të ndryshojë stilet për pajisje të veçanta me rezolucion. Fillimisht përcaktova duke ulur ekranin e shfletuesit se me çfarë rezolucioni fillojnë problemet e mia të ekranit. Duke ngushtuar ekranin, gjeta pikën time të "lakimit", ajo fillon me një gjerësi prej 1000 px, kështu që ju duhet të përshkruani stilet kryesore celulare nga këtu - gjithçka që do të shfaqet më shumë në stilet e një desktopi të rregullt, që është më pak në stile të veçanta.
Shembull ekrani @media dhe
Kam shkruar CSS për pajisjet celulare në një shabllon Joomla 1.5 si ky:
Ekrani @media dhe (gjerësia maksimale: 500 px) (trupi, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto; viza:auto;)
Ekrani @media dhe (gjerësia maksimale: 400 pikselë) (td (thyerja e fjalëve: thyejnë të gjitha;)
Ekrani @media dhe (gjerësia maksimale: 1000 px) (td(thyerja e fjalëve: thyejnë të gjitha;) .numrat e faqeve, #footer, #navigimi, #header,.logo,.nav-box (ekrani: asnjë !i rëndësishëm ;) #content (pozicioni: automatik; gjerësia: 80%; margin-fund: 0; margin-left: 10%; margin-djathtas: 20%;) #container (gjerësia: 90% !i rëndësishëm;) .content-box (widht:110%) .content-box h1 (font-size: 130%;) .content-box h2 (font-size: 110%;) .content-box h3 (font-size: 120%;) .content -kutia h4 (madhësia e shkronjave: 100%;) .top-menu>div (mbushje-djathtas: 0px !important;) img(max-width:96% !important;lartësia:auto !important;)
Pak specifika mbi kodin.
Kur gjerësia e ekranit është më e vogël se 1000 px, shiritat e faqes sime anësore, koka, faqet dhe fundi i faqes nuk shfaqen më. IMHO ime - ato nuk janë të nevojshme në versionin celular. Kjo është ajo që bën kodi:
Numrat e faqeve, #footer, #navigation, #header, .logo, .nav-box (ekrani: asnjë !i rëndësishëm;).
Si parazgjedhje, në celularin Joomla 3 dhe më lart, blloqet anësore zbresin, duke e shtrirë faqen deri në turp, kështu që në motorët e rinj mund të shkulni diçka me doreza.
Vlerat e tjera përcaktohen gjithashtu për blloqet e kontejnerit kryesor dhe dritares së përmbajtjes, dhe dalja H1-H4 konvertohet në përqindje (për desktop, pikselët më përshtaten). Ndryshime janë bërë edhe në daljen e menysë së sipërme (për mirë, duhet të minimizohet, por kjo nuk është kritike dhe do ta bëj më vonë) dhe shfaqja e fotove është ndryshuar:
img(gjerësia maksimale:96% !e rëndësishme;lartësia:auto !e rëndësishme;).
Për ta, tregohet se madhësia maksimale e imazhit në gjerësi është 96% (me dhëmbëza është e bukur), dhe lartësia vendoset automatikisht.
Specifikat kanë mbaruar, edhe një herë në kuptimin e përgjithshëm të përshtatjes së një faqeje (dizajni) përmes CSS.
- - Ndrysho vlerat e mëdha të px në %,
- - Ne përshkruajmë veçmas ekranin @media dhe për pajisjet celulare.
Sigurohuni që të mbyllni blloqet e ekranit që janë të panevojshëm për celularin duke përdorur ekranin @media dhe , por konvertoni në% ato vlera që shfaqen gabimisht, pasi ato u lanë në pikselë në versionin desktop të CSS.
Si rezultat, lehtësia ndaj përdoruesit kur punoni me Joomla Mobile ishte 65-70%, me dizajn adaptiv në CSS, u bë 99%. Përfundime në fytyrë - kontrolli i Yandex dhe Goole për përshtatshmëri nuk u kalua, tani po kalon me zhurmë.
Bërja e një shablloni të përgjegjshëm të faqes është mjaft e lehtë, por mbajtja e elementeve të balancuara në të gjitha pikat e ndryshimit në shabllon është arti i vërtetë. Ky tutorial prezanton 5 metoda për t'u përdorur në CSS për një shabllon të përgjegjshëm. Ka veti shumë të thjeshta CSS si min-width, max-width, overflow dhe vlerat relative, por të gjitha ato luajnë një rol të rëndësishëm në zhvillimin e dizajnit të përgjegjshëm.
1. Video e përgjegjshme
Ky truk CSS lejon që videoja e integruar të shtrihet në kufijtë e caktuar.
Video ( pozicioni: relative; mbushje-fund: 56,25%; lartësia: 0; tejmbushje: e fshehur; ) .iframe video, .objekt video, .vendosja e videos ( pozicioni: absolute; lart: 0; majtas: 0; gjerësia: 100% ; lartësia: 100%;)
2. Gjerësia minimale dhe maksimale
Vetia max-width ju lejon të vendosni gjerësinë maksimale të një elementi. Duhet të përdoret për të parandaluar zgjerimin e një elementi përtej kufijve të caktuar.
Enë me veti të gjerësisë maksimale
Shembulli i mëposhtëm përcakton një madhësi kontejneri prej 800 px por vendos një kufi të madhësisë së kufirit prej 90%.
Enë (gjerësia: 800 px; gjerësia maksimale: 90%; )
Imazhi i përgjegjshëm
Ju mund të ndryshoni madhësinë e një imazhi automatikisht në madhësinë e tij maksimale duke përdorur veçoritë max-width:100% dhe height:auto.
Img (gjerësia maksimale: 100%; lartësia: automatike; )
Kodi i mësipërm i imazhit të përgjegjshëm funksionon në IE7 dhe IE9, por nuk funksionon në IE8. Për të rregulluar situatën, duhet të shtoni veçorinë gjerësi:auto . Ju mund të përdorni një rregull të kushtëzuar CSS posaçërisht për IE8 ose trukun e mëposhtëm për IE:
@media \0ekran ( img ( gjerësia: automatik; /* për dmth 8 */ ) )
veti min-gjerësi
Vetia min-gjerësi është e kundërta e vetive max-width. Ai përcakton gjerësinë minimale të mundshme të një elementi. Më poshtë është një shembull i përdorimit të vetive min-width për të parandaluar që fusha e hyrjes të bëhet shumë e vogël kur zmadhohet.
3. Vlerat relative
Në një shabllon të përgjegjshëm, përdorimi i vlerave relative mund të thjeshtojë shumë kodin tuaj CSS dhe të përmirësojë pamjen e dizajnit tuaj.
Kufijtë relative
Më poshtë është një shembull i komenteve që përdorin gjerësinë relative të margjinës së majtë për të futur strukturën e pemës. Në vend të një vlere absolute në px, përdoret vlera e përqindjes për nivelin tjetër në listë. Në anën e majtë të figurës, mund të shihni se në pajisjet celulare, hapësira e disponueshme për artikujt e listës mund të mos jetë e mjaftueshme për shfaqje normale nëse përdoren vlera absolute.
Madhësia relative e shkronjave
Duke përdorur vlera relative për madhësinë e shkronjave (em ose %), është mjaft e lehtë të arrihet një ndryshim përkatës në lartësinë e rreshtit dhe madhësitë e dhëmbëzimit kur përshtatni shabllonin me madhësinë e ekranit të pajisjes. Për shembull, të gjithë elementët e lidhur ndryshohen automatikisht kur përcaktohen madhësitë e reja të shkronjave të elementit prind.
Ndarjet relative
Figura më poshtë tregon përfitimet e përdorimit të një vlere relative % për mbushje. Kutia në të majtë ka hapësirë të pabalancuar kur përdoren vlera absolute px. Blloku në të djathtë ka një pamje të mrekullueshme me mbushje proporcionale të përmbajtjes.
4. Mashtrim me tejmbushje: pronë e fshehur
Mund të anuloni mbështjelljen e tekstit rreth një elementi duke përdorur veçorinë e tejmbushjes. Një mënyrë shumë e thjeshtë dhe e dobishme. Mund të zhbëni mbështjelljen e tekstit të elementit të mëparshëm dhe të ruani strukturën e përmbajtjes.
Vetia e gjerësisë maksimale ndihmon në përshtatjen e tekstit të pathyeshëm (si p.sh. një URL e gjatë) në disa rreshta në vend të vetëm një.
Fjala e thyer (fjalë-mbështjellje: fjalë e thyer;)
Përkthimi i artikullit jashtëzakonisht të vlefshëm "Teknikat, mjetet dhe strategjitë e dizajnit të përgjegjshëm të uebit" nga botimi i njohur në internet për zhvilluesit Smashing Magazine.
Në janar, ne botuam një artikull mbi dizajnin reagues të quajtur Dizajni i përgjegjshëm i uebit: Çfarë është dhe si ta përdorim atë. Dizajni i përgjegjshëm i uebit vazhdon të tërheqë shumë vëmendje, por duke pasur parasysh se sa i ndryshëm është nga metodat tradicionale të zhvillimit të faqeve të internetit, mund të duket dërrmues për projektuesit dhe zhvilluesit që nuk e kanë provuar atë.
Për këtë arsye, ne kemi përpiluar një pasqyrë të burimeve të dobishme në krijimin e faqeve të internetit të përgjegjshme. Rishikimi përfshin udhëzues të detajuar, qasje, mjete, artikuj që përmbajnë këshilla praktike të nevojshme për të krijuar uebsajtin tuaj të përgjegjshëm.
Teknika responsive të dizajnit të uebit
1. Tranzicionet CSS dhe pyetjet në mediaTranzicionet CSS dhe pyetjet e medias
Elliot Jay Stocks hyn në detaje rreth metodës së kombinimit të pyetjeve të medias CSS dhe tranzicioneve CSS. Ideja bazë është kjo: kur dizajnoni një sajt të përgjegjshëm me Media Queries, ju po ndryshoni vazhdimisht gjerësinë e shfletuesit tuaj për të parë se si sillet faqja ndërsa e bëni këtë. Por sa herë që ekzekutohet një nga pyetjet tuaja të medias, shihni një tranzicion të vështirë midis stileve (i pari, për shembull, për desktop, i dyti për tabletët). Pse të mos përdorni tranzicionet CSS për të zbutur ato tranzicione të vështira me animacion?
Imazhe dhe video të përgjegjshme
5 Imazhe FluidImazhe gome (zmadhimi i shfletuesit)
Imazhet e lëngshme janë një nga temat qendrore në dizajnin e përgjegjshëm të uebit. Artikulli i Ethan Marcotte ofron një përmbledhje të detajuar të krijimit të tyre me një copë kodi klasik img (gjerësia maksimale: 100%; ), si dhe të gjitha pjesët e nevojshme për të filluar.
Email të përgjegjshëm
14. Optimizimi i emailit tuaj për pajisjet celulare me pyetjen e mediasOptimizimi i postës elektronike për pajisjet celulare me pyetje në media
Email-et e mëdha shpesh kërkojnë lëvizje horizontale, veçanërisht kur një imazh i madh i bashkëngjitet emailit. Në këtë studim, Campaign Monitor shpjegon se si emailet mund të optimizohen për pajisjet celulare që përdorin Pyetjet në media dhe sugjeroi disa metoda të dobishme dhe copa kodi për përdorim praktik.
Mjete të përgjegjshme të dizajnit të uebit
ju mund të dizajnoni dizajn adaptiv nga e para ose përdorni mjetet e listuara më poshtë për të shpejtuar dhe thjeshtuar procesin e krijimit të tij.Ky është një Polyfill i shpejtë dhe i lehtë (pjesë kodi që shton funksionalitetin që nuk mbështetet nga shfletuesi) i krijuar nga Scott Jehl për të mbështetur veçoritë e gjerësisë min dhe gjerësisë maksimale të pyetjeve të medias CSS3 në IE6-IE8 dhe më lart.
Përdorni informacionin në këtë mjet të vogël për të krijuar një faqe interneti të përgjegjshme.
Mjet i përgjegjshëm i projektimit të shpejtë të prototipit. Ju mund të dizajnoni CSS për madhësi të ndryshme të njohura të ekranit, orientime dhe shfletues, qofshin ato telefona (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tableta (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitorë ose TV ( 720p, 1080p).
Ju mund t'i shikoni rezultatet e dizajnit direkt në shfletues dhe të përdorni mjetet e zhvillimit me të cilat jeni mësuar, si Firebug. Provoni gjithashtu mjetin alternativ ScreenFly.
Vegla 320 dhe Up bazohet në parim celulari së pari(Mobile First), në të cilin dizajnet ndërtohen fillimisht për ekranet e celularëve dhe më pas zgjerohen në tableta, desktop dhe ekrane të mëdhenj. Funksionon mirë edhe si shtesë në pllakën e bojlerit HTML5 dhe më vete.
Këta janë shabllone të personalizueshëm për ndërtimin e aplikacioneve të uebit celular të pasur me performancë të lartë. Ju do të merrni përputhshmëri me shfletues për telefonat inteligjentë të klasës A dhe mbështetje të mirë për BlackBerry, Symbian dhe IE Mobile të vjetër. Si dhe një numër i madh i optimizimeve të ndryshme për shfletuesit celularë.
Kornizat e projektimit të përgjegjshëm
33,1140 CSS Grid1140 CSS Grid është optimizuar për të punuar në ekrane që variojnë nga madhësia e pajisjes celulare deri te monitorët me gjerësi 1280 piksele. Është një rrjet i thjeshtë dhe fleksibël duke përdorur Pyetjet në media.
Ky kuadër CSS është një bazë e mirë për t'u zhvilluar në ekrane të vegjël (si telefonat) dhe ekrane të vegjël (si tabletët) menjëherë me përpjekje minimale. Për më tepër, ekziston një gjenerator për krijimin e një kornize CSS gome për veten tuaj.
Flurid është një rrjet gome me kolona 6, 7, 8, 9, 10, 12 dhe 16.
FluidGrids është një gjenerator i rrjetit modular që krijon paraqitje kolonash 6, 7, 8, 9, 10, 12 ose 16.
Korniza CSS për krijimin e paraqitjeve të përgjegjshme. Ai përmban 4 paraqitje bazë dhe tre grupe tipografie.
Kornizë gome me theks në tipografi.
Tiny Fluid Grid do t'ju ndihmojë të krijoni rrjetën tuaj fluide prej 12, 16 ose 24 kolonash, të vendosni gjerësinë e tyre maksimale dhe minimale dhe përqindjet e mbushjes.
Strategjitë e projektimit të përgjegjshëm
40. Rrjedha e punës e projektuesit të përgjegjshëmRrjedha e punës e përgjegjshme e zhvilluesit të dizajnit të uebit
Luke Wroblewski përshkroi një prezantim nga Ethan Marcotte mbi zbatimin e parimeve të dizajnit të përgjegjshëm të uebit për të ridizajnuar faqen e internetit të një gazete kryesore. Ndër të tjera, Ethan shpjegon se si i qaset metodologjisë responsive të dizajnit të uebit dhe si është procesi i prototipit në kontekstin e dizajnit të përgjegjshëm të uebit.
Luke Wroblewski mbajti shënime në Konferencën e Zhvillimit Breaking gjatë fjalimit kryesor të Stephen Hay mbi realitetet e dizajnit të pajisjes.
Diskutime dhe këndvështrime të ndryshme mbi dizajnin e përgjegjshëm të uebit
Këta artikuj, megjithëse nuk janë një udhëzues, mund t'ju japin një pasqyrë të vlefshme se pse duhet të përdorni teknika të përgjegjshme të dizajnit të uebit (dhe kur jo).Një hyrje e shkëlqyer në dizajnin e përgjegjshëm si një mënyrë të menduari, jo si një mjet apo teknikë. Jeremy Keith argumenton se dizajni i përgjegjshëm i uebit nuk mund të shtohet thjesht si një hap në një rrjedhë pune ekzistuese. Në vend që të ndjekim përsosmërinë e pikselit, ne duhet të përpiqemi për përsosmërinë e proporcionit.
Publikimi është një kombinim i filozofisë dhe strategjisë për grumbullimin e praktikave më të mira në fushën e dizajnit të përgjegjshëm.
Një koleksion i përditësuar rregullisht i faqeve të internetit që përdorin pyetje në media.
Në Episodin 9 të The Big Web Show, Jeffrey Zeldman dhe Dan Benjamin sollën Ethan Marcotte për të diskutuar dizajnin e përgjegjshëm.
Një shtesë e shkëlqyeshme për artikullin do të jetë një blog rreth dizajnit të përgjegjshëm, ku zhvilluesit ndajnë përvojën e tyre dhe shkruajnë rishikime të mjeteve të përgjegjshme.
