Kapag Maling tumutukoy sa Disenyo (at Paano Ito ayusin)

Karamihan sa mga website na gumagamit ng tumutugong disenyo ay ginagamit ito nang hindi tama, na hahantong sa mga problema. Ang pangkalahatang diskarte sa tumutugon na disenyo ay isang tamad, at kung gagawin mo ang diskarte na iyon, ang ilan sa iyong mga tumutugong site ay gagana nang walang kamali-mali, at marami sa kanila ay hindi. Para sa mga perpektong gumagana, malamang na babagsak ito sa isang bagay na swerte.

Ang konsepto ng tumutugong disenyo ay simple, ngunit ang napaka-simple nito ay kung ano ang humantong sa mga tao sa paggawa ng mga pagkakamali nang madali. Ang mga taga-disenyo na may karanasan sa mga taon ay naging bihasa sa pagdidisenyo para sa desktop, at sa gayon ay magpaplano sila ng isang disenyo batay sa isang layout ng desktop.

Ang mga layout ng desktop ay naiiba sa mga layout ng tablet at mga layout ng mobile dahil karaniwang mga multi-haligi, karaniwang may kasamang malaking puting espasyo, at ang lahat ay "malaki" lamang, dahil sa kawalan ng mas magandang salita. Kung ginagamit ang mga diskarte sa tumutugong disenyo, ang layout ng multi-haligi na ito ay dapat na masira sa isang solong haligi.

Kung iyon lang talaga ang ginagawa ng iyong tumutugong disenyo kapag tiningnan ito sa isang mobile device, maaaring mayroon kang problema. Gaano karaming ng isang problema ang nakasalalay sa iyong saloobin, ngunit ang mabubuting taga-disenyo ay nagmamalasakit sa mabuting UX. Mas pinahahalagahan nila ang tungkol sa masamang UX. Kung ang iyong site ay may masamang UX at nais mong maging isang mahusay na taga-disenyo, kailangan mong ayusin ito.

Ang problemang ito sa pagbagsak ng isang layout ng multi-haligi sa isang solong haligi ay hindi ito gumana sa proporsyonal na batayan. Kung kailangan mong pag-urongin ang isang bagay nang pahalang at hindi ka gumawa ng iba pang mga pagbabago, halatang lalawak ito nang patayo.

Ibuhos ang tubig mula sa isang maikling baso ng taba sa isang matangkad na manipis, at ang tubig ay may hugis ng matangkad na manipis na baso, habang ang dami ng tubig ay mananatiling eksaktong pareho. Ang kailangang maunawaan ng mga taga-disenyo ay sa isang website, kailangan natin ng dami upang mabago. Hindi karaniwang isang magandang ideya na baguhin ang hugis ngunit panatilihin ang nilalaman tamang-tama pareho. May kailangang bigyan.

Ang isang tao na talagang nakakuha ng pamagat ng taga-disenyo ay mauunawaan na kumakatawan ito sa isang problemang malulutas, at kung ano ang talagang ginagawa ng mga taga-disenyo ay maghanap ng mga solusyon para sa mga problema. Samakatuwid ito ay ang perpektong trabaho para sa iyo upang makahanap ng pinakamahusay na paraan upang maihatid ang pangunahing nilalaman ng site nang hindi ginagawang isang nakakainis na scroll-festival ang karanasan ng gumagamit. Narito ang ilan sa mga bagay na nagkakahalaga ng isasaalang-alang kapag pinaghiwa-hiwalay ang isang disenyo ng desktop sa isang disenyo ng mobile:

1. Ang "Mobile Una" ay moronic

Paumanhin, ngunit ito ay. Ang bawat tao'y parroting ito, ngunit bilang isang konsepto ito ay hindi masyadong kapaki-pakinabang dahil kung tunay mong dinisenyo ang "mobile muna" pagkatapos ay magiging bangungot na sinusubukan itong sukatin pabalik sa isang disenyo ng desktop maliban kung nananatili ka sa isang pulos solong layout ng haligi pataas

Ang pinakamahusay na diskarte ay ang pisikal na disenyo ng hindi bababa sa tatlong (at hanggang sa 11) iba't ibang mga layout. Ang pinakamaliit na maaari mong isaalang-alang ay kasama ang:

  • desktop
  • Landscape Mobile
  • Portrait Mobile

Kung nais mong maging mas masinsinang, dapat mo ring isaalang-alang ang:

  • Landscape Tablet
  • Portrait Tablet

