Prilagodljiv in uporabniku prijazen vmesnik je vse. Prilagodljiv vmesnik za operaterje kompleksnih sistemov. Funkcionalnost nadzorne plošče v okviru koncepta 1C-Bitrix: Hermitage

"Muzej Ermitaž"- to ni samo moderen vmesnik za upravljanje spletne strani - je koncept, ki združuje vmesniške rešitve in “paket” priporočil za spletne razvijalce. “Hermitage” je niz pravil, po katerih boste ustvarili hiter, varen, priročen in enostavno voden spletni projekt.

JavaScript je onemogočen v vašem brskalniku

»Že vrsto let delamo na vmesniku izdelka in ga poskušamo narediti preprostega in priročnega za uporabnike pri vsakodnevnem delu upravljanja spletnega mesta. Upoštevamo tudi interese spletnih razvijalcev, ki se soočajo s težko nalogo hitre izdelave funkcionalnih spletnih strani z najrazličnejšimi dizajni.

In ne glede na to, koliko upamo, bo vsaka stranka želela svojo, individualno zasnovo in strukturo strani. In seveda si vsi želijo, da se spletno mesto hitro odpre in prenese velik promet. Pri reševanju teh težav korak za korakom smo razvili koncept, ki združuje tehnologije in vmesniške rešitve, in ga poimenovali »1C-Bitrix: Hermitage«

"Hermitage" je:

Prenova "pokrovčka" - Re:Hermitage

Vmesnik administrativnega dela izdelka je eleganten in izrazit, predvsem pa je razumljiv na prvi pogled in ne zahteva usposabljanja. Delo z “admin panelom” je prijetno in enostavno. Zasnova je prilagojena za delo z vmesniki na dotik mobilnih naprav – pametnih telefonov in tablic.

Oblikovanje upravnega oddelka

Koncept oblikovanja je razvil AIC. Pameten vmesnik je estetsko dovršen in sproži prijetna čustva že ob prvem pogledu na “admin panel”. Tudi s hitrim seznanjanjem z "skrbniško ploščo" lahko hitro prepoznate glavne kontrole, razumete njihovo delovanje in znatno skrajšate čas usposabljanja.

Nadzor

Koncept vmesnika za upravljanje spletnega mesta

Upravljanje informacij- vsakodnevno delo in naredimo vse, da bo to delo prijetno! Vsaka nova različica izdelka sprejme korake za razvoj nadzorne plošče. To upošteva izkušnje z uporabo te plošče s strani razvijalcev in strank 1C-Bitrix. Posledično je nadzorna plošča izboljšana - pridobi ne le nov videz, ampak tudi nove zmogljivosti.

Panel vsebuje dva zaznamka, med katerimi lahko preprosto preklapljate in upravljate vsebino točno tam, kjer jo potrebujete. Nadzorna plošča in oba načina sta seveda na voljo samo registriranim uporabnikom in se prikažejo takoj, ko se prijavite na spletno mesto.

Nadzorna plošča spletnega mesta. Vmesnik "Hermitage»

Upravljanje spletnega mesta je razdeljeno na dva glavna načina:

Način dela "Nad mestom"

"Hermitage" v smislu upravljanja vključuje naslednje funkcije:

Funkcionalnost nadzorne plošče v okviru koncepta "1C-Bitrix: Hermitage

Upoštevajte, da je delovanje nadzorne plošče odvisno od pravic, ki so vam podeljene kot uporabniku spletnega mesta. Vendar pa lahko odprete razdelek za administracijo od koder koli na spletnem mestu in v katerem koli načinu na nadzorni plošči.

Način urejanja

Pritisk na gumb Način urejanja, vstopite v način urejanja. In kar je treba posebej opozoriti, je, da lahko konfigurirate vključitev tega načina s ponovnim nalaganjem strani in brez njega. Upravljaj vsi elementi in komponente na javnih straneh! Navsezadnje način urejanja ne vključuje le možnosti spreminjanja trenutne strani ali elementov informacijskih blokov, kot so novice ali izdelki v katalogu. V načinu urejanja lahko prav tako enostavno - desno "nad mestom" - upravljate komponente, vključene v predlogo mesta in v glavno delovno področje določene strani.

se prikaže, ko se z miško pomaknete nad njim. Ta meni je mogoče premakniti, pripeti ali prikazati navpično ali vodoravno. Prilagodljivi vmesnik sistema si bo zapomnil spremenjen videz kontekstnega menija za to komponento, to stran, tega uporabnika in ga naslednjič odprl v popolnoma enaki obliki in na istem mestu.

Dodajanje, urejanje in brisanje podatki o komponentah neposredno iz javnega dela spletnega mesta. Za ta dejanja sploh ni treba iti v razdelek Administrative. Uredite ali izbrišite katerega koli seznam elementov lahko uporabite gumbe, ki se prikažejo, ko z miško premaknete nad te elemente.

Zadnje dejanje lahko vrnete nazaj

Ni se vam treba bati, da bi na strani naredili kaj narobe, saj imate vedno možnost razveljavi zadnje dejanje. Ta izvedba funkcionalnosti Košare na vašem spletnem mestu zajema vse operacije na njegovi vsebini. Po dodajanju, spreminjanju strani, če je potrebno, preprosto prekličete zadnje dejanje.

