Yleinen "mobilisointi": siirtyminen mukautuvaan suunnitteluun. Mikä vaihtoehto ja mihin se sopii?

Siinä käytetään termejä, kuten reagoiva ja mukautuva suunnittelu Viime aikoina tarpeeksi usein. Kuten käy ilmi, joillekin ihmisille nämä kaksi käsitettä ovat melkein identtisiä. Tässä artikkelissa puhumme siitä, mikä on reagoiva ja mukautuva muotoilu, ja mitä eroa niillä on.

Alkaen hetkestä tablettitietokoneet ja älypuhelimet ovat tulleet suuren yleisön saataville, verkkosivustoja tarkastellaan yhä enemmän kosketusohjatuilla laitteilla, joissa on pieni näyttö. Monet Internet-resurssit osoittautuivat täysin sopimattomiksi tällaisten laitteiden omistajien käyttöön.
Kaksi pohjimmiltaan ilmestyi erilaisia ​​lähestymistapoja verkkosivustojen luomiseen mobiililaitteille: Mukautuva verkkosuunnittelu ja Responsiivinen web-suunnittelu. Tarkastellaan kutakin niistä erikseen ja verrataan sitten niiden sovelluksia ja ominaisuuksia.

Mitä on tapahtunut responsiivinen muotoilu

Responsiivinen web-suunnittelu (RWD) on lähestymistapa suunnitteluun, jossa verkkosivusto on suunniteltu mahdollisimman helppokäyttöiseksi: kätevä katselu verkkosivusto, jossa on mahdollisimman vähän kokoa ja tarpeetonta vieritystä - mitä suurimmassa määrin laitteita. Responsiivisessa suunnittelussa on seuraavat ominaisuudet:

• Responsiivista suunnittelua luotaessa käytetään vain HTML:ää ja CSS:ää – ilman JavaScript-yhteydet suunnitteluelementtien "vastettavuuden" määrittämiseksi.
• Responsiivinen asettelu määrittää, miltä verkkosivuston elementit näyttävät erilaisia ​​laitteita; Muut eivät kuitenkaan piilota/korvaa näitä elementtejä, eivätkä niiden käyttäytyminen samoin kuin niiden suorittamat toiminnot muutu.
• Kolme reagoivan suunnittelun perusperiaatetta:
• kaikkien elementtien järjestely modulaarisen ruudukon sisällä;
• kaikki asetteluelementit ja mediatiedostot (mukaan lukien kuvat) ovat "joustavia" - niiden koot riippuvat näytön koosta;
• työskentely mediakyselyiden kanssa - CSS3-moduuli, jonka avulla voit määrittää erilaisia ​​tyylejä(tai jopa tyylisivut) näytön resoluution, näytön koon ja muiden ominaisuuksien mukaan.
• Responsiivinen suunnittelu luodaan käyttämällä reagoivaa merkintää (jota ei pidä sekoittaa reagoivaan suunnitteluun). Mukautuva asettelu tarkoittaa, että sivustolle luodaan useita tyylejä, vaihtoehtoja elementtien järjestelyyn modulaarinen verkko ja useita sisustuselementtityylejä. Nämä vaihtoehdot korvaavat toisensa näytön koon muuttuessa ja niiden väliin muodostuu tiettyjä siirtymäpisteitä eri tyyppejä sivuston ulkoasu / tyylit.
• Responsiivinen suunnittelu ei edellytä kanssakäymistä objektimalli Sivun elementit eivät tarkoita muutosta lohkojen ja objektien hierarkiassa/sisäkkäisyydessä, kun merkintätyyppi muuttuu.

Mitä on responsiivinen suunnittelu

Mukautuva web-suunnittelu (AWD) on suunnittelu, joka manipuloi sivuston eri asetteluja tai asetteluja varmistaakseen parhaan käytön tietyissä, ennalta määritetyissä laitteissa ja näytön resoluutioissa.

