Vergelyking van twee verskillende benaderings tot multi-toestel webontwerp
Responsiewe en aanpasbare webontwerp is albei metodes om multi-toestel vriendelike webwerwe te skep wat goed werk op 'n verskeidenheid skermgroottes. Terwyl responsiewe webontwerp deur Google aanbeveel word en die meer gewilde van die twee benaderings, het beide van hierdie metodes vir multi-toestel webontwerp hul sterk punte en hul swakhede.
Kom ons kyk na die verskille tussen reageerbare en aanpasbare webontwerp, wat spesifiek op hierdie sleutelareas fokus:
- Gemak van ontwikkeling
- Die vlak van beheer wat jy oor die ontwerp het
- Breedte van toestel / skerm ondersteun
- Hoe toekoms vriendelik die oplossing is
- Algehele aflaai spoed en werf prestasie
Sommige definisies
Voordat ons in ons side-by-side vergelykings van responsiewe en aanpasbare webontwerp kom, kom ons kyk na 'n hoëvlakdefinisie van hierdie twee benaderings.
Responsiewe webwerwe het 'n vloeibare uitleg wat verander en aanpas, ongeag die skerm grootte wat gebruik word. Media navrae laat reageer webwerwe selfs verander "op die vlieg" as die leser is verander.
Aanpasbare ontwerp gebruik vaste groottes gebaseer op voorafbepaalde breekpunte om die geskikste uitlegweergawe vir die skermgrootte te lewer wat bespeur word wanneer die bladsy eerste laai.
Met die breë definisies in plek, kom ons kyk na ons sleutel fokusareas.
Gemak van ontwikkeling
Die belangrikste verskil tussen responsiewe en aanpasbare webontwerp is in die manier waarop hierdie oplossings op 'n webwerf toegepas word. Omdat ontvanklike ontwerp 'n volledige vloeibare uitleg skep, word dit die beste gebruik vir projekte waar jy die webwerf van die grond af herskep . As jy probeer om 'n kode van 'n bestaande webwerf te laat herleef, is dit dikwels 'n moeilike saak, want jy het eenvoudig nie die beheersingsvlak wat jy sou hê as jy die kode van nuuts af ontwikkel nie en die reaksie van die ontvanklike ontwerp in ag neem vir die vroegste stadiums van die proses. . Dit beteken dat wanneer u 'n webwerf opstel om reageer te wees, u gedwing word om kompromieë te maak om binne daardie bestaande kodebasis te bly.
As u werk met 'n bestaande webblad met 'n vaste wydte, beteken 'n aanpassingsbenadering dat u die grootte kan verlaat wat die webwerf ontwerp is vir ongeskonde en bykomende aanpassingspunte byvoeg. In sommige gevalle, as 'n projek se begroting klein is, en as dit slegs 'n klein hoeveelheid ontwikkelingswerk sal akkommodeer, kan jy kies om net nuwe aanpasbare breekpunte vir kleiner skerm- / mobiele-sentriese groottes by te voeg. Dit beteken dat jy groter skerms toelaat om almal dieselfde uitleg te gebruik - miskien 'n 960 breekpunt weergawe wat was waarheen die werf waarskynlik oorspronklik ontwerp is.
Die opwaartse aanpasbare benadering is dat jy die kode van 'n bestaande webwerf beter kan benut, maar een van die nadele is dat jy verskillende uitlegsjablone skep vir elke breekpunt wat jy kies om te ondersteun. Dit sal 'n impak hê op die werkslading wat nodig is om hierdie oplossing op lang termyn te ontwikkel en in stand te hou.
Ontwerpbeheer
Een van die sterk punte van responsiewe webwerwe is dat hul vloeibaarheid hulle in staat stel om alle skermgroottes aan te pas en te ondersteun, in teenstelling met slegs die voorafbepaalde breekpunte wat in 'n aanpasbare benadering bepaal word. Die realiteit is egter dat reageerde webwerwe dalk op sekere belangrike skermgroottes lyk (tipies groottes wat ooreenstem met populêre toestelle wat op die mark beskikbaar is), maar die visuele ontwerp breek dikwels tussen die populêre resolusies.
Byvoorbeeld, 'n webwerf kan goed lyk by die wye skermuitleg van 1400 pixels, die middelskermgrootte van 960 pixels en die klein skerm kyk na 480 pixels, maar wat van die tussenstande van hierdie groottes? As ontwerper het jy min of geen beheer oor hierdie tussen-groottes nie en die visuele voorkoms van die bladsy by daardie groottes is dikwels minder as ideaal.
Met 'n aanpasbare webwerf het jy veel meer ontwerpbeheer oor die verskillende uitlegte wat gebruik word, omdat hulle vaste groottes is gebaseer op jou gevestigde breekpunte. Die ongemaklike tussen-state is nie meer 'n probleem nie, want jy het elke "kyk" (elke breekpunt se vertoning) versigtig ontwerp wat aan besoekers gelewer sal word.
So aantreklik soos hierdie vlak van ontwerpbeheer mag klink, moet jy daarvan bewus wees dat dit teen 'n prys kom. Ja, jy het volle beheer oor die voorkoms van elke breekpunt, maar dit beteken dat jy die ontwerp tyd wat nodig is om te ontwerp vir elkeen van daardie unieke uitlegte moet belê. Hoe meer breekpunte jy kies om te ontwerp, hoe meer tyd sal jy moet spandeer op daardie proses.
Breedte van Ondersteuning
Beide responsiewe en aanpasbare webontwerp geniet redelike sterk ondersteuning, veral in moderne blaaiers.
Adaptive webwerwe vereis of die bediener kant komponente of Javascript vir die skerm grootte opsporing. Natuurlik, as 'n aanpasbare webwerf Javascript benodig, beteken dit dat 'n blaaier dit moet aktiveer sodat die webwerf korrek kan werk. Dit mag dalk nie vir jou 'n groot besorgdheid wees nie, aangesien die meeste mense Javascript in hul blaaiers sal hê, maar wanneer 'n webwerf 'n kritieke afhanklikheid van enigiets het, moet dit opgemerk word.
Verantwoordelike webwerwe en die media-navrae wat hulle dryf, sal goed werk in alle moderne blaaiers. Die enigste probleme wat u sal hê, is met die oudste weergawes van Internet Explorer aangesien weergawes 8 en onder nie mediavrae ondersteun nie. Om hieraan te werk , word 'n Javascript-polifil dikwels gebruik , wat beteken dat daar ook 'n afhanklikheid van Javascript hier is, ten minste vir die ouer weergawes van IE. Weereens, dit mag dalk nie vir jou baie bekommerd wees nie, veral as jou webwerfanalise wys dat jy nie baie besoekers ontvang met die ouer blaaier weergawes nie.
Toekomstige Vriendelikheid
Die vloeibare aard van responsiewe webwerwe gee hulle 'n voordeel bo aanpasbare webwerwe wanneer dit kom by toekomstige vriendelikheid. Dit is omdat die reageer webwerwe nie gebou is om slegs 'n voorheen gevestigde stel breekpunte te akkommodeer nie. Hulle pas aan om alle skerms aan te pas, insluitende dié wat dalk nie vandag in die mark is nie. Dit beteken dat 'n nuwe skermresolusie skielik gewild word.
As jy na die ongelooflike verskeidenheid in die toestellandskap kyk (vanaf Augustus 2015 was daar meer as 24,000 verskillende Android-toestelle op die mark), met 'n webwerf wat sy bes doen om hierdie wye reeks skerms te akkommodeer, is dit van kritieke belang vir toekomstige vriendelikheid. Dit is omdat dit in die toekoms onwaarskynlik sal wees dat die landskap nie minder divers word nie, wat beteken dat die ontwerp vir spesifieke skerms of groottes onmoontlik sal raak as ons nie daardie realiteit reeds bereik het nie.
Aan die ander kant van hierdie vergelyking scenario, as 'n webwerf aanpasbaar is en dit nie nuwe besluite akkommodeer wat in die mark belangrik kan raak nie, dan kan jy gedwing word om daardie breekpunt by die webwerwe wat jy geskep het, by te voeg. Dit voeg ontwerp en ontwikkelingstyd by projekte en dit beteken dat daardie adaptiewe webwerwe konsekwent gemonitor moet word om te verseker dat daar geen nuwe breekpunte in die mark ingestel is wat op die werf gevoeg moet word nie. Weereens, met die toestelverskeidenheid wat dit is, moet ons voortdurend na nuwe groottes kyk en dit moontlik met nuwe breekpunte akkommodeer. Dit is 'n voortdurende uitdaging wat 'n impak sal hê op die werk wat u moet benodig om 'n webwerf te ondersteun en die koste van daardie onderhoud vir die maatskappy of organisasie vir wie die webwerf is.
Optrede
Responsiewe webontwerp is lankal beskuldig (onregverdig, so in baie gevalle) om 'n swak oplossing te wees van 'n aflaaispoed / vertoningspunt. Dit is hoofsaaklik te wyte aan die feit dat baie webontwerpers in die vroeë dae van hierdie benadering eenvoudig klein skermmedia-navrae op die bestaande CSS van 'n werf gesit het. Dit dwing die beelde en hulpbronne wat bedoel is om groter skerms te lewer op alle toestelle, selfs al is die kleiner skerms hulle nie in hul finale uitleg gebruik nie. Responsiewe ontwerp het al sedert daardie dae 'n lang pad gekom en die realiteit is dat vandag se gehalteverantwoorde webwerwe nie aan prestasieprobleme ly nie.
Stadige aflaai spoed en opgeblase webwerwe is nie 'n sensitiewe webwerf probleem nie - dit is 'n probleem wat op alle webwerwe gevind kan word. Beelde wat te swaar is, voer uit sosiale media, oormatige skrifte en meer en weeg 'n webwerf af, maar beide reageerbare en aanpasbare webwerwe kan gebou word om vinnig te laai. Natuurlik kan hulle ook so opgebou word dat prestasie nie 'n prioriteit is nie, maar dit is nie 'n eienskap van die oplossing self nie, maar eerder 'n weerspieëling van die span wat betrokke was by die ontwikkeling van die webwerf self.
Beyond Layout
Een van die mees dwingende aspekte van aanpasbare webontwerp is dat jy nie net beheer oor die ontwerp van die werf vir geselekteerde breekpunte het nie, maar ook die bronne wat vir daardie webwerf weergawes gelewer word. Dit beteken byvoorbeeld dat retina beelde slegs na retina toestelle gestuur kan word, terwyl nie-retina skerms meer gepaste beelde kry wat kleiner is in die grootte van die lêers. Ander werfhulpbronne (Javascript-lêers, CSS-style, ens.) Kan net slim afgelewer word wanneer dit benodig word en sal gebruik word.
Hierdie gebruik van adaptiewe webontwerp gaan veel verder as die eenvoudige vergelyking van "as jy 'n webwerf herbou, kan adaptiewe 'n makliker benadering wees om te gebruik." Alle webwerwe, insluitende volledige herontwerpe, kan baat vind by 'n slimmer benadering tot 'n meer aangepaste ervaring.
Hierdie scenario toon die geanimeerde aard van hierdie "responsive versus adaptive" debat. Alhoewel dit waar is dat 'n aanpassingsbenadering beter geskik is as reageer op site-retrofits, kan dit ook 'n goeie oplossing wees vir volledige herontwerp. Net so kan in sommige gevalle 'n responsiewe benadering bygevoeg word op die kodebasis van 'n bestaande webwerf, wat die webwerf al die voordele van 'n ten volle responsiewe benadering gee.
Watter benadering is beter?
As dit gaan om reageer versus adaptiewe webontwerp, is daar geen duidelike "wenner" nie, alhoewel reageer beslis die gewildste benadering is. Trouens, die "beter" benadering hang af van die behoeftes van 'n spesifieke projek. Verder hoef dit nie 'n 'of' of 'n situasie te wees nie. Daar is baie webprofessore wat webwerwe bou wat die beste van reageerende webontwerp (vloeibare breedtes, toekomstige ondersteuning) kombineer met die sterkte van adaptiewe ontwerp (beter ontwerpbeheer, slim laai van werfhulpbronne).
Hierdie benadering toon algemeen aan die hand van RESS (Responsive Web Design with Server Side Components), dat daar eintlik geen "een grootte pas by alle oplossings." Beide responsiewe webontwerp en aanpasbare het hul sterk punte en hul uitdagings, so jy moet bepaal watter een sal die beste werk vir u spesifieke projek, of as 'n baster oplossing u die beste pas.