Disclosure: ”Tämä artikkeli on henkilökohtainen mielipiteeni tutkimus perustuu kokemukseni lähes 20 vuotta. Tällä sivulla ei ole kolmannen osapuolen mainoksia eikä minkäänlaisia rahallisia linkkejä. Ulkoiset linkit kolmansien osapuolten sivustoihin ovat moderoituja. Vastuuvapauslauseke. ”Shaun Anderson, Hobo

ei ole yksi paras näytön koko suunnittelu. Verkkosivustojen tulisi muuntaa responsiivisesti ja nopeasti kaikissa näytön resoluutioissa eri selaimilla ja alustoilla., Saatavilla. Mobiiliystävällinen. Suunnittele ensin yleisöllesi. Suunnittelu 360×640-1920×1080.

  • Design for desktop näyttää 1024×768 läpi 1920×1080
  • Suunnittelu mobiili näytöt 360×640 läpi 414×896
  • Suunnittelu tablet näytöt, 601 x 962 kautta 1280×800
  • Tarkista Google Analytics ja optimoida teidän kohdeyleisölle on yleisin resoluutio kokoja
  • Älä suunnittelu yksi näyttö tai koko näytön resoluutio. Näytön koot ja selainikkunan tila vaihtelevat kävijöiden välillä.
  • suunnittelun tulee olla reagoivaa ja nopeaa., Käytä nestemäistä tai reagoivaa asettelua, joka muuntuu nykyisen käyttäjän ikkunakokoon.
  • Monitor Google Search Console-mobiili-ystävällinen ja käytettävyys hälytykset

Sen pitäisi silti näyttää hyvältä ja toimii hyvin kaikki koot, joka on, miksi en *käytetään* suositella erittäin helposti neste layout käyttäen prosentteina leveydet valvoa layout. Nyt suositus on reagoiva verkkosivuilla malli.,

kolme tärkeimmät kriteerit optimointi sivun layout tietyn näytön koko ovat:

  • Web-Sivun Alkuperäisen näkyvyys: kaikki keskeiset tiedot näkyvissä taitteen yläpuolella, jotta käyttäjät voivat nähdä sen ilman vieritys? Tämä on tradeoff välillä kuinka monta kohdetta näytetään vs. kuinka paljon yksityiskohtia näytetään kunkin kohteen.
  • verkkosivujen luettavuus: kuinka helppoa on lukea tekstiä eri palstoilla, kun otetaan huomioon niiden kohdistettu leveys?
  • Web-Sivun Estetiikka: Miltä sivusi näyttää kun elementtejä ovat oikea koko ja sijainti näytön koko?, Tee kaikki elementit riviin oikein-eli ovat kuvatekstejä heti kuvien vieressä jne.?

Käytettävyys suuntaviivat myös suositeltavaa harkita kaikki kolme kriteeriä täyden valikoiman kokoja,. Tarkista selainikkunasta 360×640-1920×1080 näytön resoluutio.

sivun pitäisi pisteet korkealla kaikki kriteerit koko resoluution välillä.

sivusi pitäisi toimia myös pienemmissä ja suuremmissa kokoissa, vaikka tällaiset ääripäät ovat vähemmän tärkeitä.,

vaikka tällaisten käyttäjien pitäisi varmasti päästä sivustoosi, mikä antaa heille vähemmän kuin suuri muotoilu on joskus hyväksyttävä kompromissi.,

Top Ten yleisimmät Resoluutiot

Vierailija analyysi lähes puoli miljoonaa kävijää ensimmäisen 6 kuukauden 2020 mennessä:

Reagoiva Verkkosivusto Malli On Hyvä Veto

LAINAUS: ”Reagoiva Web Design: Palvelee samaa HTML-koodi on sama URL-osoite, riippumatta käyttäjien laite (esimerkiksi, desktop -, tablet -, mobiili, ei-visuaalinen selain), mutta voi tehdä näytön eri tavalla, joka perustuu näytön koko. Google suosittelee, Reagoiva Web Design, koska se on helpoin suunnittelu kuvio toteuttaa ja ylläpitää.,”Google Kehittäjä Oppaita, 2020,

