Responsiv design är vår nuvarande bästa lösning på fenomenet av den allestädes närvarande webben. Internet nås av människor överallt på otaliga otroligt varierande enheter och lyhörda sidor ger ett enkelt och funktionellt sätt att redogöra för dessa skillnader.
Idag ska vi ta ett steg tillbaka från diskussioner om mediefrågor och teknisk jargong och fokusera på de centrala aspekterna av hur lyhörd teknik påverkar din designprocess. Vilka viktiga punkter behöver du tänka på när du närmar dig ett responsivt webbdesignprojekt? Läs vidare för att ta reda på det.
Designen är mer än CSS
Det har skett mycket diskussion på senare tid om teknikerna för responsiv design från en teknisk synpunkt: mediefrågor, procentbaserade bredder etc. Men när du förstår CSS-tricksna för att implementera en lyhörd design står du inför en mycket större hinder: den faktiska designen.
? Det är svårt att dra av en professionell design när du oroar dig för ett enda format, hur mycket svårare kommer det att vara för en lyhörd design ??Det låter som en skrämmande uppgift gör det inte? Du sätter upp för att skapa en sammanhängande, konsekvent upplevelse som ser perfekt ut på nästan alla skärmstorlekar. Det är svårt att dra av en professionell design när du oroar dig för ett enda format, hur mycket svårare kommer det att vara för en responsiv design?
Detta är en viktig orsak till tvekan för många designers att anta responsiv design som en standardpraxis. Den vanligaste invändningen jag hör av både designers och deras kunder är att den lyhörda designen låter som ett ganska tidintensivt företag. Designers tvingas försöka antingen rättfärdiga prishöjning eller äta timmar för att producera kvalitetsarbete.
Lyckligtvis, från en CSS-ståndpunkt, skärmade projekt som Skeleton verkligen på kodningstiden. Det betyder inte att du är borta, men som designer måste du fortfarande fokusera på att skapa en solid upplevelse för varje användare och det innebär att investera lite seriös tanke på hur designprocessen förändras mot bakgrund av denna nya metodik . Låt oss ta en titt på några av de främsta övervägandena för att du ska komma ihåg.
Photoshop kommer inte att klippa det
Med en lyhörd design är det inte nödvändigt att utforma i webbläsaren. Du kan definitivt bestämma några idéer i Photoshop för hur webbplatsen ska se på olika bredder och det kan till och med ge rikare slutresultat, men den enkla sanningen är att Photoshop inte kan replikera den typ av dynamisk effekt som indikerar responsiv design.
? Att designa i webbläsaren är inte längre en kram, det är en nödvändighet.?När du pratar om en enda design som utvecklas med webbläsarfönstret, är det bästa sättet att planera det att sparka på däcken och se det i åtgärd i webbläsaren.
Se inte detta som en Photoshop bashing rant, du behöver inte och bör inte överge med hjälp av bilder, texturer etc. som byggdes i Photoshop, Fireworks eller annan grafikk programvara. Att sätta dem ihop i en snabb mockup kommer troligen att bäst uppnås genom att implementera webbläsare istället för statiska miniatyrbilder.
Tänk på att dina mockups fortfarande kan vara produkter med låg trovärdighet, oavsett om du vill börja med en grundläggande wireframe eller en ganska fin design är helt upp till dig. Nyckeln här är att du har något levande som låter dig testa de olika evolutionerna så att du kan lösa problem när de uppstår istället för att slösa värdefulla timmar på en fundamentalt felaktig idé.
Dramatiskt olika
Ibland är det så enkelt att skala en design ned så enkelt som att återlämna objekten från flera kolumner till en enda staplad kolumn. Om din design är uppdelad i fina små bitar, kan det vara vägen att gå.
Men kom ihåg att dramatiskt olika enheter kan kräva dramatiskt olika design. Det är ofta så att en verkligt bättre lösning kan levereras genom en stor förändring av hur sidan fungerar. För att se vad jag menar, överväga El Sendero del Cacao designen nedan.
Som du kan se, skiljer sig de stora och små versionerna av designen ganska lite. Nyckeln här är att de fortfarande ser ut som två versioner av samma sajt, vilket betyder att varumärkets konsistens har stannat på punkten. Designern bestämde bara att mobilversionen fungerade bättre med betydligt mindre visuell känsla än den fulla versionen.
Tänk på att "annorlunda" inte alltid innebär en komplett och fullständig avstrykning. Din mobilversion behöver inte vara tråkig och förutsägbar. Poängen här är att inte ta bort allt borta utan att kritiskt överväga alla de olika nyckelstorlekarna du riktar in och hur du kan förbättra upplevelsen för varje genom att tänka om designens grundvalar.
Vad är absolut nödvändigt?
En av huvudkomponenterna för att överföra din design genom olika faser är att rikta de absolut viktiga komponenterna i designen och ge dem högsta prioritet.
Som vi såg i det föregående exemplet kommer det definitivt inte alltid att vara så att din mobilvänliga version kommer att innehålla allt som din fullstora skrivbordsdesign kommer att göra. Tricket är då att överväga allt som du och din klient planerar att inkludera och skapa en hierarki av betydelse så att du kan trimma det onödiga för de mindre versionerna.
Vi ser denna princip på jobbet på Stephen Carvers hemsida nedan.
Lägg märke till hur designen inte bara har blivit återflödad men faktiskt trimmad för mobilversionen. En del av innehållet betraktades som viktigt medan annat innehåll är mer "trevligt att ha" när det finns tillräckligt med skärmutrymme.
Det mest uppenbara exemplet på detta är i navigeringsområdet.Lägg märke till hur den större versionen av designen innehåller små underrubriker för varje navigationselement. Dessa hjälper användaren att förstå navigationsschemat. På den lilla versionen har dessa tagits bort för att spara utrymme.
Medan du analyserar din design för väsentliga delar är experimentet nyckeln. Prova att avlägsna olika komponenter för att bedöma huruvida användbarheten lider. Observera att dessa beslut måste göras vid varje intervall, inte bara den minsta och största.
Rör ? Klick
En annan viktig punkt att komma ihåg som designskalorna är att det nuvarande tillståndet för databehandling är uppdelat i två olika kategorier: pekbaserade inmatningsenheter och de som använder en markör. Det säkra antagandet självklart (för tillfället) är att större webbläsarfönsterstorlekar brukar motsvara skrivbords- eller bärbara datorer, medan mindre webbläsarfönsterstorlekar brukar indikera ett touch-baserat gränssnitt.
Dessa är betydligt olika djur och det kommer du bra att komma ihåg att medan du strukturerar dina mönster eftersom den riktning som denna kunskap leder dig till kan vara lite kontraintuitiv.
Till exempel, även om vi tenderar att tänka på mobilplatsen som en nedskalad version av skrivbordswebbplatsen, är det ofta så att elementen faktiskt ökar i storlek på grund av skillnaden mellan att röra och klicka. Ett navigationselement som verkar helt tillgängligt med en mus och markör kan vara omöjligt att noggrant rikta mot den stora, råa inmatningsenheten som är det mänskliga pekfingret.
Det viktiga att komma ihåg här är att testa som galen. Det är för lätt att designa på ett skrivbord och sedan ändra storlek på webbläsarfönstret för att ta en titt på den mobila versionen. Detta berättar helt enkelt inte hela berättelsen. Du måste få händerna på designen i mindre storlek innan du ringer den bra.
Det är allt i det mellan
En väldigt viktig sak att få i ditt huvud när det gäller lyhörd design är att det handlar om mer än skärmstorlekar: det handlar om storleken på webbläsarfönstret. Bara för att någon har en 13-tums MacBook betyder inte att deras webbläsarfönster är den storleken. Det är ofta så att användare öppnar och använder webbläsarfönster på mycket mindre än helskärm.
Takeaway här är att du inte är ute av kroken efter att ha testade några förinställda fönsterstorlekar. Ändra storlek på webbläsarfönstret och se hur designen svarar vid varje litet steg. Standard argumentet är att icke-designers användare aldrig utför denna åtgärd, och det är korrekt, men de kommer att använda sina webbläsarfönster i en oändlig mängd oförutsägbara storlekar och den snygga designen är skön att du enkelt kan se till att din design ser ut perfekt i dem alla.
Tänk på att gå på mobilens första rutt
I slutändan är hur du planerar ut dina lyhörda mönster upp till dig. Det finns emellertid gott om starka argument för att gå med i den mobila första publiken.
Börja med den mobila versionen hjälper till att säkerställa att du inte bara serverar en skarp halvhjärtad version av din ursprungliga design till dina mobila användare. Det säkerställer också att du verkligen tänker igenom detaljerna i varje litet innehållsinnehåll.
Ovanstående uppgav vi att du måste kamma genom din design och rikta de absolut nödvändiga elementen, det här är en mycket lättare process om du faktiskt börjar med bara de nödvändiga väsentligheterna. Med denna teknik kan du proaktivt lägga till din design, eftersom sidstorleken ökar i motsats till att klippa ut som sidstorleken minskar. Detta följer konceptet om progressiv förbättring, som börjar med en solid funktionell bas och erbjuder förbättringar där det är möjligt.
En annan fördel med mobilen först är att du ofta kan undvika lastning av onödiga element på mindre enheter som inte kommer att använda dem. Projekt som 320 och upp syftar till att hjälpa dig att minimera resurserna som laddas av den lilla versionen av din design.
Slutsats
Poängen med den här artikeln var att få dig att sluta tänka på den bakre delen av lyhörd design tillräckligt länge för att överväga konsekvenserna av denna teknik på vad användaren ser. Mycket viktigare än mediasöksyntaxa är slutresultatet av hur din design utvecklas ur en visuell och funktionell synvinkel för att möta användarens behov.
Kom ihåg att du måste aktivt utveckla din design i webbläsaren, inte bara i en statisk designansökan. Du måste också skapa en konkret hierarki av de viktigaste elementen i designen för att se till att de här pusselbitarna är närvarande och fungerar perfekt för varje fönsterstorlek. Slutligen kom ihåg att mobil webbdesign är mycket mer än nedskalade skrivbords webbsidor. Överväg att ta en mobil första rutt för att säkerställa att alla användare får en bra solid erfarenhet.
Bildkrediter: Claudia Regina