30 nuttige interactieve webontwerp-zelfstudies
Dus we zijn aan het einde van onze "Responsive Web Design-week", het bericht van vanavond is de laatste van de reeks. We doen er alles aan om je te helpen bij het manipuleren van die codes om naar believen te reageren wanneer ze op verschillende apparaten worden weergegeven. En om dit te doen, zijn we bezig met 30 Responsive Web Design-zelfstudies online gevonden. Deze lijst is niet uitputtend, maar je begint met het begrijpen van de basisprincipes van het ontwerpen van een adaptieve website die geschikt is voor alle soorten schermformaten..
We beginnen met inleidende tutorials in 'Breaking the Ice', zoiets als een RWD: 101-klasse die je moet bijwonen om het concept onder de knie te krijgen voordat we verder gaan met 'Start Building'-oefeningen.
Ten slotte eindigen we met een gedeelte 'Meer doen' waarin we tutorials zullen bespreken die spelen met horizontale lay-outs, 'elastische' video's, vervolgkeuzemenu's en slide-to-top-accordeon-navigatie, miniaturen en het plakkerige probleem met tabellen.
Maar eerst…
Hier is een samenvatting van de twee tutorials die eerder deze week door onze auteurs werden besproken:
Responsieve website navigatie
Van Thoriq Firdaus - [Bekijk tutorial]
Hier is een tutorial om u te helpen uw eigen responsieve websitenavigatie te maken. Een van de belangrijkste aspecten van een website is hoe gemakkelijk het is om door verschillende delen van de site te navigeren. Ontdek hoe je dit met CSS3 kunt optimaliseren met deze tutorial.
Responsive Resume
Van Jake Rocheleau - [Bekijk tutorial]
Als u een webprofessional bent en een online cv een vast onderdeel is van uw carrière, moet u van de gelegenheid gebruik maken om dat cv ook reactief te maken. Maak het voor werkgevers en klanten gemakkelijker om u op elk apparaat te vinden. En terwijl je bezig bent, wordt je eigen CV ook een portfolio van wat je als ontwikkelaar kunt doen.
Het ijs breken
Waar waren we? Ah ja, laten we wat ijsbrekende actie starten!
Beginnersgids voor responsief webontwerp
Door Nick Petit - [Bekijk tutorial]
Deze tutorial is een goed startpunt voor beginners omdat het beschrijft wat web responsive design betekent, hoe het aan het licht kwam, maar ook uitleg over onder andere vloeistofrasters en media-queries. Bekijk ook de bronnen die onderaan de tutorial staan vermeld.
Introductie van Responsive Web Design: video
Door Nick Petit - [Bekijk tutorial]
Dit is een tutorial van bijna 9 minuten die het oppervlak bedekt van wat responsive webdesign inhoudt, hoe het tot stand kwam, de impact die het heeft op het ontwerp van een website en welke elementen betrokken zijn bij het produceren van een responsief webontwerp . Als je wilt begrijpen wat een responsief webontwerp inhoudt, maar niet eerst coderen, begin je met deze video.
Hoe u van elke website een responsieve site maakt
Van Rochester Oliveira - [Bekijk tutorial]
Dit is een andere zelfstudie die begint met de basis, maar die alles stukje bij beetje doorbreekt, inclusief het besturingssysteem en de browsers waarop u uw website reactief maakt, evenals de elementen die worden beïnvloed wanneer de website vanaf verschillende apparaten wordt bekeken. De auteur heeft ook een aantal nuttige WordPress- en jQuery-plug-ins gebruikt om uw werk veel gemakkelijker te maken.
Responsief ontwerp in 3 stappen
Door Nick La - [Bekijk tutorial]
In deze zelfstudie wordt uitgelegd hoe u een responsief webontwerp kunt produceren met metatags, HTML-structuur en de allerbelangrijkste mediaquery's. Je hebt enige kennis van CSS nodig om het te begrijpen ...
Ontwerpen voor een responsief web
Van Max Luzuriaga - [Bekijk tutorial]
Hier is een artikel dat niet zozeer een tutorial is, maar een handleiding voor het creëren van responsief webontwerp. Dat gezegd hebbende, de auteur vertelt je letterlijk de do's en don'ts van responsive webdesign. Er zijn verklaringen waarom bepaalde functies niet responsief genoeg zijn, hoe te werken met verhoudingen en modules, en het beste van alles is dat het relatief kort is en gemakkelijk te absorberen is..
Responsive Web Design: een visuele gids
Door Andrew Gormley - [Bekijk tutorial]
Als met tekst gevulde zelfstudies geen haalbare opties zijn, kunt u deze videozelfstudie proberen. Het is nog steeds nogal technisch, maar als je je er beter door voelt, hoef je niet veel te lezen. Het is ongeveer 25 minuten lang en de videomaker is snel door de delen gegaan waar hij codeert en gaat vervolgens terug om uit te leggen wat de codes doen.
Begin met bouwen
Oké, laten we beginnen met het bouwen van enkele responsieve ontwerpen, te beginnen met ...
Vloeiende roosters
Door Ethan Marcotte - [Bekijk tutorial]
Zeg raster en je zou 'rigide structuren' denken, zeg vloeiend en je zou denken dat het van de ene kant van het scherm naar de onderkant of bovenkant of zijkant zou kunnen stromen als je druk uitoefent op de browser, maar zet die twee samen en je zou waarschijnlijk denken dat je naar deze tutorial moet kijken om volledig te beseffen hoe vloeibare rasters kunnen helpen om je ontwerp responsiever te maken.
Vloeiende afbeeldingen
Door Ethan Marcotte - [Bekijk tutorial]
Aan het einde van dit artikel zou u moeten weten wie Ethan Marcotte is. Hier is een hint: hij is degene die het concept en de term heeft bedacht voor webgevoelige ontwerpen. Zijn naam zal vrijwel overal in elke andere tutorial in deze lijst verschijnen, dus waarom zou je geen advies over vloeiende beelden rechtstreeks van de meester zelf nemen?.
Schaalbare navigatiepatronen in responsief webontwerp
Door Michael Mesker - [Bekijk tutorial]
Deze tutorial gaat over de lessen die de auteur heeft geleerd van het werken aan een grootschalig responsief webontwerpproject. Lees zijn 'walkthrough' over hoe u sjablonen kunt maken die gemakkelijker te configureren zijn voor gebruikersvriendelijke en responsieve resultaten. Het is een geweldige blik achter de schermen om te begrijpen hoe je interfaces op de beste manier kunt ontwerpen voor bureaublad-, tablet- en mobiele weergaven.
Responsive Web Design met CSS3 Media Queries
Door Nick La - [Bekijk tutorial]
En nog een uitstekende tutorial om u te laten leren hoe u een websjabloon met verschillende browsers ontwerpt met HTML5 en CSS3. Het is een stapsgewijze aanpak en er zijn demo's van een webontwerp voor en na de mediaquery's om de impact van mediaquery's beter te kunnen beoordelen..
CSS-effecten: spaties komen overeen met de teksthoogte
Door Zoe Mickley Gillenwater - [Bekijk tutorial]
In deze zelfstudie leer je de truc van het maken van afbeeldingen met een vaste breedte die hun grootte en tussenafstand wijzigen om op één lijn te komen met de begeleidende tekst, ongeacht hoe het browservenster wordt vergroot of verkleind.
Adaptieve lay-outs met mediaquery's
Door Aaron Gustafson - [Bekijk tutorial]
Leer hoe u adaptieve of flexibele lay-outs kunt gebruiken met CSS-mediaquery's. Volg gewoon de oefening om te leren om uw ontwerp aan te passen aan een weergave met dubbele kolom of één kolom en om het ontwerp voor de iPhone en iPad voor te bereiden.
Responsieve beelden: experimenteren met contextafhankelijke beeldafstemming
Door Scott Jehl - [Bekijk tutorial]
Hier is een tutorial die de build-from-mobile-first aanpak heeft gebruikt. Deze techniek specificeert een grotere grootte voor de afbeeldingen om te gebruiken bij grotere schermresoluties, minus beeldverzoeken en UA-sniffing.
Meer doen
Elastische video's
Door Nick La - [Bekijk tutorial]
Deze zelfstudie behandelt het schalen van video's terwijl het formaat van je browservenster wordt gewijzigd. Het is in wezen een CSS-truc en er is een demo om de truc aan het werk te zien in de zelfstudie.
Verbergen en onthullende gedeelten van afbeeldingen
Door Zoe Mickley Gillenwater - [Bekijk tutorial]
De zelfstudie is afkomstig uit het boek van de auteur waarin wordt beschreven hoe delen van afbeeldingen kunnen worden onthuld of verborgen, afhankelijk van de schermresoluties. U leert hoe u afbeeldingen dynamisch bijsnijdt wanneer de schermgrootte verandert, zodat u slechts een deel van het volledige beeld kunt zien wanneer er weinig ruimte is.
Responsive Content Navigator met CSS3
Door Mary Lou - [Bekijk tutorial]
Liever een betere manier voor gebruikers om rond uw kant te navigeren? Vervolgens zou je deze tutorial moeten lezen om te leren hoe je een aantal coole overgangen kunt coderen: fade-in, dia's, rotaties en opschalen. De overgangen zijn in wezen inhoudlagen die met specifieke codering zijn weergegeven of verborgen.
Maak een responsieve webontwerpsjabloon
Door Harry Atkins - [Bekijk tutorial]
Dit is een korte tutorial om een responsive te produceren websjabloon dat werkt zowel op de desktop als op de iPhone.
Responsieve horizontale lay-out
Door Mary Lou - [Bekijk tutorial]
In deze zelfstudie leer je hoe je een horizontale lay-out kunt maken met verschillende schuifbare inhoudspanelen. Gebruik makend van Het ontstaan van soorten als de voorbeeldtekst wordt elk hoofdstuk van het boek gescheiden in kolommen die naast elkaar in de volledige browsermodus worden geplaatst, maar wanneer deze verkleind wordt tot klein genoeg, verandert de lay-out in een volledig verticaal scrollend 'boek'.
Een menu naar een vervolgkeuzemenu voor kleine schermen converteren
Van Chris Coyier - [Bekijk tutorial]
In deze zelfstudie leert u hoe u een menu converteert naar een vervolgkeuzelijst wanneer het browservenster smal is of wanneer u op een mobiel apparaat bent. De rij links in de rechterbovenhoek van de pagina wordt geconverteerd naar een vervolgkeuzemenu om ruimte te besparen zonder de navigatie-opties te hoeven opofferen.
Flexibele Slide-to-Top-accordeon
Door Mary Lou - [Bekijk tutorial]
Leer hoe u een eenvoudige en flexibele accordeon-lay-out kunt maken, met fade-in overgangen en instelbare breedtes op basis van schermgrootte en resoluties.
Hoe CSS3 Orientation Media Queries te gebruiken
Door Ryan Seddon - [Bekijk tutorial]
Op basis van de eenvoudige regel die de modi portret (hoogte groter dan breedte) en liggend (breedte groter dan hoogte) definieert, kunt u een mediaquery schrijven om specifieke stijlen te targeten op basis van de modus waarin u deze bekijkt. Deze tutorial zal ons laten zien hoe precies dat te doen en het wordt compleet geleverd met een link naar een kleur veranderende kameleon die kleur gebruikt om deze verandering te demonstreren terwijl je het browservenster verkleint.
Responsieve datatabellen
Van Chris Coyier - [Bekijk tutorial]
Tafels zijn een bron van hoofdpijn als het gaat om kleine schermafmetingen, maar dat betekent niet dat we tabellen volledig moeten vermijden. Ontdek hoe u mediaquery's gebruikt om uw tabel de indelingen volledig te maken wanneer u overschakelt naar mobiele schermformaten. Bekijk de demo om een idee te krijgen van de magie die je kunt maken op basis van deze tutorial.
Fluid CSS3 Slideshow met Parallax-effect
Van Ring Wing - [Bekijk tutorial]
Maak een CSS3-diavoorstelling waarbij twee achtergrondafbeeldingen worden gebruikt en wanneer de posities van de achtergronden worden gewijzigd, wordt een parallax-effect waargenomen. Afgezien daarvan is de diavoorstelling flexibel, zelfaanpassend terwijl het browservenster erin wordt gesloten.
Hoe een Responsive Thumbnail Gallery te bouwen
Van Joshua Johnson - [Bekijk tutorial]
Dit is geweldig voor websites met miniaturen in een galerij. Naarmate het formaat van het browservenster verandert, wordt de opmaak gewijzigd tussen twee kolommen (kleinere schermformaten) en vijf (maximum) kolommen. Bekijk voor meer vergelijkbare diavoorstellingen en schuifregelaars ons Top 10 Gratis Responsive Image Galleries / Slideshows-artikel.
Optimaliseer uw e-mail voor mobiele apparaten
Van Ros Hodgekiss - [Bekijk tutorial]
Zelfs e-mails kunnen worden geoptimaliseerd voor weergave op een klein scherm, zoals hoe websites zijn. Meestal wordt de tekst in een HTML-e-mail verkleind tot een punt dat niet is gemaakt voor comfortabel lezen; leer hoe u dit en meer kunt beheren in deze zelfstudie.
met behulp van frameworks
Bouw een responsieve mobielvriendelijke website met skelet
Van Joshua Johnson - [Bekijk tutorial]
Skeleton is een geweldig framework om hierop responsieve websites te bouwen. Deze tutorial neemt je stap voor stap mee in het gebruik van Skeleton framework om geweldige responsieve ontwerpen te maken. U zult verbluft zijn om te zien hoe gemakkelijk het is om het te implementeren.
Responsive Web Design met HTML5 & minder framework 3
Door Louis Simoneau - [Bekijk tutorial]
Als u niet op de juiste manier kennis heeft gemaakt met Less, bekijk dan eerst onze eigen Less CSS-tutorial om Less te leren kennen. In deze zelfstudie werd het Less-kader gebruikt om u duidelijk de effecten van mediaquery's te laten zien.
Conclusie
En daarmee is onze conclusie getrokken Responsive Web Design serie. We hopen dat de thema's, hulpprogramma's en andere bronnen in deze serie hebben geholpen het concept van responsief webontwerp aan onze lezers bloot te stellen. Maar hoe zouden we weten of u het ons niet vertelt??
Laat ons uw feedback weten over de serie en als je suggesties hebt voor meer ideeën die je wilt zien op hongkiat.com. Stuur ons een bericht of een opmerking hieronder.
