Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Mobile First, Responsive and Simple Navigation

by
Length:LongLanguages:

Malay (Melayu) translation by Muhammad Nabil (you can also view the original English article)

Kami akan membina navigasi laman web yang mudah dan responsif. Penyelesaian kami akan membantu kami menekankan kandungan halaman kami, boleh dikatakan keutamaan ketika merancang untuk mudah alih. Tidak akan ada penglibatan JavaScript, dan kami akan menyelesaikannya dari pendekatan Mobile First

Navigasi Bergerak

Jika anda telah membaca Luke Wroblewski mengenai Mobile First , anda akan terbiasa dengan kenyataannya:

Sebagai peraturan umum, kandungan menjadi lebih penting berbanding navigasi pada mudah alih.

Apa yang dimaksudkan olehnya ialah pengguna mudah alih sering mencari jawapan langsung; Mereka mahu kandungan yang mereka cari, bukan pilihan navigasi lagi.

Banyak laman web, bahkan yang responsif, mematuhi konvensyen bahawa navigasi berada di bahagian atas halaman tertentu. Pendekatan ini boleh menyebabkan masalah kebolehgunaan pada peranti mudah alih kerana pengguna mudah alih sering kekurangan dua perkara: ruang skrin dan masa. Jika navigasi utama terletak di bahagian atas halaman, terdapat kemungkinan besar ia akan mengaburkan keseluruhan skrin telefon. Masalah ini diperparah lagi oleh pautan menu yang besar, yang memaksa pengguna untuk menatal ke luar navigasi untuk mendapatkan kandungan yang mereka inginkan.

Kami mengambil contoh ini dari London & Partners :

Reka bentuk responsif yang sangat baik, tetapi dalam dimensi viewport selular standard (320px x 480px) anda benar-benar melihat menu navigasi. Sudah tentu, setelah tiba di teras, saya mahu melihat sesuatu yang lain daripada itu? Bukan sahaja London & Partners membuktikan ini - ini adalah amalan yang melihat banyak reka bentuk responsif di seluruh web.

Jadi apakah penyelesaiannya?

Kami telah melihat beberapa cara untuk menyelesaikannya, sering bergantung pada jQuery untuk menyelesaikan masalah ini. Ambil penjelasan Chris Coyier mengenai Lima Langkah Mudah mengenai menu lungsur turun responsif.


Skrin besar, skrin kecil.

Menggunakan jQuery, menu pendua dicipta dalam bentuk dropdown <select> , yang pada mulanya tersembunyi dari paparan menggunakan CSS. Apabila pertanyaan media mengesan skrin yang lebih kecil, mereka membuat dropdown yang kelihatan dan navigasi asal tidak kelihatan. Ini sesuai untuk peranti mudah alih kerana turun turun menggunakan ruang kurang dan menggunakan UI khas pada peranti (seperti scroller iPhone).

Atau, anda mungkin menyembunyikan navigasi anda, tetapi akan beralih ke paparan menu terbuka apabila butang 'menu' diklik. Anda boleh melihat kesan ini dalam tindakan dengan Bootstrap terkini dari Twitter.

Skrin yang lebih kecil menyembunyikan pautan navigasi dan memaparkan ikon 'senarai' (cepat diterima sebagai makna 'menu') yang mengungkap navigasi apabila diklik. Sekali lagi, pelawat selular dibentangkan dengan seberapa banyak kandungan yang mungkin, tetapi mempunyai pilihan navigasi yang tersedia jika mereka mahu.

Penyelesaian CSS Tulen

Kami akan menggunakan teknik yang dibincangkan oleh Lukas, yang menggunakan pendekatan CSS dan Mobile First. Apakah yang dimaksudkan dengan pendekatan First Mobile? Ringkasnya, kami akan merangka susun atur mudah alih lurus ke hadapan, kemudian meningkatkan lagi reka bentuk untuk skrin yang lebih besar. Kami akan menggunakan pertanyaan media yang mengesan saiz skrin yang terus meningkat, menambahkan gaya dan ciri kepada keadaan tertentu.

