Standert diminsjes sites: funksjes, easken en oanbefellingen

Technology ûntwikkeling fan websites - een hiel multi-faceted proses. Dochs al syn fazen kinne wurde ûnderferdield yn twa wichtichste ûnderdielen - in funksjoneel en in bûtenste skie. Of, sa as yn 'e medium Webmaster Beg Ein en Front End resp. Minsken dy't kocht harren websites in web ûntwikkeling atelier, faak nayf leauwe dat it needsaaklik is om te rjochtsjen allinnich op funksjoneel, en it sil it rjocht beslút. Mar dit is wier yn in hiel, hiel seldsume gelegenheden, meastentiids foar de start-ups fan projekten op it toaniel fan de beta testen. De rest fan it grafysk ûntwerp en de brûkersynterface wurde gewoan ferplichte om foldwaan oan web ûntwikkeling noarmen en wêze komfortabel.

De earste hoekstien fan konfrontearre mei de ynterface ûntwerper, of ûntwerper - is de breedte fan de side opmaak. Ommers, is it nedich om te lûken ynterfaces foar har. Yntuityf binne der twa oanpak - óf to meitsjen aparte Layouts foar elk fan de populêre skerm resolúsjes, of jo kinne ien meitsje ferzje fan de side foar alle kaarten. Beide opsjes soe wêze ferkeard, mar earst dingen earst.

Standert breedte yn piksels foar de side dy't jo sille ea nedich

Foarôfgeand oan de ûntwikkeling fan de adaptieve yndieling massa ferskynsel is it ûntwikkeljen fan in side mei tûzenen piksels breed. Dit sifer is keazen foar ien simpele reden - dat de side waard pleatst op eltse skerm. En der is in bepaalde logika, mar lit ús der fan út dat in persoan is noch op syn minst HD-Monitor op it buroblêd. Yn dit gefal, jo opmaak sil lykje Tiny strip yn 'e midden fan it skerm, dêr't alles is getten yn ien pile, en oan' e kanten fan 'e grutte net-romte. No lit ús der fan út dat in persoan kaam nei jo web site fan in tablet mei in skerm fan 800 piksels yn de breedte, en wurdt kontrolearre yn de ynstellings "Lit de webside de folsleine ferzje." Yn dit gefal, jo webside sil ek werjûn wurde ferkeard, lykas gewoanwei net passe yn it skerm.

Ut dizze oerwagings, kinne wy konkludearje dat in fêste breedte foar de opmaak, we gewoan net passe en jo wolle finen in oare manier. Lit ús analysearje it idee fan in aparte yndieling foar elke skerm breedte.

Layouts foar alle gelegenheden

As jo hawwe keazen as in strategy om te meitsjen opmaak foar alle skerm maten beskikber op 'e merk, dan jo side sil de meast unyk yn it ynternet. Ommers, hjoed is it gewoan ûnmooglik foar dekking fan it hiele oanbod fan apparaten yn in besykjen om in eksakte ynstelling foar elke opsje. Mar as jo rjochtsje op de meast populêre monitor resolúsje en skerm apparaten, it idee is goed. Har ienige nadeel - de finansjele kosten. Ommers, as de ûntwerper ynterface ûntwerper en Ute wurdt twongen om 5 of 6 kear te fieren itselde wurk, it projekt kostet onevenredig oarspronklik oanplante by budzjet prizen.

Dêrom grutsk wêze op in oerfloed fan ferzjes foar ferskillende screens kin wêze útsein dat de sites-odnostranichniki waans doel - te ferkeapjen iene produkt en wês wis te dwaan dat goed. No, as jo net ien fan dy Landing, in multi-site, it binlik fierder.

De meast populêre maten fan sites

In kompromis tusken de twa utersten is in tekening fan de opmaak foar trije of fjouwer skerm maten. Under harren, men moat wêze in opmaak foar mobile apparaten. De rest moatte oanpast wurde foar de lytse, middellange en grutte buroblêd skerm. Hoe te kiezen de breedte fan de side? Hjirûnder wy presintearje HotLog service statistiken foar maaie 2017, dy't sjen lit ús de ferdieling fan de populariteit fan ferskate skerm resolúsje fan it apparaat, en ek de dynamyk fan feroarings yn dizze yndikator.

