Standard dimensies webwerwe: funksies, vereistes en aanbevelings
Tegnologie-ontwikkeling van webwerwe - 'n baie veelsydige proses. Nog al sy fases kan verdeel word in twee hoofkomponente - 'n funksionele en 'n buitenste skede. Of, as in die medium webmeester Beg End en frontend onderskeidelik. Mense wat hul webwerwe in die web-ontwikkeling studio gekoop, dikwels naïef glo dat dit nodig is om te fokus net op funksionele, en dit sal die regte besluit wees. Maar dit is waar in 'n baie, baie rare geleenthede, gewoonlik vir nuwe ondernemings van projekte op die stadium van beta-toets. Die res van die grafiese ontwerp en gebruikerskoppelvlak is eenvoudig verplig om te voldoen aan web ontwikkeling standaarde en gemaklik wees.
Die eerste hoeksteen van die gesig staar die koppelvlak ontwerper, of ontwerper - is die breedte van die terrein uitleg. Na alles, is dit nodig om koppelvlakke te trek vir haar. Intuïtief is daar twee benaderings - óf om aparte uitlegte te maak vir elk van die gewilde skerm resolusies, of jy kan 'n mens weergawe van die webwerf vir alle kaarte te skep. Beide opsies sal verkeerd wees, maar eerste dinge eerste.
Standaard breedte in pixels vir die webwerf wat jy ooit sal nodig
Voor die ontwikkeling van aangepaste uitleg massa verskynsel is die ontwikkeling van 'n webwerf met duisende pixels wyd. Hierdie syfer is gekies vir 'n eenvoudige rede - dat die webwerf op enige skerm geplaas. En daar is 'n sekere logika, maar laat ons aanneem dat 'n persoon is nog steeds ten minste HD-monitor op die lessenaar. In hierdie geval, sal jou uitleg klein strook lyk in die middel van die skerm, waar alles is gevorm in een hopie, en aan die kante van die groot nie-ruimte. Kom ons neem aan dat 'n persoon gekom om jou webwerf van 'n tablet met 'n skerm van 800 pixels breed, en is nagegaan in die instellings "Wys die webwerf die volledige weergawe." In hierdie geval, jou webwerf sal ook verkeerd vertoon, as eenvoudig nie inpas in die skerm.
Van hierdie oorwegings, kan ons aflei dat 'n vaste wydte vir die uitleg, ons het net eenvoudig nie inpas en jy wil 'n ander manier te vind. Kom ons ontleed die idee van 'n aparte uitleg vir elke breedte skerm.
Uitlegte vir alle geleenthede
As jy gekies het as 'n strategie om die uitleg te skep vir alle skerm groottes beskikbaar op die mark, dan sal jou site die mees unieke in die Internet wees. Na alles, vandag is dit eenvoudig onmoontlik om die hele reeks van toerusting dek in 'n poging om 'n presiese plek vir elke opsie maak. Maar as jy fokus op die gewildste monitor resolusie en skerm toestelle, die idee is goed. Sy enigste nadeel - die finansiële koste. Na alles, wanneer die ontwerper koppelvlak ontwerper en kodeerder sal gedwing word om 5 of 6 keer na dieselfde werk verrig, die projek sal buite verhouding kos oorspronklik geplant by begroting pryse.
Daarom roem 'n oorvloed van weergawes vir verskillende skerms kan wees, behalwe dat die webwerwe-odnostranichniki wie se doel - om een produk verkoop en seker wees om dit goed te doen. Wel, as jy nie een van daardie Landing, 'n multi-site, dit staan tot verdere redeneer.
Die gewildste groottes van webwerwe
'N kompromie tussen die twee uiterstes is 'n teken van die uitleg vir drie of vier skerm groottes. Onder hulle is, moet 'n mens 'n uitleg vir mobiele toestelle. Die res moet aangepas word vir die klein, medium en groot lessenaar skerm. Hoe om die wydte van die terrein te kies? Onder ons teenwoordig HotLog diens statistieke vir Mei 2017, wat die verspreiding van die gewildheid van verskeie skerm resolusie van die toestel, sowel as die dinamika van verandering in hierdie aanwyser wys vir ons.
Uit die tabel is dit moontlik om te leer hoe om die grootte van die terrein wat jy wil gebruik te bepaal. Daarbenewens kan dit afgelei word dat die mees algemene formaat vandag is die skerm in 1366 deur 768 punte. Hierdie skerms is geïnstalleer in 'n begroting laptop, so hulle gewildheid is natuurlik. Die volgende gewildste is 'n Full HD-monitor, wat is die goue standaard vir flieks, speletjies en dus na die terrein uitlegte te skep. Verder in die tabel sien ons toelaat mobiele toestelle 360 x 640 pixels, asook verskeie belichaming van die lessenaar en mobiele skerms daarna.
So, nadat die ontleding van die statistieke, kan ons aflei dat die optimale breedte van die site het 4 variasies:
Weergawe laptop met 'n breedte van 1366 pixels.
800 pixels wyd grootte uitleg vir vertoning op klein lessenaar skerms.
Mobiele weergawe van die webwerf - 360 pixels breed.
Veronderstel ons besluit wat jy wil hê dat die grootte van die gegenereerde bronkode gebruik vir die webwerf. Maar so 'n projek sal nog duur. So oorweeg meer opsies, hierdie keer sonder die gebruik van 'n vaste wydte.
Maak 'n buigsame uitleg
Daar is 'n alternatiewe benadering wat ons moet net aan te pas vir die minimum grootte van die skerm, en die blote grootte van terreine sal gevra persent. In hierdie geval, die koppelvlak elemente, soos spyskaarte, knope en logo's, kan gedefinieer word in absolute terme, met die fokus op die minimum grootte van die breedte van die skerm in pixels. Blokke met die inhoud nie, inteendeel, sal gerek word volgens die gespesifiseerde persent van die breedte van die skerm gebied. Met hierdie benadering kan nie die grootte van die terrein op te spoor as beperkinge vir die ontwerper en die talent om hierdie nuanse klop.
Wat is die goue verhouding, en hoe om die webblaaie om die uitleg te gebruik?
Selfs in die Renaissance baie argitekte en kunstenaars probeer om sy skeppings die perfekte vorm en verhouding gee. Vir antwoorde op vrae oor die implikasies van so 'n verhouding, het hulle aan die koningin van alle wetenskappe - wiskunde.
Sedert die dae van ouds is uitgevind deur die verhouding wat ons oog waarneem as die mees natuurlike en elegante, want dit is alomteenwoordige in die natuur. Ontdekker van die formule van hierdie verhouding was 'n talentvolle Griekse argitek met die naam Phidias. Dit word bereken dat as die meeste van die proporsies betrekking het op 'n lae as 'n geheel bied 'n groter, dan is hierdie verhouding sal goed lyk. Maar in hierdie geval, as jy wil asymmetrisch voorwerp verdeel. Hierdie verhouding later geword het die goue verhouding, wat nog nie die belangrikheid daarvan oorskat vir die wêreld kulturele geskiedenis.
Kom ons gaan terug na web design
Dit is baie eenvoudig - met behulp van die goue verhouding, kan jy die bladsye wat die meeste lus vir die menslike oog sal ontwerp. Bereken volgens die formule van die goue afdeling, vind ons die irrasionale getal 1,6180339887 ..., maar vir gemak kan jy die afgeronde waarde van 1,62 gebruik. Dit sal beteken dat ons bladsy blokke 62% en 38% van die hele, maak nie saak hoe groot gegenereer bron-kode vir die plek jy gebruik moet word. Byvoorbeeld jy kan sien op die volgende skema:
Gebruik van nuwe tegnologie
Moderne tegnologie uitleg webwerwe toelaat om akkuraat oor te dra idees van die ontwerper en die ontwerper, so nou kan jy die implementering van vetter idees as aan die begin van Internet tegnologie bekostig. Nie meer nodig het baie om te legkaart oor wat moet die grootte van 'n site. Met die koms van dinge soos blok adaptive uitleg, dinamiese laai van inhoud en fonts, webwerf-ontwikkeling het baie keer meer aangenaam te word. Na alles, hierdie tegnologie het minder beperkings, selfs al is hulle. Maar soos jy weet, maar nie beperk tot, sou daar geen kuns wees. Ons stel voor dat jy 'n ware kreatiewe benadering tot die ontwerp gebruik - die goue afdeling. Met dit, sal jy in staat wees om die werkplek doeltreffend en mooi te vul, maak nie saak hoe groot of webwerwe wat jy gevra in jou templates.
Hoe om die werkspasie webwerf te verhoog
Die kanse is goed dat jy genoeg ruimte om al die koppelvlak elemente in die uitleg van die klein grootte te akkommodeer nie sal hê. In hierdie geval, sal jy moet begin kreatief te dink, of selfs meer kreatief as jy voor het.
Maksimum vrye ruimte op die webwerf as moontlik, die wegsteek van die navigasie in die pop-up menu. Hierdie benadering is logies om nie net selfoon, maar ook op die lessenaar te gebruik. Na alles, het die gebruiker nie die hele tyd nodig om te kyk na wat het opskrifte op jou werf - dit is daar dat die inhoud. 'N gebruiker wil gerespekteer word.
'N Voorbeeld van 'n goeie manier om die spyskaart te versteek is die volgende uitleg (hieronder uitgebeeld).
In die boonste hoek van die rooi area, kan jy sien 'n kruis, kliek op die spyskaart wat skuil in 'n klein ikoon, die verlaat van die gebruiker alleen met die inhoud van die webtuiste.
Dit is egter opsioneel, kan jy die navigasie dit is altyd in sig nie verlaat nie. Maar jy kan dit 'n pragtige ontwerp element, nie net 'n lys van skakels op die gewilde webwerf maak. Gebruik intuïtiewe ikone in Benewens skakels teks of selfs vervang. Dit sal ook jou site toe te laat om meer doeltreffende gebruik van die skerm ruimte op jou selfoon.
Beste Website - adaptive
As jy nie weet watter een om 'n uitleg vir die terrein te kies, alles net vir jou. Om te bespaar op die ontwikkeling koste en terselfdertyd nie verloor die gehoor as gevolg van swak uitleg vir 'n paar toestel, gebruik reageer web ontwerp.
Adaptive bekend as 'n ontwerp wat lyk op verskillende toestelle ewe goed. Hierdie benadering sal toelaat om jou webwerf te duidelik en maklik wees selfs vir 'n laptop, ten minste op die tafel, selfs op 'n smartphone. Dit bereik hierdie effek is te wyte aan 'n outomatiese veranderinge aan die werk area van die wydte skerm. Die gebruik van aangepaste style sheets vir die webwerf, is jy neem die regte besluit moontlik.
Wat onderskei die aangepaste ontwerp van die beskikbaarheid van verskillende weergawes van jou webwerf
Reageer ontwerp is anders as die mobiele webwerf, sodat in die laasgenoemde geval, die gebruiker 'n html-kode ontvang, wat verskil van die lessenaar. Dit is 'n nadeel van die punt van die lig van die optimalisering van die prestasie van die bediener, sowel as search engine optimization. Daarbenewens, hoe moeiliker word dit om die statistieke te oorweeg volgens verskillende weergawes van die webwerf. 'N aangepaste benadering is sonder tekortkominge.
Aanpasbaarheid vir verskillende toestelle bereik as gevolg van die wydte uitleg of persentasies van die transport blokke in die beskikbare ruimte (in die vertikale vlak in plaas van die horisontale smartphone op 'n lessenaar), of die individu uitleg deur die skep van verskeie skerms.