Ini bermakna hanya CSS minimum yang digunakan dan sumber yang akan dimuatkan apabila reka bentuk kami dilihat dengan peranti mudah alih. Ini juga bermakna versi IE yang lebih lama (yang tidak mengenali pertanyaan media) akan dibentangkan dengan tapak mudah alih. Sila lihat artikel Meninggalkan Internet Explorer Lama di belakang oleh Joni Korpi untuk maklumat mengenai perkara ini.

1. Markup

Saya akan menerangkan idea-idea di sebalik penyelesaian ini kemudian, jadi untuk sekarang mari kita membuang beberapa markup bersama, bermula dengan dokumen awal HTML5.

Nota: Jangan Lupakan Tag Meta Viewport!

Selepas itu, kami akan menambah beberapa struktur halaman. Penambahan langsung dan segala-galanya hanya untuk tujuan demonstrasi kami. Saya telah menggunakan teks pengisi dari Holy Grail Monty Python (terima kasih Chris Valleskey ) yang merupakan cara terbaik untuk senyum di wajah anda apabila anda bekerja :)

2. Markup Navigasi

Kami telah menyusun laman html asas, jadi sudah waktunya untuk tarikan utama; Navigasi utama kami.

Ya, anda telah melihat dengan betul, kami telah menambahkannya dalam baris 68, selepas artikel terakhir. Jangan lupa bahawa kami sedang merekabentuk untuk telefon bimbit sekarang, kami akan menjaga desktop kemudian. Kami telah meletakkan navigasi di bahagian bawah halaman kami, supaya ini benar-benar diputarbelitkan. Kami sekarang akan meletakkan pautan di bahagian atas halaman kami supaya pengguna dapat mencari navigasi jika mereka mahu.

3. Tetapkan semula CSS

Bergantung kepada cara anda biasanya memulakan projek web, langkah ini berbeza dengan aliran kerja biasa anda. Saya sentiasa mencari tetapan Eric Meyer untuk menjadi asas yang mantap untuk bekerja, terutamanya apabila dia tweaked mereka baru-baru ini . Kami akan menambah peraturan set semula ke stylesheet untuk menendang css kami:

4. Gaya Asas

Pada masa ini halaman kami kelihatan sangat membosankan ...

... jadi marilah kita memperbaikinya dengan menambahkan beberapa gaya mudah.

Ini adalah semua perkara asas (fon, ketinggian baris, warna, dan sebagainya). Apa yang penting sejauh ini ialah saya telah menetapkan butang 'menu' untuk terapung di sebelah kanan, di bahagian <header> , di mana anda sering mengharapkan navigasi ditemui

Sekiranya anda menghidupkannya, anda akan melihat status hover - ia tidak diperlukan untuk peranti skrin sentuh sesungguhnya, tetapi pengalaman ini juga akan dihantar ke versi Internet Explorer yang tidak dikendalikan. Apa yang kita tentukan untuk faedah pengguna mudah alih adalah keadaan :focus . Ini sama seperti :hover , tetapi akan menawarkan maklum balas penting untuk peranti skrin sentuh. Pengguna kami akan mengetahui bahawa mereka berjaya menyentuh butang menu.

Walau bagaimanapun, klik dan anda akan dibawa ke navigasi, super.

Sekarang mari kita memberi sedikit gaya ke menu.

5. Gaya navigasi

Kami akan benar-benar memilih navigasi utama kami seperti contoh London & Partners yang ditunjukkan sebelum ini, kecuali pada masa ini ia jelas di bahagian bawah halaman ...

Lebih baik lagi. Kami telah membuat pautan menu yang baik dan besar (baca lebih lanjut mengenai Saiz Sasaran Sentuhan di blog Luke Wroblewski) dan sekali lagi tentukan status :focus pada maklum balas pengguna.

Ia juga menjadi jelas bahawa kami memasukkan pautan 'atas' yang akan membawa pengguna kembali ke bahagian atas halaman jika diperlukan.

6. Menjadi Lebih Besar

Baiklah, kami telah mengendalikan susunan selular mudah kami, jadi sudah tiba masanya untuk beberapa peningkatan progresif. Kami akan menggunakan pertanyaan media untuk menentukan bila susunatur selular kami tidak lagi sesuai.

