Webwerfontwikkelingstegnologie is 'n baie veelvlakkige proses. Maar steeds kan al sy stadiums in twee hoofkomponente verdeel word - die funksionele en die buitenste dop. Of, soos gebruiklik onder webmeesters, onderskeidelik back-end en front-end. Mense wat hul webwerwe by webontwikkelingsateljees bestel, glo dikwels naïef dat dit die moeite werd is om net op funksionaliteit te fokus, en dit sal die regte besluit wees. Maar dit is waar in baie, baie seldsame gevalle, gewoonlik vir opstartprojekte in die beta-toetsstadium. Andersins word die grafiese ontwerp en gebruikerskoppelvlak eenvoudig vereis om aan webontwikkelingstandaarde te voldoen en gerieflik te wees.
Die eerste hoeksteen wat die koppelvlakontwerper, of ontwerper, in die gesig staar, is die breedte van die werfuitleg. Dit is immers nodig om koppelvlakke te teken. Suiwer intuïtief ontstaan twee benaderings - maak óf aparte uitlegte vir elke gewilde skermresolusie, óf skep een weergawe van die webwerf vir alle skerms. En albei opsies sal verkeerd wees, maar eerstens.
Standaard webwerfwydte in piekselsvir Runet
Voor die ontwikkeling van aanpasbare uitleg was die ontwikkeling van 'n webwerf met 'n breedte van 'n duisend pixels 'n massa-verskynsel. Hierdie figuur is om een eenvoudige rede gekies - sodat die webwerf in enige skerm pas. En dit het sy eie logika, maar kom ons neem aan dat 'n persoon steeds ten minste 'n HD-monitor op 'n lessenaar het. In hierdie geval sal jou uitleg soos 'n piepklein strook in die middel van die skerm lyk, waar alles in een hoop aanmekaar geplak is, en aan die kante is daar 'n groot ongebruikte spasie. Kom ons neem nou aan dat 'n persoon toegang tot jou webwerf verkry op 'n tablet met 'n 800px wye skerm en "Wys volledige webwerf" is in die instellings gemerk. In hierdie geval sal jou werf ook verkeerd vertoon word, aangesien dit eenvoudig nie in die skerm sal pas nie.
Uit hierdie oorwegings kan ons aflei dat 'n vaste breedte vir die uitleg beslis nie vir ons geskik is nie en ons moet 'n ander manier soek. Kom ons ontleed die idee van 'n aparte uitleg vir elke skermwydte.
Uitleg vir alle geleenthede
As jy as 'n strategie gekies het om uitlegte vir alle skermgroottes op die mark te skep, dan sal jou werf die mees unieke op die hele internet wees. Dit is immers eenvoudig onmoontlik vandag om die hele reeks toestelle te dek, om vir elke opsie te probeer verfyn. Maar as jy fokus op die gewildste resolusies van monitors en toestelskerms, dan is die idee nie sleg nie. Die enigste nadeel daarvan is finansiële koste. Na alles, wanneer 'n koppelvlakontwerper, 'n ontwerper en 'n kodeerder gedwing word om dieselfde werk 5 of 6 keer te doen, sal die projek kosbuite verhouding hoër as die oorspronklik begrote prys.
Daarom kan slegs eenbladsy-webwerwe spog met 'n oorvloed weergawes vir verskillende skerms, waarvan die doel is om een produk te verkoop en seker te maak om dit goed te doen. Wel, as jy nie een van hierdie landings het nie, maar 'n multi-bladsy werf, dan moet jy verder dink.
Gewildste werfgroottes
'n Kompromie tussen die twee uiterstes is om die uitleg vir drie of vier skermgroottes weer te gee. Onder hulle moet 'n mens 'n uitleg vir mobiele toestelle wees. Die res moet aangepas word vir klein, medium en groot lessenaarskerms. Hoe om die breedte van die webwerf te kies? Hieronder bied ons die HotLog-diensstatistieke vir Mei 2017 aan, wat ons die verspreiding van gewildheid van verskeie toestelskermresolusies wys, sowel as die dinamika van hierdie aanwyser.
U kan uit die tabel uitvind hoe om die grootte van die webwerf te bepaal wat u wil gebruik. Daarbenewens kan ons aflei dat die mees algemene formaat vandag 'n skerm van 1366 by 768 pixels is. Sulke skerms word op skootrekenaars met begroting geïnstalleer, so hul gewildheid is natuurlik. Die volgende gewildste is die Full HD-monitor, wat die goue standaard is vir video's, speletjies, en dus vir die skep van webwerf-uitlegte. Verder in die tabel sien ons die resolusie van mobiele toestelle 360 by 640 piksels, asook verskeie opsies vir rekenaar- en mobiele skerms daarna.
Ontwerpuitleg
SoNadat ons die statistieke ontleed het, kan ons tot die gevolgtrekking kom dat die optimale werfwydte 4 variasies het:
- Skootrekenaarweergawe met 1366 px-breedte.
- Vol HD-weergawe.
- 'n 800px wye uitleg vir vertoon op klein rekenaarmonitors.
- Mobiele weergawe van die werf - 360 pieksels breed.
Kom ons sê ons het besluit watter grootte om vir die gegenereerde bron vir die webwerf te gebruik. Maar so 'n projek sal steeds duur wees. Kom ons kyk dus na meer opsies, hierdie keer sonder om 'n vaste breedte te gebruik.
Maak die uitleg buigsaam
Daar is 'n alternatiewe benadering, wanneer dit die moeite werd is om net by die minimum skermgrootte aan te pas, en die werfgroottes self sal deur persentasies bepaal word. Terselfdertyd kan koppelvlakelemente soos spyskaarte, knoppies en logo in absolute waardes gestel word, met die fokus op die minimum grootte van die skermwydte in pixels. Blokke met inhoud, inteendeel, sal gestrek word volgens die gespesifiseerde persentasie van die breedte van die skermarea. Hierdie benadering laat jou toe om op te hou om die grootte van werwe as 'n beperking vir die ontwerper te beskou en hierdie nuanse vaardig te klop.
Wat is die goue verhouding en hoe kan dit op webbladuitleg toegepas word?
Selfs in die Renaissance het baie argitekte en kunstenaars probeer om hul skeppings die perfekte vorm en verhouding te gee. Vir antwoorde op vrae oor die waardes van so 'n verhouding, het hulle hulle tot die koningin van alle wetenskappe gewend - wiskunde.
Sedert die oudheid is 'n proporsie uitgevind wat ons oog as die mees natuurlike en elegante beskou,want dit is alomteenwoordig van aard. Die ontdekker van die formule vir so 'n verhouding was 'n talentvolle antieke Griekse argitek genaamd Phidias. Hy het bereken dat as die groter deel van die proporsie verband hou met die kleiner een, aangesien die geheel met die groter een verband hou, so 'n proporsie die beste sal lyk. Maar dit is die geval as jy die voorwerp asimmetries wil verdeel. Hierdie verhouding is later die goue snit genoem, wat steeds nie die belangrikheid daarvan vir die wêreldgeskiedenis van kultuur oorskat nie.
Terug na webontwerp
Dit is baie eenvoudig - deur die goue verhouding te gebruik, kan jy bladsye ontwerp wat so aangenaam as moontlik vir die menslike oog sal wees. Bereken ons volgens die definisie van die goue verhouding formule, kry ons die irrasionale getal 1, 6180339887 …, maar gerieflikheidshalwe kan ons 'n afgeronde waarde van 1, 62 gebruik. Dit sal beteken dat die blokke van ons bladsy 62 moet wees % en 38% van die geheel, maak nie saak watter grootte die gegenereerde bron vir die webwerf wat jy gebruik nie. Jy kan 'n voorbeeld in hierdie diagram sien:
Gebruik nuwe tegnologie
Moderne webwerf-uitlegtegnologieë maak dit moontlik om die idee van 'n beplanner en ontwerper akkuraat oor te dra, so nou kan jy bekostig om meer gewaagde idees te implementeer as aan die begin van internettegnologie. Jy hoef nie meer hard te dink oor wat die grootte van die webwerf moet wees nie. Met die koms van dinge soos blokaanpasbare uitleg, dinamiese laai van inhoud en lettertipes, het webwerf-ontwikkeling baie aangenamer geword. Hierdie tegnologieë is immersminder beperkings, hoewel dit steeds daar is. Maar soos u weet, sonder perke sou daar geen kuns wees nie. Ons stel voor dat jy een werklik kreatiewe ontwerpbenadering gebruik - die goue verhouding. Daarmee kan jy die werkspasie effektief en pragtig vul, maak nie saak watter werfgroottes jy in jou sjablone stel nie.
Hoe om die werkspasie van die werf te vergroot
Daar is 'n goeie kans dat jy nie genoeg spasie sal hê om al die UI-elemente in 'n klein uitleg te pas nie. In hierdie geval sal jy kreatief of selfs meer kreatief moet begin dink as wat jy voorheen gedoen het.
Maksimum maak ruimte op die webwerf vry deur die navigasie in die opwipkieslys te versteek. Dit is logies om hierdie benadering nie net op mobiele toestelle te gebruik nie, maar ook op rekenaars. Die gebruiker hoef immers nie heeltyd te kyk na watter opskrifte op jou werf is nie – hy het gekom vir die inhoud. En die wense van die gebruiker moet gerespekteer word.
'n Voorbeeld van 'n goeie manier om die spyskaart weg te steek, is die volgende uitleg (foto hieronder).
In die boonste hoek van die rooi area kan jy 'n kruisie sien, deur daarop te klik wat die spyskaart in 'n klein ikoon sal versteek, wat die gebruiker alleen laat met die inhoud van die webwerf.
Dit is egter opsioneel, jy kan die navigasie verlaat, wat altyd in sig sal wees. Maar jy kan dit 'n pragtige ontwerpelement maak, en nie net 'n lys van gewilde skakels op die webwerf nie. Gebruik intuïtiewe ikone bykomend tot of selfs in plaas van teksskakels. dit is dieselfdesal jou werf toelaat om die skermspasie op die gebruiker se toestel doeltreffender te gebruik.
Die beste webwerf reageer
As jy nie weet watter uitleg om vir die webwerf te kies nie, dan is alles vir jou eenvoudig. Om op ontwikkelingskoste te bespaar en terselfdertyd nie jou gehoor te verloor as gevolg van swak uitleg vir een of ander toestel nie, gebruik responsiewe ontwerp.
Responsiewe ontwerp is 'n ontwerp wat ewe goed op verskillende toestelle lyk. Hierdie benadering sal jou webwerf verstaanbaar en gerieflik laat wees, selfs op 'n skootrekenaar, selfs op 'n tablet, selfs op 'n slimfoon. Hierdie effek word verkry deur outomaties die breedte van die werkarea van die skerm te verander. Deur responsiewe stylblaaie vir jou werf te gebruik, neem jy die beste besluit moontlik.
Wat is die verskil tussen responsiewe ontwerp en webwerfweergawes
Responsiewe ontwerp verskil van die mobiele weergawe van die webwerf deurdat die gebruiker in laasgenoemde geval 'n html-kode ontvang wat verskil van die rekenaar een. Dit is 'n nadeel in terme van bedienerprestasieoptimalisering sowel as soekenjinoptimalisering. Daarbenewens word dit moeiliker om statistieke vir verskillende weergawes van die webwerf te bereken. Die aanpasbare benadering het nie hierdie nadele nie.
Responsiwiteit vir verskeie toestelle word verkry deur 'n uitleg met 'n persentasie van die gespesifiseerde breedte of deur blokke na die beskikbare spasie oor te dra (in die vertikale vlak op 'n slimfoon in plaas vanhorisontaal op die lessenaar), of die skep van individuele uitlegte vir verskillende skerms.
Kom meer te wete oor responsiewe ontwerp en ontwikkeling in ons tutoriale.
