30 Noderīgas atsaucīgas Web dizaina konsultācijas
Tāpēc mēs esam sasnieguši mūsu beigas "Atsaucīga Web dizaina nedēļa", šodienas vakars būs pēdējā sērija. Mēs visu gatavojamies, lai palīdzētu jums uzlabot savas prasmes manipulēt ar šiem kodiem, lai reaģētu pēc vēlēšanās, kad parādīsies dažādās ierīcēs. Un, lai to izdarītu, mēs atrodamies 30 atsaucīgas Web dizaina konsultācijas atrasts tiešsaistē. Šis saraksts nav paredzēts kā izsmeļošs, bet tas ļaus jums sākt saprast adaptīvās tīmekļa vietnes izstrādes pamatus, kas apmierinās visu veidu ekrāna izmērus..
Mēs sāksim ar ievada konsultācijām “Ledus laušana”, kaut kas līdzīgs RWD: 101 klasei, kas jums jāapmeklē, lai iegūtu priekšstatu par koncepciju, pirms mēs pāriet uz “Sākt ēkas” vingrinājumus.
Visbeidzot, mēs beigsies ar sadaļu „Veikt vairāk”, kurā mēs piedāvājam apmācības, kas spēlēs ar horizontāliem izkārtojumiem, “elastīgiem” videoklipiem, nolaižamajām izvēlnēm un slaidu no augšas akordeona navigācijām, sīktēliem un lipīgu problēmu ar tabulām.
Bet vispirms…
Tālāk ir sniegts pārskats par divām apmācībām, kuras mūsu autori jau šonedēļ parādīja:
Atbildīga tīmekļa vietne Navigācija
Thoriq Firdaus - [Skatīt pamācību]
Lūk, apmācība, kas palīdzēs jums izveidot savu pašu atsaucīgo tīmekļa vietni. Viens no svarīgākajiem tīmekļa vietnes aspektiem ir tas, cik viegli ir pārvietoties pa dažādām vietnes daļām. Uzziniet, kā to optimizēt ar CSS3, izmantojot šo pamācību.
Atbildes reakcija
Jake Rocheleau - [Skatīt pamācību]
Ja esat tīmekļa profesionālis, un tiešsaistes atsākšana jau ir sava karjeras neatņemama sastāvdaļa, tad jums vajadzētu izmantot iespēju, lai atgrieztos, atsaucoties arī uz viņu. Padariet darba devējiem un klientiem vieglāk atrast jūs jebkurā ierīcē. Un, kamēr jūs esat pie tā, jūsu atsākt dubultojas kā portfelis tam, ko jūs varat darīt kā attīstītājs.
Ledus laušana
Tagad, kur mēs esam? Ak jā, sāksim dažas ledus laušanas darbības!
Iesācēja ceļvedis uz atsaucīgu Web dizainu
Autors: Nick Petit - [Skatīt pamācību]
Šī apmācība ir lielisks sākumpunkts iesācējiem, jo tā apraksta to, ko nozīmē interneta reaktīvais dizains, kā tas parādījās, kā arī skaidrojumi par šķidruma tīkliem un plašsaziņas līdzekļu vaicājumiem. Pārbaudiet arī apmācības apakšdaļā uzskaitītos resursus.
Ievads atsaucīgā tīmekļa dizainā: video
Autors: Nick Petit - [Skatīt pamācību]
Šī ir apmācība, kas ir gandrīz 9 minūšu garumā un kas skar to, kas ir atsaucīgs tīmekļa dizains, kā tas notika, kāda ir tās ietekme uz tīmekļa vietnes dizainu un kādi elementi ir saistīti ar atsaucīgu web dizaina izstrādi. . Ja jūs meklējat, lai saprastu to, ko atsaucīgs tīmekļa dizains nerodas, pirmkārt, jums vajadzētu sākt ar šo videoklipu.
Kā pārvērst jebkuru vietni par atsaucīgu vietni
Rochester Oliveira - [Skatīt pamācību]
Šī ir vēl viena apmācība, kas sākas no pamatiem, bet viss tiek pārtraukts pēc kārtas, ieskaitot operētājsistēmu un pārlūkprogrammas, kuras jūs pārveidojat par jūsu vietni, kā arī elementus, kurus ietekmē, kad vietne tiek skatīta no dažādām ierīcēm. Autors arī parādīja dažus noderīgus WordPress un jQuery spraudņus, lai atvieglotu jūsu darbu.
Reaģējošs dizains 3 soļos
Autors: Nick La - [Skatīt pamācību]
Šī apmācība izskaidros, kā jūs varat izveidot atsaucīgu tīmekļa dizainu ar meta tagiem, HTML struktūru un visiem svarīgākajiem mediju vaicājumiem. Jums ir nepieciešamas zināšanas par CSS, lai to saprastu ...
Projektēšana reaģējošam tīmeklim
Max Luzuriaga - [Skatīt pamācību]
Šeit ir raksts, kas nav tik daudz apmācības, jo tas ir ceļvedis, lai radītu atsaucīgu web dizainu. Tas nozīmē, ka autors burtiski stāsta jums par atsaucīgu web dizainu. Ir skaidrojumi par to, kāpēc dažas funkcijas nav pietiekami atsaucīgas, kā strādāt ar proporcijām un moduļiem, un vislabāk, tas ir salīdzinoši īss un viegli absorbējams.
Atsaucīgs Web dizains: vizuāls ceļvedis
Andrew Gormley - [Skatīt pamācību]
Ja teksta aizpildītās konsultācijas nav dzīvotspējīgas, izmēģiniet šo video pamācību. Tas joprojām ir diezgan tehnisks, bet, ja tas liek jums justies labāk, jums nav jādara daudz lasīšanas. Tas ir apmēram 25 minūšu garš, un video veidotājs faktiski ātri izlaida caur daļām, kurās viņš kodē, tad dodas atpakaļ, lai paskaidrotu, ko kodi dara.
Sākt ēku
Labi, sāksim veidot dažus atsaucīgus dizainus, sākot ar…
Šķidruma režģi
Ar Ethan Marcotte - [Skatīt pamācību]
Sakiet režģi, un jūs domājat, ka „stingras struktūras”, teiksim šķidrumu, un jūs domājat, ka tas varētu plūst no vienas ekrāna puses uz apakšējo vai augšējo vai pusi, kad lietojat spiedienu uz pārlūkprogrammu, bet ievietojiet šos abus kopā un jūs, iespējams, domājat, ka jums ir jāaplūko šī apmācība, lai pilnībā novērtētu, kā šķidruma tīkli var palīdzēt padarīt jūsu dizainu atsaucīgāku.
Šķidruma attēli
Ar Ethan Marcotte - [Skatīt pamācību]
Līdz šī raksta beigām jums jāzina, kurš ir Ethan Marcotte. Lūk, mājiens: viņš ir tāds, kurš nāca klajā ar koncepciju un termiņu, kas saistīts ar web atsaucīgiem dizainiem. Viņa vārds pavisam drīz parādīsies katrā citā apmācībā šajā sarakstā, tad kāpēc neņemt padomus par šķidruma attēliem tieši no paša Skolotāja?.
Mērogojamie navigācijas modeļi reaģējošā tīmekļa dizainā
Michael Mesker - [Skatīt pamācību]
Šī apmācība runā par mācībām, ko autors uzzinājis, strādājot ar liela mēroga atsaucīgu web dizaina projektu. Izlasiet viņa „padziļinājumu” par to, kā izveidot veidnes, kuras ir vieglāk konfigurēt lietotājam draudzīgiem un atsaucīgiem rezultātiem. Tas ir lielisks izskats, lai saprastu, kā veidot saskarnes vislabākajā darbvirsmas, planšetdatora un mobilā skatījuma veidā.
Reaģējošs Web dizains ar CSS3 mediju vaicājumiem
Autors: Nick La - [Skatīt pamācību]
Un vēl viena lieliska apmācība, lai jūs uzzinātu, kā veidot pārlūkprogrammas atsaucīgu tīmekļa veidni ar HTML5 un CSS3. Tā ir soli pa solim, un pirms un pēc multivides vaicājumu ieviešanas ir pieejami tīmekļa dizaina demonstrējumi, lai labāk novērtētu mediju vaicājumu ietekmi.
CSS efekti: atstāj attēlus, lai atbilstu teksta augstumam
Zoe Mickley Gillenwater - [Skatīt pamācību]
Šī apmācība ļauj jums uzzināt, kā fiksēto platumu attēli var mainīt to izmēru un atstarpi, lai sakārtotos ar pievienoto tekstu, neatkarīgi no tā, kā pārlūkprogrammas logs ir mainīts.
Adaptīvie izkārtojumi ar multivides vaicājumiem
Aaron Gustafson - [Skatīt pamācību]
Uzziniet, kā lietot adaptīvus vai elastīgus izkārtojumus ar CSS mediju vaicājumiem. Vienkārši izpildiet uzdevumu, lai uzzinātu, kā pielāgot savu dizainu divkāršā skata vai viena kolonnas skatījumam, kā arī sagatavot iPhone un iPad dizainu.
Reaģējošie attēli: eksperimentēšana ar kontekstu apzināmiem attēlu izmēriem
Scott Jehl - [Skatīt pamācību]
Lūk, apmācība, kurā izmantota pirmā pieeja no mobilās ierīces. Šī metode nosaka lielākus attēlus, kas jāizmanto lielākām ekrāna izšķirtspējām, mīnus attēlu pieprasījumi, kā arī UA sniffing.
Dari vairāk
Elastīgie videoklipi
Autors: Nick La - [Skatīt pamācību]
Šī apmācība attiecas uz videoklipu mērogošanu, jo pārlūkprogrammas logs ir mainīts. Tas būtībā ir CSS triks, un ir demo, lai redzētu triku darbā.
Attēlu slēpšana un atklāšana
Zoe Mickley Gillenwater - [Skatīt pamācību]
Apmācība ir faktiski ņemta no autora grāmatas, kurā aprakstīts, kā atklāt vai paslēpt attēlu daļas atkarībā no ekrāna izšķirtspējas. Tā māca, kā dinamiski apgriezt attēlus, kad mainās ekrāna izmērs, parādot tikai daļu no pilnā attēla, ja ir ierobežota vieta.
Atsaucīgs satura navigators ar CSS3
Ar Mary Lou - [Skatīt pamācību]
Vēlaties, lai lietotāji varētu orientēties jūsu pusē? Pēc tam izlasiet šo pamācību, lai uzzinātu, kā kodēt dažos atdzistos pārejos: izbalināt, slīdēt, rotēt un palielināt. Pārejas ir būtībā satura slāņi, kas tika parādīti vai slēpti ar konkrētu kodējumu.
Izveidojiet atsaucīgu Web dizaina veidni
Harijs Atkinss - [Skatīt pamācību]
Šī ir īsa apmācība, lai radītu atsaucīgu tīmekļa veidne kas darbojas gan darbvirsmā, gan iPhone.
Reaģējošs horizontālais izkārtojums
Ar Mary Lou - [Skatīt pamācību]
Šī apmācība parāda, kā izveidot horizontālu izkārtojumu ar vairākiem ritināmiem satura paneļiem. Lietošana Sugu izcelsme kā parauga tekstu, katras grāmatas nodaļas tiek atdalītas kolonnās, kas atrodas blakus viena otrai pilnas pārlūkprogrammas režīmā, bet, kad tās tiek samazinātas līdz pietiekami mazām, izkārtojums mainās uz pilnīgi vertikālu ritināšanas grāmatu.
Konvertējiet izvēlni uz mazajiem ekrāniem
Autors: Chris Coyier - [Skatīt pamācību]
Šī apmācība parādīs, kā pārvērst izvēlni uz nolaižamo sarakstu, kad pārlūkprogrammas logs ir šaurs, vai kad atrodaties mobilajā ierīcē. Lapas augšējā labajā stūrī esošo saites rindu pārvērš nolaižamajā izvēlnē, lai ietaupītu vietu, nezaudējot navigācijas iespējas.
Elastīgs slaids no augšas uz augšu
Ar Mary Lou - [Skatīt pamācību]
Uzziniet, kā izveidot vienkāršu un elastīgu akordeona izkārtojumu ar pārejām un regulējamiem platumiem, pamatojoties uz ekrāna izmēru un izšķirtspēju.
Kā izmantot CSS3 orientācijas multivides vaicājumus
Autors: Ryan Seddon - [Skatīt pamācību]
Pamatojoties uz vienkāršo noteikumu, kas nosaka portreta (augstums lielāks par platumu) un ainavas (platums lielāks par augstumu) režīmiem, varat rakstīt multivides vaicājumu, lai atlasītu konkrētus stilus, pamatojoties uz režīmu, kuru skatāt. Šī apmācība mums parādīs, kā to izdarīt, un tā tiek komplektēta ar saiti uz krāsu mainošu hameleonu, kas izmanto krāsu, lai pierādītu šīs izmaiņas, kad jūs saīsināt pārlūka logu.
Atsaucīgas datu tabulas
Autors: Chris Coyier - [Skatīt pamācību]
Tabulas ir galvassāpju avots, kad runa ir par maziem ekrāna izmēriem, bet tas nenozīmē, ka mums ir pilnībā jāizvairās no tabulām. Uzziniet, kā izmantot multivides vaicājumus, lai pilnībā mainītu tabulas formātu, kad pārslēdzaties uz mobilā ekrāna izmēriem. Skatiet demonstrāciju, lai iegūtu priekšstatu par burvību, ko varat veikt, pamatojoties uz šo pamācību.
Fluid CSS3 slīdrāde ar paralaksu
Pēc gredzena spārna - [Skatīt pamācību]
Izveidojiet CSS3 slaidrādi, kurā tiek izmantoti divi fona attēli un kad tiek mainītas fonu pozīcijas, parādās paralakses efekts. Bez tam, slaidrāde ir elastīga, mainot sevi kā pārlūkprogrammas logu.
Kā veidot atsaucīgu sīktēlu galeriju
Joshua Johnson - [Skatīt pamācību]
Tas ir lieliski piemērots tīmekļa vietnēm, kurās galerijā ir sīktēli. Tā kā pārlūkprogrammas logs ir mainīts, izkārtojums tiek mainīts, lai aizņemtu divas slejas (mazākus ekrāna izmērus) un piecas (maksimālās) kolonnas. Lai iegūtu vairāk līdzīgu slaidrādes un slīdņus, skatiet mūsu Top 10 Free Responsive attēlu galerijas / Slideshows rakstu.
Mobilo ierīču e-pasta optimizēšana
Autors: Ros Hodgekiss - [Skatīt pamācību]
Pat e-pastus var optimizēt, lai apskatītu mazo ekrānu, piemēram, kā tīmekļa vietnes. Lielāko daļu laika HTML e-pasta teksts tiek mainīts uz punktu, kas nav paredzēts ērtai lasīšanai; uzziniet, kā pārvaldīt šo un vairāk no šīs apmācības.
izmantojot sistēmas
Izveidojiet atsaucīgu mobilo draudzīgu tīmekļa vietni ar skeletu
Joshua Johnson - [Skatīt pamācību]
Skelets ir awesome sistēma, lai izveidotu atsaucīgas tīmekļa vietnes ar to. Šī apmācība jūs iepazīstina ar soli pa solim par to, kā izmantot skeleta sistēmu, lai izveidotu satriecošu atsaucīgu dizainu. Jūs būsiet apdullināti, lai redzētu, cik viegli ir īstenot.
Reaģējošs Web dizains ar HTML5 un mazāku ietvaru 3
Louis Simoneau - [Skatīt pamācību]
Ja neesat pareizi iepazīstinājis ar mazāk, tad vispirms pārbaudiet mūsu pašu mazāku CSS apmācību, lai iegūtu mazāku garšu. Šajā apmācībā tika izmantota Mazākā sistēma, lai skaidri redzētu mediju vaicājumu ietekmi.
Secinājums
Un tas beidzas ar mūsu Atsaucīgs Web dizains sērijas. Mēs ceram, ka šīs sērijas tēmas, rīki un citi resursi ir palīdzējuši mūsu lasītājiem reaģēt uz atsaucīgu web dizaina koncepciju. Bet kā mēs zinātu, ja jūs mums nenosaka?
Paziņojiet mums savas atsauksmes sērijā un ja jums ir ieteikumi vairāk ideju, ko vēlaties redzēt vietnē hongkiat.com. Nometiet mums rindu vai komentāru tālāk.
