WebAppien rakentaminen Visual Studio -koodin (6/11) käynnistyshihnan ja reagoivan mobiilisuunnittelun avulla

Haluan suunnitella blogini ja verkkosivustoni Wordpress-palvelussa jatkuvasti kasvavien matkapuhelinkäyttäjien ja tablettien käyttäjien tarpeisiin.

Kuulen myös reagoivasta suunnittelusta. Haluan tietää, lataako reagoiva verkkosuunnittelu saman määrän tietoja tietokoneen näytölle ja mobiililaitteelle?

Olen myös nähnyt, että monet suuret markkinointiyritykset eivät ole investoineet reagoivaan web-suunnitteluun ja etsivät edelleen erillistä verkkosivustoa, joka on optimoitu mobiililaitteille. Joten mitä minun pitäisi valita, reagoiva web-suunnittelu tai erillinen verkkosivusto, joka on optimoitu mobiililaitteille?

Kuten Ethan Marcotte on määritellyt julkaisussa ALA 306, termi "reagoiva muotoilu" viittaa tekniikkaan, jossa HTML-koodiin käytetään erilaisia ​​tyylisääntöjä käyttäjän näytön koosta riippuen. Lisää selitystä reagoivasta suunnittelusta on tässä mukava Mike Bollingerin kannella.

Tässä mallissa lähetät täsmälleen saman HTML-koodin asiakkaalle onko näyttö pieni tai suuri. Jos CSS: ssä viitattuja resursseja (ensisijaisesti kuvia) ei kuitenkaan näytetä tietyillä näytön tarkkuuksilla, ne saattaa ei voi ladata. Esimerkiksi suurille näytöille, joita voit käyttää high-res.png CSS: ssäsi ja pienille näytöille low-res.png - Web-asiakas voi halutessaan ladata kuvan vain aktiivisessa tyylissä. (Katso @ DBUK: n kommentti ainakin yhdestä tärkeästä asiakkaasta, joka lataa molemmat! Toivottavasti asiakkaat älykkyvät!)

Tämä tekniikka saattaa olla järkevää tapauksessasi tai on järkevämpää luoda erillinen mobiilisivusto.

Eri laitteet voivat viitata erilaisiin käyttöyhteyksiin. Matkapuhelimet ovat aina taskussa - miten käyttäjä käyttäisi sivustoasi päivittäistavarakaupassa? Haluatko lähettää heille koko sivuston? Tai vain muutama ominaisuus? Tai täysin erilaisia ​​ominaisuuksia? Entä jos he ovat sohvalla television kanssa tutkiessaan rennosti iPadiaan?

Mobiililaitteissa on yleensä hitaampia prosessoreita, vähemmän muistia ja hitaampi yhteysnopeus (kaikista näistä "totuuksista" tulee vähemmän totta joka vuosi, BTW) - saatat haluta lähettää erillisen mobiilisivuston tiukasti suorituskyvyn vuoksi.

Uskon, että mitä staattisempi, tekstimuotoisempi ja sisältöohjattu sivusto (eli blogi) on, sitä paremmat mahdollisuudet ovat käyttää olemassa olevaa HTML-koodia ja reagoivaa suunnittelua. Mitä interaktiivisempi, multimedia- ja käyttäjäohjattu sivusto (eli myymälä) on, sitä paremmat mahdollisuudet sinun tulisi räätälöidä erilliset sivustot yksittäisille laitetyypeille.

