it-swarm.asia

Satu situs web untuk beberapa resolusi klien

Saya terus berpikir bahwa walaupun membuat situs web tunggal untuk beberapa resolusi klien atau ukuran layar mungkin sulit, itu jauh lebih mudah dikelola daripada membuat situs web terpisah untuk setiap perangkat atau resolusi.

Desain atau aplikasi pengeditan situs web apa, jika ada, yang dapat saya gunakan untuk membantu membuat CSS spesifik atau bahkan menaikkan harga ke perangkat target dengan ukuran tertentu?

6
Bernhard Hofmann

Dreamweaver CS5 memiliki dukungan untuk kueri media HTML 5 yang memungkinkan Anda untuk menggunakan css dan pratinjau spesifik per resolusi layar. Itu adalah satu-satunya yang terlintas dalam pikiran tetapi saya tidak pernah menyukai Dreamweaver dan tidak akan merekomendasikan hal ini.

2
fluxd

Sebuah situs web tunggal untuk banyak klien tentu saja lebih dapat dikelola.

Hal pertama yang harus dilakukan adalah memiliki beberapa file CSS yang akan diambil oleh browser sesuai dengan atribut media :

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Anda dapat menyesuaikan tata letak elemen, ukurannya, dan bahkan menyembunyikan beberapa elemen untuk perangkat yang lebih kecil.

Jika sebagian besar tata letak Anda harus dilucuti pada perangkat kecil, lebih baik menghapusnya di server untuk menghemat bandwidth.

Resolusi layar dan ukuran jendela dapat ditentukan pada klien dalam Javascript (ini yang paling dapat diandalkan, tes screen.width/screen.height dan document.body.clientWidth/document.body.clientHeight), sementara di server Anda sebagian besar harus mengandalkan HTTP_USER_AGENT header (uji --- di sini bersama dengan header lainnya).

Teknik penting lainnya adalah meninggalkan menggunakan tabel HTML untuk tata letak halaman yang mendukung blok mengambang , yang beradaptasi lebih baik dengan resolusi layar yang berbeda atau ukuran jendela.

Perhatikan juga ukuran layar yang sebenarnya, karena perangkat kecil cenderung memiliki resolusi yang jauh lebih tinggi (DPI, Dots Per Inch) yang dapat membuat hal-hal tidak dapat dibaca.

Kedua teknik harus dikombinasikan (sisi klien dan server) untuk mendapatkan hasil terbaik. Contoh Desain Web Responsif mengesankan tetapi Anda benar-benar harus menguasai teknik untuk mencapai ini, dan masih ada batasan.

Saya pikir pertanyaan ini, meskipun ditanyakan karena perangkat seluler yang terhubung baru, bahkan harus dipertimbangkan untuk komputer karena pengguna dapat mengubah ukuran jendela browser.

5
Mart

Ini adalah presentasi yang harus dilihat, yang mencakup kekurangan cara banyak orang menggunakan kueri media: Memikirkan Kembali Mobile Web .

Singkatnya, ponsel yang tidak mendukung permintaan media (dan ada banyak dari itu) dapat berakhir dengan gaya yang ditujukan untuk browser desktop. Pendekatan yang direkomendasikan di sini, dan digunakan sendiri, dimulai dengan gaya dasar untuk semua dan kemudian secara bertahap menambahkan gaya untuk browser yang do mendukung kueri media.

Lihat jawaban saya untuk pertanyaan terkait di Stack Overflow .

3
David Oliver

Hanya CSS yang tidak akan bekerja untuk itu, karena Anda dapat memiliki tata letak yang sangat berbeda untuk UI seluler dan PC/Mac. Hanya sedikit ide terletak pada tata letak sisi server. Misalnya, Anda perlu merender beberapa bagian halaman (kisi data, bilah samping, bilah navigasi, dll.). Misalnya, Anda menggunakan ASP.NET sebagai prosesor sisi server. Kemudian dalam tata letak halaman Anda menulis:

Untuk bilah navigasi:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Untuk datagrid:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Kemudian di codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

dan seterusnya.

Maka Anda harus menulis penyaji yang berbeda untuk resolusi yang berbeda (ponsel/dll ...). * Untuk resolusi besar, Anda membuat header yang bisa diurutkan, pencari, filter, penyortir, konten yang dapat digulir, plugin JQuery, dll. * Untuk resolusi kecil Anda membuat hanya html sederhana.

Semoga ide utamanya jelas.

0
Genius

