Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Ang Simple, Responsive na Mobile First Navigation

by
Length:LongLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Gagawa tayo ng simple, responsive na web site navigation. Ang ating solusyon ay makakatulong para mabigyan ng diin ang content ng iyong pahina, na maaaring pangunahing prayoridad sa pagdidisenyo para sa mobile. Walang JavaScript na kasama, at tatalakayin natin ito mula sa Mobile First na paraan.

Pag Navigate ng Mobile

Kung nabasa mo ang Luke Wroblewski’s Mobile First magiging pamilyar ka sa sinabi niya na:

Bilang pangkahalahatang panuntunan, ang content ay mas importante kaysa sa pag navigate sa mobile.

Ang ibig niyang sabihin dito ay ang mobile users ay madalas naghahanap ng mabilis na sagot; gusto nila yung content ng hinahanap nila, hindi ang iba pang pagpipilian sa navigation.

Maraming sites, mga responsive, ay naniniwala sa dati ng kaalaman na ang navigation ay dapat nasa itaas ng kahit na anong pahina. Ang paraan na ito ay maaaring maging sanhi ng problema sa gamit nito sa mobile devices dahil ang mobile users ay madalas kulang sa dalawang bagay: espasyo sa screen at time. Kapag ang pangunahing navigation ay nilagay sa itaas ng pahina, may magandang posibilidad na palabuin nito ang buong mobile screen. Ang isyung ito ay mas pinapalala ng malaking touch-friendly menu links, kung kaya napipilitan ang users na tumingin pa higit sa navigation para makakuha ng mahalagang content.

Tingnan ang halimbawang ito mula sa London & Partners:

Perpekto at desenteng responsive na disenyo, subalit sa normal na mobile viewport na sukat (320px x 480px) lahat ng makikita mo ay navigation menu. Sigurado, pagdating  palang sa homepage, gusto kong makakita ng iba pa maliban diyan? Hindi lamang ang London & Partners ang nagpakita nito- ito ay nakasanayan na na makikita sa maraming responsive na disenyo sa lahat ng web.

Kung Kaya Ano Ang Mga Solusyon?

Nakita na natin ang ilang paraan para masimulang gawin ito, madalas nakadepende sa jQuery para ayusin ito para sa atin. Kumuha ng paliwanag kay Chris Coyier sa Five Simple Steps responsive dropdown menu.


Malaking screen, maliit na screen.

Gamit ang jQuery, nangyayari ang pagkakapareho ng menu sa form ng a <select> dropdown, na sa una ay nakatago gamit ang CSS. Kapag ang media queries ay may nakitang maliit na screen, ipapakita nila ang dropdown at ang orihinal na navigation. Ito ay tamang-tama para sa mobile devices dahil ang dropdowns ay tumatanggap ng maliit lamang na real estate at ginagamit ang particular na UI ng device (katulad ng pang-scroll ng iPhone).

Bilang kahalili, maaari mong ring itago ang iyong navigation, subalit ilipat ito sa  vien kapag pinindot ang ‘menu’ button.  Makikita mo itong gumagana sa bagong Bootstrap ng Twitter.

Ang maliit na screen ay tinatago ang navigation links at ipinapakita ang ‘list’ icon (na mabilis na na tinatanggap na ibig sabihin ‘menu’) kung saan ipinapakita ang navigation kapag pinindot.   Muli, ang mobile visitors ay hinahainanng hanggat maaari ng maraming content, subalit may pagpipilian sa navigation kungsakaling gusto nila ito.

Buong CSS Solution

Gagamit tayo ng pamamaraan na tinalakay ni Luke, kung saan gumagamit ng CSS at Mobile First na paraan. Anong ibig sabihin natin ng Mobile First na paraan? Simple lang, gagawa tayo ng disenyo ng straight-forward na mobile layout, pagkatapos ay unti-unting pagagandahin ang disenyo para sa malaking screens. Gagamit tayo ng media queries na nakikita ang tuluy-tuloy na paglaki ng sukat ng screen, na nakakadagdag sa istilo at features habang nagpapatuloy tayo.