Ut de tabel is it mooglik om te learen hoe om te bepalen de grutte fan de side dy't jo wolle brûke. Dêrneist kin konkludearre dat de meast foarkommende hjoed is it skerm opmaak fan 1366 troch 768 pixels. Dizze skermen binne ynstallearre yn in budzjet laptop, sadat har populariteit is natuerlik. De folgjende meast populêre is in Full HD-monitor, dat is de gouden standert foar films, spultsjes, en, dêrom, te meitsjen site opmaak. Fierder yn de tabel we sjogge tastien is mobile apparaten 360 x 640 piksels, lykas ek ferskate embodiments fan PC en mobyl skerms dêrnei.

design layout

Sa, nei in analyze fan de statistiken, kinne wy konkludearje dat de optimale breedte fan 'e side hat 4 variations:

1. Ferzje Laptops mei 1366 piksels breed.
2. Full HD-ferzje.
3. 800 piksels in breedte grutte opmaak foar werjefte op lytse buroblêd byldskermen.
4. Mobile ferzje fan de side - 360 piksels yn de breedte.

Stel wy besletten wat jo wolle brûke de grutte fan generated boarne koade foar de side. Mar sa'n projekt soe noch wêze kostber. Sa beskôgje mear opsjes, dit kear sûnder it brûken fan in fêste breedte.

Meitsje in fleksibele opmaak

Der is in alternatyf oanpak dat wy hoege allinne te passen foar de minimum grutte fan it skerm, en de steile grutte fan plakken wurdt frege prosint. Yn dit gefal, de ynterface eleminten lykas menu 's, knoppen en logos, definearre wurde yn absolute termen, rjochte op' e minimale omfang fan 'e breedte fan it skerm yn piksels. Blocks mei de ynhâld, krekt oarsom, sil rûn neffens de oantsjutte prosint fan 'e breedte fan it skerm gebiet. Dy oanpak stiet net ûntdekke de grutte fan de side sa't rânebetingsten foar de ûntwerper en it talint te ferslaan dit nuânse.

Wat is de gouden fyk, en hoe om te brûke it web siden oan de opmaak?

Ek yn de renêssânse protte arsjitekten en keunstners besocht te jaan syn skeppingen de perfekte foarm en oanpart. Foar antwurden op fragen oer de gefolgen fan sokke proporsjes, se draaiden om de keninginne fan alle wittenskip - wiskunde.

Ea sûnt de dagen fan 'e Aldheid waard útfûn troch it oandiel dat ús each docht as de meast natuerlike en elegante, want it is ubiquitous yn de natuer. Ûntdekker fan de formule fan dizze ferhâlding wie in talintfolle Grykske arsjitekt neamd Phidias. It is berekkene dat as de measte fan de ferhâldings ferhâldt ta lege as gehiel jout in grutter, dan dit oanpart sil goed útsjogge. Mar yn dit gefal, as jo wolle ferdielen asymmetrically foarwerp. Dat oanpart letter waard neamd de gouden fyk, dy't noch net overestimate syn belang foar de wrâld kulturele skiednis.

Lit ús gean werom nei web design

It is hiel simpel - mei help fan de gouden fyk, kinne jo ûntwerpe siden dy't sil wêze meast rook de minsklike each. Berekkene neffens de formule fan de gouden fyk, wy fine it ûnferstannich nûmer 1,6180339887 ..., mar foar it gemak kinne jo gebrûk meitsje fan de ôfrûne wearde fan 1.62. Dat sil betsjutte dat ús side blokken moat wêze 62% en 38% fan it gehiel, wat grutte generated boarne koade foar de side dy't jo brûke. Foarbyld kinne jo sjen op de folgjende skema:

Brûken fan nije technologyen

