I have come across this little tool that will save your life 🙂

How it works…

You will need google chrome

https://www.google.com/intl/en/chrome/browser/

With google chrome you can press F12 or right click inspect elements, then you can simply use this to inspect the website make changes in real time without changing the actual website. Similarly you can do the same thing with adobe shadow, but this time is for the specific device, so you could make changes to that specific device.

With a little media queries then you should be able to design for specific devices….

Official specification… 

http://www.w3.org/TR/css3-mediaqueries/

A quick list here for codes

http://cssmediaqueries.com/

http://nmsdvid.com/snippets/

 

 Get Adobe Shadow

Visit the link below and you should follow the easy steps.

http://labs.adobe.com/technologies/shadow/

 

Adobe’s description

Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Shadow will be updated regularly to stay in sync with web standards, web browser updates and support for new mobile devices entering the market, while incorporating user feedback to provide the best functionality and experience possible.

 

It works on the following devices…

  • iPhone
  • iPad
  • iPod
  • Android

Happy developing everyone 🙂