Što je responzivni web dizajn. Načini implementacije prilagodljivosti sučelja. Svi napori usmjereni su na kreativnost, a ne na traženje gumba

14.05.2020 Vijesti

Na ovaj trenutak Oko 11-12% od 100.000 najposjećenijih stranica je responzivno, a nema sumnje da će se taj broj povećati u sljedećih nekoliko godina.

Kako sve više organizacija zasuče rukave kako bi prihvatilo realnost weba s više uređaja, vrijedi razmotriti nekoliko strategija koje se koriste za postizanje nirvane:

Adaptivna modernizacija

Responzivni redizajn je proces preuzimanja postojećeg web-mjesta samo za stolna računala i u biti "preoblikovanja responzivnog".

Kada je riječ o gotovim stranicama (posebice komercijalnim), timovi nemaju uvijek priliku sve odbaciti i ponovno graditi.
Dan Cederholm

Za većinu organizacija stvaranje novog dizajna velikih razmjera od nule niti ne dolazi u obzir. Zbog toga je adaptivna modernizacija popularan pristup stvaranju dobrog sučelja za Mobilni uredaji.

Prednosti
  • Relativno brzo.
    Postoji nekoliko načina za responzivnu modernizaciju, a ova bi strategija mogla biti dodavanje datoteke small-screens.css na web mjesto. Unatoč ovom prilično sirovom primjeru, adaptivna modernizacija je atraktivna opcija za veliki broj organizacija jer ne zahtijeva ponovnu izgradnju svega od nule.
  • poznato.
    Ne zbunjuje korisnike. Ljudi su proveli godine navikavajući se na sučelje, a modernizacijom postojećeg, organizacije zadržavaju poznati pristup dok poboljšavaju živote ljudi s mobilnim uređajima.
  • Organizacijski brže.
    Politički gledano, modernizirati sučelje sigurnije je nego krenuti od nule. Manje će se raspravljati o tome koju nijansu zelene odabrati, koje trivijalne fotografije koristiti, a menadžment neće morati zavrtati rukama. To timovima omogućuje brže pokretanje responzivnih stranica.
Mane
  • Utječe samo na mali dio.
    Opet, postoji mnogo opcija za preuređenje, ali cilj većine njih je "učiniti ga lijepim". Usredotočujući se na redizajniranje izgleda, modernizacija često propušta veliki broj drugih čimbenika koje je potrebno uzeti u obzir pri izradi uspješan projekt za razne uređaje.
  • 10 litara vode u staklenku od tri litre.
    Budući da su stolna mjesta dizajnirana samo za stolna računala (i često traju dugo), mogu sadržavati mnogo nereda. A budući da se modernizacija uglavnom sastoji od ponovnog rastapanja izgleda, većina problema sa sadržajem nije u potpunosti uzeta u obzir.
  • Izvođenje.
    Nešto je čudno u pisanju koda za bolju podršku male uređaje. Uklanjanje nepotrebnih stvari može ići predaleko, ali bez fokusiranja na produktivnost, neće rasti samo od sebe.
  • Najgora podrška.
    Medijski upiti, izvorno dizajnirani za stolna računala, slabo su podržani na većini mobilnih uređaja.
  • Privremeni popravci.
    Dođe mi da umirem kad čujem ljude kako od mene traže da nešto "učinim responzivnim", kao da je to samo potvrdni okvir u planu projekta (što ponekad zapravo i jest). Ova vrsta ograničenog razmišljanja propušta stvarne prilike koje responzivni dizajn nudi.
Responzivna mobilna web-mjesta Responzivna mobilna web-mjesta, ili kako ih ja nazivam "sjeme za responzivnu budućnost", praksa su stvaranja zasebne web-stranice u formatu "m.yourdomain.ru" korištenjem tehnika adaptivni dizajn. Stranice poput The BBC, The Guardian i Entertainment Weekly (na kojima sam radio) koriste ovu strategiju.


Mobilna verzija daje vam priliku da posadite sjeme koje će izrasti iz vaše naslijeđene web stranice.


S vremenom se zastarjelo web-mjesto može ukloniti, a web-mjesto će se razviti od prvotno mobilnog, responzivnog i uzimajući u obzir buduće trendove.

Prednosti
  • Manji rizik.
    Većina organizacija još uvijek vidi promet s mobilnih uređaja kao manjinu. Stoga pokretanje web-mjesta prilagođenog mobilnim uređajima omogućuje ovim organizacijama da testiraju vodu bez potrebe da prvo uđu u temu.
  • Prilika da naučite biti fleksibilni.
    Dizajneri mogu naučiti fleksibilnije razmišljati. Programeri će naučiti bezbroj trikova Android uređaja. Menadžeri mogu smisliti kako se odmaknuti od savršenstva piksela. Responzivna mobilna web-lokacija može biti odlično okruženje za učenje.
  • Infrastruktura.
    Timovi mogu naučiti kako riješiti probleme upravljanja sadržajem, kao što je stvaranje slika, jednom zauvijek
  • Uklonite višak.
    Ovaj pristup nudi izvrsnu priliku za timove da se zapitaju "treba li nam ovo stvarno" dok se također usredotočuje na izvedbu. Zašto? Budući da im je primarni fokus na poboljšanju korisničkog iskustva njihove stranice na mobilnim uređajima.
  • Budućnost su web stranice na prvom mjestu mobilnih uređaja.
    Iako su u početku nedostajale sadržaja ili funkcionalnosti, uz dovoljno vremena i truda ove mobilne web stranice mogu s vremenom zamijeniti svoje pretke s punim stranicama.
Mane
  • To je još uvijek mobilna stranica.
    Bez obzira je li responzivan ili ne, ovaj pristup i dalje zadržava veliki broj nedostataka mobilnih stranica: probleme s URL preusmjeravanjem, upravljanjem sadržajem, dosljednim sadržajem, dosljednošću, SEO optimizacijom i druge.
  • Privremeni popravci.
    Mnoge mobilne stranice stvorene su kao flaster - za zaustavljanje krvarenja. Takve su stranice stvorene s ciljem rasterećivanja sve većeg prometa koji dolazi s mobilnih uređaja. Ta rješenja još uvijek mogu zadovoljiti postojeće potrebe, ali s obzirom na buduće trendove, teško da će vas dugoročno spasiti.
  • Vjerojatnost odumiranja na trsu.
    Neke organizacije mogu započeti takve projekte, proći ih do pola, a zatim odustati od cijele stvari do donošenja proračuna za sljedeću godinu.
  • Dizajn za male ekrane.
    Budući da je početni fokus na malim zaslonima, kasniji prijenos sučelja na veće zaslone bez gubitka kvalitete može biti izazov.