Ibig sabihin taglay lang nito ang maliit na CSS at resources na ilo-load kapag ang ating disenyo ay tiningnan sa mobile device. Ibig sabihin din nito na ang lumang bersyon ng IE (kung saan hindi kinikilala ang media queries) ay ipapakita gamit ang mobile site. Tingnan ang Leaving Old Internet Explorer Behind ni Joni Korpi para sa karagdagang impormasyon tungkol dito.

1. Markup

Ipapaliwanag ko ang mga ideya sa likod ng solusyon na ito habang umuusad tayo, pero sa ngayon sama-sama nating isantabi ang ilang markup, bilang simula sa malinis na HTML5 na dokumento.

Paalala: Huwag Kalimutan Ang Viewport Meta Tag!

Pagkatapos magawa ito, magdadagdag tayo ng ilang balangkas sa pahina. Walang paliguy-ligoy na bagay at iba pa para sa layunin ng pagpapaliwanag. Gumamit ako ng filler text mula sa Monty Python's Holy Grail (salamat Chris Valleskey) na isang magandang paraan para mapasaya ka habang nagtatrabaho :)

2. Navigation Markup

Gumawa kami ng pangunahing pahina ng html, ngayon ay oras na para sa pinakamahalagang paksa; ang pangunahing navigation.  

Oo, nakita mo ito ng tama, dinagdag natin ito sa linya ng 68, pagkatapos ng huling artikulo. Huwag kalimutan na nagdi-disenyo tayo ngayon para sa mobile, tatalakayin natin ang desktop mamaya. Inilagay natin ang navigation sa ibaba ng ating pahina para tapos na ito. Ilalagay na natin ngayon ang link sa itaas ng ating pahina para makita ng users ang navigation kung gusto nila. 

3. CSS Reset

Depende sa kung paano mo karaniwang sinisimulan ang proyekto sa web, ang hakbang na ito ay maaaring iba sa iyong dating workflow. Palagi kong naiisip ang Eric Meyer's reset na matibay na basehan sa unang gagawin, lalo na at inayos niya ito kamakailan.  Idadagdag natin ang panuntunan sa reset sa style sheet para masimulan natin ang css:

4. Pangunahing Istilo

Sa ngayon ang ating pahina ay mukhang walang buhay..

..kung kaya pagandahin natin ito sa pamamagitan ng paglagay ng ilang simpleng istilo.

Ang mga ito ay pangunahing bagay (fonts, line-heights, kulay at iba pa.), ang mahalaga sa ngayon ay nilagyan ko ng istilo ang ‘menu’ button para lumutang sa kanan sa loob ng <header>, kung saan inaasahan mong doon makikita ang navigation.

Kapag iho-hover mo ito, makikita mo ang hover state- hindi naman siyempre ibig sabihin para sa touch screen devices, subalit ang karanasang ito ay ipapadala rin sa hindi nakikipagtulungan na bersyon ng Internet Explorer.  Ang natukoy nating pakinabang ng mobile users ay :focus state Katulad din ito ng :hover state, subalit mag aalok ng mahalagang feedback sa touch-screen devices. Ang mga users ay malalaman na naging matagumpay sila sa pag galaw ng menu button.

Gayunpaman, pindutin ito at mapupunta ka sa navigation, sobra.

Ngayon lagyan natin ng kaunting istilo ang menu.

5. Istilo ng Navigation

Sa totoo lang lalagyan natin ng istilo ang pangunahing navigation katulad ng halimbawa ng London & Partners na ipinakita kanina, maliban lang sa ngayon ay malinaw na ito ay nasa ibaba ng pahina.

Mas maganda. Ginawa nating maganda ang menu links at malaki ( basahin pa ng maigi ang tungkol sa Touch Target Sizes sa sariling blog ni Luke Wroblewski) at muli natukoy na :focus state para sa feedback ng user.

Naging malinaw din na isinama natin ang ‘top’ link kung saan dadalhin ang users pabalik sa itaas ng pahina kung kinakailangan.  

6. Lumalaki

