Share
Om du inte är helt ny i branschen, eller har du bott under en sten i de avlägsna länderna på en annan planet, har du hört talas om en responsiv design. Även om du inte förstår det helt, är det bunden att vara något du kommer att ha stött på eller interagerat med på något sätt eller annat.
Kortfattat är responsiv webbdesign konsten att utforma webbplatser för en mängd skärmstorlekar och enheter, så att det finns en optimal upplevelse för varje användare i alla möjliga storlekar.
Responsiv webbdesign är bäst när den är agnostisk enhet; där du inte syftar till att designa för specifika upplösningar eller storlekar, till exempel endast för iPhone eller iPad. Istället bör du sikta på att designa med innehållet och designen i åtanke och hur denna innehåll flyter och anpassar sig till de olika miljöer som det kan ses eller användas i.
Det brukade vara så, att för att komma åt internet skulle du behöva försöka genom en (vanligtvis mycket stor) dator, med de kända ljuden av modemet som hörs medan du ansluter. Nu kan du dock komma åt Internet via datorer, bärbara datorer, mobiltelefoner, smartphones, tabletter, tv-apparater, spelkonsoler - listan känns nästan oändlig.
Responsive Web Design, skrivet av Ethan Marcotte och publicerad av A Book Apart, är en lysande introduktion till principerna för Responsive Web Design. Nu är det här en bra nyhet. Mer än någonsin kan vi anslutas till internet när som helst eller på plats som vi kanske vill. Även om detta är för givet är det för många också nödvändigt. Och med nödvändighet och tillgång presenteras vi ofta med otålighet och behovet av saker att arbeta och jobba snabbt.
På grund av att mottagliga webbplatser blir mycket mer vanliga, har även allmänheten (så alla utanför webben och kreativa industrier) nästan kommit att förvänta sig det när de surfar på webben. Så överallt är responsiv webbdesign definitivt en stor sak.
Att arbeta med lyhörd design är inte utan sina utmaningar. Först och främst finns det så många enheter och skärmstorlekar som vi måste ta itu med. Från extra stora till stora skärmar, från små till mitten (och allt däremellan) finns det mycket att tänka på. Och eftersom du är säker på att du redan vet att du är en utvecklare, kan du arbeta med lyhörd design från den tekniska sidan av saker också bli mardröm-ish och vara extremt svår att hantera.
Mediaqueri.es webbplats erbjuder massor av inspiration för några toppklassiga webbdesigner. Precis som med något projekt är de viktigaste sakerna du behöver tänka på med responsiv webbdesign innehållet på webbplatsen, hur innehållet passar in i designen och hur innehållet flyter från sida till sida. Du måste titta på hur de olika designelementen du har samarbetat och se till att allt känns sammanhängande och konsekvent.
Skillnaden med lyhörd webbdesign är att du också måste tänka på hur allt detta fungerar från en storlek till en annan, oavsett om det är bredd eller höjdbaserad. Du måste tänka noggrant på hur allt detta översätter till en mindre eller större skärm och hur alla dina designelement, ditt innehållsflöde och allt annat fungerar. Du måste hålla upplevelsen konsekvent, oavsett storleken på webbplatsen.
Vi, som designers och utvecklare i en sådan snabb bransch, är ganska lyckliga. Vi får jobba på några fantastiska projekt och vi brukar alltid komma till jobbet i spetsen för ny och framväxande teknik. Att arbeta med lyhörd webbdesign är bara en av de spännande sakerna vi får göra, men med det kommer priset.
Greenbelt Festival är ett utmärkt exempel på lyhörd webbdesign. Skärmdumpar medföljer mediaqueri.es. Tänk tillbaka till
I början av något designprojekt bör du försöka fastställa exakt vad det är att din klient vill komma ut ur projektet och vad de förväntar sig att resultaten ska vara. Att hantera din kunds förväntningar kan vara en svår sak att göra, men det är viktigt att du håller fast vid att säkerställa att dina kunder förstår din process fullständigt.
Ett vackert exempel på responsiv webbdesign i aktion kan ses på webbplatsen Modern Green Home. Skärmdumpar medföljer mediaqueri.es. När det gäller mottaglig webbdesign, och särskilt om de har kommit till dig med ett av dessa buzzwords, måste du försöka hjälpa till med att utbilda dina kunder Sällan har dessa buzzwords hörts i förbigående, eller har blivit representerade felaktigt, och det är upp till dig att se till att din klient har en ordentlig förståelse för ämnet.
Till exempel kan du till och med få potentiella kunder att komma till dig och säga att de ville ha en webbplats som fungerade på "iPhone och iPad". I det här fallet skulle jag säga "Jo, det är helt bra - men det som är bra är att vi istället kan fokusera på att skapa dig en perfekt mottaglig webbplats som kommer att fungera på några enhet och inte bara vara begränsad till de två. "Det är en bra isbrytare i ämnet och det är något som lämnar det väldigt öppet för dig att förklara vidare in i planeringsstadiet.
Om din kund förstår responsiv design korrekt, så föreställer jag mig att de kommer att bli lyckligare med projektet.
Stuff & Nonsense-webbplatsen är ett bra exempel på responsiv webbdesign, och introducerar också olika illustrationer på olika skärmstorlekar. Skärmdumpar medföljer mediaqueri.es. Om du tar tid att utbilda klienten korrekt kan den bara fungera till din fördel. Till exempel, i mitt eget arbete, försöker jag alltid att mina kunder känner att jag jobbar med dem, snarare än helt enkelt för dem. Detta bidrar till att underlätta processen med att arbeta med dina kunder när du utformar för den mottagliga webben.
Det är bra och bra att prata om varför det är viktigt att utbilda kunder och berätta saker du kanske redan vet om lyhörd webbdesign. Nu för nitty-gritty, där jag får berätta för dig de bästa sätten att designa responsiva webbplatser.
Den stora missnöjen är välkänd för sina intervjuer, och deras hemsida är ett utmärkt exempel på tidskriftsdesign på webben, liksom ett briljant exempel på lyhörd webbdesign. Skärmdumpar medföljer mediaqueri.es. Och svaret? Tja, tyvärr är det inte riktigt en riktig! Jag är ledsen om det inte är det du letade efter, men som du säkert kommer att förstå med din utveckling och kodning, är alla processer olika och ingen verkar fungera på samma sätt. Detta är på sitt sätt bra eftersom det innebär att vi alltid kan hitta nya sätt att arbeta.
Men oroa mig inte, jag kommer att ge dig några bästa tips för att designa snabba webbplatser som du borde kunna sätta i handling ganska enkelt. Känn dig fri att välja och välja bland alla dessa, samt att kombinera dem där du tycker att det kan vara lämpligt. Också experimentera! Prova massor av olika sätt att utforma lyhörda webbplatser och se vad som passar du bäst.
Att skapa en mockup för en statisk breddssite i Photoshop (eller någon annan grafikprogramvara) brukade vara det sätt som de flesta utformade webbplatser, och för vissa är det fortfarande. Det är helt bra! Om du är bekväm med att använda en grafikapp för att designa hur din webbplats ser ut så är det bra.
UX London 2013 webbplats är ett vackert exempel på design som vågar från små till stora graciöst. Skärmdumpar medföljer mediaqueri.es. Men försök inte att designa en mockup för varje upplösning eller bredd. du skulle bli galen och vara där under en mycket lång tid. Tänk istället på artikeln för trådframställning. Tänk på hur vi tittade på innehållsflödet för dessa trådramar och hur vi bestämde oss för att allt skulle slås samman. Försök och översätt detta till dina mönster och tänk på hur dessa element kommer att flöda och flytta när skärmstorleken ändras.
Några av dessa förändringar kommer att vara stora, och för dem då kan det vara lämpligt att skapa en liten mockup för att visa detta, men för andra ändringar, såsom textanpassning, skulle jag hålla fast vid att titta på dessa sorters saker i webbläsare när du börjar koda prototyper. Om du föredrar att utforma en mockup för varje större skede av din design, så för all del, fortsätt, var bara medveten om den tid det kommer att lägga till på ditt projekt.
Nu, för lite kontrovers. Du kanske har hört talas om det hela
WWF-webbplatsen är ett utmärkt exempel på webbdesign som också fungerar briljant. Skärmdumpar medföljer mediaqueri.es. Design i webbläsaren är när du går från ett wireframe-steg (om du har gjort det) direkt i webbläsaren för att starta designfasen, istället för att arbeta med någon grafikprogramvara. Om du använder många onlineverktyg för att hjälpa dig att skapa olika delar av din designstruktur (som att skapa galler eller förfina din typografi) kan det här fungera bra.
Men många designers kan känna att de kämpar med att designa i webbläsaren, särskilt om de är mer en formgivare än en kodare. Anledningen till detta är att de anser att det begränsar sin kreativitet lite mer, vilket gör det svårare för dem att känna att de kan komma med kreativa, unika och visuellt spännande idéer.
Nästa webb hanterar att visa innehåll på ett sätt som är lätt att smälta och följa, även ner till små skärmar. Skärmdumpar medföljer mediaqueri.es. Men som utvecklare är du troligtvis extremt bekväm att använda kod och det kan därför vara en bra idé att leka med att försöka designa i webbläsaren och se vilka resultat du kommer med.
Detta är förmodligen min personliga favorit. Bestämma i webbläsaren innebär att du får göra lite arbete i grafikprogram och lite i webbläsaren. Personligen tror jag att du inte kan få ett bättre resultat av hur en design fungerar tills den finns i webbläsaren själv. Typografi kommer alltid att göra annorlunda i grafikprogram än i webbläsaren, och det är mycket lättare att skapa prototyper och iterera snabbt genom konstruktionsstadier när du är i webbläsaren (även om allt som kan förändras med introduktion av program som
Microsofts webbplats använder smart användning av rörligt innehåll och beskärning av bilder beroende på visningsportens storlek. Skärmdumpar medföljer mediaqueri.es. Att arbeta med både en blandning av mockups och webbläsarbaserat arbete innebär att du kan ge stor flexibilitet till din design och de beslut du måste göra. Nyckeln till denna term "besluta i webbläsaren" är dock med det första ordet. Även om många viktiga kreativa beslut kan göras i grafikprogramvaran, är webbläsaren där ditt slutgiltiga val kan göras.
När jag jobbar på det här sättet, tycker jag att jag ofta hamnar i en blandning av mockups, designade mönsterbibliotek (i grafikprogramvara och i HTML & CSS) och fullständiga HTML & CSS-prototyper. En blandning är stor och den visar utvecklingen av webbplatsen från början till det som förhoppningsvis börjar bli en fullständig webbplats.
Först, om du inte redan har lärt mig av mina artiklar i avsnittet "Innan du börjar" - alltid, alltid, börja alltid arbeta med dina mönster innehåll först. Allt detta innebär att du är säker på att du arbetar med riktigt innehåll och innehållet som ska användas på webbplatsen du designer.
Philip House är ett utmärkt exempel på hur du kan flytta och flytta layouter när du arbetar med lyhörda webbdesigner. Skärmdumpar medföljer mediaqueri.es. För det andra är det helt upp till dig om du jobbar mobil-först (med mindre layouter) eller skrivbordet (som börjar med fullbredd skrivbordslayout). Det finns många debatter om det på nätet, men det är verkligen ditt eget beslut att göra. Om du känner dig mer kreativ går du från en större storlek till en mindre, även om du bygger den på motsatt sätt, så är det bra. Som gör motsatsen, och går från små till stora!
Låt oss paketera saker med några användbara resurser. Det finns så många verktyg där ute som kan hjälpa dig när du utformar lyhörda webbplatser, ta en titt:
Accentsconagua