30 Naudingi interaktyvūs interneto dizaino mokymai
Taigi mes pasiekėme mūsų pabaigos „Atsakinga interneto dizaino savaitė“, šį vakarą bus paskutinė serija. Mes ketiname padėti jums patobulinti savo įgūdžius manipuliuojant šiais kodais, kad galėtumėte reaguoti, kai bus rodomi skirtinguose įrenginiuose. Ir tai darome 30 jautrių interneto dizaino pamokų rasti internete. Šis sąrašas neturi būti išsamus, bet pradėsime suprasti adaptyviosios svetainės kūrimo pagrindus, kurie bus pritaikyti įvairiems ekrano dydžiams..
Pradėsime su įvadinėmis pamokomis „Lūžio lūžis“, kažką panašaus į RWD: 101 klasę, kurią turėtumėte lankyti, kad galėtumėte pakabinti koncepciją, kol pereisime prie „Pradėti statymą“ pratimų.
Galiausiai, mes baigsime skyrių „Padaryti daugiau“, kuriame bus rodomi mokymai, kurie atliekami su horizontaliais išdėstymais, „elastingais“ vaizdo įrašais, išskleidžiamaisiais meniu ir skaidrių „nuo viršaus“ akordeono navigacijomis, miniatiūromis ir lipnia problema su lentelėmis.
Bet pirma…
Toliau pateikiami du pamokos, kurias anksčiau šią savaitę pateikė mūsų autoriai:
Atsakinga interneto svetainė
Thoriq Firdaus - [Peržiūrėti pamoką]
Čia pateikiama pamoka, padedanti jums sukurti savo pačių reaguojančią svetainę. Vienas iš svarbiausių svetainės aspektų yra tai, kaip lengva naršyti įvairiose svetainės dalyse. Sužinokite, kaip tai optimizuoti su CSS3 su šia pamoka.
Atsakingas atnaujinimas
Jake Rocheleau - [Peržiūrėti pamoką]
Jei esate žiniatinklio profesionalas ir internetinis atnaujinimas jau yra neatskiriama jūsų karjeros dalis, tuomet turėtumėte pasinaudoti galimybe taip pat pasukti ir toliau. Padaryti darbdaviams ir klientams lengviau rasti jus bet kuriame įrenginyje. Ir tuo metu, kai esate toje pačioje vietoje, jūsų pačių atnaujinimas padvigubėja kaip portfelis, kurį galite padaryti kaip kūrėjas.
Ledo lūžimas
Dabar, kur mes buvome? Ak, taip, pradėkime ledo laužymo veiksmus!
Pradedančiojo žiniatinklio dizaino vadovas
Nick Petit - [Peržiūrėti pamoką]
Ši pamoka yra puiki pradžia pradedantiesiems, nes jame aprašoma, ką reiškia interneto reagavimo dizainas, kaip jis pasirodė, taip pat paaiškinimai apie skysčių tinklus ir žiniasklaidos užklausas. Taip pat perskaitykite pamokų apačioje išvardytus išteklius.
Įvadas į atsakingą interneto dizainą: vaizdo įrašas
Nick Petit - [Peržiūrėti pamoką]
Tai pamoka, kuri yra artima 9 min. Trukmei, kuri apgaubia paviršių, į kurį reaguoja web dizainas, kaip tai buvo, kokį poveikį jis daro interneto svetainės dizainui ir kokie elementai yra susiję su atsakingo interneto dizaino kūrimu . Jei norėtumėte suprasti, koks jautrus žiniatinklio dizainas yra apie be pirmojo kodavimo, turėtumėte pradėti nuo šio vaizdo įrašo.
Kaip paversti bet kurią svetainę į atsakingą svetainę
Rochester Oliveira - [Peržiūrėti pamoką]
Tai dar viena pamoka, kuri prasideda nuo pagrindų, bet pertrauka viskas po truputį, įskaitant OS ir naršykles, kurias sukate savo svetainę, taip pat elementus, kurie yra paveikti, kai svetainė yra peržiūrima iš skirtingų įrenginių. Autorius taip pat pristatė keletą naudingų „WordPress“ ir „jQuery“ priedų, kad padėtų jūsų darbą lengviau atlikti.
Atsparus dizainas 3 etapais
Nikas La - [Peržiūrėti pamoką]
Ši pamoka paaiškins, kaip galite sukurti reaguojantį interneto dizainą su meta žymekliais, HTML struktūra ir svarbiomis žiniasklaidos užklausomis. Jums reikia šiek tiek žinių apie CSS, kad ją suprastumėte ...
Projektavimas atsakingam internetui
Max Luzuriaga - [Peržiūrėti pamoką]
Štai straipsnis, kuris nėra tiek pamoka, kiek tai yra orientacinis interneto dizaino kūrimo vadovas. Be to, autorius tiesiog pasakoja jums apie tai, kaip elgiamasi ir nesate atsakingo interneto dizaino. Yra paaiškinimų, kodėl tam tikros funkcijos nepakankamai reaguoja, kaip dirbti su proporcijomis ir moduliais, o geriausia - tai palyginti trumpas ir lengvai įsisavinamas.
Reaguojantis interneto dizainas: vizualinis vadovas
Autorius Andrew Gormley - [Peržiūrėti pamoką]
Jei teksto užpildytos pamokos nėra perspektyvios, pabandykite naudoti šią vaizdo medžiagą. Jis vis dar yra gana techninis, tačiau, jei jis leidžia jaustis geriau, jums nereikia daug skaityti. Tai maždaug 25 minutės ir vaizdo įrašymo aparatas iš tikrųjų greitai pasipildė per dalis, kuriose jis koduoja, tada grįžta, kad paaiškintų, ką kodai daro.
Pradėkite statyti
Gerai, pradėkime kurti atsakingus dizainus, pradedant nuo…
Skysčių tinklai
Ethan Marcotte - [Peržiūrėti pamoką]
Pasakykite tinklelį, ir jūs manote, kad „standžios struktūros“, tarkime, skystis, ir jūs manote, kad jis gali tekėti iš vienos ekrano pusės į apačią ar viršų ar šoną, kai taikote spaudimą naršyklei, tačiau įdėkite šiuos du kartu ir tikriausiai manote, kad reikia pažvelgti į šią pamoką, kad galėtumėte visiškai įvertinti, kaip skysčių tinklai gali padėti jūsų dizainui geriau reaguoti.
Skysčių vaizdai
Ethan Marcotte - [Peržiūrėti pamoką]
Šio straipsnio pabaigoje turėtumėte žinoti, kas yra Ethan Marcotte. Štai užuomina: jis yra tas, kuris atėjo su interneto reaguojančių dizainų koncepcija ir terminu. Jo vardas beveik visose kitose šio sąrašo pamokose pasirodys, kodėl gi ne iš patarėjo patarsite apie skysčių vaizdus?.
Scalable navigaciniai modeliai reaguojant į web dizainą
Michael Mesker - [Peržiūrėti pamoką]
Ši pamoka pasakoja apie pamokas, kurias autorius sužinojo iš darbo, susijusio su didelio masto atsakingo interneto dizaino projektu. Perskaitykite jo „pasivaikščiojimą“ apie tai, kaip sukurti šablonus, kuriuos lengviau konfigūruoti, kad naudotojai būtų patogūs ir atsakingi. Užkulisiuose puikiai atrodo, kaip suprojektuoti sąsajas geriausiu būdu darbalaukio, planšetinio kompiuterio ir mobiliesiems vaizdams.
Atsakingas interneto dizainas su CSS3 žiniasklaidos užklausomis
Nikas La - [Peržiūrėti pamoką]
Ir dar viena puiki pamoka, kad sužinotumėte, kaip sukurti tinklavietę, skirtą naršyklei, su HTML5 ir CSS3. Tai žingsnis po žingsnio ir yra žiniatinklio dizaino demonstracijos prieš ir po žiniasklaidos užklausų įgyvendinimo, siekiant geriau įvertinti žiniasklaidos užklausų poveikį.
CSS efektai: atkurkite vaizdus, kad atitiktų teksto aukštį
Zoe Mickley Gillenwater - [Peržiūrėti pamoką]
Ši pamoka leidžia jums išmokti fiksuoto pločio vaizdų keitimo dydį ir atstumą, kad atitiktų pridedamą tekstą, nesvarbu, kaip keičiamas naršyklės langas.
Adaptyvūs išdėstymai su žiniasklaidos užklausomis
Aaron Gustafson - [Peržiūrėti pamoką]
Sužinokite, kaip naudoti adaptyvius arba lanksčius išdėstymus su CSS medijos užklausomis. Tiesiog atlikite pratimus, kad sužinotumėte, kaip pritaikyti savo dizainą prie dvigubo stulpelio arba vieno stulpelio rodinio, taip pat parengti „iPhone“ ir „iPad“ dizainą.
Atsakingi vaizdai: eksperimentavimas naudojant kontekstą suvokiantį vaizdo dydį
Scott Jehl - [Peržiūrėti pamoką]
Štai pamoka, kurioje buvo naudojamas pirmasis „nuo mobiliojo“ požiūris. Šis metodas nustato didesnį vaizdų dydį, naudojamą didesnėse ekrano rezoliucijose, atėmus vaizdo užklausas ir UA šnipinėjimą.
Padaryti daugiau
Elastiniai vaizdo įrašai
Nikas La - [Peržiūrėti pamoką]
Ši instrukcija skirta vaizdo įrašų skalei, nes jūsų naršyklės langas keičiamas. Tai iš esmės yra CSS triukas ir yra demo, kad pamatytumėte pačią pamoką darbe.
Paslėpti ir atskleisti vaizdų dalis
Zoe Mickley Gillenwater - [Peržiūrėti pamoką]
Pamoka faktiškai paimta iš autoriaus knygos, kurioje aprašoma, kaip atvaizduoti ar paslėpti vaizdų dalis, priklausomai nuo ekrano skiriamųjų gebų. Jis moko, kaip dinamiškai apkarpyti vaizdus, kai keičiasi ekrano dydis, parodant tik dalį viso vaizdo, kai yra ribota erdvė.
Atsakingas turinio navigatorius su CSS3
Mary Lou - [Peržiūrėti pamoką]
Norite, kad vartotojai galėtų naršyti aplink jūsų pusę? Tada perskaitykite šią pamoką, kad sužinotumėte, kaip koduoti kai kuriuos vėsius perėjimus: išnyks, skaidres, sukimas ir didinimas. Perėjimai iš esmės yra turinio sluoksniai, kurie buvo parodyti arba paslėpti su konkrečiu kodavimu.
Sukurkite atsakingą interneto dizaino šabloną
Harry Atkins - [Peržiūrėti pamoką]
Tai trumpa pamoka, kuria galima reaguoti žiniatinklio šablonas kuris veikia tiek darbalaukyje, tiek ir „iPhone“.
Atsakingas horizontalus išdėstymas
Mary Lou - [Peržiūrėti pamoką]
Ši pamoka moko, kaip sukurti horizontalų išdėstymą su keliais slenkamomis turinio plokštėmis. Naudojimas Rūšių kilmė kaip pavyzdinis tekstas, kiekvienas knygos skyrius yra atskirtas stulpeliuose, kurie yra šalia vienas kito visame naršyklės režime, tačiau, kai jie sumažinami iki pakankamai mažų, išdėstymas pasikeičia į visiškai vertikalią „knygą“.
Konvertuokite meniu į mažus ekranus
Chris Coyier - [Peržiūrėti pamoką]
Ši pamoka parodys, kaip konvertuoti meniu į išskleidžiamąjį sąrašą, kai naršyklės langas yra siauras, arba kai esate mobiliajame įrenginyje. Nuorodų eilutė viršutiniame dešiniajame puslapio kampe paverčiama išskleidžiamajame meniu, kad būtų galima sutaupyti vietos, neprarandant navigacijos parinkčių.
Lankstus „nuo viršaus iki viršaus“ suderinimas
Mary Lou - [Peržiūrėti pamoką]
Sužinokite, kaip sukurti paprastą ir lanksčią akordeono maketą, su išnykimo perėjimais ir reguliuojamais plotiais, atsižvelgiant į ekrano dydį ir rezoliucijas.
Kaip naudoti CSS3 orientavimo medijos užklausas
Autorius: Ryan Seddon - [Peržiūrėti pamoką]
Atsižvelgiant į paprastą taisyklę, kuri apibrėžia portretą (aukštį didesnį nei plotį) ir kraštovaizdžio (plotis didesnis nei aukštis) režimus, galite rašyti medijos užklausą, kad nukreiptumėte konkrečius stilius pagal režimą, kurį peržiūrite. Ši pamoka parodys mums, kaip tai padaryti, ir ji pateikiama kartu su nuoroda į spalvą keičiantį chameleoną, kuris naudoja spalvą, kad parodytų šį pakeitimą, kai mažinate naršyklės langą.
Reaguojančios duomenų lentelės
Chris Coyier - [Peržiūrėti pamoką]
Lentelės yra galvos skausmo šaltinis, kai kalbama apie mažus ekrano dydžius, bet tai nereiškia, kad turime visiškai išvengti stalų. Sužinokite, kaip naudoti žiniasklaidos užklausas, kad lentelės keitimo formatai būtų visiškai pakeisti, kai pereinate į mobiliojo ekrano dydžius. Peržiūrėkite demonstraciją, kad gautumėte idėjos apie magiją, kurią galite atlikti pagal šią pamoką.
Fluid CSS3 skaidrių demonstravimas su paralaksiniu efektu
Iki žiedo sparno - [Peržiūrėti pamoką]
Sukurkite „CSS3“ skaidrių peržiūrą, kurioje naudojami du fono vaizdai, ir kai pasikeičia fono pozicijos, pasireiškia paralaksas. Be to, skaidrių demonstravimas yra lankstus, jo dydis keičiamas kaip naršyklės langas.
Kaip sukurti atsakingą miniatiūrų galeriją
Joshua Johnson - [Peržiūrėti pamoką]
Tai puikiai tinka svetainėms, kuriose galerijoje yra miniatiūrų. Kadangi naršyklės langas keičiamas, išdėstymas keičiamas, kad būtų užimtas tarp dviejų stulpelių (mažesnių ekrano dydžių) ir penkių (didžiausių) stulpelių. Norėdami gauti daugiau panašių skaidrių ir slankiklių, patikrinkite mūsų Top 10 Free Responsive Image Galleries / Slideshows straipsnį.
Jūsų el. Pašto optimizavimas mobiliesiems įrenginiams
Autorius Ros Hodgekiss - [Peržiūrėti pamoką]
Net el. Laiškai gali būti optimizuoti mažo ekrano vaizdui, pvz., Kaip svetainės. Dažniausiai HTML el. Laiško tekstas pakeičiamas į tašką, kuris nėra sukurtas patogiam skaitymui; sužinokite, kaip valdyti šią ir daugiau šio vadovo.
naudojant sistemas
Sukurkite atsakingą mobilųjį tinklapį su skeletu
Joshua Johnson - [Peržiūrėti pamoką]
Skeletas - tai nuostabi sistema, leidžianti su ja susieti tinkamas svetaines. Ši mokomoji programa padės jums atlikti žingsnis po žingsnio vadovą, kaip naudoti Skeleto sistemą, kad sukurtumėte nuostabų atsakingą dizainą. Jūs būsite nustebinti pamatyti, kaip lengva jį įgyvendinti.
Reaguojantis žiniatinklio dizainas su HTML5 ir mažiau sistema 3
Louis Simoneau - [Peržiūrėti pamoką]
Jei nebuvo tinkamai supažindintas su „Mažiau“, tada patikrinkite savo „Mažiau CSS“ pamoką, kad gautumėte „Mažiau“ skonį. Šioje instrukcijoje „Mažesnė“ sistema buvo naudojama siekiant aiškiai matyti žiniasklaidos užklausų poveikį.
Išvada
Ir tai baigia mūsų Reaguojantis interneto dizainas serijos. Tikimės, kad šios serijos temos, įrankiai ir kiti ištekliai padėjo mūsų skaitytojams reaguoti į atsakingo interneto dizaino koncepciją. Bet kaip galėtume žinoti, jei nesakote mums?
Praneškite mums savo atsiliepimus ant serijos ir jei turite pasiūlymų dėl daugiau idėjų, kurias norite pamatyti adresu hongkiat.com. Nuleiskite mums eilutę arba komentarą žemiau.