Pomanjšan način

Pomanjšan način delo bo priročno za tiste, ki že znajo delati s sistemom. Preprosto pomanjšajte nadzorno ploščo, da sprostite prostor na zaslonu. Hkrati tudi minimizirana plošča ohrani funkcije upravljanja!

Lahko delate z meni, posodobite izdelek, vklopite ali izklopite način urejanja, ponastavite predpomnilnik ali pojdite v način za skrbništvo. Skratka, zložena plošča še naprej deluje! Mimogrede, ploščo lahko znova strnete in razširite z običajnim dvojnim klikom.

Administracija

Administrativni del izdelka je zasnovan za popolno upravljanje celotnega internetnega projekta. Delavec miza v upravnem delu je individualno prilagodljiva, opremljena s pripomočki in opremljena s sistemom iskanja po menijih. V izdelku lahko ustvarite poljubno število »namizij«.

Razvijalci lahko ustvarijo svoje pripomočki in jih nato dodajte na namizje. Kot primer lahko uporabite pripomočke za prikaz seznamov zadnjih naročil, novic podjetja, zbirk dokumentov itd. Deluje neposredno z namizja "iskanje v živo" prek administrativnega menija. Iskanje vas takoj pripelje do želenega elementa menija. In ni pomembno, koliko razdelkov in podvej vsebuje meni.

Transkripcija

Morda ne razmišljate o čem Ime datoteke dodelite neki strani! In za prevod imena v angleščino ne potrebujete prevajalskih programov. Samo ustvarite stran in nastavite njen naslov - samodejno boste prejeli ime datoteke.

Čarovnik za ustvarjanje strani samodejno naredi transkripcija in prevod naslova strani in ga predlaga kot ime datoteke dokumenta za boljšo optimizacijo iskalnikov.

Dostop do strani

Nove strani na spletnem mestu ne bi smeli takoj pokazati svetu. Najprej ga morate preveriti in se o njem pogovoriti s sodelavci, nato pa ga potrditi vodstvo. Ne objavite ga - ko ga ustvarjate, samo potrdite polje - "Omeji dostop do strani". Določite skupine uporabnikov, ki jim želite to prikazati - samo izberite te skupine.

Komu želite pokazati stran?

Možnost dodelitve omejitve dostopa do strani takoj ob izdelavi bo bistveno olajšal delo upravljavcem vsebin pri delu z vsebinami, ki zahtevajo dolgotrajno usklajevanje in urejanje.

Vmesnik

Upravljajte svojo spletno stran enostavno in profesionalno!

Vmesnik izdelka Hermitage prilagaja za vsakodnevno delo s spletnim mestom, si zapomni vaše nastavitve in vam omogoča, da porabite manj časa za tehnična opravila. Vmesnik je kot "plava" nad mestom, kar vam omogoča, da vidite, kaj počnete, in takoj prikaže rezultate.

« Premaknite miškin kazalec nad mesto, preprosto izvajajte dejanja, ne izgubite konteksta svojega dela in takoj pridobite vidne rezultate. Vmesnik si bo zapomnil vaše nastavitve - nastavitve seznamov, filtre, obrazce za vnos ... In naslednjič boste za to dejanje porabili manj časa.

Uporabite znani gumb »Meni« za dostop do vseh funkcij vašega spletnega mesta z enim klikom. Vse je jasno za začetnike in priročno za profesionalce. Ne navadiš se na spletno mesto, ampak se spletno mesto navadi nate, se prilagodi tvojim navadam in opravilom."

Generalni direktor 1C-Bitrix Sergej Ryzhikov

Vsa vaša energija je usmerjena v ustvarjalnost, ne v iskanje gumba!

Vsakodnevno upravljanje informacij postane bolj rutinsko, energijo pa porabite za ustvarjalna opravila namesto za tehnično objavo strani, razdelkov in menijev.

»Od različice do različice se v izdelku pojavi vse več funkcionalnosti, vse več dejanj v vmesniku. Opravili smo veliko dela pri preoblikovanju vmesnika izdelka, zlasti uporabniške nadzorne plošče.

Nov prilagodljiv vmesnik poenostavlja iskanje želenega dejanja, združuje dejanja po uporabniških vlogah in poudarja najpogostejša, da ne zamaši delovne plošče in uporabniku olajša razumevanje.”

Vadim Dumbravanu, Vodja projektov Bitrix

Prilagodljiv vmesnik je:

