Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • Shtëpi
  • Windows Phone
  • Paraqitja adaptive: çfarë është dhe si ta përdorim atë. Dizajni i Ueb-it përshtatës dhe i përgjegjshëm

Paraqitja adaptive: çfarë është dhe si ta përdorim atë. Dizajni i Ueb-it përshtatës dhe i përgjegjshëm

Tema e këtij muaji është reagimi i faqes në internet, kështu që vendosëm të flasim më në detaje se çfarë është dizajni responsiv i uebit, pse është i nevojshëm dhe cilat janë parimet bazë të dizajnit të përgjegjshëm të uebit.

Dizajni adaptiv i uebit është një drejtim mjaft i ri në hartimin e burimeve të uebit, por tani është një nga treguesit kryesorë të cilësisë së faqes në internet. Në këtë artikull do të flasim për atë që është dizajni i përgjegjshëm i uebit dhe çfarë mund të jetë.

Çfarë është web design responsive

Dizajni adaptiv i uebit (në anglisht "responsive web design") është dizajnimi i faqeve të internetit që ofrojnë një përvojë të shkëlqyer në pajisje të ndryshme të lidhura në internet.

Kjo do të thotë që e njëjta faqe mund të shikohet në një sërë pajisjesh, pavarësisht nga rezolucioni dhe formati i ekranit - telefonat inteligjentë, tabletët, laptopët, etj. Në të njëjtën kohë, shikimi do të jetë po aq i përshtatshëm për të gjitha formatet - përdoruesit e pajisjeve celulare, për shembull, nuk do të kenë nevojë të zgjerojnë zona individuale të faqes në mënyrë që të mos humbasin lidhjen e dëshiruar.

Dizajni i përgjegjshëm synon t'i bëjë faqet e internetit dhe shfaqjen e përmbajtjes së tyre të përshtatshme për pajisjen në të cilën ato shikohen.

Pse keni nevojë për një dizajn të përgjegjshëm në internet?

1) Një shumëllojshmëri e gjerë pajisjesh nga të cilat mund të përdorni internetin. Aktualisht, ka shumë pajisje që njerëzit përdorin, duke përfshirë edhe aksesin në internet. Të gjitha këto pajisje ndryshojnë në madhësinë e ekranit, rezolucionin dhe rrjedhimisht mënyrën se si mund të shfaqet një faqe interneti në to. Prandaj, është e rëndësishme që faqja juaj të duket e mirë dhe të shfaqet në mënyrë korrekte për çdo përdorues, pavarësisht nga pajisja që ai përdor.

2) Popullariteti i pajisjeve mobile me akses në internet dhe rritja e trafikut të internetit në celular. Me rritjen e popullaritetit të pajisjeve celulare, numri i përdoruesve që hyjnë në faqet e internetit prej tyre është rritur ndjeshëm, kështu që nuk mund t'i injoroni më thjesht - kjo nuk është një ose dy persona çdo gjashtë muaj, kjo është një pjesë e rëndësishme e audiencës suaj, dhe ata duhet të jenë të rehatshëm duke përdorur faqen tuaj të internetit (përndryshe ata nuk do ta bëjnë këtë).

3) Informacion urgjent. Nëse burimi juaj përmban lajme/informacione urgjente dhe ka një probabilitet të lartë që përdoruesi mund t'i duhet të lexojë këtë informacion nga telefoni (sepse ai nuk ka pajisje të tjera në dorë) në një moment të caktuar, duhet të siguroheni që ai të ketë mundësia për ta bërë këtë.

Dallimi midis një faqe interneti të përgjegjshme dhe një versioni celular (aplikacioni) të një faqe interneti

Versionet celulare të faqeve të internetit dhe aplikacioneve celulare, të krijuara posaçërisht për pajisje të ndryshme celulare, gjithashtu zgjidhin problemin e lehtësisë së shikimit të faqes së internetit, por kanë disa disavantazhe.

1) Çdo lloj sistemi operativ kërkon versionin e tij të aplikacionit / uebsajtit. Kjo kërkon burime shtesë, si kohë ashtu edhe para.

2) Nevoja për të shkarkuar aplikacionin. Për të përdorur aplikacionin tuaj, përdoruesit duhet ta shkarkojnë atë. Kjo kërkon disa përpjekje shtesë nga përdoruesit dhe shumë prej tyre nuk do ta bëjnë këtë nëse nuk janë absolutisht të sigurt se kanë vërtet nevojë për aplikacionin dhe planifikojnë ta përdorin atë rregullisht.

3) Ndarja e trafikut. Nga pikëpamja e promovimit të faqes në internet, një aplikacion celular nuk është i përshtatshëm sepse ndan të gjithë trafikun e burimeve në trafikun e uebsajtit dhe trafikun e aplikacioneve, të cilat do të duken si më pak trafik në uebfaqe.

4) Nevoja për të integruar materialet e sitit. Në rastin e një aplikacioni celular, është e nevojshme ose të sinkronizoni faqen me aplikacionin (burime shtesë), ose të bëni punë të dyfishtë për të mbushur faqen dhe aplikacionin me materiale.

Ndryshe nga aplikacionet celulare, dizajni i përgjegjshëm është një adresë faqeje, një dizajn, një sistem menaxhimi dhe përmbajtja e faqes.

Natyrisht, dizajni adaptiv ka edhe disavantazhet e veta, kryesore prej të cilave është risia relative e teknologjisë dhe si rrjedhojë mungesa e specialistëve dhe njohurive të mira për hartimin e faqeve adaptive.

Parimet e dizajnit të përgjegjshëm