• Mukautuvan suunnittelun tapauksessa sivustoelementit voidaan piilottaa ja korvata muilla; Yksittäisten verkkosivuston elementtien käyttäytyminen ja toiminnallisuus voivat muuttua.
• Responsiivinen suunnittelu hyödyntää laajasti JavaScriptiä sivuston objektien käyttäytymisen ja toimivuuden hallitsemiseksi.
• Mukautuva suunnittelu edellyttää työskentelyä sivun elementtien objektimallin kanssa ja niiden hierarkian/sisäkkäisyyden muuttamista eri laitteissa.
• Sivuston saman ulkonäön ja toimivuuden varmistaminen ei ole pakollista eri selaimet. On mahdollista käyttää uusia teknologioita, joita vanhemmat ohjelmien versiot eivät tue - koska suunnittelu, kuten edellä mainittiin, mukautuu tietyntyyppiset laitteet.

Määritelmä hämmennys

RuNetissä reagoivan ja mukautuvan suunnittelun käsitteet ovat lähes identtisiä keskenään. On syytä ymmärtää, että nämä lähestymistavat eroavat ensisijaisesti tehtävistä, joihin niitä käytetään.

Mukautuva merkintä ja reagoiva suunnittelu ovat täysin eri asioita. Mukautuva verkkosivuston ulkoasu sisältää elementtien tyylien muuttamisen eri laitteissa, ja sitä käytetään responsiivisessa suunnittelussa. Mukautuva suunnittelu on erillinen lähestymistapa verkkosivustojen etuosan suunnitteluun ja luomiseen.

Lähestymistapojen ominaisuudet

Jonkin verran tärkeitä näkökohtia, joiden suhteen reagoivat ja mukautuvat mallit eroavat radikaalisti:
Sivuston nopeus. Mukautuvan suunnittelun periaatteiden mukaan luotu sivusto voi latautua useita kertoja nopeammin, koska käyttäjän on ladattava palvelimelta vain ne osat suunnittelusta, jotka ovat välttämättömiä sivuston toimimiseksi laitteellaan. Responsiivisessa suunnittelussa käyttäjän on odotettava, kunnes kaikki tyylit ja kuvat on ladattu, riippumatta vierailijan käyttämästä laitteesta.
Kehityksen monimutkaisuus. Mukautuvalla suunnittelulla varustetun verkkosivuston luominen vaatii kehittäjältä korkeampaa ammattitasoa. Erityisesti vankka kokemus JavaScriptistä.
SEO näkökohta. Huhujen mukaan Google hyväksyy responsiiviset sivustot paljon paremmin kuin mukautuvat.

Käytännössä

Käytännössä reagoiva suunnittelu on melko yleistä, toisin kuin adaptiivinen suunnittelu. Mikä on ilmeistä: ensimmäinen on loppujen lopuksi helpompi toteuttaa ja hallita. Useimmat markkinapaikoilla myytävät mallit ovat responsiivisia, eivät mukautuvia.
Mukautuvaa suunnittelua käytetään useammin vakavissa ja monikäyttöisissä tuotteissa. Ilmeisimpiä esimerkkejä: VKontakte-verkon mobiiliversiossa sähköposti Googlelta.

P.S. Jos kiinnität huomiota, huomaat, että sivustomme ulkoasu on esimerkki responsiivisesta suunnittelusta. Varmista tämä muuttamalla selainikkunan leveyttä tietokoneellasi - ja huomaat kuinka sivuston asettelutyyli muuttuu vähitellen mobiilinäkymäksi.

Tervehdys, satunnaiset vierailijat ja blogisivuston säännölliset lukijat!

Tämän sivuston olemassaolon aikana vaihdoin mallia useita kertoja ja loin jopa omani tyhjästä.
Yksi tärkeimmistä tehtävistä uutta mallia valittaessa on sivuston mukautuva asettelu kaikille näytön resoluutioille.

Artikkelin lyhyt kuvaus:

Edellisessä artikkelissa kirjoitin jo siitä, miksi sitä tarvitaan. Mutta kuinka saavuttaa tämä sopeutumiskyky?