nykymaailmassa, monet ihmiset ovat käyttäen handheld laitteet (tabletit ja älypuhelimet), jos haluat selata web ja reagoiva website design (RWD) on tullut hyvin todennäköisesti ratkaisu (se on vielä keskustellaan by harrastajille) näytön koon haasteita.

Tämä menetelmä siirtyy pois käyttämällä kiinteä-leveys sivustoja ja sen sijaan käyttää Media-Queries CSS-tyylisivut luoda sivuston, joka vastaa kooltaan eri näkymien ansiosta kannettavien laitteiden ja pienempiä näyttöjä, joita ihmiset käyttävät.,

Joten mitä laitetta henkilö voi käyttää katsella verkkosivuilla voit antaa heille täysillä kokemus mahdollista.

Sisällysluettelo

Google Suosii Mobiili-Friendly Sivustot

Google sanelee ebb ja virtauksen verkkokaupan ja he ovat vain saneli sinun täytyy suunnittelu tarjoaa käyttäjän kokemus useisiin laitteisiin, JOS haluat odottaa listalla korkealla kilpailukykyinen avainsanoja Google.

LAINAUS: ”Google käyttää kahta eri indeksoijat indeksoinnin sivustot: mobiili tela-ja desktop tela., Jokainen telaketjutyyppi simuloi sivulla vierailevaa käyttäjää kyseisen tyyppisellä laitteella. Google käyttää yhtä telaketjutyyppiä (mobile tai desktop) ensisijaisena telaketjuna sivustollesi. Kaikki sivut sivustossasi, jotka ryömivät Google ryömivät käyttäen ensisijainen tela. Ensisijainen crawler kaikille uusille verkkosivustoille on mobile crawler. Lisäksi, Google recrawls muutaman sivun sivustossasi toisen tela tyyppi (mobiili tai työpöytä). Tätä kutsutaan sekundaariseksi ryömimiseksi, ja se tehdään sen selvittämiseksi, kuinka hyvin sivustosi toimii toisen laitetyypin kanssa.,”Google Webmaster Guidelines, 2020,

Vuodesta 21 huhtikuu 2015, maailmanlaajuisesti, miten mobiili-ystävällinen sivusto on vaikuttanut ranking suorituskykyä sivustot poikki useita laitteita.

Jos et tee verkkosivustoja pienyrityksille – tiedät he haluavat web-sivuston että toimivat hyvin Googlen orgaanisten ilmoitukset – tiedät, että he ovat kiinnostuneita hakukoneoptimointi:

LAINAUS: ”minulla on 20 vuoden kokemus harjoitellaan ammatillinen SEO. Tämä SEO opetusohjelma on minun kokoelma vinkkejä ja SEO parhaita käytäntöjä käytän sijoitus sivustoja Google.,”Shaun Anderson, Hobo 2020 mennessä

SEO on nyt perustuu osittain hyvä sivusto UX, kuten Google määrittelee sen, ainakin liikkuville käyttäjille.

LAINAUS: ”mobiili-haut nyt ylittää desktop-hakuja, on tärkeää, että sivuston mobiili-ystävällinen. Googlebot käyttää nyt mobiilia telaketjua verkkosivujen oletusarvona.”Google Webmaster Guidelines, 2020,

Tällä hetkellä – se olennaisesti merkitsee nyt sitä, reagoiva website design ja mobile-ystävällinen, erityisesti Google ”tekee meidän indeksi mobile-first”.,

Työpöydän Näytön Resoluutio Tilastot Maailmanlaajuisesti. Toukokuuta 2019 – Toukokuu 2020 mennessä

viite, tässä on luettelo nykyistä alkuun resoluutiot maailmanlaajuisesti kirjataan äskettäin (2020):

yleisin Työpöydän Näytön Resoluutio Kokoja Maailmanlaajuisesti

  • 1366×768 – 23.49%
  • 1920×1080 – 19.91%
  • 1536×864 – 8.65%
  • 1440×900 – 7.38%
  • 1280×720 – 4.89%
  • 1600×900 – 4.01%
  • 1280×800 – 3.,33%

Mobiili Näytön Resoluutio Tilastot Maailmanlaajuisesti. Toukokuuta 2019 – Toukokuu 2020 mennessä

