Oletteko kysynyt itseltäsi, "Mikä on reagoiva web-suunnittelu?" Reagoiva web-suunnittelu on lähestymistapa, jossa suunnittelija luo verkkosivun, joka "vastaa" tai muuttaa itseään sen mukaan, millaisesta laitteesta se näkyy. Se voisi olla ylimitoitettu pöytätietokoneen näyttö, kannettava tietokone tai pieniä näyttöjä sisältävät laitteet, kuten älypuhelimet ja tabletit.
Reagoiva Web-suunnittelu on tullut olennaiseksi välineeksi kaikille, joilla on digitaalinen läsnäolo. Älypuhelinten, tablettien ja muiden mobiililaitteiden kasvun myötä useammat ihmiset käyttävät pienempiä näyttöjä verkkosivujen katseluun.
$config[code] not foundNäillä verkkosivuilla on otettava huomioon myös Google-ilmoituksen juuri huhtikuussa 2018 ilmoittama mobiili-ensimmäinen indeksi. Koska pienet yritykset lisäävät mobiililähetystään, heidän verkkosivustonsa, verkkokaupan, Google-yrityssivun, sosiaalisen median sivut ja muut varat on oltava helposti saatavilla laitteet.
Mikä on herkkä Web-suunnittelu?
Vastaanottavan suunnittelun tarkoituksena on olla yksi sivusto, mutta eri elementtejä, jotka reagoivat eri tavoin eri kokoisissa laitteissa.
Otetaan perinteinen kiinteä verkkosivusto. Esimerkiksi pöytätietokoneessa katsottuna sivusto saattaa näyttää kolme saraketta. Mutta kun tarkastelet samaa layoutia pienemmällä tabletilla, se saattaa pakottaa sinut selaamaan vaakasuunnassa, jotkut käyttäjät eivät pidä. Tai elementit saattavat olla piilossa näkymästä tai näyttävät vääristyneiltä. Vaikutusta vaikeuttaa myös se, että monia tabletteja voidaan tarkastella joko pystyasennossa tai kääntyä sivusuunnassa maisemanäkymäksi.
Pienellä älypuhelimen näytöllä sivustot voivat olla vieläkin haastavampia nähdä. Suuret kuvat saattavat “rikkoa” ulkoasun. Sivustot voivat olla hitaita lataamaan älypuhelimia, jos ne ovat graafisia.
Jos sivusto kuitenkin käyttää mukautuvaa suunnittelua, tablet-versio saattaa automaattisesti säätää näyttämään vain kaksi saraketta. Näin sisältö on luettavissa ja helppo navigoida. Älypuhelimessa sisältö saattaa näkyä yhtenä sarakkeena, joka voi olla pinottu pystysuoraan. Tai mahdollisesti käyttäjällä olisi mahdollisuus pyyhkiä yli nähdäksesi muut sarakkeet. Kuvat muuttuvat sijainnin vääristämisen sijasta tai katkeavat.
Tarkoituksena on, että sivusto mukautuu automaattisesti suunnittelun perusteella automaattisesti laitteen mukaan, jonka katsoja näkee.
Miten Responsive Web Design toimii?
Herkät paikat käyttävät nestemäisiä verkkoja.Kaikki sivuelementit on mitoitettu suhteessa pikseleihin. Joten jos sinulla on kolme saraketta, et sanoisi, kuinka leveä kukin pitäisi olla, vaan kuinka laaja niiden pitäisi olla suhteessa muihin sarakkeisiin. Sarakkeessa 1 pitäisi olla puolet sivusta, sarakkeessa 2 pitäisi olla 30% ja sarakkeessa 3 esimerkiksi 20%.
Mediaa, kuten kuvia, muutetaan myös suhteellisesti. Näin kuva voi pysyä sarakkeen tai suhteellisen muotoiluelementin sisällä.
Liittyvät ongelmat
Mouse v. Touch: Mobiililaitteiden suunnittelu tuo esiin myös hiiren ja kosketuksen ongelman. Pöytätietokoneissa käyttäjällä on normaalisti hiiri navigoida ja valita kohteita. Älypuhelimessa tai tabletissa käyttäjä käyttää enimmäkseen sormia ja koskettaa näyttöä. Mitä hiirellä voi olla helppo valita, voi olla vaikea valita sormella pienellä paikalla näytöllä. Web-suunnittelijan on otettava huomioon ”kosketus”.
Grafiikka ja latausnopeus: Lisäksi on kysymys grafiikasta, mainoksista ja latausnopeudesta. Mobiililaitteissa saattaa olla järkevää näyttää vähemmän grafiikkaa kuin työpöydän näkymissä, jotta sivusto ei ota ikuisesti ladata älypuhelimeen. Suurempia mainoskokoja on ehkä vaihdettava pienempiin mainoksiin.
Sovellukset ja mobiiliversiot: Aiemmin olet ehkä ajatellut luoda sovellus verkkosivustollesi - sanoa iPad-sovellus tai Android-sovellus. Tai sinulla olisi mobiiliversio erityisesti BlackBerrylle.
Mutta niin monien eri laitteiden kanssa on yhä vaikeampaa luoda sovelluksia ja eri versioita jokaiselle laitteelle ja käyttöympäristölle.
Miksi pienyritysten on vaihdettava reagoivaan web-suunnitteluun
Useat ihmiset käyttävät mobiililaitteita. Äskettäin Pew-tutkimuksessa 77 prosenttia amerikkalaisista omistaa älypuhelimia vuonna 2018, mikä on vain 35 prosenttia vuonna 2011 tehdyssä Pew Research Centerin ensimmäisessä älypuhelinkyselyssä.
Tarkista liikenne ja saatat olla järkyttynyt siitä, kuinka monta kävijää saa sivustoosi mobiililaitteiden kautta. (Valitse Google Analyticsissa vasemmalla puolella "Yleisö" ja sitten "Mobile" nähdäksesi, mikä osuus liikenteestä on mobiililaitteista. Voit jopa porata alaspäin, mitkä laitteet lähettävät liikennettä.)
Reagoivat suunnittelumallit ovat kaikkialla nyt ostettaviksi. Jos esimerkiksi sinulla on WordPress-sivusto, voit vierailla hyvämaineisessa mallin galleriassa, kuten ThemeForestissa, ja etsiä "reagoivia WordPress-teemoja." Osta yksi alle 50 $. Web-kehittäjäsi voi sitten mukauttaa sen logoa ja tuotemerkkiä varten.
Toimittajan huomautus: täällä Small Business Trendsissä olemme kehittämässä uutta vastaavaa suunnittelua. Eikö sinun pitäisi?
Kuva Shutterstockin kautta
Lisää: Sisältömarkkinointi, mikä on 95 kommenttia ▼