• Urejanje v kontekstu– upravljanje vsebin neposredno na spletnem mestu. Če želite popraviti stran, kliknite »Uredi« tam. Če želite dodati razdelek, kliknite »Ustvari«. Ne izgubite konteksta svojega dela. Novi vmesnik lebdi nad spletnim mestom, kar vam omogoča, da vidite, kaj počnete, in takoj prikaže rezultate.
• Individualna prilagoditev uporabniku– vmesnik izdelka si zapomni najnovejša dejanja, nastavitve filtrov in priročne načine predstavitve informacij. Vmesnik se prilagaja vašemu vsakodnevnemu delu in vam omogoča, da zanj porabite vsak dan manj časa.
• Gumb menija- znan in hiter dostop z enim klikom do vseh funkcij vašega spletnega mesta. Zelo je udobno! Poleg tega, ko greste na »« s pomočjo gumba »Meni«, se stran, s katere je bil opravljen prehod, zapomni - to ni nič manj prijetno!
• Prilagoditev vlog- za samozavestno opravljanje vsakodnevnega dela. Razvijalci imajo dostop do vseh orodij za razvoj in prilagajanje spletne strani. Uredniki spletnega mesta delajo samo z vsebino, brez strahu pred motnjami tehničnega dela projekta. Vsak jasno opravlja svojo nalogo.
• Čarovniki za ustvarjanje vsebine vam bo pomagal izbrati imena datotek in razdelkov, dopolnil meni spletnega mesta in vam pomagal izpolniti lastnosti. Zapletena dnevna dejanja postanejo preprosta. Enostavno ne moremo napisati vsebine namesto vas, ostalo bo namesto vas naredil mojster.

Prilagodljivi vmesnik je zasnovan za:

• zmanjšati stroške usposabljanja novih uporabnikov– usposabljanje ni potrebno, potrebujete le čas, da se spletno mesto navadi na vas. Obdobje privajanja na vmesnik je le 1 ura!
• spremenite rutinska opravila v ustvarjalni proces porabljajo energijo za ustvarjalne naloge in ne za tehnično objavo strani, razdelkov in menijev;
• zmanjšati čas za upravljanje spletne strani, s čimer postane vsakodnevno vodenje projektov navada;
• odpraviti strahove novih uporabnikov pred "zlomom projekta" in se izogni večini napak pri upravljanju vsebine.

Delo na skrbniškem vmesniku izdelka se nadaljuje. Uporabniki 1C-Bitrix: Upravljanje spletnega mesta lahko prenesejo vse posodobitve vmesnika s tehnologijo SiteUpdate. O novih priložnostih boste vedno izvedeli na spletni strani, pa tudi v naših glasilih.

Vgrajen vizualni urejevalnik

Vizualni urejevalnik HTML je že vgrajen v izdelek in vam ga ni treba namestiti. S tem urejevalnikom lahko spreminjate svoje strani na spletnem mestu v realnem času - neposredno prek brskalnika. Urejevalnik vam omogoča ne samo urejanje in oblikovanje navadnega besedila, ampak tudi delo z vizualnimi komponentami.

Vizualni urejevalnik je že vgrajen v vašo spletno stran!

Upravljanje strukture Vse možnosti

Uporabniku prijazen vmesnik

Lepa, lahka, moderna!

Vizualni urejevalnik vključuje lahek, lep in ergonomski vmesnik. Prijazni skripti za urejanje vam omogočajo priročno in hitro delo z vsebino, na primer vstavljanje povezav in slik.

Torej, ko vstavite sliko na stran, lahko takoj izberete njeno lokacijo in velikost. V besedilu lahko takoj vidite, kako izgleda.

WYSIWYG(izgovarja se "wee-zee-wig", iz angleščine What You See Is What You Get - "kar vidite, to dobite") - metoda urejanja, pri kateri je popravljeno gradivo med postopkom urejanja videti popolnoma enako kot je končni rezultat.

Urejanje v realnem času

Urejevalnik vključuje vsa orodja, ki jih potrebuje upravitelj vsebine

Komponente postavite na stran tako, da jih preprosto povlečete z miško iz posebne plošče in takoj konfigurirate njihove parametre, ki določajo videz informacij, ki se dinamično spreminjajo na vašem spletnem mestu.

Vizualni urejevalnik: urejanje parametrov komponente

Urejevalnik ima obsežna orodja za urejanje strani

Priročen iskalni mehanizem vam pomaga takoj najti potrebno komponento, ki jo postavite na stran. Pri kopiranju besedila iz spleta in drugih virov, na primer Worda, se koda "očisti" odvečnih oznak. Poleg tega ta prilepljena koda postane veljavna in pravilna koda HTML5. Hkrati je rezultat urednikovega dela vedno enak - ne glede na to, kateri brskalnik uporabljate!

Na podlagi rezultatov obdelave želja uporabnikov se urejevalnik nenehno izboljšuje. V njem je priročno izvajati številne operacije in delati na ustvarjanju strani in oblikovanju besedil!

Označevanje kod in številčenje vrstic

Zelo priročno je urejati strani, kot je PHP, saj urejevalnik, vgrajen v sistem, poudari kodo in oštevilči vrstice. In same strani so shranjene "v slogu Ajaxa" "pred našimi očmi" - brez ponovnega nalaganja strani in brez izgube fokusa!

Shema temnega urejevalnika

• poudarjanje sintakse HTML + PHP + Javascript + SQL;
• osvetlitev ozadja je preklopljiva in jo lahko izklopite brez ponovnega nalaganja strani;
• 2 barvni temi - svetla in temna;
• hiter skok v vrstico po njeni številki;
• Tab/Shift+Tab za vstavljanje in razveljavitev zavihkov.

Upravljanje informacij je vsakodnevno delo, delamo vse, da bo to delo prijetno!

Način "razdeljen".

Navpično in vodoravno

Zdaj ima vaš urejevalnik 2 polnopravna načina »razdeljevanja« - navpičnega in vodoravnega. Zelo priročno je delati v kombiniranem načinu.