Tätä varten on eri tavoilla. Jotkut käyttävät JavaScriptiä, jotkut jotain muuta. Mutta uskon, että yksinkertaisin ja Oikea tapa on mukautuva CSS:n avulla.

Kuinka tehdä responsiivinen sivuston ulkoasu

Ensinnäkin Jos päätät luoda responsiivisen verkkosivuston ulkoasun, lisää seuraava koodi tagien väliin:

Mikä typerys minä olin, kun en tehnyt tätä heti, kun yritin tehdä mukautuvaa verkkosivuston ulkoasua!!!
Mobiiliselaimien ongelmana on niiden verkkosivustojen asettelun skaalautuminen, jopa mukautuvien.

Kuvittele, piirrän suunnitelman, kirjoitan sitten muistiin kaikki tarvittavat tyylit ja kyselyt, tarkistan sivuston mukautuvuuden, kun erilaisia ​​resoluutioita. Kaikki näyttää olevan hyvin! Mutta kun avaan blogini älypuhelimellani, huomaan, että sivusto on yksinkertaisesti kutistunut. Se ei mukautunut mobiililaitteeseen, vaan pienensi vain fontin kokoa, kuvia jne.

Kuinka niin? Aloin tarkistaa kaikki tyylit uudelleen nähdäkseni olinko kirjoittanut luokat oikein, ja lopulta päädyin siihen pisteeseen, että tarkistin selainikkunan leveyden px:nä Javascriptin avulla. Olin järkyttynyt. Kun tarkastelin kannettavaa tietokonetta, sain tulokseksi 1024px, ja sain suunnilleen saman tuloksen avattaessa sivustoa älypuhelimella!

Mutta näin ei voi olla!

Osoittautuu, että jos et kirjoita yllä ilmoittamaani koodia, mobiiliselain ei ymmärrä, että sivusto on mukautuva ja yrittää yksinkertaisesti pienentää sivuston sivua niin, että se sopii pieni näyttö kännykkä

Tyhmyyteni ja epäpätevyytteni vuoksi menetin paljon aikaa. Mutta nyt muistan sen ikuisesti))).

Mukautuva asettelu CSS-media pyynnöt

Jotta se reagoisi CSS:n avulla, sinun on käytettävä mediakyselyitä.

Miten on, että? Kyllä, hyvin yksinkertaista. SISÄÄN CSS-tiedosto sinun täytyy kirjoittaa kyselyitä, kuten:

@medianäyttö ja (min-leveys: 1440px) ja (max-leveys: 1599px)( )

Tämä koodi tarkoittaa, että "( )" väliin suljetut tyylit toimivat näytöissä, joiden vähimmäisleveys on 1440 ja enintään 1599px.

Eli ne sivustoelementtien tyylit, joita on mukautettava näytön resoluution mukaan, on kirjoitettava erikseen kullekin mahdolliselle näytön leveydelle.

Eniten tärkeät luvat näyttö mukautuvalla asettelulla

• 320 px - Mobiililaitteet (pystysuunta);
• 480 px - Mobiililaitteet (vaakasuunnassa);
• 600 px - Pienet tabletit;
• 768 px - Tabletit (pystysuuntainen);
• 1024 px - Tabletit (vaakasuunnassa)/netbookit;
• 1280 px ja enemmän - PC.

Näihin resoluutioihin sinun on keskityttävä ja kiinnitettävä erityistä huomiota, kun teet mukautuvia asetteluja. Nämä ovat yleisimmät näytön resoluutiotyypit.

bootstrap responsiivinen muotoilu

Erittäin kätevä käyttää mukautuvan luomiseen bootstrap-asettelu. Mukavuus on, että kaikki tyylit lohkojen, painikkeiden, taulukoiden jne. mukauttamiseen. ovat jo rekisteröityneet bootstpapiin. Sinun tarvitsee vain selvittää, mikä luokka määrittää millekin elementille.

Aloita lataamalla uusin bootstrap versio ja liitä se sivustoosi. Huomaa, että tyylien ja komentosarjojen yhdistämisellä WordPressiin on omat ominaisuutensa.

