Reaģējoši Web izkārtojumi mobilajiem ekrāniem Ievads, padomi un piemēri

Šis raksts ir daļa no mūsu "Web Responsive Design sērija" - kas sastāv no rīkiem, resursiem un konsultācijām, lai palīdzētu izveidot tīmekļa vietnes visu platformu lietotājiem. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

Dizaineri tagad ir stingrāki nekā agrāk. Mums ir ne tikai jāizstrādā stacionārās ierīces, bet arī mobilās ierīces, piemēram, planšetdators un viedtālruņi, un tā kā mēs šeit runājam par daudz dažādu ekrāna izmēru un izšķirtspēju, tas ir milzīgs uzdevums pleciem. Ņemot to vērā, atsaucīgs web dizains varētu būt labākais risinājums. Tā piedāvā vairāk nekā vienkāršu mobilo veidni; tā vietā jūsu vietnes izkārtojums ir izstrādāts tā, lai būtu pietiekami elastīgs, lai tas atbilstu jebkurai iespējamai ekrāna izšķirtspējai.

Ar šādu šķidruma projektēšanas shēmu ir acīmredzamas priekšrocības un trūkumi. Apsveriet tālāk minētos piemērus par to, kā atsaucīgs tīmekļa dizains var padarīt pāreju uz mobilajām ierīcēm vienmērīgāku.

Kā darbojas atsaucīgs dizains

Kad es lietoju vārdu “atsaucīgi” Web dizaina ziņā es domāju, ka viss izkārtojums reaģē uz lietotāja ekrāna izšķirtspēju. Iedomājieties šo scenāriju: jūs lasāt tīmekļa vietni vienā tabletē, pēc tam vienu vai otru iemeslu dēļ pārslēdzaties uz citu ierīci. Pārlūka logs tagad ir mainīts. Reaģējošs web dizaina izkārtojums iezīmēs shēmas un izkārtojumu, kas graciozi nojaucas un atgūst sevi. No lietojamības viedokļa šī ir lieliska tehnika.

Atbildīgs dizains ir saistīts ar viendabīgas pieredzes radīšanu neatkarīgi no pārlūkprogrammas vai ierīces ekrāna izmēra. Esmu atradis perfektu piemēru no “A List Apart”, lai ilustrētu savu punktu, kas ietver arī dinamiskus attēlus. Platums tiek noteikts CSS, izmantojot procentus galvenokārt visiem iekšējiem konteinera elementiem. Lielākas tīmekļa vietnes arī labi reaģē uz dinamiskā satura, piemēram, JavaScript, noņemšanu, ja tā netiek atbalstīta.

Kāpēc Design for Mobile?

Ir kļuvis skaidrs, ka arvien vairāk lietotāju dodas uz mobilo tālruni, un ne tikai pārlūkošanai tīmeklī. Tabletes datori ir sākuši mainīties kontekstā, kad lietotāji klasē ir tiešsaistē. Mobilo sakaru projektēšana noteikti ir prasība mūsdienu interneta standartos. Vienīgā problēma ir jūsu attīstības metodes izvēle un mērķauditorijas atlasīšana atbilstoši mērķauditorijai.

Kad sākat kodēt konkrētas ekrāna izšķirtspējas, jūs galā nonāksiet ar pārāk daudzām stilu lapām, ar kurām rīkoties. Mediju vaicājumus CSS3 var izmantot, lai izveidotu iPhone specifiskus izkārtojumus gan portretam, gan ainavai. Tā kā jūs varat noteikt pikseļu blīvumu, ir viegli pārveidot jebkuru HTML veidni mobilajam tālrunim.

(Attēla avots: bradfrostweb)

Bet, kad jūs kodējiet izkārtojumu, kas nodrošina atsaucīgu dizainu, mobilie aspekti tiek rūpīgi izskatīti. Gan darbvirsmas, gan mobilo sakaru lietotājiem tiks piedāvāta līdzīga pieredze, un jums nebūs jāuztraucas par ārējiem CSS īpašumiem. Vienīgais pētījums, kas jums jāveic, ir plānot mazāko iespējamo displeja ekrānu. Google Analytics satiksmes dati var būt ļoti noderīgi.

Iespējams, ka jūsu vietne nedarbosies 100% apmērā par katru ierīci, kurā darbojas katra pārlūkprogramma. Bet jūs varat mērķēt vairākumu, pamatojoties uz ekrāna vidējo platumu. Vecāki iPhone modeļi izmanto 320 × 480 displeja izšķirtspēju, kas nav tik neticama. Es varētu uzņemt minimālo platumu 240px vai pat mazāku, ja to varēsit ievietot.

Noklusējuma tālummaiņas noņemšana

Ja viedtālrunī esat pavadījis Web pārlūkošanu, jūs pamanīsiet, kā tīmekļa vietnes tiek samazinātas, lai tās pilnībā parādītu ekrānā. Tas ir lietotāja ērtībai, jo vairumam tīmekļa vietņu nav mobilā partnera, tāpēc pilnais izkārtojums ir drošākā likme.