At ang buong listahan, kung nais mong maging ganap na kumpleto ay ang:

  • Napakalaking Desktop
  • Karaniwang Desktop
  • Malaking Landscape Tablet
  • Malaking Portrait Tablet
  • Maliit na Landscape Tablet
  • Maliit na Portrait Tablet
  • Malaking Landscape Mobile
  • Malaking Portrait Mobile
  • Maliit na Landscape Mobile
  • Maliit na Portrait Mobile
  • Maliit / Nakasuot

Sa maraming iba't ibang mga posibilidad, kitang-kita kung bakit ang isang tamad na "isang sukat na sukat" lahat ay nakakaakit, ngunit halata din kung bakit maraming paraan upang sirain ito.

2. Ipaamo ang nababagsak na footer ng pahina

Kasama sa disenyo ng desktop ang isa sa mga malalaking chunky na footer ng pahina na may maraming panloob na mga link? Mahusay, marahil ay magiging napaka madaling gamiting sa isang desktop. Sa isang mobile, mukhang nakakatawa ito, at higit pa sa isang nakakainis na ugnayan lamang. Maaari mong idisenyo ang ganap na magkakaibang mga footer ng pahina para sa bawat point break ng aparato. Gawing magagamit lamang ang mga link ng footer na iyon sa isang modal dialog at manalo ang lahat.

3. Tanggapin ang ilang mga menor de edad na quirks sa hindi nakakubli na mga aparato

Kung ang isang partikular na aparato ay hindi karaniwan, kung gayon hindi ito masama kung mayroong ilang mga quirks sa disenyo na lilitaw lamang kapag tumitingin sa aparatong iyon. Ang mas sikat ng isang aparato ay, mas kakailanganin mong magtrabaho sa pagtanggal ng anumang mga quirks na lilitaw dito.

4. Maaari mong itago ang nilalaman na hindi nakakatulong sa pangunahing mensahe

Ang pinakamahalagang bahagi ng isang site ay ang pangunahing mensahe. Oo, sa ilang mga site, ang pinakamahalagang bahagi ay ang advertising at mayroon lamang sila upang maihatid ang advertising na iyon, ngunit kung kailangan mong pumili sa pagitan ng pagpapakita ng pangunahing mensahe o pagpapakita ng advertising, piliin ang mensahe. Mas malamang na ituring ka ng Google bilang katauhan non grata kung itago mo ang pangunahing nilalaman at pagkatapos ay maghatid ng isang bungkos ng mga ad. Dahil sa pangunahing nilalaman na iyon ang na-index sa iyo ng Google, at kapag hindi ipinakita ang nilalamang iyon, tinitingnan iyon ng Google bilang mapanlinlang.

Bukod pa rito, ang mga bagay tulad ng mga imahe na pulos pandekorasyon o Aesthetic, ngunit na hindi malaki ang naiambag sa pangunahing mensahe, ay mga kandidato para sa pagbawas o pagtatago ng kabuuan.

Iminungkahi ng ilang tao na ang pagtatago ng nilalaman ay "parusahan" ang mga mobile na gumagamit, ngunit ito ay medyo isang walang katotohanan na kuru-kuro. Ang katotohanan ay itinatago mo ang nilalaman dahil nandoon upang mapahusay ang karanasan sa desktop, ngunit hindi sapat na nag-aambag sa pangunahing mensahe ng site para maging kinakailangan ito

5. Maaari kang gumamit ng mga alternatibong background

Kamakailan binigyan ako ng isang katawa-tawa na takdang-aralin kung saan ang may-ari ng site ay nagbayad para sa isang partikular na background at nais ang lahat ng nilalaman na maiakma upang magkasya sa background na iyon. Ang mga item ng bullet point ay dapat na isang eksaktong numero ng mga character, ang kabuuang bilang ng mga linya ay dapat na eksaktong, at iba pa.

Ito ay tiyak na masamang pagsasanay sa disenyo ng web, dahil dapat mo hindi kailanman disenyo ng nilalaman upang magkasya sa isang layout. Dapat ang layout palagi idisenyo upang hawakan ang nilalaman. Kung sa ilang kadahilanan hindi mapigilan ng layout ang nilalaman, kung gayon ang layout ay dapat na muling idisenyo, hindi ang nilalaman. Posibleng posible na gumamit ng iba't ibang mga background para sa iba't ibang mga aparato. Ikaw ay isang taga-disenyo Gamitin ang iyong imahinasyon.

