Share
Tenzij u helemaal nieuw bent in de branche, of als u onder een steen heeft geleefd in de verre landen van een andere planeet, heeft u gehoord van responsief ontwerp. Zelfs als je het niet volledig begrijpt, zal het zeker iets zijn waar je op de een of andere manier tegen bent gekomen of op hebt gereageerd.
Kort gezegd, responsief webontwerp is de kunst van het ontwerpen van websites voor een veelheid aan schermformaten en apparaten, zodat er een optimale ervaring is voor elke gebruiker bij elke mogelijke grootte.
Responsief webdesign is op zijn best wanneer het apparaat agnostisch is; waarbij u niet wilt ontwerpen voor bepaalde resoluties of formaten, zoals alleen voor iPhone- of iPad-formaten. In plaats daarvan zou je moeten streven naar ontwerp met de inhoud en het ontwerp in gedachten en hoe deze inhoud stroomt en zich aanpast aan de verschillende omgevingen die het kan worden gezien of gebruikt in.
Vroeger moest je om toegang te krijgen tot het internet een (meestal zeer grote) computer proberen, waarbij de vertrouwde geluiden van de modem klonken terwijl je verbonden was. Je hebt nu echter toegang tot internet via computers, laptops, mobiele telefoons, smartphones, tablets, televisies, gameconsoles - de lijst voelt bijna eindeloos aan.
Responsive Web Design, geschreven door Ethan Marcotte en uitgegeven door A Book Apart, is een schitterende introductie tot de principes van Responsive Web Design. Nu, aan de ene kant is dit geweldig nieuws. Meer dan ooit tevoren kunnen we op elk gewenst moment of op elke gewenste plek op internet worden aangesloten. Hoewel dit als vanzelfsprekend wordt beschouwd, is het voor velen ook noodzakelijk. En met noodzaak en toegang worden we ook vaak geconfronteerd met ongeduld en de behoefte aan dingen om te werken en snel te werken.
Omdat responsieve websites veel meer mainstream worden, is zelfs het grote publiek (dus iedereen buiten het web en de creatieve industrie) er bijna van gaan verwachten wanneer ze op internet surfen. Dus al met al is responsief webdesign absoluut een groot ding.
Werken met responsief ontwerp is niet zonder uitdagingen. Allereerst zijn er zoveel verschillende apparaten en schermformaten waar we rekening mee moeten houden. Van extra grote tot grote schermen, van klein tot mid (en alles daartussenin), er is veel om over na te denken. En, zoals je ongetwijfeld al weet dat je een ontwikkelaar bent, kan het werken met responsief ontwerp van de technische kant van de dingen ook nachtmerries worden en extreem moeilijk te hanteren zijn.
De mediaqueri.es-website biedt veel inspiratie voor enkele eersteklas responsieve webontwerpen. Zoals bij elk project, zijn de belangrijkste dingen waar u aan moet denken bij responsief webontwerp de inhoud van de website, hoe deze inhoud in het ontwerp past en hoe de inhoud van pagina naar pagina stroomt. Je moet kijken hoe de verschillende ontwerpelementen die je hebt samenwerken en ervoor zorgen dat alles samenhangend en consistent aanvoelt.
Het verschil met responsief webontwerp is dat u ook moet nadenken over hoe dit alles van de ene grootte naar de andere werkt, of dat nu op basis van breedte of hoogte is. U moet goed nadenken over hoe dit zich vertaalt naar een kleiner of groter scherm en hoe al uw ontwerpelementen, uw inhoud en al het andere werken. U moet de ervaring consistent houden, ongeacht de grootte van de website.
Wij, als ontwerpers en ontwikkelaars in zo'n snelle industrie, hebben veel geluk. We gaan werken aan een aantal fantastische projecten en we gaan meestal altijd aan het werk in de voorhoede van nieuwe en opkomende technologieën. Werken met responsief webdesign is slechts een van die spannende dingen die we te doen krijgen, maar daarmee komt een prijs.
The Greenbelt Festival is een geweldig voorbeeld van responsief webdesign. Screenshots verstrekt met dank aan mediaqueri.es. Denk er eens over na
Aan het begin van elk ontwerpproject moet je proberen vast te stellen wat het is dat je klant uit het project wil halen en wat hij verwacht dat de uitkomsten zullen zijn. Het is moeilijk om de verwachtingen van uw klant te beheren, maar het is belangrijk dat u eraan blijft werken om ervoor te zorgen dat uw klanten uw proces volledig begrijpen.
Een mooi voorbeeld van responsief webdesign in actie is te zien op de Modern Green Home-website. Screenshots verstrekt met dank aan mediaqueri.es. Als het gaat om responsief webontwerp, en met name als ze naar je toe zijn gekomen met een van deze buzzwords, moet je proberen te helpen onderwijzen uw klanten. Deze buzzwords zijn vaak in het voorbijgaan gehoord of verkeerd weergegeven en het is aan u om ervoor te zorgen dat uw cliënt een goed begrip van het onderwerp heeft.
Soms kom je bijvoorbeeld zelfs potentiële klanten tegen die zeggen dat ze een website wilden die werkte op 'iPhone en iPad'. In dit geval zou ik zeggen: "Nou, dat is prima - maar wat geweldig zou zijn, is dat we ons in plaats daarvan kunnen concentreren op het creëren van een perfect reagerende website die zal werken aan ieder apparaat en niet alleen worden beperkt tot die twee. "Dat is een grote ijsbreker over het onderwerp en het is iets dat het voor u open laat om nader in de planningsstadia uit te leggen.
Als uw klant een responsief ontwerp goed begrijpt, stel ik me voor dat ze gelukkiger zullen zijn met het project.
De Stuff & Nonsense-website is een geweldig voorbeeld van responsief webdesign, waarbij ook verschillende illustraties op verschillende schermformaten worden geïntroduceerd. Screenshots verstrekt met dank aan mediaqueri.es. Als je de tijd neemt om de cliënt goed te onderwijzen, kan dit alleen maar in jouw voordeel werken. In mijn eigen werk probeer ik er bijvoorbeeld altijd voor te zorgen dat mijn cliënten het gevoel hebben dat ik werk met zij, eerder dan eenvoudig voor hen. Dit helpt het proces van werken met uw klanten te vereenvoudigen bij het ontwerpen voor het responsieve web.
Het is allemaal goed en wel dat ik het heb over waarom het belangrijk is om klanten voor te lichten en dingen te vertellen die je misschien al weet over responsief webdesign. Nu voor de eerlijkheid, waar ik je de beste manieren kan leren om responsieve websites te ontwerpen.
The Great Discontent staat bekend om hun interviews, en hun website is een geweldig voorbeeld van tijdschriftontwerp op het internet, maar ook een schitterend voorbeeld van responsief webontwerp. Screenshots verstrekt met dank aan mediaqueri.es. En het antwoord? Nou, helaas is er niet echt een correcte! Het spijt me als dat niet is wat je zocht, maar zoals je waarschijnlijk zult begrijpen met je ontwikkeling en codering, zijn de processen van iedereen anders en lijkt niemand op dezelfde manier te werken. Dit is op zijn eigen manier geweldig want het betekent dat we altijd nieuwe manieren van werken kunnen vinden.
Maakt u zich echter geen zorgen, ik ga u een aantal toptips geven voor het ontwerpen van responsieve websites die u vrij gemakkelijk kunt implementeren. Voel je vrij om uit al deze opties te kiezen en te combineren, en combineer ze waar je denkt dat het misschien op zijn plaats is. Ook experiment! Probeer heel veel verschillende manieren om responsieve websites te ontwerpen en te zien wat bij u past u het beste.
Het maken van een mockup voor een site met een statische breedte in Photoshop (of een andere grafische software) was de manier waarop de meeste mensen websites ontwierpen, en voor sommigen is dit nog steeds zo. Dat is absoluut goed! Als u vertrouwd bent met het gebruik van een grafische app om te ontwerpen hoe uw website er uitziet, dan is dat prima.
De UX London 2013-website is een mooi voorbeeld van ontwerp dat elegant van klein naar groot schaalt. Screenshots verstrekt met dank aan mediaqueri.es. Maar ga niet proberen om een mockup te ontwerpen voor elke resolutie of breedte; je zou gek worden en daar heel lang blijven. Denk in plaats daarvan terug aan het wireframing-artikel. Denk na over hoe we naar de contentstroom voor die wireframes keken en hoe we besloten dat alles zou moeten samenwerken. Probeer dit te vertalen naar uw ontwerpen en denk na over hoe die elementen zullen stromen en bewegen wanneer de schermgrootte verandert.
Sommige van deze veranderingen zullen groot zijn, en voor die dan kan het geschikt zijn om een kleine mockup te maken om dit te laten zien, maar voor alle andere veranderingen, zoals het aanpassen van de tekst, zou ik blijven kijken naar dit soort dingen in de browser zodra u begint met het coderen van prototypen. Als je liever een mockup ontwerpt voor elke belangrijke fase van je ontwerp, ga dan verder, wees je bewust van de tijd die dit toevoegt aan je project.
Nu, voor een beetje controverse. Misschien heb je van het geheel gehoord
De WWF-website is een prachtig voorbeeld van webdesign dat ook uitstekend reageert. Screenshots verstrekt met dank aan mediaqueri.es. Ontwerpen in de browser is wanneer je vanuit een draadframe-fase (als je dat hebt gedaan) rechtstreeks in de browser bent om de ontwerpfase te starten, in plaats van met grafische software te werken. Als u veel online hulpmiddelen gebruikt om u te helpen bij het maken van verschillende elementen van uw ontwerpstructuur (zoals het maken van rasters of het verfijnen van uw typografie), dan kan dit heel goed werken.
Veel ontwerpers kunnen echter het gevoel hebben dat ze moeite hebben met ontwerpen in de browser, vooral als ze meer een ontwerper zijn dan een codeur. De reden hiervoor is omdat ze vinden dat het hun creativiteit een beetje meer beperkt, waardoor het moeilijker wordt voor hen om te denken dat ze creatieve, unieke en visueel opwindende ideeën kunnen bedenken..
Het volgende web kan inhoud weergeven op een manier die gemakkelijk te verteren en te volgen is, zelfs tot kleine schermen. Screenshots verstrekt met dank aan mediaqueri.es. Maar als ontwikkelaar zul je waarschijnlijk uiterst comfortabel zijn met het gebruik van code en dus is het misschien een goed idee om te spelen met het proberen te ontwerpen in de browser en te zien met welke resultaten je komt.
Dit is waarschijnlijk mijn persoonlijke favoriet. beslissen in de browser betekent dat je een beetje werk kunt doen in grafische software en een beetje in de browser. Persoonlijk denk ik dat je geen beter resultaat kunt krijgen van hoe een ontwerp werkt totdat het in de browser zelf staat. Typografie wordt altijd anders weergegeven in grafische apps dan in de browser, en het is veel eenvoudiger om prototypen te maken en snel te doorlopen tijdens ontwerpstadia wanneer u zich in de browser bevindt (hoewel dat allemaal kan veranderen met de introductie van applicaties zoals
De Microsoft-website maakt op slimme wijze gebruik van bewegende inhoud en bijsnijdafbeeldingen, afhankelijk van de grootte van de viewport. Screenshots verstrekt met dank aan mediaqueri.es. Het werken met zowel een mix van mockups als browsergebaseerd werk betekent dat je heel veel flexibiliteit kunt geven aan je ontwerp en de beslissingen die je moet nemen. De sleutel tot deze term "beslissen in de browser" is echter met het eerste woord. Hoewel er veel belangrijke creatieve beslissingen kunnen worden genomen in de grafische software, is de browser waar uw uiteindelijke keuze kan worden gemaakt.
Wanneer ik op deze manier werk, merk ik dat ik vaak eindig met een mix van mockups, ontworpen patroonbibliotheken (in grafische software en in HTML & CSS) en volledige HTML & CSS-prototypen. Een mix is geweldig en het toont de evolutie van de website vanaf het begin tot en met wat hopelijk een volledige website begint te worden.
Ten eerste, als je nog niet hebt geleerd van mijn artikelen in het gedeelte 'Voordat je begint' - altijd, altijd, begin altijd aan je ontwerpen te werken - eerst. Dit betekent dat u ervoor zorgt dat u werkt met echte inhoud en de inhoud die is bedoeld voor gebruik op de website die u ontwerpt.
Philip House is een goed voorbeeld van hoe je lay-outs kunt verplaatsen en verplaatsen wanneer je werkt met responsieve webontwerpen. Screenshots verstrekt met dank aan mediaqueri.es. Ten tweede is het aan u om te beslissen of u eerst mobiel werkt (beginnend met kleinere lay-outs) of desktop-down (beginnend met bureaubladlay-outs op de volledige breedte). Er zijn online veel debatten over, maar dit is echt je eigen beslissing om te maken. Als je je meer creatief voelt, van een groter formaat naar een kleiner formaat, zelfs als je het op een andere manier bouwt, dan is dat prima. Zoals het tegenovergestelde doet en van klein naar groot gaat!
Laten we dingen inpakken met enkele nuttige bronnen. Er zijn zoveel tools beschikbaar die je kunnen helpen bij het ontwerpen van responsieve websites, kijk eens:
Accentsconagua