Hur man gör responsiv design. Justera skärmupplösning
Månadens tema är webbresponsivitet, så vi bestämde oss för att prata mer i detalj om vad responsiv webbdesign är, varför det behövs och vad de grundläggande principerna för responsiv webbdesign är.
Responsiv webbdesign- en ganska ny riktning i designen av webbresurser, men nu är det en av huvudindikatorerna för webbplatsens kvalitet. I den här artikeln kommer vi att prata om vad responsiv webbdesign är och vad det kan vara.
Vad är responsiv webbdesign
Responsiv webbdesign (in engelska språket"Responsiv webbdesign") är designen av webbsidor som ger en utmärkt användarupplevelse. olika enheter ah, ansluten till internet.
Det betyder att samma sida kan ses mest olika enheter, oavsett skärmupplösning och format - smartphones, surfplattor, bärbara datorer, etc. Samtidigt kommer visningen att vara lika bekvämt för alla format – användare Mobil enheter, till exempel kommer det inte att finnas något behov av att utöka enskilda delar av webbplatsen för att inte missa den önskade länken.
Responsiv design syftar till att göra webbsidor och visningen av deras innehåll lämpliga för den enhet som de visas på.
Varför behöver du responsiv webbdesign?
1) En mängd olika enheter från vilka du kan komma åt Internet. För närvarande finns det många enheter som människor använder, inklusive för att komma åt Internet. Alla dessa enheter varierar i skärmstorlek, upplösning och därför hur en webbplats kan visas på dem. Därför är det viktigt att din webbplats ser bra ut och visas korrekt för alla användare, oavsett vilken enhet de använder.
2) Populariteten för mobila enheter med internetåtkomst och ökningen av mobil internettrafik. Med den växande populariteten för mobila enheter har antalet användare som kommer åt webbplatser från dem ökat märkbart, så du kan inte längre bara ignorera dem - det här är inte en eller två personer var sjätte månad, det här är en betydande del av din publik, och de borde vara bekväma med att använda din webbplats (annars gör de det inte).
3) Brådskande information. Om din resurs innehåller nyheter/brådskande information, och det är stor sannolikhet att användaren kan behöva läsa denna information från telefonen (eftersom han inte har några andra enheter till hands) i det här ögonblicket tid måste man se till att han har möjlighet att göra detta.
Skillnaden mellan en responsiv webbplats och en mobilversion (applikation) av en webbplats
Mobilversioner av webbplatser och mobilapplikationer, speciellt utformade för olika mobila enheter, löser också problemet med att det är lätt att se webbplatsen, men har vissa nackdelar.
1) För varje typ operativ system du behöver din egen applikation/webbplatsversion. Detta kräver ytterligare resurser, både tid och pengar.
2) Behovet av att ladda ner applikationen. För att kunna använda din app måste användarna ladda ner den. Detta kräver en viss extra ansträngning från användarna, och många kommer inte att göra detta om de inte är helt säkra på att de verkligen behöver applikationen och planerar att använda den regelbundet.
3) Trafikseparering. Ur webbplatsfrämjande synvinkel är en mobilapplikation inte bekväm eftersom den delar upp all resurstrafik i webbplatstrafik och applikationstrafik, vilket kommer att se ut som mindre webbplatstrafik.
4) Behovet av att integrera platsmaterial. När det gäller en mobilapplikation måste du antingen synkronisera webbplatsen med applikationen (ytterligare resurser), eller göra dubbelarbete på att fylla platsen och ansökan med material.
Till skillnad från mobilapplikationer, adaptiv design är en webbplatsadress, en design, ett ledningssystem och webbplatsinnehåll.
Adaptiv design har förstås också sina nackdelar, varav den främsta är teknikens relativa nyhet och som ett resultat bristen på bra specialister och kunskap om att designa adaptiva webbplatser.
Principer för responsiv design
Design börjar med adaptiv version webbplats för mobila enheter. I detta skede strävar designers efter att korrekt förmedla innebörden och huvudidéerna med hjälp av en liten skärm och bara en kolumn. Innehållet reduceras vid behov, tar bort oviktiga informationsblock och lämnar det viktigaste.
- Designa för mobila enheter från de tidigaste stadierna ("mobilen först");
- Använda en flexibel, rutnätsbaserad layout;
- Användande flexibla bilder(flexibla bilder);
- Arbeta med mediafrågor;
- Tillämpa stegvisa förbättringar.
Typer av responsiva layouter
Artikeln om Habrahabr presenterar huvudtyperna adaptiva layouter, som för närvarande finns.
1) Gummi
Lätt att implementera och uppenbar för användaren typ av webbplatspresentation. Huvudblocken komprimeras till bredden på mobilenhetens skärm, där detta är omöjligt - de arrangeras om till ett långt band.
2) Överföra block
Ett självklart sätt för en webbplats med flera kolumner: när du minskar skärmens bredd ytterligare block(sidofält) flyttas till botten av layouten.
3) Byt layout
Denna metod är mest bekväm när du läser en webbplats från olika enheter: en separat layout utvecklas för varje skärmupplösning. Metoden är arbetskrävande, därför mindre populär än de två föregående.
Byta layout fragment av LukeW Ideation + Design-webbplatsen
4) Anpassningsförmåga "med lite blod"
En mycket enkel metod som passar för enkla sajter. Uppnås genom att helt enkelt skala bilder och typografi. Inte särskilt populärt eftersom... saknar flexibilitet.
Anpassningsförmåga med lite blod. Fragment av webbplatsen LukeW Ideation + Design
5) Paneler
En metod som kom från mobilapplikationer, där en extra meny kan dyka upp med en horisontell eller vertikal tryckning. Den största nackdelen är att åtgärderna inte är uppenbara för användaren: det är väldigt ovanligt att se mobilnavigering på en webbplats. Men med tiden kan metoden bli ganska populär.
Man måste komma ihåg att layouterna som presenteras ovan inte är det universella lösningar- för varje projekt är det nödvändigt att välja den mest lämpliga metoden för behov och kapacitet.
Närvaron av adaptiv design är en nödvändighet - livet har bevisat detta med sin rake, ingen mobil Joomla ger en sådan effekt som direkt anpassning av webbplatsen. Idag ska jag berätta hur man gör en responsiv design genom redigering CSS-stilar med ditt huvud och fingrar. Det kommer inte att vara möjligt att sätta allt i detalj, eftersom varje mall har nyanser, men jag kommer att ge en impuls att börja anpassa.
Anpassning för skrivbordet
Först anpassar vi den för skrivbordet. Detta är grundstadiet, från vilket dansen med en tamburin börjar. Många människor felaktigt uppfattar världen och tror att med visningen av en webbplats på vanliga datorer de har inga problem, eftersom någon designat mallen, och den ser smidig ut vid normal upplösning. Med upplösningen på din bildskärm, ja, men hur ser du ut på en större skärm, hur ser du ut med absolut och pixlar på en skärm med en upplösning på 1920x1080? Syftet med att anpassa designen är att visa sidan normalt på mobila enheter och undvika eventuella problem på stora skärmar.
Vad gör vi? Det viktigaste är att konvertera alla stora värden till mall css från pixlar (px) till procentsatser (%). Det finns flera regler här:
- - Vi ändrar px med % endast för stora värden, det finns inget behov av att ändra 5 px med 1 % (till exempel),
- - Gör allt arbete genom Firebug och överför sedan värdena till det verkliga livet.
Lite för gemensam förståelse. Du har en webbplats där sidbredden är 1000 px, den har tre block - en central 800 px och två sidofält på 100 px. Detta innebär att efter att ha ersatt med procentsatser blir sidstorleken 100 %, den centrala behållaren blir 80 % och sidoblocken blir 10 %. Grovt, men förståeligt. Nu lite mer detaljerat.
Jag har före anpassning (sparad för historia gammal fil CSS) var huvudbehållaren utformad så här:
#container(margin:0 auto;width:1100px; …
Efter anpassningen blev det så här:
#container(marginal:0 auto;width:77%;overflow: dold !viktigt; …
Toppmenyn har ändrats från:
Toppmenyn>ul>li ul(bredd:155px; …
Toppmenyn>ul>li ul(bredd:90%; …
Och förskjutningen av innehållsblocket implementeras med:
#content(marginal:0 220px; …
#content(marginal:0 20% …
Var uppmärksam på koden:
overflow: dold !viktigt;
Vi använder det för att ta bort horisontell rullning, detta är användbart för mobilanpassning, ibland är det vettigt att bara inaktivera horisontell rullning med:
overflow-x: dold !viktigt;
Utför allt arbete genom Firebug eller Google-inspektören, kolla med ögonen - sajten ska se likadan ut efter att px har konverterats till %. Du behöver inte klämma på skärmen än, vi har inte kommit till mobilanpassning än, vi har gjort det än grundläggande arbete För stora skärmar.
CSS för mobila enheter
Databasen har skapats, förresten, detta är det svåraste steget nu måste vi se till att sidan visas korrekt på alla mobila enheter. Det finns få tidigare manipulationer, eftersom det inte kommer att vara möjligt att komprimera allt till en procentsats för en liten skärm. Håller med, det är omöjligt att se en 10% bred webbplatsfält på en smartphone med en upplösning på 320 px.
Vi måste använda @media screen och som gör stiländringar för enheter med en specifik upplösning. Jag bestämde först genom att minska webbläsarskärmen till vilken upplösning jag hade skärmproblem. När jag minskade skärmen hittade jag min "krökning", den börjar på en bredd av 1000px, vilket innebär att skriva ner huvudet mobila stilar härifrån - allt som kommer att visas mer i stilarna på ett vanligt skrivbord, och mindre i separata stilar.
Exempel @mediaskärm och
Jag har skrivit CSS för mobila enheter på Joomla mall 1.5 så här:
@mediaskärm och (max-width:500px)(body, tbody(-moz-bindestreck:auto;-webkit-bindestreck:auto;-ms-bindestreck:auto;bindestreck:auto;)
@media skärm och (max-width:400px)(td(word-break:break-all;)
@media skärm och (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (display: none !important ;) #content (position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container (width: 90% !important;).content-box (bredd:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (font-size: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)
Några detaljer om koden.
När skärmens bredd är mindre än 1000 px slutar sidofälten, sidhuvudet, sidnumren och sidfoten att visas. Min åsikt är att de är det mobilversion Behövs inte. Detta är vad koden gör:
Sidnummer, #sidfot, #navigation, #header,.logo,.nav-box (visning: ingen !viktigt;).
Som standard, i mobil Joomla 3 och högre, går sidoblocken ner, vilket sträcker ut sidan till en skam, så även på nya motorer kan du korrigera vissa saker manuellt.
Andra värden anges också för blocken i huvudbehållaren och innehållsfönstret, och utdata från H1-H4 konverteras till procentsatser (pixlar passar mig för skrivbordet). Korrigeringar har gjorts i utgången. topp meny(Lyckligtvis måste det minimeras, men detta är inte kritiskt och jag kommer att göra det senare) och visningen av bilder har ändrats:
img(max-width:96% !viktigt;höjd:auto !viktigt;).
För dem indikeras det maximal storlek Bredden på bilderna är 96% (med fina indrag), och höjden ställs in automatiskt.
Detaljerna är över, än en gång allmän känsla anpassning av webbplatsen (design) med CSS.
- - Ändra stora px-värden till %,
- – Vi registrerar separat @mediaskärm och för mobila enheter.
Via @media-skärmen och se till att stänga visningsblocken som är onödiga för mobilen, men konvertera till % de värden som visas felaktigt, eftersom de lämnades i pixlar i skrivbordsversionen av CSS.
Som ett resultat var användarupplevelsen när man arbetade med Joomla Mobile 65-70 %, med responsiv design med CSS blev den 99 %. Slutsatserna är uppenbara: Yandex och Goole testades inte för anpassningsförmåga, men nu passerar de med en smäll.
Att skapa en responsiv webbplatsmall är tillräckligt enkelt, men att hålla elementen balanserade på alla punkter i mallen är en riktig konst. Denna handledning introducerar 5 tekniker att använda i CSS för en responsiv mall. Det finns mycket enkla egenskaper CSS som min-width, max-width, overflow och relativa värden, men de spelar alla en viktig roll för att utveckla responsiva designs.
1. Adaptiv video
Detta CSS-trick låter den inbäddade videon sträcka sig till de angivna gränserna.
Video (position: relativ; utfyllnad-botten: 56,25 %; höjd: 0; överflöde: dold; ) .video iframe, .videoobjekt, .video embed (position: absolut; topp: 0; vänster: 0; bredd: 100 % höjd: 100% )
2. Minsta och maximala bredd
Egenskapen max-width låter dig ställa in den maximala bredden på ett element. Den ska användas för att förhindra att ett element expanderar utanför en viss ram.
Container med maxbreddsegenskap
Exemplet nedan definierar behållarstorleken som 800 px, men anger storleksgränsen till 90 %.
Behållare (bredd: 800 px; maxbredd: 90 %; )
Adaptiv bild
Du kan ändra storlek på en bild automatiskt till dess maximala storlek med egenskaperna max-width:100% och height:auto.
Bild (maxbredd: 100 %; höjd: automatisk; )
Ovanstående kod är för adaptiv bild fungerar i IE7 och IE9, men fungerar inte i IE8. För att rätta till situationen måste du lägga till egenskapen width:auto. Du kan använda villkorad CSS-regel specifikt för IE8 eller lägre givet trick för IE:
@media \0skärm ( img ( bredd: auto; /* för dvs. 8 */ ) )
min-bredd egendom
Egenskapen min-width är motsatsen till egenskapen max-width. Den ställer in minsta möjliga bredd på elementet. Nedan är ett exempel på hur man använder egenskapen min-width för att förhindra att inmatningsfältet blir för litet när det zoomas ut.
3. Relativa värderingar
I adaptiv mall Att använda relativa värden kan avsevärt förenkla din CSS-kod och förbättra utseende design.
Relativa fält
Nedan är ett exempel på kommentarer som använder den relativa bredden på vänstermarginalen för att skapa indrag i en trädstruktur. Istället för absolutvärde px använder procentvärdet för nästa nivå i listan. På vänster sida av figuren kan du se att på mobila enheter kanske det tillgängliga utrymmet för listobjekt inte räcker för normal visning om absoluta värden används.
Relativ teckenstorlek
Genom att använda relativa värden för teckenstorlek (em eller %) kan du enkelt uppnå lämpliga ändringar i linjehöjd och indragsstorlekar när du anpassar mallen till enhetens skärmstorlek. Till exempel ändras storleken på alla relaterade element automatiskt när du ställer in nya teckenstorlekar för det överordnade elementet.
Relativ stoppning
Figuren nedan visar fördelarna med att använda ett relativt %-värde för utfyllnad. Blocket till vänster har obalanserat utrymme vid tillämpning av absoluta px-värden. Blocket till höger har fantastisk utsikt med proportionell fyllning av innehåll.
4. Trick med overflow:hidden-egenskapen
Du kan förhindra att text lindas runt ett element med hjälp av overflow-egenskapen. Väldigt enkelt och användbart sätt. Du kan avbryta textbrytning föregående element och behålla innehållets struktur.
Egenskapen max-width hjälper till att placera okrossbar text (som long URL-adress) i flera rader istället för en.
Break-word ( word-wrap: break-word;)
Hälsningar, tillfälliga besökare och regelbundna läsare av bloggsidan!
Under den här sidans existens ändrade jag mallen flera gånger och skapade till och med min egen från grunden.
En av huvuduppgifterna när du väljer en ny mall är den adaptiva layouten av webbplatsen för alla skärmupplösningar.
Kort sammanfattning av artikeln:
I en tidigare artikel skrev jag redan om varför det behövs. Men hur uppnår man just denna anpassningsförmåga?
För detta finns olika sätt. Vissa använder javascript, andra använder något annat. Men jag tror att det enklaste och Den rätta vägenär en adaptiv använder CSS.
Hur man gör en responsiv webblayout
För det första,
om du bestämmer dig för att skapa en responsiv webbdesign, mellan taggarna
Vilken dum jag var att jag inte gjorde det här direkt när jag försökte göra en adaptiv webblayout!!!
Problemet med mobila webbläsare är deras skalning av webbplatslayout, även adaptiva sådana.
Föreställ dig, jag ritar en design, skriver sedan ner alla nödvändiga stilar och frågor, kontrollerar sajtens anpassningsförmåga när olika upplösningar. Allt verkar vara bra! Men när jag öppnar min blogg på min smartphone ser jag att sidan helt enkelt har krympt. Den anpassade sig inte till den mobila enheten, utan minskade helt enkelt storleken på teckensnitt, bilder osv.
Hur så? Jag började dubbelkolla alla stilar för att se om jag hade skrivit klasserna korrekt, och så småningom kom jag till den punkt där jag kontrollerade bredden på webbläsarfönstret i px med javascript. Jag var chockad. När jag kollade på en bärbar dator fick jag ett resultat på 1024px, och jag fick ungefär samma resultat när jag öppnade sidan på en smartphone!
Men detta kan inte vara!
Visar sig, om du inte skriver koden som jag angav ovan, mobil webbläsare förstår inte att sajten är responsiv och försöker helt enkelt göra webbsidan mindre så att den passar in i en liten mobiltelefonskärm.
På grund av min dumhet och inkompetens förlorade jag mycket tid. Men nu kommer jag ihåg det för alltid))).
Adaptiv layout CSS-mediafrågor
För att göra det responsivt med CSS måste du använda mediafrågor.
Hur kommer det sig? Ja, väldigt enkelt. I CSS-fil du måste skriva frågor som:
@mediaskärm och (min-bredd: 1440px) och (maxbredd: 1599px)( )
Den här koden betyder att stilar som är inneslutna mellan "( )" kommer att fungera för skärmar med en minsta bredd på 1440px och högst 1599px.
Det vill säga att de stilar av webbplatselement som måste anpassas beroende på skärmupplösning måste skrivas separat för varje möjlig skärmbredd.
De viktigaste skärmupplösningarna för adaptiv layout
- 320 pixlar- Mobila enheter (stående orientering);
- 480 pixlar- Mobila enheter (liggande orientering);
- 600 pixlar- Små tabletter;
- 768 pixlar- Tabletter (stående orientering);
- 1024 pixlar- Surfplattor (liggande orientering)/Netbooks;
- 1280 px eller mer- PC.
Det är dessa tillstånd som måste betonas och ges Särskild uppmärksamhet med adaptiv layout. Dessa är de vanligaste typerna av skärmupplösningar.
bootstrap responsiv design
Mycket bekväm att använda för att skapa adaptiva bootstrap layout. Bekvämligheten är att alla stilar för anpassning av block, knappar, bord etc. är redan registrerade i bootstpap. Du behöver bara ta reda på vilken klass du ska tilldela vilket element.
För att komma igång, ladda ner den senaste versionen av bootstrap och anslut den till din webbplats. Observera att koppling av stilar och skript till WordPress har sina egna egenskaper.
Layouten på Bootstrap är annorlunda genom att bredden på blocket eller skärmen är uppdelad i 12 lika delar. Och genom att tilldela en viss klass till ett block kan du ställa in bredden på blocket lika med det nödvändiga antalet delar.
Till exempel kommer denna design att tillåta dig att tilldela ett brett block för innehåll 8 delar brett och ett smalt block för en sidofält 4 delar brett:
Bredden på blocken kommer att beräknas automatiskt beroende på skärmens bredd. Och när de visas på en mobil enhet kommer dessa block att flyttas under varandra.
Du kan också justera blockets avstånd från kanten, igen, till det antal delar som krävs. Till exempel denna design:
Ett block 10 delar brett kommer att skapas med en vänster indrag på 1 del av skärmen.
Om du tittar på det, gör arbetet med bootstrap arbetet väldigt snabbt. Dessutom fungerar dessa stilar definitivt korrekt och det kommer inte att finnas något snett på sajten.
I framtiden planerar jag att lägga upp flera lektioner om att arbeta med bootsrap. Därför råder jag dig att inte missa detta ögonblick.
Kontrollera webbplatsens anpassningsförmåga
Men frågan uppstår: hur kontrollerar man webbplatsens anpassningsförmåga? Nu har du skrivit mediefrågor i CSS, kopplat upp bootstrap och använt de nödvändiga klasserna. Hur kan man kontrollera att sajten anpassar sig korrekt vid alla skärmupplösningar?
Mycket exakt och viktigast av allt gratis tjänst, som förtjänar respekt och tacksamhet från webbansvariga och layoutdesigners som sysslar med adaptiv layout webbplatser.
Nåväl, hur gillar du artikeln? Allt klart? Om inte, skriv i kommentarerna, så löser vi det tillsammans.
Ja, för att göra en responsiv webbdesign måste du arbeta hårt. Men dessa ansträngningar kommer att belönas med en positiv attityd till din webbplats från sökmotorer, och viktigast av allt, besökare på din webbplats.
Översättning av den extremt värdefulla artikeln "Responsiva webbdesigntekniker, verktyg och designstrategier" från den populära onlinepublikationen för utvecklarna Smashing Magazine.
Tillbaka i januari publicerade vi en artikel om responsiv design, "Responsiv webbdesign: vad det är och hur man använder det." Responsiv webbdesign fortsätter att få mycket uppmärksamhet, men med tanke på hur annorlunda det är... traditionella metoder webbplatsutveckling kan det verka oöverkomligt komplicerat för de designers och utvecklare som inte har provat det.
Av denna anledning har vi sammanställt en recension av resurser som är användbara när du skapar responsiva webbplatser. Granskningen inkluderade detaljerade guider, tillvägagångssätt, verktyg, artiklar som innehåller praktiskt råd nödvändigt för att skapa din egen responsiva webbplats.
Responsiv webbdesignteknik
1. CSS-övergångar och mediefrågorCSS-övergångar och Mediafrågor
Elliot Jay Stocks går in i detalj om metoden för att kombinera CSS Media Queries och CSS-övergångar. Grundidén är denna: när du designar en responsiv sajt med hjälp av Media Queries ändrar du hela tiden bredden på din webbläsare för att se hur sajten beter sig. Men varje gång en av dina mediefrågor bearbetas är den synlig hård övergång mellan stilar (den första, till exempel för stationära datorer, den andra - för surfplattor). Varför inte använda CSS-övergångar för att jämna ut de hårda övergångarna med animering?
Responsiva bilder och videor
5. Flytande bilderGummibilder (webbläsarskalning)
Gummibilder är ett av de centrala teman i responsiv webbdesign. Artikeln av Ethan Marcotte ger detaljerad genomgång skapa dem med ett klassiskt kodavsnitt img (maxbredd: 100 %; ), samt alla nödvändiga delar som behövs för att komma igång.
Responsiva e-postmeddelanden
14. Optimera din e-post för mobila enheter med mediafråganOptimering E-post för mobila enheter som använder Media Queries
För att se stora e-postmeddelanden är horisontell rullning ofta nödvändigt, särskilt när det finns en bilaga till e-postmeddelandet. stor bild. I den här studien Campaign Monitor förklarar hur e-postmeddelanden kan optimeras för mobila enheter som använder Mediafrågor och föreslog flera användbara metoder och kodavsnitt för praktisk användning.
Verktyg för responsiv webbdesign
Du kan designa adaptiv design från grunden eller använd verktygen nedan för att påskynda och förenkla processen att skapa en.Detta är en snabb och lätt Polyfill (en kodbit som lägger till funktionalitet som inte stöds av webbläsaren) skapad av Scott Jehl för att stödja min-width och max-width-egenskaperna från CSS3 Media Queries i IE6-IE8 och högre.
Använd informationen från detta lilla verktyg för att skapa en responsiv webbplats.
Ett verktyg för snabb prototypframställning av responsiv design. Du kan designa CSS för en mängd olika populära skärmstorlekar, orienteringar och webbläsare, oavsett om det är telefoner (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), surfplattor (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), bildskärmar eller TV-apparater (720p, 1080p).
Du kan se dina designresultat direkt i din webbläsare och använda dina favoritutvecklingsverktyg, som Firebug. Prova även det alternativa verktyget ScreenFly.
Verktyget 320 och upp är baserat på principen mobil först(mobil först), där designen skapas först för mobila enheters skärmar och sedan utökas för surfplattor, stationära datorer och större skärmar. Det fungerar bra både som ett tillägg till HTML5-planen och på egen hand.
Dessa är anpassningsbara mallar för att skapa funktionsrika, högpresterande mobila webbapplikationer. Du kommer att få kompatibilitet över webbläsare för klass A smartphones och bra stöd för gamla BlackBerry, Symbian och IE Mobile. Och Ett stort antal olika optimeringar för mobila webbläsare.
Ramar för responsiv design
33. 1140 CSS Grid1140 CSS Grid optimerad för att fungera på skärmar som sträcker sig från storleken på mobila enheter till 1280px breda skärmar. Det är enkelt och flexibel mesh, använder sig av Mediafrågor.
Detta CSS-ramverk är en bra grund för utveckling på små skärmar (som telefoner) och små skärmar(t.ex. tabletter) direkt ur kartongen med minimal ansträngning. Dessutom finns det en generator för att skapa ett flexibelt CSS-ramverk för dig själv.
Flurid är ett gumminät med 6, 7, 8, 9, 10, 12 och 16 kolumner.
FluidGrids är en modulär nätgenerator som skapar 6, 7, 8, 9, 10, 12 eller 16 kolumnlayouter.
CSS-ramverk för att skapa responsiva layouter. Den innehåller 4 grundläggande layouter och tre typografiuppsättningar.
En flytande ram med fokus på typografi.
Tiny Fluid Grid hjälper dig att skapa ditt eget vätskenät med 12, 16 eller 24 kolumner, ställ in deras maximala och minsta bredd och utfyllnadsprocent.
Responsiva designstrategier
40. Den responsiva designerns arbetsflödeResponsivt arbetsflöde för webbdesignutvecklare
Luke Wroblewski tog anteckningar om Ethan Marcottes presentation om tillämpningen av principer för responsiv webbdesign för att modernisera webbsidan för en av de ledande tidningarna. Ethan förklarar bland annat hur han närmar sig responsiv webbdesignmetod och vad prototypprocessen är i samband med responsiv webbdesign.
Luke Wroblewski tog anteckningar vid Breaking Development Conference under Stephen Hays tal om verkligheten i att designa för olika enheter.
Diskussioner och olika synpunkter på responsiv webbdesign
Dessa artiklar, även om de inte är tutorials, kan ge dig värdefull information om varför du bör använda responsiv webbdesignteknik (och när du inte ska).En utmärkt introduktion till responsiv design som ett sätt att tänka snarare än ett verktyg eller teknik. Jeremy Keith hävdar att responsiv webbdesign inte bara kan läggas till som ett steg till ett befintligt arbetsflöde. Istället för att sträva efter pixel perfektion, bör vi sträva efter proportionell perfektion.
Publikationen är en kombination av filosofi och strategi för att ackumulera bästa praxis inom området responsiv design.
En regelbundet uppdaterad samling webbplatser som använder Media Queries.
I avsnitt 9 av The Big Web Show bjöd Jeffrey Zeldman och Dan Benjamin in Ethan Marcotte för att diskutera responsiv design.
Ett utmärkt tillägg till artikeln skulle vara en blogg om responsiv design, där utvecklare delar med sig av sina erfarenheter och skriver recensioner av responsiva verktyg.