Responsief webontwerp is al het buzzword van het decennium en is ideaal voor de wereld waarin we met meerdere schermen verbonden zijn. De wisselwerking hiervoor is echter de prestaties vanwege de grotere bestandsgroottes.
Dit heeft enkele experts ertoe aangezet om te zeggen dat, net als de eerste dagen van Flash, responsief ontwerpen iets is waar we zonder reden enthousiast over zouden kunnen worden. Hoewel er op dit moment echter prestatieproblemen zijn, kunnen deze tot op zekere hoogte worden opgelost met enkele kleine aanpassingen, compressie en aanpassing van de afbeelding.
Met responsief ontwerp worden alle HTML-elementen voor elk apparaat geladen, inclusief die voor tablet- en desktopbezorging. Dit betekent dat alle content vaak wordt geleverd, inclusief afbeeldingen en scripts, ongeacht op welk apparaat het wordt bekeken.
Een studie vorig jaar uitgevoerd, bleek dat 86% van de responsieve sites die momenteel online zijn, een volledige desktoppagina naar mobiele apparaten leveren. Dit is duidelijk een trend naar de ontwerptechniek die moet worden aangepakt, willen we de voortgang van de opgeblazen webpagina's in zijn tracks stoppen.
Op dit moment drijft responsive design de paginaformaten op en dit is de trend die moet worden aangepakt, vooral wanneer u bedenkt dat 57% van de mobiele gebruikers zal vertrekken als de site niet laadt binnen 3 seconden.
Voor degenen die al een ontwerp hebben geïnstalleerd en nu willen optimaliseren, Mobitest kan worden gebruikt om de prestaties te meten om verder te gaan en deze aan te pakken. Uiteraard zal optimalisatie tijdens het plannen van een ontwerp eenvoudiger zijn om uit te voeren in dit stadium en prestaties moeten altijd worden beschouwd als een essentieel onderdeel van ontwerp, in plaats van een bijzaak.
Om de prestaties te verbeteren, moet de grootte van de pagina's en de bijbehorende bronnen worden verminderd. Dit kan worden uitgevoerd met behulp van verschillende technieken, zonder het uiterlijk van de site ernstig te veranderen.
Het eerste dat u moet overwegen, is hoe u ervoor kunt zorgen dat alleen de benodigde bronnen naar het doelapparaat worden verzonden. Dit kan worden gedaan door het aantal HTTP-verzoeken tot een minimum te beperken, zodat de gebruiker minder tijd aan het wachten is om de DOM te laden. Dit kan op zijn beurt worden gedaan door CSS- en Javascript-bronnen te comprimeren, waarvoor tools zoals Kompas - een open source CSS-ontwerpraamwerk - kan worden gebruikt. Hierdoor kunnen ontwikkelaars schonere markeringen maken en sprites en extensies maken met minimale gedoe.
Met betrekking tot JavaScript, tools zoals UglifyJS kan worden gebruikt, waardoor code wordt gecomprimeerd.
Dit kan worden beschouwd als een belangrijke techniek als het gaat om responsief ontwerp, omdat het kan worden gebruikt om ervoor te zorgen dat mobiele en smartphonegebruikers de aspecten van de site niet downloaden die deze vertragen of die ze niet zullen gebruiken.
Voorwaardelijk laden kan worden gebruikt om allerlei soorten inhoud te stoppen, inclusief sociale widgets, afbeeldingen, kaarten en nog veel meer. Het is belangrijk om op dit moment op te merken dat de site grondig moet worden getest in elke fase van optimalisatie, zodat u gemakkelijk kunt zien wat er het verschil heeft gemaakt terwijl u doorgaat.
We weten allemaal dat afbeeldingen meestal verantwoordelijk zijn voor het opnemen van de grootste hoeveelheid kilobytes in een webpagina. Het is ook veilig om te zeggen dat afbeeldingen die zijn ontworpen voor een desktopbrowser onder de maat presteren wanneer ze worden afgeleverd op een mobiel apparaat.
Als een site ook veel oudere inhoud bevat, zal dit de prestaties nog meer beïnvloeden en moet op een of andere manier worden voorkomen dat deze inhoud wordt geladen. Hoewel dit kan worden gedaan door de opmaak te wijzigen door de src- of img-elementen te wijzigen, de PHP-oplossing Adaptieve afbeeldingen is waarschijnlijk gemakkelijker. De software detecteert de schermgrootte en maakt automatisch, in de cache en levert de juiste verkleinde ingesloten HTML-afbeeldingen, zonder dat de opmaak hoeft te worden gewijzigd. Te gebruiken in combinatie met Fluid Image-technieken, het is een handige oplossing die veel tijd zal besparen. Adaptive Images maakt gebruik van een htaccess-bestand, een php-bestand en een enkele regel Javascript om de schermgrootte van bezoekers van de site te bepalen.
Het is ook de moeite waard om over tekst na te denken, omdat dit natuurlijk ingepakt zal worden als het apparaat versmald is en weergaveproblemen zou kunnen veroorzaken. FitText is een hulpmiddel dat dit kan helpen oplossen, een jQuery-plug-in die de lettergrootte automatisch actualiseert, met opties voor de minimum- en maximumformaten die toegestaan zijn.
Dit is ideaal voor koppen die mogelijk slecht worden weergegeven op een mobiel apparaat en waarmee de door CSS3 opgegeven tekengrootte kan worden genegeerd. FitText is echter alleen bedoeld voor koppen en mag niet worden gebruikt binnen de alineatekst.
Hoewel responsive design zijn problemen heeft, net zoals elke relatief nieuwe technologie of techniek, is het toch de moeite waard om te kiezen om een site op deze manier te bouwen. Niemand wil achteruit gaan en hoewel het misschien makkelijker is om een mobiele website te bouwen, is het veel beter om zo innovatief mogelijk te zijn.
Google is het ermee eens, hun advies is om responsief ontwerp te gebruiken als de beste manier om mobiel te ontwerpen. Natuurlijk betekent dit voor de reuzen van zoekmachines dat ze maar één URL hoeven te crawlen in plaats van talloze URL's voor wat in essentie dezelfde site is, dus het is echt in hun belang.
In deze tijd van social sharing-manie is het echter ook logisch, omdat mobiele gebruikers een pagina kunnen delen met iemand die een desktop gebruikt. Om een uniforme ervaring te creëren, zou dit dezelfde inhoud moeten opleveren.
Verder verbetert het hebben van een responsieve site de productiviteit van het personeel, omdat er in wezen veel minder te doen is. Dit is van toepassing op inhoud, updates en SEO, omdat dit afzonderlijk moet worden uitgevoerd als verschillende sites worden gebouwd.
Mobiele apparaten en tablets worden de norm voor het verbinden met internet en surfen in dit, bijna, post-pc-tijdperk. Wereldwijd is de verkoop van tablets in slechts een jaar gestegen, meer dan verdubbeld in die tijd en met veel consumenten die nu verschillende apparaten met Android en iOS kiezen.
Het lijdt weinig twijfel dat tot nu toe responsief ontwerp een positieve impact heeft, ondanks de zorgen over de prestaties. Volgens een rapport , dat enkele van 's werelds beste merken vroeg hoe het hebben van een responsieve site het verkeer had beïnvloed, bezoeken op alle apparaten waren aanzienlijk gestegen.
Dit omvatte een gemiddelde stijging van 23% door mobiele bezoekers, evenals een verlaagd bouncepercentage van 26%, waarbij bezoekers ongeveer 7,5% meer tijd op de sites doorbrachten dan eerder was te zien.
O'Neill, de trendy surfkledingwinkel, rapporteert een conversiepercentage dat 65,7% hoger is op iPad en iPhone als gevolg van het ontwikkelen van een responsieve site. Dit zorgde voor een omzetgroei van 101,2% op deze apparaten alleen.
Met betrekking tot Android-apparaten was de conversieratio nog beter, met maar liefst 407,3%, goed voor een enorme omzetgroei van 591,4%. Op niet-mobiele apparaten werd een kleinere conversieratio waargenomen, hoewel de groei nog steeds werd waargenomen.
Dit is slechts een van de merken die hun cijfers vrijgeven en het is vrij moeilijk om de gegevens van anderen nu te krijgen, net zoals het was met de impact van sociale media een paar jaar geleden. Het is echter een manier om te bewijzen dat het rendement van het ontwerpen van een responsieve website aanzienlijk kan zijn.
Met dat in gedachten, welke verdere reden heeft een ontwerper nodig om responsief te ontwerpen voor zijn klanten en te proberen ervoor te zorgen dat deze zo goed mogelijk presteren? Er is er niet één, en die ontwerpers die niet de moeite willen nemen om te leren hoe ze een site kunnen ontwerpen, bouwen en optimaliseren met behulp van responsieve technieken, raken misschien in het stof beland.
67% van de gebruikers zegt te hebben gekocht via een mobiele site en men denkt dat mobiel internet volgend jaar die van desktop zal overschrijden. Met dit alles in gedachten is het gemakkelijk te begrijpen waarom bedrijven steeds meer geïnteresseerd raken in de beste mobiele weboplossingen die ze kunnen bieden.
Responsive design staat op dit moment misschien nog in de kinderschoenen, maar het lijkt duidelijk dat de marktvraag het snel laat opgroeien, dus het loont de moeite om nu zoveel mogelijk aspecten van de discipline te leren.
Welke technieken heb je gebruikt om responsieve sites te optimaliseren? Levert het afleveren van alternatieve inhoud de voordelen van responsief ontwerp op? Laat het ons weten in de comments.