Mobile-First Design, and then: Responsive or Adaptive?

(Scroll naar beneden voor de Nederlandse versie)

Mobile-First Websites: The Value of Adaptive vs. Responsive Design

Background: Enhancing the User Experience

Now that mobile devices dominate internet usage, designing websites with a mobile-first approach has become crucial and de facto standard. This strategy emphasizes creating websites optimized for mobile devices first before adapting them for larger screens.

Within this context, two primary design methodologies emerge: adaptive and responsive design. Each has its unique advantages and challenges, making the choice between them significant for web developers and businesses aiming to enhance user experience.

Understanding Mobile-First Design

The mobile-first approach prioritizes designing for mobile devices, acknowledging that a significant portion of internet traffic comes from smartphones and tablets. This approach ensures that websites are not only visually appealing but also functional and user-friendly on smaller screens.

Analyzing the statistics of two of our clients' websites with a relevant number of visitors, there are noticeable differences. For one website the group of mobile users is 70% while for another it is 70% on desktop. Still, for websites and applications with a relatively small percentage of mobile users, mobile-first design is the best approach.

By starting with mobile design, developers can focus on essential content and streamline navigation, leading to faster loading times and improved user satisfaction. Mobile-first is easy to apply and it pays off in the future.

Using Frameworks Like "Bootstrap"

Thanks to mobile-first frameworks, the designs are easy to apply and reuse. That makes it not only profitable in the current stage. The designs are transferable to other developers, easier to maintain and futureproof.

There are others, but the mobile-first framework of Bootstrap, once developed at Twitter to encourage consistency across internal tools, is widely embraced. It works at the frontend to define the layout of a web page derived from the size of the window it is shown in. It is more or less assumed that a small screen is a mobile.

Bootstrap contains a library of stylesheets, javascript and even an icon set. You can use it right away, as it is ready to go. But the most interesting part is that a developer can build own styles and functions upon it, to create a user experience that is customized to the needs of the client.

We apply the Bootstrap framework succesfully on websites and applications for more than ten years now, since its version 2.

There is a limit. Out of the box, Bootstrap only supports responsive design. It considers the screen size to decide upon layout and not the type of device, the operating software, type of clients - is it a browser, is it an app - and some other specifics. But we can come up with numerous use cases that just need that.

Let's get deeper into that.

The Design Approaches

Responsive Design

Responsive design is characterized by its fluidity and flexibility. It uses a single layout that automatically adjusts to fit any screen size, from mobile phones to desktop computers. This approach is advantageous because:

• Flexibility and Consistency: Responsive design provides a consistent user experience across all devices, which is crucial for brand recognition.
• Cost-Effectiveness: Developing a single site that adapts to all devices reduces development time and costs.
• SEO Benefits: Responsive sites often rank better in search engine results because they are considered mobile-friendly.

However, responsive design can lead to performance issues, such as slower load times on mobile devices, as all elements are downloaded regardless of whether they are displayed.

Adaptive Design

Adaptive design, on the other hand, involves creating multiple fixed layouts for different screen sizes.This method is beneficial because:

• Optimized User Experience: By tailoring layouts for specific devices, adaptive design can provide a more tailored and optimized user experience.
• Faster Load Times: Since only the necessary code for a particular device is loaded, adaptive sites often load faster.

Despite these benefits, adaptive design requires more resources, as developers need to create and maintain multiple versions of a website. This complexity can lead to higher costs and longer development times.

Making a Choice

Choosing Between Adaptive and Responsive Design

The decision between adaptive and responsive design depends on several factors:

• Project Scope: Responsive design is often better suited for larger projects or new websites, as it requires less maintenance and adapts to any screen size. You have analytics and can build on something. In contrast, adaptive design is ideal for redesigning existing sites or when specific device optimization is needed. In the beginning, you have little information about your visitors to do specific things.
• User Experience Goals: If providing a highly tailored experience is a priority, adaptive design may be the better choice. However, for a consistent experience across all devices, responsive design is preferable.
• Budget and Resources: Responsive design generally requires fewer resources, making it a cost-effective option for many businesses. As mentioned, Bootstrap works out-of-the-box.

Or a Master Mix of the Methods

We use TYPO3 CMS for this. As proven in my practice, a TYPO3 website can have the best of both worlds. You can use responsive design and mix it with adaptive elements.