Dizajni fillon me një version të përgjegjshëm të faqes në internet për pajisjet celulare. Në këtë fazë, projektuesit përpiqen të përcjellin saktë kuptimin dhe idetë kryesore duke përdorur një ekran të vogël dhe vetëm një kolonë. Përmbajtja zvogëlohet nëse është e nevojshme, duke hequr blloqet e parëndësishme të informacionit dhe duke lënë më të rëndësishmin.

  • Dizenjimi për pajisje celulare që në fazat më të hershme (“mobile pari”);
  • Përdorimi i një plan urbanistik fleksibël, të bazuar në rrjet;
  • Përdorimi i imazheve fleksibël;
  • Puna me pyetje mediatike;
  • Aplikimi i përmirësimit në rritje.

Llojet e paraqitjeve të përgjegjshme

Artikulli në Habrahabr paraqet llojet kryesore të paraqitjeve adaptive që ekzistojnë aktualisht.

1) Gome

Lehtë për t'u zbatuar dhe e dukshme për llojin e përdoruesit të prezantimit të faqes. Blloqet kryesore janë të ngjeshura në gjerësinë e ekranit të pajisjes celulare, ku kjo është e pamundur - ato riorganizohen në një shirit të gjatë.

2) Transferimi i blloqeve

Një mënyrë e qartë për një faqe me shumë kolona: kur gjerësia e ekranit zvogëlohet, blloqet shtesë (shiritat anësore) zhvendosen në fund të paraqitjes.

3) Ndërroni paraqitjet

Kjo metodë është më e përshtatshme kur lexoni një faqe nga pajisje të ndryshme: zhvillohet një plan urbanistik i veçantë për secilën rezolutë të ekranit. Metoda është intensive e punës, prandaj më pak e popullarizuar se dy të mëparshmet.


Ndërrimi i paraqitjeve

4) Përshtatshmëria "me pak gjak"

Një metodë shumë e thjeshtë që është e përshtatshme për faqe të thjeshta. Arrihet thjesht duke shkallëzuar imazhet dhe tipografinë. Jo shumë popullor, sepse... i mungon fleksibiliteti.


Përshtatshmëria me pak gjak. Fragment i faqes së internetit LukeW Ideation + Design

5) Panele

Një metodë e ardhur nga aplikacionet celulare, ku një meny shtesë mund të shfaqet me një trokitje horizontale ose vertikale. Disavantazhi kryesor është se veprimet nuk janë të dukshme për përdoruesin: është shumë e pazakontë të shohësh navigimin celular në një faqe interneti. Por me kalimin e kohës, metoda mund të bëhet mjaft popullore.


Duhet mbajtur mend se paraqitjet e paraqitura më sipër nuk janë zgjidhje universale - për secilin projekt është e nevojshme të zgjidhni metodën më të përshtatshme për nevojat dhe aftësitë.

Prania e dizajnit adaptiv është një domosdoshmëri - jeta e ka vërtetuar këtë me grabujën e saj, asnjë Joomla në celular nuk jep një efekt të tillë si përshtatja e drejtpërdrejtë e faqes në internet. Sot do t'ju tregoj se si të bëni një dizajn të përgjegjshëm duke redaktuar stilet CSS duke përdorur kokën dhe gishtat. Nuk do të jetë e mundur të vendosim gjithçka në detaje, pasi çdo shabllon ka nuancat e veta, por unë do të jap një shtysë për të filluar përshtatjen.

Përshtatja për desktop

Së pari, ne e përshtatim atë për desktopin. Kjo është faza bazë, nga e cila fillon kërcimi me dajre. Shumë njerëz gabimisht e perceptojnë botën, duke menduar se nuk kanë probleme me shfaqjen e faqes në kompjuterë të zakonshëm, pasi dikush e ka paraqitur shabllonin dhe ai duket i qetë me rezolucion normal. Me rezolucionin e monitorit tuaj, po, por po në një ekran më të madh, si dukeni me absolute dhe piksele në një ekran me rezolucion 1920x1080? Qëllimi i përshtatjes së dizajnit është shfaqja normale e faqes në pajisjet celulare dhe shmangia e çdo problemi në ekranet e mëdha.

Çfarë po bëjmë? Gjëja kryesore është të konvertoni të gjitha vlerat e mëdha në shabllonin CSS nga pikselët (px) në përqindje (%). Këtu ka disa rregulla:

  1. - Ne ndryshojmë px ​​me % vetëm për vlera të mëdha, nuk ka nevojë të ndryshojmë 5 px me 1% (për shembull),
  2. - Kryeni të gjitha punët përmes Firebug, më pas transferoni vlerat në jetën reale.

Pak për një kuptim të përgjithshëm. Ju keni një faqe interneti në të cilën gjerësia e faqes është 1000 px, ajo ka tre blloqe - një qendror 800 px dhe dy shirita faqesh anësore prej 100 px. Kjo do të thotë që pas zëvendësimit me përqindje, madhësia e faqes do të bëhet 100%, kontejneri qendror do të jetë 80%, dhe blloqet anësore do të jenë 10%. I ashpër, por i kuptueshëm. Tani pak më shumë specifika.

Para 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 ka ndryshuar 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 e përdorim atë për të çaktivizuar lëvizjen horizontale, kjo është e dobishme për përshtatjen celulare ndonjëherë ka kuptim të tregohet vetëm ndalimi i lëvizjes horizontale duke përdorur:

vërshoj-x: i fshehur !i rëndësishëm;