Hkrati lahko vidite kodo strani in njen prikaz. Urejate lahko v katerem koli delu okna – vizualno uredite stran ali uredite njeno kodo.

Split - razdelitev okna na dva dela - vizualno urejanje in urejanje kode.

Priročno iskanje/zamenjava

Poiščite komponento v sekundi!

Urejevalnik ima vgrajeno priročno funkcijo iskanja/zamenjave - sanje vsakega upravitelja vsebine. Zdaj lahko na primer takoj poiščete zahtevano komponento in jo »povlečete« na stran. Ni vam treba zapomniti, kje je v strukturi komponent. To je še posebej pomembno, če se uporablja veliko število komponent.

Enak rezultat v vseh brskalnikih

Uporabite kateri koli brskalnik!

Vizualni urejevalnik, vgrajen v izdelek, je združljiv z vsemi priljubljenimi brskalniki. Urejevalnik deluje enako pravilno v vseh priljubljenih brskalnikih in za delo uporablja iste funkcije. Strani na spletnem mestu lahko urejate v katerem koli brskalniku - rezultat bo enak.

Koda za "čiščenje" pri vstavljanju

Čista koda!

Urejevalnik ureja vstavljanje besedila iz različnih virov s samodejnim čiščenjem vsebine. Pri kopiranju besedila, na primer iz Worda, se koda pretvori v HTML5. Iz kode so odstranjene vse nepotrebne - nepomembne oznake.

Za razvijalce

Spletni razvijalci bodo cenili implementacijo funkcionalnosti plošče komponent in plošče izrezkov (v enem diapozitivu). Dobijo tudi možnost prilagajanja na ravni JS in razširjen model dogodkov.

Veljaven in pravilen HTML5

Z validacijo - vse je ok!

HTML5 ne šele prihaja, ampak je že tukaj. Z vgrajenim vizualnim urejevalnikom vam ni treba skrbeti za veljavnost in pravilnost kode strani na vašem spletnem mestu. Urejevalnik ustvari točno takšno kodo, ki jo sodobni brskalniki pravilno zaznajo.

Ni vam treba ročno napisati pravilne kode

Ta urejevalnik je vgrajen v vaše spletno mesto in vašemu upravitelju vsebine ni treba razmišljati o tem, kateri strukturni elementi se uporabljajo za označevanje besedil.

