Google Chrome blank window for responsive testing

As you already know responsive design is the new thing everyone are talking about these days, but creating this kind of layout can be a pain if you don’t know what you are doing. My first responsive design was somewhat trial and error attempt to create some thing that is functional and reliable. My first big mistake was that i was developing on desktop browser that have scrollbars that affect the width of the screen, ass you all know mobile versions don’t have that problem. So after I figured that out, all css that I was typing for the last 2 days had to be changed.

 

Here are some of mine mistakes and what i learned from them:

  • Many browsers have resize option but when resized you always watch Viewport size numbers and rely on that.
  • On some sizes if you set images to auto resize, always set the max image size because if the browser resizes the images will go with him and you will get a blury, non good images. You can read about that here: http://bit.ly/WsBAuG
  • Use “Cascading” styles. What I mean is that you set your css and work your way down by overriding elements and stiles that you do not need in some sizes.
  • I investigated a little and found out that best thing to use as a menu is the drop down from the top that opens and closes with a button.
  • resize to mobile size: http://thenextweb.com/ or http://www.tilde.io/ or http://www.vogue.co.uk/ and may others

 

 

If you are like me and do everything on Google Chrome, you probably already know that you can’t resize this browser in definitely. But i found a solution for this (if you don’t like preset iframes on some sites to test responsive design like http://mattkersley.com/responsive/ )

 

You can use this:

  • open Bookmark manager
  • create new bookmark
  • type whatever name you like
  • and link paste the code beneath

 


javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

 

What this will do is to open a new blank window with dimensions you set in the popup window that you can resize in definitely (http://bit.ly/SQ6u33)