Responzivni dizajn za mobilne uređaje izvorno
Mane
  • 50 nijansi nesavršenosti.
    Ovaj pristup možda neće uspjeti jer će se korisnici morati nositi s Frankenstein sučeljem koje je i staro i novo.
  • Mogućnost sušenja na trsu.
    Ovakvi projekti trebaju jasne krajnje ciljeve ili mogu zauvijek završiti u čistilištu.
  • Tehnički suživot.
    Što se događa kada se jedan modul, koristeći najnovije tehnologije i tehnike, direktno sudari sa zastarjelim modulom? Mnogo je arhitektonskih izazova za ovaj pristup.
“Ja sam Chevy Chase, ti nisi.” Naravno, svaka je organizacija drugačija, pa koji put odabrati ovisi o raznim čimbenicima. Vrijeme, proračun, opseg, organizacijska struktura, skup vještina i mnogi drugi čimbenici utječu na to koju strategiju je najbolje implementirati. No s vremenom je postalo sve jasnije da organizacije moraju raditi na sve većoj raznolikosti uređaja koji mogu pristupiti internetu.

Ovo je prijevod članka pod naslovom "Responsive Strategy" autora Brada Frosta. Preveo UXDepot uz suglasnost autora.

PS od prevoditelja: Nadam se da ste uživali u članku. Bit će nam drago ako nam ukažete na eventualne pogreške u prijevodu kako bismo ih u najkraćem roku ispravili. Pišite nam na [e-mail zaštićen], molim te :)

“Hermitage” nije samo moderno sučelje za upravljanje web stranicama – to je koncept koji kombinira rješenja sučelja i “paket” preporuka za web programere. “Hermitage” je skup pravila prema kojima ćete izraditi brz, siguran, praktičan i lako upravljan web projekt.

JavaScript je onemogućen u vašem pregledniku


„Dugi niz godina radimo na sučelju proizvoda, pokušavajući ga učiniti jednostavnim i praktičnim za korisnike u svakodnevnom radu upravljanja web stranicom. Također vodimo računa o interesima web programera, koji se najviše suočavaju s teškim zadatkom brzog stvaranja funkcionalnih web stranica raznih dizajna.

I ma koliko se nadali, svaki će klijent željeti svoj, individualni dizajn i strukturu stranice. I, naravno, svi žele da se stranica brzo otvori i da može podnijeti veliki promet. Rješavajući te probleme korak po korak, razvili smo koncept koji kombinira tehnologije i rješenja sučelja i nazvali ga “1C-Bitrix: Hermitage”

"Hermitage" je: Redizajn “kapuljača” - Re:Hermitage
Sučelje administrativnog dijela proizvoda je elegantno i izražajno, ali što je najvažnije, razumljivo je na prvi pogled i ne zahtijeva obuku. Rad s "admin panelom" je ugodan i jednostavan. Dizajn je prilagođen za rad sa touchscreen sučeljima mobilnih uređaja - pametnih telefona i tableta.



Dizajn upravnog dijela

Koncept dizajna razvio je AIC. Pametno sučelje je estetski dopadljivo i izaziva ugodne emocije odmah nakon prvog pogleda na „admin panel“. Čak i uz brzo upoznavanje s "admin pločom", možete brzo identificirati glavne kontrole, razumjeti njihov rad i značajno smanjiti vrijeme obuke.

Kontrolirati

Koncept sučelja za upravljanje web stranicama Upravljanje informacijama je svakodnevni posao, a mi činimo sve da ovaj posao učinimo ugodnim! U svakom nova verzija proizvoda, poduzimaju se koraci za razvoj upravljačke ploče. Ovo uzima u obzir iskustvo korištenja ove ploče od strane programera i klijenata 1C-Bitrixa. Kao rezultat toga, upravljačka ploča je poboljšana - dobiva ne samo novi izgled, već i nove mogućnosti.

Ploča sadrži dvije knjižne oznake između kojih se možete jednostavno prebacivati ​​i upravljati sadržajem točno tamo gdje vam treba. Naravno, upravljačka ploča i oba načina rada dostupni su samo registriranim korisnicima i pojavljuju se odmah čim se prijavite na stranicu.


Upravljačka ploča stranice. Sučelje "Hermitage"

Upravljanje web mjestom podijeljeno je u dva glavna načina:



Način rada "Iznad stranice"


"Hermitage" u smislu upravljanja uključuje sljedeće funkcije:
Funkcionalnost upravljačke ploče u okviru koncepta 1C-Bitrix: Hermitage Imajte na umu da funkcionalnost upravljačke ploče ovisi o pravima koja su vam dodijeljena kao korisniku stranice. Ali možete otići u odjeljak Administracija s bilo kojeg mjesta na web-mjestu iu bilo kojem načinu rada na upravljačkoj ploči. Način uređivanja Klikom na gumb Način uređivanja prelazite u način uređivanja. A ono što treba posebno napomenuti je da možete konfigurirati uključivanje ovog načina rada sa i bez ponovnog učitavanja stranice. Upravljajte svim elementima i komponentama na javne stranice! Uostalom, način uređivanja ne uključuje samo mogućnost promjene trenutne stranice ili elemenata blokova informacija, kao što su vijesti ili proizvodi u katalogu. U načinu za uređivanje možete jednako lako - desno "iznad web mjesta" - upravljati komponentama uključenim u predložak web mjesta i u glavnom radnom području određene stranice.


pojavljuje se kada miš prijeđe preko njega. Ovaj se izbornik može pomicati, prikvačiti ili prikazati okomito ili vodoravno. Prilagodljivo sučelje sustava zapamtit će promijenjeni prikaz kontekstni izbornik za ovu komponentu, ovu stranicu, dati korisnici i sljedeći put će ga otvoriti u potpuno istom obliku i na istom mjestu.




Dodavanje, uređivanje i brisanje podataka o komponentama izravno iz javnog dijela stranice. Za ove radnje nema apsolutno nikakve potrebe da idete u Administrativni odjeljak. Možete urediti ili izbrisati bilo koji element na popisu pomoću gumba koji se pojavljuju kada prijeđete pokazivačem miša preko tih elemenata.