Älä myöskään unohda, että tänä päivänä on myös kysymys siitä, pitäisikö mobiilikokemuksen olla sivusto tai an sovellus.

  • Luulen, että ärsyttävästi kuvia ladataan edelleen. Esimerkkejä pilvipalvelun testeistä - cloudfour.com/examples/mediaqueries/image-test.
  • @DBUK Kiitos korjauksesta - olin epäröinyt ilmoittaessani "ei lataa" vs. "ei saa ladata" edellisissä muokkauksissa tähän viestiin. Päivitin vastaukseni tarkemmaksi.
  • Se on minulle uusi, joten en ole varma, onko se vain iPhone. Miksi mikään ei ole koskaan yksinkertaista verkon kanssa :(
  • 1 @DBUK Todellakin. Tämän testin mukaan milloin molemmat taustatyylisäännöt ovat mediakyselyjen takana, vain matala resoluutio ladataan, vasta kun korkea resoluutio on oletustyylisääntö ja sen ohittaa sitten mediakysely, molemmat ladataan. Pohjimmiltaan se on monimutkaista!
  • Joten mobiili ensimmäinen lähestymistapa kiertäisi tämän ongelman esim. oletustyyli pienimmälle tarkkuudelle ja mediakyselyjen käyttäminen kaikille suuremmille sekä työpöytä?

Reagoivan suunnittelun ei pitäisi ladata yhtä paljon tietoa jokaiselle laitteelle, koska kaikilla laitteilla ei ole samoja multimediavaatimuksia. Mobiilisivustojen tulisi käyttää lo-res-kuvia ja olla luonteeltaan vähemmän graafisia kuin pöytätietokoneiden / kannettavien tietokoneiden / tablettien sivustot. Ja jos haluat yhdistää mobiilisivustosi ja tavalliset sivustosi, sinun on otettava tämä huomioon, muuten sivustosi ei ole kovin herkkä, vai mitä?

Diodeck peteorpeter -linkit viittaavat Filament Groupin Responsive Images -komentosarjaan, jonka avulla voit palvella oikean kokoista kuvaa sopivalle laitteelle JavaScriptiä käyttämällä, mieluiten lataamatta useampaa kuin yhtä versiota. Asettelukuvaominaisuuksien kohdalla tämä tapahtuisi yleensä mediakyselyjen avulla, joissa määritetään eri tyylit eri näytön tarkkuuksille.

Luulen, että monilla yrityksillä kestää kauan päivittää sivustojaan, helvetti, siellä on vielä joitain taulukoita käyttäviä. Reagoiva ja mobiili ensimmäinen lähestymistapa ovat ehdottomasti tämän hetken tunnussanoja.

Kuten yllä oleva juliste mainitsi, sinun tulisi käyttää lo-res-kuvia matkapuhelimeesi / mataliresoluutioisempiin laitteisiisi. Mediakyselyt auttavat sinua kohdentamaan kaikki matalammat resoluutiot. Kuulin kuitenkin, että mobiilisafari jättää huomiotta näytön: mikään sääntö ja lataa myös kuvien työpöytäversiot. Lisäksi jos siirryt reagoivaan kuvareittiin, se aiheuttaa paljon painetta mobiiliprosessorille - 3 tavua / 1 pikseli ... luulen. Ladattavan ylimääräisen sisällön kiertämiseen on paljon ratkaisuja - jotkut melko hakkerit - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=fi_US#gid=0

Lisätietoja reagoivan verkkosuunnittelun haitoista on osoitteessa http://www.webdesignshock.com/responsive-design-problems/. Älä anna sen, että blogikirjoitus lykkää sinua. A Book Apart kirjoitti upean kirjan aiheesta - http://www.abookapart.com/products/responsive-web-design. On ehdottomasti syytä tarttua e-kirjan versioon.

  • Voitko kertoa tarkemmin 3 kt / 1px-lauseesta? En ymmärrä, kuinka JavaScriptin käyttäminen täysikokoisen kuvan hakemiseen vain, jos näytön resoluutio on suurempi kuin 480 kuvapistettä, vaikuttaisi siihen. Sinun ei myöskään pitäisi koskaan käyttää display: none piilottaa kuvat matkapuhelinkäyttäjiltä. Se on vain huono käytäntö.
  • "Jotkut verkko-operaattorit esimerkiksi pakkaavat kuvia ennen kuin ne siirretään ilman kautta mobiililaitteelle" - w3.org/TR/mobile-bp. Tämä tarkoittaisi, että matkapuhelimen olisi purettava ne (?) 3 tavun hintaan per pikseli (@ 24-bittinen RGB, esim. JPG)? Hups, laitoin kb ylös, hitto. Tämä tapahtuu puhtaasti CSS-näkökulmasta, ja mobiili lataa kaikki kuvat..mobiilin ja työpöydän, eikä siinä oteta huomioon javascript-ratkaisuja.

työskennellyt sinulle: Charles Robertson | Haluatko yhteyttä?