Responsive design and coding seems to be one of the hottest topics right now, and with big reason, mobile traffic has spiked in the last few years, not only from the smartphones, but also from the tablet market. Whether you love your iPhone and jump to your Galaxy Tab for a quick read, there is no denying mobile is a big part of our future.
As such, Web development has to take into account how your content will be viewed, and one of the ways is to adapt the page to the device reading it with a responsive layout. Of course there are other ways, like making a dedicated mobile site, or an app, but that is outside the scope of this tutorial.
Are you ready to jump in the responsive wagon? Excellent, lets go!!!
Introducing Screenqueri.es. This tool helps us test our responsive site by doing 2 things: adjusting the viewport (the viewable area) to that of the device we are simulating, and also sending the useragent (information regarding the browser) of said device to the server. By doing this, we get back a clear picture of what our users will see.
The interface is quite simple to use and can be divided into 4 main areas:
Basically, the URL bar is the place where we input the address of the site we would like to view. As simple as that!! In addition, not only does it work on sites that are live, but you can use local resources. Try it, use a local url for a site you are developing (such as http://localhost/my-site.dev) and you will see it load.
This is more of a label to indicate the device currently being simulated.
Here we have 3 buttons. The first (from left to right) displays the list of available mobile phones, the second displays the list of available tablets and lastly but not less importantly, the final button changes the orientation of the device from portrait to landscape or vice versa. So these are the controls we can use to, for example, request the view of a Samsung S II in landscape mode.
This last button creates a link so we can share the parameters of the current view to other developers. Since this tool is still in beta mode, I would expect it to have the ability to export a JPEG or PNG of the viewport through canvas in a near future, but I guess we will have to see about that one.
There are a couple of other functionalities at the bottom of the page, like reload, which basically reloads the current content, but more importantly a feature still in development called Trueview, which adds the image of the controls we would see in the actual browser of the device; this feature is quite nice but is still in an early stage.
I hope you find this tool as useful as I do, and enjoy using it. Bye!!