Responsive Bikin Repot

Mengikuti issue-issue bahwa website harus terus dikembangkan performancenya agar support terhadap perangkat selain komputer! Terdengar sedikit pemaksaan sepihak dengan tujuan yang bisa dibilang memang saling menguntungkan :)) Pro kontra selalu ada. Sebagai pemilik blog/web tentu ini menjadi PR tersendiri. Bila perangkat seperti iPhone, iPad atau apapun memang menjadi perangkat utama yg kalian gunakan, harga mati site kalian harus responsive looked ;))
Responsive performance mobile berbeda dengan perangkat lainnya sobat. Blogger telah menanamkan sistem tersendiri guna pemanggilan blognya yakni blogspot agar friendly mobile. Biarkanlah master developer berkerja, kita mah tinggal menunggu hasil akhir saja :d
Seperti kreasi berikut yg diberi nama mobile application framework dibangun memakai MooTools. Apakah itu?

Tools yang berfungsi untuk melihat apakah web/blog kita sudah terlihat seperti yg diinginkan pada perangkat selain komputer. Walau cuma dua device yg ditawarkan, tapi lumayan untuk banding² :p Opensource bos :))
Moobile nama web yg menawarkan jasa tersebut. Oh iyah only work for Safari 5.1.5 or better - Google Chrome 18 or better :D
Setelah membuka webnya, klik option Demo ★ ► See this demo ★ ► kanan atas klik Open. Masukin deh URL tujuan yg mau dilihat :)

         

Ternyata blog saya tidak responsive :d
Ada yg lebih kumplit sob untuk melihat keberadaan si responsive, ini dia Screenqueri :-bd Perangkat meliputi APPLE, iPhone, Samsung, Galaxy Note, Blackberry, LG, Nokia, Motorolla, other @-)

alistapart.com/articles/responsive-web-design/
css-tricks.com/css-media-queries/
coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
paulund.co.uk/css3-animated-media-queries
thecssninja.com/demo/css_chameleon/
webdesignerwall.com/tutorials/css3-media-queries
webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
webdesignerwall.com/demo/elastic-videos/
webdesignerwall.com/demo/adaptive-design/final.html
www.netmagazine.com/opinions/next-chapter-responsive-web-design
responsejs.com/
stild.com/code/jquery-responsive-web/
xoxco.com/projects/code/breakpoints/
bohemianalps.com/tools/grid/
masonry.desandro.com/
www.queness.com/post/11314/everything-you-need-to-build-a-css3-responsive-fluid-layout
www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
line25.com/articles/responsive-web-design-articles-tutorials-guides
isotope.metafizzy.co/index.html
fittextjs.com/
fitvidsjs.com/
html9responsiveboilerstrapjs.com/
www.grahambird.co.uk/lab/doubletake/
adaptive-images.com/
www.wookmark.com/jquery-plugin
googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html
googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
www.htmlcut.com/blog/responsive-webdesign-html5-css3-2012.html
www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
vandelaydesign.com/blog/web-development/turn-any-site-into-a-responsive-site/
nmsdvid.com/snippets/
www.evolutionarydesigns.net/blog/2012/05/22/what-is-responsive-design/
couchable.co/blog/post/using-responsive-css-frameworks-for-faster-development
responsive.gs/
frag.rowanmanning.co.uk/
necolas.github.com/griddle/
daneden.me/baseline/
sebnitu.github.com/HorizontalNav/
iwantaneff.in/repo/plugins/menu-nav/tiny.nav/index.html
flexiejs.com/
webcodebuilder.com/responsive-jquery-plugin-flexslider-feat-kwiks/
www.iosscripts.com/iosslider/
www.xpertdeveloper.com/2012/08/media-queries-for-responsive-design/
johnpolacek.github.com/scrolldeck.js/decks/responsive/
mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator/
www.splashnology.com/article/45-new-tools-and-services-for-web-designers-and-developers/6150/
www.designresourcebox.com/tools-and-jquery-plugins-to-help-you-design-a-website-or-a-web-app-for-mobile/
www.freshdesignweb.com/responsive-web-design-tools-and-techniques.html
www.freshdesignweb.com/useful-responsive-menu-navigation-tutorials.html
www.frescojs.com/
www.npr.github.com/responsiveiframe/
www.themergency.com/footable/
www.splashnology.com/article/responsive-web-design-fresh-tools-articles-and-tutorials/7264/
www.responsiveimg.com
suprb.com/apps/gridalicious/
www.designer-daily.com/20-tools-to-help-you-create-responsive-web-designs-24055
speckyboy.com/2012/11/13/quick-tip-using-css-transitions-in-responsive-web-design/
bradfrost.github.com/this-is-responsive/index.html

Apps to Test Responsive Design On

responsive.is/foodsense.is
jquerypicture.com/
responsivepx.com/
www.responsivegridsystem.com/
www.responsinator.com/
responsive.gs/
mrinalwadhwa.github.com/adaptImages/
lab.maltewassermann.com/viewport-resizer
mattkersley.com/responsive
dfcb.github.com/Responsivator/
designmodo.com/responsive-test/
suprb.com/apps/nested/
res.ponsive.com/
. . .

Hehehe :D

Happy responsive \m/

Responsive Bikin Repot


Subscribe my posts Register For Free!

If you found this page useful, and you want to use short URL. Simply copy and paste the code below into your web site (Ctrl+C to Copy)

3 comments

[?] g+ convert

DON'T ADD LINK [-X
You can use some HTML tags, such as <b>, <i>, <a>, http://...jpg/gif/png/bmp, http://youtu.be/...