Moderne technology opmaak web sides tastean jo om sekuer útdrage ideeën fan de ûntwerper en de ûntwerper, dus no kinne jo opbringe de útfiering fan Bolder ideeën dan by de dage fan ynternet technology. Net langer nedich hawwe in soad om te puzzle over wat moat wêze de grutte fan in side. Mei de komst fan sokke dingen as blok Adaptive opmaak, dynamyske Laden fan ynhâld en fonts, web site ûntwikkeling is folle kearen nofliker. Ommers, dy technologyen hawwe minder beheinings, ek al binne se. Mar lykas jim witte, sûnder beheining, der soe hielendal gjin keunst. Wy suggest jo brûke in wier kreative benadering ta ûntwerpen - it gouden fyk. Mei it, jim sille wêze kinne effisjinter en moai folje de wurkromte, wat grutte of siden dy't jo frege yn jo sjabloanen.

Hoe te fergrutsjen de wurkromte site

De kâns is grut dat jo sille net genôch romte om te fangen alle ynterface eleminten yn 'e yndieling fan' e lytse omfang. Yn dit gefal, dan sille moatte begjinne tinken kreatyf, of sels mear kreatyf as jimme diene earder.

Maksimum frije romte op de site mooglik, ûnderdûker de skipfeart yn 'e pop-up menu. Dizze oanpak is logysk om te brûken net allinnich mobyl, mar ek op it buroblêd. Ommers, de brûker net nedich alle tiid om te sjen nei wat hat koppen op jo site - it hat komme foar de ynhâld. In brûker wishes dy't earbiedige wurde moatte.

In foarbyld fan in goede wize om te ferbergjen it menu is de folgjende opmaak (foto hjirûnder).

Yn de boppeste hoeke fan it reade gebiet, sjogge jo in krús, klik op it menu dat ferskûlet him yn in lyts ikoan, it ferlitten fan de brûker allinnich mei de webside ynhâld.

Lykwols, dat is opsjoneel, kinne jo ferlitte de navigaasje, dat is altyd yn it sicht. Mar jo kinne it in moaie design elemint, net allinne in list mei keppelings op de populêre site. Brûk intuitiv byldkaikes neist tekst keppelings of sels ferfange se. It sil ek tastean dat jo site om effisjinter brûken fan skerm romte op dyn apparaat.

Best Website - adaptieve

As jo net witte wat men te kiezen in ynrjochting foar de site, allegear allinnich foar dy. Om besparjen op ûntwikkeling kosten en tagelyk net ferlieze it publyk fanwege minne yndieling foar guon apparaat, brûke responsive web design.

Adaptive neamd in ûntwerp dat sjocht op ferskate apparaten like goed. Dizze oanpak sil tastean dyn site te wêzen dúdlik en maklik sels foar in laptop, op syn minst op 'e tablet, sels op in smartphone. It berikt dizze effekt komt troch automatyske feroarings oan it wurkgebied fan it skerm breedte. Mei help fan Adaptive stylblêden foar de side, jo nimme it rjocht beslút mooglik.

Wat ûnderskiedt de adaptieve ûntwerp fan 'e beskikberens fan ferskillende ferzjes fan jo webside

Responsive design is oars út de mobile webside sadat yn it lêste gefal, de brûker krijt in html-koade, dat is wat oars út it buroblêd. Dit is in neidiel fan it eachpunt fan it optimalisearjen fan de prestaasjes fan de tsjinner, en ek sykmasine optimalisaasje. Boppedat, it dreger wurdt om beskôgje de statistiken neffens ferskillende ferzjes fan 'e side. In Adaptive oanpak is sûnder tekoarten.

Adaptability foar ferskate apparaten is berikt fanwege de opmaak breedte of persintaazjes fia ferfier blokken yn de beskikbere romte (yn 'e fertikale fleanmasine yn stee fan de horizontale smartphone op in buroblêd), of de ôfsûnderlike Layouts troch it meitsjen fan ferskate skerms.

Jo kinne mear leare oer responsive design en ûntwikkelje kinne jo út boeken.