'Móttækilegur' er nýjasta hreyfingin í vefþróun - og einn sem þarf nokkuð illa. Á hverjum degi er fjöldi tækja, vettvanga og vafra sem eru notaðir til að komast á internetið vex. Og meðan meirihluti notenda hefur aðgang að vefnum frá hefðbundnum vettvangi, er eftirspurn eftir vökva- og aðlögunarhæfum vefsvæðum sterkari en nokkru sinni fyrr.

Margir hönnuðir eru að taka þessa breytingu í hjarta og búa til stórkostlegar stykki sem dafna í farsíma-, spjaldtölvu- og skrifborðsumhverfi.

Eftirfarandi síður sameina fegurð með móttækilegum vefhönnunartækjum og sýna virkilega hvað hægt er að ná með smá nýsköpun. Svo grípa smá popp og skrifblokk, þú ert að fara að vilja borga eftirtekt.

StephenCaver.com

Þegar þú opnar þetta vefsvæði á skjáborðinu þínu, það er strax töfrandi. Djörf, svört, réttlætanleg fyrirsögn andstæða fallega með næstum vatnslitamyndun eins og Mojave Desert-bakgrunni. Þegar þessi síða lagfærist í farsíma stærð, breytingin er mikilvæg, og vefsvæðið lítur enn vel út.

stephencaver.com

FoodSense.is

Með breiðum skipulagi, hreinum línum og einföldum uppbyggingu þetta vefsvæði er frábært dæmi um lægstur vefhönnun. Þegar það er skoðað á töflu eða farsíma breytir það án þess að skerða samsetningu eða flæði.

Foodsense.is

Warface.co.uk

Notkun litar er sláandi og nýjungar staðsetning 3D figurines í forgrunni svæðisins snertir virkilega áhorfandann. Síðan er einstakt og spennandi og ekkert af áhrifunum tapast á farsíma.

Warface

DanielVane.com

Aftur hér leyfir hönnuður verk hans að tala fyrir sig. Áfangasíðan er fallegt í einfaldri einfaldleika þess og það berst fullkomlega á farsíma og skilur einn sérstaklega handtekinn mynd sem inniheldur lúmskur lógó.

danielvane.com

SasquatchFestival.com

Þessi síða er gaman og fjörugur og einstakt meðal annarra vefsvæða á þessum lista. Þeir fara framhjá hreinum einfaldleika til þess að skemmta sér með lit, myndmál og tákn á þann hátt sem enn tekst að skila á stíl. Þetta getur verið erfitt að gera í litlu rými, en hönnuðir Sasquatch stjórna áreynslulaust.

Sasquatch Festival

GravitateDesign.com

Notkun lögun í þetta vefsvæði stendur út strax. Með því að forðast notkun á landamærum og innihaldsefnum hefur það tekist að búa til vefsíðu sem sýnir vinnustað sitt í besta falli.

Gravitate

VisualSupply.co

Á sama hátt og Warspace, það er myndmálið sem raunverulega virkar fyrir þetta vefsvæði . Það er fullkomlega uppbyggt og lítur vel út á hverju tæki.

Visual Supply

StudioMds.co

Myrkri litir geta stundum verið gleymast í vefhönnun, en Studio Mds auka efnið sitt með feitletraðri ákvörðun. Skipulagið er stillt þannig að það passi minni skjástærð og missir ekkert annað en óþarfa tengla.

Studiomds

ForefathersGroup.com

Þessi síða hefur mikla uppskerutíma og nýtir áferð, myndmál og leturgerð til að búa til það. Það slims niður fallega (en það er synd að missa þessa api).

Forefathers

MapBox.com

Litakerfið og notkun mynda gefa Korthólf hreint pláss til að sýna vöru sína. Aftur gengur einfaldleiki út yfir flókinn eða pirruð hönnun, og það er einmitt af hverju það virkar vel á minni skjá.

Mapbox

Atriði sem þarf að hafa í huga þegar þú ert að hanna

Svo, nú þegar þú hefur skoðað nokkrar stjörnuþungaðar síður sem þú ert líklega kláði að byrja að hanna þitt eigið. En áður en þú hleypur af stað, eru hér nokkur atriði sem þarf að muna.

Myndir

Ein hindrun fyrir móttækilegri hönnun er hvernig tæki sýna myndir. A MacBook Pro með sjónhimnu sýna er að gera mynd á miklu hærri upplausn en farsíma, sem getur oft skapað vandamál. Ein leið til hliðar skref þetta mál er að hlaða upp bæði háum og lágum upplausn eintaka af myndunum þínum. Með því að nota CSS getur þú síðan ákveðið hvaða mynd er hlaðin miðað við skjáupplausn tækisins. Ef þú ert að nota lager myndir skaltu ganga úr skugga um að þú splurge fyrir hærri rez valkost.

Ákvarða brotamörk

Oft er móttækilegur hönnun byggður í kringum það sem kallast "brotstuðlar" - eða upplausnin sem skipulag breytist - byggist fyrst og fremst á algengum skjástærðum tækisins. Vandamálið með þessari nálgun er hins vegar að það tekur ekki tillit til þess hversu ólíkir skjástærðir eru í raun. Það er engin "alhliða" stærð lengur. Svo, í stað þess að ákveða bilanir á 360 px (farsíma), 768px (töflu) og 1024px (skrifborð) er betra að láta hönnunina tala fyrir sig. Byrjaðu með lokið skipulagi og breyttu síðan glugganum þínum þar til hönnunin brýtur - gerðu þetta eitt af punktunum þínum og haltu því áfram. Þú munt komast að því að vefsvæði þitt rennur miklu mjúkari.

Hefur þú rekist á frábær móttækilegan áfangasíðu? Hefur þú hannað einn sjálfur? Láttu okkur vita í athugasemdunum.