Įvairūs

Prisitaikantis išdėstymas: kas tai yra ir kaip juo naudotis. Sąsajos pritaikomumo įgyvendinimo būdai Kas yra interaktyvus interneto dizainas

„Ermitažas“ yra ne tik moderni interneto svetainių valdymo sąsaja – tai koncepcija, apjungianti sąsajos sprendimus ir rekomendacijų „paketą“ interneto svetainių kūrėjams. „Ermitažas“ – tai taisyklių rinkinys, kurio vadovaudamiesi sukursite greitą, saugų, patogų ir lengvai valdomą interneto projektą.

Jūsų naršyklėje išjungtas JavaScript

„Daugelį metų dirbame su produkto sąsaja, stengdamiesi, kad ji būtų paprasta ir patogi vartotojams kasdieniame svetainės tvarkymo darbe. Taip pat atsižvelgiame į žiniatinklio kūrėjų, kuriems tenka sudėtinga užduotis greitai sukurti funkcionalias, įvairaus dizaino svetaines, interesus.

Ir kad ir kaip tikimės, kiekvienas klientas norės savo, individualaus dizaino ir svetainės struktūros. Ir, žinoma, visi nori, kad svetainė atsidarytų greitai ir galėtų valdyti didelį srautą. Žingsnis po žingsnio spręsdami šias problemas, sukūrėme technologijas ir sąsajų sprendimus apjungiančią koncepciją ir pavadinome ją „1C-Bitrix: Ermitažas“

"Ermitažas" yra: „Gauto gaubto“ pertvarkymas – Re:Hermitage
Administracinės gaminio dalies sąsaja stilinga ir išraiškinga, bet svarbiausia – suprantama iš pirmo žvilgsnio ir nereikalaujanti mokymo. Darbas su „administravimo skydeliu“ yra malonus ir lengvas. Dizainas pritaikytas darbui su mobiliųjų įrenginių – išmaniųjų telefonų ir planšetinių kompiuterių – jutiklinio ekrano sąsajomis.

Administracinio skyriaus dizainas

Dizaino koncepciją sukūrė AIC. Išmani sąsaja yra estetiška ir sukelia malonias emocijas iškart po pirmo žvilgsnio į „admin panel“. Net ir greitai susipažinę su „admin panel“, galite greitai nustatyti pagrindinius valdiklius, suprasti jų veikimą ir žymiai sutrumpinti treniruočių laiką.

Kontrolė

Tinklalapio valdymo sąsajos koncepcija Informacijos valdymas yra kasdienis darbas, o mes darome viską, kad šis darbas būtų malonus! Kiekviena nauja produkto versija imasi veiksmų kuriant valdymo skydelį. Čia atsižvelgiama į 1C-Bitrix kūrėjų ir klientų patirtį naudojant šį skydelį. Dėl to patobulintas Valdymo skydelis – jis įgauna ne tik naują išvaizdą, bet ir naujų galimybių.

Skydelyje yra dvi žymės, tarp kurių galite lengvai perjungti ir tvarkyti turinį būtent ten, kur jo reikia. Žinoma, valdymo skydelis ir abu jo režimai pasiekiami tik registruotiems vartotojams ir pasirodo iškart, kai tik prisijungiate prie svetainės.

Svetainės valdymo pultas. Sąsaja "Ermitažas"

Svetainės valdymas yra padalintas į du pagrindinius režimus:

Darbo režimas „Virš svetainės“

„Ermitažas“ valdymo prasme apima šias funkcijas:
Valdymo skydelio funkcionalumas pagal 1C-Bitrix: Ermitažo koncepciją Atkreipkite dėmesį, kad valdymo skydelio funkcionalumas priklauso nuo jums, kaip svetainės vartotojui, suteiktų teisių. Bet jūs galite pereiti į skyrių „Administravimas“ iš bet kurios svetainės vietos ir bet kuriuo valdymo skydelio režimu. Redagavimo režimas Spustelėję mygtuką Redagavimo režimas persijungiate į redagavimo režimą. Ypač reikėtų atkreipti dėmesį į tai, kad galite konfigūruoti šio režimo įtraukimą tiek įkeliant puslapį iš naujo, tiek be jo. Tvarkykite visus elementus ir komponentus viešuose puslapiuose! Juk redagavimo režimas apima ne tik galimybę keisti esamą puslapį ar informacijos blokų elementus, tokius kaip naujienos ar katalogo produktai. Redagavimo režimu galite taip pat lengvai - tiesiai „virš svetainės“ - valdyti komponentus, įtrauktus į svetainės šabloną ir pagrindinę konkretaus puslapio darbo sritį.

pasirodo, kai pelė perkelia ją. Šį meniu galima perkelti, prisegti arba pateikti vertikaliai arba horizontaliai. Sistemos adaptyvi sąsaja prisimins pasikeitusią šio komponento, šio puslapio, šio vartotojo kontekstinio meniu išvaizdą ir kitą kartą atidarys jį lygiai tokia pačia forma ir toje pačioje vietoje.

Pridėkite, redaguokite ir ištrinkite komponentų duomenis tiesiai iš viešosios svetainės dalies. Norint atlikti šiuos veiksmus, visiškai nereikia eiti į administravimo skyrių. Galite redaguoti arba ištrinti bet kurį iš sąrašo elementų naudodami mygtukus, kurie atsiranda užvedus pelės žymeklį virš šių elementų.

Galite „atšaukti“ paskutinį veiksmą

Nereikia bijoti padaryti ką nors blogo puslapyje, nes visada turite galimybę anuliuoti paskutinį veiksmą. Šis pirkinių krepšelio funkcijos įdiegimas jūsų svetainėje apima visas su jos turiniu susijusias operacijas. Pridėję, jei reikia, pakeitę puslapį, jūs tiesiog atšaukiate paskutinį veiksmą. Minimalus režimas Sumažintas veikimo režimas bus patogus tiems, kurie jau žino, kaip dirbti su sistema. Tiesiog sumažinkite valdymo skydelį, kad atlaisvintumėte vietos ekrane. Tuo pačiu metu net ir sumažintas skydelis išlaiko valdymo funkcijas!

Galite dirbti su meniu, atnaujinti gaminį, įjungti arba išjungti redagavimo režimą, iš naujo nustatyti talpyklą arba pereiti į administravimo režimą. Trumpai tariant, sulankstytas skydelis ir toliau veikia! Beje, galite sutraukti ir vėl išplėsti skydelį įprastu dvigubu spustelėjimu.

Administravimas Produkto administracinė dalis skirta visapusiškam viso interneto projekto valdymui. Administracinėje dalyje esantis darbalaukis yra individualiai pritaikomas, aprūpintas programėlėmis ir meniu paieškos sistema. Produkte galite sukurti tiek „Stalinių kompiuterių“, kiek norite.