Možete "vratiti" posljednju radnju


Ne morate se bojati da ćete učiniti nešto krivo na stranici, jer uvijek imate mogućnost poništiti zadnju radnju. Ova implementacija funkcionalnosti Košarice na Vašoj stranici pokriva sve operacije na njenom sadržaju. Nakon dodavanja, mijenjanja stranice ako je potrebno, jednostavno poništavate svoju posljednju radnju. Minimizirani način rada Minimizirani način rada bit će prikladan za one koji već znaju raditi sa sustavom. Jednostavno minimizirajte upravljačku ploču kako biste oslobodili prostor na zaslonu. U isto vrijeme, čak i minimizirana ploča zadržava funkcije upravljanja!


Možete raditi s Izbornikom, ažurirati proizvod, uključiti ili isključiti način uređivanja, resetirati predmemoriju ili otići u način rada za administraciju. Ukratko, presavijeni panel nastavlja biti funkcionalan! Usput, ploču možete ponovo sažeti i proširiti uobičajenim dvostrukim klikom.

Administracija Administrativni dio proizvoda dizajniran je za potpuno upravljanje cijelim Internet projektom. Radna površina u administrativnom dijelu je individualno prilagodljiva, opremljena gadgetima i opremljena sustavom pretraživanja izbornika. U proizvodu možete stvoriti onoliko "stolnih računala" koliko želite.





Programeri mogu izraditi vlastite gadgete i zatim ih dodati na svoju radnu površinu. Kao primjer, možete koristiti gadgete za prikaz popisa nedavnih narudžbi, vijesti o tvrtki, zbirke dokumenata itd. "Traženje uživo" radi izravno s "Radne površine" u administrativnom izborniku. Pretraga vas odmah vodi do željene stavke izbornika. I nije važno koliko odjeljaka i podgrana sadrži izbornik. Transliteracija

Ne morate brinuti o tome koji naziv datoteke dodijeliti bilo kojoj stranici! I ne trebaju vam programi za prevođenje da biste preveli njegovo ime Engleski jezik. Samo izradite stranicu i postavite joj naslov - automatski ćete dobiti naziv datoteke.






Čarobnjak za izradu stranice automatski transliterira i prevodi naslov stranice i predlaže ga kao naziv datoteke dokumenta za bolju optimizaciju tražilice. Pristup stranici Nova stranica na stranici ne bi trebala biti odmah prikazana svijetu. Najprije ga trebate provjeriti i raspraviti s kolegama, a zatim to odobriti od uprave. Nemojte ga objaviti - kada ga kreirate, samo potvrdite okvir - "Ograniči pristup stranici". Odredite grupe korisnika kojima to želite prikazati - samo odaberite te grupe.



Kome želite pokazati stranicu?

Mogućnost postavljanja ograničenja pristupa stranici odmah po njezinoj izradi znatno će olakšati rad upravitelja sadržaja pri radu sa sadržajem koji zahtijeva dug rad po dogovoru obrada.

Sučelje

Upravljajte svojom web stranicom jednostavno i profesionalno! Sučelje proizvoda Hermitage prilagođava se vašem svakodnevnom radu sa web mjestom, pamti vaše preferencije i omogućuje vam da trošite manje vremena na tehničke zadatke. Čini se da sučelje "lebdi" iznad stranice, omogućujući vam da vidite što radite i odmah prikazuje rezultate.

“Zadržite pokazivač miša iznad web-mjesta, jednostavno izvršavajte radnje, nemojte izgubiti kontekst svog rada i odmah postignite vidljive rezultate. Sučelje će zapamtiti vaše postavke - postavke popisa, filtere, obrasce za unos... I sljedeći put ćete trošiti manje vremena na ovu radnju.

Upotrijebite poznati gumb "Izbornik" za pristup svim značajkama svoje stranice jednim klikom. Sve je jasno za početnike i prikladno za profesionalce. Ne navikneš se ti na stranicu, nego se stranica navikne na tebe, prilagodi se tvojim navikama i zadacima"

direktor tvrtke, "1C-Bitrix", Sergej Ryzhikov

Sva vaša energija usmjerena je na kreativnost, a ne na traženje gumba! Svakodnevno upravljanje informacijama postaje više rutina, a energiju trošite na kreativne zadatke umjesto na tehničko objavljivanje stranica, odjeljaka i izbornika.

“Od verzije do verzije, sve više i više funkcionalnost, Svi više akcije u sučelju. Puno smo radili na redizajniranju sučelja proizvoda, posebno korisničke upravljačke ploče.

Novo prilagodljivo sučelje pojednostavljuje traženje željene radnje, grupira radnje prema korisničkim ulogama i ističe one najčešće kako ne bi stvarali nered radna ploča i olakšati korisniku razumijevanje.”

Vadim Dumbravanu, voditelj projekta u Bitrixu

Prilagodljivo sučelje je:
  • Kontekstualno uređivanje – upravljajte sadržajem izravno na stranici. Ako trebate ispraviti stranicu, kliknite "Uredi" odmah tamo. Ako trebate dodati odjeljak, kliknite "Stvori". Nemojte izgubiti kontekst svog rada. Novo sučelje na neki način "lebdi" iznad stranice, omogućujući vam da vidite što radite i odmah prikazuje rezultate.
  • Individualna prilagodba korisniku - sučelje proizvoda pamti najnovije akcije, postavke filtera i prikladne načine prezentiranja informacija. Sučelje se prilagođava vašem svakodnevnom radu i omogućuje vam da na njemu svaki dan provodite sve manje vremena.
  • Gumb "Izbornik" - poznat i brz pristup jednim klikom do svih značajki vaše stranice. Vrlo je udoban! Osim toga, kada prijeđete na "" pomoću gumba "Izbornik", pamti se stranica s koje je prijelaz napravljen - to nije ništa manje ugodno!
  • Prilagodba ulozi - za samouvjereno obavljanje svakodnevnog posla. Programeri imaju pristup svim alatima za razvoj i prilagodbu web stranice. Urednici stranica rade samo sa sadržajem, bez straha od kvara tehnički rad projekt. Svatko jasno obavlja svoj zadatak.
  • Čarobnjaci za stvaranje sadržaja pomoći će vam odabrati nazive datoteka i odjeljaka, nadopuniti izbornik stranice i pomoći vam da ispunite svojstva. Složene dnevne radnje postaju jednostavne. Mi jednostavno ne možemo napisati sadržaj umjesto vas; majstor će učiniti ostalo za vas.



