Share
Het internet zoals we het kennen, is aan het veranderen. In het verleden hoefden ontwerpers en ontwikkelaars zich slechts bezig te houden met één medium: het computerscherm. In de afgelopen jaren is er echter een overvloed aan volledig internet geschikte apparaten met veel verschillende vormen en mogelijkheden opgedoken, wat betekent dat we nu onze websites moeten ontwerpen om comfortabel te passen in zoveel schermafmetingen, vormen en resoluties als je kunt denk aan.
Onze oude lay-outbenadering met vaste breedte is nu uitgesloten. Dus wat doen we? Het antwoord, beste lezer, ligt bij Responsive Web Design.
Het idee van Responsive Web Design, een term bedacht door Ethan Marcotte, is dat onze websites hun lay-out en ontwerp moeten aanpassen aan elk apparaat dat ervoor kiest om het weer te geven.
In zijn boek, de toepasselijke titel "Responsive Web Design", schetst hij de drie delen van een responsieve website:
Omdat dit artikel is bedoeld voor ontwerpers niet ontwikkelaars, en omdat ik inhoudelijk niet op Ethan's tenen sta, zal ik deze drie dingen niet bespreken.
Het is echter belangrijk voor u, als ontwerper, om de basisbegrippen van RWD te begrijpen, zodat u beter websites kunt ontwerpen die reageren als ze worden gecodeerd. Ik raad u ten zeerste aan om deze drie artikelen van Ethan te lezen: Fluid Grids, Fluid Images en Responsive Web Design.
Als je er slechts één van leest, maak er dan de laatste van, geschreven in mei van vorig jaar. Het lezen veranderde de manier waarop ik, en ik vermoed dat veel anderen zoals ik, het internet zien. Ethan's werk is niets minder dan geniaal, en ik vind dat iedereen die van internet verdient, dit artikel moet lezen.
Als u een ontwerper bent die enkel en alleen ontwerpen, wat betekent dat u niet verantwoordelijk bent voor de HTML en CSS van de site waarop u werkt, een groot deel hiervan gaat misschien gewoon over uw hoofd. U vraagt zich misschien zelfs af waarom u precies moet weten over Responsive Web Design.
Ik heb altijd geloofd dat iedereen die een website ontwerpt degene moet zijn die er later het leven in blaast, via HTML en CSS. Ik begrijp dat dit duidelijk niet het geval is voor veel projecten, en ik zou iemands capaciteiten respecteren als ze dat zouden willen enkel en alleen stel het ontwerp samen of enkel en alleen schrijf de code.
Het is belangrijk om te begrijpen dat een website niet de een of de ander is, het is een combinatie van zowel ontwerp als code, die elk van elkaar afhankelijk zijn om een naadloze ervaring te creëren. Om echt te leren hoe je een website ontwerpt, jij moet begrijp hoe het ontwerp later in code zal worden geïmplementeerd, zelfs als het slechts een rudimentair begrip is.
Ik zal je er nog een keer aan herinneren: dit artikel is voor ontwerpers. In de komende paragrafen zal ik precies bespreken hoe we als ontwerpers de manier waarop we ontwerpen moeten aanpassen om beter bij het proces van responsief webontwerp te passen.
Zelfs als u niet ontwerpt voor Responsive Web Design, moet u ontwerpen met een of ander rastersysteem. Omdat de moderne, ontwikkelde ontwerper dat is, zou je al een goed begrip moeten hebben van wat het betekent om een raster te gebruiken, dus ik zal de frilly-bits overslaan.
Een van de pijlers van Responsive Web Design is The Fluid Grid. In wezen betekent dit dat uw raster, traditioneel gemeten in pixels, nu moet worden beschouwd als percentage van de totale paginabreedte. De werkelijke berekende breedte van elke kolom in een responsieve website verandert elke keer dat het browservenster van grootte verandert en kan niet gegarandeerd worden dat dit hetzelfde is op verschillende apparaten.
Dit is waarom jij moet gebruik een raster bij het ontwerpen voor Responsive Web Design. Het is een noodzaak, geen aardigheid. U kan niet maak een responsieve website zonder een op rasters gebaseerd ontwerp; het is gewoon uitgesloten, het zou niet werken.
Wetende dat uw ontwerp niet exact dezelfde pixelgrootte zal hebben voor elke kolom als in uw ontwerpcompet, zijn er een paar andere maatregelen die u zou moeten nemen om ervoor te zorgen dat uw rooster zonder probleem wordt geschaald.
Probeer af te zien van het gebruik van getextureerde randen in uw kolommen, zoals dit:
Dit soort dingen zouden moeilijk zijn voor uw ontwikkelaars om te gebruiken in een responsieve website, omdat ze niet goed horizontaal zouden schalen. Als u de kolom breder of dunner maakt, zouden de randen met de textuur moeite hebben.
Horizontale hellingen zijn een andere no-go.
Om dezelfde reden als het vorige punt, namelijk het onvermogen om horizontaal te schalen, doe dit niet. Ja, het is mogelijk met nieuwe CSS3-eigenschappen, maar als u een publiek van minder tech-savvy-gebruikers target, hebben velen geen compatibele browser en is het effect nutteloos.
Als u een gestructureerde achtergrond in een kolom hebt, zorg dan dat deze er een is die gemakkelijk kan worden betegeld. Do: gebruik graan, grunge, wat dan ook. Niet doen: gebruik een foto, illustratie of anderszins onzichtbare afbeelding.
Bij het schalen van je ontwerp horizontaal naar kleinere schermen, zal er een punt komen waarop sommige tekst op de pagina gewoon te groot zal zijn. Natuurlijk, die 100pt kop ziet er geweldig uit in je psd, maar het werkt gewoon niet op een iPhone-scherm, bijvoorbeeld: het zal te groot zijn en de tekst zal over meerdere regels moeten worden ingepakt, waardoor de impact van je oorspronkelijke beslissing wordt verminderd.
Hier zal de ontwikkelaar, met behulp van CSS-mediaquery's, de lettergrootte aanpassen om beter bij het scherm te passen. Dit is een ontwerpbeslissing, dus als ontwerper zou je er iets mee moeten zeggen?
Om de ontwikkelaar te helpen en om de integriteit van uw oorspronkelijke ontwerp te behouden, moet u beslissen welke tekst op de pagina constant moet blijven, dat wil zeggen dezelfde grootte moet blijven bij elke schermbreedte en welke tekst moet worden aangepast. Een goed voorbeeld van de tekst met constante afmetingen is een kopie van het hoofdgedeelte of kleine kopteksten die fungeren als een grotere versie van de kopie van het hoofdgedeelte.
U moet ook beslissen over de tekst die zal worden aangepast, hoe het moet worden aangepast.
Hier is de fout manier om het te doen: X moet altijd 20pt groter zijn dan Y. Dit denken is niet alleen een groot gedoe voor de ontwikkelaar, het is ook niet logisch in het responsieve canvas, omdat je een constante factor invoert, een waarde die nooit zal veranderen, ongeacht de schermgrootte. Voor RWD is dit een grote fout, omdat het niet goed rekening houdt met de inherente vloeibaarheid van het web.
Hier is de rechts manier om het te doen: X moet altijd 1,5 keer zo groot zijn als Y. Op deze manier accepteert dat de enige waar wat betekent dat een ontwerp geen lettergrootte heeft, is hoe groot of klein de tekst is vergeleken met de andere tekst op de pagina. Een constante waarde, zoals 24pt of 67pt, is zinloos.
Zodra u dit allemaal hebt bedacht, moet u deze informatie aan de ontwikkelaar overbrengen. Dat is de enige manier om ervoor te zorgen dat uw beslissingen, zoals de ontwerper, worden weergegeven op de daadwerkelijke webpagina die kijkers in hun browser laden en genieten.
Het laatste stukje in de responsieve puzzel is Media Queries. In het geval dat u onbekend bent, zijn mediaquery's een manier om CSS-regels op de pagina toe te passen op basis van (voor onze doeleinden) de grootte van de weergavebrowser.
De ongelooflijke kracht hiervan is dat je de volledige lay-out van je website aan kunt passen en zelfs opnieuw kunt ontwerpen zodat deze in een kleinere of grotere browser past dan degene waarvoor je oorspronkelijk hebt ontworpen.
Om het beste te ontwerpen voor deze mogelijkheid, moet je beginnen na te denken over de verschillende delen van je ontwerp, zoals hoofdinhoud, zijbalk, koptekst en navigatie, niet als stukjes van een puzzel die op dezelfde plek ten opzichte van elkaar moeten blijven , maar als modules die kan worden geherorganiseerd, opnieuw worden bemeten en geschud zonder dat hun oorspronkelijke betekenis verloren gaat.
Hier is een voorbeeld: stel je voor dat je een website ontwerpt die er zo uitziet (ik weet zeker dat je eerder met vergelijkbare lay-outs hebt gewerkt):
Het cruciale onderdeel van dit voorbeeld is de identificatie van groepen elementen die samen moeten blijven ieder lay-out. Alle navigatielinks moeten bijvoorbeeld bij elkaar blijven, omdat ze anders niet kloppen. Dit is een module, een gedeelte van informatie dat kan worden verplaatst tussen de andere modules zonder de betekenis te verliezen.
Door uw site te bouwen met deze modules in gedachten, kunt u zich gemakkelijk voorstellen hoe uw lay-out zich aanpast aan de verschillende viewport-grootten. Bijvoorbeeld:
Zie hoe de modules zich op verschillende plaatsen bevinden, maar nog steeds dezelfde informatie weergeven als het origineel, alleen in een vorm die gemakkelijker verteerd kan worden door mobiele apparaten of andere browsers van verschillende grootte.
Je lay-out hoeft niets te veranderen om deze modulariteit te laten werken, het is gewoon een andere manier om naar dezelfde afbeelding te kijken. Hopelijk helpt dit nieuwe perspectief u weloverwogen beslissingen te nemen terwijl u aan uw toekomstige ontwerpprojecten werkt.
Zoals zo veel op internet, is Responsive Web Design evolutionair, niet revolutionair. Het is gewoon de natuurlijke volgende stap voor het web, niet een volledige heroverweging van alles. Als ontwerpers moeten we onze workflows voortdurend aanpassen en deze tijd is niet anders.
Responsive Web Design is de toekomst, of tenminste, het zal zijn wanneer ontwikkelaars en ontwerpers het omarmen. Als webdesigners en -ontwikkelaars zijn wij de enigen die de kracht hebben om deze prachtige nieuwe standaard te verwezenlijken. Laat het gebeuren, voor jou, voor mij, voor het internet als geheel!
Accentsconagua