Kūrėjai gali sukurti savo programėles ir pridėti jas prie savo darbalaukio. Pavyzdžiui, galite naudoti programėles, kad būtų rodomi naujausių užsakymų sąrašai, įmonės naujienos, dokumentų rinkiniai ir kt. „Tiesioginė paieška“ veikia tiesiogiai iš administracinio meniu „Darbalaukio“. Paieška akimirksniu nukreipia jus į norimą meniu elementą. Ir nesvarbu, kiek skilčių ir pošakių yra meniu. Transliteracija

Jums nereikia rūpintis, kokį failo pavadinimą priskirti bet kuriam puslapiui! Ir nereikia vertimo programų, kad jos pavadinimas būtų išverstas į anglų kalbą. Tiesiog sukurkite puslapį ir nustatykite jo pavadinimą – failo pavadinimą gausite automatiškai.

Puslapio kūrimo vedlys automatiškai transliteruoja ir išverčia puslapio pavadinimą ir siūlo jį kaip dokumento failo pavadinimą, kad būtų galima geriau optimizuoti paieškos sistemą. Prieiga prie puslapio Naujas svetainės puslapis neturėtų būti iškart parodytas pasauliui. Pirmiausia turite tai patikrinti ir aptarti su kolegomis, o tada patvirtinti iš vadovybės. Jo neskelbkite – kurdami tiesiog pažymėkite langelį „Apriboti prieigą prie puslapio“. Nurodykite vartotojų grupes, kurioms norite tai rodyti – tiesiog pasirinkite šias grupes.

Kam norite parodyti puslapį?

Galimybė nustatyti prieigos prie puslapio apribojimus iš karto jį sukūrus žymiai palengvins turinio tvarkytojų darbą dirbant su ilgo derinimo ir redagavimo reikalaujančiu turiniu.

Sąsaja

Tvarkykite savo svetainę lengvai ir profesionaliai! „Hermitage“ produkto sąsaja prisitaiko prie jūsų kasdienio darbo su svetaine, įsimena jūsų pageidavimus ir leidžia mažiau laiko skirti techninėms užduotims. Atrodo, kad sąsaja „plūduriuoja“ virš svetainės, leidžianti matyti, ką darote, ir iškart parodyti rezultatus.

„Užveskite pelės žymeklį virš svetainės, lengvai atlikite veiksmus, nepraraskite savo darbo konteksto ir iškart gaukite matomus rezultatus. Sąsaja įsimins jūsų pageidavimus – sąrašo nustatymus, filtrus, įvesties formas... Ir kitą kartą šiam veiksmui skirsite mažiau laiko.

Naudokite pažįstamą mygtuką „Meniu“, kad vienu spustelėjimu pasiektumėte visas savo svetainės funkcijas. Pradedantiesiems viskas aišku ir profesionalams patogu. Jūs nepriprantate prie svetainės, bet svetainė pripranta prie jūsų, prisitaiko prie jūsų įpročių ir užduočių"

„1C-Bitrix“ generalinis direktorius Sergejus Ryžikovas

Visa jūsų energija skirta kūrybai, o ne mygtuko paieškai! Kasdienis informacijos valdymas tampa įprastesnis, o energiją eikvojate kūrybinėms užduotims, o ne techniniam puslapių, skyrių ir meniu publikavimui.

„Nuo versijos prie versijos gaminyje atsiranda vis daugiau funkcionalumo, vis daugiau veiksmų sąsajoje. Atlikome daug darbo, kad perkurtume produkto sąsają, ypač vartotojo valdymo skydelį.

Naujoji adaptyvi sąsaja supaprastina norimo veiksmo paiešką, sugrupuoja veiksmus pagal vartotojo vaidmenis, išryškina dažniausiai pasitaikančius, kad neperkrautų darbo skydelio ir vartotojui būtų lengviau jį suprasti.

Vadimas Dumbravanu, „Bitrix“ projektų vadovas

Pritaikoma sąsaja yra:

Kontekstinis redagavimas – tvarkykite turinį tiesiogiai svetainėje. Jei jums reikia pataisyti puslapį, spustelėkite „Redaguoti“. Jei reikia pridėti skyrių, spustelėkite „Sukurti“. Nepraraskite savo darbo konteksto. Naujoji sąsaja plūduriuoja virš svetainės, leidžianti matyti, ką darote, ir iš karto matyti rezultatus.
Individualus pritaikymas vartotojui – produkto sąsaja įsimena naujausius veiksmus, filtrų nustatymus, patogius informacijos pateikimo būdus. Sąsaja prisitaiko prie kasdienio darbo ir leidžia kasdien jai skirti vis mažiau laiko.
Mygtukas „Meniu“ yra pažįstama ir greita prieiga prie visų jūsų svetainės funkcijų vienu spustelėjimu. Tai labai patogu! Be to, kai einate į „“ naudodami mygtuką „Meniu“, prisimenamas puslapis, iš kurio buvo atliktas perėjimas - tai ne mažiau malonu!
Vaidmenų pritaikymas – užtikrintam kasdienių darbų atlikimui. Kūrėjai turi prieigą prie visų įrankių, skirtų svetainei kurti ir tinkinti. Svetainės redaktoriai dirba tik su turiniu, nebijodami sutrikdyti techninį projekto darbą. Kiekvienas aiškiai atlieka savo užduotį.
Turinio kūrimo vedliai padės pasirinkti failų ir skyrių pavadinimus, papildys svetainės meniu ir padės užpildyti ypatybes. Sudėtingi kasdieniai veiksmai tampa paprasti. Mes tiesiog negalime parašyti turinio už jus; visa kita už jus padarys meistras.

Pritaikoma sąsaja skirta:

sumažinti naujų vartotojų mokymo išlaidas – nereikia jokių mokymų, jums tiesiog reikia laiko, kad svetainė priprastų prie jūsų. Pripratimo prie sąsajos laikotarpis yra tik 1 valanda!
rutinines užduotis paverskite kūrybiniu procesu, eikite energiją kūrybinėms užduotims, o ne techniniam puslapių, skyrių ir meniu publikavimui;
sumažinti laiką, praleistą tinklalapio valdymui, kasdienį projektų valdymą paverčiant įprastu;
pašalinkite naujų vartotojų baimę „sulaužyti projektą“ ir išvengsite daugumos klaidų tvarkant turinį.