TYPO3 has a fluid template system. There is also an extension that retrieves all the information to identify the device and other public specifics. On top of that, more granularity can be added by extending TYPO3's PAGE object (a feature by the way that exists since the CMS' early years; it enables also designed page printing: you don't want to print out the mobile page but an A4 or Letter sized page, with and without certain - content - elements).

These features combined make the following possible:

• Design really mobile-first: Without exceptions, the standard templates only serve mobile use and only load what the developer and the content editor find suitable for mobile traffic.
• If the detected device is a desktop: The obvious assumption is that the desktop has a wired connection to the internet. Other templates are applied and the content can be of larger proportions. You can also stream a video yourself, something you don't want to do to visitors on a mobile without confirmation. Remember: just hiding it responsively does not mean it's happening.
• Distribution of the download load: Behind the screens, there are no unnecessary downloads. So the pages load faster.
• Visitor's preferences can be adressed: A developer can build in more output options to have the visitor make his own additional choices.
• Budget is under control: Customization takes extra time and money. Because we have put everything in templates, it fortunately does not have to make much difference. If you need it and want to stand out, then you choose it. And not everything has to be done at once. The TYPO3 templates are easy to adjust so that the foundation can be laid first and then choices can be made based on progressive insight. A better user experience has many components that are hidden from direct view, but tackling this will pay off sooner or later.
• It is a future proof approach: The future starts today. Content is shown on watches: how do you want to appear there? Your website's templates have a solid base and can be updated and improved at any time to keep up with developments and new ideas. They can also evolve to a headless design (which is a topic that I will handle in the near... future).

Conclusion

In conclusion, both adaptive and responsive designs have their place in the mobile-first web design strategy. Responsive design offers flexibility and consistency, making it a popular choice for many developers. Meanwhile, adaptive design provides a tailored user experience, which can be crucial for specific applications.

In my practice, ViBiS has delivered websites that use the best of both worlds. That shows the advantages of adaptive design can be integrated in an affordable and futureproof way. This pays off in a better user experience. Your success is completely up to the quality of your content.

Ultimately, the choice between the approaches should align with the project’s goals, target audience, and available resources. Using TYPO3 CMS, we can provide a master mix.

Mobile-First Design, en dan: Responsief of Adaptief?

Mobile-First Websites: De waarde van adaptief versus responsief ontwerp

Achtergrond: Verbeteren van de gebruikerservaring

Nu mobiele apparaten het internetgebruik domineren, is het ontwerpen van websites met een mobile-first-benadering cruciaal en de facto standaard geworden. Deze strategie benadrukt het maken van websites die eerst zijn geoptimaliseerd voor mobiele apparaten voordat ze worden aangepast voor grotere schermen.

Binnen deze context bestaan twee primaire ontwerpmethodologie?n: adaptief en responsief ontwerp. Elk heeft zijn eigen unieke voordelen en uitdagingen, waardoor de keuze ertussen belangrijk is voor web-ontwikkelaars en bedrijven die de gebruikerservaring willen verbeteren.

Mobile-First Design uitgelegd

De mobile-first-benadering geeft prioriteit aan het ontwerpen voor mobiele apparaten, waarbij wordt erkend dat een aanzienlijk deel van het internetverkeer afkomstig is van smartphones en tablets. Deze benadering zorgt ervoor dat websites niet alleen visueel aantrekkelijk zijn, maar ook functioneel en gebruiksvriendelijk op kleinere schermen.

Bij analyse van de statistieken van twee websites van onze klanten met een relevant aantal bezoekers, zijn er opvallende verschillen. Voor de ene website is de groep mobiele gebruikers 70%, terwijl het voor de andere bijna 70% op desktop is. Toch is mobile-first design ook de beste aanpak voor websites en applicaties met een relatief klein percentage mobiele gebruikers.

Door te beginnen met mobiel design kunnen ontwikkelaars zich richten op essenti?le content en de navigatie stroomlijnen, wat leidt tot snellere laadtijden en een betere gebruikerstevredenheid. Mobile-first is eenvoudig toe te passen en betaalt zich in de toekomst uit.

Frameworks zoals "Bootstrap" gebruiken