Bootstrapin asettelu eroaa siinä, että lohkon tai näytön leveys jaetaan 12:lla yhtä suuret osat. Ja määrittämällä tietyn luokan lohkolle, voit asettaa lohkon leveyden yhtä suureksi kuin vaadittu määrä osia.

Tämän mallin avulla voit esimerkiksi varata yhden leveän lohkon 8 osaa leveälle sisällölle ja yhden kapean lohkon 4 osaa leveälle sivupalkille:

Lohkojen leveys lasketaan automaattisesti näytön leveydestä riippuen. Mobiililaitteella katsottuna nämä lohkot siirtyvät toistensa alle.

Voit myös säätää lohkon etäisyyttä reunasta jälleen haluttuun osien määrään. Esimerkiksi tämä malli:

Luodaan 10 osaa leveä lohko, jonka vasen sisennys on 1 osa näyttöä.

Jos katsot sitä, bootstrapin kanssa työskentely tekee työstä erittäin nopeaa. Lisäksi nämä tyylit toimivat varmasti oikein, eikä sivustolla ole mitään vinoa.

Tulevaisuudessa aion julkaista useita oppitunteja bootsrapin kanssa työskentelystä. Siksi suosittelen, että et missaa tätä hetkeä.

Verkkosivuston mukautuvuuden tarkistaminen

Mutta herää kysymys: kuinka tarkistaa verkkosivuston mukautuvuus? Olet siis kirjoittanut mediakyselyitä CSS:ssä, yhdistänyt bootstrapin ja käyttänyt vaaditut luokat. Kuinka voit tarkistaa, että sivusto mukautuu oikein kaikilla näytön resoluutioilla?

Erittäin tarkka ja mikä tärkeintä ilmainen palvelu, joka ansaitsee kunnioituksen ja kiitoksen verkkovastaavilta ja ulkoasun suunnittelijoilta, jotka käsittelevät mukautuva asettelu sivustoja.

No, mitä pidät artikkelista? Kaikki kunnossa? Jos ei, kirjoita kommentteihin, niin selvitetään se yhdessä.

Kyllä, responsiivisen verkkosivuston suunnittelun tekemiseksi sinun on työskenneltävä kovasti. Mutta nämä ponnistelut palkitaan suotuisalla asenteella sivustoasi hakukoneilta, ja mikä tärkeintä, sivustosi vierailijoilta.

Kirjoittajalta: responsiivinen verkkosivustosuunnittelu on aivan täydellinen uusi lähestymistapa Suunnittelu saa yhä enemmän huomiota, mutta koska se eroaa perinteisistä kehitysmenetelmistä, se voi aluksi tuntua kohtuuttoman vaikealta uusille web-suunnittelijoille ja kehittäjille. Tässä artikkelissa aion kattaa joitain tärkeimmät kohdat liittyvät responsiivisen web-suunnittelun kehittämiseen ja toteuttamiseen ja helpottavat elämääsi, ystävät.

Klassinen lähestymistapa verkkosivuston luomiseen näyttää suunnilleen tältä: kehityslohko, web-suunnittelulohko, ulkoasulohko jne. Viime vuosina kaikki on kuitenkin alkanut muuttua dramaattisesti: termi "verkkosuunnittelu" on vähitellen muuttunut. hiipumassa, kun taas "mukautuva muotoilu" vahvistaa salakavalasti asemaansa ja tekee vähitellen muutoksia asiantuntijoiden tietoisuudessa.

Tekijä: suurelta osin, web-suunnittelua ei pidä käsittää niin yksiselitteisesti, ja lähes teollisena standardina pidetyn adaptiivisen suunnittelun nopea kehitys on johtanut kokonaiseen karuselliin erilaisia ​​työkaluja ja alustoja.

Sopeutumiskyvyn käsite

"Mitä on responsiivinen suunnittelu ja mihin se mukautuu?" - tietämätön voi kysyä. Vastaan ​​sinulle: käytetyn laitteen tyypin mukaan. Responsiivinen suunnittelu varmistaa verkkosivujen hyvän katselun erilaisilla Internetiin liitetyillä laitteilla.

