Adaptiivne paigutus muudab lehe kujundust sõltuvalt kasutaja käitumisest, platvormist, ekraani suurusest ja seadme orientatsioonist ning on tänapäevase veebiarenduse lahutamatu osa. See võimaldab oluliselt säästa ja mitte iga eraldusvõime jaoks uut kujundust joonistada, vaid muuta üksikute elementide suurust ja asukohta.

Selles artiklis käsitletakse saidi põhielemente ja nende kohandamist.

Ekraani eraldusvõime reguleerimine

Põhimõtteliselt saab seadmed jagada erinevatesse kategooriatesse ja kujundada igaühe jaoks eraldi, kuid see võtab liiga palju aega ja kes teab, millised standardid on viie aasta pärast? Lisaks on meil statistika kohaselt terve rida erinevaid eraldusvõimeid:

On ilmne, et me ei saa jätkata iga seadme jaoks eraldi disainimist. Aga mida siis teha?

Osaline lahendus: muutke kõik paindlikuks

Loomulikult pole see täiuslik meetod, kuid see kõrvaldab enamiku probleemidest.

Ethan Marcotte lõi lihtsa malli, mis demonstreerib tundliku paigutuse kasutamist:

Esmapilgul võib tunduda, et kõik on lihtne, kuid see pole nii. Heitke pilk logole:

Kui vähendate kogu pilti, muutuvad pealdised loetamatuks. Seetõttu on logo salvestamiseks pilt jagatud kaheks osaks: esimest osa (illustratsiooni) kasutatakse taustana, teine ​​(logo) muudab oma suurust proportsionaalselt.

Element h1 sisaldab taustana pilti ja pilt on joondatud konteineri (päise) taustaga.

Paindlikud pildid

Piltidega töötamine on tundliku disainiga töötamisel üks olulisemaid probleeme. Piltide suuruse muutmiseks on palju võimalusi ja enamikku neist on üsna lihtne rakendada. Üks lahendus on kasutada CSS-is maksimaalset laiust:

Img (maksimaalne laius: 100%;)

Pildi maksimaalne laius on 100% ekraani või brauseriakna laiusest, seega mida väiksem on laius, seda väiksem on pilt. Pange tähele, et IE-s ei toetata maksimaalset laiust, seega kasutage laiust: 100%.

Esitatud meetod on hea võimalus adaptiivsete piltide loomiseks, kuid muutes ainult suurust, jätame pildi kaalu samaks, mis suurendab mobiilseadmete laadimisaega.

Teine võimalus: reageerivad pildid

Filament Groupi kasutusele võetud tehnika ei muuda mitte ainult piltide suurust, vaid tihendab laadimise kiirendamiseks ka piltide eraldusvõimet väikestel ekraanidel.

See tehnika nõuab mitut Githubis saadaolevat faili. Esmalt võtame JavaScripti faili ( rwd-images.js), faili .htaccess Ja rwd.gif(pildifail). Seejärel kasutame suurte ja väikeste eraldusvõimete seostamiseks mõnda HTML-i: kõigepealt väike pilt koos eesliitega .r(näitamaks, et pilt peaks olema tundlik), seejärel linkige suure pildiga, kasutades data-fullsrc:

Iga ekraani puhul, mis on laiem kui 480 px, laaditakse kõrgema eraldusvõimega pilt ( largeRes.jpg) ja väikestel ekraanidel laaditakse ( smallRes.jpg).

iPhone'il ja iPod Touchil on funktsioon: suurte ekraanide jaoks loodud disain kahaneb madala eraldusvõimega brauseris ilma kerimise või täiendava mobiilipaigutuseta. Kuid pildid ja tekst ei ole nähtavad:

Selle probleemi lahendamiseks kasutage metasilti:

Kui algmõõtkava on võrdne ühega, muutub piltide laius võrdseks ekraani laiusega.

Kohandatav lehe paigutuse struktuur

Lehekülje suuruse oluliste muutuste korral peate võib-olla muutma elementide üldist paigutust. Seda saab mugavalt teha eraldi stiilifaili või tõhusamalt CSS-i meediumipäringu kaudu. Probleeme ei tohiks tekkida, kuna enamik stiile jääb samaks ja vaid mõned muutuvad.

Näiteks on teil peamine stiilifail, mis määrab #wrapper , #content , #sidebar , #nav koos värvide, tausta ja fontidega. Kui teie põhistiilid muudavad teie paigutuse liiga kitsaks, lühikeseks, laiaks või kõrgeks, saate selle tuvastada ja lisada uusi stiile.

style.css (peamine):

/* Põhilaadid, mille pärib alamlaadileht */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Struktuurielemendid */ #wrapper( laius: 80%; veeris: 0 auto; taust: #fff; polster: 20px; ) #content( laius: 54%; float: vasak; veeris-parem: 3%; ) # sidebar-left( laius: 20%; float: left; margin-right: 3%; ) #sidebar-right( laius: 20%; float: left; )

mobile.css (laps):

#wrapper( laius: 90%; ) #content( laius: 100%; ) #sidebar-left( laius: 100%; selge: mõlemad; /* Uue kujunduse täiendavad stiilid */ ääris-ülaosa: 1px solid #ccc ; ääris-ülemine: 20 pikslit;

Laiekraanil mahuvad vasak ja parem küljeriba ilusti kõrvale. Kitsamatel ekraanidel paiknevad need plokid suurema mugavuse huvides üksteise all.

CSS3 meediumipäringud

Vaatame, kuidas saate CSS3 meediumipäringuid kasutada reageerivate kujunduste loomiseks. min-width määrab brauseriakna või ekraani minimaalse laiuse, millele teatud stiile rakendatakse. Kui mõni väärtus on väiksem kui min-width , siis stiile ignoreeritakse. max-width teeb vastupidist.

@meediaekraan ja (min-laius: 600 pikslit) ( .hereIsMyClass ( laius: 30%; hõljumine: paremal; ) )