Darbas su produkto administracine sąsaja tęsiamas. „1C-Bitrix“ vartotojai: „Site Management“ gali atsisiųsti visus sąsajos naujinimus naudodami „SiteUpdate“ technologiją. Apie naujas galimybes visada sužinosite svetainėje, taip pat mūsų naujienlaiškiuose.

Integruotas vaizdo redaktorius Vaizdinis HTML redaktorius jau yra įtaisytas gaminyje ir jums jo įdiegti nereikia. Naudodami šią redagavimo priemonę galite keisti savo puslapius svetainėje realiuoju laiku – tiesiai per savo naršyklę. Redagavimo priemonė leidžia ne tik redaguoti ir formatuoti įprastą tekstą, bet ir dirbti su vaizdiniais komponentais.

Vaizdo rengyklė jau integruota į jūsų svetainę!

Struktūrų valdymas Visos funkcijos Patogi sąsaja Graži, lengva, šiuolaikiška!

Vaizdo rengyklėje yra lengva, graži ir ergonomiška sąsaja. Patogūs redaktoriaus scenarijai leidžia patogiai ir greitai dirbti su turiniu, pavyzdžiui, įterpti nuorodas ir paveikslėlius.

Taigi, įterpę paveikslėlį į puslapį, galite iš karto pasirinkti jo vietą ir dydį. Iš karto galite pamatyti, kaip tai atrodo tekste.

WYSIWYG (tariama „wee-zee-wig“, iš anglų kalbos „What You See Is What You Get“ – „What you see is what you get“) yra redagavimo būdas, kai redagavimo proceso metu pataisyta medžiaga atrodo lygiai taip pat kaip ir galutinis rezultatas.

Redagavimas realiuoju laiku Redagavimo priemonėje yra visi turinio tvarkytojui reikalingi įrankiai

Įdėkite komponentus į puslapį tiesiog vilkdami juos pele iš specialaus skydelio ir iš karto sukonfigūruokite jų parametrus, kurie nustato dinamiškai jūsų svetainėje besikeičiančios informacijos išvaizdą.

Vaizdinis redaktorius: komponentų parametrų redagavimas

Redaktorius turi daug puslapių redagavimo įrankių

Patogus paieškos mechanizmas padeda akimirksniu rasti reikiamą komponentą, kurį norite įdėti į puslapį. Kopijuojant tekstą iš interneto ir kitų šaltinių, pavyzdžiui, „Word“, kodas „išvalomas“ nuo perteklinių žymų. Be to, šis įklijuotas kodas tampa galiojančiu ir teisingu HTML5 kodu. Tuo pačiu metu redaktoriaus darbo rezultatas visada yra tas pats – nesvarbu, kokią naršyklę naudojate!

Remiantis vartotojų pageidavimų apdorojimo rezultatais, redaktorius nuolat tobulinamas. Jame patogu atlikti daugybę operacijų ir kurti puslapius bei formatuoti tekstus!

Kodo paryškinimas ir eilučių numeravimas

Labai patogu redaguoti tokius puslapius kaip PHP, nes sistemoje įmontuotas redaktorius išryškina kodą ir sunumeruoja eilutes. Ir patys puslapiai išsaugomi „Ajax“ stiliumi „prieš mūsų akis“ - neperkraunant puslapio ir neprarandant dėmesio!

Tamsi redaktoriaus schema

sintaksės paryškinimas HTML + PHP + Javascript + SQL;
apšvietimas yra perjungiamas ir galite jį išjungti neįkeldami puslapio iš naujo;
2 spalvų temos - šviesi ir tamsi;
greitas šuolis į eilutę pagal jos numerį;
Tab / Shift + Tab skirtukai įterpti ir anuliuoti.

Informacijos valdymas yra kasdienis darbas, darome viską, kad šis darbas būtų malonus!

„Padalijimo“ režimas Vertikalus ir horizontalus

Dabar jūsų redaktorius turi 2 pilnaverčius „padalijimo“ režimus – vertikalų ir horizontalų. Labai patogu dirbti kombinuotu režimu.

Vienu metu galite matyti puslapio kodą ir jo ekraną. Redaguoti galite bet kurioje lango dalyje – vizualiai redaguoti puslapį arba redaguoti jo kodą.

Split – lango padalijimas į dvi dalis – vizualinis redagavimas ir kodo redagavimas.

Patogi paieška / keitimas Raskite komponentą per sekundę!

Redaktorius turi integruotą patogią paieškos/pakeitimo funkciją – bet kurio turinio tvarkyklės svajonę. Dabar galite, pavyzdžiui, akimirksniu rasti reikiamą komponentą ir „nuvilkti“ jį į puslapį. Jums nereikia prisiminti, kur jis yra komponento struktūroje. Tai ypač naudinga, kai naudojama daug komponentų.

Tas pats rezultatas visose naršyklėseNaudokite bet kurią naršyklę!

Produkte integruota vaizdo rengyklė suderinama su visomis populiariomis naršyklėmis. Redaktorius vienodai teisingai veikia visose populiariose naršyklėse ir naudoja tas pačias funkcijas. Svetainės puslapius galite redaguoti bet kurioje naršyklėje – rezultatas bus toks pat.

Kodas „Išvalymas“ įterpiant „Cleaning“ kodą!

Redaktorius tvarko teksto įterpimą iš įvairių šaltinių su automatiniu turinio valymu. Kopijuojant tekstą, pavyzdžiui, iš Word, kodas konvertuojamas į HTML5. Iš kodo pašalinamos visos nereikalingos – nereikšmingos žymos.

Kūrėjams

Žiniatinklio kūrėjai įvertins komponentų skydelio ir fragmentų skydelio funkcionalumo įgyvendinimą (vienoje skaidrėje). Jie taip pat turi galimybę tinkinti JS lygiu ir išplėstą įvykių modelį.

Tinkamas ir teisingas HTML5 Su patvirtinimu – viskas gerai!

HTML5 ne tik ateina, bet jau čia. Naudodami integruotą vaizdo rengyklę, jums nereikia jaudintis dėl svetainės kodo galiojimo ir teisingumo. Redaktorius generuoja būtent tokį kodą, kurį teisingai suvokia šiuolaikinės naršyklės.

Nereikia rankiniu būdu rašyti teisingo kodo

Šis redaktorius yra integruotas į jūsų svetainę, o jūsų turinio valdytojas neturi galvoti apie tai, kokie struktūriniai elementai naudojami tekstams žymėti.