Saman verkkosivuston pitäisi näyttää hyvältä kannettavissa tietokoneissa, älypuhelimissa, tableteissa jne. käytetystä näyttömuodosta ja resoluutiosta riippumatta. Samanaikaisesti käyttäjien pitäisi olla yhtä kätevää tarkastella verkkosivuja kaikissa muodoissa ilman tarvetta esimerkiksi laajentaa yksittäisiä lohkoja, jotta ne eivät jää huomaamatta. haluttu painike.

Koska jokainen adaptiivinen projekti on yksilöllinen ja iteratiivinen, on melko vaikeaa analysoida sen kaikkia prosesseja ratkaisujen löytämiseksi kaikkiin tilanteisiin ja työn tehokkuuden parantamiseen. On kuitenkin olemassa yleisiä onnistuneita strategioita ja tekniikoita responsiivisen verkkosivustosuunnittelun toteuttamiseen, parantamiseen ja luomiseen, joita voidaan soveltaa melkein missä tahansa tilanteessa.

Strategia" Mobiili ensin»

Tämä strategia Kehitystä ehdotti jo vuonna 2009 Luke Wroblewski, web-suunnittelua koskevien kirjojen ja artikkeleiden kirjoittaja, johtaja sosiaalinen verkosto Bagcheck, jonka Twitter Inc. osti vain 9 kuukautta sen luomisen jälkeen.

Luke Wroblewskin lähestymistapa kehitykseen on nimeltään "Mobile First" kolmesta syystä:

mobiiliympäristö antaa sinun keskittyä ja päästä eroon sotkusta, joka johtuu suuren tilan "sotkumisesta" näytöllä;

mobiilimarkkinoilla on taipumus kehittyä huimaa vauhtia;

Mobiiliympäristöön liittyy monia mahdollisuuksia (kamera, monikosketuseleet, GPS, kiihtyvyysanturi, geolocation).

Siitä lähtien web-suunnittelu on siirtynyt tasaisesti tätä lähestymistapaa kohti. Monet web-suunnittelijat ja verkkokehittäjät miettivät ensin, kuinka responsiivinen suunnittelu tehdään mobiiliversio sivustoon ja osallistu sitten työpöytäkehitykseen.

"Mobile First" -strategia alkaa luomalla hitaissa Internet-ympäristöissä toimivan mobiiliversion rakenne ja sisältö ja siirtymällä kohti suuria keskeytyskohtia suuremmilla nopeuksilla. nopea yhteys, samalla kun parannetaan ja optimoidaan yksinkertaistettuja versioita.

Moderneja suuntauksia ja lähestymistapoja verkkokehitykseen

Opi nopean kasvun algoritmi alusta alkaen verkkosivustojen rakentamisessa

Tämä takaa innovatiivisen ja tehokasta työtä kaikentyyppisiä laitteita. Verkkosivustojen kehittäjät keskittyvät käyttäjien tarpeisiin, luovat optimoituja ja nopeita sivuja ja kiinnittävät huomiota tärkeään sisältöön. Muuten, jopa Google käyttää "Mobile First" -lähestymistapaa.

Sisältöstrategia "Content out"

Responsiivisen suunnittelun luomisen tavoitteena on tarjota paras käytettävyys missä tahansa kontekstissa. Tämä hieno tilaisuus sisällön analysoimiseksi tee siitä helposti saatavilla ja luettava kaikentyyppisillä laitteilla.

Monet, jotka eivät käytä Mobile First -strategiaa, pitävät parempana Content First -strategiaa. Tämä on tietysti oikein, mutta tätä kutsua ei pidä ottaa kirjaimellisesti ja ajatella, että suunnittelua ei kannata aloittaa ennen kuin kaikki sisältö on valmis.

