År 2011 fanns det inte en webbdesignblogg eller tidskrift i världen som inte använde? HTML5? eller? CSS3? i åtminstone några rubriker. Vi pratade oändligt om de nya möjligheterna som den här tekniken medförde, hävdade outtröttligt om de hinder som de presenterade och hade massor av roliga skapande av demoer med pinsamt blygsamt webbläsarsupport.
Även om CSS3 och HTML5 fortfarande ligger högst upp i våra diskussionslistor, bestämde jag mig för att titta och se vilka andra termer och buzzwords som är viktiga ämnen för 2012. Läs vidare för att se vilka webbdesigners som ranting och argumenterar om dessa dagar. Längs vägen hittar du över femtio utmärkta artiklar för att kolla på det som kommer att borsta dig på varje ämne.
RWD
Om du inte hört talar vi Responsive Web Design? RWD? nu. Det är det korta, coola sättet att säga att det hoppas ombord innan du skämmer bort dig själv genom att bryta ut den arkaiska långa versionen på din nästa webbdesignkonferens. Du kan också ha en Plone t-shirt.
RWD är utan tvekan ett av de absolut hetaste ämnena i webbutveckling just nu. Detta beror på att det verkligen utgör ett stort paradigmskifte som fundamentalt förändrar hur vi närmar oss webbdesignprojekt.
Finns det för mycket hype kring RWD? Jag har verkligen sett många kommentarer på mitt eget arbete som sjunger denna melodi. Men eftersom en av de ledande lösningarna för att öppna webben optimeras för så många enheter som möjligt utan att skapa anpassade webbplatser för varje, tror jag personligen att den förtjänar uppmärksamheten.
Problemet med att det blir ett buzzword är att webbdesigners redan har gjort det till en viktig marknadsföringsslag, om de verkligen vet hur man framgångsrikt kan implementera det i en verklig världsinställning eller inte. Var försiktig med övertygelse på detta område, det är en ny teknik och vi lär oss fortfarande hur det kommer att se ut på lång sikt.
RWD Diskussion
- Responsive Web Design (Seminal Piece)
- Nybörjarens guide till Responsive Web Design
- Så här bygger du ett ansvarsfullt miniatyrbild Galleri
- 5 riktigt användbara, responsiva webbdesignmönster
- Responsive Web Design: Vad det är och hur man använder det
Breakpoints (eller Device-Agnostic RWD)
Det finns många delvillkor inom RWD-riket som fångar mycket uppmärksamhet: mediefrågor, lyhörd typ, etc. En som har utlöst ett ton av konversation och till och med debatt är "breakpoints".
Tanken bakom RWD är enkel i sin kärna: använd smart CSS för att omdefiniera en webbplats layout på olika fördefinierade brytpunkter. Den stora frågan som detta leder till är uppenbart, vilka brytpunkter ska jag använda?
Den populära lösningen är att titta på vanliga enhetens bredder och speciellt designa för dem. Så du ställer in en mediefråga för den vertikalt orienterade iPad, horisontellt orienterad iPad, vertikal iPhone, horisontell iPhone etc. Som ett alternativ hittar du en bra generisk mitten och målar tre primära områden: skrivbord, tabletter och telefoner.
Jag skrev nyligen en artikel på varför vi borde sluta tänka på specifika enhetens bredder och börja använda RWD för att bygga webbplatser som arbetar på bokstavligen varje tänkbar bredd inom förnuftet. Det låter svårt men i praktiken är det egentligen inte något mer arbete än de andra metoderna. Jag ringde det? Innehållsinriktad Responsive Design? eftersom det tillåter innehållet själv att bestämma brytpunkterna, inte vanliga enhetstorlekar. Andra webbplatser har sedan skrivit om samma idé med ett kanske bättre namn,? Enhetsagnostiker? RWD. Idag hittade jag en artikel av Marc Drummond skrivit bra innan jag själv diskuterade liknande tekniker med kortfattat begrepp? Naturliga brytpunkter.?
Oavsett vad du kallar det, illustrerar den här debatten perfekt den punkt jag gjorde i det sista avsnittet: att RWD inte är en perfekt definierad praxis just nu. Nya metoder och idéer uppstår ständigt och du kan förvänta dig att se mycket mer diskussion om breakpointfronten i år.
Breakpoint Diskussion
- Responsive Design: Varför gör du det fel
- Enhets-agnostisk tillvägagångssätt för Responsive Web Design
- Responsive Web Design Standard Breakpoints är döda
- Re-thinking Breakpoints i Responsive Design
SVG
Apple har bestämt sig för att framtiden för databehandling är en med bättre upplösning. Gilla det eller inte, branschen kommer följ detta beslut (lämna alla Apple hatar kommentarer du gillar, det kommer fortfarande att hända folk). Apple pressar ut? Näthinnan? visar över hela sin iOS-linje (iPhone, iPad, iPod Touch) och andra stora tillverkare av enheterna ser redan ut hur de ska matcha eller slå den här tekniken.
För webbdesigners, detta är en otäck kan av maskar. Det är dåligt nog att vi måste designa för många olika skärmstorlekar, nu ska vi klara av det med stora skift i pixeldensitet. Bilder med högre upplösning ger upphov till alla slags problem med filstorlek, hur och när du ska betjäna olika bilder till olika enheter etc.
En av de primära sparare som vi letar efter är SVG eller Scaleable Vector Graphics, som i grunden låter dig bädda in de typer av bilder du bygger i Adobe Illustrator direkt in i en webbsida. Fördelen här är att eftersom grafiken är byggd som vektorer, är de oändligt skalbara och kommer att se helt perfekt ut på vilken enhet som Silicon Valley kan drömma upp.
- Klar eller inte, här kommer HD webbdesign
- Upplösning Oberoende Med SVG
- 20 Svg Använd som kommer att göra din käke droppe
- Spelar med SVG Design
- Använda SVG för flexibla, skalbara och roliga bakgrunder
preprocessorer
Strängheten i webbstandardrörelsen ledde till en ganska stel webbdesignindustri där du följer reglerna eller står inför konsekvenserna.Denna styvhet skakades till sin kärna med en radikal idé: Vad händer om det finns ett bättre sätt att koda? Det finns saker om CSS, JavaScript och till och med HTML-syntax som verkligen suger, så varför inte hitta ett sätt att dike dem utan att överge de standarder som har gjort webben vad det är idag? Varför måste vi vänta på en panel av experter för att lägga till funktioner som vi vill ha på våra favorit språk? Varför kan vi inte göra det själv?
Gå in i preprocessorns värld. Vissa vilda och galena rebeller har satt ihop dessa system, så att du kan skrapa kodningsstandarder som du skriver och kör sedan din kod genom en magisk renare som spetsar ut giltig syntax. Föreställ dig CSS och JavaScript utan den besvärliga nödvändigheten av halvkolon och parentes, eller HTML utan de irriterande stängningskoderna. Föreställ dig att skriva mindre kod och göra mer med det än någonsin möjligt innan (kan du säga CSS-variabler?).
För några år sedan möttes dessa förprocessorer med ett mindre än varmt välkomnande i de flesta fall och en fullständig förakt av andra. Den senare delen av förra året men, oavsett anledning, de verkligen slog deras steg. Plötsligt är förprocessorer den hetaste trenden runt.
Om du inte redan har det, är det dags att träffa förprocessorerna som gör ett sådant stänk. Sass, LESS och Stylus utökar CSS med fantastiska funktioner som variabler, mixins, matematiska operationer och till och med drastisk syntaxförenkling. Fans av Sass bör också kolla in ett annat projekt från samma folk som drastiskt omprövar HTML authoring: HAML. Om du är en JavaScript-guru, titta inte längre än CoffeeScript som ett sätt att spara dig hundratals linjer med kodarbete.
Preprocessor Diskussion
- Sass vs LESS vs Stylus: Preprocessor Shootout
- Spara massor av tid genom att skriva din HTML med Haml
- 10 mindre CSS-exempel du borde stjäla för dina projekt
- Super Sweet CSS 3D Text Effects med Sass och mindre
- MINDRE CSS har mer med 1.2.0
- Rocking Out With CoffeeScript
- Skriva bättre JavaScript med CoffeeScript: Grunderna
- Komma till mindre: det programmerbara formatbladet
Pinterest är den trendigaste nya sociala webbplatsen på webben. Det har helt exploderat i popularitet under det senaste året och verkar fortfarande vara i en ständig stigning. Den intressanta delen är att Pinterest är känd för sin speciella kvinnliga publik, de flesta av dem verkar vara besatta av att knyta bilder av Ryan Gosling insvept i julljus eller krama valpar. Så varför har jag listat det som ett webbdesignsord?
Det finns två skäl till detta. Det första är att mycket av framgången bakom Pinterest sannolikt kan hänföras till dess design, vilket förändrar hur designarna tänker på galleribaserade webbplatser. Som jag har skisserat här tidigare gör kombinationen av en Masonry Style-layout med oändlig bläddring en helt enkelt beroendeframkallande användarupplevelse som kan stjäla timmar i ditt liv. Din första riktiga dykning i Pinterest kommer sannolikt att sluta med att du tittar upp från din skärm och undrar vilket år det är och hur länge du har varit under denna onda stavning.
Bortsett från den intressanta design case studie som det är, Pinterest är gradvis accepteras av alla typer av användare, inte bara Gosling gazers. En nisch av användare som verkligen börjar hitta ett hem på denna sida är designers. Vi är visuellt inriktade människor och Pinterest ger oss en fantastisk plattform för att spara och dela med sig av visuell inspiration. Du behöver inte se längre än vårt eget konto för att se att det här är sant (slutligen skamlöst självkontakt).
Pinterest Diskussion
- Addictive UX: Varför Pinterest är så dang Amazing
- Använda Pinterest för Design Inspiration
- Hur viktigare ändrad webbdesign
- Pinterest är en webbbonanza för designers
- 3 effektiva sätt Webdesigners kan använda Pinterest
CS6
Adobe är nästan oöverträffad i sin förmåga att göra brutna designers regelbundet ut onödiga pengar. Den fortsatta utvecklingen av Adobe Creative Suite innebär att du behöver djupa fickor för att kunna hålla dig till den bästa industritekniken. Detta gäller speciellt i designbloggvärlden. Om jag publicerar en tutorial på Photoshop och gör misstaget att använda någonting så gammalt som CS3, kommer jag att vara castigated till ingen slut.
Adobe är på väg att rocka din värld igen med CS6, nästa stora iteration av Creative Suite. Jag vet att några av er rullar dina ögon och klagar på dig bara bara köpte CS5, och jag delar din smärta, men den goda nyheten är att Adobe verkligen gör stora förbättringar med varje release.
Frenzyen om CS6 är på heltidstorlek sedan Adobe släppte en gratis beta-förhandsvisning av Photoshop. Fantastiska nya funktioner inkluderar ett uppgraderat gränssnitt (mörk är ett alternativ nu), Typ Styles som liknar styckeformat i Illustrator och InDesign, ett Blur Gallery som gör skärpedjup och tiltväxlingssimulering mycket enklare, ett rethought-grödverktyg, lagsökning, skikt grupp masker och mycket mer. Stör inte ens motstånd, du vet att du vill ha det.
CS6 Diskussion
- Förbättringar av Photoshop CS6
- Topp 7 Photoshop CS6-funktioner
- Photoshop CS6 Blur Gallery-handledning
- Adobe Photoshop CS6 Beta Hits 500 000 Nedladdningar
- Vår första titt på Photoshop CS6
Mönster
Det här är en intressant en som du kan misstolka först. Av? Mönster? Jag menar inte rutig, rutig eller någon visuell repetitiv konsistensliknande design. Istället är det jag refererar till är den systematiska analysen av webbdesign och hur den vanligtvis uppnås både från visuellt och kodande perspektiv.
Om du bara svarade med en stor, va? Låt mig sedan förklara.Förra året skrev jag en artikel med titeln 10 Rock Solid Website Layout-exempel där jag diskuterade populära layoutmönster som ses på otaliga webbplatser över hela webben och varför de fungerar bra. Dessa har ingenting att göra med färg, textur, typografi eller något som är specifikt men snarare ta en titt på det absoluta baslagret på den konstruktion som resten bygger på.
Detta ämne expanderar till kodning också. Webbplatsen Pears visar typiska mönster av HTML- och CSS-parningar för vanliga designelement som navigationsmenyer, sidfot och miniatyrgridar.
Mönsterigenkänning, analys och delning är en trend som värmer upp och jag förväntar mig att den fortsätter att öka i popularitet, speciellt då Responsive Web Design driver nya paradigmer och metoder i både kodning och layout.
Mönsterdiskussion
- Responsive Navigation Patterns
- 5 riktigt användbara, responsiva webbdesignmönster
- Multi-Device Layout Patterns
- Viktiga JavaScript Design Patterns
- Fördelar och nackdelar med 6 CSS Layout Patterns
Leverantörs prefix
Vi har alla använt CSS3 tillräckligt länge för att antingen vänja sig eller bli trött på webbläsarspecifika leverantörs prefix. När du använder något som är ganska nytt i CSS, är odds det du måste repetera om och om igen för alla möjliga webbläsare. Ett perfekt exempel på hur galen det blir är CSS-gradienter. Här är den rekommenderade koden för att implementera en enkel tvåfärggradient:
Crazy rätt? Vissa säger att det här är en bra sak för webben, andra säger att det är rent giftigt. Även om vi har använt prefix för ett tag har värmen i denna debatt plötsligt blivit upp till max. Alla har en annan åsikt om varför prefix hjälper eller skadar och det verkar som om en konsensus eller till och med några solida förslag till ett bättre system inte är var i sikte.
Prefix Diskussion
- Varje gång du ringer en egen egenskap? CSS3 ,? en kattunge Dies
- Säljaren Prefix Predicament
- Leverantörs prefix är inte utvecklingsvänliga (Paul Irish)
- TL; DR på försäljaren prefix drama (Chris Coyier)
- Leverantörs prefix - Om att gå söderut
- Stor fråga: Är leverantörs prefix skadliga på webben?
- CSS-leverantörsprefix hotar öppen webb
Progressiv förbättring
Den gamla? Progressiv Förbättring mot Graciös Fördjupning? debatt är inget nytt. För det mesta verkar det som om vi började med graciös nedbrytning och sedan vidare till progressiv förbättring som en förmodligen överlägsen metod.
Den progressiva förbättringsrörelsen har ansträngt massor av diskussioner och idéer under de senaste åren. Ämnen som? Mobil först? design omfamnar progressiv förbättring som det bästa sättet att se till att det maximala antalet människor som möjligt kan njuta av webben i största möjliga utsträckning.
Frågan för 2012 är, vad kommer nästa ?? Är det möjligt att begrepp som är inneboende i progressiv förbättring faktiskt håller webben tillbaka i stället för att flytta framåt? Ska vi utveckla våra idéer eller helt och hållet överge denna praxis helt och hållet? Kolla in artiklarna nedan för det senaste i debatten.
Progressiv förbättringsdiskussion
- Progressiv förbättring är ett hinder för framsteg
- Progressiv förbättring är mer relevant än någonsin
- Massivt mobil progressiv förbättring | Är din webbplats framtidsvänlig?
- Progressiv Förbättring 2,0 - Nicholas Zakas
- Progressiv Förbättring: Allt du behöver veta är här
spelifiering
Den heliga graden av absolut vilken typ av design som helst är engagemang. Det är det vi alla syftar till i varje projekt som vi börjar på. I slutändan vill vi att människor ska uppleva, njuta och förhoppningsvis ens återvända till våra projekt.
Flera trender har kommit och gått som löftet att hålla nyckeln till den här elusiva varelsen, men den nuvarande favoriten är gamification. Konceptet som driver detta är ganska grundläggande: människor älskar spel, så låt oss göra allt till ett spel. Du behöver bara ta en titt på Foursquare för att se ett effektivt exempel. Dessa personer ville skapa en app som gjorde det möjligt för dig att dela din ankomst till vilken plats som helst. Det var ett intressant koncept, men hur skulle de få folk att faktiskt använda appen? Vad är incitamentet?
Svaret: Gör det till ett spel! Incheckningen tjänar dig märken (värdelösa pixlar men bra för bragging rättigheter). Att vara den användare som besöker en plats, gör dig mest till borgmästaren, som i sin tur kan tjäna dig rabatter och priser i den verkliga världen. Det finns till och med en ledarkort som berättar dig dagligen hur du rankar mot dina vänner. Det visar sig att konkurrensen ökar interaktionen.
Denna idé leder till en dramatisk omprövning av alla typer av webbplatser, applikationer och sociala nätverk. Nya startupar dyker upp av dussintalsna som lovar att gamify något nytt område som ingen annan har hävdat för ännu.På mikronivå ser befintliga företag på att spela ut små delar av sin webbplats eller app för att göra det vardagliga spännande. Kommer gamifieringen att leda till ett långsiktigt skifte mot en roligare web eller är det bara en övergående trend som kommer att försvinna snabbare än du kan säga Gowalla?
Gamifieringsdiskussion
- Gamification - Nuggets of Wisdom eller Fool's Gold?
- Framtiden för webbdesign är engagemang
- Gamingens fördelar och fallgropar
- Online marknadsföring & Gaming genom design
Vad missade jag?
Jag är säker på att åtminstone några av ovanstående ämnen ligger rätt i linje med vad du har tänkt, pratat och / eller oroat dig för nyligen. Lämna en kommentar nedan och låt oss veta vilka av dessa har tänkt dig mest och vilken sida du är på i de många debatterna ovan.
Denna lista med tio ämnen klarar knappt noggrant repor på heta webbdesignkoncept. Låt oss veta om andra buzzwords du har hört mycket nyligen och vad du tycker om dem.
Bildkällor: Yutaka Tsutano & Phil Roeder