Designa för Responsiveness
Att designa för lyhörda webbplatser kan vara lite utmanande först eftersom processen är så annorlunda.
Som designare har vi blivit vana vid att bygga pixel-perfekta mockups som våra webbdesigner. Men lyhörd design tar ett annat tillvägagångssätt.
En designers roll är inte längre att producera en mockup och sedan vidarebefordra den till utvecklaren, eftersom lyhörd design inte bara är en tvåstegsprocess, det är en serie av revideringar. De flesta är gjorda i webbläsaren. Det är en samarbetsinsats mellan designern och utvecklaren, inte längre två separata uppgifter.
Här är några tips och ett generellt arbetsflöde för att göra övergången från att designa statiska platser för att utforma responsiva dem lite enklare.
Att veta dina visningar
Innan du påbörjar något projekt är det viktigt att bestämma dina visningar. Ett typiskt tillvägagångssätt är att bygga en layout för smartphones, en för tabletter och mindre visningar, en större skrivbordsversion, och kanske en andra stationär version för ännu större / bredare skärmar, säger 1200 eller 1400 pixlar eller mer.
Planera i förväg
Skissa kan vara din bästa vän. Ta ett papper och gör 3-4 lådor för att representera varje visningsport. Att ha alla dina visningar på en sida hjälper dig att inte fokusera på någon design mer än de andra. När du lägger ut din design, ta det viktigaste innehållet först och lägg till det i vart och ett av visningsportarna, arbeta dig ner till de mindre viktiga sakerna som du än går.
Du kommer snabbt inse att inte allt innehåll kan passa in i mindre visningar. Bättre att hitta det nu när du gör skisser, istället för att försöka göra ändringar i en färdig design.
Yup, det är mina verkliga scribbles. Du kanske inte kan bestämma vad varje element är men de är från ett verkligt projekt. Jag gjorde design och utveckling så jag behövde inte klargöra för någon annan. Poänget är att ingenting är snabbare än penna och papper för att snabbt kunna lägga ner layoutsidéer.
Wireframes och mockups
Den viktigaste delen av trådframställning är att utvecklaren tar en aktiv roll. Han eller hon borde genast veta om din idé ska fungera eller inte och kan ge förslag på sätt att få din vision över utan att behöva återuppfinna hjulet.
Med responsiv design kan du inte längre spendera 90% av din designtid innan utvecklingen börjar. Så mockups måste vara snabba och grova. Också vara öppen för förändringar eftersom chansen är att dina ursprungliga idéer kanske inte fungerar exakt som planerat.
Webbläsaren
På grund av den stora mängden testning som är inblandad är responsiv design bäst gjort som en process av revideringar i webbläsaren. Så snart en grundläggande layout överenskommits är det bäst att börja utvecklingen direkt. Att ha dina layouter som kan ses från en webbläsare hjälper till att förhindra många designproblem.
En annan sak att betrakta som designer är vilka element i din design som kan skapas med CSS ensam. Många tankar idag kan visa drop-skuggor, gradienter, gränser, avrundade hörn och andra designelement som skapats med CSS. Endast CSS-element är enklare att ändra, tar mindre designtid att skapa, och kräver inte bilder eller bildskivor att implementera. Självklart om du inte utvecklar webbplatsen själv måste du kunna kommunicera dina layoutidéer med utvecklaren.
Tar den till Photoshop
Jag rekommenderar starkt att använda en .psd för alla layouter. Här är ett snabbt exempel med 1200 pixlar som den största visningsporten. Så börja med en ny .psd vid 1200 pixlar breda med 2000 pixlar långa. De andra utsikterna kommer att vara 480, 1020 och 768 pixlar breda.
För att starta, låsa upp ditt bakgrundslager och duplicera det för så många visningsportar som du behöver plus en. Fyll i det ursprungliga bakgrundsskiktet svart och lämna resten vit. Sätt varje vitt bakgrundsskikt i en mapp och namnge det för dess visningsport (exempel: "480").
Nästa sätt upp varje visningsport i .psd. Kom ihåg att du bara behöver göra den här gången och bara återanvänd mallen för alla dina projekt.
Lägg först till guider vid kanterna av varje visningsport. (Visa -> Ny guide och välj "Vertikal"). Lägg till guider med 90, 216, 360, 840 och 1110 pixlar.
Skapa sedan lagmasker på varje mapp, som bildar kanterna på varje visningsport. Använd det rektangulära markeringsverktyget för att välja området i mitten av två guider (480 pixlar).
Att ha Snap checked (Visa -> Snap) gör det mycket enklare. Med det markerade valet och den korrekta mappen som valts i lagerpalletten klickar du på knappen Lägg till lagermask för att applicera den. Gör samma steg för de andra visningarna.
Nu för att se ett visst visningsportar stänger du helt enkelt av de andra mapparna. Jag inkluderade också ett foto av lagerpalletten om du ville se hur det ska se ut.
prototyper
Om du redan har en ojämn webbplats utvecklad, ta en skärmdump vid varje visningsport och lägg till dem i din .psd i rätt mapp.
Generellt är det lättare att börja med den minsta viewporten och arbeta dig upp till de större i Photoshop. Så krossa din 480 pixel design, duplicera sedan lagren och släpp dem i 768 pixelmappen.
Det finns ingen anledning att vara pixel perfekt med någon av dina layouter. Jag brukar få en visningsport att se korrekt men för resten ändrar jag bara de element som är helt olika i var och en. Oroa dig inte för att få marginalerna runt textblock perfekt. Först och främst ignorerar du text så mycket du kan, för att Photoshop inte kan göra det så som det kommer att visas i webbläsaren, och det mesta av textdesignen kommer att göras med CSS.
Förstå hur innehåll förändras
När du tänker på designen behöver du förstå hur layouten ändras när den ändras från ett visningsport till ett annat. Du måste också överväga vad som händer om en layout är något mindre eller större än den visningsport du designar för.
Det finns några alternativ för att låta ditt innehåll anpassas till varje layout. Varje element kan fixeras, döljas, floats (vänster eller höger), vätska, eller de kan skala. Vilken som helst responsiv design kommer att använda en kombination av alla dessa.
Flytande element ses oftast i innehållsområden som sitter sida vid sida i stora layouter, men stack ovanpå varandra i mindre visningsportar. Eftersom utsikten börjar bli mindre och varje element svävar kvar, börjar elementen på höger sida stapla under elementen på vänster sida.
Vätskeinnehåll anpassar sig bäst för att ändra visningar, men kan bli besvärligt om det används på stora visningar. Vätskeinnehåll används vanligen för kolumner av text som är så stora som visningsporten tillåter. De fungerar bra på mindre visningar men kan bli för breda på större, så det är bäst att byta till fast för dem.
På liknande sätt som vätska, får skalningselementen en procentuell storlek och skala så liten eller bred som visningsporten tillåter. Dessa är annorlunda eftersom de kan tillämpas på bilder och textstorlekar. Dessa element har en procent bredd och / eller höjd och justeras till visningsporten.
Fast är det mest stela sättet att lägga ut innehåll. Om du har en del innehåll som du inte vill att den ska skala eller ändra storlek på något sätt, kommer det att åtgärdas. Det bästa med fasta element är att utforma dem så att de passar den minsta utsikten. Det är mycket lättare att använda ett litet element i en stor viewport över att försöka passa ett stort element i en liten viewport.
När du vill ta bort ett element eller bara inte har plats för det kan du gömma det. Dolda element kommer inte att ses av användaren men kommer fortfarande att hämtas. Så om du använder stora bilder men döljer dem från mobilanvändare, tar sidan fortfarande samma tid för att ladda om bilderna är synliga eller inte.
Kom ihåg att du kan och bör använda en kombination av alla dessa på samma element. Det betyder att en textruta kommer att vara flytande i ett visningsport, fast och flytande kvar i en annan, och kan vara gömd i en tredjedel.
Designers glömmer inte
Eftersom så mycket av en layout kan skapas med CSS kan det känna att din roll som en formgivare har minskat. Egentligen har din roll just ändrats. Webbdesign för länge har handlat om att utforma gränssnittet medan du försummar innehållet.
Layouten är fortfarande viktig men utvecklaren kan göra mycket av det. Designern bör fokusera på att se till att målen för webbplatsen är uppfyllda. Spendera mest tid på att stärka konverteringsprocessen, betona viktigt innehåll och göra det mer smakligt och smältbart.
För att vara helt ärlig försökte jag leta efter några bra exempel på detta i responsiv design, men kunde verkligen inte komma med några bra exempel.
Grafiska element och bilder
Det finns några speciella överväganden att göra när man hanterar bilder i lyhörd design. Det säkraste sättet är att göra bilder som passar den minsta visningsporten. På så sätt behåller du filstorleken och har bilder som fungerar i varje visningsstorlek.
Här är ett exempel på bilder som enkelt kan visas i flera visningsportar från Orestis.nl .
Stora bakgrundsbilder kan vara särskilt problematiska när det ska nedskalas för smart telefonanvändning. Om du planerar att använda dem, se till att göra det på ett sätt som håller filstorlekar och laddningstider till ett minimum.
Konsistens
Ett av de största problemen med responsiv design är bristen på konsistens. Användare kan ha problem med att navigera på din webbplats på en surfplatta när de används för sin skrivbordsdesign.
Se till att du använder samma färgschema på varje layout och behåll minst ett konsekvent element hela tiden. Logotypen är det enklaste elementet att övergå genom alla. Gör alltid navigering tydligt markerad och lätt att hitta. Om du måste ta bort element från mindre visningsdesign, har du andra metoder för att komma till det innehållet.
Upptäck inte hjulet igen
När du utformar en statisk webbplats kan du ha mycket frihet, men i lyhörd design finns det fler saker att redogöra för. Använd en metod som fungerar och spendera din tid så att det ser bra ut. Om folk kan göra e-postmallar ser fantastiska ut, kan du göra detsamma med en lyhörd design, det tar bara lite kreativitet.
Vad tycker du är det svåraste att komma ihåg när man utformar en lyhörd plats i stället för separata mobila och statiska webbplatser? Låt oss veta i kommentarerna!