Prilagodljivo sučelje dizajnirano je za:

  • smanjite troškove obuke novih korisnika - obuka nije potrebna, samo vam treba vremena da se stranica navikne na vas. Razdoblje navikavanja na sučelje je samo 1 sat!
  • rutinske zadatke pretvorite u kreativni proces, trošite energiju na kreativne zadatke umjesto na tehničku objavu stranica, odjeljaka i izbornika;
  • smanjiti vrijeme utrošeno na upravljanje web stranicama tako da svakodnevno upravljanje projektima postane navika;
  • otkloniti strahove novih korisnika od “propadanja projekta” i izbjeći većinu pogrešaka pri upravljanju sadržajem.

Rad na administrativnom sučelju proizvoda se nastavlja. Korisnici 1C-Bitrix: Site Management mogu preuzeti sva ažuriranja sučelja pomoću tehnologije SiteUpdate. O novim mogućnostima uvijek ćete saznati na web stranici, kao iu našim biltenima.

Ugrađeni vizualni uređivač Vizualni HTML uređivač već je ugrađen u proizvod i ne morate ga instalirati. Pomoću ovog uređivača možete mijenjati svoje stranice na web-mjestu u stvarnom vremenu - izravno putem preglednika. Uređivač vam omogućuje ne samo uređivanje i oblikovanje uobičajenog teksta, već i rad s vizualnim komponentama.


Vizualni uređivač već je ugrađen u vašu web stranicu!

Upravljanje strukturom Sve značajke Jednostavno sučelje Lijepo, lagano, moderno!

Vizualni uređivač uključuje lagano, lijepo i ergonomsko sučelje. Prijateljske skripte za uređivanje omogućuju vam praktičan i brz rad sa sadržajem, na primjer, umetanje poveznica i slika.



Dakle, kada umetnete sliku na stranicu, možete odmah odabrati njezino mjesto i veličinu. U tekstu se odmah vidi kako to izgleda.

WYSIWYG (izgovara se "wee-zee-wig", od engleskog What You See Is What You Get - "ono što vidiš to i dobiješ") je metoda uređivanja u kojoj ispravljeni materijal tijekom postupka uređivanja izgleda potpuno isto kao i konačni rezultat.

Uređivanje u stvarnom vremenu Uređivač uključuje sve alate potrebne upravitelju sadržaja

Postavite komponente na stranicu jednostavnim povlačenjem mišem s posebnog panela i odmah konfigurirajte njihove parametre koji određuju izgled informacija koje se dinamički mijenjaju na vašoj stranici.



Vizualni uređivač: uređivanje parametara komponente

Uređivač ima opsežne alate za uređivanje stranica

Prikladan mehanizam pretraživanja pomaže vam da pronađete u tren oka neophodna komponenta za postavljanje na stranicu. Prilikom kopiranja teksta s weba i drugih izvora, na primjer, Worda, kod se "očišćava" od suvišnih oznaka. Štoviše, ovaj zalijepljeni kod postaje valjan i točan HTML5 kod. Pritom je rezultat rada urednika uvijek isti – bez obzira koji preglednik koristite!

Na temelju rezultata obrade želja korisnika uređivač se stalno usavršava. U njemu je zgodno izvoditi mnoge operacije i raditi na stvaranju stranica i oblikovanju tekstova!

Označavanje koda i numeriranje redaka

Vrlo je zgodno uređivati ​​stranice poput PHP-a, jer uređivač ugrađen u sustav ističe kod i numerira retke. I same stranice se spremaju "u stilu Ajaxa" "pred našim očima" - bez ponovnog učitavanja stranice i bez gubitka fokusa!



Shema mračnog uređivača

  • pozadinsko osvjetljenje HTML sintaksa+ PHP + Javascript + SQL;
  • pozadinsko osvjetljenje je promjenjivo i možete ga isključiti bez ponovnog učitavanja stranice;
  • 2 teme boja - svijetla i tamna;
  • Brzi prolaz na red po njegovom broju;
  • Tab/Shift+Tab za umetanje i poništavanje kartica.

Upravljanje informacijama je svakodnevni posao, činimo sve da taj posao učinimo užitkom!

“Split” način Vertikalni i vodoravni

Sada vaš uređivač ima 2 potpuna "podijeljena" načina - okomiti i vodoravni. Vrlo je prikladno raditi u kombiniranom načinu rada.



Možete vidjeti kod stranice i njegov prikaz u isto vrijeme. Možete napraviti izmjene u bilo kojem dijelu prozora - vizualno urediti stranicu ili urediti njen kod.

Split - dijeljenje prozora na dva dijela - vizualno uređivanje i uređivanje koda.

Praktična pretraga/zamjena Pronađite komponentu u sekundi!

Uređivač ima ugrađenu praktičnu značajku pretraživanja/zamjene - san svakog upravitelja sadržaja. Sada možete, primjerice, trenutno pronaći potrebnu komponentu i "odvući" je na stranicu. Ne morate se sjećati gdje se nalazi u strukturi komponenti. Ovo je posebno vrijedno kada se koristi veliki broj komponenti.



Isti rezultat u svim preglednicima Koristite bilo koji preglednik!

Vizualni uređivač ugrađen u proizvod kompatibilan je sa svim popularnim preglednicima. Uređivač radi jednako ispravno u svim popularnim preglednicima i koristi iste funkcije za rad. Možete uređivati ​​stranice na web mjestu u bilo kojem pregledniku - rezultat će biti isti.

“Čišćenje” koda prilikom umetanja Čistog koda!

Uređivač obrađuje umetanje teksta iz različitih izvora uz automatsko čišćenje sadržaja. Prilikom kopiranja teksta, na primjer, iz Worda, kod se pretvara u HTML5. Iz koda se uklanjaju sve nepotrebne – beznačajne oznake.



Za programere

Web programeri cijenit će implementaciju funkcionalnosti ploče s komponentama i ploče s isječcima (na jednom slajdu). Također dobivaju mogućnost prilagodbe na JS razini i prošireni model događaja.

Valjani i ispravni HTML5 S validacijom - sve je u redu!

HTML5 ne dolazi tek tako, već je tu. Sa svojim ugrađenim u sustav vizualni urednik ne morate brinuti o valjanosti i ispravnosti koda stranice na vašoj stranici. Uređivač generira točno onu vrstu koda koju moderni preglednici ispravno percipiraju.