Sisältöä tulee luoda jatkuvasti ja siitä tulee keskustella sekä responsiivisen sivuston suunnitteluvaiheessa että sen valmistumisen jälkeen! Kuten tunnettu suunnittelija Cennydd Bowles sanoi, "suunnittelun ja sisällön tulee kulkea käsi kädessä." Niiden on täydennettävä toisiaan.

"Sisältörakenne ensin" -strategia on täysin eri asia. Ensinnäkin sinun on tehtävä selväksi sivuston tehtävä, mitä se yrittää kertoa maailmalle. Ja vasta sitten harkitse huolellisesti sen sisällön rakennetta, luomismenetelmiä, kunkin elementin tyyppejä ja tarkoitusta, kun taas käyttäjä tulee asettaa etusijalle.

Sinulla tulee olla strategia, joka varmistaa, että tarjoat jokaiselle käyttäjälle tarvittavan sisällön resurssimatkan jokaisessa vaiheessa. Sivuston rakenteen tulee perustua tutkimukseen, joka koskee sinun käyttäytymistäsi ja tarpeitasi kohdeyleisö.

Jos rakentelet sisältösi hyvin verkkosivustokehityksen alkuvaiheessa, voit helposti siirtää sen jatkossa muille alustoille ja laitteille. Tietenkään ei haittaisi, jos viitteenä olisi esimerkki responsiivisesta suunnittelusta.

Varaa aikaa luonnosten ja prototyyppien tekemiseen

Responsiivisen suunnittelun käyttöoikeuksista päättäminen tulee aloittaa luomisesta järjestetty asettelu- luonnostelu, joka on helppo skaalata tulevaisuudessa.

Laitteiden valikoima ominaisuuksineen, resoluutioineen ja näytön kokoineen tarkoittaa suuri määrä asettelut. Luonnoksen luominen luo pohjan projektin tulevalle prototyypille. Sen avulla voit tuoda esiin erilaisia ​​ideoita keskusteluun, tehdä karkeita luonnoksia, jotka muodostavat sivuston kehyksen perustan.

Kun luonnos on valmis, voit siirtyä luomaan toimivan luonnosversion verkkosivustosta tai HTML-mallista. Tätä prosessia kutsutaan prototyyppien tekemiseksi, ja se sisältää vain vähän visuaalinen suunnittelu vuorovaikutuksen ja toimivuuden parantamiseksi.

Tämä strategia auttaa sinua harkitsemaan uudelleen koko lähestymistapaasi reagoivan suunnittelun luomiseen. Sen sijaan, että kehität "mobiilisivustoja" ja "verkkosivustoja", keskity nyt kehittämään joustavia järjestelmiä, joissa on joukko sääntöjä, jotka määrittävät, miten sisältöä toimitetaan ja toimitetaan kontekstin perusteella.

Toivon, että tämä artikkeli oli hyödyllinen sekä kokeneille että aloitteleville web-suunnittelijoille.

Ja lopuksi perinteiset erosanat: tee sivustosta hyödyllinen, kätevä ja tuttu riippumatta siitä, millä laitteella sitä tarkastellaan. Nähdään taas, ystävät!

P.S.: Oletko jo tilannut blogipäivityksemme?

Nykyaikaiset trendit ja lähestymistavat verkkokehitykseen

Opi nopean kasvun algoritmi alusta alkaen verkkosivustojen rakentamisessa

Kaikki puhuvat responsiivinen web-suunnittelu. Mutta tarkoittaako tämä sitä, että kaikki ymmärtävät, mitä varten se on?

Responsiivinen suunnittelu ei tarkoita vain mobiililaitteiden verkkosivustojen kehittämistä täällä me puhumme asettelujen mukauttamisesta eri kokoja näyttö (näkymät).

Tässä opetusohjelmassa tarkastellaan responsiivisen web-suunnittelun perusperiaatteita ymmärtääksemme tätä tekniikkaa paremmin. Seuraavaksi luomme responsiivisen verkkosivuston, joka skaalautuu täydellisesti suurille ja pienille näytöille. Responsiivisesta web-suunnittelusta on tullut yhä suositumpaa enemmän ihmisiä käyttää mobiililaitteita, kuten iPhonea, iPadia, BlackBerryä, sekä muita älypuhelimia ja tabletteja, joissa on Internet-yhteys.