yleisin Mobiili Näytön Resoluutio Kokoja Maailmanlaajuisesti

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

Tabletti Näytön Resoluutio Tilastot Maailmanlaajuisesti. Toukokuuta 2019 – Toukokuu 2020 mennessä

yleisin Tabletti Näytön Resoluutio Kokoja Maailmanlaajuisesti

  • 768×1024 – 51.98%
  • 1280×800 – 7.11%
  • 800×1280 – 5.,34%
  • 601×962 – 4.47%
  • 600×1024 – 2.85%
  • 1024×1366 – 1.96%

Työpöydän Näytön Resoluutio Tilastot yhdysvalloissa Voi 2019 – Toukokuu 2020 mennessä

Top Resoluutiot yhdysvalloissa (2020)

yleisin Työpöydän Näytön Resoluutio Koko suomeen

  • 1920×1080 – 19.15%
  • 1366×768 – 14.91%
  • 1440×900 – 9.59%
  • 1536×864 – 7.7%
  • 1280×720 – 4.89%
  • 1600×900 – 4.28%
  • 1280×800 – 3.,92%

Mobiili Näytön Resoluutio Tilastot yhdysvalloissa Voi 2019 – Toukokuu 2020 mennessä

yleisin Mobiili Näytön Resoluutio Koko suomeen

  • 414×816 – 17.89%
  • 375×667 – 14.2%
  • 375×812 – 11.97%
  • 360×640 – 8.55%
  • 414×736 – 8.54%
  • 412×846 – 4.7%
  • 360×740 – 4.39%

Tabletti Näytön Resoluutio Tilastot yhdysvalloissa Voi 2019 – Toukokuu 2020 mennessä

yleisin Tabletti Näytön Resoluutio Koko suomeen

  • 768×1024 – 54.,68%
  • 800×1280 – 5.75%
  • 1280×800 – 5.73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

Työpöydän Näytön Resoluutio Tilastot BRITANNIASSA Voi 2019 – Toukokuu 2020 mennessä

Top Resoluutiot BRITANNIASSA (2020)

yleisin Työpöydän Näytön Resoluutio Koko Yhdistyneessä Kuningaskunnassa

  • 1920×1080 – 20.62%
  • 1366×768 – 17.32%
  • 1440×900 – 11.65%
  • 1536×864 – 8.38%
  • 1280×720 – 5.2%
  • 1280×800 – 4.,73%

Mobiili Näytön Resoluutio Tilastot BRITANNIASSA Voi 2019 – Toukokuu 2020 mennessä

yleisin Mobiili Näytön Resoluutio Koko Yhdistyneessä Kuningaskunnassa

  • 375×667 – 16.66%
  • 414×816 – 14.11%
  • 360×640 – 9.95%
  • 375×812 – 8.55%
  • 360×740 – 5.67%
  • 360×780 – 5.39%
  • 414×736 – 4.75%

Tabletti Näytön Resoluutio Tilastot BRITANNIASSA Voi 2019 – Toukokuu 2020 mennessä

yleisin Tabletti Näytön Resoluutio Kokoja Iso-Britannia

  • 768×1024 – 58.,31%
  • 1280×800 – 6.92%
  • 800×1280 – 6.02%
  • 601×962 – 3.68%
  • 600×1024 – 3.26%
  • 1024×1366 – 1.71%

Desktop vs Mobile vs Tablet Markkinaosuus Maailmanlaajuisesti

Desktop vs Mobile vs Tablet Markkinaosuus Maailmanlaajuisesti

  1. Mobiili – 50.48%
  2. Desktop – 46.51%
  3. Tablet – 3.0%

*Huomaa – tilastot edellä ovat yksi (vaikkakin uskottava) lähde, niin voisi olla vinossa tavoilla, joita emme välttämättä tiedä. Kuvaajat: http://statcounter.com/.,

Miten Voin Suunnitella Sivusto, Joka Näyttää Samalta Jokaisessa Selaimessa & Resoluutio?

Et voi.

– Se on mahdotonta suunnitella sivusto näyttää samalta jokaisessa selaimessa, foorumi, ja näytön resoluutio, joten vältä yrittää.

