grahaDesignstudio Blog's

Pengenalan Responsive Web Design JASA WEB DESAIN | JASA 3D DESAIN INDONESIA | grahaDesignstudio.com
Seperti kita ketahui bahwa pertumbuhan pengguna perangkat mobile dan smartphone untuk browsing internet telah berkembang pesat selama 5 tahun terakhir. Bahkan Morgan Stanley pernah memperkirakan bahwa pada tahun 2015 traffic mobile internet akan menyalip traffic desktop, itu artinya orang yang akses web melalui mobile (handphone & tablet) lebih banyak dibanding personal komputer (desktop & notebook).

Persyaratan bagaimana website harus digunakan dan layar untuk membuka website tersebut pun telah banyak berubah. Sebelumnya situs dioptimasi hanya untuk para pengguna komputer desktop, namun kini desainer semuanya membangun website dengan pendekatan mobile-first untuk memaksimalkan desain UX pada website nya. Tidak hanya itu, pengunjung website sekarang mengharapkan bahwa sebuah situs web di optimalkan untuk mobile browsing, dan jika mereka menemukan sebuah website yang tidak bisa dibuka secara optimal di perangkat mobile maka hal ini dapat menimbulkan kesan pertama yang negatif, menghalangi mereka untuk melakukan bisnis dengan anda. Menurut situs Hubspot; 61% orang akan memiliki opini yang baik/positif dengan sebuah brand ketika mereka (brand) menawarkan pengalaman mobile yang baik atau dengan kata lain website yang bisa dibuka disemua perangkat lebih disukai pengunjung. Bisa dibayangkan sekarang orang ingin membuka website dari layar jam tangan mereka. #shocked



Apa Itu Web Responsive?

Singkatnya, desain web resposif memungkinkan situs website untuk menyesuaikan atau merespon bagaimana, dimana dan dengan apa website tersebut dilihat/diakses oleh seseorang. Hal ini tentu mempengaruhi layout website tersebut secara eksklusif, dan dapat mempengaruhi apa yang ditampilkan pada perangkat tertentu, seperti di ponsel, atau di perangkat yang memiliki layar sentuh.



Responsive Web Design adalah metode desain web yang memfokuskan pada penyediaan user experience yang optimal pada sebuah situs. Web designer & developer mencapai ini dengan membangun sebuah website yang dapat di re-size, re-display serta dapat di restruktursisasi elemen navigasi dan layout nya di berbagai perangkat. Contohnya adalah website The Boston Globe atau website TWD yang anda buka ini.



Sedikit Sejarah Tentang Responsive Web Design.

Istilah responsive web design pertama kali diciptakan oleh Ethan Marcotte pada May 2010 pada sebuah artikel di website A List Apart. Dia menjelaskan bahwa desain web responsif tidaklah satu konsep, tapi betul-betul puncak dari beberapa teknik untuk menyesuaikan situs desktop agar optimal juga di perangkat mobile.



Walau bagaimanapun ada perbedaan signifikan antara mobile website dan responsive website. Perbedaan pertamanya yaitu layout mereka terlihat agak berbeda. Yang kedua adalah bahwa domain situs web mobile berada pada sub domain atau sub folder yang terpisah; biasanya mobile website akan terlihat seperti m.detik.com, namun pada website responsive domain nya adalah sama antara dekstop dan mobile.



Meskipun situs mobile lebih murah dibanding responsive, namun pada kenyataannya bahwa anda memiliki dua domain terpisah dan pada dasarnya dua website memiliki efek dramatis pada SEO dan User Experience (UX). Sering kali situs web mobile tidak akan memiliki peringkat di search engine.



Mengapa Desain Web Responsif Lebih Populer Dibanding Website Versi Mobile Lain?

Tantangan janka panjang dengan aplikasi murni dan situs mobile adalah mereka sangat sulit dalam segi maintenance & development, dimana jika anda membangun dua versi untuk satu website yaitu versi desktop dan versi mobile, berarti programmer anda harus mengoptimasi dua sistem sekaligus, walaupun sistem itu bisa dijadikan satu namun tetap akan memakan lebih banyak waktu dan tenaga bahkan sumber daya untuk mengelola dan mengopsimasi keduanya. Jadi solusinya tetap membuat satu website yang bisa di buka diberbagai perangkat, itu merupakan solusi paling efisien dan murah untuk saat ini dan kedepan. Mengingat pengguna smartphone dan kecepatan internet semakin meningkat seiring waktu.



Desain web responsif telah menjadi standar untuk situs web yang sedang dirancang dan dibangun saat ini dan tidak diragukan lagi akan terus terjadi dalam tahun-tahun kedepan. Sebagaimana desain web responsif menjadi aturan/standar web masa kini, maka pendekatan mobile-first untuk desain web juga pasti akan tumbuh menjadi lebih populer.



Desain web responsif dalam prakteknya menggunakan beberapa metode dan teknik yang berbeda untuk mencapai tujuan yaitu user experience yang optimal untuk website versi mobile.



Desain web yang mobile friendly sekarang merupakan bagian yang sangat penting dari situs website apapun. Jadi jangan ragu untuk memilih opsi Responsive Web Design untuk website versi mobile pada website anda.

Announcement
I will update this article. Back in the days, this worked. In 2011, there are better ways, updated languages in HTML 5 + CSS 3 and many more options. Expect an article explaining this before 20 June.
Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!
This CSS menu will have submenus and will use the web-techniques HTML 4, CSS. In this tutorial, we use the old fashioned hover JavaScript tool.

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.



The Design
First thing we need to do is open up photoshop and create a design for the button. In this instance, we want to make it look very distinctive as a button:

</html script >

• Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
• Customizable through settings and CSS
• Groups related items and adds navigation.
• If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
• Support fancy transitions by using easing plugin
• Adds a nice drop shadow under the zoomed item

Examples

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need.


PicLens Slideshow

Design templates help build an identity for any particular website. Since the techniques are changing very rapidly within the industry, one must be updated all the time. Many designers download the pre-built CSS templates to explore more. At many stages, designers seek help in the form of inspiration that would help them get back to their creativity track. Or they just want to learn a thing or two about the structure of web-sites and build their own projects on top of “bulletproof” templates.


To keep you moving throughout your creative adventure, we have gathered some cool and absolutely Free CSS and XHTML Web Layouts. You can download and use them for your own personal and/or commercial use. Please read the license agreements carefully before using the templates; the licenses can change from time to time. Feel free to express yourself in a new style and… do not forget to share your opinion with us in the comment section below!


HTML5 and CSS3 ( Demo | Download )

Postingan seperti ini mungkin sudah ada sebelumnya di buat oleh para master blogger, bukan hanya mungkin pasti sudah ada, hanya saya saya akan menyajikan ulang dengan gaya bahasa saya sendiri, dan semoga bisa di mengerti olah sobat yang mancari tutorial tantang cara Membuat Navigasi Halaman Bernomor Untuk Blogger.
Saya sarankan sebaiknya backup template sobat sebelum melakukan proses di bawah ini, karena kita akan bermain di dalam Edit HTML.


1.Login ke blogger &gtdashboard--> Design--> Edit HTML
2.Cari Kode ]]></b:skin> (Tekan ctrl + F di keyboard masukan  ]]></b:skin&gt untuk mempermudah pencarian)
3.Copy  dan paste kode script di bawah ini sebelum kode  ]]></b:skin> 

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.


We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.


The first step – CSS roll overs


The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.

Image Examples

Menu Before