Share
När tabletter och smarta telefoner började dyka upp, utvecklade många utgivare tydligt separata webbplatser, eller åtminstone tydligt genererade HTML-kodträd, för att anpassa upplevelsen för besökare på olika enheter. Visst har lösningar uppstått för att underlätta det, till exempel den här mobila WordPress-templuggen:
Men för att verkligen ge en solid upplevelse för besökare på alla enheter krävde de flesta projekt dubbla eller tredubblade design, kodning och testning.
Konceptet med lyhörd webbdesign försökte förena kodträdet, eliminera kodgafflar och ge ett enklare tillvägagångssätt för att ge en högkvalitativ användarupplevelse över enheter. Först krävde det lite experiment och lite tidig kompetens, men idag har det blivit vanligt. Det är ett testament till orienteringen kring DRY-teknik.
När jag lanserade min personliga WordPress-webbplats, var det fortfarande lite språng att välja responsiv design, och många webbplatser utfördes med olika kvalitetsnivåer för din besökares upplevelse.
Twitter: s open source-release av Bootstrap hjälpte omvandling av respons i webbdesign enormt. Förmodligen, som jag, kör du ett lyhörd tema på din webbplats och känner till de allmänna begreppen dynamisk presentation. Men vet du hur lyhörd webbdesign fungerar under huven? Vet du hur man bygger något lyhörd från början? Vill du lära dig mer?
I denna handledning uppmuntrar vi dig att kolla in Teleriks senaste vitbok om responsiv webbdesign (RWD). Måste-tekniker för att bygga HTML5 Apps för vilken skärmstorlek som helst, som du kan ladda ner gratis nu, ger en enastående detaljerad guide för att svara på dessa frågor och hjälpa dig att komma fort.
Det finns många anledningar till varför lyhörd webbdesign har gått från att kallas en trend för att vara synonymt med webens bästa praxis. Det är ett snabbt och kostnadseffektivt sätt att servera en skräddarsydd upplevelse för stationära och mobila webanvändare. Du kan använda din befintliga kompetensuppsättning, ha en kodbas, en uppsättning webbadresser och ett designsprog.
Vitboken lär dig vad du måste veta om responsiva webbpraxis så att du kan skapa appar för vilken skärmstorlek som helst. Det lär dig hur man:
I denna handledning ger jag dig en kort sammanfattning av vad vitboken erbjuder. Jag deltar också i diskussionerna nedan. Om du har ett frågeformulär eller ett ämne, vänligen skicka en kommentar eller tweet på mig @ reifman eller maila mig direkt.
Här är några av de områden som vitboken lär dig om.
Mediefrågor är en del av CSS3, och det är det som gör det möjligt att göra responsiv webbdesign.
I huvudsak bidrar mediefrågor till webbläsaren att berätta villkor i din CSS-kod hur man stilar, döljer eller avslöjar innehållsämnen.
Här är ett exempel på den minsta enhetsstorleken på upp till en med en bredd större än 768 px:
/ * Basstil för små enheter små och uppe * / .hero-text font-size: 22px; / * För stor och upp * / @media bara skärm och (min bredd: 768px) .hero-text font-size: 48px;
Populära ramar som Bootstrap, Foundation och Telerik RadPageLayout gör omfattande användningen av mediafrågor för att skapa sina kraftfulla nätsystem.
Med hjälp av mediefrågor inom din kod kan du konstruera formatark med gridar som svarar flukt på enheter - dynamiskt anpassar vad och hur besökaren ser ditt innehåll baserat på deras enhet och bredden på webbläsaren.
Syntaxen kan variera mellan ramverk, men det allmänna begreppet är detsamma. Varje enhetstorlek har en motsvarande mediefråga och stilegenskaper som skapar önskad layouteffekt. Dessa mediefrågor kallas brytpunkter. Bootstrap identifierar sina brytpunkter som xs (extra liten), sm (liten), md (med), lg (stor). Dessa hänvisar till enhetens storlek.
Här är några Bootstrap-exempel och vad de kan göra som på olika enheter:
Övre vänster är små enheter och mindre tabletter, till höger är medelstora enheter. Lägre är större enheter och stationära datorer.
Ett annat vanligt koncept är den grundläggande innehållsbehållaren. Behållarelementet är det yttersta elementet i layouten. Dess syfte är att skapa ett vitt utrymme mellan layouten och kanten på webbläsarfönstret.
Vitboken visar också att du lyssnar på webbdesign ger innehåll att expandera eller kontrakt baserat på besökarens skärmstorlek:
Jag tror att val av standarder är oerhört viktigt för framgångsrik mjukvaruutveckling. Det hjälper teamen att kommunicera och låter nya människor snabbt komma fart. Det gör att det blir lättare för personer att känna sig färdiga i standardteknik. Och det gör det lättare att uppgradera för säkerhet, prestanda och funktioner över tid, särskilt när du använder open source-teknik.
Att välja en vanlig ram i en responsiv webbdesign kan göra en stor skillnad för ditt projekts framgång eller misslyckande. Telerik-vitboken går igenom för och nackdelar med en av de mest populära, Bootstrap:
Bootstrap erbjuder bäst i klassfunktioner som ett solidt responsivt nät, mobil första design, CSS-hjälparklasser, adaptiva JavaScript-komponenter och mycket mer. Rutnätet är som standard ett standard 12 kolumngrid med en enkel syntax för att skapa layouter som stöder flera skärmstorlekar.
Vitboken lyfter också fram Zurb Foundation. Det är en öppen källkod som utvecklats från Bootstrap.
Stiftelsen är förpackad med avancerade funktioner som är lämpliga för lag med erfarna front-end-utvecklare, särskilt de som använder Sass.
Vitboken går också in i ett antal avancerade ämnen:
Utan att gå för långt ger det de flesta av oss en mycket detaljerad introduktion av de viktigaste aspekterna du behöver veta.
Jag hoppas att jag har fascinerat dig nog att du vill lära dig mer. Som projektledare som regelbundet hanterar personer med kompetens inom dessa problem, fann jag att detta var en super, lättbegriplig guide till lyhörd webbdesign och hur det fungerar.
Vill du dyka in? Besök Teleriks vitbokssamling och hämta Must-know-tekniker för att bygga HTML5 Apps för vilken skärmstorlek som helst nu.
Dessa responsiva ramar är viktiga utgångspunkter och inkluderar UI-komponenter för att få ditt projekt påbörjat. Komponenterna innehåller vanligtvis de grundläggande funktionerna som behövs för att driva och bygga prototyper. Däremot kräver dina mer avancerade och funktionella applikationer mer robusta användargränssnitt. Snart letar du efter en webbläsare som är anpassad för webben.
Telerik Kendo-användargränssnittet har ett responsivt rutnät, diagram, schemaläggare och flera komponenter som fungerar smidigt med alla svåra webbdesignramar som du använder. Det är gjord av vår sponsor som skapade RWD-vitboken ovan.
Jag vill bara ge dig en snabb visuell rundtur över vad du kan förvänta dig av Kendo UI:
Att bygga avancerade interaktiva rutnätkontroller är aldrig lätt. Kendo UI ger ett kraftfullt, flexibelt nät ur lådan:
Det finns ett schema (eller kalender):
Kendo användargränssnitt innehåller inbyggda diagram:
Och det finns en funktionsrik, lätt konfigurerbar editor:
Faktum är att det finns ett bibliotek fullt av 73 fler UI-widgets att lägga till på:
I grund och botten vid denna tidpunkt finns det två saker för dig att göra:
Jag hoppas att du är fascinerad av vad Teleriks HTML5-whitepaper kan erbjuda (och av Kendo UI Framework). Var snäll och skicka dina erfarenheter nedan, samt frågor och kommentarer. Du kan också tweet på mig @ reifman eller maila mig direkt och bläddra i min Envato Tuts + instruktörssida för att se andra handledning som jag har skrivit.
Accentsconagua