Kodėl jums reikia tinkamo HTML5
Perėjimo prie galiojančio HTML5 pranašumai yra neabejotini; apie juos jau seniai diskutavo žiniatinklio kūrėjai (pvz.,

Visa tai dėka naujos valdomos talpyklos technologijos (Cache Dependencies), kuri būtent tarnauja patogiam turinio rengyklės darbui ir automatiniam duomenų atnaujinimui iš karto po jų pakeitimo. Ši technologija leidžia rodyti pakeitimus svetainėje, nelaukiant, kol bus atnaujinta talpykla, kurią sistema atlieka nurodytu laiku. Štai kodėl tai yra vienas iš svarbiausių technologinių komponentų, leidžiančių patogiai naudotis svetaine.

Norėdami paspartinti svetainės veikimą ir išplėsti projektą, rekomenduojame palaikyti Autocaching technologiją ir naudoti valdomo talpyklos technologiją.
Automatinis + Tvarkomas

Kūrėjams

„Ermitažas“ interneto svetainių kūrėjams „Ermitažo“ koncepcija apima visą rinkinį technologinių rekomendacijų interneto svetainių kūrėjams. Tai įspūdingas sąrašas su rekomendacijomis, kaip „teisingai“ kurti programas. Tai Ermitažo koncepcija kūrėjams, tiksliai parodanti, kaip kurti programas Bitrix platformai. Kurkite taip, kad šios programos suteiktų patogumo ir lengvumo dirbant „Ermitažo“ sąsajoje. Dauguma šių rekomendacijų yra gerai žinomos patyrusiems kūrėjams.

Rekomendacijos žiniatinklio kūrėjams:

Dizainas. Atlikta pagal. Ypač tais momentais, kurie susiję su savo dizaino šablono kūrimu ir jo pritaikymu. Stengėmės sukurti valdymo sąsajas taip, kad nebūtų apribotas žiniatinklio kūrėjų išdėstymas ir dizaino galimybės.
Svetainės šablone rekomenduojama naudoti standartinius meniu komponentus su talpyklomis. ()
Svetainę rekomenduojama sukurti naudojant . Arba naudokite standartinius komponentus, arba projekto tikslais sukurkite pasirinktinius komponentus pagal jo specifinius poreikius.
Rekomenduojame pritaikyti išvaizdą. Tai užtikrins jų saugumą atnaujinant gaminį. Galite nukopijuoti šabloną tiesiai iš viešosios sąsajos redagavimo režimu. Komponentas gali turėti neribotą skaičių šablonų.
Jei keičiate 1C-Bitrix komponentą arba kuriate savo komponentą, rekomenduojame jį sukurti.
Kurdami komponentus galite atsižvelgti į .
Naudoti rekomenduojama tais atvejais, kai kuriamos sudėtingos funkcijos arba kelių puslapių rodiniai, kai vartotojams bus sunku susieti atskirus komponentus.
Norėdami paspartinti svetainės veikimą ir išplėsti projektą, rekomenduojame palaikyti Autocaching technologiją ir naudoti valdomo talpyklos technologiją.
Konfigūruojant komponentus, patartina nustatyti komponentų parametrus į Auto+Managed su ilga talpyklos trukme (1–12 mėnesių, jei dirbate tik naudodami talpyklos priklausomybių technologiją).
Pageidautina, kad Autocaching režimu komponentas nevykdytų užklausų į duomenų bazę arba vykdytų tik tas užklausas, kurių talpyklos kaupimas yra neracionalus.
Jei įmanoma, pageidautina palaikyti paieškos sistemų optimizavimą.
Rekomenduojame palaikyti sąrašo elementų valdymą naudojant produkto API. Tai leis vartotojams redaguoti ir ištrinti elementus tiesiai svetainės puslapiuose.
Rekomenduojama sukurti didelius savo modulių plėtinius su API ir įtraukti į juos savo komponentus. Su vėlesniu jų išdėstymu „MarketPlace“ ir galimybe atnaujinti naudojant „SiteUpdate“ technologiją. ()
Norint dirbti su sistemos objektais, rekomenduojama naudoti platformos API. Labai nepageidaujamos tiesioginės užklausos į duomenų bazę. Dėl to produkto naujiniai gali būti nesuderinami su partnerio įdiegimu.
Produkto branduolio vientisumo palaikymas ir mūsų rekomendacijų naudojimas įgyvendinant projektą, siekiant užtikrinti galimybę atnaujinti gaminį naudojant SiteUpdate atnaujinimo technologiją. Naudokite vidinių įvykių sistemą, kad pakeistumėte gaminio logiką arba prašytumėte naujų įvykių. (

Svetainės kūrimas pagal šias rekomendacijas suteiks klientams iš esmės svarbius aspektus: valdymo paprastumą, galimybę atnaujinti, aukštą projekto našumą ir saugumą.

Šiuo metu apie 11-12% iš 100 000 lankomiausių svetainių yra reaguojančios ir neabejotina, kad per ateinančius kelerius metus šis skaičius didės.

Kadangi vis daugiau organizacijų raitojasi rankoves, kad suvoktų žiniatinklio realijas keliuose įrenginiuose, verta pažvelgti į skirtingas strategijas, naudojamas tai nirvanai pasiekti:

Adaptyvusis modernizavimas

Interaktyvus pertvarkymas – tai esamos tik staliniams kompiuteriams skirtos svetainės paėmimas ir iš esmės „pertvarkymas“, kad ji būtų interaktyvi.

Kalbant apie paruoštas svetaines (ypač komercines), komandos ne visada turi galimybę viską išmesti ir kurti iš naujo.
Danas Cederholmas

Daugeliui organizacijų net nesvarstoma didelio masto naujo dizaino kūrimas nuo nulio. Štai kodėl reaguojantis modernizavimas yra populiarus būdas sukurti gerą mobiliųjų įrenginių patirtį.

Privalumai

Palyginti greitai.
Yra keletas būdų, kaip atlikti interaktyvų modernizavimą. Ši strategija gali būti svetainės įtraukimas į small-screens.css failą. Nepaisant šio gana grubaus pavyzdžio, adaptyvusis modernizavimas yra patrauklus pasirinkimas daugeliui organizacijų, nes nereikia visko perstatyti nuo nulio.
Pažįstamas.
Neklaidina vartotojų. Žmonės daug metų priprato prie sąsajos, o atnaujindamos esamą, organizacijos išlaiko pažįstamą požiūrį ir pagerina mobiliuosius įrenginius turinčių žmonių gyvenimą.
Organizaciniu požiūriu greičiau.
Kalbant politiškai, sąsajos modernizavimas yra saugesnis nei pradėti nuo nulio. Bus mažiau diskusijų apie tai, kokį žalios spalvos atspalvį pasirinkti, kokias nereikšmingas nuotraukas naudoti, o vadovybei nereikės sukti rankų. Tai leidžia komandoms greičiau paleisti reaguojančias svetaines.

Trūkumai

Paveikia tik nedidelę dalį.
Vėlgi, yra daug galimybių pertvarkyti, tačiau daugumos jų tikslas yra „padaryti gražią“. Sutelkiant dėmesį į išdėstymo pertvarkymą, perprojektuojant dažnai praleidžiama daugybė kitų veiksnių, į kuriuos reikia atsižvelgti kuriant sėkmingą įvairių įrenginių dizainą.
10 litrų vandens trijų litrų stiklainyje.
Kadangi staliniams kompiuteriams skirtos svetainės yra skirtos tik staliniams kompiuteriams (ir dažnai veikia ilgą laiką), jose gali būti daug netvarkos. Ir kadangi modernizavimą daugiausia sudaro maketo išlydymas, į daugumą turinio problemų nėra visiškai atsižvelgiama.
Spektaklis.
Kodo rašymas, kad būtų geriau palaikomi maži įrenginiai, yra keista. Nereikalingų dalykų pašalinimas gali būti per toli, tačiau nekreipiant dėmesio į produktyvumą, jis savaime neišaugs.
Blogiausias palaikymas.
Medijos užklausos, iš pradžių sukurtos staliniams kompiuteriams, yra menkai palaikomos daugelyje mobiliųjų įrenginių.
Laikini pataisymai.
Jaučiuosi kaip mirti, kai girdžiu žmones, kurie manęs prašo ką nors „padaryti atsakingą“, tarsi tai būtų tik žymimasis laukelis projekto plane (kas kartais iš tikrųjų yra). Šio tipo ribotas mąstymas praleidžia realias galimybes, kurias siūlo reaguojantis dizainas.

Interaktyvios svetainės mobiliesiems

Interaktyvios svetainės mobiliesiems arba, kaip aš jas vadinu, „atsakomosios ateities sėklos“, yra praktika, kuriant atskirą svetainę „m.yourdomain.ru“ formatu naudojant interaktyvaus dizaino metodus. Tokios svetainės kaip BBC, The Guardian ir Entertainment Weekly (kurioje aš dirbau) naudoja šią strategiją.

Mobilioji versija suteikia galimybę pasėti sėklą, kuri išaugs iš jūsų senosios svetainės.

Laikui bėgant, pasenusi svetainė gali būti pašalinta, o svetainė taps pritaikyta mobiliesiems, bus interaktyvi ir atsižvelgs į būsimas tendencijas.

Privalumai

Mažesnė rizika.
Dauguma organizacijų vis dar mato srautą iš mobiliųjų įrenginių kaip mažumą. Taigi paleidus mobiliesiems pritaikytą svetainę šioms organizacijoms galima išbandyti vandenis nesigilinant į temą.
Galimybę išmokti būti lanksčiam.
Dizaineriai gali išmokti mąstyti lanksčiau. Kūrėjai išmoks daugybę „Android“ įrenginių gudrybių. Vadovai gali išsiaiškinti, kaip atsikratyti pikselių tobulumo. Interaktyvi svetainė mobiliesiems gali būti puiki smėlio dėžė mokymuisi.
Infrastruktūra.
Komandos gali išmokti kartą ir visiems laikams išspręsti turinio valdymo problemas, tokias kaip vaizdų kūrimas
Pašalinkite perteklių.
Šis požiūris suteikia puikią galimybę komandoms paklausti savęs „ar mums to tikrai reikia“, kartu sutelkiant dėmesį į našumą. Kodėl? Kadangi pagrindinis jų dėmesys skiriamas svetainės naudotojų patirties pagerinimui mobiliuosiuose įrenginiuose.
Ateitis – mobiliesiems skirtos svetainės.
Nors iš pradžių trūko turinio ar funkcionalumo, šios svetainės mobiliesiems ilgainiui gali pakeisti viso puslapio protėvius su pakankamai laiko ir pastangų.

Trūkumai

Tai vis dar svetainė mobiliesiems.
Nesvarbu, ar tai responsive, ar ne, šis metodas vis tiek išlaiko daugybę mobiliųjų svetainių trūkumų: URL peradresavimo, turinio valdymo, nuoseklaus turinio, nuoseklumo, SEO optimizavimo ir kt.
Laikini pataisymai.
Daugelis svetainių mobiliesiems yra sukurtos kaip band-Aid – siekiant sustabdyti kraujavimą. Tokios svetainės kuriamos siekiant iškrauti augantį srautą iš mobiliųjų įrenginių. Šie sprendimai vis dar gali patenkinti esamus poreikius, tačiau, atsižvelgiant į ateities tendencijas, vargu ar jie ilgainiui jus išgelbės.
Tikimybė nudžiūti ant vynmedžio.
Kai kurios organizacijos gali pradėti tokius projektus, baigti įpusėjus, o tada atsisakyti viso to, kol bus priimtas kitų metų biudžetas.
Dizainas mažiems ekranams.
Kadangi iš pradžių daugiausia dėmesio skiriama mažiems ekranams, vėliau sąsajos perkėlimas į didesnius ekranus neprarandant kokybės gali būti iššūkis.

Reaktyvus dizainas, skirtas mobiliesiems įrenginiams

Siųsti savo gerą darbą žinių bazėje yra paprasta. Naudokite žemiau esančią formą

Studentai, magistrantai, jaunieji mokslininkai, kurie naudojasi žinių baze savo studijose ir darbe, bus jums labai dėkingi.

Paskelbta http://allbest.ru

1. Adaptyvusis modernizavimas

2. Interaktyvios svetainės mobiliesiems

3. Reaktyvus dizainas, skirtas mobiliesiems įrenginiams

4. Fazinė strategija

1. Adaptyvusis modernizavimas

Interaktyvus pertvarkymas – tai esamos tik staliniams kompiuteriams skirtos svetainės paėmimas ir iš esmės jos pritaikymas.

Šiuo metu apie 11-12% iš 100 000 lankomiausių svetainių yra reaguojančios ir neabejotina, kad per ateinančius kelerius metus šis skaičius didės. Kadangi vis daugiau organizacijų raitojasi rankoves, kad suvoktų kelių įrenginių žiniatinklio realijas, verta apsvarstyti keletą strategijų, naudojamų nirvanai pasiekti:

Kalbant apie paruoštas svetaines (ypač komercines), komandos ne visada turi galimybę viską išmesti ir kurti iš naujo. Daugeliui organizacijų net nesvarstoma didelio masto naujo dizaino kūrimas nuo nulio. Štai kodėl reaguojantis modernizavimas yra populiarus būdas sukurti gerą mobiliųjų įrenginių patirtį.

Privalumai:

· Palyginti greitai. Kadangi nereikia visko perstatyti nuo nulio.

· Pažįstamas. Neklaidina vartotojų. Žmonės daug metų priprato prie sąsajos, o atnaujindamos esamą, organizacijos išlaiko pažįstamą požiūrį ir pagerina mobiliuosius įrenginius turinčių žmonių gyvenimą.

· Organizaciniu požiūriu greičiau. Atnaujinti sąsają yra saugiau ir lengviau nei pradėti nuo nulio.

Trūkumai:

· Paveikia tik nedidelę dalį. 10 litrų vandens trijų litrų stiklainyje. Daug turinio

· Produktyvumas.

· Blogiausias palaikymas. Medijos užklausos, iš pradžių sukurtos staliniams kompiuteriams, yra menkai palaikomos daugelyje mobiliųjų įrenginių.

2. Interaktyvios svetainės mobiliesiems

Interaktyvios svetainės mobiliesiems – tai atskiros svetainės „m.yourdomain.ru“ formato kūrimas naudojant interaktyvaus dizaino metodus.

Mobilioji versija suteikia galimybę pasėti sėklą, kuri išaugs iš jūsų senosios svetainės. Laikui bėgant, pasenusi svetainė gali būti pašalinta, o svetainė taps pritaikyta mobiliesiems, bus interaktyvi ir atsižvelgs į būsimas tendencijas.

Privalumai:

· Mažesnė rizika. Srautas iš mobiliųjų įrenginių yra mažuma.

· Interaktyvi svetainė mobiliesiems gali būti puiki smėlio dėžė mokymuisi.

· Pašalinkite nereikalingus daiktus. Šis požiūris suteikia puikią galimybę komandoms paklausti savęs „ar mums to tikrai reikia“, kartu sutelkiant dėmesį į našumą.

· Ateitis – mobiliesiems skirtos svetainės. Nors iš pradžių trūko turinio ar funkcionalumo, šios svetainės mobiliesiems ilgainiui gali pakeisti viso puslapio protėvius su pakankamai laiko ir pastangų.

Trūkumai:

· Tai vis dar svetainė mobiliesiems. Nesvarbu, ar tai responsive, ar ne, šis metodas vis tiek išlaiko daugybę mobiliųjų svetainių trūkumų: URL peradresavimo, turinio valdymo, nuoseklaus turinio, nuoseklumo, SEO optimizavimo ir kt.

· Laikini pataisymai. Daugelis svetainių mobiliesiems yra sukurtos kaip juostos pagalba, siekiant sustabdyti kraujavimą. Tokios svetainės kuriamos siekiant iškrauti augantį srautą iš mobiliųjų įrenginių. Šie sprendimai vis dar gali patenkinti esamus poreikius, tačiau, atsižvelgiant į ateities tendencijas, vargu ar jie ilgainiui jus išgelbės.

· Galimybė nuvyti ant vynmedžio.

· Dizainas mažiems ekranams. Kadangi iš pradžių daugiausia dėmesio skiriama mažiems ekranams, vėliau sąsajos perkėlimas į didesnius ekranus neprarandant kokybės gali būti iššūkis.

3. Interaktyvus dizainas, skirtas mobiliesiems įrenginiams

išmaniojo telefono sąsajos dizainas

„Pirmiausia mobiliesiems“ – tai principas, apimantis sąsajos sukūrimą, atsižvelgiant į mobiliosios aplinkos apribojimus (mažą ekraną, mažą pralaidumą ir kt.), tačiau išnaudojant visas didelių ekranų galimybes.

Privalumai:

· Pradėkite su naujomis jėgomis. Pirmiausia mobilusis – nauja pradžia.

· Geriausias palaikymas. Daugiau mobiliųjų įrenginių, ypač senesnių, kurie nepalaiko medijos užklausų, palaikymas.

· Produktyvumas. Nors svetainės našumas pirmiausia priklauso nuo jos įgyvendinimo, mobiliesiems pritaikyti dizainai suteikia komandoms galimybę nuo pat pradžių sutelkti dėmesį į našumą.

· Atsižvelgiant į viską ir iš karto. Mobiliesiems pritaikytas dizainas (nepaisant jo pavadinimo) gali pritaikyti daugybę skiriamųjų gebų, o ne tik taikyti vieną įrenginių klasę.

· Ateičiai atsparus dizainas.

Trūkumai:

· Skirkite daug laiko

Sąmonės poslinkis

· Sunku organizaciniu požiūriu

· Nepažįstamas

4. Fazinė strategija

Žingsnis po žingsnio reaguojančio dizaino strategija didelės apimties kampaniją suskaido į kelis veiksmus. Kaip ir modernizuojant (šios strategijos viena kitos nepaneigia), gali būti neįmanoma atlikti didelio masto pertvarkymo, todėl kai kurios organizacijos tai daro po vieną žingsnį. Egzistuoja keli adaptyviosios sąsajos kūrimo žingsnis po žingsnio tipai: Puslapis po puslapio.

Privalumai:

· Pastebimas

· Galimybę išmokti būti lanksčiam. Galite sužinoti viską apie interaktyvių sąsajų kūrimą ir panaudoti šias žinias likusioje svetainės dalyje.

· Didesnės paleidimo galimybės

Trūkumai:

Trūksta vientisumo

Galimybė nudžiūti ant vynmedžio

Paskelbta Allbest.ru

Panašūs dokumentai

Vartotojo sąsajų kūrimo principai ir metodai, jų projektavimo taisyklės. Klasikiniai vartotojo sąsajų prototipų kūrimo būdai naudojant „Microsoft Expression Blend“. Darbas su tekstu ir grafika naudojant Expression Blend.

kursinis darbas, pridėtas 2012-03-19

Interneto kūrimo istorija ir pagrindiniai jo principai: protokolai, paslaugos, paslaugos. Priklausomybės nuo interneto, trolinimo, kiberpanko ir cenzūros sąvokų apibrėžimas. Svetainių klasifikavimas ir išdėstymas, jų dizaino kūrimas. Naršyklės „Mozilla Firefox“ ir „Opera“.

santrauka, pridėta 2011-11-10

Svetainių kūrimo ir projektavimo metodų ir įrankių apžvalga. Programavimo kalbos interneto svetainėms kurti. TVS turinio valdymo sistemų privalumų ir trūkumų analizė. Interneto svetainės dizaino ir maketavimo kūrimas. Produkto kūrimo kaštų skaičiavimas.

baigiamasis darbas, pridėtas 2016-02-06

Šiuolaikinių programų optimizavimo sistemų grafinių vartotojo sąsajų analizė. SBkZ_PP valdymo sistemos matematinio modelio ir algoritmo sukūrimas, jos architektūrinė-kontekstinė diagrama. Programinės įrangos techninė dokumentacija.

baigiamasis darbas, pridėtas 2012-04-18

Universiteto svetainių, įskaitant sukurtų TVS pagrindu, naudojamų technologijų, turinio ir dizaino peržiūra ir analizė. PRIPIT svetainės turinio ir įvairių potencialių jos lankytojų grupių informacijos poreikių tyrimas. Interneto svetainės dizaino kūrimas.

baigiamasis darbas, pridėtas 2010-11-03

Ekrano grafiniai komponentai, sistemos objektai ir funkcijos. Vartotojo sąveikos su įrenginiu priemonių sistema. Asmeninių kompiuterių grafinių vartotojo sąsajų istorija, jų klasifikacija. X langų sistema.

pristatymas, pridėtas 2012-05-22

Internetinio puslapio, skirto prekybos įmonės svetainei kurti, kūrimo ir projektavimo metodų parinkimas. Darbo su interneto dizaino elementais ypatybės: šriftas, pavadinimai, grafika. Interneto svetainių kūrimo ir naudojimo teisinis reglamentavimas.

baigiamasis darbas, pridėtas 2010-11-11

Kompiuterių hierarchinių sistemų informacijos sąveikos sąsajų charakteristikos. „grįžtamojo ryšio“ principas. Aparatinės ir programinės įrangos sąsajų kūrimo savybės, paprastumas ir taisyklės. Naujos kompiuterinių sistemų projektavimo kryptys.

kursinis darbas, pridėtas 2017-05-01

Konsultacijų verslo žiniasklaidos analizė: programavimo kalbų ir programinės įrangos, skirtos svetainėms, informacinėms sistemoms ir konsultacinių įmonių svetainėms kurti, apžvalga. Verslo procesų modeliavimas. Interneto buvimo plėtra.

baigiamasis darbas, pridėtas 2012-11-04

Interneto paslaugos, skirtos prieglobos įmonės sisteminių paslaugų vaizdinei sąsajai sukurti, kūrimas. Sąsajos ir plėtros krypčių vertinimo kriterijai. GlideOS darbalaukis. Paslaugų architektūros, programavimo kalbos ir komunikacijos metodų parinkimas.

Prisitaikantis išdėstymas keičia puslapio dizainą priklausomai nuo vartotojo elgesio, platformos, ekrano dydžio ir įrenginio orientacijos ir yra neatsiejama šiuolaikinio interneto kūrimo dalis. Tai leidžia žymiai sutaupyti ir nereikės braižyti naujo dizaino kiekvienai raiškai, o keisti atskirų elementų dydį ir vietą.

Šiame straipsnyje apžvelgsime pagrindinius svetainės elementus ir kaip juos pritaikyti.

Ekrano raiškos reguliavimas

Iš principo galima suskirstyti įrenginius į skirtingas kategorijas ir kurti kiekvienam iš jų atskirai, tačiau tai užtruks per daug laiko, o kas žino, kokie standartai bus po penkerių metų? Be to, pagal statistiką turime daugybę skirtingų skiriamųjų gebų:

Tampa akivaizdu, kad mes negalėsime toliau kurti kiekvienam įrenginiui atskirai. Bet ką tada daryti?

Dalinis sprendimas: padaryti viską lanksčią

Žinoma, tai nėra tobulas metodas, tačiau jis pašalina daugumą problemų.

Ethanas Marcotte'as sukūrė paprastą šabloną, demonstruojantį reaguojančio išdėstymo naudojimą:

Iš pirmo žvilgsnio gali atrodyti, kad viskas paprasta, bet taip nėra. Pažvelkite į logotipą:

Jei sumažinsite visą vaizdą, užrašai taps neįskaitomi. Todėl, siekiant išsaugoti logotipą, paveikslėlis yra padalintas į dvi dalis: pirmoji dalis (iliustracija) naudojama kaip fonas, antroji (logotipas) proporcingai keičia savo dydį.

Elemente h1 yra vaizdas kaip fonas, o vaizdas sulygiuotas su konteinerio fonu (antraštė).

Lankstūs vaizdai

Darbas su vaizdais yra viena iš svarbiausių problemų dirbant su reaguojančiu dizainu. Yra daug būdų, kaip pakeisti vaizdų dydį, ir daugumą jų gana paprasta įgyvendinti. Vienas iš sprendimų yra naudoti maksimalų CSS plotį:

Vaizdas (maksimalus plotis: 100 %;)

Maksimalus vaizdo plotis yra 100 % ekrano arba naršyklės lango pločio, todėl kuo mažesnis plotis, tuo mažesnis vaizdas. Atminkite, kad maksimalus plotis nepalaikomas IE, todėl naudokite plotį: 100 % .

Pateiktas būdas yra geras variantas kuriant adaptyvius vaizdus, tačiau keisdami tik dydį, vaizdo svorį paliksime tą patį, o tai padidins įkėlimo laiką mobiliuosiuose įrenginiuose.

Kitas būdas: reaguojantys vaizdai

Filament Group įdiegta technika ne tik keičia vaizdų dydį, bet ir suspaudžia vaizdų skiriamąją gebą mažuose ekranuose, kad būtų pagreitintas įkėlimas.

Šiam metodui reikalingi keli failai, pasiekiami „Github“. Pirmiausia paimame JavaScript failą ( rwd-images.js), failą .htaccess Ir rwd.gif(vaizdo failas). Tada mes naudojame tam tikrą HTML, kad susietume didelę ir mažą skiriamąją gebą: pirmiausia mažas vaizdas su priešdėliu .r(kad parodytumėte, kad vaizdas turi būti jautrus), tada susiekite su dideliu vaizdu naudodami data-fullsrc:

Bet kuriame ekrane, platesniame nei 480 px, bus įkeltas didesnės raiškos vaizdas ( largeRes.jpg), o mažuose ekranuose jis bus įkeltas ( smallRes.jpg).

„IPhone“ ir „iPod Touch“ turi savybę: dideliems ekranams sukurtas dizainas tiesiog susitrauks mažos raiškos naršyklėje be slinkimo ar papildomo mobiliojo išdėstymo. Tačiau vaizdai ir tekstas nebus matomi:

Norėdami išspręsti šią problemą, naudokite metažymą:

Jei pradinė skalė lygi vienetui, vaizdų plotis tampa lygus ekrano pločiui.

Pritaikoma puslapio išdėstymo struktūra

Norint žymiai pakeisti puslapio dydį, gali tekti pakeisti bendrą elementų išdėstymą. Tai galima patogiai padaryti naudojant atskirą stilių failą arba, dar efektyviau, naudojant CSS medijos užklausą. Problemų neturėtų kilti, nes dauguma stilių išliks tokie patys ir tik keli pasikeis.

Pavyzdžiui, turite pagrindinio stiliaus failą, kuriame nurodomos #wrapper , #content , #sidebar , #nav kartu su spalvomis, fonu ir šriftais. Jei dėl pagrindinių stilių išdėstymas yra per siauras, trumpas, platus arba aukštas, galite tai nustatyti ir įtraukti naujų stilių.

style.css (pagrindinis):

/* Pagrindiniai stiliai, kuriuos paveldės antrinis stilių lapas */ html,body( background... šriftas... spalva... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Struktūriniai elementai */ #wrapper( plotis: 80%; paraštė: 0 automatinis; fonas: #fff; užpildymas: 20 pikselių; ) #content( plotis: 54%; slankioji: kairė; paraštė-dešinė: 3%; ) # šoninė juosta-kairė (plotis: 20%; plūduriuoti: kairė; paraštė-dešinė: 3%; ) #šoninė juosta-dešinė (plotis: 20%; plūdė: kairė; )

mobile.css (vaikas):

#wrapper( plotis: 90%; ) #content( plotis: 100%; ) #sidebar-left( plotis: 100%; aiškus: abu; /* Papildomi naujo dizaino stiliai */ border-top: 1px solid #ccc ; paraštė viršuje: 20 piks.; ) #šoninė juosta-dešinė (plotis: 100 %; aiškus: abu; /* Papildomas naujojo išdėstymo stilius */ kraštinė viršuje: 1 piks. vientisas #ccc; paraštė viršuje: 20 piks.; )

Plačiame ekrane kairė ir dešinė šoninės juostos gražiai priglunda prie šono. Siauresniuose ekranuose šie blokai yra išdėstyti vienas po kito, kad būtų patogiau.

CSS3 medijos užklausos

Pažiūrėkime, kaip galite naudoti CSS3 medijos užklausas kuriant reaguojančius dizainus. min-width nurodo minimalų naršyklės lango arba ekrano, kuriam bus taikomi tam tikri stiliai, plotį. Jei kuri nors reikšmė yra mažesnė nei min-width , stiliai bus nepaisomi. maksimalus plotis veikia priešingai.

@medijos ekranas ir (min. plotis: 600 piks.) ( .hereIsMyClass ( plotis: 30 %; plūduriuoti: dešinėje; ) )

Medijos užklausa veiks tik tada, kai minimalus plotis yra didesnis arba lygus 600 pikselių.

@medijos ekranas ir (maks. plotis: 600 piks.) ( .aClassforSmallScreens ( aiškus: abu; šrifto dydis: 1,3 em; ) )

Šiuo atveju klasė ( aClassfor Smallscreens) veiks, kai ekrano plotis yra mažesnis arba lygus 600 px.

Nors minimalus ir didžiausias plotis gali būti taikomi ir ekrano pločiui, ir naršyklės lango pločiui, mums gali tekti dirbti tik su įrenginio pločiu. Pavyzdžiui, ignoruoti naršykles, atidarytas mažame lange. Tam galite naudoti minimalų įrenginio plotį ir didžiausią įrenginio plotį:

@medijos ekranas ir (maksimalus įrenginio plotis: 480 pikselių) ( .classForiPhoneDisplay (šrifto dydis: 1,2 em; ) ) @medijos ekranas ir (minimalus įrenginio plotis: 768 pikseliai) ( .minimumiPadWidth ( aiškus: abu; margin-bottom : 2px solid #ccc; ) )

Ypač iPad, medijos užklausos turi savybę orientacija, kurių vertės gali būti bet kurios kraštovaizdis(horizontalus), arba portretas(vertikaliai):

@medijos ekranas ir (orientacija: gulsčias) ( .iPadLandscape (plotis: 30 %; plūduriuojantis: dešinėn; ) ) @medijos ekranas ir (orientacija: stačias) ( .iPadPortrait (aiškus: abu; ) )

Taip pat galite derinti medijos užklausos reikšmes:

@medijos ekranas ir (min. plotis: 800 piks.) ir (maks. plotis: 1200 piks.) ( .classForaMediumScreen ( fonas: #cc0000; plotis: 30 %; slankusis: dešinėje; ) )

Šis kodas bus vykdomas tik 800–1200 pikselių pločio ekranuose arba naršyklės languose.

Galite įkelti konkretų lapą su skirtingų laikmenų užklausų reikšmių stiliais, pavyzdžiui:

JavaScript

Jei jūsų naršyklė nepalaiko CSS3 medijos užklausų, stilių galima pakeisti naudojant jQuery:

$(document).ready(function())( $(window).bind("keisti dydį", resizeWindow); funkcija resizeWindow(e)( var newWindowWidth = $(langas).width(); // Jei plotis yra mažesnis nei 600 px , mobiliojo telefono stiliaus lapas naudojamas if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Jei plotis didesnis nei 600 px, naudojamas darbalaukio stiliaus lapas $("link").attr((href: "style.css")); ) ) ));

Pasirenkamas turinio rodymas

Galimybė susitraukti ir pertvarkyti elementus, kad tilptų mažuose ekranuose, yra puiki. Bet tai nėra pats geriausias variantas. Mobilieji įrenginiai paprastai turi platesnį pakeitimų rinkinį: supaprastinta naršymas, labiau sutelktas turinys, sąrašai arba eilutės, o ne stulpeliai.

Laimei, CSS suteikia mums galimybę neįtikėtinai lengvai rodyti ir slėpti turinį.

Ekranas: nėra;

ekranas: nenaudojamas objektams, kuriuos reikia paslėpti.

Štai mūsų žymėjimas:

Pagrindinis turinys Kairioji šoninė juosta Dešinė šoninė juosta

style.css (pagrindinis):

#content( plotis: 54%; plūdimas: kairė; paraštė-dešinė: 3%; ) #sidebar-left( plotis: 20%; flot: left; margin-dešinė: 3%; ) #sidebar-right( plotis: 20 %; plūduriuoti: kairėje; ) .sidebar-nav( ekranas: nėra; )

mobile.css (supaprastinta):

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

Jei ekrano dydis sumažintas, galite, pavyzdžiui, naudoti scenarijų arba alternatyvų stiliaus failą, kad padidintumėte baltą erdvę arba pakeistumėte naršymą, kad būtų patogiau. Taigi, turėdami galimybę paslėpti ir rodyti elementus, keisti paveikslėlių, elementų dydį ir dar daugiau, galite pritaikyti dizainą prie bet kurio įrenginio ir ekrano.

Kaip „Yandex“ naudoja jūsų duomenis ir mašininį mokymąsi paslaugoms pritaikyti –.