Bet, kad jūs nokļūsiet atsaucīgā mobilā dizaina veidošanā, automātiskā tālummaiņa tiešām var izjaukt izkārtojuma elementus. Konkrēti, attēli un navigācijas saturs jūsu izkārtojumā var būt mazi vai pārāk lieli. Ir īpašs metatags, ko varat pievienot dokumenta galvenē, kas to atiestata lielākajā daļā Android un iPhone ierīču.

Tas ir pazīstams kā viewport meta tag kas satur dažus pielāgotos mainīgos saturu. Apple rīcībā ir dokumentācijas lapa par dažiem citiem meta tagiem, kas jums būtu jāpārbauda, lai gan tie ir īpaši vērsti uz tīmekļa vietnēm, kas ir iOS. The sākotnējā mērogā vērtība ir svarīga, jo šī tīmekļa vietne noklusē pilnu 100% tālummaiņu.

Pēdējā vērtība pielāgojams lietotājam pilnībā noņem šo tālummaiņas funkcionalitāti, lai lietotājs nevar mainīt izkārtojuma izmērus. Tas bloķēs dizainu vienā izmērā, pamatojoties uz pilnu ierīces platumu. Ņemiet vērā, ka, pat ja jūs atspējojat tālummaiņas funkcionalitāti, labs atsaucīgs dizains joprojām pielāgosies, pārejot no portreta uz ainavu jebkurā ierīcē! Bet ir jēga bloķēt atsaucīgu dizainu un noņemt vispārējās mērogošanas iespējas.

Dinamiskā attēla mērogošana

Attēli ir vēl viens svarīgs faktors katrā tīmekļa vietnē. Mobilie lietotāji, iespējams, nevēlas straumēt videoklipus, bet fotogrāfijas ir pilnīgi atšķirīgs stāsts. Tie ir arī lielākie vainīgie, ja runa ir par izkārtojumiem, kas iziet no kastes modeļa.

img max-platums: 100%;

CSS standarta noteikums ir piemērot maksimālo platuma īpašumu visiem attēliem. Tā kā viņi vienmēr būs iestatīti 100% apmērā, jūs nekad nepamanīsiet traucējumus. Kad lietotājs atkārtoti izmēros pārlūkprogrammas logu, kas ir mazāks par jūsu attēlu, tas automātiski tiks pielāgots līdz 100% platumam, kas samazināts. Problēma ir tā, ka Internet Explorer nevar saprast šo īpašumu, tāpēc jums būs jāizveido IE specifiska stila lapa, izmantojot platums: 100%;.

Elastīgi attēli ir iespējami arī tad, ja izmantojat JavaScript vai jQuery spraudņus. Ir daži tiešām gudri izstrādātāji, kas ir ieviesuši laiku, lai izveidotu neticami atsaucīgu attēla saturu. Šis pavediens ir tikai viens no daudzajiem Stack pārplūdes veidiem, kuram ir nepārspējama, taču ērta pieeja, lai atrisinātu IE6 / 7 kļūdas.

Es personīgi iesaku pielikt pie dabiskā CSS attēla izmēra maiņas. Ja jūsu vietne darbojas mobilajā pārlūkprogrammā ar iespējotu JavaScript, tas, visticamāk, arī atbalsta CSS. Ja jūs patiešām vēlaties izvērsties dziļāk, apskatiet šo 24 rakstu rakstu Attēli pielāgojamiem dizainiem…

Pieskaroties dizainam

Web izstrādātāji var aizmirst, ka mobilie lietotāji vairs nav tastatūras tālruņi, piemēram, BlackBerrys. Lielākā daļa viedtālruņu šodien izmanto skārienekrāna saskarnes, kas padara scenāriju atšķirīgu no peles un tastatūras iestatījumiem.

Tāpēc jums būs jāapsver alternatīvi risinājumi mobilajos elementos. Nolaižamās izvēlnes var darboties labāk, ja tās tiek parādītas kā viena izvēlne labajā pusē. Lielākā daļa lietotāju ir spējīgi pieskarties labajā pusē esošajām saitēm, kas ir vieglākas nekā pa kreisi, bet jebkura kolonna darbojas, lai atvieglotu vietu. Izmantojot norobežojumu ievilkumus, ir viegli identificēt saites hierarhiju, neprasot nekādu jQuery kodu.

Tā ir arī laba prakse palielināt šo navigācijas saišu apjomu. Mobilo sakaru lietotājiem nav luksusa lieliem ekrāniem, kas ir pieejami galddatoros vai pat klēpjdatoros. Jums ir jātur teksts liels, priekšējais, pieskarams un lasāms par katru cenu. Iespējams, jūs pat vēlaties mainīt izmērus, ja lietotājs pārslēdzas starp portreta un ainavas skatu - diezgan bieži atkārtojas, pārlūkojot mobilo tīmekli.

Pielāgoti CSS izkārtojumi

Kopumā vislabāk ir pielāgot savu izkārtojumu un nodrošināt dabisko satura pasliktināšanos. Ja jums ir sānjoslas un satura apgabals, jums tās ir jānorāda procentos vai ems platumā, jebko, kas mainīsies ar pārlūka logu. Ja lietojat a min-platums tas galu galā pārtrauks daļu no izkārtojuma; tāpēc tagad sānjoslas saturs tiek rādīts virs lapas satura.