Meediapäring töötab ainult siis, kui minimaalne laius on suurem või võrdne 600 piksliga.

@meediumiekraan ja (maksimaalne laius: 600 pikslit) ( .aClassforSmallScreens ( selge: mõlemad; fondi suurus: 1,3 em; ) )

Sel juhul klass ( aClassforSmallscreens) töötab, kui ekraani laius on 600 pikslit või väiksem.

Kuigi minimaalne ja maksimaalne laius võivad kehtida nii ekraani laiuse kui ka brauseriakna laiuse kohta, peame võib-olla töötama ainult seadme laiusega. Näiteks väikeses aknas avatud brauserite ignoreerimiseks. Selleks saate kasutada väärtusi minimaalne seadme laius ja maksimaalne seadme laius:

@meediumiekraan ja (seadme maksimaalne laius: 480 pikslit) ( .classForiPhoneDisplay ( fondi suurus: 1,2 em; ) ) @meediumiekraan ja (seadme minimaalne laius: 768 pikslit) ( .minimumiPadWidth ( selge: mõlemad; margin-bottom : 2px solid #ccc ) )

Eriti iPadi puhul on meediumipäringutel omadus orientatsiooni, mille väärtused võivad olla kas maastik(horisontaalne) või portree(vertikaalne):

@meediumiekraan ja (orientatsioon: horisontaalpaigutus) ( .iPadLandscape (laius: 30%; hõljumine: parem

Samuti saate kombineerida meediumipäringu väärtusi:

@meediaekraan ja (minimaalne laius: 800 pikslit) ja (maksimaalne laius: 1200 pikslit) ( .classForaMediumScreen ( taust: #cc0000; laius: 30%; hõljumine: paremal; ) )

See kood töötab ainult ekraanidel või brauseriakendel laiusega 800–1200 px.

Saate laadida konkreetse lehe erinevate meediumipäringu väärtuste stiilidega, näiteks järgmiselt:

JavaScript

Kui teie brauser ei toeta CSS3 meediumipäringuid, saab stiili asendada jQuery abil:

$(document).ready(function())( $(window).bind("suuruse muutmine", resizeWindow); funktsioon resizeWindow(e)( var newWindowWidth = $(window).width(); // Kui laius on vähem kui 600 px , kasutatakse mobiili laaditabelit if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Kui laius on suurem kui 600 px, kasutatakse töölaua laaditabelit $("link").attr((href: "style.css")); ) ) ));

Valikuline sisu kuvamine

Võimalus elemente väikestele ekraanidele mahutamiseks kokku tõmmata ja ümber paigutada on suurepärane. Kuid see pole parim valik. Mobiilseadmetel on tavaliselt laiem muudatuste komplekt: lihtsustatud navigeerimine, rohkem keskendunud sisu, veergude asemel loendid või read.

Õnneks annab CSS meile võimaluse uskumatult lihtsalt sisu kuvada ja peita.

Kuva: puudub;

kuva: ühtegi ei kasutata objektide puhul, mida tuleb peita.

Siin on meie märgistus:

Vasaku külgriba sisu | Parema külgriba sisu

Põhisisu Vasak külgriba Parem külgriba

style.css (peamine):

#sisu( laius: 54%; hõljuk: vasak; veeris-parem: 3%; ) #sidebar-left( laius: 20%; float: vasak; veeris-parem: 3%; ) #sidebar-right( laius: 20 % float: left; .sidebar-nav( display: none; )

mobile.css (lihtsustatud):

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

Kui ekraani suurust on vähendatud, saate kasutada näiteks skripti või alternatiivset stiilifaili, et suurendada tühikut või asendada navigeerimisseade suurema mugavuse huvides. Seega, kuna teil on võimalus elemente peita ja näidata, muuta piltide, elementide suurust ja palju muud, saate disaini kohandada mis tahes seadme ja ekraaniga.

Kuidas Yandex teie andmeid ja masinõpet teenuste isikupärastamiseks kasutab -.

Hetkel on 100 000 enimkülastatud saidist responsiivsed umbes 11-12% ja pole kahtlust, et see arv lähiaastatel kasvab.

Kuna üha rohkem organisatsioone käärib käised üles, et omaks võtta veebi tegelikkus mitmes seadmes, tasub heita pilk erinevatele strateegiatele, mida selle nirvaana saavutamiseks kasutatakse.

Adaptiivne moderniseerimine

Responsiivne ümberkujundamine on protsess, mille käigus muudetakse olemasolev ainult töölauale mõeldud veebisait ja sisuliselt muudetakse see tundlikuks.

Kui tegemist on valmis saitidega (eriti kaubanduslike saitidega), ei ole meeskondadel alati võimalust kõike ära visata ja uuesti ehitada.
Dan Cederholm

Enamiku organisatsioonide jaoks ei mõelda isegi uue disaini suuremahulisele loomisele nullist. Seetõttu on tundlik moderniseerimine populaarne lähenemisviis mobiilseadmetele hea kasutuskogemuse loomiseks.

Eelised

• Suhteliselt kiire.
  Responsiivseks moderniseerimiseks on üsna palju võimalusi, see strateegia võib olla saidile väikese ekraaniga faili lisamine. Vaatamata sellele üsna toore näitele on adaptiivne moderniseerimine paljude organisatsioonide jaoks atraktiivne võimalus, kuna see ei nõua kõike nullist uuesti üles ehitama.
• Tuttav.
  Ei aja kasutajaid segadusse. Inimesed on liidesega harjunud aastaid ja olemasolevat moderniseerides säilitavad organisatsioonid tuttava lähenemise, parandades samal ajal mobiilseadmetega inimeste elu.
• Organisatsiooniliselt kiirem.
  Poliitiliselt on liidese moderniseerimine turvalisem kui nullist alustamine. Vähem vaieldakse selle üle, millist rohelist tooni valida, milliseid triviaalseid fotosid kasutada ja juhtkond ei pea oma käsi väänama. See võimaldab meeskondadel kiiremini reageerivaid saite käivitada.

Puudused

• See mõjutab ainult väikest osa.
  Jällegi on ümberkujundamiseks palju võimalusi, kuid enamiku eesmärk on muuta see ilusaks. Keskendudes paigutuse ümberkujundamisele, jäetakse ümberdisainimisel sageli tähelepanuta lugematu hulk muid tegureid, mida tuleb erinevate seadmete eduka disaini loomisel arvesse võtta.
• 10 liitrit vett kolmeliitrises purgis.
  Kuna lauaarvutisaidid on loodud ainult lauaarvutite jaoks (ja kestavad sageli kaua), võivad need sisaldada palju segadust. Ja kuna moderniseerimine seisneb peamiselt paigutuse ümbersulatamises, ei võeta enamikku sisuga seotud probleeme täielikult arvesse.
• Esitus.
  Väikeste seadmete paremaks toetamiseks on koodi kirjutamises midagi kummalist. Tarbetu kraami eemaldamine võib minna liiale, kuid tootlikkusele keskendumata see iseenesest ei kasva.
• Halvim toetus.
  Algselt lauaarvutite jaoks mõeldud meediumipäringud on enamikus mobiilseadmetes halvasti toetatud.
• Ajutised parandused.
  Mul on tunne, et tahaks surra, kui kuulen inimesi, kes paluvad mul midagi "reageerivaks muuta", nagu oleks see projektiplaanis lihtsalt märkeruut (mis mõnikord ka tegelikult on). Seda tüüpi piiratud mõtlemine jätab kasutamata reaalse võimaluse, mida reageeriv disain pakub.

Reageerivad mobiilisaidid

Reageerivad mobiiliveebisaidid või, nagu ma neid kutsun "reageeriva tuleviku seemneteks", on tava luua eraldi veebisait formaadis "m.yourdomain.ru", kasutades tundliku disaini tehnikaid. Seda strateegiat kasutavad sellised saidid nagu BBC, The Guardian ja Entertainment Weekly (mille kallal ma töötasin).

Mobiiliversioon annab teile võimaluse istutada seeme, mis kasvab teie pärandveebisaidilt.

Aja jooksul saab aegunud saidi eemaldada ja sait muutub mobiilipõhiseks, tundlikuks ja tulevikutrende arvesse võtvaks.

Eelised

• Madalam risk.
  Enamik organisatsioone näeb endiselt mobiilseadmetest pärinevat liiklust vähesel määral. Nii et mobiilile reageeriva veebisaidi käivitamine võimaldab neil organisatsioonidel katsetada veekogusid, ilma et peaksid selle teemaga esmalt süvenema.
• Võimalus õppida olema paindlik.
  Disainerid saavad õppida paindlikumalt mõtlema. Arendajad õpivad Android-seadmete lugematuid nippe. Juhid saavad aru saada, kuidas pikslite täiuslikkusest eemalduda. Reagatiivne mobiilisait võib olla õppimiseks suurepärane liivakast.
• Infrastruktuur.
  Meeskonnad saavad õppida, kuidas sisuhaldusprobleeme, näiteks piltide loomist, lõplikult lahendada
• Eemaldage liigne.
  Selline lähenemine pakub meeskondadele suurepärast võimalust küsida endalt "kas meil on seda tõesti vaja" ja keskenduda ka tulemuslikkusele. Miks? Kuna nende peamine eesmärk on parandada oma saidi kasutuskogemust mobiilseadmetes.
• Tulevik on mobiilipõhised veebisaidid.
  Kuigi algselt neil sisult või funktsionaalsuselt puudus, võivad need mobiilisaidid piisava aja ja vaevaga lõpuks asendada oma terve lehe esivanemad.

Puudused

• See on ikkagi mobiilisait.
  Olenemata sellest, kas see on reageeriv või mitte, on sellel lähenemisviisil endiselt palju mobiilisaitide puudusi: probleemid URL-i ümbersuunamisega, sisuhaldus, järjepidev sisu, järjepidevus, SEO optimeerimine ja muud.
• Ajutised parandused.
  Paljud mobiilisaidid on loodud Band-Aidina – verejooksu peatamiseks. Sellised saidid luuakse eesmärgiga maha laadida mobiilseadmetest tulev kasvav liiklus. Need lahendused võivad siiski rahuldada olemasolevaid vajadusi, kuid arvestades tulevikutrende, ei päästa need teid tõenäoliselt pikemas perspektiivis.
• Viinapuul närbumise tõenäosus.
  Mõned organisatsioonid võivad selliseid projekte alustada, jõuda poole peale ja siis kogu asjast loobuda kuni järgmise aasta eelarve vastuvõtmiseni.
• Disain väikeste ekraanide jaoks.
  Kuna algselt keskendutakse väikestele ekraanidele, võib liidese hilisem üleviimine suurematele kuvaritele ilma kvaliteeti kaotamata olla väljakutse.

Natiivselt tundlik disain mobiilseadmete jaoks

“Hermitage” ei ole lihtsalt kaasaegne veebilehe haldamise liides – see on kontseptsioon, mis ühendab endas liideselahendused ja veebiarendajatele mõeldud soovituste “paketi”. “Ermitaaž” on reeglistik, mida järgides loote kiire, turvalise, mugava ja lihtsalt juhitava veebiprojekti.

JavaScript on teie brauseris keelatud

„Oleme aastaid töötanud tooteliidese kallal, püüdes muuta selle kasutajatele igapäevases saidi haldamises lihtsaks ja mugavaks. Samuti võtame arvesse veebiarendajate huve, kes seisavad silmitsi keerulise ülesandega luua kiiresti ja erineva kujundusega funktsionaalsed veebisaidid.

Ja hoolimata sellest, kui palju me loodame, soovib iga klient oma saidi individuaalset disaini ja struktuuri. Ja loomulikult tahavad kõik, et sait avaneks kiiresti ja saaks hakkama suure liiklusega. Neid probleeme samm-sammult lahendades töötasime välja kontseptsiooni, mis ühendab tehnoloogiad ja liideselahendused ning nimetasime selle “1C-Bitrix: Hermitage”.

"Ermitaaž" on: Kapoti ümberkujundus – Re:Hermitage
Toote haldusosa liides on stiilne ja ilmekas, kuid mis kõige tähtsam – see on esmapilgul arusaadav ega vaja koolitust. Administraatoripaneeliga töötamine on meeldiv ja lihtne. Disain on kohandatud töötama mobiilseadmete – nutitelefonide ja tahvelarvutite – puutetundliku ekraaniga liidestega.

Haldusosa kujundus

Disaini kontseptsiooni töötas välja AIC. Nutikas liides on esteetiliselt meeldiv ja tekitab meeldivaid emotsioone kohe esimesel pilgul “administraatori paneelil”. Isegi "administraatoripaneeliga" kiiresti tutvudes saate kiiresti tuvastada peamised juhtnupud, mõista nende toimimist ja lühendada oluliselt treeninguaega.

Kontrolli

Veebilehe haldamise liidese kontseptsioon Infohaldus on igapäevane töö ja teeme kõik selleks, et see töö oleks nauditav! Iga toote uus versioon võtab meetmeid juhtpaneeli arendamiseks. See võtab arvesse selle paneeli kasutamise kogemust nii 1C-Bitrixi arendajate kui ka klientide poolt. Selle tulemusena täiustatakse juhtpaneeli - see ei omanda mitte ainult uue välimuse, vaid ka uusi võimalusi.

Paneel sisaldab kahte järjehoidjat, mille vahel saate hõlpsalt vahetada ja hallata sisu täpselt seal, kus seda vajate. Loomulikult on juhtpaneel ja selle mõlemad režiimid saadaval ainult registreeritud kasutajatele ning ilmuvad kohe pärast saidile sisselogimist.

Saidi juhtpaneel. Liides "Ermitaaž"

Saidihaldus on jagatud kahte põhirežiimi:

Töörežiim "Saidi kohal"

"Ermitaaž" hõlmab juhtimise mõttes järgmisi funktsioone:
Juhtpaneeli funktsionaalsus kontseptsiooni 1C-Bitrix: Hermitage raames Pange tähele, et juhtpaneeli funktsionaalsus sõltub teile kui saidi kasutajale antud õigustest. Kuid saate minna jaotisse Administreerimine saidi kõikjal ja mis tahes juhtpaneeli režiimis. Redigeerimisrežiim Klõpsates nuppu Redigeerimisrežiim, lülitute redigeerimisrežiimi. Ja mida tuleks eriti tähele panna, on see, et saate selle režiimi kaasamise konfigureerida nii lehe uuesti laadimisega kui ka ilma.

Hallake kõiki elemente ja komponente avalikel lehtedel! Lõppude lõpuks hõlmab redigeerimisrežiim mitte ainult võimalust muuta praegust lehte või teabeplokkide elemente, näiteks kataloogis olevaid uudiseid või tooteid. Redigeerimisrežiimis saate sama lihtsalt - otse "saidi kohal" - hallata saidimalli ja konkreetse lehe põhitööruumi komponente.

kuvatakse, kui hiir sellest üle liigub. Seda menüüd saab liigutada, kinnitada või esitada vertikaalselt või horisontaalselt. Süsteemi adaptiivne liides jätab meelde selle komponendi, selle lehe, selle kasutaja kontekstimenüü muutunud välimuse ja järgmisel korral avab selle täpselt samal kujul ja samas kohas.

Lisage, muutke ja kustutage komponentide andmeid otse saidi avalikust osast. Nende toimingute jaoks pole absoluutselt vaja minna jaotisesse Haldus. Saate redigeerida või kustutada mis tahes loendis olevaid elemente, kasutades nuppe, mis kuvatakse, kui hõljutate kursorit nende elementide kohal.

Pole vaja karta, et lehel midagi valesti teete, kuna teil on alati võimalus viimane toiming tagasi võtta. Ostukorvi funktsiooni juurutamine teie saidil hõlmab kõiki selle sisuga seotud toiminguid. Pärast lisamist, vajadusel lehe muutmist, tühistate lihtsalt oma viimase toimingu. Minimeeritud režiim Minimeeritud töörežiim on mugav neile, kes juba teavad, kuidas süsteemiga töötada. Ekraaniruumi vabastamiseks minimeerige lihtsalt juhtpaneel. Samal ajal säilitab isegi minimeeritud paneel haldusfunktsioonid!

Saate töötada menüüga, värskendada toodet, lülitada redigeerimisrežiimi sisse või välja, lähtestada vahemälu või minna haldusrežiimi. Ühesõnaga, volditud paneel on jätkuvalt funktsionaalne! Muide, saate paneeli ahendada ja uuesti laiendada tavalise topeltklõpsuga.

Administreerimine Toote haldusosa on mõeldud kogu Interneti-projekti täielikuks haldamiseks. Haldusosas asuv töölaud on individuaalselt kohandatav, varustatud vidinatega ja varustatud menüüotsingusüsteemiga. Saate tootes luua nii palju töölaudu, kui soovite.

Arendajad saavad luua oma vidinaid ja seejärel lisada need oma töölauale. Näiteks saate vidinate abil kuvada viimaste tellimuste loendeid, ettevõtte uudiseid, dokumendikogusid jne. "Reaalajas otsing" töötab otse haldusmenüüs "Töölaual". Otsing viib teid koheselt soovitud menüüelemendini. Ja pole vahet, mitu jaotist ja alamharu menüü sisaldab.

Transliteratsioon

Te ei pea muretsema selle pärast, millise failinime ühelegi lehele määrata! Ja selle nime inglise keelde tõlkimiseks pole vaja tõlkeprogramme. Looge lihtsalt leht ja määrake selle pealkiri – saate failinime automaatselt.

Lehe loomise viisard translitereerib ja tõlgib automaatselt lehe pealkirja ning soovitab seda otsingumootori paremaks optimeerimiseks dokumendi failinimeks. Juurdepääs lehele Saidi uut lehte ei tohiks kohe maailmale näidata. Kõigepealt peate seda kontrollima ja kolleegidega arutama ning seejärel juhtkonnalt heaks kiitma. Ärge avaldage seda - selle loomisel märkige lihtsalt ruut "Piira juurdepääsu lehele". Määrake kasutajarühmad, kellele soovite seda näidata – lihtsalt valige need rühmad.

Võimalus seada lehele kohe pärast selle loomist juurdepääsupiiranguid hõlbustab oluliselt sisuhaldurite tööd pikka kooskõlastamist ja toimetamist nõudva sisuga töötamisel.

Liides

Hallake oma veebisaiti lihtsalt ja professionaalselt!

Hermitage tooteliides kohandub teie igapäevase tööga saidiga, jätab teie eelistused meelde ja võimaldab teil kulutada vähem aega tehnilistele ülesannetele. Tundub, et liides "hõljub" saidi kohal, võimaldades teil näha, mida teete, ja näidata kohe tulemusi.

„Hõljutage kursorit saidi kohal, tehke toiminguid lihtsalt, ärge kaotage oma töö konteksti ja saate kohe nähtavaid tulemusi. Liides jätab teie eelistused meelde – loendisätted, filtrid, sisestusvormid... Ja järgmine kord kulutate sellele toimingule vähem aega.

Kasutage tuttavat nuppu „Menüü”, et pääseda ühe klõpsuga ligi kõigile oma saidi funktsioonidele. Algajatele on kõik selge ja professionaalidele mugav. Sa ei harju saidiga, kuid sait harjub sinuga, kohandub sinu harjumuste ja ülesannetega.

1C-Bitrixi peadirektor Sergei Rõžikov

Kogu teie energia on loovusel, mitte nupu otsimisel!

Igapäevane teabe haldamine muutub rutiinsemaks ja te kulutate energiat pigem loomingulistele ülesannetele kui lehtede, jaotiste ja menüüde tehnilisele avaldamisele.

“Versioonist versioonini ilmub tootesse aina rohkem funktsionaalsust, liidesesse aina rohkem toiminguid. Oleme teinud palju tööd toote liidese, eriti kasutaja juhtpaneeli ümberkujundamiseks.

Uus adaptiivne liides lihtsustab soovitud toimingu otsimist, rühmitab toimingud kasutajarollide järgi ja tõstab esile kõige sagedasemad, et tööpaneeli mitte segamini ajada ja kasutajal oleks sellest lihtsam aru saada.

• Vadim Dumbravanu, Bitrixi projektijuht
• Adaptiivne liides on:
• Nupp "Menüü" on tuttav ja kiire ühe klõpsuga juurdepääs teie saidi kõigile funktsioonidele. See on väga mugav! Lisaks, kui lähete nupuga "Menüü" jaotisse "", jäetakse meelde leht, millelt üleminek tehti - see pole vähem meeldiv!
• Rolliga kohanemine – igapäevase töö enesekindlaks sooritamiseks. Arendajatel on juurdepääs kõikidele tööriistadele veebisaidi arendamiseks ja kohandamiseks. Saidi toimetajad töötavad ainult sisuga, kartmata häirida projekti tehnilist tööd. Igaüks täidab selgelt oma ülesannet.
• Sisu loomise viisardid aitavad teil valida failide ja jaotiste nimesid, täiendavad saidi menüüd ja aitavad teil täita atribuute. Keerulised igapäevased toimingud muutuvad lihtsaks. Me lihtsalt ei saa teie eest sisu kirjutada; ülejäänu teeb teie eest meister.

Adaptiivne liides on loodud selleks, et:

• vähendage uute kasutajate koolitamise kulusid – koolitust pole vaja, vajate lihtsalt aega, et sait teiega harjuks. Liidesega harjumise periood on vaid 1 tund!
• muutke rutiinsed ülesanded loominguliseks protsessiks, kulutage energiat pigem loominguliste ülesannete täitmisele kui lehekülgede, jaotiste ja menüüde tehnilisele avaldamisele;
• vähendada veebisaidi haldamisele kuluvat aega, muutes igapäevase projektijuhtimise harjumuspäraseks;
• eemaldage uute kasutajate kartus "projekti katkestamise" ees ja vältige sisu haldamisel enamikku vigu.

Töö toote haldusliidese kallal jätkub. 1C-Bitrixi kasutajad: saidihaldus saavad kõik liidese värskendused alla laadida, kasutades tehnoloogiat SiteUpdate. Uute võimalustega saate alati teada nii veebisaidil kui ka meie uudiskirjadest.

Sisseehitatud visuaalne redaktor Visuaalne HTML-redaktor on tootesse juba sisse ehitatud ja te ei pea seda installima. Selle redigeerija abil saate saidil oma lehti reaalajas muuta – otse brauseri kaudu. Redaktor võimaldab mitte ainult redigeerida ja vormindada tavalist teksti, vaid ka töötada visuaalsete komponentidega.

Visuaalne redaktor on teie veebisaidile juba sisse ehitatud!

Struktuurihaldus Kõik funktsioonid Kasutajasõbralik liides Ilus, kerge, kaasaegne!

Visuaalne redaktor sisaldab kerget, ilusat ja ergonoomilist liidest. Sõbralikud toimetajaskriptid võimaldavad mugavalt ja kiiresti sisuga tööd teha, näiteks linke ja pilte lisada.

Seega saate lehele pildi lisamisel kohe valida selle asukoha ja suuruse. Tekstist on kohe näha, kuidas see välja näeb.

WYSIWYG (hääldatakse “wee-zee-wig”, inglise keelest What You See Is What You Get – “what you see is what you get”) on redigeerimismeetod, mille puhul parandatud materjal näeb toimetamise käigus välja täpselt sama, mis ja lõpptulemus.

Reaalajas redigeerimine Redaktor sisaldab kõiki tööriistu, mida sisuhaldur vajab

Asetage komponendid lehele, lohistades need lihtsalt hiirega spetsiaalselt paneelilt, ja seadistage kohe nende parameetrid, mis määravad teie saidil dünaamiliselt muutuva teabe välimuse.

Visuaalne redaktor: komponentide parameetrite redigeerimine

Redaktoril on ulatuslikud lehe redigeerimise tööriistad

Mugav otsingumehhanism aitab teil koheselt leida lehele paigutamiseks vajaliku komponendi. Teksti kopeerimisel veebist ja muudest allikatest, näiteks Wordist, "puhastatakse" kood üleliigsetest siltidest. Lisaks muutub see kleebitud kood kehtivaks ja õigeks HTML5-koodiks. Samas on toimetaja töö tulemus alati sama – olenemata sellest, mis brauserit kasutad!

Kasutajate soovide töötlemise tulemuste põhjal täiustatakse redaktorit pidevalt. Selles on mugav teha palju toiminguid ja töötada lehtede loomise ja tekstide vormindamise kallal!

Koodi esiletõstmine ja ridade nummerdamine

Väga mugav on redigeerida lehekülgi nagu PHP, sest süsteemi sisse ehitatud redaktor tõstab koodi esile ja nummerdab read. Ja lehed ise salvestatakse "Ajaxi stiilis" "meie silme ees" - lehte uuesti laadimata ja fookust kaotamata!

Tume redaktori skeem

• süntaksi esiletõstmine HTML + PHP + Javascript + SQL;
• taustvalgustus on lülitatav ja saate selle välja lülitada ilma lehte uuesti laadimata;
• 2 värviteemat - hele ja tume;
• kiire hüpe reale selle numbri järgi;
• Tab/Shift+Tab vahekaartide sisestamiseks ja tagasivõtmiseks.

Infohaldus on igapäevane töö, teeme kõik selleks, et see töö oleks nauditav!

"Jagatud" režiim Vertikaalne ja horisontaalne

Nüüd on teie redaktoril 2 täisväärtuslikku poolitusrežiimi - vertikaalne ja horisontaalne. Kombineeritud režiimis on väga mugav töötada.

Näete lehe koodi ja selle kuva korraga. Saate muudatusi teha mis tahes akna osas – redigeerida visuaalselt lehte või redigeerida selle koodi.

Split - akna jagamine kaheks osaks - visuaalne redigeerimine ja koodi redigeerimine.

Mugav otsing/asendamine Leidke komponent sekundiga!

Redaktoril on sisseehitatud mugav otsingu/asendamise funktsioon – iga sisuhalduri unistus. Nüüd saate näiteks vajaliku komponendi koheselt üles leida ja selle lehele lohistada. Te ei pea meeles pidama, kus see komponendi struktuuris asub. See on eriti väärtuslik, kui kasutatakse palju komponente.

Kõigis brauserites sama tulemusKasutage mis tahes brauserit!

Tootesse sisseehitatud visuaalne redaktor ühildub kõigi populaarsete brauseritega. Redaktor töötab kõigis populaarsetes brauserites võrdselt õigesti ja kasutab töötamiseks samu funktsioone. Saate saidi lehti redigeerida mis tahes brauseris - tulemus on sama.

Kood "Puhastamine" Clean koodi sisestamisel!

Redaktor tegeleb teksti sisestamisega erinevatest allikatest automaatse sisupuhastusega. Teksti kopeerimisel näiteks Wordist teisendatakse kood HTML5-sse. Koodist eemaldatakse kõik mittevajalikud – ebaolulised sildid.

Arendajatele

Veebiarendajad hindavad komponentpaneeli ja väljavõttepaneeli (ühel slaidil) funktsionaalsuse rakendamist. Samuti saavad nad JS-i tasemel kohandamise ja laiendatud sündmuste mudeli.

Kehtiv ja õige HTML5 Valideerimisega – kõik on ok!

HTML5 ei ole alles tulemas, see on juba kohal. Sisseehitatud visuaalse redaktori abil ei pea te muretsema oma saidi lehekoodi kehtivuse ja õigsuse pärast. Redaktor genereerib täpselt sellise koodi, mida tänapäevased brauserid õigesti tajuvad.

Õiget koodi pole vaja käsitsi kirjutada

See redaktor on teie veebisaidile sisse ehitatud ja teie sisuhaldur ei pea mõtlema, milliseid struktuurielemente tekstide märgistamiseks kasutatakse.

Miks on vaja kehtivat HTML5?
Kehtivale HTML5-le ülemineku eelised on vaieldamatud, veebiarendajad on neid juba pikka aega arutanud (näiteks

Kõik see on tänu uuele hallatavale vahemällu salvestamise tehnoloogiale (Cache Dependencies), mis tagab täpselt sisuredaktori mugava töö ja andmete automaatse värskendamise kohe pärast nende muutmist. See tehnoloogia võimaldab kuvada saidil muudatusi, ootamata vahemälu värskendamist, mida süsteem teeb kindlaksmääratud ajavahemikel. Seetõttu on see saidi mugava kasutajakogemuse üks olulisemaid tehnoloogilisi komponente.

• Saidi kiirendamiseks ja projekti skaleerimiseks soovitame toetada Autocaching tehnoloogiat ja kasutada Managed Caching tehnoloogiat.
• Auto+Hallatud

Arendajatele

"Ermitaaž" veebiarendajatele Kontseptsioon "Ermitaaž" sisaldab tervet komplekti tehnoloogilisi soovitusi veebiarendajatele. See on muljetavaldav nimekiri, mis sisaldab soovitusi rakenduste "õigeks" loomiseks. See on arendajatele mõeldud Hermitage'i kontseptsioon, mis näitab täpselt, kuidas Bitrixi platvormi jaoks rakendusi arendada. Arendage nii, et need rakendused pakuksid mugavust ja lihtsust Hermitage'i liideses. Enamik neist soovitustest on kogenud arendajatele hästi teada.

Soovitused veebiarendajatele:

• Disain. Teostatud vastavalt. Eriti neil hetkedel, mis on seotud oma kujundusmalli loomise ja selle rakendamisega. Püüdsime juhtimisliideseid arendada nii, et see ei piiraks veebiarendajaid paigutuse ja kujundusvõimaluste osas.
• Saidimallis on soovitatav kasutada standardseid menüükomponente koos vahemällu salvestamisega. ()
• Soovitatav on luua veebisait kasutades . Kasutage kas standardseid komponente või looge projekti jaoks kohandatud komponente selle konkreetsete vajaduste jaoks.
• Soovitame seda välimuse kohandamisel. See tagab nende ohutuse toote värskendamisel. Malli saate redigeerimisrežiimis otse avalikust liidesest kopeerida. Ühel komponendil võib olla piiramatu arv malle.
• Kui muudate 1C-Bitrixi komponenti või loote oma komponendi, soovitame see luua.
• Komponentide väljatöötamisel võite arvestada .
• Soovitatav on kasutada keeruka funktsionaalsuse või mitmeleheliste vaadete loomisel, kui üksikute komponentide linkimine on kasutajatele keeruline.
• Saidi kiirendamiseks ja projekti skaleerimiseks soovitame toetada Autocaching tehnoloogiat ja kasutada hallatud vahemälu tehnoloogiat.
• Komponentide seadistamisel on soovitatav määrata komponendi parameetrid Auto+Hallatud pika vahemällu salvestamise ajaga (1-12 kuud, kui töötate täielikult vahemälu sõltuvuste tehnoloogiat kasutades).
• On soovitav, et automaatse vahemälu režiimis komponent ei täidaks päringuid andmebaasi või täidaks ainult neid päringuid, mille puhul vahemällu salvestamine on irratsionaalne.
• Võimaluse korral on soovitav toetada otsingumootori optimeerimist.
• Soovitame tuge loendiüksuste haldamiseks toote API kaudu. See võimaldab kasutajatel elemente otse saidi lehtedel redigeerida ja kustutada.
• Suured arendused on soovitatav kujundada oma moodulitesse koos API-ga ja nendesse oma komponentide kaasamisega. Nende hilisema paigutusega MarketPlace'is ja võimalusega värskendada SiteUpdate'i tehnoloogiat kasutades. ()
• Süsteemiobjektidega töötamiseks on soovitatav kasutada platvormi API-d. Väga ebasoovitavad otsepäringud andmebaasi. See võib põhjustada tootevärskenduste ühildumatust partneri juurutusega.
• Toote tuuma terviklikkuse säilitamine ja meie soovituste kasutamine projekti elluviimisel, et tagada toote värskendamise võimalus SiteUpdate'i värskendustehnoloogia abil. Kasutage sisemist sündmuste süsteemi, et muuta toote loogikat või taotleda uute sündmuste ilmumist. (

Veebisaidi arendamine vastavalt nendele soovitustele pakub klientidele põhimõtteliselt olulisi aspekte: haldamise lihtsus, värskendamisvõimalus, projekti kõrge jõudlus ja turvalisus.

Hetkel on 100 000 enimkülastatud saidist responsiivsed umbes 11-12% ja pole kahtlust, et see arv lähiaastatel kasvab.

Kuna üha rohkem organisatsioone käärib käised üles, et omaks võtta mitme seadmega veebi tegelikkus, tasub kaaluda mõnda nirvaana saavutamiseks kasutatavat strateegiat.

Adaptiivne moderniseerimine

Responsiivne ümberkujundamine on protsess, mille käigus muudetakse olemasolev ainult töölauale mõeldud veebisait ja sisuliselt muudetakse see tundlikuks.

Kui tegemist on valmis saitidega (eriti kaubanduslike saitidega), ei ole meeskondadel alati võimalust kõike ära visata ja uuesti ehitada.
Dan Cederholm

Enamiku organisatsioonide jaoks ei mõelda isegi uue disaini suuremahulisele loomisele nullist. Seetõttu on tundlik moderniseerimine populaarne lähenemisviis mobiilseadmetele hea kasutuskogemuse loomiseks.

Eelised

• Suhteliselt kiire.
  Responsiivseks moderniseerimiseks on üsna palju võimalusi, see strateegia võib olla saidile väikese ekraaniga faili lisamine. Vaatamata sellele üsna toore näitele on adaptiivne moderniseerimine paljude organisatsioonide jaoks atraktiivne võimalus, kuna see ei nõua kõike nullist uuesti üles ehitama.
• Tuttav.
  Ei aja kasutajaid segadusse. Inimesed on liidesega harjunud aastaid ja olemasolevat moderniseerides säilitavad organisatsioonid tuttava lähenemise, parandades samal ajal mobiilseadmetega inimeste elu.
• Organisatsiooniliselt kiirem.
  Poliitiliselt on liidese moderniseerimine turvalisem kui nullist alustamine. Vähem vaieldakse selle üle, millist rohelist tooni valida, milliseid triviaalseid fotosid kasutada ja juhtkond ei pea oma käsi väänama. See võimaldab meeskondadel kiiremini reageerivaid saite käivitada.

Puudused

• See mõjutab ainult väikest osa.
  Jällegi on ümberkujundamiseks palju võimalusi, kuid enamiku eesmärk on muuta see ilusaks. Keskendudes paigutuse ümberkujundamisele, jäetakse ümberdisainimisel sageli tähelepanuta lugematu hulk muid tegureid, mida tuleb erinevate seadmete eduka disaini loomisel arvesse võtta.
• 10 liitrit vett kolmeliitrises purgis.
  Kuna lauaarvutisaidid on loodud ainult lauaarvutite jaoks (ja kestavad sageli kaua), võivad need sisaldada palju segadust. Ja kuna moderniseerimine seisneb peamiselt paigutuse ümbersulatamises, ei võeta enamikku sisuga seotud probleeme täielikult arvesse.
• Esitus.
  Väikeste seadmete paremaks toetamiseks on koodi kirjutamises midagi kummalist. Tarbetu kraami eemaldamine võib minna liiale, kuid tootlikkusele keskendumata see iseenesest ei kasva.
• Halvim toetus.
  Algselt lauaarvutite jaoks mõeldud meediumipäringud on enamikus mobiilseadmetes halvasti toetatud.
• Ajutised parandused.
  Mul on tunne, et tahaks surra, kui kuulen inimesi, kes paluvad mul midagi "reageerivaks muuta", nagu oleks see projektiplaanis lihtsalt märkeruut (mis mõnikord ka tegelikult on). Seda tüüpi piiratud mõtlemine jätab kasutamata reaalse võimaluse, mida reageeriv disain pakub.

Reageerivad mobiiliveebisaidid Reageerivad mobiiliveebisaidid või, nagu ma neid kutsun "reageeriva tuleviku seemneteks", on tava luua eraldi veebisait formaadis m.yourdomain.ru, kasutades tundliku disaini tehnikaid. Seda strateegiat kasutavad sellised saidid nagu BBC, The Guardian ja Entertainment Weekly (mille kallal ma töötasin).

Mobiiliversioon annab teile võimaluse istutada seeme, mis kasvab teie pärandveebisaidilt.

Aja jooksul saab aegunud saidi eemaldada ja sait muutub mobiilipõhiseks, tundlikuks ja tulevikutrende arvesse võtvaks.

Eelised

• Madalam risk.
  Enamik organisatsioone näeb endiselt mobiilseadmetest pärinevat liiklust vähesel määral. Nii et mobiilile reageeriva veebisaidi käivitamine võimaldab neil organisatsioonidel katsetada veekogusid, ilma et peaksid selle teemaga esmalt süvenema.
• Võimalus õppida olema paindlik.
  Disainerid saavad õppida paindlikumalt mõtlema. Arendajad õpivad Android-seadmete lugematuid nippe. Juhid saavad aru saada, kuidas pikslite täiuslikkusest eemalduda. Reagatiivne mobiilisait võib olla õppimiseks suurepärane liivakast.
• Infrastruktuur.
  Meeskonnad saavad õppida, kuidas sisuhaldusprobleeme, näiteks piltide loomist, lõplikult lahendada
• Eemaldage liigne.
  Selline lähenemine pakub meeskondadele suurepärast võimalust küsida endalt "kas meil on seda tõesti vaja" ja keskenduda ka tulemuslikkusele. Miks? Kuna nende peamine eesmärk on parandada oma saidi kasutuskogemust mobiilseadmetes.
• Tulevik on mobiilipõhised veebisaidid.
  Kuigi algselt neil sisult või funktsionaalsuselt puudus, võivad need mobiilisaidid piisava aja ja vaevaga lõpuks asendada oma terve lehe esivanemad.

Puudused

• See on ikkagi mobiilisait.
  Olenemata sellest, kas see on reageeriv või mitte, on sellel lähenemisviisil endiselt palju mobiilisaitide puudusi: probleemid URL-i ümbersuunamisega, sisuhaldus, järjepidev sisu, järjepidevus, SEO optimeerimine ja muud.
• Ajutised parandused.
  Paljud mobiilisaidid on loodud Band-Aidina – verejooksu peatamiseks. Sellised saidid luuakse eesmärgiga maha laadida mobiilseadmetest tulev kasvav liiklus. Need lahendused võivad siiski rahuldada olemasolevaid vajadusi, kuid arvestades tulevikutrende, ei päästa need teid tõenäoliselt pikemas perspektiivis.
• Viinapuul närbumise tõenäosus.
  Mõned organisatsioonid võivad selliseid projekte alustada, jõuda poole peale ja siis kogu asjast loobuda kuni järgmise aasta eelarve vastuvõtmiseni.
• Disain väikeste ekraanide jaoks.
  Kuna algselt keskendutakse väikestele ekraanidele, võib liidese hilisem üleviimine suurematele kuvaritele ilma kvaliteeti kaotamata olla väljakutse.

Natiivselt tundlik disain mobiilseadmete jaoks
Puudused

• 50 varjundit ebatäiuslikkusest.
  See lähenemine võib ebaõnnestuda, kuna kasutajad peavad tegelema nii vana kui ka uue Frankensteini liidesega.
• Viinapuul närbumise võimalus.
  Seda tüüpi projektid vajavad selgeid lõppeesmärke või võivad need jääda igaveseks puhastustules kinni.
• Tehniline kooselu.
  Mis juhtub, kui üks moodul, kasutades uusimaid tehnoloogiaid ja tehnikaid, põrkub laupkokkuvõttes vananenud mooduliga? Sellel lähenemisviisil on palju arhitektuurilisi väljakutseid.

"Mina olen Chevy Chase, sina mitte." Muidugi on iga organisatsioon erinev, nii et see, milline tee valida, sõltub erinevatest teguritest. Aeg, eelarve, ulatus, organisatsiooni struktuur, oskuste kogum ja paljud muud tegurid mõjutavad seda, millist strateegiat on kõige parem rakendada.

Kuid aja jooksul on muutunud üha selgemaks, et organisatsioonid peavad töötama selle nimel, et Internetile juurdepääsetavate seadmete valik kasvab.

See on tõlge Brad Frosti artiklist pealkirjaga "Reageeriv strateegia". Tõlkinud UXDepot autori nõusolekul. PS tõlkijatelt: Loodan, et teile meeldis artikkel. Meil on hea meel, kui juhite tähelepanu tõlkes esinevatele vigadele, et saaksime need kiiresti parandada. Kirjutage meile aadressil[e-postiga kaitstud]