Denk aan de goede oude tijd? Je weet op welke dagen ik het heb; de dagen niet zo lang geleden toen we websites ontwerpen op vaste breedtes. Als ze nu terugkijken, lijken ze zo'n eenvoudiger tijd; een gelukkiger tijd; een tijd waarin ik elk lettertype kon reciteren dat beschikbaar was om online te gebruiken zonder erover na te denken. De waarheid is dat Responsive Web Design alles heeft veranderd. De wereld was plat en nu is het rond, ik was blind en nu zie ik dat het web pixels was en nu zijn het percentages.
Met de introductie van RWD is het essentieel dat wij als ontwerpers onze workflow evolueren om beter aan te sluiten op de eisen van het nieuwe web. Velen van ons hebben onze frustraties geuit over hoe de vaste pixelaanpak van Photoshop niet geschikt is voor het ontwerpen van de vloeistoflay-outs die nodig zijn voor een responsieve website, maar er zijn geen bruikbare alternatieven geboden. De webontwerpwereld is wanhopig op zoek naar op maat gemaakte software die vanaf de basis is opgebouwd met RWD in gedachten. Producten zoals Adobe Reflow zijn een goed begin, omdat het aantoont dat Adobe op zijn minst aan een oplossing werkt, maar na een paar uur ermee door gegaan te hebben in het weekend, kan ik zien dat er nog een lange weg te gaan is voordat het een nuttige aanvulling op mijn workflow. Nu we ons in het ongewisse bevinden tussen een pre-historische software en de belofte van wat er morgen gaat gebeuren, moeten we alternatieve workflows creëren om de tekortkomingen van onze huidige 'ontwerpsoftware' op te vangen door andere tools en procedures in te voeren die de kloof helpen overbruggen. tussen vaste pixel en vloeistofrespons.
Het volgende is geenszins een lijst van hoe RWD-projecten moeten worden benaderd, maar eerder hoe ik mijn workflow heb aangepast aan het nieuwe landschap.
Ik heb op de grens tussen de verdraaiing van Photoshop / Fireworks / Illustrator gestaan omdat ze hebben gestreden voor suprematie en hebben gezien dat onschuldige mensen verstrikt raken in een kruisvuur van pixels. Ontwerpers hebben de neiging hun favoriet te hebben en sterven liever aan een trage, pijnlijke dood dan te erkennen dat een andere software een functie heeft die ze misschien wel willen hebben. Ik ben van mening dat je in elke software moet ontwerpen waarmee je het meest efficiënt kunt werken en je ideeën snel kunt verkennen, of het nu Photoshop, Powerpoint of Paint is.
Het is bijna irrelevant dat je kiest omdat het slechts een startpunt moet zijn om snel te experimenteren met verschillende lay-outs. Persoonlijk geef ik de voorkeur aan Fireworks omdat het meer van de vakken van wat ik wil in een software aanvinkt. Ik probeer in dit stadium niet zwaar in de details te blijven hangen en probeer echt een paar voorlopige beslissingen te nemen over lay-out en structuur, net zoals sommige chique wireframes.
Alles wat gezegd moet worden over het gebruik van Lorem Ipsum in mock-ups op de site is al gezegd, dus vertrouw me alsjeblieft hier op en gebruik waar mogelijk echte inhoud om te ontwerpen. Waar het niet mogelijk is, gebruik de inhoud van vorig jaar, schrijf je eigen inhoud of gebruik de tekst 'Kaars in de wind' maar gebruik geen Lorem ipsum. Als u geen echte inhoud gebruikt, is het moeilijk om te zien op welke breekpunten bepaalde elementen moeten worden aangepast.
Dit is precies de breedte waar ik graag mee start, omdat het dicht bij een kleine desktopbelevenis ligt, die dan eenvoudig op te schalen is voor grotere schermen en naar beneden voor tablet / mobiele ervaringen. Sommige mensen geven er de voorkeur aan om breder te beginnen terwijl anderen liever eerst mobiel ontwerpen, het komt er gewoon op neer wat voor u werkt.
Bij RWD draait alles om vloeistofcontainers die groeien en krimpen om het beschikbare gebied van de browser te vullen, dus ontwerpen in percentages in plaats van pixels zorgt ervoor dat uw ontwerpen evenredig met de browser stromen en minder breekpunten nodig hebben dan het equivalente ontwerp op basis van pixels.
Ik heb de neiging om In-Design op de achtergrond te openen, zodat ik gemakkelijk en snel een procentuele grootte van een pixelgebaseerd element kan achterhalen. In InDesign kun je heel goed omgaan met dit soort berekeningen en kun je eenvoudig achterhalen hoe groot een 428px x 333px-element is met 46% van de oorspronkelijke breedte, met behoud van de verhoudingen of misschien 27% van een 889px-browserbreedte in seconden. De resultaten worden nog steeds in pixels aan u gegeven, zodat u vervolgens terug kunt gaan naar de software waarin u ontwerpt en die container in pixels maakt, wetende dat deze in verhouding staat tot het percentage van de werkruimte dat u hebt gedefinieerd.
Als je denkt dat ik bang ben om echte inhoud in je ontwerpen te gebruiken, moet je me horen praten ontwerpen van typografiestijlen in Photoshop (of gelijkwaardig). Typografie ziet er in de browser enorm anders uit dan het eruit ziet in de gebruikelijke Adobe-pakketten. Dit betekent meer werk voor het aanpassen van het ontwerp zodra het is gebouwd.
Bespaar jezelf de hoofdpijn en gebruik apps zoals typecast.com om te experimenteren en uw lettertypestijlen te maken met. Zodra u tevreden bent met de lay-out en stijl van uw typografie, kunt u uw volledige werkruimte exporteren als een transparante PNG die u in uw ontwerpmodellen kunt plaatsen. U hoeft geen van de door u gekozen lettertypen op uw systeem te installeren, omdat het gewoon een afbeelding is maar u kunt deze ook niet bewerken zonder terug te gaan naar typecast.
Inmiddels zou je je ontwerp ongeveer 1000px breed moeten hebben (of welke breedte je ook aan het begin hebt gekozen) aangevuld met de breedtes van de containers waarin je verschillende inhoud in percentages wordt vertaald. Ik zou nu beginnen met het maken van een op maat gemaakt raster dat de containerbreedtes nabootst die ik in mijn ontwerp gebruik. Dus als ik een zijbalk heb die 30% breed is en een inhoudsgebied dat 55% van mijn browser is met 5% opvulling aan elke kant, kan mijn raster er ongeveer uitzien als 5%, 30%, 5%, 55%, 5%.
U kunt apps gebruiken zoals Gridset om je op maat gemaakte raster te maken, maar nogmaals, ik gebruik InDesign het liefst omdat je elementen kunt groeperen en ze in proportie ten opzichte van elkaar kunt verkleinen.
Ik neem nu mijn raster dat ik heb gemaakt met InDesign en plak dit in een 1600px breed (of de maximale breedte die u wilt dat uw site is) document. Vervolgens begin ik het formaat van mijn rooster breder en smaller te maken met stappen van 100px helemaal tot 300px breed. Bij elke stap controleer ik de breedte van elke inhoudscontainer en zorg dat deze nog steeds groot genoeg is om de inhoud te bevatten. Wanneer ik een breedte bereik waarvan ik denk dat het een container te klein maakt, bewerk ik eenvoudig het raster om te passen. Dus als op 800px breed de zijbalk die ik had gemaakt op 30% van de breedte van de browser te smal werd, kon ik er een extra 10% aan toevoegen, waardoor het nu 40% van mijn browserbreedte is en breed genoeg is om de bedoelde inhoud te bevatten .
Het belangrijkste om te onthouden is dat als u een container breder maakt, u een andere container smaller moet maken met dezelfde hoeveelheid om de 100% volledige breedte te behouden. Dit is de beste manier die ik heb gevonden om breekpunten te definiëren (het punt waarop uw lay-out zal veranderen) omdat u alleen een ander breekpunt toevoegt wanneer de inhoud breekt en niet de breedte van een nieuw apparaat. Deze procedure kan tijdrovend zijn, want je krijgt 14 verschillende voorbeelden van je raster terwijl deze groeit van 300px tot 1600px breed, maar het is de beste manier die ik heb gevonden om te controleren hoe je ontwerp naar verschillende schermbreedten zal kijken voordat het in ontwikkeling.
Een andere optie is om een tool zoals te gebruiken Adobe Reflow Hiermee kunt u ook inhoud aan containers toevoegen en vervolgens uw werkruimte slepen en de schaal van de elementen bekijken. U kunt ook uw breekpunten bepalen door de grootte van uw werkruimte aan te passen totdat de inhoud wordt verbroken en eenvoudig een mediaquery toe te voegen. Opnieuw plaatsen is nog steeds in het openbaar Beta en kan worden gedownload van hier .
Nadat u uw ontwerpen met stappen van elke 100 px hebt geschaald, kunt u enkele breedten identificeren waarbij de inhoud breekt en deze corrigeert door een breekpunt toe te voegen. U kunt nu teruggaan naar de software waarin u de originele ontwerpen hebt gemaakt en de lay-out van uw ontwerp wijzigen op de breedten die u als breekpunten hebt geïdentificeerd. Dit betekent dat je uiteindelijk slechts 2, 3 of 4 verschillende lay-outs ontwerpt (afhankelijk van de complexiteit van je raster en hoeveel onderbrekingen je nodig hebt) die helemaal van 300px tot 1600px gaan.
Als u dit proces hebt gevolgd, zou u nu een reeks lay-outs moeten hebben die overeenkomen met uw breekpunten, een document dat laat zien hoe uw raster bestaat uit percentages van de breedte van de browser en hoe het samenvouwt voor kleinere schermen en al uw typografiestijlen al gemaakt en getest in de browser. Dit zou een zeer sterk punt moeten zijn voor een ontwikkelaar om vervolgens te beginnen met het nauwkeurig bouwen van uw ontwerpen en later te moeten omgaan met het breken van inhoud op bepaalde breedten.
Dit proces lijkt misschien erg langdradig, maar zonder een specifieke tool die volledig is gebouwd voor RWD, is het de beste manier die ik heb gevonden om mijn responsieve lay-out eenvoudig te testen met niet-reagerende software en mijn ideeën duidelijk over te brengen aan een ontwikkelaar. Dit is zeker niet de enige manier om een RWD-project te benaderen, maar het is de beste die ik heb gevonden.
Wat heeft responsief ontwerp veranderd voor uw workflow? Welke tips zou je delen? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, stroombeeld via Shutterstock.