Nema potrebe za ručnim pisanjem ispravnog koda

Ovaj je uređivač ugrađen u vašu web stranicu, a vaš upravitelj sadržaja ne mora razmišljati o tome koji se strukturni elementi koriste za označavanje tekstova.

Zašto vam je potreban valjani HTML5
Prednosti prelaska na valjani HTML5 su neporecive; web programeri o njima već dugo raspravljaju (na primjer,


Sve ovo hvala nova tehnologija upravljano predmemoriranje (Cache Dependencies), koje služi upravo za ugodan rad urednik sadržaja i automatsko ažuriranje podatke odmah nakon što su promijenjeni. Ova tehnologija vam omogućuje prikaz promjena na stranici bez čekanja da se predmemorija ažurira, što sustav izvodi u određenim vremenskim razdobljima. Zato je ovo jedna od najvažnijih tehnoloških komponenti praktičnog korisničkog iskustva sa stranicom.
  • Kako biste ubrzali web mjesto i proširili projekt, preporučujemo podršku za tehnologiju Autocaching i korištenje tehnologije Managed Caching.
  • Automatski + Upravljano

Za programere

"Hermitage" za web programere Koncept "Hermitage" uključuje čitav niz tehnoloških preporuka za web programere. Ovo je impresivan popis koji sadrži preporuke za "ispravno" kreiranje vaših aplikacija. Ovo je Hermitage koncept za programere, koji točno pokazuje kako razvijati aplikacije za Bitrix platformu. Razvijte tako da ove aplikacije pružaju praktičnost i jednostavnost rada u sučelju Hermitage. Većina ovih preporuka dobro je poznata iskusnim programerima.

Preporuke za web programere:
  • Oblikovati. Izvodi se u skladu s. Pogotovo u onim trenucima koji se odnose na izradu vlastitog predloška dizajna i njegovu primjenu. Pokušali smo razviti kontrolna sučelja na takav način da ne ograničavamo web programere u mogućnostima izgleda i dizajna.
  • Preporuča se korištenje standardnih komponenti izbornika s predmemoriranjem u predlošku stranice. ()
  • Preporuča se izraditi web stranicu koristeći . Ili koristite standardne komponente ili za potrebe projekta izradite prilagođene komponente za njegove specifične potrebe.
  • Preporučujemo prilikom postavljanja izgled. To će osigurati njihovu sigurnost prilikom ažuriranja proizvoda. Predložak možete kopirati izravno iz javnog sučelja u načinu uređivanja. Komponenta može imati neograničen broj predložaka.
  • Ako mijenjate komponentu 1C-Bitrixa ili stvarate vlastitu komponentu, preporučujemo da je izradite.
  • Kada razvijate komponente, možete uzeti u obzir .
  • Korištenje se preporučuje u slučajevima stvaranja složene funkcionalnosti ili prikaza s više stranica, kada će korisnicima biti teško povezati pojedinačne komponente.
  • Kako biste ubrzali web mjesto i proširili projekt, preporučujemo podršku za tehnologiju Autocaching i korištenje tehnologije Managed Caching.
  • Prilikom postavljanja komponenti, preporučljivo je postaviti parametre komponente na Auto+Managed s dugim vremenom predmemoriranja (1-12 mjeseci ako u potpunosti radite pomoću tehnologije Cache Dependencies).
  • Poželjno je da u načinu rada Autocaching komponenta ne izvršava upite prema bazi podataka ili da izvršava samo one upite za koje je predmemoriranje neracionalno.
  • Gdje je to moguće, poželjna je podrška za optimizaciju tražilice.
  • Preporučujemo podršku za upravljanje stavkama popisa putem API-ja proizvoda. To će korisnicima omogućiti uređivanje i brisanje elemenata izravno na stranicama web-mjesta.
  • Preporuča se dizajn velikih razvoja u vlastite module s API-jem i uključivanje vlastitih komponenti u njih. Uz njihovo naknadno postavljanje na MarketPlace i mogućnost ažuriranja pomoću tehnologije SiteUpdate. ()
  • Preporuča se koristiti API platforme za rad s objektima sustava. Vrlo nepoželjni izravni upiti u bazu podataka. Zbog toga ažuriranja proizvoda mogu biti nekompatibilna s implementacijom partnera.
  • Održavanje cjelovitosti jezgre proizvoda i korištenje naših preporuka prilikom implementacije projekta kako bi se osigurala mogućnost ažuriranja proizvoda pomoću tehnologije ažuriranja SiteUpdate. Koristite interni sustav događaja za promjenu logike proizvoda ili zahtijevajte pojavu novih događaja. (
Razvoj web stranice u skladu s ovim preporukama pružit će temeljno važne aspekte za klijente: jednostavnost upravljanja, mogućnost ažuriranja, visoke performanse i sigurnost projekta.

Korisnici interneta pregledavaju web stranice na različite uređaje sa ekranima raznih veličina. Veličine zaslona se stalno mijenjaju, stoga je važno da se stranica prilagodi bilo kojoj od njih. Postoje dva glavna pristupa izradi web stranica koje je lako prilagoditi različiti tipovi uređaji:

Responzivni dizajn (RWD) - responzivni dizajn - dizajniranje stranice s određenim vrijednostima svojstava, na primjer, fleksibilna mreža izgleda, koja omogućuje da jedan izgled radi na različitim uređajima;

Adaptive Design (AWD) - adaptivni dizajn, ili dinamički prikaz - dizajn stranice s uvjetima koji se mijenjaju ovisno o uređaju, na temelju nekoliko rasporeda fiksne širine.

1. Tehnike responzivnog dizajna

Filozofija koja stoji iza responzivnog web dizajna je učiniti web mjesto lakim za pregled na bilo kojem uređaju, bez obzira na veličinu zaslona. Izraz responzivni dizajn skovao je Ethan Marcotte 2011. godine. Glavna značajka responzivnog web dizajna je da zbog fluidne mreže izgled automatski reagira na promjene u veličini zaslona, ​​napuhujući se ili skupljajući poput balona.

Responzivni web dizajn kombinira tri tehnike - fleksibilni raspored temeljen na mreži, fleksibilne slike i medijske upite.

Fleksibilnost izgleda temelji se na korištenju relativnih mjernih jedinica umjesto fiksnih vrijednosti piksela, što omogućuje prilagodbu širine kako bi odgovarala raspoloživom prostoru.

Fleksibilnost tekstualnog sadržaja postiže se izračunavanjem veličine fonta u odnosu na zadanu veličinu fonta preglednika od 16 px, na primjer za fiksnu veličinu fonta-size: 42 px relativna veličina je 42 px / 16 px = 2,625 em.

Problem fleksibilnih slika riješen je pomoću pravila img (width: 100%; max-width: 100%;) za sve slike na stranici. Ovo pravilo osigurava da slike nikada nisu šire od svojih spremnika i nikada ne prelaze svoje prave dimenzije na većim zaslonima.

Medijski upiti mijenjaju stilove na temelju karakteristika uređaja povezanih s prikazivanjem sadržaja, uključujući vrstu zaslona, ​​širinu, visinu, orijentaciju i razlučivost. Medijski upiti stvaraju responzivan dizajn koji primjenjuje odgovarajuće stilove na svaku veličinu zaslona.


Riža. 1. Responzivni dizajn Dodatne tehnike responzivnog dizajna

Skalabilan Vektorska grafika- koristite svg slike koje se skaliraju na bilo koju veličinu bez gubitka kvalitete i dobro izgledaju na Retina zaslonima.

Kartična sučelja - Koristite tzv. kartična sučelja - pravokutne oblike sa zaobljenim kutovima koji predstavljaju spremnike za sadržaj. Takvi blokovi su samostalne jedinice sučelja i lako ih je pomicati po izgledu.

Riža. 2. Pinterest, izgled temeljen na kartici

Zadržavanje samo bitnih stvari dobra je tehnika, posebno za responzivni dizajn. Stvorite responzivna i prijateljska minimalistička sučelja koja danas postaju sve popularnija.

Riža. 3. Hotellook, minimalizam u web dizajnu

Pravilno odredite prioritet i sakrijte sadržaj - koristite skrivene kontrole, posebno za uređaje s malim zaslonima. Skočni prozori, kartice, izbornici izvan okvira i druge slične tehnike pomoći će smanjiti broj elemenata na stranici. Oslobađajući prostor od nepotrebnih elemenata, učinit ćete sučelje praktičnim i jednostavnim za korištenje.

Stvorite veliki prostor na koji se može kliknuti za vaše gumbe - što je veće područje gumba na koje se može kliknuti, to je korisniku lakša interakcija s njim.

Dodajte interaktivnost svojim sučeljima – kao odgovor na radnju korisnika, stvorite radnju odgovora – animaciju koja će raditi kada lebdite iznad elementa na stolnim uređajima i kada dodirnete element na mobilnim uređajima.

2. Prilagodba okvira za prikaz pomoću meta oznake prozora za prikaz

Do mobilni preglednici Za operativni sustavi Android i iOS ne mijenjaju automatski veličinu stranica stranice; koristi se posebna oznaka s atributom name="viewport". Ova vam oznaka omogućuje postavljanje određene vrijednosti za parametri širine i početna skala:

— initial-scale=1 znači da će veličina stranice u pregledniku biti jednaka 100% veličine okvira za prikaz. Odnosno, omjer između fizičkog piksela i css piksela bit će 1:1;

— width=device-width znači da će širina stranice biti jednaka 100% širine prozora bilo kojeg preglednika. Odnosno, širina stranice web-mjesta odgovara širini uređaja, tako da je ne treba skalirati.

U u ovom primjeru sadržaj u prozoru preglednika bit će 2 puta veći u usporedbi s fizičkom veličinom.

Oznaka se također može koristiti za kontrolu koliko korisnici mogu povećati ili smanjiti širinu stranice:

Ovaj kod će vam omogućiti da povećate širinu stranice na vrijednost jednaku 3 puta širini zaslona uređaja i smanjite je na polovicu širine zaslona uređaja.

Korisnicima možete uskratiti mogućnost skaliranja pomoću atributa user-scalable:

3. Univerzalni predlošci

Većina izgleda koji se koriste za izradu responzivnog web dizajna spadaju u jednu od pet kategorija uzoraka koje je definirao Luke Wroblewski:
Uglavnom tečno (najviše gumeno),
Ispuštanje stupca (stupci jedan ispod drugog),
Layout Shifter (pokretni izgled),
Tiny Tweaks (Sitne promjene),
Izvan platna.
U nekim slučajevima stranica može koristiti kombinaciju predložaka, kao što su Column Drop i Off Canvas.

3.1. Uglavnom tekućine

Popularan raspored koji se uglavnom sastoji od gumene mreže. Na velikim zaslonima ili zaslonima srednje širine njegova veličina obično ostaje nepromijenjena; na velikim zaslonima prilagođavaju se samo margine. Na male ekrane gumena mreža uzrokuje ponovno izračunavanje izgleda za glavni sadržaj, a stupci se postavljaju jedan ispod drugog. Prednost predloška je u tome što zahtijeva samo jednu kontrolnu točku između malih i velikih zaslona.

3.2. Ispuštanje stupca

Stupci se postavljaju jedan po jedan okomito ako širina prozora ne može prikazati sav sadržaj. Kao rezultat toga, stupci će biti postavljeni okomito jedan ispod drugog. Izbor prijelomnih točaka za ovaj predložak izgleda ovisi o sadržaju i određuje se za svaku opciju dizajna posebno.

3.3. Mjenjač izgleda

Najresponzivniji predložak jer pruža više kontrolnih točaka za zaslone različitih širina. Glavna razlika s ovim izgledom je u tome što se umjesto ponovnog izračuna stabla generiranja i postavljanja stupaca jedan ispod drugog, sadržaj premješta. Zbog značajnih razlika između glavnih prijelomnih točaka, održavanje ovog izgleda je izazovnije i možda ćete morati promijeniti ne samo cjelokupni izgled sadržaja, već i njegove elemente.

3.4. Sitne izmjene

Predložak čini male promjene u izgledu, kao što je podešavanje veličine fonta, promjena veličine slika ili premještanje sadržaja. Dobro radi na izgledima s jednim stupcem, kao što su web stranice s jednom stranicom i članci s veliki iznos tekst.

3.5. Izvan platna

Sadržaj koji se rijetko koristi, poput navigacijskih elemenata ili izbornika aplikacija, postavlja se izvan zaslona i prikazuje samo kada veličina zaslona to dopušta. Na manjim zaslonima sadržaj se otvara jednim klikom.

4. Responzivni dizajn

Za razliku od responzivnog dizajna, Adaptive Web Design fokusira se na veličine uređaja. Koristi više statičkih izgleda za različite vrste uređaja (mobilni uređaji, tableti, desktop računala), na temelju kontrolnih (okretnih) točaka. Odnosno, izgledi se učitavaju pri određenim veličinama prozora preglednika uređaja, a prijelazi između izgleda događaju se naglo, a ne glatko.

Uobičajeno, responzivni izgledi imaju šest opcija izgleda ovisno o širini zaslona:
320
480
760
960
1200
1600.

Responzivni izgledi usredotočeni su na funkcionalnost, što znači da dizajn uzima u obzir značajke uređaja, kao što su dodirne kontrole za mobilne uređaje ili veliki prostor za stolne monitore.

Osnovne tehnike responzivnog dizajna

Održavajte dosljednost – svaka web stranica mora izgraditi povjerenje kod korisnika kako bi se osjećali ugodno u navigaciji i interakciji s njom. Dosljedan dizajn znači da se prilikom prelaska na drugu stranicu web-mjesta korisnik ne osjeća kao da je na drugom web-mjestu. Obratite pozornost na male detalje, izgradite vizualnu hijerarhiju i podebljajte važne elemente. Koristi serijski Shema boja na cijelom web-mjestu ponovno koristite iste elemente za različite situacije, kao što je isti dizajn skočnih obavijesti.

Koristite mrežu—poželjna je struktura od 12 stupaca za kontrolu širine stupaca i razmaka između stupaca.

5. Koja je razlika između responzivnog i adaptivnog web dizajna
Riža. 4. Responzivan i prilagodljiv dizajn na različitim uređajima

Da biste stvorili responzivne izglede, koristite medijske upite i relativne veličine elemenata rešetke navedene s %. U responzivnom dizajnu, skripte na strani poslužitelja prvo određuju vrstu uređaja na kojem korisnik pokušava pristupiti web-mjestu (stolno računalo, telefon ili tablet), zatim učitavaju točno onu verziju stranice koja je za to najoptimiziranija. Elementi rešetke imaju fiksne veličine px.

Stoga je glavna razlika između ovih tehnika responzivni dizajn – jedan izgled za sve uređaje, adaptivni dizajn – jedan izgled za svaku vrstu uređaja.

6. Korisne usluge i alati

Android emulator za Windows, Linux i Mac OS X. iOS simulator dostupan je samo za korisnike Mac OS X i dio je paketa Xcode (može se besplatno preuzeti s Mac App Storea).

PHP skripta pokrenuta na bilo kojem web-mjestu detektira veličinu zaslona i prilagođava veličinu slike da joj odgovara, što rezultira malom veličinom slike na malim zaslonima.

Tablice podudarnosti između fizičkih dimenzija uređaja i CSS vrijednosti za visinu i širinu, kao i vrijednosti omjera piksela za mobilne uređaje.

Zbirka web stranica koje koriste medijske upite i responzivni web dizajn.

CSS okvir koji se temelji na rasporedu od 12 stupaca, maksimalno 960 piksela. Podržava Chrome, Safari, Firefox, IE 7 i novije, mobilne verzije preglednici.

Skup alata za razvoj web aplikacija. LESS jezik, prilagodljivi izgled s 12 stupaca, podrška za mobilne uređaje, tablete i monitore, mnoge komponente, gumbi, padajući izbornici, prilagođeni stil polja za unos, popisi, naslovi, oznake, ikone, upozorenja, kartice, trake napretka, opisi alata , “harmonika”, “vrtuljak” i tako dalje, razni Javascript dodaci, podrška za Scaffolding, uključujući primjenu stila Bootstrap na već stvoreni HTML.

Adaptivni izgled mijenja dizajn stranice ovisno o ponašanju korisnika, platformi, veličini zaslona i orijentaciji uređaja te je sastavni dio modernog web razvoja. Omogućuje vam da značajno uštedite i ne morate crtati novi dizajn za svaku razlučivost, ali promijenite veličinu i položaj pojedinačnih elemenata.

U ovom članku ćemo pogledati glavne elemente stranice i kako ih prilagoditi.

Podešavanje rezolucije zaslona

U principu, možete podijeliti uređaje u različite kategorije i dizajnirati za svaki od njih posebno, ali to će oduzeti previše vremena, a tko zna koji će standardi biti za pet godina? Štoviše, prema statistikama, imamo cijeli niz različitih rezolucija:

Postaje očito da nećemo moći nastaviti dizajnirati za svaki uređaj zasebno. Ali što onda učiniti?

Djelomično rješenje: učiniti sve fleksibilnim

Naravno, ovo nije savršena metoda, ali otklanja većinu problema.

Ethan Marcotte stvorio je jednostavan predložak koji demonstrira upotrebu responzivnog izgleda:

Na prvi pogled može se činiti da je sve jednostavno, ali nije. Pogledajte logo:

Ako smanjite cijelu sliku, natpisi će postati nečitljivi. Stoga, kako bi se sačuvao logotip, slika je podijeljena na dva dijela: prvi dio (ilustracija) koristi se kao pozadina, drugi (logotip) proporcionalno mijenja svoju veličinu.

Element h1 sadrži sliku kao pozadinu, a slika je poravnata s pozadinom spremnika (zaglavlje).

Fleksibilne slike

Rad sa slikama jedan je od najvažnijih problema pri radu s responzivnim dizajnom. Postoji mnogo načina za promjenu veličine slika, a većina ih je prilično jednostavna za implementaciju. Jedno rješenje je korištenje max-width u CSS-u:

Slika (maksimalna širina: 100%;)

Maksimalna širina slike iznosi 100% širine zaslona ili prozora preglednika, pa što je širina manja, to je manja slika. Imajte na umu da max-width nije podržan u IE, stoga koristite width: 100% .

Prikazana metoda je dobra opcija za stvaranje adaptivne slike, no promjenom samo veličine ostavit ćemo težinu slike istom, što će povećati vrijeme učitavanja na mobilnim uređajima.

Drugi način: responzivne slike

Tehnika, koju je uvela Filament Group, ne samo da mijenja veličinu slika, već i komprimira razlučivost slika na malim zaslonima kako bi se ubrzalo učitavanje.

Ova tehnika zahtijeva nekoliko datoteka dostupnih na Githubu. Prvo uzimamo JavaScript datoteku ( rwd-slike.js), datoteka .htaccess I rwd.gif(slikovna datoteka). Zatim koristimo HTML da povežemo velike i male rezolucije: prvo mala slika s prefiksom .r(kako bi se pokazalo da slika treba odgovarati), zatim poveznica na velika slika koristeći data-fullsrc:

Za bilo koji zaslon širi od 480 px, učitat će se slika više rezolucije ( velika rez.jpg), a na malim ekranima će učitati ( mala rez.jpg).

Na iPhoneu i iPod Touch postoji posebnost: dizajn stvoren za velike zaslone jednostavno će se smanjiti u pregledniku s malom rezolucijom bez pomicanja ili dodatnog mobilnog izgleda. Međutim, slike i tekst neće biti vidljivi:

Za rješavanje ovog problema upotrijebite meta oznaku:

Ako je početno mjerilo jednako jedan, širina slika postaje jednaka širini ekrana.

Prilagodljiva struktura izgleda stranice

Za značajne promjene u veličini stranice, možda ćete morati promijeniti cjelokupni raspored elemenata. To se može jednostavno učiniti putem zasebne datoteke stilova ili, učinkovitije, putem CSS medijskog upita. Ne bi trebalo biti nikakvih problema jer će većina stilova ostati ista, a samo će se neki promijeniti.

Na primjer, imate datoteku glavnog stila koja navodi #wrapper, #content, #sidebar, #nav zajedno s bojama, pozadinom i fontovima. Ako vaši glavni stilovi čine vaš raspored preuskim, kratkim, širokim ili visokim, možete to prepoznati i uključiti nove stilove.

style.css (glavni):

/* Osnovni stilovi koje će naslijediti podređeni list stilova */ html,body( pozadina... font... boja... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Strukturalni elementi */ #wrapper( width: 80%; margina: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: lijevo; margin-desno: 3%; ) # sidebar-left( širina: 20%; float: lijevo; margin-desno: 3%; ) #sidebar-right( širina: 20%; float: lijevo; )

mobile.css (dijete):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Dodatni stilovi za novi dizajn */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Dodatni stil za naš novi izgled */ border-top: 1px solid #ccc; margin-top: 20px; )

Na širokom ekranu lijevo i desno bočne ploče dobro pristaje sa strane. Na užim zaslonima ovi blokovi se nalaze jedan ispod drugog radi veće praktičnosti.

CSS3 medijski upiti

Pogledajmo kako možete koristiti CSS3 medijske upite za izradu responzivnog dizajna. min-width određuje minimalnu širinu prozora preglednika ili zaslona na koji će se primijeniti određeni stilovi. Ako je bilo koja vrijednost ispod minimalne širine, stilovi će se zanemariti. max-width čini suprotno.

@medijski zaslon i (min. širina: 600 px) ( .hereIsMyClass ( širina: 30%; float: desno; ) )

Medijski upit radit će samo kada je minimalna širina veća ili jednaka 600 px.

@medijski zaslon i (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )

U ovom slučaju klasa ( aKlasa za male zaslone) radit će kada je širina zaslona manja ili jednaka 600 px.

Iako se min-width i max-width mogu primijeniti i na širinu zaslona i na širinu prozora preglednika, možda ćemo morati raditi samo sa širinom uređaja. Na primjer, zanemariti preglednike otvorene u malom prozoru. Za ovo možete koristiti min-device-width i max-device-width:

@medijski zaslon i (max-device-width: 480px) ( .classForiPhoneDisplay (font-size: 1.2em; ) ) @media screen i (min-device-width: 768px) ( .minimumiPadWidth ( jasno: oboje; margin-bottom : 2px solid #ccc; ) )

Posebno za iPad, medijski upiti imaju svojstvo orijentacija, čije vrijednosti mogu biti bilo koje pejzaž(vodoravno), ili portret(okomito):

@medijski zaslon i (orijentacija: vodoravno) ( .iPadLandscape (širina: 30%; lebdi: desno; ) ) @medijski zaslon i (orijentacija: okomito) ( .iPadPortrait ( jasno: oboje; ) )

Također možete kombinirati vrijednosti medijskih upita:

@medijski zaslon i (minimalna širina: 800 px) i (maksimalna širina: 1200 px) ( .classForaMediumScreen ( pozadina: #cc0000; širina: 30%; float: desno; ) )

Ovaj kôd će se izvršiti samo za zaslone ili prozore preglednika širine između 800 i 1200 px.

Možete učitati određeni list sa stilovima za različite vrijednosti medijskog upita ovako:

JavaScript

Ako vaš preglednik ne podržava CSS3 medijske upite, tada se stilovi mogu zamijeniti koristeći jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Ako je širina manje od 600 px, mobile stylesheet se koristi if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Ako je širina veća od 600 px, koristi se tablica stilova radne površine $("link").attr((href: "style.css")); ) ) ));

Izborni prikaz sadržaja

Mogućnost smanjivanja i preraspoređivanja elemenata kako bi stali na male zaslone je sjajna. Ali ovo nije najbolja opcija. Mobilni uređaji obično imaju širi skup promjena: pojednostavljenu navigaciju, fokusiraniji sadržaj, popise ili retke umjesto stupaca.

Srećom, CSS nam daje mogućnost prikazivanja i skrivanja sadržaja s nevjerojatnom lakoćom.

Zaslon: nema;

display: nijedan se ne koristi za objekte koje je potrebno sakriti.

Evo naše oznake:

Glavni sadržaj A Lijeva bočna traka Desna bočna traka

style.css (glavni):

#content( width: 54%; float: lijevo; margin-desno: 3%; ) #sidebar-left( width: 20%; float: lijevo; margin-right: 3%; ) #sidebar-right( width: 20 %; float: lijevo; ) .sidebar-nav( display: none; )

mobile.css (pojednostavljeno):

#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Ako je veličina zaslona smanjena, možete, na primjer, koristiti skriptu ili alternativna datoteka sa stilovima za povećanje bijelog prostora ili zamjenu navigacije za veću praktičnost. Dakle, s mogućnošću skrivanja i prikazivanja elemenata, mijenjanja veličine slika, elemenata i još mnogo toga, možete prilagoditi dizajn bilo kojem uređaju i zaslonu.

Kako Yandex koristi vaše podatke i strojno učenje za personalizaciju usluga -.