I often get this question again and again i.e. how do I test
the site which I designed for responsiveness?
First up all what is
Responsive Design?
Responsive web design (RWD) is a web design
approach aimed at crafting sites to provide an optimal viewing experience—easy
reading and navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from mobile phones to desktop
computer monitors)
A site designed with RWD adapts
the layout to the viewing environment by using fluid, proportion-based grids,
flexible images, and CSS3 media queries, an extension of the
@media
rule.
What are the
advantages of RWD?
With Responsive Design, you can create one design and it
will automatically adapt itself based on the screen size of the mobile device.
This approach offers plenty of advantages:
- It save time and money as you don’t have to maintain separate websites for desktops and mobile phones.
- Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while other link to your desktop site.
- Your Google Analytics reports will paint a better picture of your site’s usage since the data from mobile and desktop users will be consolidated.
- The same will be true for the social sharing stats (Facebook Likes, Tweets, +1’s) since the mobile and desktop versions of your web pages will no longer have different URLs.
- Responsive Designs are easier to maintain as they do not involve any server-side components. You just have to modify the underlying CSS of a page to change its appearance (or layout) on a particular device.
- The earlier design methods looked at user agent strings to determine the mobile device name and the browser that is making the request. That was less accurate and with the number of devices and mobile browsers expanding every day, that matrix is very difficult to maintain. Responsive Design doesn’t care about user agents.
How to test RWD of a
web page?
A good number of websites are now using Responsive Web
Design instead of building separate designs for mobile and desktop screens. The
same design is served to all devices – including desktops, tablets, mobile
phone, e-readers and even gaming consoles – and the layout magically adapts
itself based on the screen’s resolution.
Following websites will help you test your web page for
responsiveness.
- mattkersley.com/responsive – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements.
- quirktools.com/screenfly – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes).
- responsinator.com – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones.
Have fun. Good luck.