(Image Source: Pepperson)

Apsverot, kā tas ietekmē vispārējo dizainu, ir daudz vieglāk izstrādāt ārējās stilu. Tomēr, visticamāk, jūs darbosies ar ekrāna izšķirtspēju, kas ir pārāk maza, lai jūsu izkārtojums kļūtu redzams. Tas ir ideāls scenārijs, lai pievienotu pielāgotus CSS rekvizītus, lai noņemtu lapas daļas vai pilnībā formatētu saturu.

Pārslēgt papildu saturu On / Off

Lielu satura bloku piemēri ietver tīmekļa veidlapas, dinamiskas izvēlnes, attēlu slīdņus un citas līdzīgas idejas. Tā vietā, lai pilnībā izņemtu šos elementus, izkārtojums kļūst mazāks, kāpēc ne tikai slēpt tos a “līdz minimumam” saturs div? Varat izmantot CSS vai JavaScript, lai veiktu labojumus, bet galu galā jums, iespējams, būs vajadzīgs JS kods, lai izveidotu pārslēgšanas pogu.

Šī alternatīva ir ideāli piemērota jūsu mājas lapas dinamiskai saglabāšanai un bagātīgu tīmekļa mediju pilnīgai saglabāšanai. Tā vietā, lai pilnībā noņemtu nolaižamo navigāciju vai pārkārtotu lapas struktūru, varat to paslēpt satura div. Ja lietotājs vēlas parādīt savas saites, pieskarieties pogai, lai atvērtu / aizvērtu izvēlni.

Šis formatējums ir vienkāršs, intuitīvs un viegli lietojams ar skārienekrāna ierīcēm. Divpusējā kolonnā var novietot katru no nolaižamajām izvēlnēm blakus. Tā kā logs mainās vēl mazāk, tie dabiski samazināsies zem viena otras un palielinās lapas augstumu. Tomēr iespēja visu izvēlnes sabrukumu ir viegli sasniedzama un tikai viena pieskāriena attālumā. Šis pārslēgs div ir ideāli piemērots attēlu slīdņiem, sadarbojoties ar dinamisku fotoattēlu atkārtotu izmēru.

Multivides vaicājumu izmantošana

Ja mobilais ekrāns izjauktu jūsu 2 vai 3 kolonnu izkārtojumu, jūs beidzat ar katru no satura apgabaliem, kas novietoti virs otra. Šķiet, ka visa vietne izplūst un var izjaukt ļoti mulsinošu, neizšķirot bloka zonas. Labāka ideja ir pievienot apakšējo robežu katrai slejai, tikai mobilajām ierīcēm, izmantojot ārēju stilu mobile.css.

Izmantojot šos jaunos stilus, jūsu saturs tiek sadalīts dalāmās daļās. Iepriekš redzamais multivides atribūts ir īpaši izstrādāts, lai novirzītu vecākas iPhone ierīces ainavas skatā. Bet tas attieksies arī uz ierīcēm, kuru ekrāni ir mazāki par 480 pikseļiem. Izmantojiet to savā labā, lai jūs varētu noteikt, kurā vietā izkārtojums “sabojājas”.

Ir vēl dažas iespējas, ko varat izmantot ierīces orientācijas noteikšanai. Šī fantastiskā rokasgrāmata par CSS plašsaziņas līdzekļiem var sniegt jums dažas idejas. Papildus jaunajam mobilajam projektam 320 un jaunākajam piedāvājumam ir pieejams mobilais CSS @media stili. Tos var iekļaut tieši vienā un tajā pašā mobile.css failā un piemērot noteikumus daudzām dažādām ierīcēm.

 / * Viedtālruņi (portrets un ainava) ----------- * / @media tikai ekrāns un (min-device-width: 320px) un (max-device-width: 480px) / * Stili * / / * Viedtālruņi (ainava) ----------- * / @media tikai ekrāns un (min-platums: 321px) / * stili * / / * viedtālruņi (portrets) ---- ------- * / @media tikai ekrāns un (max-width: 320px) / * Stili * / / * iPad (portrets un ainava) ----------- * / @ tikai multivides ekrāns un (min-device-width: 768px) un (max-device-width: 1024px) / * Stili * /

(Avots: CSS3 mediju vaicājumi)

Noderīgi rīki

Skelets - skaista katlu karte atbildīgai mobilajai konstrukcijai
Pāriet no adaptīvās uz pilnībā atsaucīgu

Vitrīna: skaisti atsaucīgi modeļi

Es ceru, ka šie padomi un dizaina paņēmieni mudinās jūs virzīties uz aizraujošu, atsaucīgu izkārtojumu ne tikai mobilajiem ekrāniem, bet jebkurai kopējai ierīcei, kurā pārlūkošanu. Lai saglabātu radošās sulas plūstošas, esmu izveidojis nelielu vitrīnu no atsaucīgiem mobilo web dizainu. Noteikti pārbaudiet dažas no unikālākajām funkcijām un dalieties savās domās par dizainu vai tēmu diskusiju jomā.

karājas pie mēness