30 Utile Tutoriale Responsabil de Web Design
Așa că am ajuns la sfârșitul nostru "Săptămâna Responsabil Web Design", postul din această seară va fi ultima din serie. Vom face totul pentru a vă ajuta să vă îmbunătățiți abilitățile în manipularea acelor coduri pentru a răspunde la voință atunci când sunt afișate pe diferite dispozitive. Și pentru a face asta, noi oferim 30 Responsabil Tutoriale Web Design găsite online. Această listă nu este menită să fie una exhaustivă, dar vă va începe să înțelegeți elementele de bază ale proiectării unui site web adaptabil care să răspundă la tot felul de dimensiuni de ecran.
Vom începe cu tutoriale introductive în "Breaking the Ice", ceva de genul unei clase RWD: 101 pe care ar trebui să o urmați pentru a obține un aspect al conceptului înainte de a trece la exercițiile "Start Building".
În cele din urmă, vom termina cu o secțiune "Do More", în care vom include tutoriale care se joacă cu layout-uri orizontale, videoclipuri "elastice", meniuri drop-down și navigație acordeon slide-to-top, miniaturi și problema lipicioasă cu tabele.
Dar mai intai…
Iată o recapitulare a celor două tutoriale care au fost prezentate la începutul acestei săptămâni de către autori:
Site-ul navigativ responsabil
De Thoriq Firdaus - [Vezi tutorial]
Iată un tutorial care vă va ajuta să vă faceți propria navigare pe site-ul dvs. de reacție. Unul dintre aspectele cele mai importante ale unui site web este cât de ușor este să navigați prin diferite părți ale site-ului. Aflați cum să optimizați acest lucru cu CSS3 cu acest tutorial.
Răspundeți CV-ului
De Jake Rocheleau - [Vezi tutorial]
Dacă sunteți un profesionist web și un CV online este deja o parte integrantă a carierei dvs., atunci ar trebui să profitați de ocazie pentru a transforma și CV-ul receptiv. Facilitați angajatorilor și clienților să vă găsească pe orice dispozitiv. Și în timp ce sunteți la ea, CV-ul dvs se dublează ca un portofoliu de ceea ce puteți face ca dezvoltator.
Sparge gheata
Acum, unde eram noi? Ah, da, să începem să facem niște acțiuni de rupere de gheață!
Ghidul începătorului pentru un design web receptiv
De Nick Petit - [Vezi tutorial]
Acest tutorial este un bun punct de plecare pentru începători, deoarece descrie ce înseamnă designul web receptiv, cum a ieșit la lumină, precum și explicații despre grilele fluide și interogările media, printre altele. Consultați și resursele afișate în partea de jos a tutorialului.
Introducere în Design Web Responsabil: Video
De Nick Petit - [Vezi tutorial]
Acesta este un tutorial care are o lungime de aproape 9 minute, care scade suprafața a ceea ce este un design web receptiv, cum a ajuns, impactul pe care îl are asupra designului unui site web și ce elemente sunt implicate în producerea unui design web receptiv . Dacă sunteți în căutarea pentru a înțelege ceea ce design web responsiv este despre, fără a merge la codificare în primul rând, ar trebui să înceapă cu acest video.
Cum de a transforma orice site într-un site receptiv
De Rochester Oliveira - [Vezi tutorial]
Acesta este un alt tutorial care pornește de la elementele de bază, dar întrerupe totul în jos bit-by-bit, inclusiv sistemul de operare și browserele pe care le transformați site-ul dvs. receptiv, precum și elementele care sunt afectate atunci când site-ul este vizualizat de la diferite dispozitive. Autorul a prezentat, de asemenea, câteva pluginuri utile WordPress și jQuery pentru a vă ajuta munca mult mai ușoară.
Design receptiv în 3 pași
Prin Nick La - [Vezi tutorial]
Acest tutorial vă va explica modul în care puteți crea un design web receptiv cu meta tag-uri, structura HTML și interogările media importante. Aveți nevoie de câteva cunoștințe despre CSS pentru ao înțelege ...
Proiectarea pentru un web receptiv
De Max Luzuriaga - [Vezi tutorial]
Iată un articol care nu este atât de mult un tutorial, deoarece este un ghid pentru crearea unui design web receptiv. Acestea fiind spuse, autorul vă spune în mod literal ceea ce faceți și nu faceți design-ul web receptiv. Există explicații despre motivul pentru care anumite caracteristici nu sunt suficient de receptive, cum să lucrați cu proporții și module și, cel mai bine, este relativ scurt și ușor de absorbit.
Responsabil Web Design: Un ghid vizual
De Andrew Gormley - [Vezi tutorial]
Dacă tutorialele completate cu text nu sunt opțiuni viabile, încercați în schimb acest tutorial video. Este încă destul de tehnic, dar dacă te face să te simți mai bine, nu trebuie să faci multă lectură. Este de aproximativ 25 de minute lungi, iar producatorul video de fapt, fuga prin partile pe care le codifică, apoi se întoarce pentru a explica ce fac codurile.
Începeți construirea
Bine, să începem să construim câteva modele receptive, începând cu ...
Grile fluide
De Ethan Marcotte - [Vezi tutorial]
Spuneți grila, și ați crede că "structuri rigide", spuneți fluid și ați crede că ar putea curge dintr-o parte a ecranului până la partea de jos, partea superioară sau laterală atunci când aplicați presiune asupra browserului, dar le puneți împreună și probabil că ar trebui să te uiți la acest tutorial pentru a aprecia pe deplin modul în care grilele fluide pot contribui la îmbunătățirea receptivității designului.
Imagini fluide
De Ethan Marcotte - [Vezi tutorial]
Până la sfârșitul acestui articol, ar trebui să știți cine este Ethan Marcotte. Iată un indiciu: el este cel care a venit cu conceptul și termenul pentru desenele web receptive. Numele lui se va aprinde destul de mult în fiecare tutorial din această listă, de ce să nu te sfătuiți despre imagini fluide direct de la Maestrul însuși?.
Scalabil de navigare modele în design web responsiv
De Michael Mesker - [Vezi tutorial]
Acest tutorial discută despre lecțiile pe care le-a învățat autorul dintr-o lucrare pe un proiect de design web care răspunde la scară largă. Citeste "walkthrough" -ul despre cum sa creezi template-uri care sa fie mai usor de configurat pentru rezultate user-friendly si receptive. Este un aspect minunat în spatele scenei în înțelegerea modului de a proiecta interfețele în cel mai bun mod pentru vizualizările pe desktop, tablete și mobile.
Design Web Responsabil cu CSS3 Media Queries
Prin Nick La - [Vezi tutorial]
Și un alt tutorial excelent pentru a vă face să învățați cum să creați un șablon de site care să răspundă browserului încrucișat cu HTML5 și CSS3. Este o abordare pas cu pas și există demonstrații ale unui design web înainte și după ce au fost implementate interogările media pentru a aprecia mai bine impactul interogărilor media.
Efecte CSS: Imaginile spațiului afară pentru a corespunde înălțimii textului
De Zoe Mickley Gillenwater - [Vezi tutorial]
Acest tutorial vă face să învățați trucul de a face ca imaginile cu o lățime fixă să își schimbe dimensiunile și distanțele pentru a se alinia cu textul însoțitor, indiferent de modul în care este redimensionată fereastra browserului.
Modele adaptate cu interogări media
De Aaron Gustafson - [Vezi tutorial]
Aflați cum să utilizați machete adaptive sau flexibile cu interogări media CSS. Doar urmați exercițiul pentru a învăța să vă adaptați designul la vizualizarea în două coloane sau la o singură coloană, precum și să pregătiți designul pentru iPhone și iPad.
Imagini reactive: Experimentarea dimensiunii imaginii contextuale
De Scott Jehl - [Vezi tutorial]
Iată un tutorial care a folosit abordarea build-from-mobile-first. Această tehnică specifică o dimensiune mai mare pentru ca imaginile să poată fi utilizate la rezoluțiile mai mari ale ecranului, minus cererile de imagini, precum și sniffing UA.
Fa mai mult
Videoclipuri elastice
Prin Nick La - [Vezi tutorial]
Acest tutorial se ocupă de scalarea videoclipurilor pe măsură ce fereastra browserului dvs. este redimensionată. Este, în esență, un truc CSS și există un demo pentru a vedea trucul la lucru în tutorialul în sine.
Ascunderea și dezvăluirea porțiunilor imaginilor
De Zoe Mickley Gillenwater - [Vezi tutorial]
Tutorialul este de fapt preluat din cartea autorului, care descrie modul de descoperire sau ascundere a portiunilor de imagini in functie de rezolutiile ecranului. Acesta vă învață cum să decupați dinamic imaginile când se modifică dimensiunea ecranului, afișând numai o parte din imaginea completă atunci când există un spațiu limitat.
Navigator de conținut receptiv cu CSS3
De Mary Lou - [Vezi tutorial]
Preferați un mod mai cocos pentru utilizatori de a naviga în jurul dvs.? Apoi, ar trebui să citiți prin acest tutorial pentru a afla cum să codificați în unele tranziții reci: fade, diapozitive, rotații și scalare în sus. Tranzițiile sunt în esență straturi de conținut care au fost arătate sau ascunse cu codificare specifică.
Creați un șablon de design web responsiv
De Harry Atkins - [Vezi tutorial]
Acesta este un scurt tutorial pentru a produce un răspuns șablon web care funcționează atât pe desktop, cât și pe iPhone.
Responsabil aspect orizontal
De Mary Lou - [Vezi tutorial]
Acest tutorial vă învață cum să creați un aspect orizontal cu mai multe panouri de conținut scroll. Utilizarea Originea speciilor ca text eșantion, fiecare capitol al cărții este separat în coloane așezate unul lângă celălalt în modul full-browser, dar când este micșorat la suficient de mic, aspectul se schimbă într-o "carte".
Conversia unui meniu la o meniuri pentru ecranele mici
De Chris Coyier - [Vezi tutorial]
Acest tutorial vă va arăta cum să convertiți un meniu într-o listă derulantă când fereastra browserului este îngustă sau când vă aflați pe un dispozitiv mobil. Rândul de legături din colțul din dreapta sus al paginii devine convertit într-un meniu drop-down pentru a economisi spațiu fără a sacrifica opțiunile de navigare.
Flexibilă acordeon de tip slide-to-top
De Mary Lou - [Vezi tutorial]
Aflați cum să creați un layout simplu și flexibil de acordeon, cu tranziții de decolorare și lățimi reglabile în funcție de dimensiunea ecranului și de rezoluțiile.
Cum se utilizează interogările de orientare pentru CSS3
De Ryan Seddon - [Vezi tutorial]
Pe baza regulii simple care definește modurile portret (înălțime mai mare decât lățimea) și peisaj (lățimea mai mare decât înălțimea), puteți scrie o interogare media pentru a viza anumite stiluri în funcție de modul pe care îl vedeți. Acest tutorial ne va arăta cum să facem acest lucru și vine complet cu un link către un chameleon care schimbă culoarea care folosește culoarea pentru a demonstra această schimbare pe măsură ce vă micșorează fereastra browserului.
Tabele de date receptive
De Chris Coyier - [Vezi tutorial]
Tabelele sunt o sursă de dureri de cap atunci când vine vorba de dimensiuni mici ale ecranului, dar asta nu înseamnă că trebuie să evităm complet tabelele. Aflați cum să utilizați interogările media pentru a face complet formatele de schimbare a tabelului atunci când treceți la dimensiunile ecranului mobil. Vizualizați demo-ul pentru a obține o idee despre magia pe care o puteți face pe baza acestui tutorial.
Fluid CSS3 Slideshow cu efecte Parallax
Prin Ring Wing - [Vezi tutorial]
Creați o prezentare de diapozitive CSS3 în care sunt utilizate două imagini de fundal și când se schimbă pozițiile fundalurilor, se observă un efect de parallax. În afară de aceasta, prezentarea de diapozitive este flexibilă, redimensionându-se pe măsură ce fereastra browserului se închide.
Cum se construiește o galerie miniaturală responsabilă
De Joshua Johnson - [Vezi tutorial]
Acest lucru este grozav pentru site-urile care conțin miniaturi într-o galerie. Pe măsură ce fereastra browserului este redimensionată, aspectul este modificat pentru a ocupa între două coloane (dimensiuni ecran mai mici) și cinci (maxim) coloane. Pentru mai multe prezentări și slideshow-uri similare, consultați Top 10 Galeri de Imagini Galerii Respondente / Slideshow-uri.
Optimizarea e-mailului pentru dispozitive mobile
De Ros Hodgekiss - [Vezi tutorial]
Chiar și e-mailurile pot fi optimizate pentru vizualizarea pe ecran mic, cum ar fi modul în care sunt site-urile web. De cele mai multe ori, textul dintr-un e-mail HTML este redimensionat până la un punct care nu este făcut pentru o citire confortabilă; aflați cum să gestionați acest lucru și mai mult din acest tutorial.
folosind cadre
Construiți un site web prietenos pentru mobil cu schelet
De Joshua Johnson - [Vezi tutorial]
Scheletul este un cadru minunat pentru a construi site-uri responsabile cu acesta. Acest tutorial vă va duce într-un ghid pas cu pas despre cum să utilizați scheletul de schelet pentru a construi modele minunate receptive. Veți fi uimiți să vedeți cât de ușor este să puneți în aplicare.
Design Web Responsabil cu HTML5 și Cadru Mai mic 3
De Louis Simoneau - [Vezi tutorial]
Dacă nu ați fost introdus corect în Less, atunci faceți mai întâi tutorialul nostru mai puțin CSS pentru a obține un gust mai mic. În acest tutorial, cadrul Less a fost folosit pentru a vă permite să vedeți în mod clar efectele interogărilor media.
Concluzie
Și asta ne încheie Responsabil Web Design serie. Sperăm că temele, instrumentele și alte resurse prezentate în această serie au ajutat la expunerea conceptului de design web receptiv la cititorii noștri. Dar cum să știm dacă nu ne spuneți?
Spuneți-ne feedbackul dvs. pe serie și dacă aveți sugestii pentru mai multe idei pe care doriți să le vedeți la hongkiat.com. Aruncați o linie sau un comentariu de mai jos.