OK, nagawa na natin ang simpleng mobile layout, ngayon naman ang oras para sa ilang progressive enhancement. Gagamit tayo ng media queries para matukoy kung hindi na angkop ang ating mobile layout.

Subalit saang punto hindi na ito angkop? Maraming paraan para gawin ang media queries, subalit gagawin natin mula sa batayan na ang mobile viewport ay 320px x 480px. Ito ay may lawak na 320px kapag tiningnan sa portrait, may lawak na 480px kapag tiningnan sa landscape, kung kaya makatarungan nating maisi-set ang ating unang media query para makita ang anumang screen na mas malaki sa 480px. 

Gayunpaman, ang susunod na hakbang ay maaaring ang tablet. Ang iPad ay may resolution na 980px x 768px, kung kaya maaari nating ipalagay na anumang mas maliit sa 768px ay hindi naaangkop sa ating mobile layout. Maaaring kaya ng ala-desktop na navigation layouts ang anumang mas malaki sa 768px.

Kung kaya maaari na nating simulang lagyan ng panuntunan, kaya mag set-up tayo ng media query:

Ang media query ay papaganahin lahat ng istilo na nakapaloob dito kapag ang viewport ay hindi bababa sa lawak ng 768px. Tandaan na kasama ang natatanging keyword, kung saan sinisigurado nito na ang Internet Explorer 8 ay hindi malilito at subukang gawin ang query. Tingnan ang nauna kong paliwanag para sa detalye.

Magsimula tayo sa pamamagitan ng pagtanggal ng ‘menu’ button:

Dahil sa browser na bahagyang malawak, ang menu button ay hindi na makikita.

7. Paglipat ng Navigation

Ngayon kailangan nating dalhin ang pangunahing navigation sa taas ng pahina. Gagawin natin ito sa pamamagitan ng pagtanggal nito mula sa document flow, at siguradong ilagay ito sa itaas.

Para magawa ito gawin muna natin ang parent (.wrapper) na sadyang nakaposisyon. Maari natin itong gawin dito sa media query, o tukuyin ito sa simula ng ating stylesheet.

Kapag ang menu ay saktong naiposisyon, kailangan nating tanggalin ang ilang achor styling. Wala ng marami pang gagawin, subalit kailangan natin ang list items para ipakita ng inline, at kailangan nating tanggalin ang borders at sobrang padding mula sa anchors. Ang hover states na sinabi natin kanina ay ayos lang, kung kaya hindi nating kailangang baguhin iyon.

8. Isa Pang Panghuling Bagay

Kung tinandaan mo mapapansin mo na mayroon pa ring ‘top’ link sa navigation - hindi na natin ito kailangan?

Maaari nating tanggalin ito sa maraming paraan, subalit para sigurado tayo sa nangyayari maglagay tayo ng class sa list item:

At pagkatapos maaari na natin itong alisin sa media query:

Konklusyon

Ganoon lang! Maraming paraan para mabuo ang ideyang ito (ang pagpapatupad ng list icon ay isa lamang dito) at, siyempre, maaari mong ituloy ang paglagay ng media queries para matugunan ang lumalaking screens. Sana ay may pundasyon ka na para gawin ito. Nakagawa tayo ng simple, responsive, touch-friendly na navigation, mula sa mobile first na paraan habang binibigyang diin ang content at usability. Sino pa ang may hihingiin ng higit pa?!

Karagdagang Resources

Ang ibang kapaki-pakinabang na links na nabanggit sa pagtuturo, ay lahat nakalagay sa isang maayos na listahan:

Pagpipilian sa Premium

Maraming unang mobile design templates na makikita sa Envato Market para sa mabilis na gamit sa iyong proyekto.

Halimbawa, una ay ang mobile first web app/ admin dashboard theme na may flat UI batay sa Bootstrap 3. Hindi ito ganoon ka-importante subalit maraming components na angkop sa iyong kailangan. Ito ay sadyang responsive, at ang widgets at components ay mobile first.

first - Mobile First Web App Theme
first - Mobile First Web App Theme
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.