10 leukaputken reagoivaa aloitussivua
"Responsive" on uusin kehitys web-kehitys - ja yksi, joka tarvitaan melko huonosti. Joka päivä laitteiden, alustojen ja selainten määrä, jota käytetään internetin käyttöön, kasvaa. Ja vaikka suurin osa käyttäjistä käyttää edelleen verkkoa perinteisiltä alustoilta, nesteen ja mukautuvien verkkosivustojen kysyntä on vahvempaa kuin koskaan.
Monet suunnittelijat ottavat tämän muutoksen sydämeen ja luovat upeita kappaleita, jotka menestyvät mobiili-, tablet- ja työympäristöissä.
Seuraavat sivustot sulautuvat kauneuteen reagoivilla web-suunnittelutyökaluilla ja näyttävät todella, mitä voidaan saavuttaa pienellä innovaatiolla. Joten tartu popcorniin ja muistilappuun, aiot kiinnittää huomiota.
StephenCaver.com
Kun avaat tämä sivusto työpöydällesi, se kiehtoo välittömästi. Rohkea, musta, perusteltu otsikko on erilainen kuin Mojaven Desert-taustan melkein akvarellimainen laatu. Kun tämä sivusto sopeutuu mobiilikokoon, muutos on merkittävä, ja sivusto näyttää edelleen hyvältä.
FoodSense.is
Laaja asettelu, puhtaat linjat ja yksinkertainen rakenne tämä sivusto on loistava esimerkki minimalistisesta web-suunnittelusta. Kun se katsotaan tablet-laitteella tai mobiililaitteella, se säätää tinkimättä koostumuksesta tai virtauksesta.
Warface.co.uk
Värin käyttö on silmiinpistävää ja 3D-hahmojen innovatiivinen sijoittaminen sivuston etualalle todella kytkeytyy katsojalle. Sivu on ainutlaatuinen ja jännittävä, eikä mitään vaikutusta häviä matkapuhelimella.
DanielVane.com
Tässäkin suunnittelija antaa hänen työnsä puhumaan itsestään. Aloitussivu on kaunista täysimittaisen yksinkertaisuutensa ansiosta ja se kulkee täydellisesti mobiiliin, jättäen erityisen erityisen pidättävän kuvan, joka sisältää hienon logon.
SasquatchFestival.com
Tämä sivusto on hauskaa ja leikkisä ja ainutlaatuinen muiden luettelossa olevien sivustojen joukossa. He luopuvat puhtaasta yksinkertaisuudesta, jotta heillä on hauskaa väreissä, kuvissa ja kuvakkeissa tavalla, joka kykenee edelleen toimittamaan tyylin. Tätä voi olla vaikea tehdä pienessä tilassa, mutta Sasquatchin suunnittelijat hallitsevat vaivattomasti.
GravitateDesign.com
Muodon käyttö tämä sivusto erottuu välittömästi. Rajoittamatta rajojen ja sisältörasioiden käyttöä he ovat onnistuneet luomaan sivuston, joka näyttää työnsä parhaimmillaan.
VisualSupply.co
Samoin kuin Warspace, se on kuvasta, joka todella toimii tämä verkkosivusto . Se on täysin jäsennelty ja näyttää kauniilta kaikissa laitteissa.
StudioMds.co
Tummia värejä voi joskus unohtaa web-suunnittelussa, mutta Studio Mds parantamaan sisältöään rohkealla päätöksellä. Asettelu sopeutuu pienempään ruudun kokoon menettämättä vain tarpeettomia linkkejä.
ForefathersGroup.com
Tämä sivusto on loistava, vintage tunne ja käyttää tekstuuria, kuvakuvia ja fonttia luoda tämä. Se slims alas kauniisti (mutta on häpeä menettää apina).
MapBox.com
Värimalli ja valokuvien käyttö antavat Mapbox puhdas tila, jolla esitellään tuotteitaan. Jälleen kerran yksinkertaisuus voittaa monimutkaisen tai tyrmäävän muotoilun, ja juuri se toimii hyvin pienemmällä näytöllä.
Kiinnitä huomiota suunnitellessasi
Joten nyt, kun olet katsellut joitakin tähtien vastaavia sivustoja, olet todennäköisesti kutina alkaa suunnitella oman. Mutta ennen kuin lähdet pois, tässä on muutama muistiin muistettava asia.
Valokuvat
Yksi este reagoivaa suunnittelua varten on, miten laitteet näyttävät valokuvia. Verkkokalvonäytöllä varustettu MacBook Pro tulee tuottamaan kuvaa paljon suuremmalla tarkkuudella kuin matkapuhelin, joka voi usein aiheuttaa ongelmia. Yksi tapa sivua eteenpäin tämä ongelma on ladata valokuvien sekä korkean että matalan resoluution kopioita. CSS: n avulla voit määrittää, mikä kuva ladataan laitteen näytön tarkkuuden perusteella. Jos käytät varastokuvia, varmista, että halkaisut korkeammalle rez-vaihtoehdolle.
Raja-arvojen määrittäminen
Usein reagoivat mallit rakentuvat noin "break point" -tekniikoiksi eli resoluutioksi, jossa ulkoasu muuttuu - perustuen ensisijaisesti yhteisiin laitteiden näytön kokoihin. Tämän lähestymistavan ongelma on kuitenkin se, ettei se ota huomioon, kuinka monipuoliset näytön koot todella ovat. Mitään "universaalia" kokoa ei enää ole. Joten sen sijaan, että ennalta määritettäisiin katkeamishetkellä 360px (mobiili), 768px (tabletti) ja 1024px (työpöytä), on parempi antaa suunnittelusi puhua itsestään. Aloita valmiilla asettelulla ja muokata sitten ikkunaa, kunnes muotoilu murtuu - tee tämä eräpisteesi ja jatka sitten. Löydät sivustosi virtaa paljon pehmeämmäksi.
Oletko törmännyt upeaan reagoivaan aloitussivulle? Oletko suunnitellut itsellesi? Kerro meille kommentit.