Zakaj potrebujete veljaven HTML5
Prednosti prehoda na veljavni HTML5 so nesporne; o njih že dolgo razpravljajo spletni razvijalci (npr.

Vse to zahvaljujoč novemu upravljane tehnologije predpomnjenja (odvisnosti predpomnilnika), ki služi le priročnemu upravljanju urejevalnika vsebin in samodejnemu posodabljanju podatkov takoj po njihovi spremembi. Ta tehnologija vam omogoča prikaz sprememb na spletnem mestu, ne da bi čakali na posodobitev predpomnilnika, ki jo sistem izvede v določenih časovnih obdobjih. Zato je to ena najpomembnejših tehnoloških komponent udobne uporabniške izkušnje s spletno stranjo.

• Priporočamo podporo tehnologije za pospešitev spletnega mesta in povečanje projekta Samodejno predpomnjenje in uporabo Upravljano predpomnjenje– tehnologija.
• Samodejno+upravljano

Za razvijalce

"Hermitage" za spletne razvijalce

Koncept Hermitage vključuje celoto nabor tehnoloških priporočil za spletne razvijalce. To je impresiven seznam, ki vsebuje priporočila za "pravilno" ustvarjanje vaših aplikacij. To je koncept Hermitage za razvijalce, ki natančno prikazuje, kako razvijati aplikacije za platformo Bitrix. Razviti tako, da te aplikacije zagotavljajo priročnost in enostavnost dela v vmesniku Hermitage. Večina teh priporočil je dobro znana izkušenim razvijalcem.

Priporočila za spletne razvijalce:

• Oblikovanje. Izvaja se v skladu z. Še posebej v tistih trenutkih, ki se nanašajo na ustvarjanje lastne oblikovalske predloge in njeno uporabo. Nadzorne vmesnike smo skušali razviti tako, da ne bi omejevali spletnih razvijalcev pri možnostih postavitve in oblikovanja.
• Priporočljivo je, da v predlogi spletne strani uporabite standardne komponente menija s predpomnjenjem. ()
• Priporočljivo je, da spletno mesto ustvarite z uporabo. Bodisi uporabite standardne komponente ali za namene projekta ustvarite komponente po meri za njegove posebne potrebe.
• Priporočamo ga pri prilagajanju videza. To bo zagotovilo njihovo varnost pri posodabljanju izdelka. Predlogo lahko kopirate neposredno iz javnega vmesnika v načinu urejanja. Komponenta ima lahko neomejeno število predlog.
• Če spreminjate komponento 1C-Bitrix ali ustvarjate svojo komponento, priporočamo, da jo ustvarite.
• Pri razvoju komponent lahko upoštevate .
• Uporaba je priporočljiva v primerih ustvarjanja kompleksne funkcionalnosti ali večstranskih pogledov, ko bo povezovanje posameznih komponent za uporabnike težko.
• Za pospešitev spletnega mesta in razširitev projekta priporočamo podporo za tehnologijo Autocaching in uporabo tehnologije Managed Caching.
• Pri konfiguriranju komponent je priporočljivo nastaviti vrednost v parametrih komponent Samodejno+upravljano z dolgim ​​časom predpomnjenja (1-12 mesecev, če v celoti uporabljate tehnologijo Cache Dependencies).
• Zaželeno je, da v načinu samodejnega predpomnjenja komponenta ne izvaja poizvedb v bazo ali pa izvaja samo tiste poizvedbe, za katere je predpomnjenje neracionalno.
• Kjer je mogoče, je zaželena podpora za optimizacijo iskalnikov.
• Priporočamo podporo za upravljanje elementov seznama prek API-ja izdelka. To bo uporabnikom omogočilo urejanje in brisanje elementov neposredno na straneh spletnega mesta.
• Priporočljivo je, da velike razvoje oblikujete v lastne module z API-jem in vključitvijo lastnih komponent vanje. Z njihovo naknadno umestitvijo v MarketPlace in možnost posodabljanja s tehnologijo SiteUpdate. ()
• Za delo s sistemskimi objekti je priporočljivo uporabljati API platforme. Zelo nezaželene neposredne poizvedbe v bazo podatkov. To lahko povzroči, da posodobitve izdelka niso združljive s partnerjevo izvedbo.
• Ohranjanje celovitosti jedra izdelka in uporaba naših priporočil pri izvajanju projekta, da se zagotovi posodobitev izdelka s tehnologijo posodabljanja SiteUpdate. Uporabite notranji sistem dogodkov, da spremenite logiko izdelka ali zahtevate pojav novih dogodkov. (

Razvoj spletnega mesta v skladu s temi priporočili bo zagotovil bistveno pomembne vidike za stranke: enostavnost upravljanja, možnost posodabljanja, visoko zmogljivost in varnost projekta.

Uporabniki interneta brskajo po spletnih mestih na različnih napravah z različnimi velikostmi zaslona. Velikosti zaslonov se nenehno spreminjajo, zato je pomembno, da se spletno mesto prilagodi katerikoli izmed njih. Obstajata dva glavna pristopa k izdelavi spletnih mest, ki se zlahka prilagodijo različnim vrstam naprav:

Odzivni dizajn (RWD)- odzivno oblikovanje - oblikovanje spletnega mesta z določenimi vrednostmi lastnosti, na primer prilagodljiva mreža postavitve, ki omogoča, da ena postavitev deluje na različnih napravah;

Prilagodljiva zasnova (AWD)— prilagodljivo oblikovanje ali dinamični prikaz — oblikovanje mesta s pogoji, ki se spreminjajo glede na napravo, na podlagi več postavitev s fiksno širino.

1. Tehnike odzivnega oblikovanja

Filozofija v ozadju odzivnega spletnega oblikovanja je narediti spletno mesto enostavno za ogled v kateri koli napravi, ne glede na velikost zaslona. Fraza odziven dizajn je leta 2011 izumil Ethan Marcotte. Glavna značilnost odzivnega spletnega oblikovanja je, da se postavitev zaradi tekoče mreže samodejno odziva na spremembe velikosti zaslona, ​​napihuje ali krči kot balon.

Odzivno oblikovanje(Angleščina) Odzivno spletno oblikovanje) združuje tri metode - prilagodljiva postavitev na osnovi mreže, prilagodljive slike in medijske poizvedbe.

Prilagodljivost postavitve temelji na uporabi relativnih merskih enot namesto fiksnih vrednosti slikovnih pik, kar omogoča prilagajanje širine glede na razpoložljivi prostor.

Prilagodljivost besedilne vsebine se doseže z izračunom velikosti pisave glede na privzeto velikost pisave brskalnikov 16 slikovnih pik, na primer za fiksno velikost pisave: 42 slikovnih pik je relativna velikost 42 slikovnih pik / 16 slikovnih pik = 2,625 em.

Težava prilagodljive slike rešeno z uporabo pravila img (width: 100 %; max-width: 100 %;) za vse slike na spletnem mestu. To pravilo zagotavlja, da slike nikoli niso širše od svojih vsebnikov in nikoli ne presežejo svoje prave velikosti na večjih zaslonih.

Medijska vprašanja spremenite sloge glede na značilnosti naprave, povezane s prikazom vsebine, vključno z vrsto zaslona, ​​širino, višino, orientacijo in ločljivostjo. Medijske poizvedbe ustvarijo odziven dizajn, ki uporabi ustrezne sloge za vsako velikost zaslona.

riž. 1. Odziven dizajn

Dodatne tehnike odzivnega oblikovanja

Razširljiva vektorska grafika- uporabite slike svg, ki se spreminjajo v poljubno velikost brez izgube kakovosti in so videti dobro na zaslonih Retina.

Kartični vmesniki- uporabljajte tako imenovane kartične vmesnike - pravokotne oblike z zaobljenimi vogali, ki predstavljajo vsebnike za vsebino. Takšni bloki so samostojne vmesniške enote in jih je enostavno premikati po postavitvi.

riž. 2. Pinterest, postavitev na osnovi kartic

Pustite le najnujnejše- dobra tehnika, zlasti za odzivno oblikovanje. Ustvarite odzivne in prijazne minimalistične vmesnike, ki so dandanes vse bolj priljubljeni.

riž. 3. Hotellook, minimalizem v oblikovanju spletnih strani

Pravilno določite prednost in skrijete vsebino- Uporabite skrite kontrole, zlasti za naprave z majhnimi zasloni. Pojavna okna, zavihki, meniji zunaj platna in druge podobne tehnike bodo pomagale zmanjšati število elementov na strani. S sprostitvijo prostora pred nepotrebnimi elementi boste naredili vmesnik priročen in uporabniku prijazen.

Ustvarite velik prostor za gumbe, ki ga je mogoče klikniti— večja je aktivna površina gumba, lažje je za uporabnika interakcijo z njim.

Dodajte interaktivnost svojim vmesnikom- kot odgovor na dejanje uporabnika ustvarite odzivno dejanje - animacijo, ki bo delovala ob premikanju miške nad element na namiznih napravah in ob dotiku elementa na mobilnih napravah.

2. Prilagajanje vidnega polja z metaoznako vidnega polja

Da bi mobilnim brskalnikom za operacijska sistema Android in iOS preprečili samodejno spreminjanje velikosti strani spletnega mesta, se uporablja posebna oznaka z atributom name="viewport". Ta oznaka vam omogoča, da nastavite določeno vrednost parametrov širine in začetnega merila:

— initial-scale=1 pomeni, da bo velikost strani v brskalniku enaka 100 % velikosti vidnega polja. To pomeni, da bo razmerje med fizično slikovno piko in slikovno piko css 1:1;

— width=device-width pomeni, da bo širina strani enaka 100 % širine okna katerega koli brskalnika. To pomeni, da širina strani spletnega mesta ustreza širini naprave, zato je ni treba spreminjati.

V tem primeru bo vsebina v oknu brskalnika 2-krat večja v primerjavi s svojo fizično velikostjo.

Tudi označi lahko uporabite za nadzor, koliko lahko uporabniki povečajo ali zmanjšajo širino strani:

Ta koda vam bo omogočila, da širino strani povečate na vrednost, ki je enaka 3-kratni širini zaslona naprave, in jo zmanjšate na polovico širine zaslona naprave.

Uporabnikom lahko onemogočite možnost spreminjanja velikosti z uporabo atributa, ki ga je mogoče prilagoditi uporabniku:

3. Univerzalne šablone

Večina postavitev, ki se uporabljajo za ustvarjanje odzivnega spletnega oblikovanja, sodi v eno od petih kategorij vzorcev, ki jih je opredelil Luke Wroblewski:
Večinoma tekočina(Najbolj gumijast)
Padec stolpca(Stolpci drug pod drugim),
Layout Shifter(premikljiva postavitev),
Drobne popravke(Majhne spremembe)
Off Canvas(Izven zaslona).
V nekaterih primerih lahko stran uporablja kombinacijo predlog, kot sta Column Drop in Off Canvas.

3.1. Večinoma tekočina

Priljubljena postavitev, sestavljena predvsem iz gumijaste mreže. Na velikih ali srednje širokih zaslonih njegova velikost običajno ostane nespremenjena, na velikih zaslonih se prilagodijo le robovi. Na manjših zaslonih gumijasta mreža povzroči, da se postavitev preračuna za glavno vsebino, stolpci pa so postavljeni drug pod drugim. Prednost predloge je, da zahteva samo eno kontrolno točko med malimi in velikimi zasloni.

3.2. Padec stolpca

Stolpce postavimo enega za drugim navpično, če širina okna ne more prikazati vse vsebine. Posledično bodo stolpci nameščeni navpično drug pod drugim. Izbira prelomnih točk za to predlogo postavitve je odvisna od vsebine in je določena za vsako možnost oblikovanja posebej.

3.3. Layout Shifter

Najbolj odzivna predloga, saj omogoča več kontrolnih točk za zaslone različnih širin. Glavna razlika pri tej postavitvi je, da se vsebina premakne namesto ponovnega izračuna drevesa upodabljanja in postavljanja stolpcev enega pod drugega. Zaradi velikih razlik med glavnimi prelomnimi točkami je vzdrževanje te postavitve zahtevnejše in morda boste morali spremeniti ne samo celotno postavitev vsebine, ampak tudi njene elemente.

3.4. Drobne popravke

Predloga naredi majhne spremembe v postavitvi, kot je prilagajanje velikosti pisave, spreminjanje velikosti slik ali premikanje vsebine. Dobro deluje na postavitvah z enim stolpcem, kot so enostranska spletna mesta in članki z veliko besedila.

3.5. Off Canvas

Vsebina, ki se redko uporablja, kot so navigacijski elementi ali meniji aplikacij, je postavljena zunaj zaslona in prikazana le, če velikost zaslona to dopušča. Na manjših zaslonih se vsebina odpre z enim klikom.

4. Odziven dizajn

Za razliko od odzivnega dizajna, prilagodljiv dizajn(Adaptive Web Design) se osredotoča na velikosti naprav. Uporablja več statičnih postavitev za različne vrste naprav (mobilne naprave, tablice, namizni računalniki), ki temeljijo na kontrolnih (prelomnih) točkah. To pomeni, da se postavitve naložijo pri določenih velikostih oken brskalnika naprave, prehodi med postavitvami pa se zgodijo nenadoma in ne gladko.

Običajno imajo odzivne postavitve šest možnosti postavitve, odvisno od širine zaslona:
320
480
760
960
1200
1600.

Odzivne postavitve se osredotočajo na funkcionalnost, kar pomeni, da zasnova upošteva funkcije naprave, kot so upravljanje na dotik za mobilne naprave ali veliki prostori za namizne monitorje.

Osnovne tehnike odzivnega oblikovanja

Naj bo dosleden— vsako spletno mesto mora z uporabnikom ustvariti zaupljiv odnos, tako da se ta med navigacijo in interakcijo z njim počuti udobno. Dosledna zasnova pomeni, da se uporabnik ob prehodu na drugo stran spletnega mesta ne počuti, kot da je na drugem spletnem mestu. Bodite pozorni na majhne podrobnosti, zgradite vizualno hierarhijo in poudarite pomembne elemente s krepko pisavo. Uporabite dosledno barvno shemo na celotnem spletnem mestu, pri čemer ponovno uporabite iste elemente za različne situacije, na primer isto zasnovo pojavnih obvestil.

Uporabite mrežo— struktura z 12 stolpci je bolj zaželena za nadzor širine stolpcev in podloge med njimi.

5. Kakšna je razlika med odzivnim in prilagodljivim spletnim dizajnom

riž. 4. Odziven in prilagodljiv dizajn na različnih napravah

Če želite ustvariti odzivne postavitve, uporabite medijske poizvedbe in relativne velikosti mrežnih elementov, določene z %. Pri odzivnem dizajnu skripti na strežniški strani najprej določijo vrsto naprave, na kateri uporabnik poskuša dostopati do spletnega mesta (namizje, telefon ali tablični računalnik), nato pa naloži točno tisto različico strani, ki je zanj najbolj optimizirana. Elementi mreže imajo fiksne velikosti slikovnih pik.

Zato je glavna razlika med tema tehnikama odzivno oblikovanje – ena postavitev za vse naprave, prilagodljivo oblikovanje – ena postavitev za vsako vrsto naprave.

6. Uporabne storitve in orodja

Android emulator za Windows, Linux in Mac OS X. iOS simulator je na voljo samo za uporabnike Mac OS X in je del paketa Xcode (brezplačno ga lahko prenesete iz Mac App Store).

Skript PHP, ki se izvaja na katerem koli spletnem mestu, zazna velikost zaslona in prilagodi velikost slike, da se ji prilega, kar povzroči majhno velikost slike na majhnih zaslonih.

Tabele ujemanja med fizičnimi dimenzijami naprav in vrednostmi CSS za višino in širino ter vrednostjo razmerja slikovnih pik za mobilne naprave.

Zbirka spletnih mest, ki uporabljajo medijske poizvedbe in odzivno spletno oblikovanje.

Ogrodje CSS temelji na postavitvi z 12 stolpci, največ 960 slikovnih pik. Podprto s Chrome, Safari, Firefox, IE 7 in novejšimi različicami brskalnikov za mobilne naprave.

Nabor orodij za razvoj spletnih aplikacij. LESS jezik, prilagodljiva postavitev z 12 stolpci, podpora za mobilne naprave, tablice in monitorje, številne komponente, gumbi, spustni meniji, slog vnosnih polj po meri, seznami, naslovi, oznake, ikone, opozorila, zavihki, vrstice napredka, opisi orodij , »accordion«, »carousel« in tako naprej, različni vtičniki Javascript, podpora za Scaffolding, vključno z uporabo sloga Bootstrap za že ustvarjen HTML.

Trenutno je odzivnih okoli 11-12 % od 100.000 najbolj obiskanih strani in ni dvoma, da se bo ta številka v naslednjih nekaj letih povečala.

Ker vse več organizacij zaviha rokave, da bi sprejele resničnost spleta v več napravah, si je vredno ogledati različne strategije, ki se uporabljajo za doseganje te nirvane:

Prilagodljiva posodobitev

Odzivno preoblikovanje je postopek, s katerim se obstoječe spletno mesto samo za namizne računalnike v bistvu "preoblikuje tako, da postane odzivno".

Ko gre za že pripravljena spletna mesta (zlasti komercialna), ekipe nimajo vedno možnosti, da bi vse zavrgli in zgradili znova.
Dan Cederholm

Za večino organizacij obsežno ustvarjanje novega dizajna iz nič sploh ne pride v poštev. Zato je odzivna posodobitev priljubljen pristop k ustvarjanju dobre izkušnje za mobilne naprave.

Prednosti

• Relativno hitro.
  Obstaja kar nekaj načinov za izvedbo odzivne posodobitve, ta strategija bi lahko bila dodajanje datoteke small-screens.css na spletno mesto. Kljub temu precej surovemu primeru je prilagodljiva posodobitev privlačna možnost za veliko število organizacij, ker ne zahteva ponovne izgradnje vsega iz nič.
• Poznan.
  Ne zmede uporabnikov. Ljudje so se leta privajali na vmesnik, s posodobitvijo obstoječega pa organizacije ohranjajo znani pristop in hkrati izboljšujejo življenja ljudi z mobilnimi napravami.
• Organizacijsko hitreje.
  Politično gledano je posodobitev vmesnika varnejša kot začetek iz nič. Manj bo razprav o tem, kateri odtenek zelene izbrati, kakšne nepomembne fotke uporabiti, vodstvu pa ne bo treba zvijati rok. To ekipam omogoča, da hitreje zaženejo odzivna spletna mesta.

Napake

• Vpliva le na majhen del.
  Spet obstaja veliko možnosti za preoblikovanje, vendar je cilj večine od njih "narediti lepo". Z osredotočanjem na preoblikovanje postavitve preoblikovanje pogosto spregleda nešteto drugih dejavnikov, ki jih je treba upoštevati pri ustvarjanju uspešne zasnove za različne naprave.
• 10 litrov vode v trilitrski kozarec.
  Ker so namizna spletna mesta zasnovana samo za namizne računalnike (in pogosto trajajo dlje časa), lahko vsebujejo veliko nereda. In ker je modernizacija v glavnem sestavljena iz ponovnega taljenja postavitve, večina težav z vsebino ni v celoti upoštevana.
• Izvedba.
  Nekaj ​​čudnega je pisanje kode za boljšo podporo majhnim napravam. Odstranjevanje nepotrebnih stvari je lahko predaleč, vendar brez osredotočanja na produktivnost ne bo raslo samo od sebe.
• Najslabša podpora.
  Medijske poizvedbe, ki so bile prvotno zasnovane za namizne računalnike, večina mobilnih naprav slabo podpira.
• Začasni popravki.
  Umiram, ko slišim ljudi, ki me prosijo, naj nekaj »naredim odzivno«, kot da bi bilo le potrditveno polje v načrtu projekta (kar včasih tudi dejansko je). Ta vrsta omejenega razmišljanja zamudi prave priložnosti, ki jih ponuja odzivno oblikovanje.

Odzivna mobilna spletna mesta

Odzivna mobilna spletna mesta, ali kot jim pravim »semena za odzivno prihodnost«, so praksa ustvarjanje ločenega spletnega mesta v obliki »m.yourdomain.ru« z uporabo tehnik odzivnega oblikovanja. Spletna mesta, kot so The BBC, The Guardian in Entertainment Weekly (na katerih sem delal), uporabljajo to strategijo.

Mobilna različica vam daje priložnost, da posadite seme, ki bo zraslo iz vašega starega spletnega mesta.

Sčasoma je mogoče zastarelo spletno mesto odstraniti, spletno mesto pa se bo razvilo tako, da bo najprej mobilno, odzivno in bo upoštevalo prihodnje trende.

Prednosti

• Manjše tveganje.
  Večina organizacij še vedno vidi promet iz mobilnih naprav kot manjšino. Uvedba mobilnega odzivnega spletnega mesta torej omogoča tem organizacijam, da preizkusijo vode, ne da bi morali najprej skočiti na temo.
• Priložnost, da se naučite biti prilagodljivi.
  Oblikovalci se lahko naučijo razmišljati bolj prožno. Razvijalci se bodo naučili neštetih trikov naprav Android. Vodje lahko ugotovijo, kako se oddaljiti od popolnosti slikovnih pik. Odzivno mobilno spletno mesto je lahko odličen peskovnik za učenje.
• Infrastruktura.
  Ekipe se lahko naučijo, kako rešiti težave z upravljanjem vsebine, kot je ustvarjanje slik, enkrat za vselej
• Odstranite presežek.
  Ta pristop ponuja odlično priložnost za ekipe, da se vprašajo, ali to res potrebujemo, hkrati pa se osredotočajo na uspešnost. Zakaj? Ker je njihov glavni poudarek na izboljšanju uporabniške izkušnje njihove strani na mobilnih napravah.
• Prihodnost so spletna mesta, ki so na prvem mestu mobilne naprave.
  Čeprav na začetku nimajo vsebine ali funkcionalnosti, lahko z dovolj časa in truda ta mobilna spletna mesta sčasoma nadomestijo svoje celostranske prednike.

Napake

• Še vedno je mobilna stran.
  Ne glede na to, ali je odziven ali ne, ta pristop še vedno ohranja veliko slabosti mobilnih spletnih mest: težave s preusmeritvijo URL-jev, upravljanjem vsebine, konsistentnostjo vsebine, doslednostjo, SEO optimizacijo in druge.
• Začasni popravki.
  Številna mobilna spletna mesta so ustvarjena kot obliž - za zaustavitev krvavitve. Takšna spletna mesta so ustvarjena z namenom razbremenitve naraščajočega prometa, ki prihaja iz mobilnih naprav. Te rešitve morda še vedno izpolnjujejo obstoječe potrebe, vendar vas glede na prihodnje trende dolgoročno verjetno ne bodo rešile.
• Verjetnost odmiranja na trti.
  Nekatere organizacije lahko začnejo s takšnimi projekti, pridejo do polovice in nato opustijo celotno stvar, dokler ni sprejet proračun za naslednje leto.
• Dizajn za male zaslone.
  Ker je začetni poudarek na majhnih zaslonih, je kasnejši prenos vmesnika na večje zaslone brez izgube kakovosti lahko izziv.

Odziven dizajn za mobilne naprave izvorno