Tetapi pada masa manakah ia menjadi tidak sesuai? Terdapat banyak cara untuk mendekati permintaan media, tetapi kami akan bekerja dari pangkalan bahawa kawasan tontonan selular adalah 320 piksel x 480 piksel. Lebar ialah 320px apabila dilihat dalam bentuk potret, lebar 480px apabila dilihat dalam bentuk landskap, sehingga kita dapat menentukan permintaan media pertama kami untuk mengesan skrin yang lebih besar dari 480px.

Walau bagaimanapun, langkah seterusnya boleh dibilang tablet. IPad mempunyai resolusi 980px x 768px, jadi kita boleh mengandaikan sesuatu yang lebih kecil daripada 768px sesuai untuk susunatur mudah alih kami. Apa-apa sahaja yang lebih besar daripada 768px boleh mengendalikan susun atur navigasi desktop yang lain.

Oleh itu, kita boleh mula menambah peraturan, jadi mari menyediakan pertanyaan media:

Permintaan media ini akan menjalankan semua gaya di dalamnya apabila viewport sekurang-kurangnya 768px lebar. Beri perhatian kepada satu-satunya penyertaan kata kunci, yang menjamin bahawa Internet Explorer 8 tidak sepenuhnya keliru dan cuba memproses pertanyaan. Lihat penjelasan terdahulu sayauntuk maklumat lanjut.

Mari lepaskan segalanya dengan membuat butang 'menu' hilang:

Dengan penyemak imbas yang dibuat sedikit lebih luas, butang menu tidak lagi dipaparkan.

7. Navigation Shifts

Sekarang kita perlu membawa navigasi utama kami ke bahagian atas halaman. Kami akan melakukan ini dengan membuangnya dari aliran dokumen, meletakkannya di atas.

Untuk membolehkannya kita mula-mula membuat saudara induk ( .wrapper ) .wrapper . Kita boleh melakukan ini di sini dalam pertanyaan media, atau nyatakannya di awal lembaran gaya kami.

Sebaik sahaja menu diposisikan sepenuhnya, kita perlu memadamkan beberapa gaya utama. Tidak banyak yang perlu dilakukan, tetapi kita memerlukan senarai item untuk dipaparkan dalam garis besar, dan kita perlu mengeluarkan pad sempadan dan empuk dari sauh. Status hover yang kita dictate sebelum ini tentu baik, jadi kita tidak perlu mengubahnya.

8. Satu perkara terakhir

Jika anda perasan, anda akan menyedari bahawa kami masih mempunyai pautan 'atas' dalam navigasi - kami tidak memerlukannya lagi?

Kita boleh memadamkan ini dalam beberapa cara, tetapi jika kita yakin apa yang berlaku, mari tambahkannya.

Dan kemudian kita dapat menyingkirkannya dalam pertanyaan media kami:

Kekeliruan

Di sana dia! Terdapat banyak cara untuk membina idea ini (memohon hanya satu senarai ikon) dan, tentu saja, anda boleh terus menambah pertanyaan media untuk mengisi skrin yang semakin meningkat. Semoga anda sekarang mempunyai asas untuk melakukannya. Kami telah membuat navigasi mudah, responsif dan sentuhan mesra, dari pendekatan pertama mudah alih sambil menekankan kandungan dan kebolehgunaan. Siapa yang mahu bertanya lagi ?!

Siapa yang mahu bertanya lagi ?!

Beberapa pautan berguna yang disebut dalam tutorial semuanya teratur dalam satu senarai praktikal:

Pilihan Premium

Terdapat banyak templat reka bentuk pertama yang boleh didapati di Pasar Envato untuk kegunaan segera dalam projek anda.

Sebagai contoh, pertama ialah papan pemuka tema apl mudah alih / papan dashboard web mudah alih dengan UI rata berdasarkan Bootstrap 3. Ia ringan tetapi dengan banyak komponen yang sesuai dengan keperluan anda. Ia juga responsif sepenuhnya, dan widget dan komponen adalah mudah alih pertama.

first - Mobile First Web App Theme
pertama - Apl Web Pertama Tema Mudah Alih
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.