Dankzij mobile-first frameworks zijn de designs eenvoudig toe te passen en te hergebruiken. Dat maakt het niet alleen winstgevend in de huidige fase. De designs zijn overdraagbaar naar andere ontwikkelaars, eenvoudiger te onderhouden en toekomstbestendig.

Er zijn er meer, maar het mobile-first framework van Bootstrap, ooit ontwikkeld bij Twitter om consistentie tussen interne tools te bevorderen, wordt breed omarmd. Het doet zijn werk aan de frontend om de lay-out van een webpagina te defini?ren die is afgeleid van de grootte van het venster waarin deze wordt weergegeven. Er wordt min of meer aangenomen dat een klein scherm een mobiel is.

Bootstrap bevat een bibliotheek met stylesheets, javascript en zelfs een pictogrammenset. Je kunt het direct toepassen, want het is klaar voor gebruik. Maar het meest interessante is dat een ontwikkelaar er eigen stijlen en functies op kan bouwen, om een gebruikerservaring te cre?ren die is afgestemd op de behoeften van de klant.

Wij passen het Bootstrap-framework al meer dan tien jaar succesvol toe op websites en applicaties, sinds versie 2.

Er is een grens aan dit framework. Bootstrap ondersteunt standaard alleen responsief design. Het houdt rekening met de schermgrootte om de lay-out te bepalen en niet met het type apparaat, de besturingssoftware, het type clients - is het een browser, is het een app - en nog wat andere details. Maar we kunnen talloze use cases bedenken die dat wel gewoon nodig hebben.

Laten we daar dieper op ingaan.

De ontwerpbenaderingen

Responsief design

Responsief design wordt gekenmerkt door elasticiteit en flexibiliteit. Het gebruikt één enkele lay-out die zich automatisch aanpast aan elk schermformaat, van mobiele telefoons tot desktopcomputers. Deze aanpak is voordelig omdat:

• Flexibiliteit en consistentie: Responsief design biedt een consistente gebruikerservaring op alle apparaten, wat cruciaal is voor merkherkenning.
• Kosteneffectiviteit: het ontwikkelen van één site die zich aanpast aan alle apparaten, vermindert de ontwikkeltijd en -kosten.
• SEO-voordelen: responsieve sites scoren vaak beter in zoekmachineresultaten omdat ze als mobielvriendelijk worden beschouwd.

Responsief ontwerp kan echter leiden tot prestatieproblemen, zoals langzamere laadtijden op mobiele apparaten, omdat alle elementen worden gedownload, ongeacht of ze worden weergegeven.

Adaptief ontwerp

Adaptief ontwerp daarentegen omvat het maken van meerdere vaste lay-outs voor verschillende schermformaten. Deze methode is gunstig omdat:

• Geoptimaliseerde gebruikerservaring: door lay-outs aan te passen aan specifieke apparaten, kan adaptief ontwerp een meer op maat gemaakte en geoptimaliseerde gebruikerservaring bieden.
• Snellere laadtijden: omdat alleen de benodigde code voor een bepaald apparaat wordt geladen, laden adaptieve sites vaak sneller.

Ondanks deze voordelen vereist adaptief ontwerp meer middelen, omdat ontwikkelaars meerdere versies van een website moeten maken en onderhouden. Deze complexiteit kan leiden tot hogere kosten en langere ontwikkeltijden.

Keuze maken

Kiezen tussen adaptief en responsief ontwerp

De keuze tussen adaptief en responsief ontwerp hangt af van verschillende factoren:

• Doel van het project: Responsief ontwerp is vaak beter geschikt voor grotere projecten of nieuwe websites, omdat het minder onderhoud vereist en zich aanpast aan elk schermformaat. In het begin heb je nog weinig informatie over je bezoekers om met specifieke dingen bezig te zijn. Adaptief ontwerp is daarentegen ideaal voor het herontwerpen van bestaande sites of wanneer specifieke apparaat-optimalisatie nodig is. Je beschikt over analyses en kunt ergens op voortbouwen.
• Doelen voor gebruikerservaring: Als het bieden van een verregaande op maat gemaakte ervaring een prioriteit is, is adaptief ontwerp waarschijnlijk de betere keuze. Voor een consistente ervaring op alle apparaten is responsief ontwerp in het algemeen echter vaak te verkiezen.
• Budget en middelen: Responsief ontwerp vereist doorgaans minder middelen, waardoor het een kosteneffectieve optie is voor veel bedrijven. Zoals aangegeven, Bootstrap werkt out-of-the-box.

