In this article I will show some simple examples of how Google Developer Tools can be used to help in mobile (responsive) development.
Google Developer Tools (F12) within Chrome is one of those things which you *know* is way more powerful that you have ever cared to look at but this week I was introduced to a very cool new feature – thanks to @simonreid123. The ability to control the veiwport and size of the viewing window, as well as being able to throttle the speed of page load has helped me better design a site for mobile. This does not obviously replace real testing on aa real device, but definitely helps !!
The Mobile button in Developer Tools
In this example we are going to look at the BBC website from today. In a normal browser it looks like this.
Bringing up developer Tools (F12) we can see a mobile button on the toolbar
Clicking on that brings up a new view of the page.
Once I do that I can select a “Device” from the menu
I then chose iPhone 4 and got a smaller screen
Across the top you can see the screen width and markers – and in orange the media queries (as specified by the style sheet) where there are going to be changes
Dragging the tab to resize the browser you can see the changes on the orange lines
Another nice feature is the ability to arbitrarily slow the page load down as if we were on a slow network (more like a phone)
This is a very useful and cool feature I was not aware of. I *know* there are many many many other things I do not know about developer tools….it’s all a great learning experience 🙂