Need Of The Hour är inte responsiv design utan responsiv prestanda
Responsiv design har uppvisat flera prestandaproblem den senaste tiden. Det ironiska är att den responsiva designen fungerar ganska bra på det senaste sortimentet av smartphones, men inget utöver detsamma.
Du kan bli förvirrad eftersom de flesta webbanvändare har avancerade smartphones. Men en stor befolkning använder fortfarande mobila enheter med en liten skärmstorlek som körs på en gammal version av Android eller iOS och kanske bara en funktionstelefon med lite funktionalitet. Som ett resultat tjänar responsiv design inte en bredare publik som man ska göra.
Den långvariga övertygelsen om att responsiv design är för mobila enheter oavsett skärmstorlek har mycket att göra med detta problem. Eftersom prestandan droppar och missnöjet ökar finns det ett behov av att se bortom responsiv design. Fokus bör istället ligga på att säkerställa en lyhörd prestation. Det här inlägget är ungefär detsamma.
Så den stora frågan är vad man ska göra?
Släng designkonceptet för det första skrivbordet
En betydande bidragande orsak till detta ihållande problem är att fokus fortfarande ligger på en desktop-first design approach. Tonvikten ligger på att designa en webbplats för en stationär dator och sedan designa för andra enheter som smartphones och surfplattor. För eventuell saknad funktionalitet använder utvecklare shims och polyfills generöst. Naturligtvis finns det stora bibliotek för att säkerställa en snabb utveckling. Detta tar dock inte upp problemet med webbläsarinkompatibilitet. Är det motiverat att engagera sig i ett designkoncept som inte ger önskat resultat?
Det är inte särskilt svårt att implementera en mobil-först designstrategi där målet kommer att vara att bara erbjuda den avsedda informationen till den mobila användaren på hans eller hennes skärm istället för allt som dödar enheten. Luke Wroblewski konceptualiserade denna designmetod för första gången 2011 och sedan dess har många branschexperter hyllat hans banbrytande designmetod.
Mer data, även om det tar en bråkdel av en sekund, kan ha en anmärkningsvärd inverkan på den totala laddningstiden. Men det är också sant att webbplatser blir tyngre med grafiskt innehåll, och fler människor använder sina mobila enheter för att komma åt detsamma. När en användare skriver webbadressen till en webbplats på en mobil med en lågupplöst skärm är hans mål alltid att komma åt webbplatsens innehåll, men det han upplever är en mardröm. Detta beror på svårigheten att navigera via de oändliga onödiga annonserna. Ta bort sådana undvikbara innehållselement för att ge din användare åtkomst till huvudinnehållet. Detta ökar webbplatstrafiken, eftersom många, förutom användare med avancerade smartphones, kommer åt din webbplats via mobila enheter med låg upplösning. Att leverera en textversion är perfekt om mobilen har begränsade möjligheter, men då kan du säga att användarupplevelsen äventyras. Jo, det är det, men det är fortfarande bättre än att inte ta emot något innehåll alls. Åtminstone i ett sådant fall kommer användarna att få tillgång till den grundläggande informationen om din webbplats. Är det någon mening med att designa en webbplats på ett sådant sätt att den minskar dess potentiella räckvidd?
Du kommer säkert att acceptera det faktum att att vänta oändligt bara för att kolla en webbplats inte retar någon. Enligt vissa undersökningar av Akamai och Gomez.com förväntar sig ungefär 50 % av webbanvändarna att en webbplats ska laddas inom 2 sekunder eller till och med mindre. Det finns fler chanser att webbplatsen överges om en webbplats inte kan laddas i webbläsaren inom bara 3 sekunder! Dessutom har de flesta e-handelswebbplatser numera ett stort antal sociala delningsknappar som Facebook, Google Plus, Twitter, LinkedIn, etc. Vet du att dessa knappar lägger till mer än 500KB till din responsiva sida och påverkar dess prestanda? Bara Facebook gilla-knappen kräver en komprimerad kod på 270KB! Det kräver också flera HTTP-förfrågningar. Istället,
En webbplatss prestanda har en direkt inverkan på ett företags prestanda och en långsam responsiv webbplats gör aldrig något bra för ett företag. Tro eller ej, de flesta mobilanvändare är inte intresserade av att forska eller läsa långa artiklar. De flesta av dem använder sina mobila enheter för enkel åtkomst till Facebook, WhatsApp, Twitter och för att njuta av glädjen med onlineshopping. Dessutom är mobil inte längre en trend, det är framtiden.
Enligt förra årets statistik för Comscore har antalet internetanvändare som endast är mobila i USA ökat kraftigt medan användare som endast använder datorer har minskat till 10,6 procent.
Behöver du säga något mer för att övertyga?
Säkerställ graciös nedbrytning
Under de senaste åren har du kanske stött på det nya modeordet i världen av responsiv design, och det är "graciös nedbrytning". Ja, graciös nedbrytning innebär att även om en funktion inte fungerar framgångsrikt bör den misslyckas på ett sätt som underlättar en acceptabel användbarhet. Det innebär att skapa en webbdesign för en stationär dator och sedan gradvis gå över till surfplattor, smartphones och funktionstelefoner. Prestandan för en responsiv design där webbplatsen är förnedrande på ett elegant sätt kommer definitivt att vara hög eftersom användarupplevelsen här alltid är av högsta klass. Webbplatsen kommer att förbli funktionell trots eventuella brister, och en besökare kommer säkert att bli imponerad av den övergripande kvaliteten.
Nu kanske du har den här frågan i ditt sinne, vad är det som är så fascinerande med graciös nedbrytning. Svaret är enkelt. Detta eftersom det gör ditt innehåll, synligt och läsbart oavsett webbläsare, vilket är en anmärkningsvärd bedrift! Lyckligtvis, om du använder CSS3, blir graciös nedbrytning ett enkelt jobb eftersom de flesta egenskaperna hos CSS3 försämras automatiskt, dvs rundade hörn blir kvadratiska, texten lindas istället för att köras på en enda rad, övertoningar blir platta färger och mycket mer.
Låt oss ta ett exempel på graciös nedbrytning. Anta att du har designat en responsiv webbplats med JavaScript-funktioner och att dessa funktioner inte stöds av din webbläsare eller kan vara inaktiverade på din kunds sida. Så vad kan du göra för att få innehållet? Tja, i ett sådant fall tillåter graciös nedbrytning din webbläsare att visa innehållet i "noscript"-taggen.
Detta kan du förstå bättre med kodningen nedan:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Det finns ytterligare ett exempel på graciös nedbrytning som jag skulle vilja dela med mig av, och det är YouTubes användning av HTML5 för att spela upp videor. Anta att din webbläsare inte stöder HTML5, videon kommer att visas med hjälp av Flash, och om ens Flash inte är installerat kommer du att få ett meddelande om att installera detsamma på din mobila enhet. I båda fallen kommer du att kunna se videon. En nackdel med denna graciösa försämring är dock att även om prestandan är bra, måste du kompromissa med vissa designelement om du använder föråldrade webbläsare. Jag antar att det kan göra susen att bestämma de väsentliga visuella delarna av din webbplats i förväg.
Du behöver inte behålla oanvända bibliotek
En bästa praxis kan vara att inte behålla bibliotek som inte används. Ja, det är sant att det är väldigt tidskrävande att hålla reda på de använda biblioteken och de oanvända, men det är verkligen värt det. Ibland kanske du har märkt att du bara använder en enda funktion efter införandet av ett bibliotek. Det kan ibland vara två eller tre till och med. Det vanligaste verktyget som jag använder för att skapa en responsiv design är jQuery. Faktum är att det finns gott om jQuery-bibliotek som hjälper utvecklare att skapa responsiva webbplatser. En inkludering av flera bibliotek som JavaScript-biblioteken bara för att du har gillat några widgets kommer att öka din sidas laddningstid avsevärt. Det kommer dock att vara en bra praxis att analysera vilka bibliotek som används och i vilken utsträckning.
Kontrollera tillgängligheten för funktioner
Du kan kontrollera om din enhet stöder en viss funktion eller inte innan du aktiverar den. Det händer till exempel att även om du har installerat den senaste versionen av Google Chrome på din föråldrade Android-telefon, så visar den fortfarande inte din webbplats. Ibland, i ett försök att ladda en sådan webbplats, kraschar webbläsaren så illa att det gör att hela mobilenheten inte svarar. Du måste starta om enheten, och det här är det sista du har önskat eller hur? Många användare av vissa webbapplikationer lider redan av detta problem.
Otillgänglighet av funktioner på enheter och ändå att designa webbplatser eller applikationer har resulterat i några märkbara problem som omedelbar krasch av Google Hangout-appar på Android-enheter över hela världen, oavsett webbläsartyp. Detta trots att appen var en lättviktsapp. Du kanske hävdar att användare använde en äldre version av Android-smarttelefoner, men det är också sant att sådana enheter fortfarande finns tillgängliga från hyllan som en helt ny i någon av mobilbutikerna. Många mobilanvändare möter samma prestandaproblem med YouTube och Twitter-appen också. Även en uppdatering av Googles Android System Webview-tjänst via Google Play fryser många smartphones för att bli en sorts mardröm för användare.
Optimera bilder
Att ta med visuellt tilltalande stora bilder är alltid frestande för formgivarna. Problemet uppstår när de inte komprimerar dessa bilder innan de laddas upp till CMS. Detta gäller särskilt med flera e-handelswebbplatser på webben. Enligt den senaste forskningen från Radware blir sidorna större och cirka 45 procent av de 100 bästa detaljhandelsajterna ägnar sig inte åt bildkomprimering. Detta gör sådana sajter skrymmande och som ett resultat ökar laddningstiden, men som designer kan du undvika problemet.
Gör bilderna med mindre storlek genom att använda ett lämpligt bildoptimeringsverktyg. Det finns faktiskt ingen brist på sådana verktyg över webben. Några av de anmärkningsvärda som du kan använda är Dynamic Drive, Smush it och Riot. Om du är ett proffs i Photoshop kan du också optimera bildstorleken själv. Använd en smart komprimeringsteknik och ta bort den från all överflödig metadata. Att konvertera grafik till PNG, färgrika bilder till JPEG och animerade bilder till GIF gör också susen.
Förberedd för extrema fall
När du börjar designa måste du ha märkt att du blir frestad att designa sidorna som är enklare. Detta gör åtminstone att du kan visa något för dina intressenter. Detta kan verka trevligt vid första anblicken, men om du fokuserar dina ansträngningar på de mest utmanande scenarierna, i början, kommer du att få ett bra resultat.
Till exempel en webbsida med några artiklar, bloggar och pressmeddelanden. Den måste ha en titel också. Nu, vad händer om titelutrymmet som du har tänkt visa "Responsiva webbdesigntips" måste visa titeln "10 viktiga tips och tekniker för framgångsrik responsiv webbdesign"? Nu är det här ett extremfall.
Ett försök som ovan för att optimera din responsiva webbplatss prestanda verkar osynligt. Dessa ansträngningar ger dock god avkastning med glada och nöjda användare. Du kan ta hjälp av olika verktyg som Pingdom- verktyg som kan göra det möjligt för dig att övervaka laddningstiden för din responsiva webbplats utan ansträngning. Hoppa inte över den viktiga aspekten av testning för att se till att din responsiva webbplats fungerar som avsett. Testa det på så många riktiga enheter du kan.
Du kan också använda resurser som Screenfly som gör att du kan testa din webbplats på flera skärmupplösningar. Du kan argumentera att alla dessa strategier kräver en betydande tid, men sedan igen, man måste svettas hårt för att skörda fördelarna. Nuförtiden är det viktigt att skapa en responsiv webbplats med responsiv prestanda, ännu mer eftersom Google betygsätter sajter baserat på deras prestanda. Om du är en designer eller en utvecklare, begränsa dig inte till någon av ovanstående bästa praxis. Du bör leta efter fler lösningar och kan pressa hårt för att leverera en webbplats som uppvisar responsiv prestanda.