Hawwe jo in " reageare webside "? Dit is in side mei in layout dat feroaret op basis fan in apparaat fan apparaat en skermgrutte. Spesjale web-ûntwerp is no in yndustrieel best practice. It is oanbean troch Google en fûn op miljoenen plakken oer it web. Der is lykwols in grut ferskil tusken in webside dy't gewoan "pas" op ferskillende skermgrutte hat en in webside hat dy't echt respektyf is.
Ik rinend sjogge bedriuwen har webstee werynrjochting en stjoere in parseberjocht, dy't de deugden fan har nije mobilfreonlike ûntwerp ûntstie. As ik dizze siden besykje, wat ik faak fine, is in layout dat sels skalme en feroaret om te passen op ferskate skermen, mar dat is sa fier as se it idee fan responsiveness nimme. Dit is net genôch. In wier responsive webside docht mear dan allinich skaal om in lytser of grutter skerm te passen. Op dizze plakken fine jo ek de folgjende belangrike traits.
1. Optimisearret optreden
Nimmen wol graach wachtsje op in webside om te laden, en as immen in mobile apparaat mei in ferbining brûke kin dy't minder as ideaal wêze kin, is it needsaak fan in webside dy't fluch nedich is, noch wichtiger.
Hokfoar optimalisearje jo optreden fan jo side? As jo begjinne mei in nije side as in ramt fan in redesign, dan moatte jo it in punt meitsje om in prestaasjebedriuw te meitsjen as ûnderdiel fan dat projekt. As jo wurkje mei in besteande side en binne net begjin fan 'e kratzer, de earste stap is om jo optreden te testen om te sjen wêr't jo hjoed binne.
Ienris hawwe jo in baseline fan wêr't jo side prestaasjes wiist, kinne jo begjinne om de nedige ferbettering te meitsjen om de hurddraverij te fergrutsjen. In prachtich plak om te begjinnen is wierskynlik mei jo websteeën. Too-grutte ôfbyldings binne de # 1 kulprit as it giet om slagge laden lokaasjes, sadat jo optimisearjen fan jo bylden foar webferliening kin jo webstee helpe fan in optredenspuntsje.
De wurklikheid is dat ferbettere webside en de snelle download-snelheden binne in foardiel dat alle besikers wurdearje. Nei allegear hat gjinien earder klaaid dat in side "te fluch" is, mar as in webside te lang nedich is om te laden, sil it minsken hielendal ôfdraaie oft it "oanpakt" op har skerm respekt, of net.
2. Smart Content Hierarchy
As in webside op in grut skerm oanwêzich is, kinne jo yntegrearje op ferskillende wizen op lizze fanwege it grutte skermbehear beskikber. Jo kinne faak belangrike berjochten en ôfbyldings, nijsynformaasje, eveneminteynformaasje, en websteeën allegearre op it skerm passe. Dit jout in besiker om maklik en fluch de ynhâld fan 'e folsleine side te besjen en beslút wat har wichtich is.
Dit senario feroaret krekt dramatysk as jo dizze side ûntwerp nimme en it feroarje foar lytse skerm-apparaten, lykas in cellphone. Dochs wurkje jo mei in fraksje fan it skermkeam yn jo foarholle. Dit betsjut dat jo moatte beslute wat der earst op it webstee ferskynt, wat it folgje sil, ensafh. Yn stee fan alles dat jo op ien kear sjen sille, hawwe jo wierskynlik allinich de romte om ien of twa dingen te sjen (ien fan 'e wierskyn is navigaasje). Dit betsjut dat besluten fan hierhier te meitsjen binne. Spitigernôch ferdrach hoe faak bepaald hokker earste op it skerm komt en dan twadde, ensfh. Is de manier wêrop de side sels kodearre is. It is ienfâldich, by it bouwen fan in reageare side om elke earste yn 'e koade op it skerm te sjen, folge troch it twadde item yn koade en sa. Spitigernôch, wat it meast wichtich wêze kin op ien apparaat kin net sa kritysk wêze op in oar. In wier responsive webside begrypt dat de hierhierigens fan ynhâld feroaret fan ôfhinklikens fan ferskillende sitewaasjes en it moat tûk wêze oer wat it sjen lit wêr't.
Ferbetteringen yn CSS-layouttekeningen, wêrûnder CSS Grid Layout, Flexbox en mear, kinne webûntwikkelders en ûntwikkelders mear opsjes jaan as it giet om yntelligens ynlade út te setten, ynstee fan 'e krekte rigel fan ynhâldbere gebieten yn' e HTML-koade. It foardieljen fan dizze nije layouttechniken sil noch wichtiger wurden wurde as it apparaatlânskip en de behoeften fan 'e brûkers fan ús webside bliuwt te ûntwikkeljen.
3. Undersikers dy't in kontrôle fan in stelsel en swakkens fan 'e apparaten besykje
Bliuwend op it ûnderwerp fan apparaten - elke fermelding dy't immen brûke kin om jo side te besykjen hat beide krêften en swakkeiten dy't yn wêzen binne foar dat platfoarm. In grutte opfrege webside begrypt de mooglikheden en beheiningen fan ferskillende apparaten en brûkt har om oanpaste ûnderfiningen te meitsjen dy't benammen passeare wurde oan hokker apparaat in visitor kin op it stuit brûke.
Bygelyks, in tillefoan befettet in oantal funksjes dy't jo net fine yn in tradisjoneel buroblêd komputer. GPS is in foarbyld fan in mobile sintraal funksje (ja, jo kinne ek algemiene lokaasjeynformaasje op buroblêden krije, mar apparaat GPS is folle betterer). Jo side kin GPS-ynformaasje brûke om tastien in persoan in detaillearre en spesifike stap-troch-stap rjochting-ynformaasje of spesjale opbou te berikken op grûn wêr't se op dat momint binne.
In oar foarbyld fan dizze haadpersoan yn 'e praktyk soe in side wêze dy't fersterkt hokker type skermbehearder jo brûke en stjoert ôfbylden dy't it meast besparre binne foar dat display. As jo in skerm hawwe mei in hege pikseltensiteit, kinne jo beslute om hegere kwaliteitsbylden nei dit skerm te stjoeren. Dizze deselde ôfbyldings soe sûnder sin wêze op in minder fêste skerm, mar de ekstra kwaliteit soe ferlern wêze as de ekstra triemgrutte foar gjin echte reden ynlade sil.
Werklik grutte reaktive sitten beskôgje de folsleine brûkersûnderfining en wurkje om dy ûnderfining op te nimmen, basearre net allinich in apparaattype of grutte fan har skerm, mar ek oare wichtige aspekten fan 'e hardware.
4. Ynhâld mei kontekst
Yn it earstoan ûntfong antwurde web ûntwerp syn namme om't it idee fan in layout fan in side reagearret op ferskillende skermgrutte, mar jo kinne op sa'n folle mear reagearje as allinne skermgrutte. Bouwen op it foarige foarbyld fan gebrûk fan wearden en swakkeuren fan in apparaat, jo kinne dizze, lykas oare gegevens lykas de datum en tiid brûke, om in websteeûnderfining werjaan.
Stel in webside foar in grutte handel-evenemint. Wylst in reaktive webside it layout fan 'e siden fan' e side feroarje om mei ferskate skermen skaal te meitsjen, kinne jo ek de datum brûke om te bestimmen hokker ynhâld de wichtichste is om te sjen. As it de tiidperioade foar it evenemint is, wolle jo wierskynlik de registraasjeynformaasje promininte sjen. As lykwols it evenemint eins op dat momint passe, kin registraasje net de wichtichste ynhâld wêze. Ynstee dêrfan kinne jo beslute dat it skema fan 'e dagen fan eveneminten mear krityske is, omdat it mear relevant is foar de direkteur fan dy brûker.
Trochsjogge dingen in stappen fierder, kinne jo in GPS-apparaat tapasse om te bepalen wêr't se eins binne op 'e hannel. Jo kinne har ynteraktive ynhâld jaan op basis fan har lokaasje, te sjen dat se tichtby boeken of sesjes sjen litte om te begjinnen.
5. Tagonklikens
It lêste foarbyld sjogge dan nei hoe't in side reageare op 'e needsaak fan in besiker is te tinken oer website tagonklikheid . Websiden moatte gebrûk makke wurde troch safolle mooglik minsken, wêrûnder minsken mei in beheining. Jo webside moat yn steat wêze kinne troch ien dy't in skermlêzer of oare assistint-software nedich hat om syn ynhâld te krijen. Op dizze wize wurdt jo side reageare op har behoeften, om't jo derfoar soarge wurde dat de ûnderfining, wylst ferskillend foar beheakbere besikers, noch genôch is.
Troch te reagearjen op safolle gegevenspunten as mooglik, en net allinich skermgrutte, kin in webside safolle mear wêze as gewoan "mobilfreonlik". It kin in wier responsive ûnderfining wurde yn alle betsjoening fan 'e fraach.