Voit valita nestettä layout ilman taulukoita suunnittelua, jossa % leveydet, joka laajentaa ja sopimuksen sopii kävijöiden selaimen asetuksen TAI voisit harkita etsivät osaksi reagoiva suunnittelu ratkaisuja, jotka tulee saavuttaa paljon sama asia.,

Google suosii reagoiva malleja, mikä on hyvä uutinen niille, jotka ovat ottaneet sen:

LAINAUS: ”- sivustoja, jotka hyödyntävät reagoiva web design ja oikein toteuttaa dynaaminen annos (jotka sisältävät kaikki työpöydän sisällön ja markup) yleensä ei tarvitse tehdä mitään.”Google NOV 2017.

MOBILE ON NOUSUSSA – jos siis kehittää uusi sivusto – sinun TÄYTYY miettiä, miten mobiili-friendly verkkosivuilla todella on alusta alkaen.

pyrin pitämään asiat yksinkertaisina, kun oikeasti koodaan asioita.,

ei – voi – olla kaikille mieliksi – ja kysymys, johon verkkosivuilla koko on paras on vielä kuuma aihe keskustella suunnittelijoiden kanssa enemmän käytettävyys-ja UX-osaamista kuin minä.

– tiedän kokemuksesta, on se, että se on ratkaisevan tärkeää, että voit tunnistaa kohderyhmäsi ja laitteita he käyttävät, ja rakentaa oman verkkosivuilla (koko) puku, ETTÄ yleisö.

ja siihen yleisöön kuuluu GOOGLEBOT.

ohjaako mobiilisivusto toiseen URL-osoitteeseen & versio sivustostasi?

no, se ei ole ihanteellista. Itse asiassa se ei ole koskaan ollut.,

takaisin päivä – jotkut folk käyttää VAIN TEKSTI-versioita verkkosivuilla tuottaa sisältöä käyttäjille/selaimet, jotka eivät tue elementtejä niiden sivustot – (yleensä turhaan) yrittää tehdä niiden sisältöä enemmän saatavilla.

W3C käytetään jopa suositella sitä luulen, että jos kaikki muu epäonnistui:

vain teksti-sivu, jossa on vastaavat tiedot tai toimintoja, on annettava tehdä web-sivuston, noudata tämän osan säännösten, kun vaatimuksia ei voida toteuttaa millään muulla tavalla., Ainoastaan tekstisivujen sisältö päivitetään aina, kun Pääsivu muuttuu. SECTION 508

Se on AINA ollut ihanteellinen toimittaa yksi URL-osoite kävijä esteetöntä käyttöä varten, ja siellä on mitään eroa, kun toimittaa matkapuhelin tai älypuhelin sisältöä, jos olet ajatellut luoda ”mobiili” versio sivuston. Tämä voi tietysti olla vielä tärkeämpää, jos Google siirtyy mobiiliin FIRST-indeksiin.,

Google voi hyvin arvostella ENSISIJAISESTI matkapuhelimeen kokemus lähitulevaisuudessa – joten me kaikki täytyy todella olla tietoinen suuria muutoksia, että emme voi nähdä hyvin pian Google SERPs.

Kun Google on ’vierailija’ yleensä se on jopa tärkeämpää toimittaa vain yksi URL-osoite, koska kanoninen URL haasteita hakukoneita varten – ja tämä on tapahtunut ennen täytäntöönpanoa canonical link-elementti, joka jokin aika sitten.

joten ihanteellinen tilanne on toimittaa yksi URL kaikkina aikoina.,

Jos sinulla on ”älypuhelin” – sisältöä (jonka näemme kuin normaali web-sisältöä, koska se on yleensä normaali HTML-sivu, vain viritetty layout for pienempiä näyttöjä) voit käyttää rel=canonical kohta työpöydälle versio. Tämä auttaa meitä keskittymään työpöytäversioon web-haussa. Kun käyttäjät käyvät kyseisessä pöytäkoneversiossa älypuhelimella, voit ohjata ne mobiiliversioon. Tämä toimii riippumatta URL-rakenne, joten sinun ei tarvitse käyttää alikansioita / alikansioita älypuhelin-mobiili sivustoja., Vielä parempi kuitenkin on käyttää samaa Url-osoitteita ja näyttää sopiva versio sisältöä ilman uudelleenohjaus John Mueller, Google

