Cabaran Design : Responsive Web Design

Responsive Web Design = website mesra-gajet

Cabaran 2013 ialah menghasilkan web-design atau muka depan sistem aplikasi online yang mesra-gajet, iaitu yang dinamakan Responsive Web Design. Adakah akan dimasukkan dalam kriteria website Malaysia?hahaha jangan risau, kalau belum sedia takpelah jangan kejar sangat teknologi kalau tak diperlukan. Mari belajar dulu dari pelbagai sumber terbuka mengenainya dan memahami bagaimana mengubahsuai CSS sedia ada untuk menyokong fungsi ini. Hm di sini artikel yang diambil semasa mencari free template sharepoint...sebab salah satu yang kena buat ialah mengubahsuai template default Sharepoint 2010 yang baru selesai install oleh team ICT Selangor dengan kerjasama sifu luar.
nota : tujuan saya copy di sini supaya saya tak hilang link rujukan sites ini..


ARTIKEL RUJUKAN 1

Responsive – Free SharePoint 2010 Theme
Author: Luis Kerr
Copy dari : http://www.topsharepoint.com/responsive-free-sharepoint-2010-theme

The technique that makes a web design layout respond to any screen size and orientation (landscape or portrait) is called Responsive Design. By using this technique you will be able to display your content correctly to all users by using fluid grids, queries and images to fine-tune the design to accommodate screens of different sizes using CSS3-based media queries.
Responsive design so far is the hottest topic of the year amongst web designers, along with the sudden increase of various mobile devices like smart phones, tablets and gadgets which have different screen sizes.
Basically, Responsive design removes the need for mobile versions of your website making your website future-proof for the new types of mobile devices.
The following free Responsive SharePoint theme will introduce you to a world of fluidity that would change your perspective (and stereotype) on what you can do with SharePoint.
This theme is ready to be deployed with minimum effort so you can have a responsive SharePoint-based website ready to go in less than 20 minutes.
At the time this article was posted, there were only few responsive SharePoint-based websites showcased on TopSharePoint.com, that proves how new this technique is in the SharePoint branding community.
We truly hope this free SharePoint theme will help you get started with responsive design and we expect to see some of your customizations popping up all over the place....

.....................

ARTIKEL RUJUKAN 2
Copy dari : http://belajarwebdesign.com/webdesign/cara-sederhana-membuat-responsive-web/

Cara Sederhana Membuat Responsive Web

Melanjutkan postingan Edy Pang tentang Mengenal Responsive Webdesign saya ingin berbagi cara yang cukup sederhana untuk membuat website kita responsive hanya dengan menambah elemen @media-query pada CSS.

Tahap pertama yang harus kita pahami dalam membuat responsive web adalah lebar dari disain blog/situs kita, diantaranya lebar container, wrapper ataupun main.

Kita kasih contoh pada blog saya rudyazhar.com, apa-apa saja yang saya sesuaikan untuk membuatnya menjadi responsive. Tapi untuk mengujinya silahkan anda perkecil tampilan pada browser anda mulai dari yang lebih kecil hingga yang sangat kecil dan lihat apa yang terjadi.. Blog saya tetap mengikuti seberapa lebar tampilan browser tersebut, tidak ada scroll sama sekali kesamping. Itu yang namanya responsive.

Pertama kali kita mencari kode .wrapper yang memiliki lebar 728 pixel, font-size:1.2em dengan line-height: 1.6;

Tahap selanjutkan kita membuat querynya.
Mulai dari yang paling besar dulu.

1 2 3 4 5 6 7 8 9 10

@media screen and (max-width: 860px) {   .wrapper {     width: 95% ;  }   body {font-size: 1em;     line-height: 1.44;}   p {font-size: 0.8em;} }

Untuk ukuran 860 saya membuat lebar .wrapper menjadi 95% dari lebar layar, font-size pada body dibuat 1em dengan line-height menjadi 1.44. Sedangkan font untuk postingan saya buat menjadi 0.8em.

1 2 3 4 5 6 7 8 9 10 11 12 13

@media screen and (max-width:767px) {   #shapeworksbutton {bottom: 52px;     left: 10px;}   #copyright {     padding: 100px 0 0 10px;}   #primary, #html5logo, #codecanyon {display:none;}   #iklan {display:none;}   }

pada ukuran 767 saya hanya menghilangkan beberapa elemen yang saya anggap mengganggu dan menyesuaikan letak iklan paling bawah.

1 2 3 4 5 6 7 8 9 10 11

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), screen and (max-width: 550px) {   body {         font-size:0.7em;     } p {     font-size: 0.7em;}   .wp-pagenavi {display:none;}   }

Nah, ini adalah ukuran terkecil yang saya buat untuk responsibilitas web saya yaitu min-device-width : 320px, disini saya menghilangkan .wp-pagenavi serta mengecilkan lagi ukuran font menjadi 0.7em agar tidak tampak kebesaran saat dibaca melalui layar Handphone.

Dengan tiga tahap diataslah saya membuat blog saya responsive, kemudian langkah terakhir saya test menggunakan responsive tools, jadi kalau dimana ada yang kurang bisa kita sesuaikan lagi.