Responsiv design är inte en kram som uppstod på grund av en cool CSS-teknik, det är ett svar på ett problem. Kom alltid ihåg det och ständigt fråga dig själv om du verkligen hanterar det problemet. Om du använder kopia och klistra in för att lägga in dina avbrytningspunkter för mediefrågor kan din lösning vara felaktig.
Låt oss diskutera varför mediefrågor finns och hur vi kan utnyttja dem för att verkligen lösa det allmänt förekommande webben. Låt oss prata om varför du borde låta ditt innehåll bestämma brytpunkterna för en layout, inte hypotetiska skärmstorlekar.
Den här artikeln är en del av vår serie på? Utöver skrivbordsdesign?, Som kom med dig i samarbete med Heart Internet VPS.
Idén bakom mediafrågor
För att påbörja debatten på rätt sätt är det nödvändigt att diskutera varför mediafrågor plötsligt blivit så populära. Svaret är naturligtvis det? Responsive Design? en term som Coined av Ethan Marcotte, är ett fantastiskt sätt att ta itu med ett ständigt växande problem för webbdesigners.
Medan alla ranting på och om hur "mobilwebben"? skulle ta över den traditionella, revolutionen som ägde rum var mycket mer drastisk: webben blev allestädes närvarande.Det här problemet? är bra för världen som helhet, men en verklig huvudvärk för oss. Under det senaste decenniet har världsomspännande webben förvandlats till något nytt. Det är inte längre bundet av de väggar som vi tidigare hade etablerat. Jag har sagt det här förut men det är värt att upprepa. Medan alla ranting på och om hur "mobilwebben"? skulle ta över den traditionella, revolutionen som ägde rum var mycket mer drastisk: webben blev allestädes närvarande.
Vid den här tiden får vi inte tillgång till webben från en enda punkt. Vi gav inte upp våra bärbara datorer till förmån för smartphones som experter? förutspått. I stället är webben överallt vi är. Det är inte bara i våra telefoner och datorer, det finns i våra tabletter, iPod, spel system, tv och även bilar.
Denna trend kommer bara att fortsätta när tiden går vidare. Responsiv design ger oss förbi en årstid med att skapa separata mobila webbplatser och till en tid där vi utvecklar en webbplats som utvecklas och anpassas till den enhet som den ses på. Med hjälp av mediefrågor kan vi presentera specifika CSS för alla olika visningsstorlekar och se till att alla har bästa möjliga upplevelse.
Problemet med Responsive Design
Avsnittet ovan är inte en halvhistorisk rant som är avsedd för att fylla utrymme. Det är ett viktigt koll på de mål som responsiv design är avsedd att uppnå. Frågan blir då, uppfyller de dessa mål? Hanterar designen tillfredsställande problemet med ubiquity?
Svaret är komplicerat, i bästa fall kan jag säga, det beror på hur du gör det. Det är ett förvirrande uttalande är det inte? Responsiv design är enkel: använd mediafrågor för att servera anpassad CSS till olika visningsstorlekar. Det här är hur alla närmar sig det rätt? Så hur kan det vara rätt och fel sätt?
Komplexiteten uppstår när vi börjar diskutera en viktig del av denna teknik: vilka mediefrågor ska jag använda? Eller sätt på ett annat sätt, vilka? Brytpunkter? ska jag rikta mig mot anpassad CSS? Det nuvarande populära svaret börjar förutsägbart med den bästa mobilen? enheter runt: iPhone och iPad (cue arg Android användar kommentarer). Från dessa arketyper etablerar vi så kallade "generiska"? smartphone och tablettstorlekar. Sedan flyttar vi upp och tar upp bärbara datorer och små skrivbord och till sist stora skärmar. En vanlig uppsättning mediefrågor, som den här från CSS-Tricks, har vanligtvis nio eller tio förutbestämda brytpunkter.
Vad händer om vi fokuserade på behoven hos en specifik design i stället för en hypotetisk enhet? Vad händer om vi byggt upp layouter som helt enkelt fungerade överallt?För att vara rättvis fungerar detta system till viss del. Vi har alla sett massor av bra lyhörda platser byggda med hjälp av en uppsättning som liknar Coyiers ovan. Men jag kan inte låta bli att tänka på att detta på något sätt upprepar samma misstag som vi gjorde genom att designa mobila webbplatser? några år sedan. Hela fokuset här är på enheten som tittar på webbplatsen. Innan vi till och med bygger webbplatsen har vi dessa brytpunkter i åtanke.
Men enheter ändras. Vi har redan etablerat att nätverket är anslutet till stort sett allt med en strömbrytare, så varför lägger vi än en gång så stor vikt vid nuvarande vanliga skärmstorlekar? Finns det ett bättre alternativ? Vad händer om vi fokuserade på behoven hos en specifik design i stället för en hypotetisk enhet? Vad händer om vi byggt upp layouter som helt enkelt fungerade överallt?
Innehållsinriktad Responsiv Design
Ovan nämnda problem med förutbestämda mediefrågor inträffade endast för mig när jag grävde in och verkligen började producera lyhörd arbete på egen hand. I teorin är standardförslaget bra, men när du applicerar dem på en komplex design kommer du att upptäcka att dessa brytpunkter inte alltid täcker den. Problemet, som Boston Globe-designers hittade snabbt upptäckte när webbplatsen gick live, är det att problem uppstår? In-between? (för rekordet, projektet är fantastiskt och eventuella layoutproblem har i stor utsträckning tagits upp). Saker blir rörigt när designen är i en storlek som du inte tog hänsyn till och du måste gå in och lappa hålen efter det faktum.
Jag säger detta som en ivrig Apple fanboy: sluta designa webbplatser för iPhone.
Min fråga är, varför börjar vi inte där? I stället för att gå in på ett projekt med en uppsättning enheter, och följaktligen mediefrågor, i åtanke, varför låter vi inte designen bestämma? Varje webbsida layout har en punkt där webbläsarens storlek minskar integriteten.Vårt arbete som formgivare, med tanke på problemet med ubiquity, borde vara att hitta den storleken och redogöra för den, sedan skumma, skölj och upprepa tills alla svaga punkter redovisas.
Jag säger detta som en ivrig Apple fanboy: sluta designa webbplatser för iPhone. I stället utformar du en webbplats som upprätthåller dess integritet, eftersom dess visningsstorlek reduceras till något genomförbart tillstånd. Håll specifika enheter i åtanke som en vägledning för din design (exempel: mindre enheter tenderar att vara touchbaserade, så gör länkar stora), men lägg inte dina bländare på och misslyckas med att titta på den större bilden: att ditt design ska se bra ut på vilken skärm som helst.
Ett nytt arbetsflöde
Så, hur ser det ut som ett innehållsriktat responsivt design arbetsflöde? Det är enklare än du tror. Självklart behöver du en utgångspunkt av något slag. Om du vill starta mobilen och gå upp, bra. Om du vill börja stora och komma ner, också bra. Jag tycker personligen att det är mycket svårt att verkligen gräva in i en design och göra det rätt om jag börjar på mobilnivån, men det finns många solida argument för att göra det på så sätt.
Något magi händer när du följer detta arbetsflöde.Hypotetiskt, låt oss säga att du började med en stor, 1020px bred sida. Kolla in det på den största skärmen du kan få händerna på och se till att det ser bra ut. Drag nu fönstret och gör det mindre tills designen blir ful. Det är din första brytpunkt. Ange en mediefråga för den punkten och åtgärda allt du behöver adressera. När du är klar, ta det där fönstret och hitta nästa punkt av fulhet. Upprepa dessa steg tills du är nöjd med det intervall som du har redovisat.
Men hur är iPad? Vad sägs om Kindle Fire eller Samsungs senaste försök att vara relevant? Något magi händer när du följer detta arbetsflöde. Du har precis gjort det så att layouten ser bra ut på nästan vilken storlek som helst. Om du gjorde det rätt, då kommer det att se bra ut när du drar upp det på din telefon eller surfplatta.
Endast layout
Tänk på den här diskussionen avser endast layoutförhållanden. Du kommer absolut inte ut ur testfunktionen på olika webbläsare och enheter. Responsiv design gör inget för att redogöra för att olika webbläsarmotorer tolkar HTML, CSS och JavaScript annorlunda.
Slutsats
Sammanfattningsvis ger mediefrågor och responsiv design oss ett otroligt kraftfullt verktyg för att ta hänsyn till det faktum att webbplatser ses av alla slags skärmar och visningsstorlekar. Men när vi börjar knyta våra mönster till en handfull enheter, har vi rätt tillbaka där vi började. Ditt mål istället borde vara att bygga en layout som är så mångsidig att den kan hantera nästan vilken visningsportstorlek som kastas på den.
Det här är bra i teorin, men var är exemplet? Hopppunkten i denna diskussion kom från ett nyligen försökt av mig att bygga ett lyhörd bildgalleri. Kolla in den artikeln för en titt på hur en inriktad responsiv design arbetsflöde kan se ut i det vilda.