Atsaucīga tīmekļa dizaina paraugprakse

Autors: Bredlijs Nica, ClickHelp.com satura menedžeris - programmatūras dokumentācijas rīks

Google oficiāli ir ieteicis adaptīvo tīmekļa dizainu kā galveno vēlamo metodi mobilo vietņu veidošanai. Ja jums ir vietne vai emuārs, ir pienācis laiks apsvērt iespēju pāriet uz adaptīvu dizainu, nevis uzturēt atsevišķas mobilajām ierīcēm un planšetdatoriem draudzīgas vietnes.

Ja esat jauns reaģējošā tīmekļa dizaina (RWD) jēdziens, šeit ir bieži uzdotie jautājumi, kas jums varētu rasties saistībā ar šo paņēmienu.

Kāpēc man vajadzētu pārslēgt savu vietni uz RWD?

Jūsu vietne lieliski izskatās darbvirsmas ekrānā, taču tā var neatbilst patiesībai, ja jūsu vietne tiek apskatīta viedtālrunī vai planšetdatorā. Kad dizains būs adaptēts, vietne izskatīsies labi (un lasāma) visos ekrānos.

Izmantojot adaptīvo dizainu, jūs varat izveidot vienu dizainu, un tas automātiski pielāgojas, ņemot vērā mobilās ierīces ekrāna izmēru. Šī pieeja piedāvā daudz priekšrocību:

  • Tas ietaupa laiku un naudu, jo jums nav jāuztur atsevišķas galddatoru un mobilo tālruņu vietnes.
  • Atsaucīgs dizains ir labs jūsu vietnes SEO (meklēšanas klasifikācija), jo katrai jūsu vietnes lapai būs viens URL un tādējādi tiek saglabāta Google sula. Jums nav jāuztraucas par situācijām, kad dažas vietnes izveido saiti uz jūsu mobilo vietni, bet citas - uz jūsu darbvirsmas vietni.
  • Jūsu Google Analytics pārskati sniegs labāku priekšstatu par jūsu vietnes izmantošanu, jo mobilo un galddatoru lietotāju dati tiks konsolidēti.
  • Tas pats attieksies uz koplietošanas statistiku (Facebook patīk, Tweets, atzīmes +1), jo jūsu tīmekļa lapu mobilajām un darbvirsmas versijām būs vienāds URL.
  • Adaptīvos dizainus ir vieglāk uzturēt, jo tie neietver servera puses komponentus. Jums vienkārši jāpārveido lapas CSS, lai mainītu tās izskatu (vai izkārtojumu) noteiktā ierīcē.

Kas jāzina, lai sāktu darbu ar adaptīvo dizainu?

Responsive Design ir tīrs HTML un CSS. CSS jūs izveidojat kārtulas, kas maina stilu, pamatojoties uz lietotāja ierīces ekrāna lielumu.

Piemēram, varat uzrakstīt noteikumu, kas saka, ja lietotāja ekrāna izmērs ir mazāks par 320 pikseļiem, nerādīt sānjoslu vai ja ekrāna izmērs ir lielāks par 1920 pikseļiem (platekrāna darbvirsma), palieliniet pamatteksta lielumu teksts uz 15 pikseļiem.

Kā pārbaudīt, vai konkrētā vietnē tiek izmantots adaptīvais dizains?

Tas ir viegli. Atveriet šo vietni jebkurā darbvirsmas pārlūkā un mainiet pārlūka izmērus. Ja vietnes izkārtojums mainās, mainot izmērus, dizains ir reaģējošs.

Ja es izvēlos adaptīvā dizaina pieeju, vai mana vietne darbosies ar vecākiem pārlūkiem?

Galvenokārt jā. RWD izmanto CSS3 multivides vaicājumus un HTML5 (labākai semantikai), kas netiek atbalstīti vecākās IE versijās. Tomēr ir arī uz JavaScript balstīti risinājumi - respon.js un, piemēram, modernizējami -, kas CSS3 un HTML5 jaudu nodrošina vecākām pārlūkprogrammām, ieskaitot IE6.

Vai Responsive Design labi spēlē ar tādiem reklāmas tīkliem kā Google AdSense?

Ja savā vietnē izmantojat reklāmas, jums rūpīgi jāizvēlas formāti, jo plašas vienības (piemēram, 728 × 60 pikseļu lielākais reklāmkarogs), iespējams, neietilpst 320 pikseļu mobilajā ekrānā. Es labāk izmantoju standarta taisnstūrveida vienības (piemēram, 300 × 250), jo tās viegli iederas viedtālruņu ekrānos un platekrāna galddatoros.

Ir tūkstošiem mobilo ierīču. Kādas ekrāna izšķirtspējas vajadzētu atbalstīt manai adaptīvajai vietnei?

Es ieteiktu iestatīt pārtraukuma punktus vismaz šādiem skata portiem jūsu CSS3 Mediaqueries - 320 pikseļi (iPhone ainava), 480 pikseļi (iPhone portrets), 600 pikseļi (Android planšetdatori), 768 pikseļi (iPad + ~ Galaxy Tabs) un 1024 pikseļi (iPad ainava un darbvirsmas).

Kā es varu sākt izmantot adaptīvo tīmekļa dizainu? Kādas labas pamācības?

Šeit ir tiešsaistes resursi, kas palīdzēs jums sākt:

Vietnes: Net Magazine, Smashing Magazine, CSS Tricks un Web Designer Wall

Video konsultācijas: YouTube, tīkla vietnes

Prezentācijas: PowerPoint klāji

Podcast apraides: Shop Talk, 5by5 Web Show un The Industry

Twitter: @RWD, @NetMag un @SmashingMag

Kādi ir adaptīvā dizaina izmantošanas trūkumi?

  • Papildu kilobaiti jūsu vietnei, jo viņiem būs jālejuplādē CSS stili un JavaScript faili, kas citādi bija nevajadzīgi.
  • Attēli. Jūs nevēlaties savā mobilajā vietnē rādīt augstākas izšķirtspējas attēlus, bet tas ir grūti sasniedzams adaptīvā dizainā (ja vien neizmantojat servera puses risinājumu, piemēram, Adaptive Images un Sencha.io).
  • Centieni pievienot adaptīvu slāni savai esošajai vietnei. Dažreiz ir saprātīgāk sākt no nulles, nevis padarīt jūsu esošo fiksētā platuma vietni mainīgu.

Jums var patikt arī: Reaktīvie izkārtojumi Bezmaksas EBOOK

Jauku dienu!

Bredlijs Nicā,
ClickHelp.com satura pārvaldnieks - labākais tiešsaistes dokumentācijas rīks SaaS piegādātājiem