Kryeni të gjithë punën përmes Firebug ose inspektorit të Google, kontrolloni me sytë tuaj - faqja duhet të duket e njëjtë pas konvertimit të px në %. Nuk duhet ta zvogëloni ende ekranin, ne nuk kemi arritur ende te përshtatja e celularit, por kemi bërë punën bazë për ekranet e mëdhenj.

CSS për pajisjet mobile

Baza e të dhënave është krijuar, meqë ra fjala, 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ë jetë e mundur të ngjeshni gjithçka në një përqindje për një ekran të vogël. Pajtohem, është e pamundur të shohësh një shirit faqesh 10% të gjerë në një smartphone me një rezolucion prej 320 px.

Do të na duhet të përdorim ekranin @media dhe që bëjnë ndryshime stili për pajisjet me një rezolucion të caktuar. Fillimisht përcaktova duke ulur ekranin e shfletuesit në çfarë rezolucioni kisha probleme me ekranin. Duke ngushtuar ekranin, gjeta pikën time të "lakimit", ajo fillon në një gjerësi prej 1000 px, që do të thotë se ju duhet të shkruani stilet kryesore celulare nga këtu - gjithçka që do të shfaqet më shumë në stilet e një desktopi të rregullt, dhe 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: thyej 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;). kutia e përmbajtjes (gjerësia:110%).kutia e përmbajtjes h1 (madhësia e shkronjave: 130%;). kutia e përmbajtjes h2 (madhësia e shkronjave: 110%;). kutia e përmbajtjes h3 (madhësia e shkronjave: 120%;). përmbajtja -kutia h4 (madhësia e shkronjave: 100%;) .top-menu>div (mbushje-djathtas: 0px !important;) img(gjerësia maksimale:96% !rëndësishme;lartësia:auto !e rëndësishme;)

Disa specifika mbi kodin.

Kur gjerësia e ekranit është më e vogël se 1000 px, shiritat anësor të faqes, titulli, faqosja dhe fundi i faqes ndalojnë së shfaquri. Sipas mendimit tim, 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ë të lartë, blloqet anësore zbresin, duke e shtrirë faqen deri në pikën e poshtërimit, kështu që edhe në motorët e rinj mund të korrigjoni disa gjëra me dorë.

Vlerat e tjera tregohen gjithashtu për blloqet e kontejnerit kryesor dhe dritares së përmbajtjes, dhe dalja e H1-H4 konvertohet në përqindje (pikselët më përshtaten për desktopin). Korrigjimet janë bërë edhe në daljen e menysë së sipërme (për fat të 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ëzime bukur), dhe lartësia vendoset automatikisht.

Specifikat kanë mbaruar, edhe një herë në kuptimin e përgjithshëm të përshtatjes së një faqe interneti (dizajni) përmes CSS.

  1. - Ndrysho vlerat e mëdha të px në %,
  2. - Ne regjistrohemi veçmas ekranin @media dhe për pajisjet celulare.

Nëpërmjet ekranit @media dhe sigurohuni që të mbyllni blloqet e ekranit që janë të panevojshëm për celularin, por konvertoni në % ato vlera që shfaqen gabimisht, pasi ato kanë mbetur në pixel në versionin desktop të CSS.

Si rezultat, përvoja e përdoruesit kur punoni me Joomla Mobile ishte 65-70%, me dizajn të përgjegjshëm duke përdorur CSS, ajo u bë 99%. Përfundimet janë të dukshme: Yandex dhe Goole nuk u testuan për përshtatshmëri, por tani ata po kalojnë me zhurmë.

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 rreth dizajnit të përgjegjshëm, "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ë faqes në internet, mund të duket tepër kompleks për ata stilistë dhe zhvillues që nuk e kanë provuar.