Ang nilalaman ay ang buhay-dugo ng isang website, at upang baguhin ito o paghigpitan batay sa mga paghihigpit ng isang layout ay isang malinaw na tanda ng amateurishness sa bahagi ng may-ari ng site, at isang tanda na ang layout ay hindi maganda ang disenyo sa una lugar Panindigan ang iyong mga prinsipyo, dahil ang kliyente na iyon ay magkakaroon ng problema kung pumayag ka.

Palaging tama ang customer, maliban kung ang customer ay isang client sa disenyo ng web. Bihirang alam ng mga kliyente kung ano ang pinakamainam para sa kanila, at mahalaga na igiit ang iyong sarili bilang isang taga-disenyo ng web na alam kung paano maghatid ng tamang resulta para sa kliyente. Kung hindi, ipagsapalaran mo ang paglikha ng isa pang website kasuklam-suklam.

6. Mano-manong kontrolin ang pagkakasunud-sunod ng pagbagsak (o iwasan ang mga spatial na sanggunian sa loob ng nilalaman)

Ito ay isang komplikadong problema. Ang pagkakasunud-sunod ng pagbagsak ng isang site ay nakasalalay sa pagkakasunud-sunod kung saan nakasalansan ang mga div. Kailangan mong i-stack ang iyong mga div sa tamang pagkakasunud-sunod upang sila ay gumuho sa tamang pagkakasunud-sunod.

Ang isa sa mga problema na nagmumula sa drag-n-drop WYSIWYG tagabuo ng website ay hindi mo maaaring karaniwang idikta kung anong utos ang nai-stack sa mga div, at sa napakabihirang mga pagkakataon kung saan mo magagawa iyon, ang iyong pagsusumikap ay mababawi sa tuwing Ginagawa mo ang pinakamaliit na pag-edit, at kakailanganin mong bumalik at i-hack muli ang source code.

Kung hindi mo makontrol ang order ng pagbagsak, ang imaheng ito malinaw na nagpapaliwanag kung ano ang maaaring magkamali. Gayundin dapat mong iwasan ang paggawa ng mga sanggunian sa spatial (tulad ng "sa haligi sa kaliwa") tulad ng sa isang mobile kung anuman ang nasa kaliwa o kanan ay maaaring ilipat sa itaas o sa ibaba, dagdagan kung iisipin mo sa mambabasa na sapat itong mahalaga upang mag-scroll upang makita, kung gayon kakailanganin nilang mag-scroll pabalik, at hindi iyon cool.

7. Maaaring kailanganin mo ang iba't ibang mga laki ng font para sa iba't ibang mga layout

Madaling kontrolin ang laki ng font sa CSS at maaari mong itakda ang iba't ibang mga laki ng font at kahit na iba't ibang mga mukha ng font (kung magmukhang mas maganda ang mga ito) para sa mga partikular na laki ng display. Mahahanap mo ang laki ng display sa mga query sa media ng CSS, at pagkatapos ay binago mo ang laki ng font o mukha ng font upang maging sa mga halagang magpapakita ng nilalaman sa maximum na kalamangan sa uri ng aparato na iyong tina-target.

8. Mahusay na gumamit ng mga tumutugong imahe

Lahat ng mga imahe ay dapat na tumutugon hangga't maaari. Nagdadala ito kasama nito kung minsan ang detalye ng isang imahe ay maaaring mawala kung mai-scale ito nang labis. Ang isang solusyon sa problemang ito ay upang ma-click ang imahe upang ang gumagamit ay maaaring tumingin ng isang naka-zoom sa bersyon ng imahe na hiwalay sa nilalaman. Ang normal na paraan upang magawa ito sa pamamagitan ng isang modal dialog box.

imahe ng header sa kabutihang loob ng

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.

Comments 1 Response

  1. Nangangahulugan lang ang una sa mobile na sa base ng code, ang "default" na css ay para sa mobile at gagawa ka ng mga pagbabago para sa mas malawak na mga format mula doon. Hindi ko talaga maintindihan ang iyong unang punto

Mag-iwan ng Sagot

Ang iyong email address ay hindi ilalathala. Ang mga kailangang field ay may markang *

Marka *

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.

Naging isang dalubhasa sa ecommerce

Ipasok ang iyong email upang masimulan ang party