On tärkeää ymmärtää, että sivustoa ei tule luoda tietylle työpöydälle tai mobiililaitteelle. Tärkeää tässä on asettelun kyky mukautua eri kokoihin.

Käyttäjien turhautuminen

Jotkut ihmiset ajattelevat, että on normaalia, että käyttäjä vähentää toimintoja ja poistaa sisältöä, jota he pitävät merkityksettömänä. Mutta kuinka voit olla varma, että leikkaamasi tai toissijaiselle sivulle siirtämäsi tiedot eivät ole minulle tärkeintä sisältöä?!

Ensinnäkin sinun on ymmärrettävä se responsiivinen muotoilu, kyse ei ole vain välittämisestä mobiili suunnittelu. Toiseksi hyvän responsiivisen verkkosivuston kehittäminen vaatii paljon aikaa ja vaivaa, ei vain mediakyselyjen apua. Koska verkkolaitteita on valtava ja kasvava määrä, on erittäin tärkeää antaa verkkosivustollesi mahdollisuus helpottaa käyttäjäkokemusta tehokkaasti.

Responsiivisessa verkkosivustossa voimme käyttää samaa koodia molemmille pöytätietokone, ja mobiililaitteelle. Tämä on kätevää, koska meidän ei tarvitse säätää sisältöä erikseen jokaiselle laitteelle. Mutta monet verkkosivustot piilottavat sisältönsä ja pitävät sitä tarpeettomana. mobiilikäyttäjille. Tässä on kaksi ongelmaa:

• Ensinnäkin se rankaisee tehokkaasti sivustoa selailevia mobiilikäyttäjiä.
• Toiseksi, piilotetut tyylit CSS:ssä eivät tarkoita, että sisältö ei lataudu. Tällä voi olla valtava vaikutus tehokkuuteen, erityisesti niille, joilla on huono yhteys.

Siksi paras lähestymistapa verkkosivujen kehittämiseen, on harkita mobiili- tai mobiilisuunnittelua pienet laitteet, Ensinnäkin. Näin voit keskittyä eniten tärkeää tietoa, joka verkkosivustosi pitäisi tuottaa. Ja sitten tarvittaessa voit käyttää ehdollisia latausmenetelmiä, joissa asetteluruudukot, suuret kuvat ja mediakyselyt kerrostetaan olemassa olevan pienen näytön rakenteen päälle.

Vaiheittainen opas

Tätä opetusohjelmaa varten loimme verkkosivuston, joka skaalautuu täydellisesti suurten ja pienten näyttöjen välillä. Tallennat kaiken sisällön kaikkiin näyttökokoihin. Mediakyselyiden avulla navigointi vaihdetaan vaakasuuntaisesta pystysuora näyttö, pienille laitteille.

Keskeinen joustavuuden elementti reagoivassa suunnittelussa on tasainen asettelun leveys. Sinun tarvitsee vain luoda kääre-, sisältö- ja sarakeleveydet, jotka mukautuvat eri laiteleveyksiin. Tämä ei ole mitään uutta, mutta se on nyt tärkeämpää kuin koskaan. Asian yksinkertaistamiseksi luomme sujuvan sivun, joka koostuu navigoinnista, pääkuvasta ja kahdesta sarakkeesta, joka ottaa huomioon sijainnin laitteissa erilaisia ​​kokoja. Olemme myös lisänneet vastaus.min.js:n, jonka avulla mediakyselyt toimivat IE6-8:ssa.

Main HTML-rakenne:

Responsiivisen sivuston demo

• Vieritä sisältöön

Logo

• Koti
• Ostaa
• Palvelu
• Yhteystiedot

Tarina