Për këtë arsye, ne kemi përpiluar një përmbledhje të burimeve të dobishme gjatë krijimit të faqeve të internetit të përgjegjshme. Rishikimi përfshin udhëzues të detajuar, qasje, mjete dhe 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ë media
Tranzicionet 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 duke përdorur Media Queries, ju ndryshoni vazhdimisht gjerësinë e shfletuesit tuaj për të parë se si sillet faqja. Por sa herë që përpunohet një nga pyetjet tuaja të medias, është i dukshëm një tranzicion i ngurtë midis stileve (i pari, për shembull, për desktopët, 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 Fluid
Imazhe gome (shkallëzimi i shfletuesit)

Imazhet e gomës 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 duke përdorur një copë kodi klasik img (gjerësia maksimale: 100%; ), si dhe të gjitha pjesët e nevojshme të nevojshme për të filluar.

Emaile të përgjegjshme

14. Optimizimi i emailit tuaj për pajisjet celulare me pyetjen e medias
Optimizo email-in për pajisjet celulare me Kërkesat e Medias

Email-et e mëdha shpesh kërkojnë lëvizje horizontale për t'u parë, veçanërisht kur emaili ka një imazh të madh të bashkangjitur. Në këtë studim, Campaign Monitor shpjegon se si emailet mund të optimizohen për përdorimin e celularit Pyetjet në media dhe sugjeroi disa metoda të dobishme dhe copa kodi për përdorim praktik.

Mjete për dizajn të përgjegjshëm të uebit

Ju mund të dizajnoni dizajn i përgjegjshëm nga e para ose përdorni mjetet e listuara më poshtë për të shpejtuar dhe thjeshtuar procesin e krijimit të një të tillë.

Ky është një Polyfill i shpejtë dhe i lehtë (një pjesë kodi që shton funksionalitet 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 nga CSS3 Media Queries në IE6-IE8 dhe më lart.

Përdorni informacionin nga ky mjet i vogël për të krijuar një faqe interneti të përgjegjshme.

Një mjet për prototipizimin e shpejtë të dizajnit të përgjegjshëm. Ju mund të dizajnoni CSS për një shumëllojshmëri të madhësive, orientimeve dhe shfletuesve të njohur të ekranit, 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 tuaja të dizajnit direkt në shfletuesin tuaj dhe të përdorni mjetet tuaja të preferuara të zhvillimit, si Firebug. Provoni gjithashtu mjetin alternativ ScreenFly.

Vegla 320 dhe Up bazohet në parim celulari së pari(së pari celulari), ku dizajni krijohet fillimisht për ekranet e pajisjeve celulare dhe më pas zgjerohet për tabletët, kompjuterët desktop dhe ekranet më të mëdhenj. Funksionon mirë edhe si shtesë në pllakën e bojlerit HTML5 dhe më vete.

Këto janë shabllone të personalizueshëm për krijimin e aplikacioneve të uebit celular të pasur me veçori dhe me performancë të lartë. Ju do të merrni përputhshmëri me ndërshfletuesit për telefonat inteligjentë të klasës A dhe mbështetje të mirë për BlackBerry, Symbian dhe IE Mobile më të vjetër. Si dhe një numër i madh i optimizimeve të ndryshme për shfletuesit celularë.

Korniza për dizajn të përgjegjshëm

33. 1140 CSS Grid

1140 CSS Grid është optimizuar për të punuar në ekrane që variojnë nga madhësitë e pajisjes celulare deri te monitorët me gjerësi 1280 px. Është një rrjet i thjeshtë dhe fleksibël që përdor Pyetjet në media.

Ky kuadër CSS është një bazë e mirë për t'u zhvilluar në ekrane të vogla (si telefonat) dhe ekrane të vegjël (si tabletët) menjëherë me përpjekje minimale. Përveç kësaj, ekziston një gjenerator për krijimin e një kornize fleksibël CSS për veten tuaj.

Flurid është një rrjetë gome me 6, 7, 8, 9, 10, 12 dhe 16 kolona.

FluidGrids është një gjenerator i rrjetit modular që krijon 6, 7, 8, 9, 10, 12 ose 16 paraqitje kolonash.

Korniza CSS për krijimin e paraqitjeve të përgjegjshme. Ai përmban 4 paraqitje bazë dhe tre grupe tipografie.

Një kornizë fluide me fokus 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ërqindjen e mbushjes.

Strategjitë e projektimit të përgjegjshëm

40. Rrjedha e punës e projektuesit të përgjegjshëm
Rrjedha e punës e përgjegjshme e zhvilluesit të dizajnit të uebit

Luke Wroblewski mbajti shënime mbi prezantimin e Ethan Marcotte mbi zbatimin e parimeve të dizajnit të përgjegjshëm të uebit për të modernizuar faqen e internetit të një prej gazetave kryesore. Ndër të tjera, Ethan shpjegon se si i qaset metodologjisë së dizajnit të përgjegjshëm të uebit dhe cili ë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 të Stephen Hay mbi realitetet e projektimit për pajisje të ndryshme.

Diskutime dhe këndvështrime të ndryshme mbi dizajnin e përgjegjshëm të uebit

Këta artikuj, megjithëse nuk janë udhëzime, mund t'ju japin informacion të vlefshëm se pse duhet të përdorni teknika responsive të dizajnit të uebit (dhe kur jo).

Një hyrje e shkëlqyer në dizajnin e përgjegjshëm si një mënyrë të menduari dhe 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ë përpiqemi për përsosmërinë e pikselit, ne duhet të përpiqemi për përsosmëri proporcionale.

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 ftuan Ethan Marcotte për të diskutuar dizajnin e përgjegjshëm.

Një shtesë e shkëlqyeshme për artikullin do të ishte një blog rreth dizajnit të përgjegjshëm, në të cilin zhvilluesit ndajnë përvojat e tyre dhe shkruajnë rishikime të mjeteve të përgjegjshme.

  • dizajn i përgjegjshëm në internet
  • dizajn i përgjegjshëm
  • css3
  • Shto etiketa

    Sot, shumica e njerëzve hyjnë në internet përmes veglave celulare - tableta, telefona, dhe në këtë drejtim, optimizimi i faqeve të internetit gjithashtu arrin një nivel të ri. Nëse një përdorues hyn dhe sheh që faqja nuk është e optimizuar për pajisjet celulare: imazhi nuk mund të shikohet, butonat janë zhvendosur, fontet janë të vogla dhe të palexueshme, dizajni është i shtrembër - 99 nga 100% që ai do të lërë dhe filloni të kërkoni për një tjetër më të përshtatshëm. Dhe do të kontrollojë kutinë që burimi është i parëndësishëm, domethënë nuk korrespondon me pyetjen e kërkimit. Prandaj, dizajni i faqes duhet të përshtatet me pajisje të ndryshme celulare. Cili është një version celular i një faqe interneti, si ta krijoni atë dhe cila është metoda më e mirë për t'u përdorur? Lexoni më shumë në këtë artikull.

    Pra, ekzistojnë katër mënyra kryesore për të përshtatur faqen tuaj në versionin celular.

    Metoda e parë - dizajn i përgjegjshëm

    Modelet adaptive përfshijnë ndryshimin e imazhit të faqes në internet në varësi të madhësisë së ekranit. Si rregull, ato janë vendosur në standarde 1600, 1500, 1280, 1100, 1024 dhe 980 piksele. Pyetjet përdoren për zbatim. Nuk ndryshon vetvetiu.

    Përparësitë e kësaj metode përfshijnë:

    • zhvillim i përshtatshëm, pasi vetë struktura përshtatet me parametrat e ekranit, dhe çdo përditësim nuk kërkon zhvillimin e një dizajni nga e para, mjafton të korrigjoni CSS dhe HTML;
    • një adresë URL - përdoruesi nuk ka nevojë të mbajë mend disa emra, nuk ka nevojë për një ridrejtim (ridrejtim nga një adresë në tjetrën), gjë që mund të komplikojë punën e një webmaster, dhe është më e lehtë për një motor kërkimi të rendit dhe renditni një burim me një adresë të vetme.

    Sigurisht, shabllonet adaptive kanë gjithashtu disavantazhet e tyre, të cilat, nga rruga, peshojnë më shumë se avantazhet e tyre. Sidoqoftë, shumë zhvillues i përmbahen këtij koncepti të veçantë, për shembull, Google Corporation, versioni celular i të cilit i faqes ka një dizajn të përgjegjshëm. Pra, disavantazhet:

    • Dizajni i përgjegjshëm nuk mbështet të njëjtat detyra në një pajisje celulare si në një desktop. Nëse ky është, për shembull, një version celular i faqes së internetit të një banke, ku përdoruesi ka shumë të ngjarë të ketë nevojë për informacione rreth kursit të këmbimit ose ATM-ve aty pranë, atëherë ky dizajn është mjaft i mjaftueshëm. Por nëse është një burim kompleks i strukturuar me shumë seksione dhe nënseksione, atëherë nuk ka gjasa të tërheqë vizitorët.
    • Ngarkimi i ngadaltë e kthen faqen tuaj të preferuar në një të urryer. Kjo është veçanërisht e vërtetë për burimet ku ka një bollëk animacioni, video, pop-ups dhe elementë të tjerë aktivë. Për shkak të peshës së madhe, faqja thjesht do të "ngadalësohet", përdoruesi do të zemërohet dhe do të largohet, dhe pozicionet e kërkimit të faqes do të bien.
    • Pamundësia për të çaktivizuar versionin celular është një tjetër pengesë e rëndësishme. Nëse një element fshihet nga një paraqitje e tillë, nuk mund të bëni asgjë për ta hapur atë, ndryshe nga faqet ku mund ta çaktivizoni dhe të kaloni në një domen të rregullt.

    Sidoqoftë, një version i tillë celular i faqes shpejt, pa aftësi dhe kosto të veçanta, ju lejon të përshtatni burimin me çdo vegël. Por, duke pasur parasysh mangësitë e listuara, është i përshtatshëm për burime të vogla, të thjeshta me një minimum informacioni dhe multimedia, pa navigim dhe animacion kompleks. Për një vend kompleks, 2 metoda të tjera janë të përshtatshme.

    Metoda e dytë - një version i veçantë i faqes

    Kjo metodë është shumë e zakonshme dhe shpesh e bën me sukses një faqe më miqësore për përdoruesit në një pajisje celulare. Thelbi i saj është krijimi i një versioni të veçantë të faqes, i krijuar për aplikacionin dhe i vendosur në një URL ose nëndomain të veçantë, për shembull, m.vk.com. Në të njëjtën kohë, funksionaliteti kryesor ruhet, dizajni i faqes thjesht duket ndryshe. Përparësitë e kësaj metode janë të dukshme:

    • ndërfaqe e përshtatshme e përdoruesit;
    • është e lehtë të ndryshosh dhe të bësh modifikime, pasi versioni ekziston veçmas nga burimi kryesor;
    • për shkak të peshës së tij të ulët, një version i veçantë i faqes funksionon shumë më shpejt sesa një shabllon adaptiv;
    • Më shpesh është e mundur të kaloni në versionin kryesor të faqes nga ai celular.

    Por kjo nuk është pa të metat e saj:

    • Disa adresa - versione desktop dhe celular të faqes. Si ta bëni përdoruesin të kujtojë dy opsione? Masterat e uebit shpesh transferohen nga versioni i desktopit në versionin celular, por nëse kjo faqe nuk ekziston në versionin celular, përdoruesi do të marrë një gabim. Këtu lindin vështirësi me motorët e kërkimit, të cilët e kanë të vështirë të renditin 2 burime identike dhe kjo ndikon drejtpërdrejt në promovimin.
    • Versioni celular i faqes nga një kompjuter, nëse një përdorues e akseson gabimisht, do të duket qesharak, gjë që mund të ndikojë gjithashtu në trafik.
    • Ky version është shpesh shumë i zhveshur, desktop, kështu që përdoruesi do të marrë funksionalitet shumë të kufizuar. Por në të njëjtën kohë, nëse diçka mungon, vizitori mund të shkojë në versionin e plotë të faqes.

    Në përgjithësi, një sajt i veçantë celular justifikon veten dhe është mënyra më e zakonshme për të përshtatur një burim për pajisjet celulare. Është i popullarizuar në mesin e dyqaneve të mëdha në internet si Amazon.

    Mënyra e tretë është dizajni RESS

    Motori i kërkimit Google mbështet në mënyrë aktive këtë drejtim të dizajnit celular. Kjo është metoda më e vështirë, e kushtueshme, por efektive për të përshtatur një faqe interneti për një telefon ose tablet. Quhet RESS. Ky synon një burim në një aplikacion celular që mund të shkarkohet për secilën pajisje veç e veç. Për Android - nga GooglePlay, dhe për Apple - nga iTunes.

    Aplikacione të tilla janë të shpejta, falas, të përshtatshme dhe kanë aftësinë për të pritur lloje të ndryshme informacioni, ndërsa memoria e telefonit dhe trafiku në internet nuk konsumohen aq shumë sa kur vizitoni një faqe përmes një shfletuesi. Ato janë të lehta për t'u aksesuar, pasi lidhja do të jetë gjithmonë në ekran dhe nuk ka nevojë të futni një emër kompleks në shiritin e adresave të shfletuesit.

    Sigurisht, këtu ka edhe disavantazhe, të tilla si kompleksiteti në zhvillim, kostot e larta të punës për një numër të madh programuesish dhe nevoja për të bërë disa opsione paraqitjeje. Ndonjëherë pajisja celulare nuk njihet nga aplikacioni. Kërkohet mbështetje e rregullt teknike dhe rregullime të gabimeve. Sidoqoftë, ky opsion konsiderohet më i miri nga tre të propozuara për shkak të funksionimit të tij produktiv dhe të pandërprerë.

    Mënyra më e lirë për të krijuar një faqe interneti për celular

    Të gjitha metodat e mësipërme kërkojnë, edhe pse jo gjithmonë të gjatë dhe komplekse, punë të paguar për webmasterin. Nëse nuk shihni një nevojë urgjente për një zhvillim të tillë, një version i thjeshtë dhe falas celular i faqes do t'ju përshtatet. Cila është mënyra më e lehtë për ta bërë atë?

    Shkarkoni shabllone speciale (shtojca) për dizajn të përgjegjshëm. Për shembull, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile dhe të tjerë. Ato do t'ju ndihmojnë të shfaqni sitin në mënyrë më korrekte në telefonin tuaj dhe do të merrni disa këshilla se çfarë duhet të korrigjohet për ta përshtatur më mirë faqen me versionin celular.

    Sigurisht, kjo metodë nuk ka gjasa të jetë e përshtatshme për burime serioze. Përkundrazi, kjo veçori falas është menduar për sajte, blogje dhe burime lajmesh të vogla dhe të thjeshta. Gjithashtu nuk duhet të harrojmë se motori i kërkimit Google, si Yandex, sot vendos kërkesa serioze për versionet celulare, kështu që ekziston një shans i madh për të ulur renditjen tuaj duke përdorur këtë metodë.

    Me këtë metodë, ka shumë të ngjarë, reklamat dhe banderolat pop-up do të ndërpriten, por faqja do të ngarkohet shpejt dhe pa vonesa.

    Parimet e krijimit të versioneve celulare

    Nuk ka rëndësi nëse versioni celular i faqes është krijuar falas ose me ndihmën e një stafi të webmasterëve, nëse është bërë duke përdorur sistemin RESS ose duke përdorur një shabllon përshtatës. Gjëja më e rëndësishme është që që ajo të funksionojë në mënyrë efektive, është e nevojshme t'i përmbahen disa parimeve jashtëzakonisht të rëndësishme. Pra, si duhet të jetë versioni celular i faqes? Si ta bëjmë atë produktiv, efikas dhe produktiv?

    Ne heqim gjithçka të panevojshme

    Minimalizmi është ajo për të cilën duhet të përpiqet një zhvillues i një versioni celular të një faqe interneti. Imagjinoni sa e vështirë është të perceptoni informacione plot ngjyra, butona, pankarta dhe të cilat duhet t'i kaloni pafundësisht në kërkim të materialit të duhur. Dizajni i celularit duhet të jetë i thjeshtë dhe i pastër. Zgjidhni 2-3 ngjyra për të ndarë hapësirën (për shembull, ato të markës). Është më mirë nëse njëri prej tyre është i bardhë. Ndani hapësirën e ekranit të vogël në zona të qarta dhe të lexueshme. Çelësat virtualë duhet të jenë të dukshëm në mënyrë që përdoruesi të dijë qartë se ku të shtypë dhe të shohë - këtu është produkti, këtu është formulari për plotësimin e të dhënave, këtu janë informacionet për dorëzimin dhe pagesën.

    Të gjitha opsionet shtesë që do të ishin të dobishme në versionin e desktopit dhe do ta bënin jetën më të lehtë për përdoruesit këtu do të sjellin vetëm komplikime. Lini vetëm elementët më të rëndësishëm. Animacioni, banderolat reklamuese dhe multimedia ka shumë të ngjarë vetëm të ngadalësojnë funksionimin e një faqe interneti ose aplikacioni dhe të shpërqendrojnë nga gjëja kryesore.

    Rreshtimi

    Çështja e shtrirjes nuk është më pak e ngutshme, pasi nëse bëhet gabimisht, përdoruesi do të marrë vetëm mbaresat e fjalëve të rëndësishme. Në përgjithësi pranohet të rreshtoni majtas dhe vertikalisht. Imagjinoni të lëvizni nëpër burimin e lajmeve në telefonin tuaj. Ju e bëni këtë nga lart poshtë, por jo majtas ose djathtas.

    Shoqata

    Kur nuk ka mundësi për një zinxhir të gjatë tranzicioni, provoni të kombinoni disa hapa në një. Për shembull, një faqe kërkon futjen e të dhënave në disa faza - një emër, pastaj një adresë, ku në çdo qelizë individuale ka një shtëpi të veçantë, rrugë, apartament, etj. Për të mos e detyruar përdoruesin të përpiqet të futet në shumë të vogla qelizat, kërkojini atij të plotësojë vetëm 2 - emrin dhe adresën.

    Dhe shkyçja

    Ndonjëherë, përkundrazi, është e nevojshme të veçohen shumë informacione. Për shembull, në menynë rënëse keni një listë me më shumë se 80 qytete ku kryhet dorëzimi. Grupojini ato sipas rajonit në mënyrë që përdoruesi të mos ketë nevojë të lëvizë nëpër këtë listë të madhe. Kur ai lëviz kursorin mbi një qendër ose rajon rajonal, do të shfaqet një listë tjetër qytetesh.

    Listat

    Nga rruga, për listat. Janë dy prej tyre - të fiksuara sipas rendit alfabetik ose tjetër dhe me zëvendësim. Zgjedhja e tyre varet nga ajo që do të renditet.

    Fiks është i përshtatshëm nëse përdoruesi e di saktësisht se çfarë kërkon. Për shembull, qyteti, numri ose data. Opsioni i dytë është i përshtatshëm për emra të gjatë e të ndërlikuar ose për rastet kur ka shumë variacione me të njëjtin emër dhe secila prej tyre e afron përdoruesin një hap më afër qëllimit. Opsioni i zëvendësimit automatik përdoret më shpesh kur një vizitor ka nevojë për ndihmë. Për shembull, një faqe interneti për thurje ofron për të blerë hala thurjeje. Përdoruesi fut pyetjen e kërkimit "Gjilpëra thurjeje metalike", dhe në aluzion ai sheh "Gjilpëra thurjeje 5 mm", "Hila për thurje 4.5 mm", etj.

    Plotësimi automatik

    Kjo pikë vlen veçanërisht për faqet ku ata shesin diçka në internet, dhe ju duhet të plotësoni formularët standardë për pagesën, dërgesën, etj. Nëse një person bën një blerje nga telefoni i tij, atëherë me shumë mundësi ai nuk ka kohë të shkojë në kompjuter , që do të thotë që blerjet e procesit duhet të bëhen sa më shpejt dhe sa më të përshtatshme.

    Për ta bërë këtë, formularët mund të përmbajnë të dhëna të plotësuara tashmë, ju mund të përdorni përgjigjet më të njohura. Për shembull, futni datën e sotme, mënyrën e pagesës me para në dorë, qytetin, nëse punoni në të njëjtin rajon. Ato mund të ndryshohen, por nëse arrini objektivin, koha e përdoruesit do të kursehet.

    Gjithçka lexohet, gjithçka shikohet

    Kur krijoni modelin e versionit celular të faqes, mbani mend se telefoni i të gjithëve është i ndryshëm, dhe po ashtu edhe vizioni i tyre. Faqja juaj mund të shihet në një ekran të vogël, kështu që fontet duhet të jenë të thjeshta dhe të lexueshme, butonat duhet të jenë mjaftueshëm të mëdhenj për t'u klikuar pa u dërguar në një faqe tjetër dhe imazhet duhet të hapen veçmas dhe të mëdha, veçanërisht kur bëhet fjalë për internetin. dyqan.

    Disa statistika

    Kur flasim për përshtatjen e një faqe interneti me pajisjet celulare, nuk mund të mos përdoret statistika për të kuptuar se sa i rëndësishëm është ky proces për promovimin në internet.

    Numrat janë si më poshtë. Sot, 87% e popullsisë përdor pajisje, me sa duket përveç fëmijëve më të vegjël dhe disa të moshuarve. Ekonomistët parashikojnë se tregtia celulare do të rritet 100-fish gjatë 5 viteve të ardhshme. Megjithatë, vetëm 21% e faqeve janë përshtatur për të punuar me pajisje celulare. Kjo do të thotë se trafiku i internetit dhe tregu i tregtisë elektronike zënë vetëm një pjesë të vogël të 5-të.

    Mendoni për këto numra. A ka kuptim të përshtatni burimin tuaj? Sigurisht që po. Për më tepër, ndërsa ka kaq shumë hapësirë ​​të lirë në këtë treg, ju mund të gdhendni segmentin tuaj në të.

    Ku nevojitet versioni celular?

    Përdorimi i versionit celular është i këshillueshëm për çdo platformë që kërkon të marrë një vlerësim të lartë. Në fund të fundit, ky është një ndikim i drejtpërdrejtë tek përdoruesi, duke krijuar kushte të rehatshme që ai të qëndrojë në faqen tuaj.

    Më poshtë nuk mund të ekzistojë pa një version celular:

    • portalet e lajmeve, pasi këto janë ato që shumica e njerëzve shohin nga telefonat e tyre rrugës për në punë ose në shkollë;
    • rrjetet sociale - për të njëjtën arsye, plus ekziston faktori i komunikimit në internet, që do të thotë se duhet të krijohet një bisedë e përshtatshme, e kuptueshme për këtë;
    • libra referimi, faqe me navigacion etj., ku njerëzit kthehen kur kërkojnë diçka;
    • Dyqanet online janë një mundësi për të tërhequr klientët që nuk humbasin kohë duke bërë blerje, por blejnë gjithçka përmes Internetit celular.

    Në vend të një përfundimi

    Sot, teknologjitë celulare janë në një fazë të rritjes dhe zhvillimit aktiv, prandaj, duke u përpjekur për udhëheqje në treg, çdo kompani duhet të sigurojë që burimi i saj i internetit të plotësojë kërkesat. Për shkak të kërkesave në rritje të përdoruesve, faqet e internetit duhet të modernizohen vazhdimisht dhe të përshtaten për pajisje të ndryshme. Është e qartë se nëse një person është i papërshtatshëm për të qenë në një burim të caktuar, ai nuk mund të marrë informacion për një produkt ose çmim atje, të bëjë një porosi, të mësojë për dorëzimin, atëherë ai do të gjejë sitin ku e gjithë kjo do të bëhet e mundur. Prandaj, për të fituar konkursin, është e rëndësishme të keni një burim fleksibël, të përshtatshëm, funksional dhe interesant.

    Versioni celular i faqes Android ose iOS do t'ju ndihmojë ta bëni këtë. Për ta bërë këtë, ju duhet të zgjidhni një nga metodat e mësipërme të ridizajnimit - një shabllon adaptiv, duke krijuar një faqe të re në një nëndomain dhe duke lëvizur në të duke ridrejtuar, duke përdorur shabllone falas ose duke krijuar një aplikacion celular me të cilin përdoruesi mund të hyjë më lehtë dhe qëndroni në faqe.

    Përshëndetje të gjithëve! Kohët e fundit, pasi pashë statistikat e një prej projekteve të mia, kuptova se ishte koha të mësoja se si të krijonim një dizajn të përgjegjshëm të faqes në internet, domethënë një dizajn që do të duket mirë si në kompjuterët desktop dhe laptopë, ashtu edhe në pajisjet mobile. Hidhini një sy vetes, lë të kuptohet Metrica.

    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 më shumë, por në çdo rast, nuk mund të injoroni më vizitorët që ju lexojnë nga një smartphone ose tablet.

    A e dini se si përdoruesit e pajisjeve celulare e shohin faqen tuaj të internetit? Për fat të mirë, ekziston një shërbim i shkëlqyer për kontroll - responsinator.com

    Gjithçka këtu është tepër e thjeshtë - futni adresën e faqes dhe shihni se si duket në pajisjet celulare. Le të marrim një shembull të një blogu me të cilin ndoshta të gjithë janë njohur.


    Alexander Borisov ka një shabllon të bukur, është menjëherë e qartë se shumë para janë investuar në dizajn dhe paraqitje. Sidoqoftë, leximi i një blogu nga një telefon është shumë i papërshtatshëm dhe nuk do të habitesha nëse shkalla e dështimit midis përdoruesve të pajisjeve celulare është shumë më e lartë sesa midis atyre që hyjnë në sit 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 të internetit të adaptueshëm.

    Çfarë është dizajni i përgjegjshëm

    Në fillim, nuk e pashë ndryshimin midis paraqitjes adaptive dhe "lëngshme", kur madhësitë e bllokut ndryshojnë në varësi të gjerësisë së ekranit. Megjithatë, ka një ndryshim.

    Dizajni i përgjegjshëm 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ë të gjithë gjerësinë e ekranit dhe shiriti anësor ose zhvendoset poshtë ose zhduket plotësisht nga faqja. Ose menyja kthehet nga një e rregullt horizontale 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, ë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 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 mund të ndihmojë.

    Gjeni një dizajn të gatshëm

    Kohët e fundit, pothuajse të gjithë projektuesit po përpiqen të përshtatin shabllonet e tyre për pajisjet mobile. 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 faqe 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 po ndjekin një dizajn ekskluziv ose janë në gjendje të bëjnë ndryshimet e tyre në kod për ta bërë shabllonin unik.

    Përdorni korniza

    Korniza - mund të thuhet, korniza e shabllonit, skedarët e tij kryesorë dhe një rrjet blloqesh. Dizajnerët i duan për lehtësinë e përdorimit dhe kursimin e kohës, sepse një shabllon i gatshëm "peshk" ju lejon të mos humbni kohë në rutinë. Nëse dini të punoni me korniza, përdorimi i tyre për të krijuar 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 adaptive të lehta nga Beloweb.ru. Në të njëjtën kohë, hidhni një vështrim më të afërt në blog, ka shumë "të mira" të dobishme për projektuesit dhe dizajnerët e paraqitjes.

    Bëni vetë paraqitjen

    Kjo metodë është për ata që nuk kërkojnë mënyra të thjeshta dhe duan të kuptojnë gjithçka 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 akses në sajtin 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; ) ekran @media vetëm dhe (gjerësia maksimale: 1010px)( #majtas, #djathtas( gjerësia : 98% float: asnjë diferencë: 10px;

    Në këtë shembull blloku #majtas ka një gjerësi prej 600 pikselësh dhe do të vendoset në të majtë të bllokut #e drejte 400 piksele e gjere. Por nëse rezolucioni i monitorit është më pak se 1010 piksele, ne heqim mbështjelljen nga të dy blloqet dhe i shtrijmë ato në 98% të gjerësisë së ekranit.

    Dhe kështu duhet të shkruani rregulla për madhësitë e mëposhtme të ekranit:

    • 320px për iPhone 3-5 në pozicion vertikal
    • 480px për iPhone 3-4 në pozicion horizontal
    • 568px për iPhone 5 horizontalisht
    • 384 px për smartphone në pozicion vertikal
    • 600px për smartphone në pozicion horizontal
    • 768px për iPad horizontalisht
    • 1024 px për iPad në pozicion vertikal

    Një listë e plotë e rezolucioneve mund të gjendet në responsinator.com ose në raportin Yandex.Metrica për faqen tuaj (seksioni Teknologjitë/Rezolucionet e ekranit). Me një fjalë, nuk do të jetë e vështirë për ata që janë të njohur me paraqitjen e faqes në internet të kuptojnë këtë çështje.

    E dini, unë rrallë jap lidhje për 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, shablloni 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 artikullin nga një telefon celular, shkruani nëse gjithçka është në vend, a është gjithçka e përshtatshme? Kaq për sot. Nëse keni ndonjë pyetje ose shtesë, mirëpresim në komentet si gjithmonë, ato janë të hapura për të gjithë.

    Artikujt më të mirë mbi këtë temë