Välittämättä Googlen Suosituksia Ei Usein Ole viisasta

LAINAUS: kertaus, tällä hetkellä meidän indeksoinnin, indeksointi, ja ranking-järjestelmät tyypillisesti katso työpöydän versio sivun sisältö, joka voi aiheuttaa ongelmia, mobiili etsijät, kun kyseinen versio on hyvin erilainen kuin mobiili versio., Mobile-first indexing tarkoittaa, että käytämme sisällön mobiiliversiota indeksointiin ja sijoitukseen, jotta voimme paremmin auttaa – ensisijaisesti mobiilikäyttäjiämme löytämään etsimänsä. Ylläpitäjät näkevät huomattavasti indeksoinnin Älypuhelin Googlebot, ja katkelmia tulokset, sekä sisältöä Google välimuisti sivuja, on mobiili versio-sivuja., Google Nov 2017.

Google tarjoaa seuraavia vinkkejä tarkista, että sivustosi on valmis mobiili ensin-indeksi, mutta pohjimmiltaan, jos käytät reagoiva web design malli sivuston sinun pitäisi olla minimaalinen ongelmia tämä muutos:

  • varmista, että mobiili versio sivustosta on myös tärkeää, laadukasta sisältöä. Tämä sisältää tekstiä, kuvia (alt-attribuuteilla) ja videoita – tavallisissa indeksoitavissa ja indeksoitavissa muodoissa.,

  • Jäsenneltyä tietoa on tärkeää, että indeksointi ja haku ominaisuuksia, että käyttäjät rakastavat: sen pitäisi olla sekä mobiili ja työpöydän versio sivustosta. Varmista, että strukturoitujen tietojen URL-osoitteet päivitetään mobiiliversioon mobiilisivuilla.

  • Metadata tulisi olla läsnä molemmat versiot sivuston. Se antaa vinkkejä sisällöstä sivulla indeksointiin ja tarjoiluun., Varmista esimerkiksi, että otsikot ja metakuvaukset ovat samanarvoisia kaikissa sivuston sivuilla olevissa versioissa.

  • – Ei muutoksia tarvitaan lähiverkko, jossa on erillinen mobiili-Url-osoitteet (m.-dot-sivustot). Erillisiä Mobiiliurleja käyttävien sivustojen on säilytettävä olemassa oleva linkki rel=canonical ja link rel=vaihtoehtoiset elementit näiden versioiden välillä.

  • Tarkista hreflang linkkejä eri mobiili-Url-osoitteet., Kun käytät link rel=hreflang elementtejä kansainvälistymiseen, linkki mobiili-ja työpöydän URL erikseen. Mobiililaitteiden URL-osoitteet ’ hreflang pitäisi viitata muihin kieli – / alueversioihin muissa mobiililaitteissa URL-osoitteissa, ja vastaavasti linkittää työpöydän muihin työpöydän URL-osoitteisiin käyttäen hreflang link-elementtejä siellä.

  • Varmistetaan, että palvelimet hosting sivusto on tarpeeksi kapasiteettia käsittelemään mahdollisesti lisääntynyt indeksointinopeus., Tämä ei vaikuta sivustoja, jotka käyttävät reagoiva web design ja dynaaminen tarjoilua, vain sivustot, joissa mobiili-versio on erillinen isäntä, kuten m.example.com.

Käyttäjät Odottavat Selaa Alas Sivulla

Koska ensimmäinen kriteeri edellyttää, vieritys on aina avainasemassa. Käyttäjät yleensä en selaa, jos he eivät tarvitse – vaikka vuosien varrella se on muuttunut.

Joten, kun suunnittelet, sinun pitäisi harkita, kuinka paljon käyttäjät voivat nähdä, jos he selaa vain näytön koko tai kaksi., Yli viisi näyttöä pitkä voisi olla osoitus siitä, että siellä voi olla liikaa kopio sivulla. Tietenkin, tämä on tasapainoinen mieltä siitä, että jotkut artikkelit ovat tarkoitettu syvällistä tietoa paloiksi ja käyttäjät odottavat odottaa hieman kauemmin tarkastella joitakin sivun sisältöä ja sisällön tyypit.