Mercedes SL -mallin historia ulottuu vuoteen 1954 - silloin saksalaiset esittelivät kaksiovisen Mercedes 190 SL:n New Yorkin autonäyttelyssä. Voitte kuvitella, minkä tason esteettinen shokki oli silloinen autonäyttelyn kävijöiden keskuudessa. Kiehtovan kauneuden rungon alla oli lyhennetty alusta Mercedes W120 Ponton sedanista ja teräksinen monokokki. Jousitus oli täysin itsenäinen - kaksinkertainen tukivarsi edessä ja kääntöakselin akselit takana. Pituus - 4290 mm, akselien välinen etäisyys - 2400 mm.

Mitä tulee CSS:ään, enimmäisleveyden asettaminen on hyvä idea, sillä se estää sivustoa skaalautumasta valtavia näyttöjä, mutta se ei estä sinua leikkaamasta sivuja. Yksi tärkeimmistä ongelmista vaihdettaessa kiinteästä leveydestä nestemäiseen on kuvat. CSS:ssä tähän ongelmaan on yksinkertainen ratkaisu. Aseta kuvan leveydeksi 100 %. Lisätään myös kuvien korkeuteen automaattinen, jotta vältetään litistyneet kuvat Operassa ja Safarissa pienillä näytöillä:

/* Layout */ #wrapper ( leveys: 96 %; suurin leveys: 920 pikseliä; marginaali: automaattinen; täyte: 2 %; ) #main (leveys: 60 %; marginaali-oikea: 5 %; float: vasen; ) sivuun ( leveys: 35 %; float: oikea; ) /* Logo H1 */ header h1 ( korkeus: 98px; leveys: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no- toista tekstin sisennys: -9999 pikseliä text-decoration: ei mitään : 100 %; ) #banner img ( leveys: 100 %; korkeus: auto; )

Kuvasi näytetään siinä pääelementti täysleveä ja kutistuu sen mukana. Varmista vain, että kuvien enimmäisleveys ei ylitä säilön enimmäisleveyttä.

Suurten kuvien käyttö voi vaikuttaa latausaikaan. Siksi varten pienet näytöt, kuville on responsiivinen menetelmä, joka tunnistaa käyttäjän näytön koon ja tuottaa pienemmän/suuremman kuvan tarpeen mukaan. Tätä menetelmää on edelleen vaikea kutsua ihanteelliseksi, mutta sitä kannattaa silti harkita.

Vaihda päänavigointia

Pääsyy siihen, miksi sinun on vaihdettava navigointiasi, johtuu tapahtuvasta minimoitumisesta, mikä voi tehdä painikkeista lukukelvottomia ja vaikeasti napsauttavia. Tämän menetelmän käyttäminen helpottaa käyttäjän elämää. Huomaat myös koodissa, että olemme tehneet muutoksia #main- ja aside-osioon yhdistääksemme ne yhdeksi sarakkeeksi.

/* Mediakyselyt */ @medianäyttö ja (max-leveys: 480px) ( #skipTo ( näyttö: block; ) header nav, #main, sivussa ( kellua: vasen; tyhjennys: vasen; marginaali: 0 0 10px; leveys : 100%

Huomaat sen joillain mobiililaitteet, verkkosivustosi kutistuu automaattisesti sopivaksi tästä näytöstä. Tästä kohdasta tulee ongelma, kun meidän on suurennettava näytön kokoa, jotta voimme selata epämukavaa sisältöä.

Mediakyselyiden pääsyn salliminen täysi vaikutus, tyypillisen mobiilioptimoidun ja reagoivan sivuston tulisi sisältää jotain seuraavanlaista:

Leveysominaisuus on vastuussa näkymän koosta. Se voidaan asettaa tietylle määrälle pikseleitä, leveys = 960, tai laitteen leveysarvoksi, joka on näytön leveys pikseleinä 100 %:n mittakaavassa. Alkuperäinen mittakaava -ominaisuus ohjaa mittakaavaa, kun sivu ladataan ensimmäisen kerran. maksimimittakaava, minimimittakaava ja käyttäjän skaalattavat ominaisuudet ohjaavat sitä, kuinka käyttäjät voivat skaalata sivua (suurempi/pienempi).