Of een mastermix van de methoden!

Daarvoor gebruiken we TYPO3 CMS. Mijn praktijk toont aan dat een TYPO3 website het beste van twee werelden kan bevatten. Je kunt responsief ontwerp gebruiken en het combineren met adaptieve elementen.

TYPO3 heeft een vloeiend sjabloonsysteem. Er is ook een extensie die alle informatie ophaalt om het apparaat en andere openbare details te identificeren. Bovendien kan er meer granulariteit worden toegevoegd door het PAGE-object van TYPO3 uit te breiden (een functie die overigens al bestaat sinds de beginjaren van het CMS; het maakt ook ontworpen pagina-afdrukken mogelijk: je wilt niet de mobiele pagina afdrukken, maar een A4- of Letter-formaat pagina, met en zonder bepaalde - inhouds - elementen).

Deze functies gecombineerd maken het volgende mogelijk:

• Ontwerp echt mobile-first: Zonder uitzondering ondersteunen de standaardsjablonen vanuit de basis mobiel gebruik en laden alleen wat de ontwikkelaar en de inhoudsredacteur geschikt vinden voor mobiel verkeer.
• Als het gedetecteerde apparaat een desktop is: De voor de hand liggende aanname is dat de desktop een bekabelde verbinding met het internet heeft. Andere sjablonen worden toegepast en de inhoud kan van grotere proporties zijn. Je kunt onder meer zelf een video streamen, iets wat je bezoekers op een mobiel niet wilt aandoen zonder hun instemming. Onthoud: het feit dat je een element responsief verbergt, betekent niet dat het niet wordt gedownload.
• Verdeling van de downloadbelasting: Achter de schermen zijn er geen onnodige downloads. Dus de pagina's laden sneller.
• De voorkeuren van de bezoeker kunnen worden geadresseerd: Een ontwikkelaar kan meer uitvoeropties inbouwen om de bezoeker zijn eigen aanvullende keuzes te laten maken.
• Budget is onder controle: Maatwerk kost extra tijd en geld. Omdat we alles in templates hebben gestopt, hoeft het gelukkig niet veel verschil te maken. Als je het nodig hebt en wilt opvallen, dan kies je ervoor. En niet alles hoeft in één keer. De TYPO3 templates laten zich makkelijk aanpassen zodat eerst de basis kan worden gelegd en daarna keuzes kunnen worden gemaakt door voortschrijdend inzicht. Een betere gebruikerservaring kent veel onderdelen die zich aan het directe zicht onttrekken, maar dit aanpakken betaalt zich vroeg of laat uit.
• Het is een toekomstbestendige aanpak: De toekomst begint vandaag. Content wordt weergegeven op horloges: hoe wil je daarop verschijnen? De templates van je website hebben een solide basis en kunnen op elk moment worden bijgewerkt en verbeterd om gelijke tred te houden met ontwikkelingen en nieuwe idee?n. Ze kunnen ook evolueren naar een "headless design" (een onderwerp dat ik in de nabije... toekomst zal behandelen).

Conclusie

Concluderend hebben zowel adaptieve als responsieve designs hun plaats in de mobile-first webdesignstrategie. Responsief design biedt flexibiliteit en consistentie, waardoor het een populaire keuze is voor veel ontwikkelaars. Adaptief design biedt ondertussen een op maat gemaakte gebruikerservaring, wat cruciaal kan zijn voor specifieke toepassingen.

In mijn praktijk heeft ViBiS websites opgeleverd die het beste van beide werelden gebruiken. Dat laat zien dat de voordelen van adaptief design op een betaalbare en toekomstbestendige manier kunnen worden ge?ntegreerd. Dit betaalt zich uit in een betere gebruikerservaring. Jouw succes hangt daarmee alleen nog maar af van de kwaliteit van je content.

Uiteindelijk moet de keuze tussen de benaderingen aansluiten bij de doelen van het project, de doelgroep en de beschikbare middelen. Met behulp van TYPO3 CMS kunnen we een mastermix leveren.