Responsiv webbdesign är redan ett decennier och är idealiskt för den multiscreen-anslutna världen som vi lever i. Men avvägningen för detta är i prestanda tack vare större filstorlekar.
Detta har lett till att några experter säger att, liksom de tidiga dagarna i Flash, är responsiv design något vi alla kan bli glada av för ingen bra anledning. Men medan det för närvarande finns prestationsproblem kan dessa övervinnas till viss del med några små justeringar, komprimering och bildåterställning.
Responsiv design laddar alla samma HTML-element för varje enhet, inklusive de som är avsedda för tablett och skrivbordsleverans. Det innebär att allt innehåll ofta levereras, inklusive bilder och skript, oavsett vilken enhet den ses på.
En studie genomfört förra året visade att 86% av de mottagliga webbplatser som för närvarande finns online levererar en fullständig skrivbordssida till mobila enheter. Det här är tydligt en trend för den designteknik som behöver hanteras, om vi ska stoppa utvecklingen av uppblåsta webbsidor i spåren.
För närvarande är den responsiva designen fördjupad på sidstorlekarna och det här är den trend som behöver åtgärdas, särskilt när du anser att 57% av mobilanvändarna kommer att lämna om webbplatsen inte laddar inom 3 sekunder.
För dem som redan har en design på plats och nu vill optimera, Mobitest kan användas för att mäta prestanda för att kunna fortsätta och adressera det. Naturligtvis, när man planerar en design, blir optimering enklare att genomföra på detta stadium och prestanda bör alltid betraktas som en viktig del av design snarare än en eftertanke.
För att förbättra prestanda måste storleken på sidorna och resurserna som laddas med den minskas. Detta kan utföras med hjälp av olika tekniker, utan att på allvar förändra webbplatsens utseende och känsla.
Det första du bör tänka på är hur man ser till att endast de resurser som behövs skickas till målenheten. Detta kan göras genom att minimera antalet HTTP-förfrågningar, så att användaren spenderar mindre tid att vänta på att DOM ska laddas. Detta kan i sin tur göras genom att komprimera CSS och Javascript-resurser, för vilka verktyg som Kompass - ett open source CSS authoring framework - kan användas. Detta gör det möjligt för utvecklare att skapa renare markup och skapa sprites och förlängningar med minimal krångel.
Med avseende på JavaScript, verktyg som UglifyJS kan användas, vilket komprimerar kod.
Detta kan betraktas som en viktig teknik när det gäller responsiv design, eftersom det kan användas för att se till att mobila och smarta telefonanvändare inte laddar ner sidorna på webbplatsen som saktar upp det eller att de inte kommer att använda.
Villkorlig laddning kan användas för att stoppa alla typer av innehåll från laddning, inklusive sociala widgets, bilder, kartor och mycket mer. Det är viktigt att notera på den här tiden att webbplatsen bör testas noga i varje steg av optimering så att det är lätt att se vad som har gjort skillnad när du går vidare.
Vi vet alla att bilder oftast är ansvariga för att ta upp den största mängden kilobytes på en webbsida. Det är också säkert att säga att bilder som är avsedda för en skrivbords-webbläsare kommer att underprestera när de levereras till en mobilenhet.
Om en webbplats också har mycket äldre innehåll kommer det att påverka prestanda ännu mer och på något sätt för att förhindra att innehållet laddas behöver implementeras. Medan detta kan göras genom att ändra markeringen genom att ändra src eller img-elementen, PHP-lösningen Adaptiva bilder är förmodligen lättare. Programvaran upptäcker skärmstorlek och skapar automatiskt, cachar och levererar lämpliga nedskalade inbäddade HTML-bilder utan att behöva ändra markeringen. För att användas tillsammans med Fluid Image tekniker är det en praktisk lösning och en som sparar mycket tid. Adaptive Images använder en htaccess-fil, en php-fil och en enda rad av Javascript för att bestämma skärmstorleken för besökare på webbplatsen.
Det är värt att tänka på text också, eftersom det kommer att förstärka naturligt när enheten är inskränkt och kan orsaka visningsproblem. FitText är ett verktyg som kan hjälpa till att adressera detta, en jQuery-plugin som automatiskt uppdaterar teckensnitt, med alternativ för de minsta och maximala storlekar som ska tillåtas.
Detta är perfekt för rubriker som kan visas dåligt på en mobilenhet och tillåter att CSS3-angiven teckensnittstorlek ignoreras. FitText är dock endast avsedd för rubriker och ska inte användas i stycktext.
Även om lyhörd design har sina problem, precis som någon relativt ny teknik eller teknik, är det fortfarande värt att välja att bygga en webbplats på detta sätt. Ingen vill gå bakåt och det kan vara lättare att bygga en mobilwebbplats, men det är mycket bättre att vara så innovativ som möjligt.
Google godkänner deras råd är att använda responsiv design som det bästa sättet att designa för mobil. Självklart för sökgiganterna betyder det att de bara har en webbadress att krypa, snarare än många webbadresser för vad som i grunden är samma webbplats, så det är i deras intresse verkligen.
Men i denna tid av social delning mani är det också meningsfullt, eftersom mobila användare kan dela en sida med någon som använder ett skrivbord. För att skapa en enhetlig upplevelse borde detta ge samma innehåll.
Vidare har en responsiv plats förbättrad produktivitet i arbetskraften, eftersom det i huvudsak är mycket mindre att göra. Detta gäller innehåll, uppdateringar och SEO, eftersom det kommer att behöva utföras separat om olika webbplatser är byggda.
Mobila enheter och surfplattor blir normen för att ansluta till internet och surfa på den här nästan post-PC-eran. Tabletsalget över hela världen har stigit på bara ett år, mer än fördubblingen under den tiden och med många konsumenter väljer man nu olika enheter som kör Android samt iOS.
Det råder ingen tvekan om att den hittills lyhörda designen har en positiv inverkan trots prestationsproblem. Enligt en rapport , som frågade några av världens främsta varumärken, hur en mottagande webbplats hade påverkat trafiken, besök på alla enheter ökade betydligt.
Detta innebar en genomsnittlig ökning på 23% av mobilbesökare samt en sänkt avvisningsfrekvens på 26%, med besökare som spenderade omkring 7,5% mer tid på webbplatserna än vad som tidigare sett.
O'Neill, den trendiga surfklädhandlaren, rapporterar en konverteringsfrekvens som är 65,7% högre på iPad och iPhone som ett resultat av att utveckla en mottaglig webbplats. Detta svarade för en tillväxt på 101,2% på dessa enheter ensam.
När det gäller Android-enheter var konverteringsfrekvensen ännu bättre, med en hel del 407,3%, vilket motsvarade en enorm omsättningstillväxt på 591,4%. En mindre konverteringsfrekvens sågs på icke-mobila enheter, även om tillväxten fortfarande sågs.
Det här är bara ett av de märken som släpper ut sina siffror och det är ganska svårt att få data från andra just nu, mycket som det var med effekterna av sociala medier för några år sedan. Det går emellertid något sätt att bevisa att avkastningen från att designa en mottaglig webbplats kan vara väsentlig.
Med tanke på detta, vilken ytterligare anledning behöver någon formgivare börja utforma responsivt för sina kunder och försöka se till att de utför så bra som de eventuellt kan? Det finns inte en, och de designers som inte vill bry sig om att lära sig att designa, bygga och optimera en webbplats med hjälp av responsiva tekniker kan hitta sig kvar i dammet.
67% av användarna säger att de har köpt via en mobilwebbplats och det antas att mobilt internetanvändning kommer att övervinna det på skrivbordet nästa år. Med allt detta i åtanke är det lätt att se varför företag blir mer och mer intresserade av de bästa mobila webblösningarna som de kan erbjuda.
Responsiv design kan fortfarande vara i sin linda för tillfället, men det verkar tydligt att efterfrågan på marknaden kommer att få den att växa upp snabbt, så det är värt att lära sig så många aspekter av disciplinen som möjligt nu.
Vilka tekniker har du använt för att optimera mottagliga platser? Avgör leveransen av alternativt innehåll fördelarna med responsiv design? Låt oss veta i kommentarerna.