sekä vieritys että alkuperäinen näkyvyys riippuvat ilmeisesti näytön koosta: isommat näytöt näyttävät enemmän sisältöä taitoksen yläpuolella ja vaativat vähemmän vieritystä.

johtaako muutos reagoivaan mobiilisivustoon paljon enemmän liikennettä Googlelta?

ei välttämättä, mutta ehkä.,

Niin monia asioita, voit tehdä Google-optimointi – ottaa mobiili-friendly verkkosivuilla, on enemmän tai vähemmän varmista voit PITÄÄ liikennettä olet jo saada, ei välttämättä anna sinulle mitään enemmän vapaata liikennettä Google.

Jos et jo saada paljon liikennettä mobiili kävijöitä – en ole varma, jos tämä päivitys Google on huomattava vaikutus liikennemääriin (analytics ainakin) aluksi, mutta ajan myötä se varmasti tulee olemaan erittäin tärkeä haaste navigoida.,

laatu-baari on esiin – taas – by Google, ja sen käyttäjien – ja jos haluat kilpailla yhä kilpailukykyisempi orgaaninen SERPs tämä on vielä toinen este pienille yrityksille päästä yli.

PITKÄLLÄ aikavälillä – tämä mobiili muuntaminen voi olla vain hyvä asia käyttäjille – mutta lyhyellä aikavälillä – on mielenkiintoista nähdä, mikä vaikutus sillä on pk-yrityksiä muuntokurssit – kuten muuntokurssit kautta mobiili ovat usein vähemmän kuin työpöydällä.,

Google on sanonut, että tämä mobiili-ystävällinen algoritmi on suurempi vaikutus kuin SERPs sekä Google Penguin ja Google Panda – algoritmit ja saamme selville enemmän kuin aikaa kuluu.

Miten Tarkistaa Tärkeitä Mobile käytettävyysongelmia Sivuston

Google Search Console –

Sinun pitäisi pystyä seurata mobiili virheitä Google Search Console (AKA Google Webmaster Tools) ja nähdä virheet häviävät ajan myötä, jos sivusto on määritetty oikein.,”>

Osa 1 – PageSpeed Insights -, Mobiili-Ystävällinen Testi-ja Mobiili-Käytettävyys

Osa 2 – Näkymäikkunoissa, zoom ja plugins

Osa 3 – Tap tavoitteet, marginaalit ja fonttikoko

Osa 4 – Ohjaa

Web-kehittäjät pitäisi etsiä minun muut viimeaikaiset post hyödyllistä nyt, että sivuston nopeus on ranking factor Google:

LAINAUS: ”mobiiliversiota verkkosivuilla olisi mieluiten kuorman alle 3 sekuntia ja nopeammin paremmin., Erittäin hidas sivusto voi olla negatiivinen Ranking tekijä (vahvistettu Google). Ei ole asetettu kynnys tai nopeus pisteet tavata, vain tehdä sivu mahdollisimman nopeasti.”Shaun Anderson, Hobo 2020 mennessä

Disclaimer

Disclaimer: ”Vaikka olen tehnyt kaikkensa varmistaakseen, että tiedot olen antanut on oikea, Se ei ole neuvoja.; En voi ottaa vastuuta mistään virheistä tai laiminlyönneistä. Kirjoittaja ei takaa kolmannen osapuolen sivustoja tai kolmannen osapuolen palvelua. Vieraile kolmansien osapuolten sivustoilla omalla vastuullasi., En ole suoraan kumppanina Googlen tai minkään muun kolmannen osapuolen kanssa. Tämä sivusto käyttää evästeitä vain analytiikkaan ja verkkosivuston perustoimintoihin. Tämä artikla ei ole oikeudellista neuvontaa. Kirjoittaja ei hyväksy mitään vastuuta, joka voi syntyä muodossa päästä tietoja esitetään tällä sivustolla. Linkit sisäisiin sivuihin edistävät omaa sisältöäni ja palvelujani.”Shaun Anderson, Kulkuri