Responsive webdesign er allerede summen af årtiet og er ideel til den multiscreen-tilsluttede verden, vi lever i. Imidlertid er afvejningen for dette i præstation på grund af større filstørrelser.
Dette har fået nogle eksperter til at sige, at ligesom de tidlige dage af Flash er responsivt design noget, som vi alle kunne blive begejstret for uden god grund. Imidlertid, mens der i øjeblikket er præstationsproblemer, kan disse overvinde i nogen grad med nogle små justeringer, komprimering og billedformatering.
Responsive design indlæser alle de samme HTML-elementer til alle enheder, herunder dem, der er beregnet til tablet og desktop levering. Dette betyder, at alt indhold ofte leveres, herunder billeder og scripts, uanset hvilken enhed den ses på.
Et studie udført sidste år viste, at 86% af de modtagelige websteder, der aktuelt er online, leverer en fuld desktop-side til mobile enheder. Dette er tydeligt en tendens til den designteknik, der skal løses, hvis vi skal stoppe udviklingen af oppustede websider i sine spor.
I øjeblikket er responsivt design ved at skubbe op sidestørrelser, og det er den trend, der skal løses, især når du overvejer at 57% af mobilbrugere vil forlade, hvis webstedet ikke indlæser inden for 3 sekunder.
For dem der allerede har et design på plads og nu ønsker at optimere, Mobitest kan bruges til at måle ydeevne for at kunne fortsætte og adressere det. Når du planlægger et design, vil optimering blive naturligvis enklere at udføre på dette stadium, og ydeevne bør altid betragtes som en væsentlig del af design, snarere end eftertanke.
For at forbedre ydeevnen skal størrelsen af de sider og ressourcer, der er lagt i den, reduceres. Dette kan udføres ved hjælp af forskellige teknikker uden alvorligt at ændre udseendet og følelsen af webstedet.
Den første ting at overveje, er, hvordan man sikrer, at kun de ressourcer, der er nødvendige, sendes til målenheden. Dette kan gøres ved at minimere antallet af HTTP-anmodninger, så brugeren bruger mindre tid på at vente på, at DOM skal indlæses. Dette kan igen gøres ved at komprimere CSS og Javascript ressourcer, for hvilke værktøjer som Kompas - En open source CSS authoring framework - kan bruges. Dette giver udviklere mulighed for at oprette renere markup og skabe sprites og extensions med minimal opstyr.
Med hensyn til JavaScript, værktøjer som UglifyJS kan bruges, som komprimerer kode.
Dette kan betragtes som en vigtig teknik, når det kommer til lydhørt design, da det kan bruges til at sikre, at mobil- og smartphone-brugere ikke downloader siderne på webstedet, der sænker det, eller at de ikke vil bruge.
Betinget indlæsning kan bruges til at stoppe alle former for indhold fra indlæsning, herunder sociale widgets, billeder, kort og meget mere. Det er vigtigt at bemærke på dette tidspunkt, at webstedet skal testes grundigt i hvert trin af optimering, så det er nemt at se, hvad der har gjort en forskel, mens du går sammen.
Vi ved alle, at billederne normalt er ansvarlige for at optage den største mængde kilobytes på en webside. Det er også sikkert at sige, at billeder, der er designet til en stationær browser, vil underprestere, når de leveres til en mobil enhed.
Hvis et websted også har en masse arv indhold, så vil det påvirke ydeevnen endnu mere, og en vis måde at forhindre, at dette indhold fra indlæsning skal implementeres. Mens dette kan gøres ved at ændre markeringen ved at ændre src eller img elementer, PHP-løsningen Adaptive Images er nok lettere. Softwaren registrerer skærmstørrelse og opretter automatisk, cacher og leverer de relevante nedskalerede indlejrede HTML-billeder uden at skulle ændre markeringen. For at kunne bruges sammen med Fluid Image teknikker, er det en praktisk løsning og en, der sparer meget tid. Adaptive Images bruger en htaccess-fil, en php-fil og en enkelt linje af Javascript for at bestemme skærmstørrelsen af besøgende på webstedet.
Det er også værd at tænke på tekst, da det vil vikle naturligt, når enheden er indsnævret og kunne forårsage displayproblemer. FitText er et værktøj, der kan hjælpe med at løse dette, en jQuery-plugin, som automatisk opdatering skriftstørrelse, med muligheder for de mindste og maksimale størrelser, der vil blive tilladt.
Dette er ideelt til overskrifter, der kan vises dårligt på en mobilenhed og tillader, at den angivne skrifttypestørrelse CSS3 ignoreres. FitText er dog kun beregnet til overskrifter og bør ikke bruges inden for afsnitsteksten.
Selvom lydhørende design har sine problemer, ligesom enhver relativt ny teknologi eller teknik, er det stadig værd at vælge at bygge et websted på denne måde. Ingen ønsker at gå baglæns, og mens det kan være lettere at opbygge en mobilwebsite, er det meget bedre at være så nyskabende som muligt.
Google accepterer, deres råd er at bruge lydhør design som den bedste måde at designe til mobil. Selvfølgelig til søgegiganterne betyder det, at de kun har en webadresse til at gennemgå, snarere end adskillige webadresser for, hvad der stort set er det samme websted, så det er i deres interesse virkelig.
Men i denne tid med social deling mani er det også fornuftigt, da mobile brugere kan dele en side med nogen, der bruger et skrivebord. For at skabe en ensartet oplevelse skal dette give det samme indhold.
Derudover forbedrer produktiviteten i arbejdsstyrken, da der er en lydhør plads, da der i det væsentlige er meget mindre at gøre. Dette gælder indhold, opdateringer og SEO, da dette skal udføres separat, hvis forskellige websteder er bygget.
Mobile enheder og tabletter bliver normen for at oprette forbindelse til internettet og surfe i denne næsten post-PC-æra. Tablet-salg på verdensplan er steget på bare et år, mere end fordobling i den tid, og med mange forbrugere vælger nu forskellige enheder, der kører Android, såvel som iOS.
Der er ingen tvivl om, at hidtil lydhør design har en positiv indflydelse på trods af ydeevne bekymringer. Ifølge en rapport , som spurgte nogle af verdens førende mærker, hvordan det at få et lydhurtigt websted havde ramt trafik, var besøg på tværs af alle enheder betydeligt.
Dette indebar en gennemsnitlig stigning på 23% af mobilbesøgende, samt en nedsat afvisningsprocent på 26%, hvor besøgende bruger omkring 7,5% mere tid på webstederne end tidligere set.
O'Neill, den trendy surf tøj forhandler, rapporterer en konverteringsfrekvens, der er 65,7% højere på iPad og iPhone som et resultat af at udvikle et lydhørt websted. Dette tegnede sig for en vækst på 101,2% på disse enheder alene.
Med hensyn til Android-enheder var konverteringsfrekvensen endnu bedre, med en kæmpe 407,3%, der tegnede sig for en enorm omsætningsvækst på 591,4%. En mindre konverteringsfrekvens blev set på ikke-mobile enheder, selvom væksten stadig blev set.
Dette er blot et af mærkerne, der frigiver deres tal, og det er ret svært at få dataene fra andre lige nu, meget som det var med virkningen af sociale medier for et par år siden. Men det går en eller anden måde at bevise, at afkastet fra at designe en lydhør hjemmeside kan være væsentlig.
Hvilken yderligere grund skal der være i betragtning af, hvilken designer der skal begynde at designe responsivt for deres kunder og forsøge at sikre, at de udfører så godt som muligt? Der er ikke en, og de designere, der ikke ønsker at gå i besvær med at lære at designe, bygge og optimere et websted ved hjælp af lydhør teknikker, kan finde sig tilbage i støvet.
67% af brugerne siger, at de har købt via et mobilt websted, og det antages, at mobil internetbrug vil overtage det på skrivebordet næste år. Med det hele i betragtning er det nemt at se, hvorfor virksomhederne bliver mere og mere interesserede i de bedste mobile webløsninger, de kan tilbyde.
Responsivt design kan stadig være i sin barndom i øjeblikket, men det ser ud til, at efterspørgslen på markedet vil gøre den voksen hurtigt, så det er værd at lære så mange aspekter som muligt på disciplinen nu.
Hvilke teknikker har du brugt til at optimere lydhøre? Giver levering af alternativt indhold negativ fordelene ved lydhørt design? Lad os vide i kommentarerne.