Anda tidak memerlukan banyak "situs web" untuk klien yang berbeda (saya pikir tidak ada orang yang melakukannya), tetapi Anda harus memiliki banyak portal untuk segmen pengunjung yang berbeda, misalnya: desktop/laptop, netbook/ipad/ponsel pintar, dan lainnya ponsel.

Meskipun CSS memungkinkan Anda menentukan lembar gaya yang berbeda untuk jenis perangkat yang berbeda, dalam praktiknya bermasalah. Banyak ponsel pintar yang tidak mengambil stylesheet mobile atau mereka menggunakan keduanya, stylesheet seluler DAN stylesheet layar.

Kedua, segmen audiens Anda yang berbeda akan mencari informasi yang berbeda. Misalnya, pengguna seluler mungkin tidak akan tertarik membaca artikel panjang atau melihat gambar atau video hi-res. Jadi portal terpisah dengan pengalaman pengguna yang ditargetkan akan optimal, dan itulah sebabnya sebagian besar layanan populer menawarkan portal terpisah untuk pengguna seluler.

Ketiga, pemeliharaan adalah tentang organisasi dan kesederhanaan lebih dari kuantitas. Tentu, Anda dapat memiliki satu stylesheet besar menggunakan banyak cascading dan peramban peretasan untuk memilih situs utama Anda ke semua klien. Tapi itu mungkin lebih sulit dipertahankan daripada mempertahankan 2-3 lembar gaya yang lebih sederhana, masing-masing dirancang untuk kelas klien tertentu.

Terakhir, jika aplikasi Anda dimodulasi dengan baik menggunakan isolasi domain dan dirancang dengan pemisahan masalah, maka seharusnya cukup mudah untuk membuat portal baru yang dirancang khusus untuk berbagai kelas perangkat. Jika Anda menggunakan pola MVC, maka yang perlu Anda lakukan adalah menambahkan tampilan baru dan terus menggunakan model dan pengontrol yang sama. Jika Anda mendesain aplikasi AJAX, maka Anda bahkan dapat menggunakan kembali sebagian besar tampilan dengan membuat layanan web.

0
Lèse majesté

Itu akan tergantung pada konten Anda tetapi Anda bisa memodulasi konten Anda.

Setiap elemen konten dapat ditampilkan dalam modul sempit yang dapat ditampilkan dalam tiga kolom pada layar lebar, untuk resolusi yang lebih rendah Anda bisa menggunakan lebih sedikit kolom.

Contoh yang baik dari ini adalah: http://colly.com/ Ada tiga penyesuaian tata letak saat Anda mengurangi lebar halaman. Dengan menggunakan ini sebagai pedoman untuk situs Anda sendiri, Anda dapat merancang setiap modul dan tata letak halaman dengan 3 variasi untuk memenuhi masing-masing lebar ini.

Untuk menerapkan ini, Anda bisa memiliki modul berukuran tetap (mungkin seperti li) dalam wadah yang menyesuaikan ukuran. Anda dapat menyesuaikan ukuran wadah menggunakan jquery untuk mendeteksi lebar layar (dan perubahan lebar) kemudian menambah/menghapus kelas. Anda dapat membuat variasi pada elemen-elemen dalam wadah, misalnya: ul.product_list li dan ul.product_list_wide li

0
Leah

Seperti yang orang lain katakan, saya akan menggunakan kueri media CSS3 untuk menargetkan beberapa resolusi. Tergantung pada situs/aplikasi Anda, ini mungkin tidak dapat dilakukan. Ini mengasumsikan Anda akan menggunakan konten yang sama untuk semua pengalaman, hanya menampilkannya secara berbeda berdasarkan ukuran layar (ini tidak selalu optimal untuk pengalaman seluler).

Beberapa sumber daya untuk menggunakan teknik ini adalah:

Artikel selain List tentang Desain Web Responsif: http://www.alistapart.com/articles/responsive-web-design/

Memikirkan Kembali Web Seluler slideshare: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript untuk mengaktifkan kueri media CSS3 untuk browser yang tidak mendukungnya secara native: http://code.google.com/p/css3-mediaqueries-js/

Pilihan kueri media untuk berbagai perangkat dan ukuran: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Beberapa contoh lain: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- situs web /

Sayangnya, tidak ada WYSIWYG untuk melakukan hal semacam ini - Anda membutuhkan pengetahuan dan keterampilan untuk dapat mengimplementasikannya dengan tangan.

Meskipun saya akan menyarankan mereka, layanan seperti Mobify ada jika Anda hanya peduli dengan tampilan desktop/seluler. http://mobify.me/

0
RussellUresti